瀏覽代碼

UI enhancement, better handling of sandboxes at API

Steve L. Nyemba 8 年之前
父節點
當前提交
02790a2872
共有 4 個文件被更改,包括 106 次插入42 次删除
  1. 3 3
      src/api/index.py
  2. 27 4
      src/api/static/css/default.css
  3. 26 2
      src/api/static/js/dashboard.js
  4. 50 33
      src/api/templates/dashboard.html

+ 3 - 3
src/api/index.py

@@ -103,9 +103,9 @@ def sandbox():
 		#handler = HANDLERS['sandbox']['class']
 		#conf = HANDLERS['sandbox']['config']
 		r = []
-		p = Factory.instance('sandbox',CONFIG)
-		handler = p['class']
-		conf	= p['config']
+		# p = Factory.instance('sandbox',CONFIG)
+		handler = monitor.Sandbox()
+		conf	= CONFIG['sandbox']
 		
 		for id in conf:
 			try:

+ 27 - 4
src/api/static/css/default.css

@@ -2,7 +2,7 @@ body, .default {
 	font-size:14px;
 	font-family:sans-serif;
 	font-weight:lighter;
-	padding:20px;
+	padding:10px;
 	
 }
 .small {
@@ -62,7 +62,7 @@ body, .default {
 	padding:4px;
 }
 .menu .fa-chevron-right {color:transparent; margin:4px; }
-.menu .menu-item { border:1px solid transparent; text-transform:capitalize; cursor:pointer; padding-bottom:4px; margin:2px;}
+.menu .menu-item { border:1px solid transparent; cursor:pointer; padding-bottom:4px; margin:2px;}
 .menu .menu-item:hover {
 	border-bottom-color:#4682B4;
 }
@@ -90,7 +90,9 @@ input[type=text]:focus{
 	
 	
 }
-.height-quarter{height:25%;}
+.height-quarter{height:24%;}
+.height-half{height:47%}
+.width-quarter {width:24%}
 .width-half {width:47%; }
 .width-75 {width:72%}
 
@@ -100,4 +102,25 @@ input[type=text]:focus{
 .number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;}
 
 .action {cursor:pointer; padding:2px; margin:2px; border:1px solid transparent}
-.action:hover { border-bottom-color:#4682B4}
+.action:hover { border-bottom-color:#4682B4}
+.shadow{box-shadow: 7px 7px 5px #888888;}
+.gradient {
+  background-image:
+    linear-gradient(
+      #4682b4, #ffffff,#ffffff
+    );
+}
+.simple-gradient {
+background-image: -ms-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
+
+background-image: -moz-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
+
+background-image: -o-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
+
+background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAD5E0), color-stop(40, #F3F3F3));
+
+background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
+
+background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%);
+	
+}

+ 26 - 2
src/api/static/js/dashboard.js

@@ -205,12 +205,17 @@ monitor.processes.summary.init = function(logs){
 	CRASH_COLOR=COLORS[2]
 
 	var i = 0;
+	var date = null;
 	for( label in logs ){
 		var rows = logs[label]
 		series[label] = {data:[0,0,0],label:label}
 		
 		jx.utils.patterns.visitor(rows,function(item){
-			
+			if (date == null) {
+				
+				date = new Date(item.year,item.month,item.day)
+				//date = [item.day,item.month,item.year]
+			}
 			if (item.status == 'running'){
 				xr += 1
 			}else if(item.status == 'idle'){
@@ -223,7 +228,13 @@ 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-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:50}
@@ -539,7 +550,20 @@ monitor.folders.render.summary = function (data) {
 	var grid = $('#gridfolders').jsGrid(options) ;
 	
 }
-
+monitor.menu = {}
+monitor.menu.event = {}
+monitor.menu.event.toggle = function () {
+	var dom = jx.dom.get.instance('menuframe')
+	var value = dom.style.marginLeft.trim()
+	
+	if (value==0 || value == "0px" || value == "") {
+		var width = -$(dom).width() - 10
+		$('#menuframe').animate({marginLeft:"-12%"})
+	} else {
+		$('#menuframe').animate({marginLeft:"0"})
+	}
+	
+}
 /**
  * Socket handler, check for learning status
  */

+ 50 - 33
src/api/templates/dashboard.html

@@ -26,61 +26,76 @@
 		
 	})
 </script>
-<body>
+<body class="">
 	<div class="border-bottom caption" style="height:42px">
 		<div class="">{{title}}</div>
 		<div class="small" style="margin:4px">The Phi Technology LLC</div>
 	</div>
-	<div class="left small border-right" style="width:12%; height:60%">
-		<div id="menu" class="menu"></div>
+	<i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
+	<div id="menuframe" class="left small " style="width:10%; height:90%">
+		 <div id="menu" class="menu"></div>
 	</div>
 	
-	<div class="left info ">
+	<div class="left info">
 		
-		<div class="" style="text-transform:capitalize; ">
+		<div class="" style="height:28px; ">
 			<div class="left bold">Monitoring 
-			<span id="latest_processes_label" class=""></span>
+			<span id="latest_processes_label" class="default bold"></span>
 			</div>
 			
 		</div>
 		
-		<div class = "border-right" style="padding:2px; margin:4px; height:170px">	
+		<div class = "shadow simple-gradient 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="bold" style="margin:4px; padding:4px">Global Process Summary By Status</div>
+		<div id="process_summary" class=" 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  id="app-summary-date" class="small"></div>
+			</div>
 			
-			<div class=""  style="height:120px; margin:4px">
-				<div id="summary_chart" class="right"></div>
+			<div class="simple-gradient shadow"  style="padding:2px; height:125px; 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>
+				
+				<div id="summary_chart" class="width-half right"></div>
 			</div> 
 			<div id="summary_details" class="right"></div>
 		</div>
 		
-		<div class="grid border-right" style="margin:4px; margin-top:10px">
-			<div class="bold" style="margin:4px; padding:4px">Global Process Summary By Groups</div>
-			<div class="width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
+		<div class="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>
+			<div class="shadow simple-gradient width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
 		</div>
 	</div>	
 	<div class="left info">
-		
-		<div class="bold" style="height:28px">CPU & Memory Usage Trend for <span id="trend_info" class=""></span>
-			<div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div>
+		<div class="" style="height:28px">
+			<div class="small bold">CPU & Memory Usage Trend for <span id="trend_info" class="default bold"></span></div>
+			<div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div>
+
 		</div>
 		
-		<div style="height:270px; margin-top:10px">
+		<div class="shadow simple-gradient" style="height:270px; margin-top:4px">
 			<div id="trends_chart" class="small grid" style="height:250px"></div>
 		</div>
-		<div id="sandbox" class="border-top" style="padding:4px;">
-			<div style="height:48px">
-			<b>Python Virtual Environment Analysis</b>
-			<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
+		<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
+			<div style="height:28px">
+				<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
+				<div class="bold">Python Virtual Environment Analysis</div>
+				
 				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
 			</div>
 						
-			<div class="" style="margin-top:10px; height:135px">
+			<div class="shadow " style="margin-top:10px; height:135px">
 				<div id="sandbox_status" class="">
 				</div>
 				<div id="sandbox_pager"></div>
@@ -88,19 +103,21 @@
 		</div>
 		<div style="margin-top:10px">
 			<div id="folder_summary">
-				<div class="">
+				<div style="height:28px">
 					
-					<div class="bold">Smart Folder Analysis/Monitoring</div>
+					<div class="bold">Folder Analysis/Monitoring</div>
 					<div class="small">Powered By Machine Learning</div>
 				</div>
-				<div class=" border" style="margin-top:4px; padding:2px; height:34px">
-					<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i> 
-					<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:150px">
-					<div id="gridfolders"></div>
-					<div id="folderspager"></div>
+				<div class="shadow">
+					<div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
+						<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i> 
+						<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:150px">
+						<div id="gridfolders"></div>
+						<div id="folderspager"></div>
+					</div>
 				</div>
 			</div>