Wiring up the first part of the Ui

src/api/index.py

@@ -8,6 +8,9 @@
 	'monitoring-type':
 		'class':'<class-name>'
 		'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
@@ -45,7 +48,29 @@ class_write= CONFIG['store']['class']['write']
 factory = DataSourceFactory()
 # 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>')
 def procs(id):
 	try:
@@ -157,7 +182,13 @@ def dashboard():
 		title = PARAMS['title']
 	else:
 		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')
 def upgrade():

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 {
   stroke: #7A9E9F !important; }
 

src/api/static/js/dashboard.js

@@ -21,7 +21,7 @@ dashboard = {
         
         getData.done(function(results) {
             var data = JSON.parse(results)
-            console.log(data)
+            
             var app = data['apps@lab'];
 
             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 
+
+}

src/api/templates/dashboard.html

@@ -21,10 +21,73 @@
 
     <!--  Fonts and icons     -->
     <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="{{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>
+
+    
+
 <body>
 
 <div class="wrapper">
@@ -93,11 +156,10 @@
 									<b class="caret"></b>
                               </a>
                               <ul class="dropdown-menu">
-                                <li><a href="#">apps@osx</a></li>
+                                  {% for name in app_names %}
-                                <li><a href="#">server 2</a></li>
+                                <li><a href="#">{{name|safe}}</a></li>
-                                <li><a href="#">server 3</a></li>
+                                
-                                <li><a href="#">server 4</a></li>
+                                {% endfor %}
-                                <li><a href="#">server 5</a></li>
                               </ul>
                         </li>
 						<li>
@@ -123,13 +185,17 @@
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-warning text-center">
                                             <i class="ti-dashboard"></i>
+                                            <div class="small">Total CPU</div>
                                         </div>
                                     </div>
                                     <div class="col-xs-7">
+                                       
                                         <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 class="footer">
@@ -147,12 +213,15 @@
                                 <div class="row">
                                     <div class="col-xs-5">
                                         <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 class="col-xs-7">
                                         <div class="numbers">
-                                            <p>Total memory used %</p>
+                                            <div id="total_mem"></div>
+                                            <div class="small" id="mem_units" align="right"></div>
 
                                         </div>
                                     </div>
@@ -172,12 +241,13 @@
                                 <div class="row">
                                     <div class="col-xs-5">
                                         <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 class="col-xs-7">
                                         <div class="numbers">
-                                            <p>Errors</p>
+                                            <div id="total_app_crashes"></div>
                                             <!-- show errors API. Crashed? -->
                                         </div>
                                     </div>
@@ -198,11 +268,13 @@
                                     <div class="col-xs-5">
                                         <div class="icon-big icon-info text-center">
                                             <i class="ti-folder"></i>
+                                            <div class="small">Folders</div>
                                         </div>
                                     </div>
                                     <div class="col-xs-7">
                                         <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. -->
                                         </div>
                                     </div>
@@ -318,35 +390,6 @@
 
 </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>

src/utils/transport.py

@@ -488,6 +488,10 @@ class Couchdb:
 		if q == False:
 			return False
 		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)