layout work, minor changes to virtual environment view

src/api/static/css/default.css

@@ -21,6 +21,19 @@ body {
 	font-family:sans-serif;
 	font-weight:lighter;
 	
+}
+.button {
+	padding:8px;
+	margin:2px;
+	border-radius:4px;
+	-moz-border-radius:4px;
+	-webkit-border-radius:4px;
+	cursor:pointer;
+}
+.button:hover{
+	background-color:#4682B4 ;
+	color:#ffffff;
+	
 }
 .no-border{ border:1px solid transparent}
 .border { border:1px solid #CAD5E0}
@@ -29,13 +42,11 @@ body {
 .border-left { border-left:1px solid #CAD5E0;}
 .border-top { border-top:1px solid #CAD5E0;}
 .grid {
-	font-family:helvetica;
+	font-family:sans-serif;
 	font-weight:lighter;
 	
 	margin:4px;
 	padding:4px;
-	width:100%;
-	height:350px;
 }
 .grid-half {
 	height:195px;
@@ -43,8 +54,8 @@ body {
 	width:98%;
 	padding:4px;
 }
-.grid-half .fa-check {color:green}
+.grid .fa-check {color:green}
-.grid-half .fa-times {color:maroon; }
+.grid .fa-times {color:maroon; }
 
 .menu {
 	margin:4px;
@@ -73,11 +84,12 @@ input[type=text]:focus{
 .padding-2x{padding:4px;}
 .margin-2x {margin:4px;}
 .info {
-	padding:4px;
+	
 	margin:4px;
 	width:40%;
-	height:450px;
+	
 	
 }
 .height-quarter{height:25%;}
 .width-half {width:47%; }
+.width-75 {width:72%}

src/api/static/js/dashboard.js

@@ -50,8 +50,9 @@ 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(),height:$('#latest_processes').height()-2}
+	var options = {width:$('#latest_processes').width()}
-	
+	options.pageSize = 10
+	options.pageIndex = 1
 	options.data = data
 	options.rowClass = function (item, index,evt) {
 		
@@ -185,18 +186,21 @@ monitor.processes.summary.init = function(logs){
 	
 	jx.dom.set.value('summary_chart','')
 	jx.dom.append('summary_chart',context)
-	var options = {}
+	var conf = {width:50,height:50}
-	options.type = 'doughnut'
-	options.data = data
 	
-	var chart = new Chart(context,options)
+	conf.type = 'doughnut'
+	conf.data = data
+	conf.options = {legend:{ position:'right'}}
+	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.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false}}] }}
+	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)
 	

src/api/templates/dashboard.html

@@ -33,21 +33,27 @@
 		
 	<div class="left info ">
 		
-		<div class="" style="text-transform:capitalize; height:32px">Monitoring <span id="latest_processes_label" class="bold"></span>
+		<div class="" style="text-transform:capitalize; height:28px">Monitoring <span id="latest_processes_label" class="bold"></span>
 			<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="latest_processes" class="grid border-right" style="margin:4px; padding:2px"></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 id="process_summary" class="grid border-right" style="margin:4px">
-			<div class="left width-half" id="summary_ranking"></div>
+			<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>
+		
+		<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>
 	</div>	
-	<div class="left info border-left">
+	<div class="left info">
 		
 		<div>History of Processes <span id="trend_info" class="bold"></span>
 		</div>
@@ -59,12 +65,17 @@
 		<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>
 			
-	<div class="left" style="width:80%">
-		<div>Python Virtual Environment
-			<div class="small">Requirements Assessment</div>
 		</div>
+
+		
 	</div>
 	
+	
 </body>