From 045482975a35ef51481af41db12e44d39ff7fdd9 Mon Sep 17 00:00:00 2001 From: "Steve L. Nyemba" Date: Mon, 2 Jan 2017 00:57:59 -0600 Subject: [PATCH] Sandbox Analysis, layout fix, refactored barchart to match doughnut --- src/api/index.py | 21 +++++- src/api/static/css/default.css | 6 +- src/api/static/js/dashboard.js | 117 +++++++++++++++++++++++++++---- src/api/templates/dashboard.html | 32 ++++++--- 4 files changed, 150 insertions(+), 26 deletions(-) diff --git a/src/api/index.py b/src/api/index.py index eff3ac3..c70b7c4 100644 --- a/src/api/index.py +++ b/src/api/index.py @@ -56,7 +56,7 @@ f.close() # # from threading import Thread, RLock -p = {'uri':'http://localhost:5984','dbname':'monitor','uid':'logs','filename':'logs.JSON'} +p = {'uri':'http://dev.the-phi.com:5984','dbname':'monitor','uid':'logs','filename':'logs.JSON'} factory = DataSourceFactory() gWriter = factory.instance(type='CouchdbWriter',args=p) gReader = factory.instance(type='CouchdbReader',args=p) @@ -76,6 +76,25 @@ def procs(id): r = [] return json.dumps(r) +""" + This function/endpoint will assess n-virtual environments and return the results + @TODO: Should this be stored for future mining (I don't think so but could be wrong) +""" +@app.route('/sandbox') +def sandbox(): + if 'sandbox' in HANDLERS: + handler = HANDLERS['sandbox']['class'] + conf = HANDLERS['sandbox']['config'] + r = [] + for id in conf: + handler.init(conf[id]) + r.append (dict(handler.composite(),**{"label":id})) + else: + print 'Oops' + r = [] + + + return json.dumps(r) @app.route('/trends') def trends (): id = request.args.get('id') diff --git a/src/api/static/css/default.css b/src/api/static/css/default.css index f85cc78..5379d1b 100644 --- a/src/api/static/css/default.css +++ b/src/api/static/css/default.css @@ -92,4 +92,8 @@ input[type=text]:focus{ } .height-quarter{height:25%;} .width-half {width:47%; } -.width-75 {width:72%} \ No newline at end of file +.width-75 {width:72%} + +.bad { color:maroon} +.good{ color:green} +.warning{color:orange} \ No newline at end of file diff --git a/src/api/static/js/dashboard.js b/src/api/static/js/dashboard.js index bbd9a85..b79cc54 100644 --- a/src/api/static/js/dashboard.js +++ b/src/api/static/js/dashboard.js @@ -50,9 +50,18 @@ monitor.processes.render = function(label,data) { }) jx.dom.set.value('latest_processes','') ; jx.dom.set.value('latest_processes_label',label) - var options = {width:$('#latest_processes').width()} - options.pageSize = 10 + var options = { + width: $('#latest_processes').width(), height:'auto' + } + options.paging = true + options.pageSize = 3 options.pageIndex = 1 + options.pageButtonCount = 3 + options.pagerContainer = '#latest_process_pager' + options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}" + options.pagePrevText= '' + options.pageNextText= " " + options.data = data options.rowClass = function (item, index,evt) { @@ -64,9 +73,14 @@ monitor.processes.render = function(label,data) { var app = item.label monitor.processes.trend.init(id,app) } + options.autoload = true - options.fields = [{name:'label',type:'text',title:"Process",headercss:"small bold",css:"small"},{name:"cpu_usage",type:"number",title:"CPU", headercss:"small bold"},{name:"memory_usage",type:"text",title:"Mem. Used",type:"number",headercss:"small bold"},{name:"memory_available",type:"number",title:"Mem. Avail",headercss:"small bold"}, - {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"} + options.fields = [ + { name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"}, + { name: "cpu_usage", type: "number", title: "CPU", headercss: "small bold" , width:'64px'}, + { name: "memory_usage", type: "text", title: "Mem. Used", type: "number", headercss: "small bold" }, + { name: "memory_available", type: "number", title: "Mem. Avail", headercss: "small bold" }, + {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center", width:'64px'} ] var grid = $('#latest_processes').jsGrid(options) ; // @@ -159,7 +173,12 @@ 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 colors = [COLORS[11], COLORS[1], COLORS[2]] + colors = [COLORS[11], COLORS[2], COLORS[100]] + RUNNING_COLOR = COLORS[26] + IDLE_COLOR = COLORS[100] + CRASH_COLOR=COLORS[2] + var i = 0; for( label in logs ){ var rows = logs[label] @@ -169,19 +188,15 @@ monitor.processes.summary.init = function(logs){ 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 data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]} var context = jx.dom.get.instance('CANVAS') jx.dom.set.value('summary_chart','') @@ -190,17 +205,18 @@ monitor.processes.summary.init = function(logs){ conf.type = 'doughnut' conf.data = data - conf.options = {legend:{ position:'right'}} + conf.options = {legend:{ position:'right'},repsonsive:true} var chart = new Chart(context,conf) jx.dom.set.value('summary_ranking','') context = jx.dom.get.instance('CANVAS') jx.dom.append('summary_ranking',context) - conf = {type:'bar',responsive:true} + + conf = { type: 'bar', responsive: true } conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }} conf.options.legend ={position:'right'} - + /* conf.data = {labels:['Running','Idle','Crash']} var labels = jx.utils.keys(series) @@ -209,5 +225,80 @@ monitor.processes.summary.init = function(logs){ series[id].backgroundColor = COLORS[i++] return series[id]}) chart = new Chart(context,conf); + */ + var labels = jx.utils.keys(logs) + conf.data = { labels: labels, backgroundColor:colors } + var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = [] + jx.utils.patterns.visitor(labels, function (id) { + var rows = logs[id] + var index = xr.length + xr_bg[index] = RUNNING_COLOR + xi_bg[index] = IDLE_COLOR + xc_bg[index] = CRASH_COLOR + if (xr[index] == null) { + xr[index] = 0 + xc[index] = 0 + xi[index] = 0 + } + + jx.utils.patterns.visitor(logs[id], function (row) { + if (row.status.match(/running/i)) { + xr[index] += 1 + + } else if (row.status.match(/idle/i)) { + xi[index] += 1 + + } else { + xc[index] += 1 + + } + }) + }) + + conf.data.datasets = [{ label: 'running', data:xr,backgroundColor:xr_bg},{label:'crash',data:xc,backgroundColor:xc_bg},{label:'idle',data:xi,backgroundColor:xi_bg} ] + console.log(conf.data.datasets) + chart = new Chart(context, conf) + +} + +monitor.sandbox = {} +monitor.sandbox.init = function () { + var httpclient = HttpClient.instance() + httpclient.get('/sandbox', function (x) { + var r = JSON.parse(x.responseText) + monitor.sandbox.render(r); + }) +} +monitor.sandbox.render = function (logs) { + months = {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'} + var d = ([logs[0].day, '-', months[logs[0].month],'-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('') + jx.dom.set.value('sandbox_date',d) + var options = {width:$('#sandbox_status').width(),height:'auto'} + options.data = logs + options.paging = true + options.pageSize = 3 + options.pageIndex = 1 + options.pageButtonCount = 3 + options.pagerContainer = '#latest_process_pager' + options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}" + options.pagePrevText= '' + options.pageNextText = " "; + options.rowClass = function (item) { + + if (item.value < 70) { + return 'bad' + } else if (item.value < 100) { + return 'warning' + } else { + return 'good' + } + } + + options.fields = [ + { name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' }, + { name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' } + + ] + var grid = $('#sandbox_status').jsGrid(options) } \ No newline at end of file diff --git a/src/api/templates/dashboard.html b/src/api/templates/dashboard.html index 293b534..b6ee846 100644 --- a/src/api/templates/dashboard.html +++ b/src/api/templates/dashboard.html @@ -39,18 +39,24 @@ -
- +
+
+
+
+
+
Global Process Summary By Status
-
-
+
+
+
+
Global Process Summary By Groups
-
+
@@ -62,14 +68,18 @@
Mem. Used
Mem. Avail
-