Merge pull request #9 from saravanan30erd/ui_changes
Add the dashboard in home page
This commit is contained in:
adriaaah
GitHub
commit
d5943d7f9a
|
|
@ -25,6 +25,19 @@ output = []
|
||||||
|
|
||||||
# Functions
|
# Functions
|
||||||
|
|
||||||
|
def calculate_count(data):
|
||||||
|
count = {}
|
||||||
|
ls = data.values()
|
||||||
|
z, nz = 0,0
|
||||||
|
for v in ls:
|
||||||
|
if v == 0:
|
||||||
|
z += 1
|
||||||
|
else:
|
||||||
|
nz += 1
|
||||||
|
count['green'] = z
|
||||||
|
count['red'] = nz
|
||||||
|
return count
|
||||||
|
|
||||||
|
|
||||||
def getMonit():
|
def getMonit():
|
||||||
output = []
|
output = []
|
||||||
|
|
@ -52,7 +65,8 @@ def getMonit():
|
||||||
|
|
||||||
sorted_checks = OrderedDict()
|
sorted_checks = OrderedDict()
|
||||||
sorted_checks = OrderedDict(sorted(checks.iteritems(), key=itemgetter(1), reverse=True))
|
sorted_checks = OrderedDict(sorted(checks.iteritems(), key=itemgetter(1), reverse=True))
|
||||||
server = dict(name=site, url=s['url'], result=sorted_checks)
|
count = calculate_count(sorted_checks)
|
||||||
|
server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=count)
|
||||||
|
|
||||||
output.append(server)
|
output.append(server)
|
||||||
|
|
||||||
|
|
@ -61,7 +75,6 @@ def getMonit():
|
||||||
|
|
||||||
# Classes
|
# Classes
|
||||||
|
|
||||||
|
|
||||||
class monitDashboard(web.application):
|
class monitDashboard(web.application):
|
||||||
|
|
||||||
def run(self, port=8080, *middleware):
|
def run(self, port=8080, *middleware):
|
||||||
|
|
|
||||||
|
|
@ -37,10 +37,11 @@ button.accordion {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
|
margin: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.panel {
|
div.panel {
|
||||||
|
|
@ -69,4 +70,27 @@ div.panel.show {
|
||||||
|
|
||||||
.red:hover {
|
.red:hover {
|
||||||
background-color: #c9302c;
|
background-color: #c9302c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas-container {
|
||||||
|
height: 40%;
|
||||||
|
margin: auto;
|
||||||
|
width: 24%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-graph {
|
||||||
|
min-height: 30%;
|
||||||
|
min-width: 24.5%;
|
||||||
|
display: inline-block;
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-header {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 2rem;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,51 @@ for (i = 0; i < acc.length; i++) {
|
||||||
this.classList.toggle("active");
|
this.classList.toggle("active");
|
||||||
this.nextElementSibling.classList.toggle("show");
|
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])
|
||||||
|
]
|
||||||
|
var status = ['Ok', 'Error'];
|
||||||
|
var green = (percentage[0]*2)/100;
|
||||||
|
var red = (percentage[1]*2)/100;
|
||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
var colors = ['#40ff00', '#ff0000'];
|
||||||
|
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) {
|
||||||
|
beginAngle = endAngle;
|
||||||
|
endAngle = endAngle + angles[i];
|
||||||
|
medianAngle = (endAngle + beginAngle) / 2;
|
||||||
|
offsetX = Math.cos(medianAngle) * offset;
|
||||||
|
offsetY = Math.sin(medianAngle) * offset;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
|
||||||
|
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);
|
||||||
|
ctx.lineTo(200 + offsetX, 200 + offsetY);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.rect(canvas.width - 129, i * 20 + 10, 10, 10);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.font = "13px sans-serif";
|
||||||
|
//ctx.font = "20px Georgia";
|
||||||
|
ctx.fillText(status[i] + " - " + count[i] + " (" +
|
||||||
|
Number(percentage[i]).toFixed(1) + "%)",
|
||||||
|
canvas.width - 109, i * 20 + 20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
$def with (output, now)
|
$def with (output, now)
|
||||||
|
|
||||||
|
<body onload="draw($output[0]['s_rate']);">
|
||||||
$ errors = 0
|
$ errors = 0
|
||||||
$ color = "green"
|
$ color = "green"
|
||||||
|
<div>
|
||||||
|
<div style="height: 40%; overflow-y: scroll; overflow-x: hidden;">
|
||||||
$for server in range(len(output)):
|
$for server in range(len(output)):
|
||||||
$code:
|
$code:
|
||||||
errors = 0
|
errors = 0
|
||||||
|
|
@ -16,7 +19,7 @@ $for server in range(len(output)):
|
||||||
$if errors > 0:
|
$if errors > 0:
|
||||||
$code:
|
$code:
|
||||||
color = "red"
|
color = "red"
|
||||||
<button class="accordion ${color}">$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>
|
||||||
|
|
@ -46,7 +49,7 @@ $for server in range(len(output)):
|
||||||
$else:
|
$else:
|
||||||
$code:
|
$code:
|
||||||
color = "green"
|
color = "green"
|
||||||
<button class="accordion ${color}">$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>
|
||||||
|
|
@ -73,10 +76,23 @@ $for server in range(len(output)):
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br><br><br>
|
|
||||||
|
|
||||||
|
<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%;">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@ $def with (content)
|
||||||
<meta http-equiv="refresh" content="300">
|
<meta http-equiv="refresh" content="300">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body style="height: 100%; overflow: hidden;">
|
||||||
|
|
||||||
$:content
|
$:content
|
||||||
|
|
||||||
<a href="/">Home</a> | <a href="/help">Help</a>
|
<a href="/">Home</a> | <a href="/help">Help</a>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue