[1.x] Format dates to browsers timezone (#417)

* Cache card * Exceptions card * Queues card * Servers card * Slow jobs card * Slow outgoing requests card * Slow queries card * Slow requests card * Usage card
laravel · Nov 8, 2024 · 382a301 · 382a301
1 parent 5dd3cd2
commit 382a301
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 14 deletions.
diff --git a/dist/pulse.js b/dist/pulse.js
diff --git a/resources/js/pulse.js b/resources/js/pulse.js
@@ -1,3 +1,27 @@
 import Chart from 'chart.js/auto';
 
+const formatDate = (value) => {
+    if (value.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/) === null) {
+        throw new Error(`Unknown date format [${value}].`);
+    }
+
+    const [date, time] = value.split(' ')
+    const [year, month, day] = date.split('-').map(Number)
+    const [hour, minute, second] = time.split(':').map(Number)
+
+    return new Date(
+        Date.UTC(year, month - 1, day, hour, minute, second, 0)
+    ).toLocaleString(undefined, {
+        year: "2-digit",
+        day: "2-digit",
+        month: "2-digit",
+        hourCycle: "h24",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        timeZoneName: "short"
+    });
+}
+
 window.Chart = Chart;
+window.formatDate = formatDate
diff --git a/resources/views/components/card-header.blade.php b/resources/views/components/card-header.blade.php
@@ -8,7 +8,7 @@
                 </div>
             @endif
             <hgroup class="flex flex-wrap items-baseline gap-x-2 overflow-hidden">
-                <h2 class="text-base font-bold text-gray-600 dark:text-gray-300 truncate" title="{{ $title }}">{{ $name }}</h2>
+                <h2 class="text-base font-bold text-gray-600 dark:text-gray-300 truncate" @if($attributes->has('x-bind:title')) x-bind:title="{{ $attributes->get('x-bind:title') }}" @else title="{{ $title }}" @endif>{{ $name }}</h2>
                 @if ($details)
                     <p class="text-gray-400 dark:text-gray-600 font-medium truncate"><small class="text-xs">{{ $details }}</small></p>
                 @endif

diff --git a/resources/views/livewire/cache.blade.php b/resources/views/livewire/cache.blade.php
@@ -2,7 +2,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Cache"
-        title="Global Time: {{ number_format($allTime) }}ms; Global run at: {{ $allRunAt }}; Key Time: {{ number_format($keyTime) }}ms; Key run at: {{ $keyRunAt }};"
+        x-bind:title="`Global Time: {{ number_format($allTime) }}ms; Global run at: ${formatDate('{{ $allRunAt }}')}; Key Time: {{ number_format($keyTime) }}ms; Key run at: ${formatDate('{{ $keyRunAt }}')};`"
         details="past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/exceptions.blade.php b/resources/views/livewire/exceptions.blade.php
@@ -1,7 +1,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Exceptions"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/queues.blade.php b/resources/views/livewire/queues.blade.php
@@ -2,7 +2,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Queues"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>
@@ -196,7 +196,7 @@ class="h-14"
         })
     },
     labels(readings) {
-        return Object.keys(readings.queued)
+        return Object.keys(readings.queued).map(formatDate)
     },
     scale(data) {
         return Object.values(data).map(value => value * (1 / config.sampleRate ))

diff --git a/resources/views/livewire/servers.blade.php b/resources/views/livewire/servers.blade.php
@@ -49,7 +49,7 @@ class="overflow-x-auto pb-px default:col-span-full default:lg:col-span-{{ $cols
                 </div>
                 <div wire:key="{{ $slug }}-name" class="flex items-center pr-8 xl:pr-12 {{ $servers->count() > 1 ? 'py-2' : '' }} {{ ! $server->recently_reported ? 'opacity-25 animate-pulse' : '' }}">
                     <x-pulse::icons.server class="w-6 h-6 mr-2 stroke-gray-500 dark:stroke-gray-400" />
-                    <span class="text-base font-bold text-gray-600 dark:text-gray-300" title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};">{{ $server->name }}</span>
+                    <span class="text-base font-bold text-gray-600 dark:text-gray-300" x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`">{{ $server->name }}</span>
                 </div>
                 <div wire:key="{{ $slug }}-cpu" class="flex items-center {{ $servers->count() > 1 ? 'py-2' : '' }} {{ ! $server->recently_reported ? 'opacity-25 animate-pulse' : '' }}">
                     <div class="text-xl font-bold text-gray-700 dark:text-gray-200 w-14 whitespace-nowrap tabular-nums">
@@ -129,7 +129,7 @@ class="w-full min-w-[5rem] max-w-xs h-9 relative"
             {
                 type: 'line',
                 data: {
-                    labels: config.labels,
+                    labels: config.labels.map(formatDate),
                     datasets: [
                         {
                             label: 'CPU Percent',
@@ -209,7 +209,7 @@ class="w-full min-w-[5rem] max-w-xs h-9 relative"
             {
                 type: 'line',
                 data: {
-                    labels: config.labels,
+                    labels: config.labels.map(formatDate),
                     datasets: [
                         {
                             label: 'Memory Used',

diff --git a/resources/views/livewire/slow-jobs.blade.php b/resources/views/livewire/slow-jobs.blade.php
@@ -1,7 +1,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Slow Jobs"
-        title="Time: {{ number_format($time, 0) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time, 0) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="{{ is_array($config['threshold']) ? '' : $config['threshold'].'ms threshold, ' }}past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/slow-outgoing-requests.blade.php b/resources/views/livewire/slow-outgoing-requests.blade.php
@@ -2,7 +2,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Slow Outgoing Requests"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="{{ is_array($config['threshold']) ? '' : $config['threshold'].'ms threshold, ' }}past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/slow-queries.blade.php b/resources/views/livewire/slow-queries.blade.php
@@ -19,7 +19,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Slow Queries"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="{{ is_array($config['threshold']) ? '' : $config['threshold'].'ms threshold, ' }}past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/slow-requests.blade.php b/resources/views/livewire/slow-requests.blade.php
@@ -1,7 +1,7 @@
 <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Slow Requests"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="{{ is_array($config['threshold']) ? '' : $config['threshold'].'ms threshold, ' }}past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>

diff --git a/resources/views/livewire/usage.blade.php b/resources/views/livewire/usage.blade.php
@@ -6,7 +6,7 @@
             'jobs' => 'Top 10 Users Dispatching Jobs',
             default => 'Application Usage'
         }"
-        title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
+        x-bind:title="`Time: {{ number_format($time) }}ms; Run at: ${formatDate('{{ $runAt }}')};`"
         details="{{ $this->usage === 'slow_requests' ? (is_array($slowRequestsConfig['threshold']) ? '' : $slowRequestsConfig['threshold'].'ms threshold, ') : '' }}past {{ $this->periodForHumans() }}"
     >
         <x-slot:icon>