From af68949e07af6cceaef541aeaef85b586983d2e3 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 10 Jul 2026 14:02:46 +0200
Subject: [PATCH] feat: change workload traffic sorting to prioritize recent
 flows over volume with fallback to bytes

Update summarizeTraffic to sort flows by observedAt timestamp (newest first) instead of bytes, add fallback to bytes when timestamps are equal/invalid/missing, modify TrafficBars to re-sort top 5 flows by bytes for volume-based visualization while preserving timestamp-based ordering in main traffic list
---
 frontend/src/pages/Workloads.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Workloads.tsx b/frontend/src/pages/Workloads.tsx
index 377690d..2e5a9c8 100644
--- a/frontend/src/pages/Workloads.tsx
+++ b/frontend/src/pages/Workloads.tsx
@@ -122,7 +122,20 @@ function summarizeTraffic(traffic: Array<Record<string, unknown>>) {
       matchingPolicies,
     });
   }
-  return Array.from(summaries.values()).sort((left, right) => right.bytes - left.bytes);
+  return Array.from(summaries.values()).sort((left, right) => {
+    const leftTime = Date.parse(left.observedAt || "");
+    const rightTime = Date.parse(right.observedAt || "");
+    if (Number.isFinite(leftTime) && Number.isFinite(rightTime) && leftTime !== rightTime) {
+      return rightTime - leftTime;
+    }
+    if (Number.isFinite(rightTime) && !Number.isFinite(leftTime)) {
+      return 1;
+    }
+    if (Number.isFinite(leftTime) && !Number.isFinite(rightTime)) {
+      return -1;
+    }
+    return right.bytes - left.bytes;
+  });
 }
 
 function endpointText(flow: TrafficSummary) {
@@ -138,7 +151,7 @@ function uniqueValues(values: string[]) {
 }
 
 function TrafficBars({ traffic }: { traffic: TrafficSummary[] }) {
-  const top = traffic.slice(0, 5);
+  const top = [...traffic].sort((left, right) => right.bytes - left.bytes).slice(0, 5);
   const max = Math.max(...top.map((flow) => flow.bytes), 1);
   if (!top.length) {
     return <div className="rounded-md border border-border p-3 text-xs text-slate-500">No traffic data yet.</div>;