minor UI updates

community
Steve L. Nyemba 8 years ago
parent 150a796c9a
commit 9191e43eff

@ -119,7 +119,7 @@ monitor.processes.trend.init = function (label,app) {
var logs = JSON.parse(x.responseText) var logs = JSON.parse(x.responseText)
var dom = jx.dom.get.instance('trend_info'); var dom = jx.dom.get.instance('trend_info');
dom.logs = logs dom.logs = logs
jx.dom.set.value('trend_info',app) jx.dom.set.value('trend_info',app.trim())
// jx.dom.set.attribute(label,'logs',logs) // jx.dom.set.attribute(label,'logs',logs)
monitor.processes.trend.render(logs,null,app) monitor.processes.trend.render(logs,null,app)
}) })
@ -144,8 +144,8 @@ monitor.processes.trend.render = function (logs, key,label) {
conf.options = { legend: { position: 'bottom' } } conf.options = { legend: { position: 'bottom' } }
conf.options.scales = {} conf.options.scales = {}
conf.options.scales.yAxes = [ conf.options.scales.yAxes = [
{id:'0',scaleLabel:{display:true,labelString:'CPU & MEMORY USAGE'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}, {id:'0',scaleLabel:{display:true,labelString:' % CPU & MEMORY USAGE'},ticks:{min:0,max:100,beginAtZero:true},gridLines: {display:false}}
{id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}} // {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
] ]
conf.options.scales.xAxes = [ conf.options.scales.xAxes = [
{ {
@ -163,13 +163,13 @@ monitor.processes.trend.render = function (logs, key,label) {
var x_axis = [] var x_axis = []
var _x = {} var _x = {}
// var _y = {} // var _y = {}
var cpu = {yAxisID:'0', label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1} var cpu = {label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1}
var mem = {yAxisID:'0',label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1} var mem = {label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1}
var proc= {yAxisID:'1',label : 'Proc Count',data:[],backgroundColor:'transparent',borderColor:COLORS[542],fill:false,borderWidth:1} // var proc= {yAxisID:'1',label : 'Proc Count',data:[],backgroundColor:'transparent',borderColor:COLORS[542],fill:false,borderWidth:1}
var 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 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"}
jx.utils.patterns.visitor(logs,function(item){ jx.utils.patterns.visitor(logs,function(item){
//x = new Date(item.year,item.month-1,item.day,item.hour,item.minute) //x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
day = item.day > 9? (['0',item.day]).join(''): item.day day = item.day.length > 1? (['0',item.day]).join(''): item.day
month = months[item.month] month = months[item.month]
x = ([month,day,item.hour+':'+item.minute]).join(' ') x = ([month,day,item.hour+':'+item.minute]).join(' ')
y = item[key] y = item[key]
@ -179,7 +179,7 @@ monitor.processes.trend.render = function (logs, key,label) {
x_axis.push(x) x_axis.push(x)
cpu.data.push({ x: x, y: item.cpu_usage }) cpu.data.push({ x: x, y: item.cpu_usage })
mem.data.push({x:x,y:item.memory_usage}) mem.data.push({x:x,y:item.memory_usage})
proc.data.push({x:x,y:item.proc_count}) // proc.data.push({x:x,y:item.proc_count})
// return {x:x,y:y} // return {x:x,y:y}
} }
@ -188,7 +188,7 @@ monitor.processes.trend.render = function (logs, key,label) {
conf.data.datasets = [cpu,mem,proc] conf.data.datasets = [cpu,mem]
x_axis = jx.utils.unique(x_axis) x_axis = jx.utils.unique(x_axis)
conf.data.labels = x_axis conf.data.labels = x_axis
// console.log(conf) // console.log(conf)

@ -57,7 +57,7 @@
<div class="small">Latest Lookup <span id="app-summary-date"></span></div> <div class="small">Latest Lookup <span id="app-summary-date"></span></div>
</div> </div>
<div class="" style="padding:2px; height:200px; margin:4px; margin-top:10px"> <div class="" style="padding:2px; height:270px; margin:4px; margin-top:10px">
<div class=" " style="height:100%"> <div class=" " style="height:100%">
<div class="small left" style="margin-left:2%; margin-top:1%"> <div class="small left" style="margin-left:2%; margin-top:1%">
<div class="bold">Total Applications that have:</div> <div class="bold">Total Applications that have:</div>
@ -84,7 +84,7 @@
</div> </div>
<div class="left info"> <div class="left info">
<div class="" style="height:28px"> <div class="" style="height:28px">
<div class="small bold">CPU & Memory Usage Trend for <span id="trend_info" class="default bold"></span></div> <div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
<div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div> <div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div>
</div> </div>

Loading…
Cancel
Save