library
/
smart-top
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added summary charts, auto start @TODO: revisit layout & prepare learning

Browse Source
master
Steve L. Nyemba 8 years ago
parent 9f4de32eb1
commit e439804e65
5 changed files with 124 additions and 27 deletions
Show Stats Download Patch File Download Diff File

22
src/api/static/css/default.css
Unescape View File

@ -15,10 +15,11 @@ body {
.right{float:right} .right{float:right}
.caption { .caption {
font-size:22px; font-size:22px;
margin:4px; margin:2px;
padding:4px; padding:2px;
height:32px; height:30px;
font-family:sans-serif; font-family:sans-serif;
font-weight:lighter;
} }
.no-border{ border:1px solid transparent} .no-border{ border:1px solid transparent}
@ -34,10 +35,16 @@ body {
margin:4px; margin:4px;
padding:4px; padding:4px;
width:100%; width:100%;
height:150px; height:350px;
} }
.grid .fa-check {color:green} .grid-half {
.grid .fa-times {color:maroon; } height:195px;
margin:4px;
width:98%;
padding:4px;
}
.grid-half .fa-check {color:green}
.grid-half .fa-times {color:maroon; }
.menu { .menu {
margin:4px; margin:4px;
@ -69,7 +76,8 @@ input[type=text]:focus{
padding:4px; padding:4px;
margin:4px; margin:4px;
width:40%; width:40%;
height:300px; height:450px;
} }
.height-quarter{height:25%;} .height-quarter{height:25%;}
.width-half {width:47%; } .width-half {width:47%; }

89
src/api/static/js/dashboard.js
Unescape View File

@ -9,6 +9,7 @@ monitor.processes.fetch = function(){
monitor.processes.init = function(x){ monitor.processes.init = function(x){
var r = JSON.parse(x.responseText) var r = JSON.parse(x.responseText)
monitor.processes.summary.init(r)
var keys = jx.utils.keys(r) var keys = jx.utils.keys(r)
jx.dom.set.value('menu','') jx.dom.set.value('menu','')
jx.utils.patterns.visitor(keys,function(label){ jx.utils.patterns.visitor(keys,function(label){
@ -25,10 +26,16 @@ monitor.processes.init = function(x){
frame.className = 'menu-item' frame.className = 'menu-item'
frame.onclick = function () { frame.onclick = function () {
monitor.processes.render(this.label, this.data); monitor.processes.render(this.label, this.data);
jx.dom.set.value('trends_chart','')
//monitor.processes.trend.init(this.label) //monitor.processes.trend.init(this.label)
} }
jx.dom.append('menu',frame) 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) { 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','') ;
jx.dom.set.value('latest_processes_label',label) 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.data = data
options.rowClass = function (item, index,evt) { 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"} {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"}
] ]
var grid = $('#latest_processes').jsGrid(options) ; 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 = {}
@ -71,7 +79,9 @@ monitor.processes.trend.init = function (label,app) {
var uri = '/trends?id='+label+'&app='+encodeURIComponent(app) var uri = '/trends?id='+label+'&app='+encodeURIComponent(app)
httpclient.get(uri, function (x) { httpclient.get(uri, function (x) {
var logs = JSON.parse(x.responseText) 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) // jx.dom.set.attribute(label,'logs',logs)
monitor.processes.trend.render(logs,null,app) monitor.processes.trend.render(logs,null,app)
}) })
@ -80,12 +90,20 @@ monitor.processes.trend.render = function (logs, key,label) {
if (key == null) { if (key == null) {
key = 'memory_usage' 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 } var conf = { type: 'line',responsive:true,maintainAspectRatio:true }
conf.data = {} conf.data = {}
conf.options = { legend: { position: 'bottom' } } conf.options = { legend: { position: 'bottom' } }
conf.options.scales = {} 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 = [ conf.options.scales.xAxes = [
{ {
@ -110,7 +128,7 @@ monitor.processes.trend.render = function (logs, key,label) {
_x[x] = 1 _x[x] = 1
_y[y] = 1 _y[y] = 1
x_axis.push(x) x_axis.push(x)
console.log([x,y])
return {x:x,y:y} return {x:x,y:y}
} else { } else {
@ -122,7 +140,7 @@ monitor.processes.trend.render = function (logs, key,label) {
var serie = {label:label,data:values} var serie = {label:label,data:values}
i = parseInt(Math.random() * (COLORS.length - 1)) i = parseInt(Math.random() * (COLORS.length - 1))
serie.backgroundColor = 'transparent' serie.backgroundColor = 'transparent'
serie.borderColor = COLORS[10] serie.borderColor = COLORS[2]
serie.borderWidth = 1 serie.borderWidth = 1
serie.type = 'line' serie.type = 'line'
conf.data.datasets.push(serie) conf.data.datasets.push(serie)
@ -131,6 +149,61 @@ monitor.processes.trend.render = function (logs, key,label) {
conf.data.labels = x_axis conf.data.labels = x_axis
// console.log(conf) // console.log(conf)
jx.dom.append('trends_chart',context)
var chart = new Chart(context,conf) 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);
}

38
src/api/templates/dashboard.html
Unescape View File

@ -31,24 +31,40 @@
<div id="menu" class="menu"></div> <div id="menu" class="menu"></div>
</div> </div>
<div class="left info border"> <div class="left info ">
<div class="small" style="text-transform:capitalize">Monitoring <span id="latest_processes_label"></span></div> <div class="" style="text-transform:capitalize; height:32px">Monitoring <span id="latest_processes_label" class="bold"></span>
<div id="latest_processes" class="grid small"></div> <div class="right menu">
<div class="right menu-item"><i class="fa fa-refresh"></i></div>
</div>
</div>
<div id="latest_processes" class="grid-half small border"></div>
<div id="process_summary" class="grid-half border">
<div class="">Global Process Summary</div>
<div class="left width-half border-right" id="summary_chart"></div> <div id="summary_details"></div>
<div class="left width-half" id="summary_ranking"></div>
</div>
</div> </div>
<div class="left info border"> <div class="left info border-left">
<div class="small">History of Processes <span id="trend_info"></span> <div>History of Processes <span id="trend_info" class="bold"></span>
</div> </div>
<div class="menu"> <div class="menu" style="margin:4px">
<div class="left menu-item small padding-2x margin-2x"><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,'cpu_usage',null)"><i class="fa fa-chevron-right" ></i> CPU used</div>
<div class="left menu-item small padding-2x margin-2x"><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_usage',null)"><i class="fa fa-chevron-right" ></i> Mem. Used</div>
<div class="left menu-item small padding-2x margin-2x"><i class="fa fa-chevron-right"></i> Mem. Avail</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>
<canvas id="trends_chart" class="small grid" height="150px"> <div id="trends_chart" class="small grid" >
</canvas> </div>
</div>
<div class="left" style="width:80%">
<div>Python Virtual Environment
<div class="small">Requirements Assessment</div>
</div>
</div> </div>
</body> </body>

BIN
src/monitor.pyc
View File

Binary file not shown.

BIN
src/utils/__init__.pyc
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save