Browse Source

learning/prediction UI

Steve L. Nyemba 8 years ago
parent
commit
f9ccd183bc
2 changed files with 38 additions and 15 deletions
  1. 2 1
      src/api/static/css/default.css
  2. 36 14
      src/api/templates/dashboard.html

+ 2 - 1
src/api/static/css/default.css

@@ -96,4 +96,5 @@ input[type=text]:focus{
 
 .bad { color:maroon}
 .good{ color:green}
-.warning{color:orange}
+.warning{color:orange}
+.number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;}

+ 36 - 14
src/api/templates/dashboard.html

@@ -22,15 +22,39 @@
 	})
 </script>
 <body>
-	<div class="left small" style="width:15%">
-		
+	<div class="left small border" style="width:15%; height:90%">
+		<div class="menu">
+			<div class="menu-item"><i class="fa fa-chevron-right"></i> Predictions</div>
+		</div>
 		<div id="menu" class="menu"></div>
 	</div>
+	<div class="left" style="padding:4px; width:80%; height:200px">
+		<div>
+			<div class="bold">Process Predictions</div>
+			<div class="small">Anomaly Detection</div>
+		</div>
+		<div class="left border" style="width:73%; height:85%"></div>
+		<div class="right" style="width:25%; padding:4px" align="center">
+			<div class="border" style="width:100%; height:40%;margin-bottom:4px;">
+				<div class="number">00</div>
+				<div class="small">F-Score</div>
+			</div>
+			<div class="left border width-half" style="height:40%;">
+				<div class="number">00</div>
+				<div class="small">Recall</div>
+			</div>
+			<div class="right border width-half" style="height:40%;">
+				<div class="number">00</div>
+				<div class="small">Precision</div>
+			</div>
+
+		</div>
+	</div>
 	<div class="left info ">
 		
 		<div class="" style="text-transform:capitalize; ">
-			<div class="left">Monitoring 
-			<span id="latest_processes_label" class="bold"></span>
+			<div class="left bold">Monitoring 
+			<span id="latest_processes_label" class=""></span>
 			</div>
 			<div class="right button border" style="margin-right:15px">Predict</div>		
 		</div>
@@ -42,7 +66,7 @@
 			<div id="latest_process_pager" align="center"></div>
 		</div>
 		<div id="process_summary" class="grid border-right" style="margin:4px">
-			<div class="" style="margin:4px; padding:4px">Global Process Summary By Status</div>
+			<div class="bold" style="margin:4px; padding:4px">Global Process Summary By Status</div>
 			
 			<div class=""  style="height:120px; margin:4px">
 				<div id="summary_chart" class="right"></div>
@@ -51,13 +75,13 @@
 		</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="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>
 	</div>	
 	<div class="left info">
 		
-		<div class="">CPU & Memory Usage Trend for <span id="trend_info" class=""></span>
+		<div class="bold">CPU & Memory Usage Trend for <span id="trend_info" class=""></span>
 		</div>
 		
 		<div style="height:270px; margin-top:10px">
@@ -69,18 +93,16 @@
 			<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
 				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
 			</div>
-			
-			<div class="small">
-				<i class="fa fa-warning" style="color:orange"></i>
-				Click on a row that is not complete to download requirements file
-			</div>
-			
+						
 			<div class="" style="margin-top:10px">
 				<div id="sandbox_status" class="grid">
 				</div>
 				<div id="sandbox_pager"></div>
 			</div>
-			
+			<div>
+				<div class="bold">Java Management eXtension Container</div>
+				<div class="small">This applies to Tomcat, Tomee and derived products</div>
+			</div>
 		</div>