From d62e8537baf954e3170b2b668b451f2572970b72 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 24 Feb 2023 10:07:08 +0100
Subject: [PATCH] Fixed bell

---
 gui/dashboard/apiclient.js    | 20 +++-----------------
 gui/dashboard/app.svelte      | 11 ++++++++---
 gui/dashboard/settings.svelte |  9 ++++++---
 index.js                      | 33 ++++++++-------------------------
 4 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/gui/dashboard/apiclient.js b/gui/dashboard/apiclient.js
index fb75e7c..6f33e11 100644
--- a/gui/dashboard/apiclient.js
+++ b/gui/dashboard/apiclient.js
@@ -1,5 +1,3 @@
-import { ringBell } from './lib';
-
 const socketUrl = window.location.href.replace('http', 'ws') + '/socket';
 let reconnectAttempts = 0;
 let ws;
@@ -8,20 +6,8 @@ export async function connect({ onData }) {
   ws = new WebSocket(socketUrl);
 
   ws.onmessage = async evt => {
-    const data = JSON.parse(evt.data || 'false');
-
-    switch (data.cmd) {
-      case 'data':
-        onData(data);
-        break;
-
-      case 'bell':
-        ringBell();
-        break;
-
-      default:
-        break;
-    }
+    const data = JSON.parse(evt.data || '{}');
+    onData(data);
   };
 
   ws.onopen = () => {
@@ -36,5 +22,5 @@ export async function connect({ onData }) {
     await connect({ onData });
   };
 
-  ws.onerror = err => console.error('Connection error', err);
+  ws.onerror = err => console.error('Connection error:', err);
 }
diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index d37e729..31fa8de 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -3,7 +3,7 @@
   import Tile from './tile.svelte';
   import Settings from './settings.svelte';
   import { flip } from 'svelte/animate';
-  import { settings, shuffle } from './lib';
+  import { ringBell, settings, shuffle } from './lib';
   import { connect } from './apiclient';
 
   const [ send, receive ] = shuffle;
@@ -91,13 +91,18 @@
 
   onMount(async () => {
     await connect({
-      onData: data => {
-        allTiles = data.tiles?.map(tile => {
+      onData: ({ tiles, newOutage }) => {
+        allTiles = tiles?.map(tile => {
           if (tile?.service?.checked) {
             tile.service.checked = new Date(tile.service.checked);
           }
           return tile;
         });
+
+        if (newOutage) {
+          ringBell();
+        }
+
         organiseGrid();
         hasData = true;
       },
diff --git a/gui/dashboard/settings.svelte b/gui/dashboard/settings.svelte
index c941111..cb8dd74 100644
--- a/gui/dashboard/settings.svelte
+++ b/gui/dashboard/settings.svelte
@@ -1,6 +1,6 @@
 <script>
   import Modal from './modal.svelte';
-  import { settings } from './lib';
+  import { ringBell, settings } from './lib';
 
   let open = false;
   let showCopyCheck = false;
@@ -43,6 +43,9 @@
         </svg>
       {/if}
     </button>
+    <button on:click={ringBell} class="btn">
+      Test bell
+    </button>
   </div>
 
   <label>
@@ -87,9 +90,9 @@
   }
 
   button.copy svg {
-    fill: var(--green);
+    fill: currentColor;
     height: 1rem;
     width: 1rem;
-    margin-left: 1rem;
+    margin-left: 0.5rem;
   }
 </style>
diff --git a/index.js b/index.js
index 05bcfe5..1b53082 100644
--- a/index.js
+++ b/index.js
@@ -349,9 +349,9 @@ module.exports = {
       order: 100,
       purpose: 'Start the websocket for the dashboard after boot',
       handler: () => {
-        const decoder = new TextDecoder('utf-8');
         let downIdsBefore = [];
         let downIdsAfter = [];
+        let newOutage = false;
 
         const mapService = (s, beat) => ({
           id: s.id,
@@ -374,9 +374,7 @@ module.exports = {
                 .find({ webservice: { $in: services.map(s => s.id) } })
                 .sort({ date: -1 })
                 .toArray();
-
               const tiles = [];
-              downIdsAfter = [];
 
               for (let service of services) {
                 const beat = heartbeats.find(b => b.webservice === service.id);
@@ -408,46 +406,31 @@ module.exports = {
               // Let other plugins enrich dashboard tiles with custom badges and priorities.
               await server.executePostHooks('pupulateDashboardTiles', { tiles });
 
-              let newOutage = false;
+              // Check if there are new outages and report them by ringing a bell on the dashboard.
+              newOutage = false;
               for (const id of downIdsAfter) {
                 if (!downIdsBefore.includes(id)) {
                   newOutage = true;
                 }
               }
               downIdsBefore = [ ...downIdsAfter ];
+              downIdsAfter = [];
 
               try {
-                if (newOutage) {
-                  ws.send(JSON.stringify({ cmd: 'bell' }));
-                }
-
-                ws.send(JSON.stringify({ cmd: 'data', tiles: tiles }));
+                const json = JSON.stringify({ newOutage, tiles });
+                ws.send(json);
               }
               catch {
                 return;
               }
             }
 
+            // Send statuses on open and every 5 seconds.
             sendStatuses();
             setInterval(sendStatuses, 5000);
           },
           onUpgrade: async () => ({ id: makeId(10) }),
-          onMessage: async (ws, msg) => {
-            msg = JSON.parse(decoder.decode(msg));
-
-            if (!msg || !msg.command) {
-              return;
-            }
-
-            switch (msg.command) {
-              case 'data':
-                ws.send('data');
-                return;
-
-              default:
-                return;
-            }
-          },
+          onMessage: async () => { /* do nothing */ },
         });
       },
     },