From 6db70ed434629b5f104d8daed3e4a785ae2ba58b Mon Sep 17 00:00:00 2001 From: Martin Berghaus Date: Tue, 8 Apr 2025 22:48:17 +0200 Subject: [PATCH] seperate css file to allow custom css via definitions --- script/monitor/check.css | 77 +++++++ script/monitor/check.html | 278 +++++++++----------------- script/monitor/setupMonitoringHost.sh | 1 + 3 files changed, 176 insertions(+), 180 deletions(-) create mode 100644 script/monitor/check.css diff --git a/script/monitor/check.css b/script/monitor/check.css new file mode 100644 index 0000000..f1f5ba3 --- /dev/null +++ b/script/monitor/check.css @@ -0,0 +1,77 @@ +html, body { + --background-theme-color: #001EA0; + --cell-space: 20px; + --logo-height: 50px; + + background-color: #cccccc; + font-family: Verdana; + font-size: 14pt; + color: #ffffff; + height: 100%; + margin: 0; +} +@media screen and (orientation: portrait) { + body { + zoom: 200% + } +} +#header { + background-color: var(--background-theme-color); + position: sticky; + top: 0; + height: calc(var(--logo-height) + (2 * var(--cell-space))); + width: 100%; +} +#header img { + height: var(--logo-height); + margin: var(--cell-space); + vertical-align: middle; +} +#header h1 { + display: inline; + font-weight: normal; + vertical-align: middle; +} +#content { + min-height: 100%; +} +#footer { + background-color: var(--background-theme-color); + position: sticky; + bottom: 0px; + padding: var(--cell-space); + text-align: center; + vertical-align: middle; + font-size: 22pt; +} +#checks { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + padding: var(--cell-space); + grid-gap: var(--cell-space); +} +#checks > div { + border: 1px solid black; + border-radius: 10px; + padding: 10px; + text-align: center; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3), 0 2px 10px 0 rgba(0, 0, 0, 0.2); +} +#checks > div.ok { + background-color: #66aa22; + color: #222222; +} +#checks > div.info { + background-color: #88cc44; + color: #222222; +} +#checks > div.warn { + background-color: #ffdd00; + color: #222222; +} +#checks > div.fail { + background-color: #ff0000; +} +#checks > div.timeout { + background-color: var(--background-theme-color); +} diff --git a/script/monitor/check.html b/script/monitor/check.html index ee6fe1e..df93be0 100644 --- a/script/monitor/check.html +++ b/script/monitor/check.html @@ -1,90 +1,8 @@ - -Monitoring Dashboard - - + + Monitoring Dashboard + - + function exchangeChecks(text) { + document.getElementById("checks").innerHTML = convertToHtml(text); + } + function refreshTime() { + document.getElementById("datetime").innerHTML = new Date().toLocaleString("de-DE", {timeZone: "Europe/Berlin"}); + } + function refreshChecks() { + connectionAlive = downloadCheckFile(exchangeChecks); + } + function reloadIfAlive() { + if (connectionAlive) { + location.reload(); + } + } + setInterval(refreshTime, 1000); + setInterval(refreshChecks, 5000); + setInterval(reloadIfAlive, 300000); + refreshTime(); + refreshChecks(); + diff --git a/script/monitor/setupMonitoringHost.sh b/script/monitor/setupMonitoringHost.sh index f3f75de..2540fdf 100755 --- a/script/monitor/setupMonitoringHost.sh +++ b/script/monitor/setupMonitoringHost.sh @@ -51,6 +51,7 @@ function setupPublicFile() { echo "Setup the monitoring host that monitors the others ... " \ && setupPublicFile "check.html" \ + && setupPublicFile "check.css" \ && setupPublicFile "logo.png" \ && exit 0