From e439804e65e0d3d153cec6ffcd2c82ce671f312a Mon Sep 17 00:00:00 2001 From: steve Date: Thu, 29 Dec 2016 18:04:11 -0600 Subject: [PATCH] added summary charts, auto start @TODO: revisit layout & prepare learning --- src/api/static/css/default.css | 22 +++++--- src/api/static/js/dashboard.js | 89 ++++++++++++++++++++++++++++--- src/api/templates/dashboard.html | 40 +++++++++----- src/monitor.pyc | Bin 0 -> 11523 bytes src/utils/__init__.pyc | Bin 0 -> 132 bytes 5 files changed, 124 insertions(+), 27 deletions(-) create mode 100644 src/monitor.pyc create mode 100644 src/utils/__init__.pyc diff --git a/src/api/static/css/default.css b/src/api/static/css/default.css index 3dd5a05..0ffe2f5 100644 --- a/src/api/static/css/default.css +++ b/src/api/static/css/default.css @@ -15,10 +15,11 @@ body { .right{float:right} .caption { font-size:22px; - margin:4px; - padding:4px; - height:32px; + margin:2px; + padding:2px; + height:30px; font-family:sans-serif; + font-weight:lighter; } .no-border{ border:1px solid transparent} @@ -34,10 +35,16 @@ body { margin:4px; padding:4px; width:100%; - height:150px; + height:350px; } -.grid .fa-check {color:green} -.grid .fa-times {color:maroon; } +.grid-half { + height:195px; + margin:4px; + width:98%; + padding:4px; +} +.grid-half .fa-check {color:green} +.grid-half .fa-times {color:maroon; } .menu { margin:4px; @@ -69,7 +76,8 @@ input[type=text]:focus{ padding:4px; margin:4px; width:40%; - height:300px; + height:450px; + } .height-quarter{height:25%;} .width-half {width:47%; } \ No newline at end of file diff --git a/src/api/static/js/dashboard.js b/src/api/static/js/dashboard.js index 2b41336..d3c27e2 100644 --- a/src/api/static/js/dashboard.js +++ b/src/api/static/js/dashboard.js @@ -9,6 +9,7 @@ monitor.processes.fetch = function(){ monitor.processes.init = function(x){ var r = JSON.parse(x.responseText) + monitor.processes.summary.init(r) var keys = jx.utils.keys(r) jx.dom.set.value('menu','') jx.utils.patterns.visitor(keys,function(label){ @@ -25,10 +26,16 @@ monitor.processes.init = function(x){ frame.className = 'menu-item' frame.onclick = function () { monitor.processes.render(this.label, this.data); + jx.dom.set.value('trends_chart','') //monitor.processes.trend.init(this.label) } jx.dom.append('menu',frame) }) + // + // Auto start the first item in the menu + // This is designed not to let the user wander or wonder what is going on + // + jx.dom.get.children('menu')[0].click() } monitor.processes.render = function(label,data) { @@ -43,7 +50,7 @@ monitor.processes.render = function(label,data) { }) jx.dom.set.value('latest_processes','') ; jx.dom.set.value('latest_processes_label',label) - var options = {width:'90%'} + var options = {width:$('#latest_processes').width(),height:$('#latest_processes').height()-2} options.data = data options.rowClass = function (item, index,evt) { @@ -61,8 +68,9 @@ monitor.processes.render = function(label,data) { {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"} ] var grid = $('#latest_processes').jsGrid(options) ; - - + // + // We need to auto click the first row + $('#latest_processes').find('.jsgrid-row')[0].click() } monitor.processes.trend = {} @@ -71,7 +79,9 @@ monitor.processes.trend.init = function (label,app) { var uri = '/trends?id='+label+'&app='+encodeURIComponent(app) httpclient.get(uri, function (x) { var logs = JSON.parse(x.responseText) - + var dom = jx.dom.get.instance('trend_info'); + dom.logs = logs + jx.dom.set.value('trend_info',app) // jx.dom.set.attribute(label,'logs',logs) monitor.processes.trend.render(logs,null,app) }) @@ -80,12 +90,20 @@ monitor.processes.trend.render = function (logs, key,label) { if (key == null) { key = 'memory_usage' } - var context = $('#trends_chart') + if (logs == null || label == null){ + + logs = jx.dom.get.instance('trend_info').logs + label= jx.dom.get.value('trend_info') ; + } + var frame = $('#trends_chart') + jx.dom.set.value('trends_chart','') + var context = jx.dom.get.instance('CANVAS') + var conf = { type: 'line',responsive:true,maintainAspectRatio:true } conf.data = {} conf.options = { legend: { position: 'bottom' } } conf.options.scales = {} - conf.options.scales.yAxes = [ {ticks:{min:0,beginAtZero:true},gridLines: {display:false}}] + conf.options.scales.yAxes = [ {scaleLabel:{display:true,labelString:key.replace(/_/,' ').toUpperCase()},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}] conf.options.scales.xAxes = [ { @@ -110,7 +128,7 @@ monitor.processes.trend.render = function (logs, key,label) { _x[x] = 1 _y[y] = 1 x_axis.push(x) - console.log([x,y]) + return {x:x,y:y} } else { @@ -122,7 +140,7 @@ monitor.processes.trend.render = function (logs, key,label) { var serie = {label:label,data:values} i = parseInt(Math.random() * (COLORS.length - 1)) serie.backgroundColor = 'transparent' - serie.borderColor = COLORS[10] + serie.borderColor = COLORS[2] serie.borderWidth = 1 serie.type = 'line' conf.data.datasets.push(serie) @@ -131,6 +149,61 @@ monitor.processes.trend.render = function (logs, key,label) { conf.data.labels = x_axis // console.log(conf) + jx.dom.append('trends_chart',context) var chart = new Chart(context,conf) + +} +monitor.processes.summary = {} +monitor.processes.summary.init = function(logs){ + var xr = 0, xc = 0, xi = 0 + var series = {} + var colors = [COLORS[1],COLORS[11],COLORS[2]] + var i = 0; + for( label in logs ){ + var rows = logs[label] + series[label] = {data:[0,0,0],label:label} + + jx.utils.patterns.visitor(rows,function(item){ + + if (item.status == 'running'){ + xr += 1 + series[label].data[0] += 1 + + }else if(item.status == 'idle'){ + xi += 1 + series[label].data[1] += 1 + }else{ + xc += 1 + series[label].data[2] += 1 + } + }) + + } + var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[COLORS[1],COLORS[11],COLORS[2]]}]} + var context = jx.dom.get.instance('CANVAS') + + jx.dom.set.value('summary_chart','') + jx.dom.append('summary_chart',context) + var options = {} + options.type = 'doughnut' + options.data = data + + var chart = new Chart(context,options) + + jx.dom.set.value('summary_ranking','') + context = jx.dom.get.instance('CANVAS') + jx.dom.append('summary_ranking',context) + conf = {type:'bar',responsive:true} + + conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false}}] }} + conf.data = {labels:['Running','Idle','Crash']} + var labels = jx.utils.keys(series) + + var i = 0 + conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){ + series[id].backgroundColor = COLORS[i++] + return series[id]}) + chart = new Chart(context,conf); + } \ No newline at end of file diff --git a/src/api/templates/dashboard.html b/src/api/templates/dashboard.html index 4f833d1..d890918 100644 --- a/src/api/templates/dashboard.html +++ b/src/api/templates/dashboard.html @@ -31,24 +31,40 @@ -
+
-
Monitoring
-
+
Monitoring +
+
+
+
+
+
+
Global Process Summary
+ +
+
+
-
+
-
History of Processes +
History of Processes
-
-
CPU used
-
Mem. Used
-
Mem. Avail
+
+
CPU used
+
Mem. Used
+
Mem. Avail
+
+ +
+ +
+
Python Virtual Environment +
Requirements Assessment
- - -
\ No newline at end of file diff --git a/src/monitor.pyc b/src/monitor.pyc new file mode 100644 index 0000000000000000000000000000000000000000..b5d99cd6cb9838ec70a89075934a4668b4f4aafc GIT binary patch literal 11523 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 literal 0 HcmV?d00001 diff --git a/src/utils/__init__.pyc b/src/utils/__init__.pyc new file mode 100644 index 0000000000000000000000000000000000000000..f5ac2b4d83b014d91ef51142d6b9209034ebb2cd GIT binary patch literal 132 zcmZSn%*(apdU8ZE0~9am;nGQ Cnj7K( literal 0 HcmV?d00001