Everbrent/cis
9
0
Fork 0
mirror of https://github.com/m8tin/cis.git synced 2025-12-06 07:48:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

seperate css file to allow custom css via definitions

Browse Source
This commit is contained in:
Martin Berghaus
2025-04-08 22:48:17 +02:00
parent a58d9d6f66
commit 6db70ed434
3 changed files with 176 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
script/monitor/check.css Normal file
View File

@@ -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);
}

278
script/monitor/check.html
View File

@@ -1,90 +1,8 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Monitoring Dashboard</title> <title>Monitoring Dashboard</title>
<link rel="stylesheet" href="check.css">
<style>
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);
}
</style>
</head> </head>
<body> <body>
<div id="header"> <div id="header">
@@ -100,105 +18,105 @@
Köln, <span id="datetime"></span> Köln, <span id="datetime"></span>
</div> </div>
<script> <script>
var connectionAlive = true; var connectionAlive = true;
function downloadCheckFile(callback) { function downloadCheckFile(callback) {
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', "check.txt", false); xmlHttp.open('GET', "check.txt", false);
xmlHttp.onreadystatechange=function() { xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) { if(xmlHttp.readyState==4) {
callback(xmlHttp.responseText); callback(xmlHttp.responseText);
}
}
try {
xmlHttp.send(null);
if (xmlHttp.status >= 200 && xmlHttp.status < 304) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}
function convertToHtml(checkText) {
if (!connectionAlive) {
return '<div class="fail">CONNECTION FAILED</div>';
}
var html = "";
var lines = checkText.split(/\n/);
for(var lineNo = 2; lineNo < lines.length; lineNo++) {
var line = lines[lineNo];
var parts = line.split('?');
if (parts.length > 1) {
var name = parts[0].trim().split("_").join(" ");
var resultParts = parts[1].trim().split('#');
var result = resultParts[0];
var message = resultParts[1];
if(name == 'MISSED') {
var fileTimeParts = message.split('-');
var fileTime = new Date();
fileTime.setHours(parseInt(fileTimeParts[0]));
fileTime.setMinutes(parseInt(fileTimeParts[1]));
fileTime.setSeconds(parseInt(fileTimeParts[2]));
var scriptTime = new Date();
scriptTime.setMinutes(scriptTime.getMinutes() - 2);
if (scriptTime.getTime() < fileTime.getTime()){
if (result == "0") {
html += '<div class="ok">EVERYTHING OK<br/>' + fileTime.toLocaleTimeString() + '</div>';
} else {
html += '<div class="fail">FAILED: ' + result + '<br/>' + fileTime.toLocaleTimeString() + '</div>';
}
} else {
html += '<div class="check fail">CHECKS TOO OLD<br/>' + fileTime.toLocaleTimeString() + '</div>';
}
} else {
if(result.indexOf('OK') >= 0) {
html += '<div class="ok">'+ name;
} else if(result.indexOf('INFO') >= 0) {
html += '<div class="info">'+ name;
} else if(result.indexOf('TIMEOUT') >= 0) {
html += '<div class="timeout">'+ name;
} else if(result.indexOf('WARN') >= 0) {
html += '<div class="warn">'+ name;
} else {
html += '<div class="fail">' + name;
}
if(message) {
html += '<br/>' + message.trim();
}
html += '</div>';
} }
} }
try {
xmlHttp.send(null);
if (xmlHttp.status >= 200 && xmlHttp.status < 304) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
} }
return html; function convertToHtml(checkText) {
} if (!connectionAlive) {
function exchangeChecks(text) { return '<div class="fail">CONNECTION FAILED</div>';
document.getElementById("checks").innerHTML = convertToHtml(text); }
}
function refreshTime() { var html = "";
document.getElementById("datetime").innerHTML = new Date().toLocaleString("de-DE", {timeZone: "Europe/Berlin"}); var lines = checkText.split(/\n/);
}
function refreshChecks() { for(var lineNo = 2; lineNo < lines.length; lineNo++) {
connectionAlive = downloadCheckFile(exchangeChecks); var line = lines[lineNo];
}
function reloadIfAlive() { var parts = line.split('?');
if (connectionAlive) { if (parts.length > 1) {
location.reload();
var name = parts[0].trim().split("_").join(" ");
var resultParts = parts[1].trim().split('#');
var result = resultParts[0];
var message = resultParts[1];
if(name == 'MISSED') {
var fileTimeParts = message.split('-');
var fileTime = new Date();
fileTime.setHours(parseInt(fileTimeParts[0]));
fileTime.setMinutes(parseInt(fileTimeParts[1]));
fileTime.setSeconds(parseInt(fileTimeParts[2]));
var scriptTime = new Date();
scriptTime.setMinutes(scriptTime.getMinutes() - 2);
if (scriptTime.getTime() < fileTime.getTime()){
if (result == "0") {
html += '<div class="ok">EVERYTHING OK<br/>' + fileTime.toLocaleTimeString() + '</div>';
} else {
html += '<div class="fail">FAILED: ' + result + '<br/>' + fileTime.toLocaleTimeString() + '</div>';
}
} else {
html += '<div class="check fail">CHECKS TOO OLD<br/>' + fileTime.toLocaleTimeString() + '</div>';
}
} else {
if(result.indexOf('OK') >= 0) {
html += '<div class="ok">'+ name;
} else if(result.indexOf('INFO') >= 0) {
html += '<div class="info">'+ name;
} else if(result.indexOf('TIMEOUT') >= 0) {
html += '<div class="timeout">'+ name;
} else if(result.indexOf('WARN') >= 0) {
html += '<div class="warn">'+ name;
} else {
html += '<div class="fail">' + name;
}
if(message) {
html += '<br/>' + message.trim();
}
html += '</div>';
}
}
}
return html;
} }
} function exchangeChecks(text) {
setInterval(refreshTime, 1000); document.getElementById("checks").innerHTML = convertToHtml(text);
setInterval(refreshChecks, 5000); }
setInterval(reloadIfAlive, 300000); function refreshTime() {
refreshTime(); document.getElementById("datetime").innerHTML = new Date().toLocaleString("de-DE", {timeZone: "Europe/Berlin"});
refreshChecks(); }
</script> function refreshChecks() {
connectionAlive = downloadCheckFile(exchangeChecks);
}
function reloadIfAlive() {
if (connectionAlive) {
location.reload();
}
}
setInterval(refreshTime, 1000);
setInterval(refreshChecks, 5000);
setInterval(reloadIfAlive, 300000);
refreshTime();
refreshChecks();
</script>
</body> </body>
</html> </html>

1
script/monitor/setupMonitoringHost.sh
View File

@@ -51,6 +51,7 @@ function setupPublicFile() {
echo "Setup the monitoring host that monitors the others ... " \ echo "Setup the monitoring host that monitors the others ... " \
&& setupPublicFile "check.html" \ && setupPublicFile "check.html" \
&& setupPublicFile "check.css" \
&& setupPublicFile "logo.png" \ && setupPublicFile "logo.png" \
&& exit 0 && exit 0