added cpu/memory on same chart and download of requirements file in virtual environment analysis @TODO: multivariate anomaly detection

src/api/index.py

@@ -113,6 +113,13 @@ def trends ():
 		return json.dumps(series)
 	else:
 		return "[]"
+@app.route('/download',methods=['POST'])
+def requirements():
+	stream = request.form['missing']
+	print stream
+	stream = "\n".join(json.loads(stream))
+	headers = {"content-disposition":"attachment; filename=requirements.txt"}
+	return Response(stream,mimetype='text/plain',headers=headers)
 @app.route('/dashboard')
 def dashboard():
 	context = PARAMS['context']

src/api/static/js/dashboard.js

@@ -109,14 +109,14 @@ monitor.processes.trend.init = function (label,app) {
 	})
 }
 monitor.processes.trend.render = function (logs, key,label) {
-	if (key == null) {
-		key = 'memory_usage'
-	}
-	if (logs == null || label == null){
+	// if (key == null) {
+	// 	key = 'memory_usage'
+	// }
+	// if (logs == null || label == null){
 		
-		logs = jx.dom.get.instance('trend_info').logs
-		label= jx.dom.get.value('trend_info') ;
-	}
+	// 	logs = jx.dom.get.instance('trend_info').logs
+	// 	label= jx.dom.get.value('trend_info') ;
+	// }
 	var frame = $('#trends_chart')
 	jx.dom.set.value('trends_chart','')
 	var context = jx.dom.get.instance('CANVAS')
@@ -127,7 +127,7 @@ monitor.processes.trend.render = function (logs, key,label) {
 	conf.data = {}
 	conf.options = { legend: { position: 'bottom' } }
 	conf.options.scales = {}
-	conf.options.scales.yAxes = [  {scaleLabel:{display:true,labelString:key.replace(/_/,' ').toUpperCase()},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
+	conf.options.scales.yAxes = [  {scaleLabel:{display:true,labelString:'CPU & MEMORY USAGE'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
 	conf.options.scales.xAxes = [
 		{
 			
@@ -144,33 +144,28 @@ monitor.processes.trend.render = function (logs, key,label) {
 	conf.data.datasets = [	]
 	var x_axis = []
 	var _x = {}
-	var _y = {}
-	var values = jx.utils.patterns.visitor(logs,function(item){
+	// var _y = {}
+	var cpu = { label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1}
+	var mem = {label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1}
+	jx.utils.patterns.visitor(logs,function(item){
 		x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
 		y = item[key]
-		if (_x[x] == null ||(_x[x] == null && _y[y] == null)) {
+		if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) {
 			_x[x] = 1
-			_y[y] = 1
+			// _y[y] = 1
 			x_axis.push(x)	
+			cpu.data.push({ x: x, y: item.cpu_usage })
+			mem.data.push({x:x,y:item.memory_usage})
+			// return {x:x,y:y}
 			
-			return {x:x,y:y}
-			
-		} else {
-			return null
 		}
 		
 	})
 	
-	var serie = {label:label,data:values}
-	i = parseInt(Math.random() * (COLORS.length - 1))
-	serie.backgroundColor = 'transparent'
-	serie.borderColor = COLORS[2]
-	serie.borderWidth = 1
-	serie.type = 'line'
-	conf.data.datasets.push(serie)
 	
-	x_axis = jx.utils.unique(x_axis)
 	
+	conf.data.datasets = [cpu,mem]
+	x_axis = jx.utils.unique(x_axis)
 	conf.data.labels = x_axis
 	// console.log(conf)
 	jx.dom.append('trends_chart',context)
@@ -282,20 +277,20 @@ monitor.sandbox.init = function () {
 	})
 }
 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'}
+	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'}
+	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 = 4 
+	options.pageSize = 4
 	options.pageIndex = 1
 	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>'
-		options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
+	options.pagerContainer = '#sandbox_pager'
+	options.pagerFormat = "{prev} Page {pageIndex} of {pageCount} {next}"
+	options.pagePrevText = '<i class="fa fa-chevron-left"></i>'
+	options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
 	options.rowClass = function (item) {
 		
 		if (item.value < 70) {
@@ -304,9 +299,24 @@ monitor.sandbox.render = function (logs) {
 			return 'warning'
 		} else {
 			return 'good'
-		}	
+		}
 	}
+	options.rowClick = function (args) {
+		var item = args.item;
+		if (item.missing.length > 0) {
+			var form = jx.dom.get.instance('FORM')
+			var dom = jx.dom.get.instance('INPUT')
+			dom.type = 'hidden'
+			dom.name = 'missing'
+			dom.value = JSON.stringify(item.missing)
+			
+			form.action 	= '/download'
+			form.method = 'POST'
+			form.appendChild(dom)
+			form.submit()
 
+		}
+	}
 	options.fields = [
 		{ name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
 		{ name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }

src/api/templates/dashboard.html

@@ -58,14 +58,10 @@
 	</div>	
 	<div class="left info">
 		
-		<div>History of Processes <span id="trend_info" class="bold"></span>
+		<div class="">CPU & Memory Usage Trend for <span id="trend_info" class=""></span>
 		</div>
-		<div class="menu" style="margin:4px">
-			<div class="left menu-item small  padding-2x margin-2x" onclick="monitor.processes.trend.render(null,'cpu_usage',null)"><i class="fa fa-chevron-right" ></i> CPU used</div>
-			<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:270px">
+		
+		<div style="height:270px; margin-top:10px">
 			<div id="trends_chart" class="small grid" style="height:250px"></div>
 		</div>
 		<div class="border-top" style="padding:4px;">
@@ -74,9 +70,16 @@
 			<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
 				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
 			</div>
-			<div class="">
+			
+			<div class="small">
+				<i class="fa fa-warning" style="color:orange"></i>
+				Click on a row that is not complete to download requirements file
+			</div>
+			
+			<div class="" style="margin-top:10px">
 				<div id="sandbox_status" class="grid">
 				</div>
+				<div id="sandbox_pager"></div>
 			</div>
 			
 		</div>