Print interval since last check on dashboard

Signed-off-by: Romein van Buren <romein@vburen.nl>

gui/dashboard/app.svelte

@@ -16,6 +16,7 @@
       title: service.name.en,
       subtitle: service.cluster,
       date: service.lastBeat?.date ? new Date(service.lastBeat.date) : undefined,
+      since: service.checked ? new Date(service.checked) : undefined,
     };
 
     if (!service.lastBeat?.date) {

gui/dashboard/lib.js

@@ -41,3 +41,21 @@ export function ringBell() {
   const bell = new Audio('http://__SERVER__/statusdashboard/sound');
   bell.addEventListener('canplaythrough', () => bell.play());
 }
+
+export function formatDuration(ms) {
+  // modified from https://www.30secondsofcode.org/js/s/format-duration
+
+  if (ms < 0) {
+    ms = -ms;
+  }
+  const time = {
+    d: Math.floor(ms / 86400000),
+    h: Math.floor(ms / 3600000) % 24,
+    m: Math.floor(ms / 60000) % 60,
+    s: Math.floor(ms / 1000) % 60,
+  };
+  return Object.entries(time)
+    .filter(val => val[1] !== 0)
+    .map(([ key, val ]) => `${val} ${key}`)
+    .join(' ');
+}

gui/dashboard/tile-rawvalue.svelte

@@ -6,11 +6,12 @@
   export let color;
   export let value;
   export let date;
+  export let since;
   export let center = false;
   export let weight = 600;
 </script>
 
-<Tile {title} {subtitle} {color} {date} {center}>
+<Tile {title} {subtitle} {color} {date} {since} {center}>
   <div class="value {color}" style:font-weight={weight} class:center>
     {value}
   </div>

gui/dashboard/tile.svelte

@@ -1,9 +1,32 @@
 <script>
+  import { formatDuration } from './lib';
+  import { onMount } from 'svelte';
+
   export let title;
   export let subtitle;
   export let color;
   export let date;
+  export let since;
   export let center = false;
+
+  let formattedDuration = '';
+  $: formattedDate = date ? date.toLocaleTimeString('en-GB', {
+    timeStyle: 'short',
+  }) : '';
+
+  onMount(() => {
+    if (since) {
+      function updateDuration() {
+        formattedDuration = formatDuration(
+          new Date().getTime() - since.getTime()
+        );
+      }
+
+      updateDuration();
+      const interval = setInterval(updateDuration, 100);
+      return () => clearInterval(interval);
+    }
+  });
 </script>
 
 <div class="tile {color}">
@@ -19,10 +42,12 @@
         {/if}
       </div>
 
-      {#if date}
-        <div class="time">{date.toLocaleTimeString('en-GB', {
-          timeStyle: 'short',
-        })}</div>
+      {#if date || since}
+        <div class="time">
+          {formattedDate}
+          {#if date && since}<br />{/if}
+          {formattedDuration}
+        </div>
       {/if}
     </div>
   {/if}
@@ -79,6 +104,7 @@
     opacity: 0.6;
     margin-left: auto;
     font-size: 1.3vw;
+    text-align: right;
   }
 
   .content {

lib/dashboard/socket.js

@@ -12,6 +12,7 @@ const mapService = (s, beat) => ({
   name: s.name,
   cluster: s.cluster,
   lastBeat: beat,
+  checked: s.lastChecked,
 });
 
 async function createDashboardSocket(server) {