Dashboard settings using localStorage

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

lib/dashboard/build.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const { minify: minifyCSS } = require('csso');
+const { rollup } = require('rollup');
+const commonjs = require('@rollup/plugin-commonjs');
+const css = require('rollup-plugin-css-only');
+const replace = require('@rollup/plugin-replace');
+const { default: resolve } = require('@rollup/plugin-node-resolve');
+const svelte = require('rollup-plugin-svelte');
+const { terser } = require('rollup-plugin-terser');
+
+async function build({ server, settings }) {
+  const serverDomain = server.settings.domain || 'localhost';
+  const serverPort = server.settings.port || 80;
+  const serverBase = `${serverDomain}:${serverPort}`;
+  let cssOutput = '';
+
+  try {
+    const bundle = await rollup({
+      input: __dirname + '/../../gui/dashboard/index.js',
+      plugins: [
+        // Svelte
+        svelte({
+          compilerOptions: {
+            dev: false,
+            generate: 'dom',
+          },
+        }),
+
+        // Extract CSS
+        css({
+          output: style => cssOutput = minifyCSS(style),
+        }),
+
+        // Resolve dependencies
+        resolve({
+          browser: true,
+          dedupe: [ 'svelte' ],
+        }),
+
+        // CommonJS functions
+        commonjs(),
+
+        // Minify
+        terser(),
+
+        // Replace env vars
+        replace({
+          preventAssignment: false,
+          values: {
+            '__SERVER__': serverBase,
+            '__CLUSTERS__': JSON.stringify(settings.clusters),
+          },
+        }),
+      ],
+    });
+
+    const { output } = await bundle.generate({
+      sourcemap: true,
+      format: 'iife',
+      name: 'app',
+      file: 'public/build/bundle.js',
+    });
+
+    return {
+      map: output[0].map.toUrl(),
+      code: output[0].code,
+      css: cssOutput.css,
+    };
+  }
+  catch (error) {
+    console.error('Error while building status dashboard: ', error);
+  }
+}
+
+module.exports = build;

lib/dashboard/socket.js

@@ -0,0 +1,82 @@
+'use strict';
+
+const { makeId } = require('core/makeid');
+
+const decoder = new TextDecoder('utf-8');
+let uws;
+
+async function createDashboardSocket(server) {
+  uws = server.ws({
+    route: '/statusdashboard/socket',
+    onOpen: async ws => {
+      function sendTime() {
+        try {
+          ws.send(JSON.stringify({
+            cmd: 'time',
+            time: new Date().getTime(),
+          }));
+        }
+        catch {
+          return;
+        }
+      }
+
+      sendTime();
+      setInterval(sendTime, 5000);
+
+      async function sendStatuses() {
+        const services = await server.storage
+          .store('smartyellow/webservice')
+          .find()
+          .toArray();
+        const heartbeats = await server.storage
+          .store('smartyellow/webserviceheartbeat')
+          .find({ webservice: { $in: services.map(s => s.id) } })
+          .sort({ date: -1 })
+          .toArray();
+        const mappedServices = {};
+
+        for (const s of services) {
+          const lastBeat = heartbeats.find(h => h.webservice === s.id);
+          mappedServices[s.id] = {
+            name: s.name,
+            lastBeat: lastBeat || {},
+            cluster: s.cluster,
+          };
+        }
+
+        try {
+          ws.send(JSON.stringify({
+            cmd: 'data',
+            data: mappedServices,
+          }));
+        }
+        catch {
+          return;
+        }
+      }
+
+      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;
+      }
+    },
+  });
+}
+
+module.exports = createDashboardSocket;