From 5335798dec9db71710062dd08899a363ed9e7ff4 Mon Sep 17 00:00:00 2001
From: James Barford-Evans <james.barford-evans@arm.com>
Date: Fri, 3 Oct 2025 11:48:36 +0100
Subject: [PATCH 1/2] Fix; collector offline status

---
 .../src/pages/status_new/collector.vue        | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index 8c46e59f3..3d61389a5 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -1,5 +1,6 @@
-<script setup lang="ts">
-import {ref, Ref} from "vue";
+<script setup lang="tsx">
+import {h, ref, Ref} from "vue";
+import {parseISO, differenceInHours} from "date-fns";
 import {formatISODate} from "../../utils/formatting";
 import {CollectorConfig, BenchmarkJobStatus} from "./data";
 
@@ -40,6 +41,37 @@ function formatJobStatus(status: BenchmarkJobStatus): string {
       return "Unknown";
   }
 }
+
+function ActiveStatus({collector}: {collector: CollectorConfig}) {
+  const now = new Date();
+  const maxInactivityHours = 1;
+  const lastHeartBeatAt = parseISO(collector.lastHeartbeatAt);
+  const hourDiff = differenceInHours(now, lastHeartBeatAt);
+  let statusText = "Active";
+  let statusClass = "active";
+
+  switch (collector.isActive) {
+    case true:
+      if (hourDiff >= maxInactivityHours) {
+        statusText = "Offline";
+        statusClass = "inactive";
+      } else {
+        statusText = "Active";
+        statusClass = "active";
+      }
+      break;
+    case false:
+      statusText = "Inactive";
+      statusClass = "inactive";
+      break;
+  }
+
+  return (
+    <span class={`collector-sm-padding-left-right status ${statusClass}`}>
+      {statusText}
+    </span>
+  );
+}
 </script>
 
 <template>
@@ -54,12 +86,7 @@ function formatJobStatus(status: BenchmarkJobStatus): string {
             class="collector-sm-padding-left-right collector-left-divider"
             >{{ collector.target }}</span
           >
-          <span
-            class="collector-sm-padding-left-right status"
-            :class="statusClass(collector)"
-          >
-            {{ collector.isActive ? "Active" : "Inactive" }}
-          </span>
+          <ActiveStatus :collector="collector" />
         </span>
       </div>
     </div>

From 33704e279e304a2825a22598a3b28a409a321580 Mon Sep 17 00:00:00 2001
From: James Barford-Evans <james.barford-evans@arm.com>
Date: Fri, 3 Oct 2025 11:58:58 +0100
Subject: [PATCH 2/2] PR  Feedback; Make "inactive" a grey colour

---
 site/frontend/src/pages/status_new/collector.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index 3d61389a5..a260fb30b 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -8,10 +8,6 @@ const props = defineProps<{
   collector: CollectorConfig;
 }>();
 
-function statusClass(c: CollectorConfig): string {
-  return c.isActive ? "active" : "inactive";
-}
-
 const FILTERS: BenchmarkJobStatus[] = [
   "InProgress",
   "Queued",
@@ -51,16 +47,16 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
   let statusClass = "active";
 
   switch (collector.isActive) {
-    case true:
+    case false:
       if (hourDiff >= maxInactivityHours) {
         statusText = "Offline";
-        statusClass = "inactive";
+        statusClass = "offline";
       } else {
         statusText = "Active";
         statusClass = "active";
       }
       break;
-    case false:
+    case true:
       statusText = "Inactive";
       statusClass = "inactive";
       break;
@@ -262,6 +258,11 @@ $sm-radius: 8px;
   font-weight: bold;
 }
 .status.inactive {
+  background: #ccc;
+  color: white;
+  font-weight: bold;
+}
+.status.offline {
   background: red;
   color: white;
   font-weight: bold;