Basic cluster functionality

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

gui/dashboard/app.svelte

@@ -10,7 +10,13 @@
   let servicesUp = {};
   let servicesDown = {};
   let servicesUnknown = {};
+  let servicesInCluster = {};
+  let servicesInClusterUnknown = {};
+  const clusters = JSON.parse('__CLUSTERS__');
+  const clusterKeys = clusters ? Object.keys(clusters) : false;
+  let currentClusterIndex = -1;
   let loading = true;
+  let lock = false;
 
   onMount(() => {
     const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
@@ -27,6 +33,8 @@
           break;
 
         case 'data':
+          while (lock) {}
+
           services = data.data;
           const ids = Object.keys(services);
 
@@ -60,6 +68,39 @@
       }
     }
   });
+
+  $: if (clusterKeys?.length && !loading) {
+      function nextCluster() {
+        lock = true;
+        currentClusterIndex++;
+
+        if (currentClusterIndex >= clusterKeys.length) {
+          currentClusterIndex = 0;
+        }
+
+        const inClusterTemp = {};
+        const inClusterTempUnknown = {};
+        const currentClusterKey = clusterKeys[currentClusterIndex];
+
+        for (const [ id, s ] of Object.entries(services)) {
+          if (s.cluster === currentClusterKey) {
+            if (!s.lastBeat || !s.lastBeat.date) {
+              inClusterTempUnknown[id] = s;
+            }
+            else {
+              inClusterTemp[id] = s;
+            }
+          }
+        }
+
+        servicesInCluster = inClusterTemp;
+        servicesInClusterUnknown = inClusterTempUnknown;
+        lock = false;
+      }
+
+      nextCluster();
+      setInterval(() => nextCluster, 10_000);
+    }
 </script>
 
 <Settings />
@@ -71,8 +112,14 @@
 
       {#if !loading}
         <Tiles services={servicesDown} color="red" value="down" />
-        <Tiles services={servicesUp} color="green" value="up" />
-        <Tiles services={servicesUnknown} color="grey" value="no data" />
+
+        {#if !clusterKeys?.length}
+          <Tiles services={servicesUp} color="green" value="up" />
+          <Tiles services={servicesUnknown} color="grey" value="no data" />
+        {:else}
+          <Tiles services={servicesInCluster} color="green" value="up" />
+          <Tiles services={servicesInClusterUnknown} color="grey" value="no data" />
+        {/if}
       {:else}
         loading
       {/if}