Wiring up the first part of the Ui

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

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

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

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

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

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

Loading…
Cancel
Save