diff --git a/.gitignore b/.gitignore index a9e1726..508a790 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,3 @@ node_modules config.custom.js config.temp.js package-lock.json -/gui/dashboard/build/ diff --git a/builddashboard.js b/builddashboard.js new file mode 100644 index 0000000..a72b805 --- /dev/null +++ b/builddashboard.js @@ -0,0 +1,47 @@ +'use strict'; + +const svelte = require('rollup-plugin-svelte'); +const { terser } = require('rollup-plugin-terser') +const { rollup } = require('rollup'); +const { default: resolve } = require('@rollup/plugin-node-resolve'); +const { minify: minifyCSS } = require('csso'); + +async function build() { + let cssOutput = ''; + + try { + const bundle = await rollup({ + input: __dirname + '/gui/dashboard/index.js', + plugins: [ svelte({ + emitCss: false, + compilerOptions: { + dev: false, + generate: 'dom', + }, + preprocess: { + style: ({ content }) => { + cssOutput = minifyCSS(content); + return ''; + }, + }, + }), resolve(), terser() ], + }); + + const { output } = await bundle.generate({ + sourcemap: true, + format: 'iife', + name: 'app', + file: 'public/build/bundle.js', + }); + + return { + code: output[0].code, + css: cssOutput, + }; + } + catch (error) { + console.error('Error while building status dashboard: ', error); + } +} + +module.exports = build; diff --git a/dashboard/index.js b/dashboard/index.js deleted file mode 100644 index f034db4..0000000 --- a/dashboard/index.js +++ /dev/null @@ -1,31 +0,0 @@ -'use strict'; - -const { build: viteBuild } = require('vite'); -const fs = require('fs').promises; -const { svelte } = require('@sveltejs/vite-plugin-svelte'); - -const path = __dirname + '/../gui/dashboard'; - -const build = (prefix = '') => viteBuild({ - root: path, - base: `${prefix}/statusdashboard/asset/`, - plugins: [ svelte() ], - build: { - rollupOptions: { - output: { - assetFileNames: '[hash].[ext]', - entryFileNames: '[hash].js', - chunkFileNames: '[hash].js', - }, - }, - outDir: path + '/build', - }, -}); - -const cleanup = () => fs.rm(path + '/build', { - recursive: true, - force: true, -}); - -module.exports = { build, cleanup, path }; -build(); diff --git a/dashboard/watcher.js b/dashboard/watcher.js deleted file mode 100644 index 3b27f98..0000000 --- a/dashboard/watcher.js +++ /dev/null @@ -1,32 +0,0 @@ -'use strict'; - -const chokidar = require('chokidar'); -const dashboard = require('./index'); - -let watcher; -const handler = async () => { - console.log('status dashboard watcher triggered, rebuilding...'); - await dashboard.cleanup(); - await dashboard.build(); - process.send({ command: 'reload' }); -}; - -process.on('message', message => { - switch (message.command) { - case 'start': - if (message.path) { - watcher = chokidar.watch(message.path, { - ignored: [ /node_modules/, /build/ ], - }); - - watcher.on('add', handler); - watcher.on('change', handler); - watcher.on('unlink', handler); - } - break; - - default: - console.log(`Status dashboard watcher received unknown command ${message.command}`); - break; - } -}); diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte index 727f2dd..75d9c8d 100644 --- a/gui/dashboard/app.svelte +++ b/gui/dashboard/app.svelte @@ -1,10 +1,14 @@ - -

here comes the dashboard

- +
+
+ +
+
diff --git a/gui/dashboard/components/aspectratio.svelte b/gui/dashboard/components/aspectratio.svelte deleted file mode 100644 index fd0c387..0000000 --- a/gui/dashboard/components/aspectratio.svelte +++ /dev/null @@ -1,29 +0,0 @@ -
-
- -
-
- - diff --git a/gui/dashboard/index.html b/gui/dashboard/index.html deleted file mode 100644 index 1d027f3..0000000 --- a/gui/dashboard/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Status dashboard - - -
- - - diff --git a/gui/dashboard/index.js b/gui/dashboard/index.js index 45ddade..dde0de8 100644 --- a/gui/dashboard/index.js +++ b/gui/dashboard/index.js @@ -1,7 +1,5 @@ import App from './app.svelte'; -const app = new App({ - target: document.getElementById('outlet'), +export default new App({ + target: document.body, }); - -export default app; diff --git a/gui/dashboard/tile.svelte b/gui/dashboard/tile.svelte new file mode 100644 index 0000000..8a3b386 --- /dev/null +++ b/gui/dashboard/tile.svelte @@ -0,0 +1,30 @@ + + +
+ {#if title} +
{title}
+ {/if} + + {#if subtitle} +
{subtitle}
+ {/if} +
+ + diff --git a/index.js b/index.js index 1d04b66..0880d3f 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,9 @@ 'use strict'; +require('svelte/register'); const { fork } = require('child_process'); const { processOutage } = require('./lib/processoutage'); -const dashboard = require('./dashboard'); +const buildDashboard = require('./builddashboard'); const guiCluster = 'web service status'; const icons = { @@ -11,6 +12,8 @@ const icons = { checks: '', }; +let renderedDashboard = null; + module.exports = { // Friendly name @@ -124,13 +127,6 @@ module.exports = { server.warn('status: settings.autotestInterval is not a number. Using default value 10.'); settings.autotestInterval = 10; } - - await dashboard.cleanup(); - await dashboard.build(server.settings.prefix); - - const dashWatcher = fork(__dirname + '/dashboard/watcher.js'); - dashWatcher.send({ command: 'start', path: dashboard.path }); - return true; }, @@ -539,14 +535,25 @@ module.exports = { { route: '/statusdashboard', method: 'get', handler: async (req, res) => { - res.sendFile(__dirname + '/gui/dashboard/build/index.html'); - }, - }, - - { route: '/statusdashboard/asset/:file', - method: 'get', - handler: async (req, res) => { - res.sendFile(__dirname + `/gui/dashboard/build/${req.params[0]}`); + if (!renderedDashboard) { + renderedDashboard = await buildDashboard(); + } + console.log(renderedDashboard); + const dashboardHtml = ` + + + + + + + Web service status dashboard + + + + + + `; + res.send(dashboardHtml); }, }, diff --git a/package.json b/package.json index 53a0b0a..b7e7b43 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,18 @@ { "name": "status", "version": "1.0.0", - "description": "Display status dashboard", + "description": "", "main": "index.js", "directories": { "lib": "lib" }, "scripts": { - "build": "node builddashboard" + "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/smartyellow/status.git" }, - "keywords": [ - "status" - ], "author": "Romein van Buren", "license": "MIT", "bugs": { @@ -23,9 +20,6 @@ }, "homepage": "https://github.com/smartyellow/status#readme", "dependencies": { - "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", - "chokidar": "^3.5.3", - "svelte": "^3.49.0", - "vite": "^2.9.13" + "csso": "^5.0.3" } }