|
|
@@ -9,6 +9,7 @@ monitor.processes.fetch = function(){
|
|
|
|
|
|
monitor.processes.init = function(x){
|
|
|
var r = JSON.parse(x.responseText)
|
|
|
+ monitor.processes.summary.init(r)
|
|
|
var keys = jx.utils.keys(r)
|
|
|
jx.dom.set.value('menu','')
|
|
|
jx.utils.patterns.visitor(keys,function(label){
|
|
|
@@ -25,10 +26,16 @@ monitor.processes.init = function(x){
|
|
|
frame.className = 'menu-item'
|
|
|
frame.onclick = function () {
|
|
|
monitor.processes.render(this.label, this.data);
|
|
|
+ jx.dom.set.value('trends_chart','')
|
|
|
//monitor.processes.trend.init(this.label)
|
|
|
}
|
|
|
jx.dom.append('menu',frame)
|
|
|
})
|
|
|
+ //
|
|
|
+ // Auto start the first item in the menu
|
|
|
+ // This is designed not to let the user wander or wonder what is going on
|
|
|
+ //
|
|
|
+ jx.dom.get.children('menu')[0].click()
|
|
|
}
|
|
|
monitor.processes.render = function(label,data) {
|
|
|
|
|
|
@@ -43,7 +50,7 @@ monitor.processes.render = function(label,data) {
|
|
|
})
|
|
|
jx.dom.set.value('latest_processes','') ;
|
|
|
jx.dom.set.value('latest_processes_label',label)
|
|
|
- var options = {width:'90%'}
|
|
|
+ var options = {width:$('#latest_processes').width(),height:$('#latest_processes').height()-2}
|
|
|
|
|
|
options.data = data
|
|
|
options.rowClass = function (item, index,evt) {
|
|
|
@@ -61,8 +68,9 @@ monitor.processes.render = function(label,data) {
|
|
|
{name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"}
|
|
|
]
|
|
|
var grid = $('#latest_processes').jsGrid(options) ;
|
|
|
-
|
|
|
-
|
|
|
+ //
|
|
|
+ // We need to auto click the first row
|
|
|
+ $('#latest_processes').find('.jsgrid-row')[0].click()
|
|
|
}
|
|
|
|
|
|
monitor.processes.trend = {}
|
|
|
@@ -71,7 +79,9 @@ monitor.processes.trend.init = function (label,app) {
|
|
|
var uri = '/trends?id='+label+'&app='+encodeURIComponent(app)
|
|
|
httpclient.get(uri, function (x) {
|
|
|
var logs = JSON.parse(x.responseText)
|
|
|
-
|
|
|
+ var dom = jx.dom.get.instance('trend_info');
|
|
|
+ dom.logs = logs
|
|
|
+ jx.dom.set.value('trend_info',app)
|
|
|
// jx.dom.set.attribute(label,'logs',logs)
|
|
|
monitor.processes.trend.render(logs,null,app)
|
|
|
})
|
|
|
@@ -80,12 +90,20 @@ monitor.processes.trend.render = function (logs, key,label) {
|
|
|
if (key == null) {
|
|
|
key = 'memory_usage'
|
|
|
}
|
|
|
- var context = $('#trends_chart')
|
|
|
+ if (logs == null || label == null){
|
|
|
+
|
|
|
+ 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')
|
|
|
+
|
|
|
var conf = { type: 'line',responsive:true,maintainAspectRatio:true }
|
|
|
conf.data = {}
|
|
|
conf.options = { legend: { position: 'bottom' } }
|
|
|
conf.options.scales = {}
|
|
|
- conf.options.scales.yAxes = [ {ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
|
|
|
+ conf.options.scales.yAxes = [ {scaleLabel:{display:true,labelString:key.replace(/_/,' ').toUpperCase()},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
|
|
|
conf.options.scales.xAxes = [
|
|
|
{
|
|
|
|
|
|
@@ -110,7 +128,7 @@ monitor.processes.trend.render = function (logs, key,label) {
|
|
|
_x[x] = 1
|
|
|
_y[y] = 1
|
|
|
x_axis.push(x)
|
|
|
- console.log([x,y])
|
|
|
+
|
|
|
return {x:x,y:y}
|
|
|
|
|
|
} else {
|
|
|
@@ -122,7 +140,7 @@ monitor.processes.trend.render = function (logs, key,label) {
|
|
|
var serie = {label:label,data:values}
|
|
|
i = parseInt(Math.random() * (COLORS.length - 1))
|
|
|
serie.backgroundColor = 'transparent'
|
|
|
- serie.borderColor = COLORS[10]
|
|
|
+ serie.borderColor = COLORS[2]
|
|
|
serie.borderWidth = 1
|
|
|
serie.type = 'line'
|
|
|
conf.data.datasets.push(serie)
|
|
|
@@ -131,6 +149,61 @@ monitor.processes.trend.render = function (logs, key,label) {
|
|
|
|
|
|
conf.data.labels = x_axis
|
|
|
// console.log(conf)
|
|
|
+ jx.dom.append('trends_chart',context)
|
|
|
var chart = new Chart(context,conf)
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
+monitor.processes.summary = {}
|
|
|
+monitor.processes.summary.init = function(logs){
|
|
|
+ var xr = 0, xc = 0, xi = 0
|
|
|
+ var series = {}
|
|
|
+ var colors = [COLORS[1],COLORS[11],COLORS[2]]
|
|
|
+ var i = 0;
|
|
|
+ for( label in logs ){
|
|
|
+ var rows = logs[label]
|
|
|
+ series[label] = {data:[0,0,0],label:label}
|
|
|
+
|
|
|
+ jx.utils.patterns.visitor(rows,function(item){
|
|
|
+
|
|
|
+ if (item.status == 'running'){
|
|
|
+ xr += 1
|
|
|
+ series[label].data[0] += 1
|
|
|
+
|
|
|
+ }else if(item.status == 'idle'){
|
|
|
+ xi += 1
|
|
|
+ series[label].data[1] += 1
|
|
|
+ }else{
|
|
|
+ xc += 1
|
|
|
+ series[label].data[2] += 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[COLORS[1],COLORS[11],COLORS[2]]}]}
|
|
|
+ var context = jx.dom.get.instance('CANVAS')
|
|
|
+
|
|
|
+ jx.dom.set.value('summary_chart','')
|
|
|
+ jx.dom.append('summary_chart',context)
|
|
|
+ var options = {}
|
|
|
+ options.type = 'doughnut'
|
|
|
+ options.data = data
|
|
|
+
|
|
|
+ var chart = new Chart(context,options)
|
|
|
+
|
|
|
+ jx.dom.set.value('summary_ranking','')
|
|
|
+ context = jx.dom.get.instance('CANVAS')
|
|
|
+ jx.dom.append('summary_ranking',context)
|
|
|
+ conf = {type:'bar',responsive:true}
|
|
|
+
|
|
|
+ conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false}}] }}
|
|
|
+ conf.data = {labels:['Running','Idle','Crash']}
|
|
|
+ var labels = jx.utils.keys(series)
|
|
|
+
|
|
|
+ var i = 0
|
|
|
+ conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){
|
|
|
+ series[id].backgroundColor = COLORS[i++]
|
|
|
+ return series[id]})
|
|
|
+ chart = new Chart(context,conf);
|
|
|
+
|
|
|
}
|
