added summary charts, auto start @TODO: revisit layout & prepare learning

src/api/static/css/default.css

@@ -15,10 +15,11 @@ body {
 .right{float:right}
 .caption {
 	font-size:22px;
-	margin:4px;
+	margin:2px;
-	padding:4px;
+	padding:2px;
-	height:32px;
+	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-half {
-.grid .fa-times {color:maroon; }
+	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%; }

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

src/api/templates/dashboard.html

@@ -31,24 +31,40 @@
 		<div id="menu" class="menu"></div>
 	</div>
 		
-	<div class="left info border">
+	<div class="left info ">
 		
-			<div class="small" style="text-transform:capitalize">Monitoring <span id="latest_processes_label"></span></div>
+		<div class="" style="text-transform:capitalize; height:32px">Monitoring <span id="latest_processes_label" class="bold"></span>
-			<div id="latest_processes" class="grid small"></div>
+			<div class="right menu">
+				<div class="right menu-item"><i class="fa fa-refresh"></i></div>
+			</div>
+		</div>
 		
+		<div id="latest_processes" class="grid-half small border"></div>
+		<div id="process_summary" class="grid-half border">
+			<div class="">Global Process Summary</div>
+			
+			<div class="left width-half border-right" id="summary_chart"></div> <div id="summary_details"></div>
+			<div class="left width-half" id="summary_ranking"></div>
+		</div>
 	</div>	
-	<div class="left info border">
+	<div class="left info border-left">
 		
-		<div class="small">History of Processes <span id="trend_info"></span>
+		<div>History of Processes <span id="trend_info" class="bold"></span>
 		</div>
-		<div class="menu">
+		<div class="menu" style="margin:4px">
-			<div class="left menu-item small  padding-2x margin-2x"><i class="fa fa-chevron-right"></i> CPU used</div>
+			<div class="left menu-item small  padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'cpu_usage',null)"><i class="fa fa-chevron-right" ></i> CPU used</div>
-			<div class="left menu-item small padding-2x margin-2x"><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_usage',null)"><i class="fa fa-chevron-right" ></i> Mem. Used</div>
-			<div class="left menu-item small padding-2x margin-2x"><i class="fa fa-chevron-right"></i> Mem. Avail</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>
+	</div>
+	
+	<div class="left" style="width:80%">
+		<div>Python Virtual Environment
+			<div class="small">Requirements Assessment</div>
 		</div>
-		<canvas id="trends_chart" class="small grid" height="150px">
-
-		</canvas>
 	</div>
 	
 </body>