From 2d72aab0a88baa906127489e1c25fd11881bdc35 Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Tue, 8 Jun 2021 21:37:55 +0200 Subject: Add the monitor --- public/css/application.css | 41 +++++++++++++++++++++++++++++++++++++++++ public/index.html | 36 ++++++++++++++++++++++++++++++++++++ public/js/monitorcito.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 public/css/application.css create mode 100644 public/index.html create mode 100644 public/js/monitorcito.js (limited to 'public') 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 @@ + + + + + + + + + + monitor @ unlimited 🍕 + + + + + + + + +
+

+ + Monitorcito +

+
+
+

Status of services running in unlimited dot pizza

+ +
+
+ + 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(); +} +)(); -- cgit