Fix; collector offline status

Author: Jamesbarford

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>