From 51c1a2ad4a6f1dc2be68d91d8968d9675db085b6 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 4 Oct 2026 12:35:53 +0200
Subject: [PATCH] fix: add column headers to analytics tables

---
 resources/views/livewire/analytics.blade.php         | 11 ++++++++++-
 .../views/livewire/traffic/_hosts-list.blade.php     |  8 +++++++-
 .../views/livewire/traffic/_paths-list.blade.php     | 12 +++++++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/resources/views/livewire/analytics.blade.php b/resources/views/livewire/analytics.blade.php
index 1e984ac775..cfcb6e1594 100644
--- a/resources/views/livewire/analytics.blade.php
+++ b/resources/views/livewire/analytics.blade.php
@@ -255,6 +255,13 @@ $appListboxOptions = array_merge(
                     @else
                         @php $maxAppRequests = max(1, (int) collect($topApps)->max('requests')); @endphp
                         <div x-data="{ page: 0, per: 10, total: {{ count($topApps) }} }">
+                            <div class="flex items-center gap-3 border-b border-neutral-200 px-4 py-2 text-[11px] font-medium text-neutral-500 dark:border-white/[0.07] dark:text-fg-dim">
+                                <span class="min-w-0 flex-1">Application / service</span>
+                                <span class="hidden w-16 shrink-0 text-right sm:inline" title="Request volume relative to the busiest row in this list">Volume</span>
+                                <span class="w-16 shrink-0 text-right">Requests</span>
+                                <span class="hidden w-16 shrink-0 text-right sm:inline" title="Total response data sent">Bandwidth</span>
+                                <span class="size-3.5 shrink-0" aria-hidden="true"></span>
+                            </div>
                             @foreach ($topApps as $row)
                                 @php
                                     $appHref = $row['link'] ?? null;
@@ -279,7 +286,7 @@ $appListboxOptions = array_merge(
                                     <div class="hidden h-1 w-16 shrink-0 overflow-hidden rounded-full bg-neutral-100 sm:block dark:bg-white/[0.06]">
                                         <div class="h-full rounded-full bg-[var(--chart-status-3xx)]" style="width: {{ $appWidth }}%;"></div>
                                     </div>
-                                    <span class="w-12 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
+                                    <span class="w-16 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
                                         title="{{ number_format($row['requests']) }} requests">{{ compactNumber($row['requests']) }}</span>
                                     <span class="hidden w-16 shrink-0 text-right text-[11px] tabular-nums text-neutral-400 sm:inline dark:text-fg-faint">{{ formatBytes($row['bandwidth']) }}</span>
                                     @if ($appHref)
@@ -287,6 +294,8 @@ $appListboxOptions = array_merge(
                                             fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                         </svg>
+                                    @else
+                                        <span class="size-3.5 shrink-0" aria-hidden="true"></span>
                                     @endif
                                 </{{ $appHref ? 'a' : 'div' }}>
                             @endforeach
diff --git a/resources/views/livewire/traffic/_hosts-list.blade.php b/resources/views/livewire/traffic/_hosts-list.blade.php
index 0a1eda3a34..710e8fa637 100644
--- a/resources/views/livewire/traffic/_hosts-list.blade.php
+++ b/resources/views/livewire/traffic/_hosts-list.blade.php
@@ -16,6 +16,12 @@
         icon-name="unordered-list" />
 @else
     <div x-data="{ page: 0, per: 10, total: {{ count($hosts) }} }">
+        <div class="flex items-center gap-3 border-b border-neutral-200 px-4 py-2 text-[11px] font-medium text-neutral-500 dark:border-white/[0.07] dark:text-fg-dim">
+            <span class="min-w-0 flex-1">Host</span>
+            <span class="hidden w-16 shrink-0 text-right sm:inline" title="Request volume relative to the busiest row in this list">Volume</span>
+            <span class="w-16 shrink-0 text-right">Requests</span>
+            <span class="hidden w-16 shrink-0 text-right sm:inline" title="Total response data sent">Bandwidth</span>
+        </div>
         @foreach ($hosts as $row)
             @php
                 $host = (string) ($row['host'] ?? '');
@@ -35,7 +41,7 @@
                 <div class="hidden h-1 w-16 shrink-0 overflow-hidden rounded-full bg-neutral-100 sm:block dark:bg-white/[0.06]">
                     <div class="h-full rounded-full bg-[var(--chart-status-3xx)]" style="width: {{ $width }}%;"></div>
                 </div>
-                <span class="w-12 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
+                <span class="w-16 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
                     title="{{ number_format($requests) }} requests">{{ compactNumber($requests) }}</span>
                 <span class="hidden w-16 shrink-0 text-right text-[11px] tabular-nums text-neutral-400 sm:inline dark:text-fg-faint">{{ formatBytes((int) ($row['bandwidth'] ?? 0)) }}</span>
             </div>
diff --git a/resources/views/livewire/traffic/_paths-list.blade.php b/resources/views/livewire/traffic/_paths-list.blade.php
index 3ca1a97bdd..ad5e28f46f 100644
--- a/resources/views/livewire/traffic/_paths-list.blade.php
+++ b/resources/views/livewire/traffic/_paths-list.blade.php
@@ -18,6 +18,16 @@
         icon-name="unordered-list" />
 @else
     <div x-data="{ page: 0, per: 10, total: {{ count($paths) }} }">
+        <div class="flex items-center gap-3 border-b border-neutral-200 px-4 py-2 text-[11px] font-medium text-neutral-500 dark:border-white/[0.07] dark:text-fg-dim">
+            <span class="min-w-0 flex-1">Path</span>
+            <span class="hidden w-16 shrink-0 text-right sm:inline" title="Request volume relative to the busiest row in this list">Volume</span>
+            <span class="w-16 shrink-0 text-right">Requests</span>
+            <span class="hidden w-14 shrink-0 text-right sm:inline" title="HTTP 4xx client-error responses">4xx errors</span>
+            <span class="w-14 shrink-0 text-right" title="HTTP 5xx server-error responses">5xx errors</span>
+            <span class="hidden w-12 shrink-0 text-right lg:inline" title="Percentage of requests with a 4xx or 5xx response">Error %</span>
+            <span class="hidden w-16 shrink-0 text-right sm:inline" title="Total response data sent">Bandwidth</span>
+            <span class="hidden w-16 shrink-0 text-right md:inline" title="95% of requests completed within this response time">p95 latency</span>
+        </div>
         @foreach ($paths as $path)
             @php
                 $domain = $path['domain'] ?? null;
@@ -41,7 +51,7 @@
                 <div class="hidden h-1 w-16 shrink-0 overflow-hidden rounded-full bg-neutral-100 sm:block dark:bg-white/[0.06]">
                     <div class="h-full rounded-full bg-[var(--chart-status-3xx)]" style="width: {{ $width }}%;"></div>
                 </div>
-                <span class="w-12 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
+                <span class="w-16 shrink-0 text-right text-[12px] font-medium tabular-nums text-black dark:text-fg"
                     title="{{ number_format($requests) }} requests">{{ compactNumber($requests) }}</span>
                 <span class="hidden w-14 shrink-0 text-right text-[11px] font-medium tabular-nums text-pink-600 sm:inline dark:text-pink-400"
                     title="{{ number_format($s4xx) }} client-error responses">{{ compactNumber($s4xx) }} 4xx</span>