Cache card

Author: timacdonald

dist/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

resources/js/pulse.js

@@ -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

resources/views/components/card-header.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>