mirror of
https://github.com/smartyellow/status.git
synced 2024-11-21 15:18:55 +01:00
Dashboard compilation (WIP)
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
parent
aa7d4e33a3
commit
1e48f645fd
GPG Key ID:
0EFF8478ADDF6C49
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,4 +4,3 @@ node_modules
|
||||
config.custom.js
|
||||
config.temp.js
|
||||
package-lock.json
|
||||
/gui/dashboard/build/
|
||||
|
||||
47
builddashboard.js
Normal file
47
builddashboard.js
Normal file
@ -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;
|
||||
@ -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();
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
@ -1,10 +1,14 @@
|
||||
<script>
|
||||
import AspectRatio from './components/aspectratio.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => console.log('test'));
|
||||
</script>
|
||||
|
||||
<AspectRatio>
|
||||
<h1>here comes the dashboard</h1>
|
||||
</AspectRatio>
|
||||
<div class="center">
|
||||
<div class="ratio">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(html, body) {
|
||||
@ -15,5 +19,25 @@
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
height: 56.25vw;
|
||||
left: 50%;
|
||||
max-height: 100vh;
|
||||
max-width: 177.77778vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<div class="center">
|
||||
<div class="ratio">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--dark);
|
||||
background-color: red;
|
||||
height: 56.25vw;
|
||||
left: 50%;
|
||||
max-height: 100vh;
|
||||
max-width: 177.77778vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Status dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outlet"></div>
|
||||
<script type="module" src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
|
||||
30
gui/dashboard/tile.svelte
Normal file
30
gui/dashboard/tile.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
export let title;
|
||||
export let subtitle;
|
||||
</script>
|
||||
|
||||
<div class="tile">
|
||||
{#if title}
|
||||
<div class="title">{title}</div>
|
||||
{/if}
|
||||
|
||||
{#if subtitle}
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tile {
|
||||
padding: 1rem;
|
||||
background-color: var(--dark);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.title, .subtitle {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
39
index.js
39
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: '<path d="M601.6 435.2c-48.18 0-93.66 20.24-124.8 55.53a12.82 12.82 0 0 0 19.2 16.94c26.28-29.78 64.78-46.87 105.6-46.87 77.63 0 140.8 63.17 140.8 140.8 0 77.63-63.17 140.8-140.8 140.8-63.9 0-120.4-43.1-137.49-102.4h60.7v-25.6H422.4v102.4H448v-46.9c26.79 58 86.8 98.1 153.6 98.1 91.75 0 166.4-74.65 166.4-166.4s-74.65-166.4-166.4-166.4Zm0 0"/><path d="M10.69 268.8A57.75 57.75 0 0 0 0 302.18V453a57.75 57.75 0 0 0 10.69 33.4h406.64C455.85 425.02 523.94 384 601.6 384c66.38 0 125.83 29.96 165.76 76.96.37-2.6.64-5.24.64-7.96V302.18a57.73 57.73 0 0 0-10.69-33.38Zm123.7 166.4a57.67 57.67 0 0 1-57.59-57.6 57.67 57.67 0 0 1 57.6-57.6 57.67 57.67 0 0 1 57.6 57.6 57.67 57.67 0 0 1-57.6 57.6Zm300.8-64a12.8 12.8 0 1 1 .02-25.61 12.8 12.8 0 0 1-.01 25.6Zm51.2 0a12.8 12.8 0 1 1 .02-25.6 12.8 12.8 0 0 1-.01 25.6Zm51.21 0a12.8 12.8 0 1 1 .01-25.61 12.8 12.8 0 0 1 0 25.6Zm51.2 0a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm51.2 0a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6ZM709.02 0H58.98A59.05 59.05 0 0 0 0 58.98V209.8a57.76 57.76 0 0 0 10.69 33.4H757.3a57.68 57.68 0 0 0 10.7-33.38V58.98A59.05 59.05 0 0 0 709.02 0ZM134.4 192a57.67 57.67 0 0 1-57.6-57.6 57.67 57.67 0 0 1 57.6-57.6 57.67 57.67 0 0 1 57.6 57.6 57.67 57.67 0 0 1-57.6 57.6Zm300.8-64a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.61Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 .01-25.6 12.8 12.8 0 0 1-.01 25.6Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 .01-25.61 12.8 12.8 0 0 1 0 25.61Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.61Zm25.6 38.4a12.8 12.8 0 1 1 .01-25.6 12.8 12.8 0 0 1-.01 25.6ZM640 128a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.61Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6ZM403.53 512H10.7A57.76 57.76 0 0 0 0 545.38V696.2c0 32.54 26.46 59 58.98 59h388.64C408.33 715.8 384 661.5 384 601.6c0-31.96 7.1-62.23 19.53-89.6ZM134.4 678.4a57.67 57.67 0 0 1-57.6-57.6 57.67 57.67 0 0 1 57.6-57.6 57.67 57.67 0 0 1 57.6 57.6 57.67 57.67 0 0 1-57.6 57.6Zm0 0"/>',
|
||||
};
|
||||
|
||||
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 = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web service status dashboard</title>
|
||||
<style>${renderedDashboard.css || ''}</style>
|
||||
<script>${renderedDashboard.code || ''}</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
`;
|
||||
res.send(dashboardHtml);
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
12
package.json
12
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"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user