Fixing layout & shadow as well as search in folder grid

src/api/static/js/dashboard.js

@@ -45,8 +45,8 @@ monitor.processes.init = function (x) {
 		//
 		jx.dom.hide('apps')
 	}
-	
-	setTimeout(monitor.sandbox.init,3000)
+	monitor.sandbox.init()
+	// setTimeout(monitor.sandbox.init,1000)
 }
 
 /**
@@ -231,23 +231,29 @@ monitor.processes.summary.init = function(logs){
 	}
 	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('total-running', xr)
-	jx.dom.set.value('total-crash', xc)
-	jx.dom.set.value('total-idle', xi)
+	// jx.dom.set.value('total-running', xr)
+	// jx.dom.set.value('total-crash', xc)
+	// jx.dom.set.value('total-idle', xi)
 	jx.dom.set.value('total-apps', xr + xi + xc)
 	
 	
 	jx.dom.set.value('app-summary-date', date)
 	jx.dom.set.value('summary_chart','')
 	jx.dom.append('summary_chart',context)
-	var conf = {}//width:50,height:40}
+	var conf = {}//width:'auto',height:$('#process_summary').height}
 	
 	conf.type = 'doughnut'
 	conf.responsive = true
 	conf.data = data
-	conf.options = {legend:{ position:'right'},repsonsive:true}
-	var chart = new Chart(context,conf)
-	
+	conf.options = { legend: { position: 'right' }, repsonsive: true }
+	var _chart = new Chart(context,conf)
+	
+	$('#summary_chart').click(function (evt) {
+		console.log(_chart)
+		console.log($(_chart))
+		var activePoints = $(_chart).getSegmentsAtEvent(evt);
+		console.log(activePoints)
+	})
 	jx.dom.set.value('summary_ranking','')
 	context	= jx.dom.get.instance('CANVAS')
 	jx.dom.append('summary_ranking',context)
@@ -405,13 +411,15 @@ monitor.folders.search.init = function(){
 	var term = jx.dom.get.value('folder_search')
 	var data = jx.dom.get.attribute('folder_search', 'data')
 	
-	term = term.replace(/\x32/g,'')
+	term = term.replace(/ /g,'')
 	if (term.length == 0) {
 		monitor.folders.render.summary(data)
 	} else if (term.length > 0) {
 		
 		data = jx.utils.patterns.visitor(data, function (row) {
-			if (row.id.match(term)) {
+			pattern = "(.*" + term + ".*)"
+			
+			if (row.id.match(pattern)) {
 				return row
 			}
 		})
@@ -513,11 +521,11 @@ monitor.folders.render.summary = function (data) {
 	
 	jx.dom.set.value('gridfolders', '')
 	var options = {
-		width: $('#gridfolders').width(), height:'auto'
+		width: $('#gfolderframe').width()-8, height:'auto'
 	}
 	options.paging = true
 	options.pageSize = 4
-	options.pageIndex = 2
+	options.pageIndex = 1
 	options.pageButtonCount = 4
 	options.pagerContainer = '#folderspager'
     	options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"

src/api/templates/dashboard.html

@@ -17,7 +17,7 @@
 <script src="{{ context }}/static/js/jsgrid/jsgrid.js"></script>
 <script src="{{context}}/static/js/colors.js"></script>
 <script src="{{context}}/static/js/dashboard.js"></script>
-<title>iMonitor</title>
+<title>{{title}}</title>
 <script>
 	var HTTP_CONTEXT="{{context}}"
 	$(document).ready(function(){
@@ -51,30 +51,29 @@
 		<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 id="process_summary" class="simple-gradient shadow grid border-right" style="margin:4px">
 			<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
-				<div class="bold" >Application Summary By Status</div>
+				<div class="bold" style="color:#4682B4">Application Summary By Status</div>
 				<div  id="app-summary-date" class="small"></div>
 			</div>
 			
-			<div class="simple-gradient shadow"  style="padding:2px; height:150px; margin:4px; margin-top:10px">
-				<div class="left small width-half" style="margin-top:10px">
-					<div class="border-right" style="padding:4px" title="Running"><span id="total-running" class="default">0</span> <i class="fa fa-check right" style="margin:4px"></i></div>
-					<div class="border-right"  title="Crash" style="padding:4px; margin-top:2px"><span id="total-crash" class="default">0</span> <i class="fa fa-times right" style="margin:4px"></i></div>
-					<div class="border-right"  title="Idle" style="padding:4px; margin-top:2px"><span id="total-idle" class="default">0</span> <i class="fa fa-ellipsis-h right" style="margin:4px"></i></div>
-					<div class="border-top"  style="padding:4px; margin-top:2px"> <span id="total-apps" class="default">0</span> <span class="right">Applications</span></div>
+			<div class=""  style="padding:2px; height:200px; margin:4px; margin-top:10px">
+				<div class="left small width-quarter" style="margin-top:10px">
+					
 				</div>
-				
-				<div id="summary_chart" class="width-half right"></div>
+				<div class="right width-75" style="height:93%">
+					<div id="summary_chart"></div>
+				</div>
+				<div class="border-top left small"  style=""><span id="total-apps" class="default">0</span><span class="">Applications Monitored</span></div>
 			</div> 
 			<div id="summary_details" class="right"></div>
 		</div>
 		
-		<div class="grid border-right" style="margin:4px; margin-top:10px;">
+		<div class="shadow simple-gradient  grid border-right" style="margin:4px; margin-top:10px;">
 			<div style="height:28px">
-				<div class="bold" style="margin:4px; padding:4px">Application Summary By Groups</div>
+				<div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
 			</div>
-			<div class="shadow simple-gradient width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
+			<div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
 		</div>
 	</div>	
 	<div class="left info">
@@ -114,8 +113,8 @@
 						<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
 						<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
 					</div>
-					<div style="margin-top:10px; height:170px">
-						<div id="gridfolders"></div>
+					<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
+						<div id="gridfolders" style=""></div>
 						<div id="folderspager" class="small" style="height:22px"></div>
 					</div>
 				</div>