From 2aa656becef918c55a041e29d66dfdda971a1745 Mon Sep 17 00:00:00 2001 From: Aditya Tripathi Date: Wed, 16 Sep 2026 08:49:20 +0000 Subject: [PATCH] refactor(metrics): mirror analytics header/overview card, declutter KPI tiles --- app/Livewire/Fleet/Metrics.php | 20 -- .../views/livewire/fleet/metrics.blade.php | 172 ++++++++++-------- 2 files changed, 101 insertions(+), 91 deletions(-) diff --git a/app/Livewire/Fleet/Metrics.php b/app/Livewire/Fleet/Metrics.php index e29f8314ae..0d44d1d470 100644 --- a/app/Livewire/Fleet/Metrics.php +++ b/app/Livewire/Fleet/Metrics.php @@ -35,8 +35,6 @@ class Metrics extends Component #[Url(as: 'cmetric')] public string $containerMetric = 'cpu'; - public bool $live = false; - /** @var array */ public array $kpis = []; @@ -49,8 +47,6 @@ class Metrics extends Component /** @var array Trend series for the charts, also embedded for first paint. */ public array $chartData = []; - public ?string $lastUpdatedAt = null; - /** @var array */ protected array $containerMetaCache = []; @@ -91,21 +87,6 @@ class Metrics extends Component $this->loadData(); } - public function isLivePollable(): bool - { - return $this->live && $this->range === '24h'; - } - - /** - * Re-pull within the 60s cache TTL. The TTL bounds staleness, so a refresh is a - * cheap cache-hit reload rather than a global cache flush (matches the Analytics - * live toggle, which also relies on the TTL). - */ - public function refresh(): void - { - $this->loadData(); - } - /** * @return Collection */ @@ -168,7 +149,6 @@ class Metrics extends Component $this->kpis = FleetMetricsAggregator::fleetKpis($rows); $this->topContainers = FleetMetricsAggregator::rankContainers($containers, $this->containerMetric); $this->chartData = $this->buildChartPayload($series); - $this->lastUpdatedAt = now()->toIso8601String(); $this->dispatch("refreshChartData-{$this->chartId}", $this->chartData); } diff --git a/resources/views/livewire/fleet/metrics.blade.php b/resources/views/livewire/fleet/metrics.blade.php index 514ff66d4e..db28a47285 100644 --- a/resources/views/livewire/fleet/metrics.blade.php +++ b/resources/views/livewire/fleet/metrics.blade.php @@ -1,79 +1,104 @@ -
- {{-- Header + controls --}} -
-
-

Metrics

-

Resource usage across your servers.

+ '', 'label' => 'All servers']], + collect($serverOptions)->map(fn ($name, $uuid) => ['value' => $uuid, 'label' => $name])->values()->all(), +); +?> +
+ + Metrics | Coolify + + + {{-- Header --}} +
+
+

Metrics

+

+ Resource usage across every server, reported by Sentinel. +

+ @if ($servers->isNotEmpty()) -
- @if ($lastUpdatedAt) - - @endif - -
- @foreach (['24h', '7d', '30d'] as $r) - - @endforeach +
+
+ +
+ +
+
+ @foreach (['24h' => '24 hours', '7d' => '7 days', '30d' => '30 days'] as $value => $label) + + @endforeach +
-
@endif
@if ($servers->isEmpty()) - - - - + + + + View servers + + @else - {{-- KPI tiles --}} -
-
- Servers online - {{ $kpis['serversOnline'] ?? 0 }}/{{ $kpis['serversTotal'] ?? 0 }} - @if (($kpis['needsAttention'] ?? 0) > 0) - {{ $kpis['needsAttention'] }} need attention - @else - All healthy - @endif + {{-- Overview KPIs --}} + +
+
+ Servers online + {{ $kpis['serversOnline'] ?? 0 }}/{{ $kpis['serversTotal'] ?? 0 }} + @if (($kpis['needsAttention'] ?? 0) > 0) + {{ $kpis['needsAttention'] }} need attention + @endif +
+
+ + Fleet CPU + @if ($kpis['cpuApproximate'] ?? false) + ~ + @endif + + {{ round($kpis['cpuAvg'] ?? 0) }}% + @if ($kpis['cpuBusiest'] ?? null) + Busiest {{ $kpis['cpuBusiest']['name'] }} {{ round($kpis['cpuBusiest']['percent']) }}% + @endif +
+
+ Fleet memory + {{ round($kpis['memPercent'] ?? 0) }}% + {{ formatBytes($kpis['memUsed'] ?? 0) }} / {{ formatBytes($kpis['memTotal'] ?? 0) }} +
+
+ Fleet disk + {{ round($kpis['diskPercent'] ?? 0) }}% + {{ formatBytes($kpis['diskUsed'] ?? 0) }} / {{ formatBytes($kpis['diskTotal'] ?? 0) }} +
+
+ Fleet network + {{ formatBytes(($kpis['netRx'] ?? 0) + ($kpis['netTx'] ?? 0)) }}/s + ↓{{ formatBytes($kpis['netRx'] ?? 0) }} ↑{{ formatBytes($kpis['netTx'] ?? 0) }} +
+
+ Containers + {{ compactNumber($kpis['containers'] ?? 0) }} +
-
- Fleet CPU @if ($kpis['cpuApproximate'] ?? false)~@endif - {{ round($kpis['cpuAvg'] ?? 0) }}% - @if ($kpis['cpuBusiest'] ?? null)Busiest: {{ $kpis['cpuBusiest']['name'] }} {{ round($kpis['cpuBusiest']['percent']) }}%@endif -
-
- Fleet memory - {{ round($kpis['memPercent'] ?? 0) }}% - {{ formatBytes($kpis['memUsed'] ?? 0) }} / {{ formatBytes($kpis['memTotal'] ?? 0) }} -
-
- Fleet disk - {{ round($kpis['diskPercent'] ?? 0) }}% - {{ formatBytes($kpis['diskUsed'] ?? 0) }} / {{ formatBytes($kpis['diskTotal'] ?? 0) }} -
-
- Fleet network - {{ formatBytes(($kpis['netRx'] ?? 0) + ($kpis['netTx'] ?? 0)) }}/s - rx {{ formatBytes($kpis['netRx'] ?? 0) }}/s ยท tx {{ formatBytes($kpis['netTx'] ?? 0) }}/s -
-
- Containers - {{ compactNumber($kpis['containers'] ?? 0) }} - running -
-
+ {{-- Trend charts --}}
@@ -87,7 +112,8 @@
{{-- Servers table --}} - +
Server @@ -119,25 +145,29 @@ {{-- Hottest containers --}} - + -
+
@foreach (['cpu' => 'CPU', 'memory' => 'Memory', 'disk' => 'Disk', 'network' => 'Network'] as $m => $mlabel) + @class([$tabButtonBase, $containerMetric === $m ? $tabButtonActive : $tabButtonInactive])> + {{ $mlabel }} + @endforeach
@if (empty($topContainers))
- +
@else
Container Server - {{ ucfirst($containerMetric) }} + {{ ['cpu' => 'CPU', 'memory' => 'Memory', 'disk' => 'Disk', 'network' => 'Network'][$containerMetric] }}
@foreach ($topContainers as $c)