Wiring up the first part of the Ui

community
Steve L. Nyemba 8 years ago
parent 472c26d05e
commit 2327ed9720

@ -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():

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

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

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

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

Loading…
Cancel
Save