Trang chủ Khám phá Trợ giúp
Đăng nhập
code
/
smart-top
mirror of https://dev.the-phi.com/git/library/smart-top
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

UI enhancement, better handling of sandboxes at API

Steve L. Nyemba 8 năm trước cách đây
mục cha
e1d9b657d0
commit
02790a2872
4 tập tin đã thay đổi với 106 bổ sung và 42 xóa
Split View Hiển thị tình trạng sai khác
  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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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>