Dashboard: show services that are down first.

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

gui/dashboard/app.svelte

@@ -1,10 +1,13 @@
 <script>
   import { onMount } from 'svelte';
   import TileRawValue from './tile-rawvalue.svelte';
+  import Tiles from './tiles.svelte';
 
   let lastUpdated = new Date();
   let lastUpdatedFormatted = '';
   let services = {};
+  let servicesUp = {};
+  let servicesDown = {};
   let loading = true;
 
   $:console.log(services);
@@ -25,6 +28,24 @@
 
         case 'data':
           services = data.data;
+          const ids = Object.keys(services);
+
+          for (const id of ids) {
+            const service = services[id];
+            if (service.lastBeat && service.lastBeat.down) {
+              servicesDown = {
+                ...servicesDown,
+                [id]: service,
+              };
+            }
+            else {
+              servicesUp = {
+                ...servicesUp,
+                [id]: service,
+              };
+            }
+          }
+
           loading = false;
           break;
 
@@ -41,14 +62,8 @@
       <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
 
       {#if !loading}
-        {#each Object.entries(services) as [ id, service ] (id)}
-          {@const isDown = service.lastBeat.down}
-          <TileRawValue
-            title={service.name.en}
-            value={isDown ? 'down' : 'up'}
-            color={isDown ? 'red' : 'green'}
-          />
-        {/each}
+        <Tiles services={servicesDown} />
+        <Tiles services={servicesUp} />
       {:else}
         loading
       {/if}

gui/dashboard/tile-rawvalue.svelte

@@ -7,7 +7,7 @@
   export let value;
 </script>
 
-<Tile {title} {subtitle}>
+<Tile {title} {subtitle} {color}>
   <div class="value {color}">
     {value}
   </div>
@@ -18,12 +18,4 @@
     font-size: 3rem;
     font-weight: 600;
   }
-
-  .red {
-    color: var(--red);
-  }
-
-  .green {
-    color: var(--green);
-  }
 </style>

gui/dashboard/tile.svelte

@@ -1,9 +1,10 @@
 <script>
   export let title;
   export let subtitle;
+  export let color;
 </script>
 
-<div class="tile">
+<div class="tile {color}">
   {#if title || subtitle}
     <div class="desc">
       {#if title}
@@ -20,22 +21,33 @@
 </div>
 
 <style>
+  .tile {
+    padding: 1rem;
+    background-color: var(--tile-bg);
+    border-radius: var(--radius);
+    border: 2px solid var(--tile-bg);
+  }
+
+  .tile.red {
+    background-color: var(--red);
+    border-color: var(--red);
+    color: #fff;
+  }
+
+  .tile.green {
+    border-color: var(--green);
+  }
+
   .desc {
     font-size: 1.3rem;
     margin-bottom: 1rem;
   }
 
-  .tile {
-    padding: 1rem;
-    background-color: var(--tile-bg);
-    border-radius: var(--radius);
-  }
-
-  .title {
+  .desc .title {
     font-weight: 200;
   }
 
-  .subtitle {
+  .desc .subtitle {
     font-weight: 100;
   }
 </style>

gui/dashboard/tiles.svelte

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