From bce596438fffeb51d0928045315b9e89a4b96c10 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 16 Aug 2019 18:36:40 +0400 Subject: [PATCH 01/13] add pie chart for showing services status --- static/monit-dashboard.js | 29 ++++++++++++++++++++++++++++- templates/index.html | 10 +++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 3971677..9f116f4 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -6,4 +6,31 @@ for (i = 0; i < acc.length; i++) { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } -} \ No newline at end of file +} + +function draw(data) { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + var colors = ['#40ff00', '#ff0000']; + var angles = [Math.PI * 1.5, Math.PI * data]; + var offset = 0; + var beginAngle = 0; + var endAngle = 0; + var offsetX, offsetY, medianAngle; + + 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(); + 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(); + } +} diff --git a/templates/index.html b/templates/index.html index 28512df..ea73870 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,5 +1,11 @@ $def with (output, now) +$ data = 0.5 + + + + + $ errors = 0 $ color = "green" $for server in range(len(output)): @@ -79,4 +85,6 @@ $for server in range(len(output)): Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second

- + + + From ff76401ecddbd63ce35581d9248a45f053e8b77b Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 16 Aug 2019 19:29:41 +0400 Subject: [PATCH 02/13] fix the canvas func onload issue --- bin/monit-dashboard.py | 2 -- templates/index.html | 12 +++++------- templates/layout.html | 2 +- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index 31fe677..779b941 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -25,7 +25,6 @@ output = [] # Functions - def getMonit(): output = [] xmlQuery = "/_status?format=xml" @@ -61,7 +60,6 @@ def getMonit(): # Classes - class monitDashboard(web.application): def run(self, port=8080, *middleware): diff --git a/templates/index.html b/templates/index.html index ea73870..06f9e5d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,11 +1,7 @@ $def with (output, now) -$ data = 0.5 - - - - +$ data = 0.4 - + $ errors = 0 $ color = "green" $for server in range(len(output)): @@ -86,5 +82,7 @@ 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..b17136e 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -15,4 +15,4 @@ $def with (content) Home | Help - \ No newline at end of file + From cb00899ec813ccb76c7ea677942583b542551f92 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 16 Aug 2019 21:07:50 +0400 Subject: [PATCH 03/13] calculate success & failure rate perc --- bin/monit-dashboard.py | 18 +++++++++++++++++- static/monit-dashboard.js | 7 +++++-- templates/index.html | 3 +-- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index 779b941..8549c9a 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -25,6 +25,20 @@ output = [] # Functions +def calculate_percentage(data): + perc = {} + ls = data.values() + z, nz = 0,0 + for v in ls: + if v == 0: + z += 1 + else: + nz += 1 + perc['green'] = (float(z)*100)/len(ls) + perc['red'] = (float(nz)*100)/len(ls) + return perc + + def getMonit(): output = [] xmlQuery = "/_status?format=xml" @@ -51,7 +65,9 @@ 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) + perc = calculate_percentage(sorted_checks) + print perc + server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=perc) output.append(server) diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 9f116f4..4ee5d14 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -8,12 +8,15 @@ for (i = 0; i < acc.length; i++) { } } -function draw(data) { +function draw(rate) { + console.log(rate) + var green = (rate['green']*2)/100; + var red = (rate['red']*2)/100; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var colors = ['#40ff00', '#ff0000']; - var angles = [Math.PI * 1.5, Math.PI * data]; + var angles = [Math.PI * green, Math.PI * red]; var offset = 0; var beginAngle = 0; var endAngle = 0; diff --git a/templates/index.html b/templates/index.html index 06f9e5d..174c06a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,7 +1,6 @@ $def with (output, now) -$ data = 0.4 - + $ errors = 0 $ color = "green" $for server in range(len(output)): From a22071dffe225c7a6b8b6f49026cf20f1b608c52 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Wed, 21 Aug 2019 17:51:02 +0400 Subject: [PATCH 04/13] get chart values dynamically --- templates/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/index.html b/templates/index.html index 174c06a..92d0b7b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,6 +3,7 @@ $def with (output, now) $ errors = 0 $ color = "green" + $for server in range(len(output)): $code: errors = 0 @@ -17,7 +18,7 @@ $for server in range(len(output)): $if errors > 0: $code: color = "red" - +

@@ -82,6 +83,7 @@ Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second + From 9fe3733a1a7c15dc6975cc48a626fcb2fe61f98e Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Thu, 22 Aug 2019 12:52:18 +0400 Subject: [PATCH 05/13] divide page to highlight error rate chart --- bin/monit-dashboard.py | 1 + static/monit-dashboard.css | 2 +- templates/index.html | 17 ++++++++++------- templates/layout.html | 4 ++-- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index 8549c9a..25bfab0 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -72,6 +72,7 @@ def getMonit(): output.append(server) print(datetime.datetime.now()) + output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'}) return(output) # Classes diff --git a/static/monit-dashboard.css b/static/monit-dashboard.css index 271d8d4..9e34d2e 100644 --- a/static/monit-dashboard.css +++ b/static/monit-dashboard.css @@ -69,4 +69,4 @@ div.panel.show { .red:hover { background-color: #c9302c; -} \ No newline at end of file +} diff --git a/templates/index.html b/templates/index.html index 92d0b7b..689cd3c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,7 +3,8 @@ $def with (output, now) $ errors = 0 $ color = "green" - +
+
$for server in range(len(output)): $code: errors = 0 @@ -18,7 +19,7 @@ $for server in range(len(output)): $if errors > 0: $code: color = "red" - +

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

@@ -75,15 +76,17 @@ $for server in range(len(output)):
+
-


+
+ +


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 b17136e..62fc37c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -8,11 +8,11 @@ $def with (content) - + $:content - Home | Help + Home | Help From 5ded387411376e8e8bbf364a9206ed43b746b363 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 4 Oct 2019 13:29:56 +0400 Subject: [PATCH 06/13] add box for status chart --- -H | 0 static/monit-dashboard.css | 11 +++++++++++ templates/index.html | 10 ++++++++-- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 -H diff --git a/-H b/-H new file mode 100644 index 0000000..e69de29 diff --git a/static/monit-dashboard.css b/static/monit-dashboard.css index 9e34d2e..8a397fa 100644 --- a/static/monit-dashboard.css +++ b/static/monit-dashboard.css @@ -41,6 +41,7 @@ button.accordion { border: none; outline: none; transition: 0.4s; + margin: 0.6rem; } div.panel { @@ -70,3 +71,13 @@ div.panel.show { .red:hover { background-color: #c9302c; } + +.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) +} diff --git a/templates/index.html b/templates/index.html index 689cd3c..744c648 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,7 +4,7 @@ $def with (output, now) $ errors = 0 $ color = "green"
-
+
$for server in range(len(output)): $code: errors = 0 @@ -79,8 +79,14 @@ $for server in range(len(output)):
-
+
+
+

Hosts status

+
+
+ +



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

From bb5cb38ce94566d3ebd7283d55edfd649c8902d7 Mon Sep 17 00:00:00 2001 From: Saravanan Palanisamy Date: Fri, 4 Oct 2019 13:35:07 +0400 Subject: [PATCH 07/13] Delete -H --- -H | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 -H diff --git a/-H b/-H deleted file mode 100644 index e69de29..0000000 From 0134cc42bbaf7921f3620f4bf2ec789971a5d1fa Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 4 Oct 2019 19:57:08 +0400 Subject: [PATCH 09/13] chart container positioning --- static/monit-dashboard.css | 15 ++++++++++++++- templates/index.html | 4 ++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/static/monit-dashboard.css b/static/monit-dashboard.css index 8a397fa..839a91c 100644 --- a/static/monit-dashboard.css +++ b/static/monit-dashboard.css @@ -37,7 +37,7 @@ button.accordion { cursor: pointer; padding: 18px; width: 100%; - text-align: left; + text-align: center; border: none; outline: none; transition: 0.4s; @@ -72,6 +72,12 @@ div.panel.show { background-color: #c9302c; } +.canvas-container { + height: 40%; + margin: auto; + width: 24%; +} + .canvas-graph { min-height: 30%; min-width: 24.5%; @@ -81,3 +87,10 @@ div.panel.show { 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/templates/index.html b/templates/index.html index 744c648..03f4885 100644 --- a/templates/index.html +++ b/templates/index.html @@ -79,9 +79,9 @@ $for server in range(len(output)):
-
+
-

Hosts status

+

Hosts status

From 35520528e476a8805b462935a03cae39a40807e0 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 25 Oct 2019 17:05:29 +0400 Subject: [PATCH 10/13] update vars inside draw --- static/monit-dashboard.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 4ee5d14..7419729 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -10,11 +10,11 @@ for (i = 0; i < acc.length; i++) { function draw(rate) { console.log(rate) - var green = (rate['green']*2)/100; - var red = (rate['red']*2)/100; + var percentage = [rate['green'], rate['red']]; + 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; @@ -28,7 +28,9 @@ function draw(rate) { medianAngle = (endAngle + beginAngle) / 2; offsetX = Math.cos(medianAngle) * offset; offsetY = Math.sin(medianAngle) * offset; + ctx.beginPath(); + ctx.fillStyle = colors[i % colors.length]; ctx.moveTo(200 + offsetX, 200 + offsetY); ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle); From 097ea5b351bb5c0f93fcf277f7440c5cfd4c3e55 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 25 Oct 2019 19:14:40 +0400 Subject: [PATCH 11/13] add legend in chart --- bin/monit-dashboard.py | 1 + static/monit-dashboard.js | 23 +++++++++++++++++------ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index 25bfab0..c4621d8 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -73,6 +73,7 @@ def getMonit(): print(datetime.datetime.now()) output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'}) + output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 0), (u'monitoring1', 0)]), 's_rate': {'green': 100.0, 'red': 0.0}, 'name': u'MY Environment3'}) return(output) # Classes diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 7419729..aaee175 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -11,6 +11,7 @@ for (i = 0; i < acc.length; i++) { function draw(rate) { console.log(rate) var percentage = [rate['green'], rate['red']]; + var status = ['Ok', 'Error']; var green = (percentage[0]*2)/100; var red = (percentage[1]*2)/100; var canvas = document.getElementById("canvas"); @@ -22,6 +23,7 @@ function draw(rate) { 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]; @@ -31,11 +33,20 @@ function draw(rate) { ctx.beginPath(); - 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(); + 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 - 105, i * 20 + 10, 10, 10); + ctx.fill(); + ctx.font = "13px sans-serif"; + //ctx.font = "20px Georgia"; + ctx.fillText(status[i] + " - " + Number(percentage[i]).toFixed(1) + " %", + canvas.width - 85, i * 20 + 20); + } } } From 10450f218ad20fd9c5ddb1cfd9787a90e8804ce1 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 25 Oct 2019 19:48:24 +0400 Subject: [PATCH 12/13] customize the chart legent texts --- bin/monit-dashboard.py | 15 +++++++-------- static/monit-dashboard.js | 14 +++++++++----- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index c4621d8..db52b28 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -25,8 +25,8 @@ output = [] # Functions -def calculate_percentage(data): - perc = {} +def calculate_count(data): + count = {} ls = data.values() z, nz = 0,0 for v in ls: @@ -34,9 +34,9 @@ def calculate_percentage(data): z += 1 else: nz += 1 - perc['green'] = (float(z)*100)/len(ls) - perc['red'] = (float(nz)*100)/len(ls) - return perc + count['green'] = z + count['red'] = nz + return count def getMonit(): @@ -65,9 +65,8 @@ def getMonit(): sorted_checks = OrderedDict() sorted_checks = OrderedDict(sorted(checks.iteritems(), key=itemgetter(1), reverse=True)) - perc = calculate_percentage(sorted_checks) - print perc - server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=perc) + count = calculate_count(sorted_checks) + server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=count) output.append(server) diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index aaee175..a77eb76 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -9,8 +9,11 @@ for (i = 0; i < acc.length; i++) { } function draw(rate) { - console.log(rate) - var percentage = [rate['green'], rate['red']]; + 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; @@ -41,12 +44,13 @@ function draw(rate) { ctx.stroke(); ctx.fill(); - ctx.rect(canvas.width - 105, i * 20 + 10, 10, 10); + 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] + " - " + Number(percentage[i]).toFixed(1) + " %", - canvas.width - 85, i * 20 + 20); + ctx.fillText(status[i] + " - " + count[i] + " (" + + Number(percentage[i]).toFixed(1) + "%)", + canvas.width - 109, i * 20 + 20); } } } From 69f571097159ad6950207a9c6092978607289528 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 25 Oct 2019 20:14:26 +0400 Subject: [PATCH 13/13] remove test values --- bin/monit-dashboard.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/bin/monit-dashboard.py b/bin/monit-dashboard.py index db52b28..f34b3c9 100755 --- a/bin/monit-dashboard.py +++ b/bin/monit-dashboard.py @@ -71,8 +71,6 @@ def getMonit(): output.append(server) print(datetime.datetime.now()) - output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'}) - output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 0), (u'monitoring1', 0)]), 's_rate': {'green': 100.0, 'red': 0.0}, 'name': u'MY Environment3'}) return(output) # Classes