Beautify
This commit is contained in:
Adrià
parent
fad4a5dcb5
commit
884143cbe9
|
|
@ -1,104 +1,104 @@
|
||||||
.server-link a {
|
.server-link a {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: #999;
|
background-color: #999;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: arial;
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(odd) {
|
tr:nth-child(odd) {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) {
|
tr:nth-child(even) {
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #cb0017;
|
color: #cb0017;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.accordion {
|
button.accordion {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
margin: 0.6rem 0;
|
margin: 0.6rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.download-button {
|
button.download-button {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #00a8ff;
|
background-color: #00a8ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
float: right;
|
float: right;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.download-header {
|
div.download-header {
|
||||||
height: 7%;
|
height: 7%;
|
||||||
background-color: #273c75;
|
background-color: #273c75;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.panel {
|
div.panel {
|
||||||
padding: 0 18px;
|
padding: 0 18px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.panel.show {
|
div.panel.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green {
|
.green {
|
||||||
background-color: #79bd8f;
|
background-color: #79bd8f;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green:hover {
|
.green:hover {
|
||||||
background-color: #588a68;
|
background-color: #588a68;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red {
|
.red {
|
||||||
background-color: #d9534f;
|
background-color: #d9534f;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red:hover {
|
.red:hover {
|
||||||
background-color: #c9302c;
|
background-color: #c9302c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-container {
|
.canvas-container {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top:200;
|
margin-top: 200;
|
||||||
margin-bottom:100;
|
margin-bottom: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-graph {
|
.canvas-graph {
|
||||||
|
|
@ -108,12 +108,12 @@ div.panel.show {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-header {
|
.canvas-header {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
background-color: #F2F2F2;
|
background-color: #F2F2F2;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,104 @@
|
||||||
$def with (output, now)
|
$def with (output, now)
|
||||||
|
|
||||||
<body onload="draw($output[0]['s_rate']);">
|
<body onload="draw($output[0]['s_rate']);">
|
||||||
$ errors = 0
|
$ errors = 0
|
||||||
$ color = "green"
|
$ color = "green"
|
||||||
<div>
|
<div>
|
||||||
<div class="download-header">
|
<div class="download-header">
|
||||||
<button class="download-button" onclick="window.location.href = 'download';">Download Report</button>
|
<button class="download-button" onclick="window.location.href = 'download';">Download Report</button>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 100%;border-right:2px solid #ccc; padding:5px;overflow-x: hidden; float:left; width:48%">
|
<div style="height: 100%;border-right:2px solid #ccc; padding:5px;overflow-x: hidden; float:left; width:48%">
|
||||||
$for server in range(len(output)):
|
$for server in range(len(output)):
|
||||||
$code:
|
$code:
|
||||||
errors = 0
|
errors = 0
|
||||||
color = "green"
|
color = "green"
|
||||||
|
|
||||||
$for check in output[server]['result'].keys():
|
$for check in output[server]['result'].keys():
|
||||||
$ isError = output[server]['result'].get(check)
|
$ isError = output[server]['result'].get(check)
|
||||||
$if isError != 0:
|
$if isError != 0:
|
||||||
$code:
|
$code:
|
||||||
errors=errors+1
|
errors=errors+1
|
||||||
|
|
||||||
$if errors > 0:
|
$if errors > 0:
|
||||||
$code:
|
$code:
|
||||||
color = "red"
|
color = "red"
|
||||||
<button class="accordion ${color}" onmouseenter="draw($output[server]['s_rate'])">$output[server]['name']: $errors error(s)</button>
|
<button class="accordion ${color}" onmouseenter="draw($output[server]['s_rate'])">$output[server]['name']: $errors error(s)</button>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<table width=100%>
|
<table width=100%>
|
||||||
<thead class="server-link">
|
<thead class="server-link">
|
||||||
<tr><th colspan="2">
|
<tr>
|
||||||
<a href="$output[server]['url']" target="_blank">$output[server]['name']</a>
|
<th colspan="2">
|
||||||
</th></tr>
|
<a href="$output[server]['url']" target="_blank">$output[server]['name']</a>
|
||||||
</thead>
|
</th>
|
||||||
$for check in output[server]['result'].keys():
|
</tr>
|
||||||
$ isError = output[server]['result'].get(check)
|
</thead>
|
||||||
$if isError != 0:
|
$for check in output[server]['result'].keys():
|
||||||
<tr>
|
$ isError = output[server]['result'].get(check)
|
||||||
<td><a href="$output[server]['url']/$check"
|
$if isError != 0:
|
||||||
target="_blank">$check</a></td>
|
<tr>
|
||||||
<td><a href="$output[server]['url']/$check"
|
<td><a href="$output[server]['url']/$check" target="_blank">$check</a></td>
|
||||||
target="_blank"><img src="static/img/error.png"></a></td>
|
<td><a href="$output[server]['url']/$check" target="_blank"><img src="static/img/error.png"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
$else:
|
$else:
|
||||||
<tr>
|
<tr>
|
||||||
<td>$check</td>
|
<td>$check</td>
|
||||||
<td><img src="static/img/ok.png"></td>
|
<td><img src="static/img/ok.png"></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
$else:
|
$else:
|
||||||
$code:
|
$code:
|
||||||
color = "green"
|
color = "green"
|
||||||
<button class="accordion ${color}" onmouseenter="draw($output[server]['s_rate'])">$output[server]['name']</button>
|
<button class="accordion ${color}" onmouseenter="draw($output[server]['s_rate'])">$output[server]['name']</button>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<table width=100%>
|
<table width=100%>
|
||||||
<thead class="server-link">
|
<thead class="server-link">
|
||||||
<tr><th colspan="2">
|
<tr>
|
||||||
<a href="$output[server]['url']" target="_blank">$output[server]['name']</a>
|
<th colspan="2">
|
||||||
</th></tr>
|
<a href="$output[server]['url']" target="_blank">$output[server]['name']</a>
|
||||||
</thead>
|
</th>
|
||||||
$for check in output[server]['result'].keys():
|
</tr>
|
||||||
$ isError = output[server]['result'].get(check)
|
</thead>
|
||||||
$if isError != 0:
|
$for check in output[server]['result'].keys():
|
||||||
<tr>
|
$ isError = output[server]['result'].get(check)
|
||||||
<td><a href="$output[server]['url']/$check"
|
$if isError != 0:
|
||||||
target="_blank">$check</a></td>
|
<tr>
|
||||||
<td><a href="$output[server]['url']/$check"
|
<td><a href="$output[server]['url']/$check" target="_blank">$check</a></td>
|
||||||
target="_blank"><img src="static/img/error.png"></a></td>
|
<td><a href="$output[server]['url']/$check" target="_blank"><img src="static/img/error.png"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
$else:
|
$else:
|
||||||
<tr>
|
<tr>
|
||||||
<td>$check</td>
|
<td>$check</td>
|
||||||
<td><img src="static/img/ok.png"></td>
|
<td><img src="static/img/ok.png"></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="canvas-container">
|
<div class="canvas-container">
|
||||||
<div class="canvas-graph">
|
<div class="canvas-graph">
|
||||||
<div class="canvas-header"><h2 style="margin: 0">Hosts status</h2></div>
|
<div class="canvas-header">
|
||||||
<canvas id="canvas" width="400" height="400"></canvas>
|
<h2 style="margin: 0">Hosts status</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<canvas id="canvas" width="400" height="400"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="height: 10%; float:right">
|
<div style="height: 10%; float:right">
|
||||||
<br><br><br>
|
<br><br><br>
|
||||||
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
|
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
|
||||||
<br><br>
|
<br><br>
|
||||||
<a href="/">Home</a> | <a href="/help">Help</a>
|
<a href="/">Home</a> | <a href="/help">Help</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,14 @@ $def with (content)
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Monit Dashboard</title>
|
<title>Monit Dashboard</title>
|
||||||
<link rel="stylesheet" type="text/css" href="static/monit-dashboard.css" />
|
<link rel="stylesheet" type="text/css" href="static/monit-dashboard.css" />
|
||||||
<meta http-equiv="refresh" content="300">
|
<meta http-equiv="refresh" content="300">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
$:content
|
$:content
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue