diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2021-06-08 21:37:55 +0200 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2021-06-08 21:37:55 +0200 |
| commit | 2d72aab0a88baa906127489e1c25fd11881bdc35 (patch) | |
| tree | 0f213b96c74fc6465e4ea07123a39f8dc469c857 /public | |
Add the monitor
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/application.css | 41 | ||||
| -rw-r--r-- | public/index.html | 36 | ||||
| -rw-r--r-- | public/js/monitorcito.js | 40 |
3 files changed, 117 insertions, 0 deletions
diff --git a/public/css/application.css b/public/css/application.css new file mode 100644 index 0000000..094313c --- /dev/null +++ b/public/css/application.css @@ -0,0 +1,41 @@ +h1 canvas { + width: 64px; + height: 64px; + display: inline-block; + background-color: gainsboro; +} + +table { + border-collapse: collapse; +} + +th, td { + padding: 8px; + border-style: inset; +} + +.true { + color: green; +} +.false { + color: red; +} +.critical { + font-weight: bold; + color: red; +} + +@media (prefers-color-scheme: dark) { + body { + color: white; + background-color: black; + } + + a { + color: #5dc1fd; + } + + a:visited { + color: #ed6eff; + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..6e673be --- /dev/null +++ b/public/index.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> + +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="author" content="Rubén Beltrán del Río"> + <meta name="description" content="monitor @ unlimited.pizza - check the status of running services"> + + <title>monitor @ unlimited 🍕</title> + + <link rel="stylesheet" type="text/css" href="/css/application.css"> + <script type="module" src="https://unlimited.pizza/js/animation.js"></script> + <script type="module" src="/js/monitorcito.js"></script> + + <!-- + /\ + / O\ U N L I M I T E D + /O o \ P I Z Z A + |______| + --> + </head> + <body> + <header> + <h1> + <canvas width=100 height=100></canvas> + <a href="/">Monitorcito</a> + </h1> + </header> + <main> + <p>Status of services running in unlimited dot pizza</p> + <table id="monitorcito"> + </table> + </main> + </body> +</html> diff --git a/public/js/monitorcito.js b/public/js/monitorcito.js new file mode 100644 index 0000000..ef428a5 --- /dev/null +++ b/public/js/monitorcito.js @@ -0,0 +1,40 @@ +(function () { + + const table = document.querySelector('#monitorcito'); + + function loadData () { + fetch('/api') + .then((response) => response.json()) + .then((serviceStatus) => { + + while (table.firstChild) { + table.removeChild(table.firstChild) + } + + for (const [service, isActive] of Object.entries(serviceStatus)) { + const row = document.createElement('tr'); + const serviceCell = document.createElement('td'); + serviceCell.appendChild(document.createTextNode(service)); + const isActiveCell = document.createElement('td'); + isActiveCell.appendChild(document.createTextNode(isActive ? 'OK' : 'FAIL')); + isActiveCell.classList.add(isActive); + row.appendChild(serviceCell); + row.appendChild(isActiveCell); + table.appendChild(row); + } + + setTimeout(loadData, 5000); + }) + .catch(() => { + const container = document.querySelector('main'); + container.removeChild(table); + const paragraph = document.createElement('p'); + paragraph.appendChild(document.createTextNode('Everything is broken. If your internet works, please check the server\'s not on fire. When in doubt, just refresh.')); + paragraph.classList.add('critical'); + container.appendChild(paragraph); + }) + } + + loadData(); +} +)(); |