From e4dff0cad181fb2279950521bd2790dc32a0dde4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 23 Mar 2026 21:55:29 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20align=20RoutesMetrics=20with=20mock=20?=
 =?UTF-8?q?=E2=80=94=20chart=20titles,=20Invalid=20Date=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix Invalid Date in Errors bar chart (guard against null timestamps)
- Table header: "Route Metrics" → "Per-Route Performance"
- Chart titles: add units — "Throughput (msg/s)", "Latency (ms)",
  "Errors by Route", "Message Volume (msg/min)"
- Add yLabel to charts for axis labels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Routes/RoutesMetrics.tsx | 35 ++++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/src/pages/Routes/RoutesMetrics.tsx b/ui/src/pages/Routes/RoutesMetrics.tsx
index a11794ae..6aa568a1 100644
--- a/ui/src/pages/Routes/RoutesMetrics.tsx
+++ b/ui/src/pages/Routes/RoutesMetrics.tsx
@@ -47,13 +47,19 @@ export default function RoutesMetrics() {
   );
 
   const chartData = useMemo(() =>
-    (timeseries?.buckets || []).map((b: any) => ({
-      time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      throughput: b.totalCount,
-      latency: b.avgDurationMs,
-      errors: b.failedCount,
-      successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
-    })),
+    (timeseries?.buckets || []).map((b: any, i: number) => {
+      const ts = b.timestamp ? new Date(b.timestamp) : null;
+      const time = ts && !isNaN(ts.getTime())
+        ? ts.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        : String(i);
+      return {
+        time,
+        throughput: b.totalCount ?? 0,
+        latency: b.avgDurationMs ?? 0,
+        errors: b.failedCount ?? 0,
+        successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
+      };
+    }),
     [timeseries],
   );
 
@@ -163,7 +169,7 @@ export default function RoutesMetrics() {
 
       <div className={styles.tableSection}>
         <div className={styles.tableHeader}>
-          <span className={styles.tableTitle}>Route Metrics</span>
+          <span className={styles.tableTitle}>Per-Route Performance</span>
           <span className={styles.tableMeta}>{rows.length} routes</span>
         </div>
         <DataTable
@@ -177,24 +183,25 @@ export default function RoutesMetrics() {
       {chartData.length > 0 && (
         <div className={styles.chartGrid}>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Throughput</div>
-            <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} height={200} />
+            <div className={styles.chartTitle}>Throughput (msg/s)</div>
+            <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} yLabel="msg/s" height={200} />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Latency</div>
+            <div className={styles.chartTitle}>Latency (ms)</div>
             <LineChart
               series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]}
+              yLabel="ms"
               height={200}
               threshold={{ value: 300, label: 'SLA 300ms' }}
             />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Errors</div>
+            <div className={styles.chartTitle}>Errors by Route</div>
             <BarChart series={[{ label: 'Errors', data: chartData.map((d: any) => ({ x: d.time as string, y: d.errors })) }]} height={200} />
           </div>
           <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Success Rate</div>
-            <AreaChart series={[{ label: 'Success Rate', data: chartData.map((d: any, i: number) => ({ x: i, y: d.successRate })) }]} height={200} />
+            <div className={styles.chartTitle}>Message Volume (msg/min)</div>
+            <AreaChart series={[{ label: 'Volume', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} yLabel="msg/min" height={200} />
           </div>
         </div>
       )}