浏览代码

Wiring up the first part of the Ui

Steve L. Nyemba 8 年之前
父节点
当前提交
2327ed9720
共有 5 个文件被更改,包括 165 次插入47 次删除
  1. 33 2
      src/api/index.py
  2. 4 0
      src/api/static/css/dashboard.css
  3. 37 1
      src/api/static/js/dashboard.js
  4. 86 43
      src/api/templates/dashboard.html
  5. 5 1
      src/utils/transport.py

+ 33 - 2
src/api/index.py

@@ -8,6 +8,9 @@
 	'monitoring-type':
 	'monitoring-type':
 		'class':'<class-name>'
 		'class':'<class-name>'
 		'config':<labeled-class-specific-configuration>'
 		'config':<labeled-class-specific-configuration>'
+	@TODO:
+		- In order to make this Saas we need to have the configuration be session driven
+		- Add socketio, so that each section of the dashboard updates independently
 """
 """
 
 
 from flask import Flask, session, request, redirect, Response
 from flask import Flask, session, request, redirect, Response
@@ -45,7 +48,29 @@ class_write= CONFIG['store']['class']['write']
 factory = DataSourceFactory()
 factory = DataSourceFactory()
 # gReader = factory.instance(type=class_read,args=p)
 # gReader = factory.instance(type=class_read,args=p)
 
 
-atexit.register(ThreadManager.stop)
+@app.route('/1/get/apps')
+def get_apps():
+	r = []
+	try:
+		gReader = factory.instance(type=class_read,args=p)
+		r =  gReader.view('summary/app_names',key=p['uid'])
+	except Exception,e:
+		print (e)
+	return json.dumps(r)
+@app.route('/1/get/summary/<id>')
+def get_summary(id):
+	r = []
+	try:
+		gReader = factory.instance(type=class_read,args=p)
+		#if id == 'apps_resources' :
+		#	r = gReader.view('summary/app_resources',key=p['uid'])
+		#else:
+		#	r = gReader.view('summary/folder_size',key=p['uid'])
+		r = r = gReader.view('summary/'+id.strip(),key=p['uid'])
+		
+	except Exception,e:
+		print (e)
+	return json.dumps(r)	
 @app.route('/get/<id>')
 @app.route('/get/<id>')
 def procs(id):
 def procs(id):
 	try:
 	try:
@@ -157,7 +182,13 @@ def dashboard():
 		title = PARAMS['title']
 		title = PARAMS['title']
 	else:
 	else:
 		title = 'Dashboard'
 		title = 'Dashboard'
-	return render_template('dashboard.html',context=context,title=title)
+	apps = []
+	try:
+		gReader = factory.instance(type=class_read,args=p)
+		apps = gReader.view('summary/app_names',key=p['uid'])
+	except Exception, e:
+		print (e)
+	return render_template('dashboard.html',context=context,title=title,app_names=apps)
 
 
 @app.route('/upgrade')
 @app.route('/upgrade')
 def upgrade():
 def upgrade():

+ 4 - 0
src/api/static/css/dashboard.css

@@ -1,3 +1,7 @@
+.small {
+  font-size:11px; font-family:sans-serif; font-weight:lighter; 
+  color:gray;
+}
 .ct-blue {
 .ct-blue {
   stroke: #7A9E9F !important; }
   stroke: #7A9E9F !important; }
 
 

+ 37 - 1
src/api/static/js/dashboard.js

@@ -21,7 +21,7 @@ dashboard = {
         
         
         getData.done(function(results) {
         getData.done(function(results) {
             var data = JSON.parse(results)
             var data = JSON.parse(results)
-            console.log(data)
+            
             var app = data['apps@lab'];
             var app = data['apps@lab'];
 
 
             function getCpuUsage (app){
             function getCpuUsage (app){
@@ -240,3 +240,39 @@ dashboard = {
 	},
 	},
 
 
 }
 }
+
+
+/**
+ * Global information about the dashboard
+ * @TODO: Add socket handling ... it would make non-blocking updating information
+ */
+
+var g = {}
+g.summary = {}
+/**
+ * Initializing the top section of the dashboard (apps and folders)
+ */
+g.summary.factory = function (url,pointer) {
+    var object = {}
+    object.url = url
+    var observer = null
+
+    object.callback = function (r) {
+        r = JSON.parse(r.responseText)
+        pointer(r)
+        //observer.notify()
+        
+    }
+    object.init = function (observer) { 
+        observer = observer
+        
+        var httpclient = HttpClient.instance()
+        httpclient.setAsync(false)
+        httpclient.get(this.url, this.callback)
+
+        observer.notify()
+    }
+    
+    return object 
+
+}

+ 86 - 43
src/api/templates/dashboard.html

@@ -21,10 +21,73 @@
 
 
     <!--  Fonts and icons     -->
     <!--  Fonts and icons     -->
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
+    <!--
+        <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
+    -->
     <link href="{{context}}/static/css/themify-icons.css" rel="stylesheet">
     <link href="{{context}}/static/css/themify-icons.css" rel="stylesheet">
+ <!--   Core JS Files   -->
+    <script src="{{context}}/static/js/jquery-1.10.2.js" type="text/javascript"></script>
+	<script src="{{context}}/static/js/bootstrap.min.js" type="text/javascript"></script>
+
+	<!--  Checkbox, Radio & Switch Plugins -->
+	<script src="{{context}}/static/js/bootstrap-checkbox-radio.js"></script>
+
+	<!--  Charts Plugin -->
+	<script src="{{context}}/static/js/chartist.min.js"></script>
 
 
+    <!--  Notifications Plugin    -->
+    <script src="{{context}}/static/js/bootstrap-notify.js"></script>
+
+    <!--  Google Maps Plugin    
+        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
+    -->
+    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
+    <!-- <script src="{{context}}/static/js/dash.js"></script> -->
+	<script src="{{context}}/static/js/default.js"></script>
+
+	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+	<script src="{{context}}/static/js/dashboard.js"></script>
+    <script src="{{context}}/static/js/jx/dom.js"></script>
+    <script src="{{context}}/static/js/jx/rpc.js"></script>
+    <script src="{{context}}/static/js/jx/utils.js"></script>
+	<script type="text/javascript">
+        var URI_CONTEXT="{{context}}"
+    	$(document).ready(function(){
+
+            var lobservers = [
+                g.summary.factory('/1/get/summary/app_resources',function(r){
+                    
+                    //r = JSON.parse(r.responseText)
+                    jx.dom.set.value('total_cpu',r.cpu_usage)
+                    jx.dom.set.value('total_mem',r.memory_usage)
+                    jx.dom.set.value('mem_units',r.units)
+                    
+                }),
+                g.summary.factory('/1/get/summary/folder_size',function(r){
+                    //console.log(r.responseText)
+                    //r = JSON.parse(r.responseText)
+                    if (r.length == 0){
+                        r.size = "0.0"
+                        r.units = 'MB'
+                    }
+                    jx.dom.set.value('total_folder_size',r.size)
+                    jx.dom.set.value('folder_units',r.units)
+                }),
+                g.summary.factory('/1/get/summary/app_status',function(r){
+                    
+                    jx.dom.set.value('total_app_crashes',r.crash)
+                })
+            ]
+            
+            jx.utils.patterns.observer(lobservers,"init")
+        	//dashboard.initChartist();
+
+    	});
+	</script>
 </head>
 </head>
+
+    
+
 <body>
 <body>
 
 
 <div class="wrapper">
 <div class="wrapper">
@@ -93,11 +156,10 @@
 									<b class="caret"></b>
 									<b class="caret"></b>
                               </a>
                               </a>
                               <ul class="dropdown-menu">
                               <ul class="dropdown-menu">
-                                <li><a href="#">apps@osx</a></li>
-                                <li><a href="#">server 2</a></li>
-                                <li><a href="#">server 3</a></li>
-                                <li><a href="#">server 4</a></li>
-                                <li><a href="#">server 5</a></li>
+                                  {% for name in app_names %}
+                                <li><a href="#">{{name|safe}}</a></li>
+                                
+                                {% endfor %}
                               </ul>
                               </ul>
                         </li>
                         </li>
 						<li>
 						<li>
@@ -123,13 +185,17 @@
                                     <div class="col-xs-5">
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-warning text-center">
                                         <div class="icon-big icon-warning text-center">
                                             <i class="ti-dashboard"></i>
                                             <i class="ti-dashboard"></i>
+                                            <div class="small">Total CPU</div>
                                         </div>
                                         </div>
                                     </div>
                                     </div>
                                     <div class="col-xs-7">
                                     <div class="col-xs-7">
+                                       
                                         <div class="numbers">
                                         <div class="numbers">
-                                            <p>Total CPU</p>
-
+                                            
+                                            <div id="total_cpu" align="center">00</div>
+                                            <div class="small"  align="right">Percent</div>
                                         </div>
                                         </div>
+                                        
                                     </div>
                                     </div>
                                 </div>
                                 </div>
                                 <div class="footer">
                                 <div class="footer">
@@ -147,12 +213,15 @@
                                 <div class="row">
                                 <div class="row">
                                     <div class="col-xs-5">
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-success text-center">
                                         <div class="icon-big icon-success text-center">
-                                            <i class="ti-harddrive"></i>
+                                            <i class="fa fa-microchip"></i>
+                                            <div class="small">Mem. Used</div>
+                                            
                                         </div>
                                         </div>
                                     </div>
                                     </div>
                                     <div class="col-xs-7">
                                     <div class="col-xs-7">
                                         <div class="numbers">
                                         <div class="numbers">
-                                            <p>Total memory used %</p>
+                                            <div id="total_mem"></div>
+                                            <div class="small" id="mem_units" align="right"></div>
 
 
                                         </div>
                                         </div>
                                     </div>
                                     </div>
@@ -172,12 +241,13 @@
                                 <div class="row">
                                 <div class="row">
                                     <div class="col-xs-5">
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-danger text-center">
                                         <div class="icon-big icon-danger text-center">
-                                            <i class="ti-pulse"></i>
+                                            <i class="fa fa-warning"></i>
+                                            <div class="small" align="center">Crashes</div>
                                         </div>
                                         </div>
                                     </div>
                                     </div>
                                     <div class="col-xs-7">
                                     <div class="col-xs-7">
                                         <div class="numbers">
                                         <div class="numbers">
-                                            <p>Errors</p>
+                                            <div id="total_app_crashes"></div>
                                             <!-- show errors API. Crashed? -->
                                             <!-- show errors API. Crashed? -->
                                         </div>
                                         </div>
                                     </div>
                                     </div>
@@ -198,11 +268,13 @@
                                     <div class="col-xs-5">
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-info text-center">
                                         <div class="icon-big icon-info text-center">
                                             <i class="ti-folder"></i>
                                             <i class="ti-folder"></i>
+                                            <div class="small">Folders</div>
                                         </div>
                                         </div>
                                     </div>
                                     </div>
                                     <div class="col-xs-7">
                                     <div class="col-xs-7">
                                         <div class="numbers">
                                         <div class="numbers">
-                                            <p>Folder Analysis</p>
+                                            <div id="total_folder_size" align="center"></div>
+                                            <div class="small" align="center" id="folder_units"></div>
                                             <!-- Folder Analysis API here. -->
                                             <!-- Folder Analysis API here. -->
                                         </div>
                                         </div>
                                     </div>
                                     </div>
@@ -318,35 +390,6 @@
 
 
 </body>
 </body>
 
 
-    <!--   Core JS Files   -->
-    <script src="{{context}}/static/js/jquery-1.10.2.js" type="text/javascript"></script>
-	<script src="{{context}}/static/js/bootstrap.min.js" type="text/javascript"></script>
-
-	<!--  Checkbox, Radio & Switch Plugins -->
-	<script src="{{context}}/static/js/bootstrap-checkbox-radio.js"></script>
-
-	<!--  Charts Plugin -->
-	<script src="{{context}}/static/js/chartist.min.js"></script>
-
-    <!--  Notifications Plugin    -->
-    <script src="{{context}}/static/js/bootstrap-notify.js"></script>
-
-    <!--  Google Maps Plugin    -->
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
-
-    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
-    <!-- <script src="{{context}}/static/js/dash.js"></script> -->
-	<script src="{{context}}/static/js/default.js"></script>
-
-	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
-	<script src="{{context}}/static/js/dashboard.js"></script>
-
-	<script type="text/javascript">
-    	$(document).ready(function(){
-
-        	dashboard.initChartist();
-
-    	});
-	</script>
+   
 
 
 </html>
 </html>

+ 5 - 1
src/utils/transport.py

@@ -488,7 +488,11 @@ class Couchdb:
 		if q == False:
 		if q == False:
 			return False
 			return False
 		return True
 		return True
-	
+	def view(self,id,**args):
+		r =self.dbase.view(id,**args)
+		r = r.all()		
+		return r[0]['value'] if len(r) > 0 else []
+		
 """
 """
 	This function will read an attachment from couchdb and return it to calling code. The attachment must have been placed before hand (otherwise oops)
 	This function will read an attachment from couchdb and return it to calling code. The attachment must have been placed before hand (otherwise oops)
 	@T: Account for security & access control
 	@T: Account for security & access control