diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index 31fe677..f34b3c9 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -25,6 +25,19 @@ output = [] # 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(): output = [] @@ -52,7 +65,8 @@ def getMonit(): sorted_checks = OrderedDict() 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) @@ -61,7 +75,6 @@ def getMonit(): # Classes - class monitDashboard(web.application): def run(self, port=8080, *middleware): diff --git a/static/monit-dashboard.css b/static/monit-dashboard.css index 271d8d4..839a91c 100644 --- a/static/monit-dashboard.css +++ b/static/monit-dashboard.css @@ -37,10 +37,11 @@ button.accordion { cursor: pointer; padding: 18px; width: 100%; - text-align: left; + text-align: center; border: none; outline: none; transition: 0.4s; + margin: 0.6rem; } div.panel { @@ -69,4 +70,27 @@ div.panel.show { .red:hover { background-color: #c9302c; -} \ No newline at end of file +} + +.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; +} diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 3971677..a77eb76 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -6,4 +6,51 @@ for (i = 0; i < acc.length; i++) { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } -} \ No newline at end of file +} + +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); + } + } +} diff --git a/templates/index.html b/templates/index.html index 28512df..03f4885 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,7 +1,10 @@ $def with (output, now) + $ errors = 0 $ color = "green" +
+
$for server in range(len(output)): $code: errors = 0 @@ -16,7 +19,7 @@ $for server in range(len(output)): $if errors > 0: $code: color = "red" - +

@@ -46,7 +49,7 @@ $for server in range(len(output)): $else: $code: color = "green" - +

@@ -73,10 +76,23 @@ $for server in range(len(output)):
+
-


+
+
+

Hosts status

+ +
+
+ +
+


Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second

+
+ +
+ diff --git a/templates/layout.html b/templates/layout.html index 93b7b0f..62fc37c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -8,11 +8,11 @@ $def with (content) - + $:content - Home | Help + Home | Help - \ No newline at end of file +