@ -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 ) ;
}
