Sandbox Analysis, layout fix, refactored barchart to match doughnut

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')

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%}
+.width-75 {width:72%}
+
+.bad { color:maroon}
+.good{ color:green}
+.warning{color:orange}

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= '<i class="fa fa-chevron-left"></i>'
+    	options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
+	
 	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= '<i class="fa fa-chevron-left"></i>'
+		options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
+	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)
 	
 }

src/api/templates/dashboard.html

@@ -39,18 +39,24 @@
 			</div>
 		</div>
 		
-		<div id="latest_processes" class="grid border-right" style="margin:4px; padding:2px"></div>
-		
+		<div class = "border-right" style="padding:2px; margin:4px; height:170px">	
+			<div id="latest_processes" class="grid" ></div>
+		</div>
+		<div style="height:22px; padding:2px" class="small">
+			<div id="latest_process_pager" align="center"></div>
+		</div>
 		<div id="process_summary" class="grid border-right" style="margin:4px">
 			<div class="" style="margin:4px; padding:4px">Global Process Summary By Status</div>
 			
-			<div class="width-75" id="summary_chart" style="margin:4px"></div> 
-			<div id="summary_details" class="left"></div>
+			<div class=""  style="height:120px; margin:4px">
+				<div id="summary_chart" class="right"></div>
+			</div> 
+			<div id="summary_details" class="right"></div>
 		</div>
 		
 		<div class="grid border-right" style="margin:4px; margin-top:10px">
 			<div style="margin:4px; padding:4px">Global Process Summary By Groups</div>
-			<div class="width-75" id="summary_ranking" style="margin:4px"></div>
+			<div class="width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
 		</div>
 	</div>	
 	<div class="left info">
@@ -62,14 +68,18 @@
 			<div class="left menu-item small padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'memory_usage',null)"><i class="fa fa-chevron-right" ></i> Mem. Used</div>
 			<div class="left menu-item small padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'memory_available',null)"><i class="fa fa-chevron-right"></i> Mem. Avail</div>
 		</div>
-		<div id="trends_chart" class="small grid" >
-			
+		<div style="height:255px">
+			<div id="trends_chart" class="small grid"></div>
 		</div>
 		<div class="border-top" style="padding:4px;">
-			<div>
-			<b>Python Virtual Environment</b>
-			<div class="right button border">Inspect</div>
-				<div class="small">Requirements Assessment</div>
+			<div style="height:48px">
+			<b>Python Virtual Environment Analysis</b>
+			<div class="right button border" onclick="monitor.sandbox.init()">Inspect</div>
+				<div class="small">Last fetch <span id="sandbox_date"></span></div>
+			</div>
+			<div class="">
+				<div id="sandbox_status" class="grid">
+				</div>
 			</div>
 			
 		</div>