configuration of data store and minor UI updates with firefox

src/api/index.py

@@ -53,9 +53,15 @@ f.close()
 #
 from threading import Thread, RLock
 p  = {'uri':'http://dev.the-phi.com:5984','dbname':'monitor','uid':'logs','filename':'logs.JSON'}
+p = CONFIG['store']['args']
+class_read = CONFIG['store']['class']['read']
+class_write= CONFIG['store']['class']['write']
 factory = DataSourceFactory()
-gWriter = factory.instance(type='CouchdbWriter',args=p)
-gReader = factory.instance(type='CouchdbReader',args=p)
+#gWriter = factory.instance(type='CouchdbWritera',args=p)
+#gReader = factory.instance(type='CouchdbReader',args=p)
+
+gReader = factory.instance(type=class_read,args=p)
+gWriter = factory.instance(type=class_write,args=p)
 mthread = monitor.Monitor(HANDLERS,gWriter,'processes',)
 
 @app.route('/get/<id>')
@@ -101,8 +107,8 @@ def trends ():
 		series = []
 		for row in r:
 			series += [item for item in row if str(item['label'])== app]
-		if len(series) > 24 :
-			beg = len(series) - 25
+		if len(series) > 12 :
+			beg = len(series) - 13
 			series = series[beg:]
 		return json.dumps(series)
 	else:

src/api/static/js/dashboard.js

@@ -38,6 +38,12 @@ monitor.processes.init = function(x){
 	jx.dom.get.children('menu')[0].click()
 	setTimeout(monitor.sandbox.init,3000)
 }
+
+/**
+* This function renders the grid of processes being monitored,
+* @param label	label the list of processes belongs to
+* @param data	dataset of a selected set of processes (works a bit like top)
+*/
 monitor.processes.render = function(label,data) {
 
 	data = jx.utils.patterns.visitor(data,function(row){
@@ -55,9 +61,9 @@ monitor.processes.render = function(label,data) {
 		width: $('#latest_processes').width(), height:'auto'
 	}
 	options.paging = true
-	options.pageSize = 3
+	options.pageSize = 4
 	options.pageIndex = 1
-	options.pageButtonCount = 3
+	options.pageButtonCount = 4
 	options.pagerContainer = '#latest_process_pager'
     	options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
     	options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
@@ -114,8 +120,10 @@ monitor.processes.trend.render = function (logs, key,label) {
 	var frame = $('#trends_chart')
 	jx.dom.set.value('trends_chart','')
 	var context = jx.dom.get.instance('CANVAS')
+	context.width = $(frame).width()
+	context.height= $(frame).height()
 
-	var conf = { type: 'line',responsive:true,maintainAspectRatio:true }
+	var conf = { type: 'line',responsive:true }
 	conf.data = {}
 	conf.options = { legend: { position: 'bottom' } }
 	conf.options.scales = {}
@@ -268,19 +276,22 @@ monitor.sandbox.init = function () {
 	var httpclient = HttpClient.instance()
 	httpclient.get('/sandbox', function (x) {
 		var r = JSON.parse(x.responseText)
-		monitor.sandbox.render(r);
+		if (r.length > 0){
+			monitor.sandbox.render(r);
+		}
 	})
 }
 monitor.sandbox.render = function (logs) {
 	months = {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'}
+	
 	var d = ([logs[0].day, '-', months[logs[0].month],'-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
 	jx.dom.set.value('sandbox_date',d)
 	var options = {width:$('#sandbox_status').width(),height:'auto'}
 	options.data = logs
 	options.paging = true
-	options.pageSize = 3
+	options.pageSize = 4 
 	options.pageIndex = 1
-	options.pageButtonCount = 3
+	options.pageButtonCount = 4
 	options.pagerContainer = '#latest_process_pager'
     	options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
     	options.pagePrevText= '<i class="fa fa-chevron-left"></i>'

src/api/templates/dashboard.html

@@ -65,8 +65,8 @@
 			<div class="left menu-item small padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'memory_usage',null)"><i class="fa fa-chevron-right" ></i> Mem. Used</div>
 			<div class="left menu-item small padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'memory_available',null)"><i class="fa fa-chevron-right"></i> Mem. Avail</div>
 		</div>
-		<div style="height:255px">
-			<div id="trends_chart" class="small grid"></div>
+		<div style="height:270px">
+			<div id="trends_chart" class="small grid" style="height:250px"></div>
 		</div>
 		<div class="border-top" style="padding:4px;">
 			<div style="height:48px">