improvement of trends with Couchdb, need to have a level of automatic rendering

src/api/index.py

@@ -84,21 +84,16 @@ def procs(id):
 @app.route('/trends') 
 def trends ():
 	id = request.args.get('id')
+	app = request.args.get('app').strip()
 	r = gReader.basic_read()
 	if id in r:
-		r = r[id]
-		series = {}
+		r = r[id] #--matrix
+		series = []
 		for row in r:
-			
-			for item in row:
-				id = item['label']
-				if id not in series :
-					series[id] = []
-				series[id].append(item)
-				if len(series[id]) > 24 :
-					beg = len(series[id]) - 25
-					series[id] = series[id][beg:]
-
+			series += [item for item in row if str(item['label'])== app]
+		if len(series) > 24 :
+			beg = len(series) - 25
+			series = series[beg:]
 		return json.dumps(series)
 	else:
 		return "[]"

src/api/static/css/default.css

@@ -32,6 +32,7 @@ body {
 	margin:4px;
 	padding:4px;
 	width:100%;
+	height:150px;
 }
 .grid .fa-check {color:green}
 .grid .fa-times {color:maroon; }

src/api/static/js/dashboard.js

@@ -25,7 +25,7 @@ monitor.processes.init = function(x){
 		frame.className = 'menu-item'
 		frame.onclick = function () {
 			monitor.processes.render(this.label, this.data);
-			monitor.processes.trend.init(this.label)
+			//monitor.processes.trend.init(this.label)
 		}
 		jx.dom.append('menu',frame)
 	})
@@ -50,6 +50,12 @@ monitor.processes.render = function(label,data) {
 		
 		return 'small'
 	}
+	options.rowClick = function(args){
+		var item = args.item
+		var id 	= jx.dom.get.value('latest_processes_label')
+		var app = item.label
+		monitor.processes.trend.init(id,app)
+	}
 	options.autoload  = true
 	options.fields = [{name:'label',type:'text',title:"Process",headercss:"small bold",css:"small"},{name:"cpu_usage",type:"number",title:"CPU", headercss:"small bold"},{name:"memory_usage",type:"text",title:"Mem. Used",type:"number",headercss:"small bold"},{name:"memory_available",type:"number",title:"Mem. Avail",headercss:"small bold"},
 	{name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"}
@@ -60,68 +66,61 @@ monitor.processes.render = function(label,data) {
 }
 
 monitor.processes.trend = {}
-monitor.processes.trend.init = function (label) {
+monitor.processes.trend.init = function (label,app) {
 	var httpclient = HttpClient.instance()
-	var uri = '/trends?id='+label
+	var uri = '/trends?id='+label+'&app='+encodeURIComponent(app)
 	httpclient.get(uri, function (x) {
 		var logs = JSON.parse(x.responseText)
-		console.log(logs)
+		
 		// jx.dom.set.attribute(label,'logs',logs)
-		monitor.processes.trend.render(logs)
+		monitor.processes.trend.render(logs,null,app)
 	})
 }
-monitor.processes.trend.render = function (logs, key) {
+monitor.processes.trend.render = function (logs, key,label) {
 	if (key == null) {
 		key = 'memory_usage'
 	}
 	var context = $('#trends_chart')
-	var conf = { type: 'line' }
+	var conf = { type: 'line',responsive:true,maintainAspectRatio:true }
 	conf.data = {}
 	conf.options = { legend: { position: 'bottom' } }
 	conf.options.scales = {}
-	conf.options.scales.yAxes = [{ title: {display:true,text:key},gridLines: {display:false}}]
+	conf.options.scales.yAxes = [ {ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
 	conf.options.scales.xAxes = [
 		{
 			
 			type: 'time',
 			gridLines: {display:false},
+			unitStepSize:25,
 			time: {
-				format:'dd-MMM HH:mm'
+				format:'DD-MMM HH:mm'
 			}
 			
 		}
 		
 	]
-	// conf.data.labels = x_axis
-	var p = jx.utils.keys(logs)
 	conf.data.datasets = [	]
-	var labels = []
-	var i = 0;
-	
-	for (id in logs) {
-		var serie = {}
-		serie.label = id
-		serie.data = jx.utils.patterns.visitor(logs[id], function (item) {
-			// x = parseFloat(item['hour'] + '.' + item['minute']).toFixed(2)
+	var x_axis = []
+	var values = jx.utils.patterns.visitor(logs,function(item){
 		x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
 		y = item[key]
-			labels.push(x)
-			console.log([item.day,item.hour,item.minute])
+		x_axis.push(x)
+		
 		return {x:x,y:y}
+		
 	})
 	
-		serie.backgroundColor = ['#ffffff']
+	var serie = {label:label,data:values}
+	i = parseInt(Math.random() * (COLORS.length - 1))
+	serie.backgroundColor = 'transparent'
 	serie.borderColor = COLORS[i]
 	serie.borderWidth = 1
-		++i
+	serie.type = 'line'
 	conf.data.datasets.push(serie)
 	
+	x_axis = jx.utils.unique(x_axis)
 	
-	}
-	
-	labels = jx.utils.unique(labels)
-	console.log(labels)
-	conf.data.labels = labels
+	conf.data.labels = x_axis
 	// console.log(conf)
 	var chart = new Chart(context,conf)
 

src/api/templates/dashboard.html

@@ -46,7 +46,7 @@
 			<div class="left menu-item small padding-2x margin-2x"><i class="fa fa-chevron-right"></i> Mem. Used</div>
 			<div class="left menu-item small padding-2x margin-2x"><i class="fa fa-chevron-right"></i> Mem. Avail</div>
 		</div>
-		<canvas id="trends_chart" class="small grid">
+		<canvas id="trends_chart" class="small grid" height="92%">
 
 		</canvas>
 	</div>