var monitor = {}
monitor.processes = {}
monitor.processes.fetch = function(){
var httpclient = HttpClient.instance()
httpclient.get('/get/processes',monitor.processes.init);
}
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){
var div = jx.dom.get.instance('DIV')
var frame= jx.dom.get.instance('DIV')
var i = jx.dom.get.instance('I')
i.className = 'fa fa-chevron-right left'
div.innerHTML = label
frame.data = r[label]
frame.label = label
frame.appendChild(i)
frame.appendChild(div)
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) {
data = jx.utils.patterns.visitor(data,function(row){
var status = {"idle":'',"running":'',"crash":''}
if (!row.status.match(/class/)) {
row.status_id = row.status
row.status = status[row.status]
}
return row
})
jx.dom.set.value('latest_processes','') ;
jx.dom.set.value('latest_processes_label',label)
var options = {width:$('#latest_processes').width()}
options.pageSize = 10
options.pageIndex = 1
options.data = data
options.rowClass = function (item, index,evt) {
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"}
]
var grid = $('#latest_processes').jsGrid(options) ;
//
// We need to auto click the first row
$('#latest_processes').find('.jsgrid-row')[0].click()
}
monitor.processes.trend = {}
monitor.processes.trend.init = function (label,app) {
var httpclient = HttpClient.instance()
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)
})
}
monitor.processes.trend.render = function (logs, key,label) {
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') ;
}
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 = [ {scaleLabel:{display:true,labelString:key.replace(/_/,' ').toUpperCase()},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'
}
}
]
conf.data.datasets = [ ]
var x_axis = []
var _x = {}
var _y = {}
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]
if (_x[x] == null ||(_x[x] == null && _y[y] == null)) {
_x[x] = 1
_y[y] = 1
x_axis.push(x)
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.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 conf = {width:50,height:50}
conf.type = 'doughnut'
conf.data = data
conf.options = {legend:{ position:'right'}}
var chart = new Chart(context,conf)
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},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }}
conf.options.legend ={position:'right'}
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);
}