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); + } } }