PiFrame/monit-dashboard
PiFrame/monit-dashboard
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #16 from adriaaah/small-beautify

Browse source 
Beautify
This commit is contained in:
adriaaah 2020-01-27 00:22:33 +01:00 committed by GitHub
parent b6d9fc1a28 e3707750b4
commit b136bbeb5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 108 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
bin/monit-dashboard.py
View file

@ -27,10 +27,11 @@ output = []
# Functions # Functions
def calculate_count(data): def calculate_count(data):
count = {} count = {}
ls = data.values() ls = data.values()
z, nz = 0,0 z, nz = 0, 0
for v in ls: for v in ls:
if v == 0: if v == 0:
z += 1 z += 1
@ -67,10 +68,10 @@ def getMonit():
sorted_checks = OrderedDict() sorted_checks = OrderedDict()
sorted_checks = OrderedDict(sorted(checks.iteritems(), sorted_checks = OrderedDict(sorted(checks.iteritems(),
key=itemgetter(1), reverse=True)) key=itemgetter(1), reverse=True))
count = calculate_count(sorted_checks) count = calculate_count(sorted_checks)
server = dict(name=site, url=s['url'], server = dict(name=site, url=s['url'],
result=sorted_checks, s_rate=count) result=sorted_checks, s_rate=count)
output.append(server) output.append(server)
print(datetime.datetime.now()) print(datetime.datetime.now())
@ -78,6 +79,7 @@ def getMonit():
# Classes # Classes
class monitDashboard(web.application): class monitDashboard(web.application):
def run(self, port=8080, *middleware): def run(self, port=8080, *middleware):
func = self.wsgifunc(*middleware) func = self.wsgifunc(*middleware)
@ -87,23 +89,26 @@ class monitDashboard(web.application):
class index(object): class index(object):
def GET(self): def GET(self):
return render.index(output=getMonit(), return render.index(output=getMonit(),
now=datetime.datetime.now()) now=datetime.datetime.now())
class help(object): class help(object):
def GET(self): def GET(self):
return render.help() return render.help()
class download(object): class download(object):
def GET(self): def GET(self):
filename = 'health_report.xlsx' filename = 'health_report.xlsx'
output = getMonit() output = getMonit()
utils.generate_report_excel(output, filename) utils.generate_report_excel(output, filename)
web.header('Content-Disposition', web.header('Content-Disposition',
'attachment; filename="health_report.xlsx"') 'attachment; filename="health_report.xlsx"')
web.header('Content-type','application/octet-stream') web.header('Content-type', 'application/octet-stream')
web.header('Cache-Control','no-cache') web.header('Cache-Control', 'no-cache')
return open(filename, 'rb').read() return open(filename, 'rb').read()
# Main # Main
if __name__ == "__main__": if __name__ == "__main__":
app = monitDashboard(urls, globals()) app = monitDashboard(urls, globals())

1
bin/utils.py
View file

@ -1,6 +1,7 @@
import xlsxwriter import xlsxwriter
import os import os
def generate_report_excel(output, filename): def generate_report_excel(output, filename):
if os.path.exists(filename): if os.path.exists(filename):
os.remove(filename) os.remove(filename)

108
static/monit-dashboard.css
View file

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

24
static/monit-dashboard.js
View file

@ -2,32 +2,32 @@ var acc = document.getElementsByClassName("accordion");
var i; var i;
for (i = 0; i < acc.length; i++) { for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() { acc[i].onclick = function() {
this.classList.toggle("active"); this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show"); this.nextElementSibling.classList.toggle("show");
} }
} }
function draw(rate) { function draw(rate) {
var count = [rate['green'], rate['red']]; var count = [rate['green'], rate['red']];
var percentage = [ var percentage = [
(count[0]*100)/(count[0]+count[1]), (count[0] * 100) / (count[0] + count[1]),
(count[1]*100)/(count[0]+count[1]) (count[1] * 100) / (count[0] + count[1])
] ]
var status = ['Ok', 'Error']; var status = ['Ok', 'Error'];
var green = (percentage[0]*2)/100; var green = (percentage[0] * 2) / 100;
var red = (percentage[1]*2)/100; var red = (percentage[1] * 2) / 100;
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
var colors = ['#00a90e','#ff9a02']; var colors = ['#00a90e', '#ff9a02'];
var angles = [Math.PI * green, Math.PI * red]; var angles = [Math.PI * green, Math.PI * red];
var offset = 0; var offset = 0;
var beginAngle = 0; var beginAngle = 0;
var endAngle = 0; var endAngle = 0;
var offsetX, offsetY, medianAngle; var offsetX, offsetY, medianAngle;
ctx.clearRect(0,0,canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < angles.length; i = i + 1) { for (var i = 0; i < angles.length; i = i + 1) {
beginAngle = endAngle; beginAngle = endAngle;
endAngle = endAngle + angles[i]; endAngle = endAngle + angles[i];
medianAngle = (endAngle + beginAngle) / 2; medianAngle = (endAngle + beginAngle) / 2;
@ -36,7 +36,7 @@ function draw(rate) {
ctx.beginPath(); ctx.beginPath();
if(percentage[i] !== 0) { if (percentage[i] !== 0) {
ctx.fillStyle = colors[i % colors.length]; ctx.fillStyle = colors[i % colors.length];
ctx.moveTo(200 + offsetX, 200 + offsetY); ctx.moveTo(200 + offsetX, 200 + offsetY);
ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle); ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle);

2
templates/help.html
View file

@ -1,3 +1,3 @@
<article> <article>
<p>Please check the README file.</p> <p>Please check the README file.</p>
</article> </article>

44
templates/index.html
View file

@ -1,14 +1,14 @@
$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"
@ -82,21 +82,23 @@ $for server in range(len(output)):
</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>

8
templates/layout.html
View file

@ -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>