From 87b583e0dd1d657f2f3613d81b8d4b6c541a9e05 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Mon, 11 Jul 2022 16:26:49 +0200
Subject: [PATCH] Dashboard pagination

Signed-off-by: Romein van Buren <romein@vburen.nl>
---
 gui/dashboard/app.svelte   | 86 +++++++++++++++++++++-----------------
 gui/dashboard/tiles.svelte | 17 --------
 2 files changed, 47 insertions(+), 56 deletions(-)
 delete mode 100644 gui/dashboard/tiles.svelte

diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index 797c0f8..3db1db5 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -1,17 +1,39 @@
 <script>
   import { onMount } from 'svelte';
   import TileRawValue from './tile-rawvalue.svelte';
-  import Tiles from './tiles.svelte';
   import Settings from './settings.svelte';
 
+  const size = 3 * 4;
   let lastUpdated = new Date();
   let lastUpdatedFormatted = '';
-  let services = {};
-  let servicesUp = {};
-  let servicesDown = {};
-  let servicesUnknown = {};
-  let loading = true;
-  let lock = false;
+  let services = [];
+  let pageNum = -1;
+
+  function tileProps(service) {
+    let props = {
+      title: service.name.en,
+      subtitle: service.cluster,
+      date: service.lastBeat?.date ? new Date(service.lastBeat.date) : undefined,
+    };
+
+    if (!service.lastBeat?.date) {
+      props.value = 'no data';
+      props.color = 'grey';
+      props.sort = 20;
+    }
+    if (service.lastBeat.down) {
+      props.value = 'down';
+      props.color = 'red';
+      props.sort = 0;
+    }
+    else {
+      props.value = 'up';
+      props.color = 'green';
+      props.sort = 10;
+    }
+
+    return props;
+  }
 
   onMount(() => {
     const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
@@ -28,34 +50,24 @@
           break;
 
         case 'data':
-          while (lock) {}
+          const tempServices = [];
+          const d = data.data;
+          const ids = Object.keys(d);
+          ids.sort((a, b) => tileProps(d[a]).sort - tileProps(d[b]).sort);
 
-          services = data.data;
-          const ids = Object.keys(services);
-
-          for (const id of ids) {
-            const service = services[id];
-            if (!service.lastBeat || !service.lastBeat.date) {
-              servicesUnknown = {
-                ...servicesUnknown,
-                [id]: service,
-              };
-            }
-            else if (service.lastBeat.down) {
-              servicesDown = {
-                ...servicesDown,
-                [id]: service,
-              };
-            }
-            else {
-              servicesUp = {
-                ...servicesUp,
-                [id]: service,
-              };
-            }
+          if ((ids.length > size) || (pageNum === -1)) {
+            pageNum++;
           }
 
-          loading = false;
+          if (pageNum * size >= ids.length) {
+            pageNum = 0;
+          }
+
+          for (let i = pageNum * size; (i < ids.length) && (i < size + size * pageNum); i++) {
+            tempServices.push(d[ids[i]]);
+          }
+
+          services = tempServices;
           break;
 
         default:
@@ -72,13 +84,9 @@
     <div class="tiles">
       <TileRawValue title="Last updated" value={lastUpdatedFormatted} />
 
-      {#if !loading}
-        <Tiles services={servicesDown} color="red" value="down" />
-        <Tiles services={servicesUp} color="green" value="up" />
-        <Tiles services={servicesUnknown} color="grey" value="no data" />
-      {:else}
-        loading
-      {/if}
+      {#each services as service}
+        <TileRawValue {...tileProps(service)} />
+      {/each}
     </div>
   </div>
 </div>
diff --git a/gui/dashboard/tiles.svelte b/gui/dashboard/tiles.svelte
deleted file mode 100644
index cc3dfe8..0000000
--- a/gui/dashboard/tiles.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  import TileRawValue from './tile-rawvalue.svelte';
-
-  export let services;
-  export let color;
-  export let value;
-</script>
-
-{#each Object.entries(services) as [ id, service ] (id)}
-  <TileRawValue
-    title={service.name.en}
-    subtitle={service.cluster}
-    date={service.lastBeat.date ? new Date(service.lastBeat.date) : false}
-    {value}
-    {color}
-  />
-{/each}