From 7037633f4571d128959cff5e86f7f6fae9e0a36e Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Mon, 10 Aug 2026 14:04:24 +0200 Subject: [PATCH] feat(dashboard): refresh metrics and color server status indicators Refresh visible dashboard metrics every minute and after backgrounding. Replace server status badges with accessible color-coded icon borders and status text. --- .gitignore | 1 + resources/views/livewire/dashboard.blade.php | 15 ++++---- .../dashboard/server-metrics-chart.blade.php | 33 +++++++++++++++++- .../views/livewire/server/index.blade.php | 34 ++++++++----------- .../DashboardServerMetricsChartTest.php | 14 ++++++++ .../ServerStatusIndicatorDesignTest.php | 34 +++++++++++++++++++ 6 files changed, 103 insertions(+), 28 deletions(-) create mode 100644 tests/Feature/ServerStatusIndicatorDesignTest.php diff --git a/.gitignore b/.gitignore index 460009bd9..ce9cc5dd7 100644 --- a/.gitignore +++ b/.gitignore @@ -38,6 +38,7 @@ docker/coolify-realtime/node_modules .DS_Store CHANGELOG.md /.workspaces +/.superpowers/ tests/Browser/Screenshots tests/v4/Browser/Screenshots ref diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php index d20bf327c..652dbb0e2 100644 --- a/resources/views/livewire/dashboard.blade.php +++ b/resources/views/livewire/dashboard.blade.php @@ -187,8 +187,13 @@ @endif
-
+
$serverStatusType === 'success', + 'border-amber-500/70' => $serverStatusType === 'warning', + 'border-red-500/70' => $serverStatusType === 'error', + ])>
@@ -201,12 +206,6 @@

- - @unless ($server->isMetricsEnabled()) -
- -
- @endunless @endforeach
diff --git a/resources/views/livewire/dashboard/server-metrics-chart.blade.php b/resources/views/livewire/dashboard/server-metrics-chart.blade.php index d61b0670e..aae36747a 100644 --- a/resources/views/livewire/dashboard/server-metrics-chart.blade.php +++ b/resources/views/livewire/dashboard/server-metrics-chart.blade.php @@ -1,6 +1,37 @@
+ x-data="{ + hiddenAt: null, + refreshInterval: null, + visibilityHandler: null, + init() { + this.visibilityHandler = () => { + if (document.hidden) { + this.hiddenAt = Date.now(); + return; + } + + if (this.hiddenAt && Date.now() - this.hiddenAt >= 60000) { + $wire.loadData(); + } + + this.hiddenAt = null; + }; + + document.addEventListener('visibilitychange', this.visibilityHandler); + this.refreshInterval = window.setInterval(() => { + if (!document.hidden) { + $wire.loadData(); + } + }, 60000); + + $wire.loadData(); + }, + destroy() { + window.clearInterval(this.refreshInterval); + document.removeEventListener('visibilitychange', this.visibilityHandler); + }, + }">
@script diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php index 14311305b..99f63f8cd 100644 --- a/resources/views/livewire/server/index.blade.php +++ b/resources/views/livewire/server/index.blade.php @@ -41,14 +41,19 @@ default => 'Validation required', }; + $statusType = match (true) { + $isReady => 'success', + $isTransferredAway || $server->settings->force_disabled => 'error', + default => 'warning', + }; + return [ 'uuid' => $server->uuid, 'name' => $server->name, 'description' => $server->description ?: 'No description', 'href' => route('server.show', ['server_uuid' => $server->uuid]), 'status' => $status, - 'statusType' => $isReady ? 'success' : 'error', - 'ready' => $isReady, + 'statusType' => $statusType, ]; })->values(); @endphp @@ -121,8 +126,9 @@
-
+
@@ -132,13 +138,6 @@ x-text="server.description">

-
- - - - -
@@ -154,8 +153,9 @@
-
+
@@ -165,12 +165,8 @@ x-text="server.description">

-
- - - - +
+
diff --git a/tests/Feature/DashboardServerMetricsChartTest.php b/tests/Feature/DashboardServerMetricsChartTest.php index 6d4f345a9..196526fcf 100644 --- a/tests/Feature/DashboardServerMetricsChartTest.php +++ b/tests/Feature/DashboardServerMetricsChartTest.php @@ -65,6 +65,20 @@ it('configures the dashboard chart as a ten minute cpu and memory sparkline with ->toContain('labels: { show: false }'); }); +it('refreshes dashboard metrics every minute while visible and after returning from the background', function () { + $chart = file_get_contents(resource_path('views/livewire/dashboard/server-metrics-chart.blade.php')); + + expect($chart) + ->toContain('window.setInterval') + ->toContain('60000') + ->toContain('document.hidden') + ->toContain("document.addEventListener('visibilitychange'") + ->toContain('Date.now() - this.hiddenAt >= 60000') + ->toContain('$wire.loadData()') + ->toContain('window.clearInterval') + ->toContain("document.removeEventListener('visibilitychange'"); +}); + it('keeps the status badge only on server cards without metrics', function () { $dashboard = file_get_contents(resource_path('views/livewire/dashboard.blade.php')); diff --git a/tests/Feature/ServerStatusIndicatorDesignTest.php b/tests/Feature/ServerStatusIndicatorDesignTest.php new file mode 100644 index 000000000..e29857c49 --- /dev/null +++ b/tests/Feature/ServerStatusIndicatorDesignTest.php @@ -0,0 +1,34 @@ +not->toContain('toContain("'border-emerald-500/70' => \$serverStatusType === 'success'") + ->toContain("'border-amber-500/70' => \$serverStatusType === 'warning'") + ->toContain("'border-red-500/70' => \$serverStatusType === 'error'") + ->toContain('title="{{ $serverStatus }}"') + ->toContain('aria-label="Server status: {{ $serverStatus }}"'); + + expect(substr_count($serverIndex, 'toBe(1) + ->and($serverIndex) + ->toContain("\$isReady => 'success'") + ->toContain("\$isTransferredAway || \$server->settings->force_disabled => 'error'") + ->toContain("default => 'warning'") + ->toContain("server.statusType === 'success' ? 'border-emerald-500/70'") + ->toContain("server.statusType === 'warning' ? 'border-amber-500/70'") + ->toContain("'border-red-500/70'") + ->toContain(':title="server.status"') + ->toContain(':aria-label="`Server status: ${server.status}`"'); +}); + +test('server table keeps status text without a badge', function () { + $serverIndex = file_get_contents(resource_path('views/livewire/server/index.blade.php')); + + expect($serverIndex) + ->toContain('') + ->toContain('text-[11px] font-medium') + ->not->toContain(''); +});