Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from
Nov 8, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c3b1eee
Cache card
timacdonald Nov 8, 2024
a3f8f7d
Exceptions card
timacdonald Nov 8, 2024
8f419f5
Queues card
timacdonald Nov 8, 2024
a91db62
Servers card
timacdonald Nov 8, 2024
ef4a881
Slow jobs card
timacdonald Nov 8, 2024
90c7a7e
Slow outgoing requests card
timacdonald Nov 8, 2024
9db00f8
Slow queries card
timacdonald Nov 8, 2024
4aeb794
Slow requests card
timacdonald Nov 8, 2024
a5933b3
Usage card
timacdonald Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/pulse.js
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions resources/js/pulse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion resources/views/components/card-header.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/cache.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/exceptions.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/livewire/queues.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 ))
Expand Down
6 changes: 3 additions & 3 deletions resources/views/livewire/servers.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/slow-jobs.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/slow-outgoing-requests.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/slow-queries.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/slow-requests.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/usage.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down