More dashboard fixes

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

dashboard/socket.js

@@ -35,7 +35,7 @@ async function createDashboardSocket(server) {
           const lastBeat = heartbeats.find(h => h.webservice === s.id);
           mappedServices[s.id] = {
             name: s.name,
-            lastBeat: lastBeat,
+            lastBeat: lastBeat || {},
           };
         }
 

gui/dashboard/app.css

@@ -1,6 +1,7 @@
 html, body {
   --body-bg: #000;
   --tile-bg: #181818;
+  --grey: grey;
   --red: red;
   --green: green;
   --radius: 10px;

gui/dashboard/app.svelte

@@ -1,5 +1,4 @@
 <script>
-  import './app.css';
   import { onMount } from 'svelte';
   import TileRawValue from './tile-rawvalue.svelte';
   import Tiles from './tiles.svelte';
@@ -10,6 +9,7 @@
   let services = {};
   let servicesUp = {};
   let servicesDown = {};
+  let servicesUnknown = {};
   let loading = true;
 
   onMount(() => {
@@ -32,7 +32,13 @@
 
           for (const id of ids) {
             const service = services[id];
-            if (service.lastBeat && service.lastBeat.down) {
+            if (!service.lastBeat || !service.lastBeat.date) {
+              servicesUnknown = {
+                ...servicesUnknown,
+                [id]: service,
+              };
+            }
+            else if (service.lastBeat.down) {
               servicesDown = {
                 ...servicesDown,
                 [id]: service,
@@ -64,8 +70,9 @@
       <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
 
       {#if !loading}
-        <Tiles services={servicesDown} />
+        <Tiles services={servicesDown} color="red" value="down" />
-        <Tiles services={servicesUp} />
+        <Tiles services={servicesUp} color="green" value="up" />
+        <Tiles services={servicesUnknown} color="grey" value="no data" />
       {:else}
         loading
       {/if}

gui/dashboard/tile-rawvalue.svelte

@@ -5,9 +5,10 @@
   export let subtitle;
   export let color;
   export let value;
+  export let date;
 </script>
 
-<Tile {title} {subtitle} {color}>
+<Tile {title} {subtitle} {color} {date}>
   <div class="value {color}">
     {value}
   </div>

gui/dashboard/tile.svelte

@@ -2,22 +2,31 @@
   export let title;
   export let subtitle;
   export let color;
+  export let date;
 </script>
 
 <div class="tile {color}">
-  {#if title || subtitle}
+  {#if title || subtitle || date}
     <div class="desc">
-      {#if title}
+      <div>
-        <div class="title">{title}</div>
+        {#if title}
-      {/if}
+          <div class="title">{title}</div>
+        {/if}
 
-      {#if subtitle}
+        {#if subtitle}
-        <div class="subtitle">{subtitle}</div>
+          <div class="subtitle">{subtitle}</div>
+        {/if}
+      </div>
+
+      {#if date}
+        <div class="time">{date.toLocaleTimeString('en-GB', {
+          timeStyle: 'short',
+        })}</div>
       {/if}
     </div>
   {/if}
 
-  <slot />
+  <div class="content"><slot /></div>
 </div>
 
 <style>
@@ -38,9 +47,14 @@
     border-color: var(--green);
   }
 
+  .tile.grey .content {
+    color: var(--grey);
+  }
+
   .desc {
     font-size: 1.3rem;
     margin-bottom: 1rem;
+    display: flex;
   }
 
   .desc .title {
@@ -50,4 +64,9 @@
   .desc .subtitle {
     font-weight: 100;
   }
+
+  .desc .time {
+    opacity: 0.6;
+    margin-left: auto;
+  }
 </style>

gui/dashboard/tiles.svelte

@@ -2,13 +2,15 @@
   import TileRawValue from './tile-rawvalue.svelte';
 
   export let services;
+  export let color;
+  export let value;
 </script>
 
 {#each Object.entries(services) as [ id, service ] (id)}
-  {@const isDown = service.lastBeat.down}
   <TileRawValue
     title={service.name.en}
-    value={isDown ? 'down' : 'up'}
+    date={service.lastBeat.date ? new Date(service.lastBeat.date) : false}
-    color={isDown ? 'red' : 'green'}
+    {value}
+    {color}
   />
 {/each}

index.js

@@ -5,6 +5,7 @@ const { processOutage } = require('./lib/processoutage');
 const buildDashboard = require('./dashboard/build');
 const createDashboardSocket = require('./dashboard/socket');
 const { minifyHtml } = require('core/strings');
+const { readFile } = require('fs/promises');
 
 const guiCluster = 'web service status';
 const icons = {
@@ -533,6 +534,9 @@ module.exports = {
         try {
           if (!renderedDashboard) {
             renderedDashboard = await buildDashboard(server);
+            renderedDashboard.globalCss = await readFile(
+              __dirname + '/gui/dashboard/app.css'
+            );
           }
           const dashboardHtml = minifyHtml(`
             <!DOCTYPE html>
@@ -542,6 +546,7 @@ module.exports = {
                 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <title>Web service status dashboard</title>
+                <style>${renderedDashboard.globalCss || ''}</style>
                 <style>${renderedDashboard.css || ''}</style>
               </head>
               <body>