PiFrame
/
monit-dashboard
3
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

Beautify

pull/16/head
Adrià 2 years ago
parent
b6d9fc1a28
commit
e3707750b4
7 changed files with 108 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      bin/monit-dashboard.py
  2. 1
      bin/utils.py
  3. 108
      static/monit-dashboard.css
  4. 24
      static/monit-dashboard.js
  5. 4
      templates/help.html
  6. 44
      templates/index.html
  7. 8
      templates/layout.html

19
bin/monit-dashboard.py
View File

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

1
bin/utils.py
View File

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

108
static/monit-dashboard.css
View File

@ -1,104 +1,104 @@
.server-link a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-decoration: underline;
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-decoration: underline;
}
th {
background-color: #999;
padding: 10px;
background-color: #999;
padding: 10px;
}
td {
border-bottom: 1px solid #ccc;
padding: 15px;
border-bottom: 1px solid #ccc;
padding: 15px;
}
body {
font-family: arial;
font-family: arial;
}
tr:nth-child(odd) {
background-color: #fff;
background-color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
background-color: #f2f2f2;
}
a {
color: #cb0017;
font-weight: bolder;
color: #cb0017;
font-weight: bolder;
}
button.accordion {
color: #FFF;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
margin: 0.6rem 0;
color: #FFF;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
margin: 0.6rem 0;
}
button.download-button {
color: white;
background-color: #00a8ff;
cursor: pointer;
padding: 18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
float: right;
margin: auto 0;
color: white;
background-color: #00a8ff;
cursor: pointer;
padding: 18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
float: right;
margin: auto 0;
}
div.download-header {
height: 7%;
background-color: #273c75;
display: flex;
justify-content: flex-end;
padding-right: 20px;
height: 7%;
background-color: #273c75;
display: flex;
justify-content: flex-end;
padding-right: 20px;
}
div.panel {
padding: 0 18px;
background-color: white;
display: none;
padding: 0 18px;
background-color: white;
display: none;
}
div.panel.show {
display: block;
display: block;
}
.green {
background-color: #79bd8f;
font-size: 20px;
background-color: #79bd8f;
font-size: 20px;
}
.green:hover {
background-color: #588a68;
background-color: #588a68;
}
.red {
background-color: #d9534f;
font-size: 20px;
background-color: #d9534f;
font-size: 20px;
}
.red:hover {
background-color: #c9302c;
background-color: #c9302c;
}
.canvas-container {
width: 50%;
display: flex;
justify-content: center;
margin-top:200;
margin-bottom:100;
margin-top: 200;
margin-bottom: 100;
}
.canvas-graph {
@ -108,12 +108,12 @@ div.panel.show {
position: relative;
background-color: white;
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 {
padding: 1rem;
height: 2rem;
background-color: #F2F2F2;
text-align: center;
padding: 1rem;
height: 2rem;
background-color: #F2F2F2;
text-align: center;
}

24
static/monit-dashboard.js
View File

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

4
templates/help.html
View File

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

44
templates/index.html
View File

@ -1,14 +1,14 @@
$def with (output, now)
<body onload="draw($output[0]['s_rate']);">
$ errors = 0
$ color = "green"
<div>
<div class="download-header">
<button class="download-button" onclick="window.location.href = 'download';">Download Report</button>
</div>
<div style="height: 100%;border-right:2px solid #ccc; padding:5px;overflow-x: hidden; float:left; width:48%">
$for server in range(len(output)):
$ errors = 0
$ color = "green"
<div>
<div class="download-header">
<button class="download-button" onclick="window.location.href = 'download';">Download Report</button>
</div>
<div style="height: 100%;border-right:2px solid #ccc; padding:5px;overflow-x: hidden; float:left; width:48%">
$for server in range(len(output)):
$code:
errors = 0
color = "green"
@ -82,21 +82,23 @@ $for server in range(len(output)):
</div>
<div class="canvas-container">
<div class="canvas-graph">
<div class="canvas-header"><h2 style="margin: 0">Hosts status</h2></div>
<canvas id="canvas" width="400" height="400"></canvas>
</div>
</div>
<div class="canvas-container">
<div class="canvas-graph">
<div class="canvas-header">
<h2 style="margin: 0">Hosts status</h2>
</div>
<canvas id="canvas" width="400" height="400"></canvas>
</div>
</div>
<div style="height: 10%; float:right">
<br><br><br>
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
<br><br>
<a href="/">Home</a> | <a href="/help">Help</a>
</div>
<div style="height: 10%; float:right">
<br><br><br>
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
<br><br>
<a href="/">Home</a> | <a href="/help">Help</a>
</div>
</div>
</div>
</body>
<script src="static/monit-dashboard.js" type="text/javascript"></script>

8
templates/layout.html
View File

@ -3,14 +3,14 @@ $def with (content)
<html>
<head>
<title>Monit Dashboard</title>
<link rel="stylesheet" type="text/css" href="static/monit-dashboard.css" />
<meta http-equiv="refresh" content="300">
<title>Monit Dashboard</title>
<link rel="stylesheet" type="text/css" href="static/monit-dashboard.css" />
<meta http-equiv="refresh" content="300">
</head>
<body>
$:content
$:content
</body>

Write Preview
Loading…
Cancel
Save