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

Sandbox Analysis, layout fix, refactored barchart to match doughnut

Browse Source
master
Steve L. Nyemba 8 years ago
parent 4a719397a5
commit 045482975a
4 changed files with 150 additions and 26 deletions
Show Stats Download Patch File Download Diff File

21
src/api/index.py
Unescape View File

@ -56,7 +56,7 @@ f.close()
#
#
from threading import Thread, RLock
p = {'uri':'http://localhost:5984','dbname':'monitor','uid':'logs','filename':'logs.JSON'}
p = {'uri':'http://dev.the-phi.com:5984','dbname':'monitor','uid':'logs','filename':'logs.JSON'}
factory = DataSourceFactory()
gWriter = factory.instance(type='CouchdbWriter',args=p)
gReader = factory.instance(type='CouchdbReader',args=p)
@ -76,6 +76,25 @@ def procs(id):
r = []
return json.dumps(r)
"""
This function/endpoint will assess n-virtual environments and return the results
@TODO: Should this be stored for future mining (I don't think so but could be wrong)
"""
@app.route('/sandbox')
def sandbox():
if 'sandbox' in HANDLERS:
handler = HANDLERS['sandbox']['class']
conf = HANDLERS['sandbox']['config']
r = []
for id in conf:
handler.init(conf[id])
r.append (dict(handler.composite(),**{"label":id}))
else:
print 'Oops'
r = []
return json.dumps(r)
@app.route('/trends')
def trends ():
id = request.args.get('id')

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

@ -93,3 +93,7 @@ input[type=text]:focus{
.height-quarter{height:25%;}
.width-half {width:47%; }
.width-75 {width:72%}
.bad { color:maroon}
.good{ color:green}
.warning{color:orange}

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

@ -50,9 +50,18 @@ monitor.processes.render = function(label,data) {
})
jx.dom.set.value('latest_processes','') ;
jx.dom.set.value('latest_processes_label',label)
var options = {width:$('#latest_processes').width()}
options.pageSize = 10
var options = {
width: $('#latest_processes').width(), height:'auto'
}
options.paging = true
options.pageSize = 3
options.pageIndex = 1
options.pageButtonCount = 3
options.pagerContainer = '#latest_process_pager'
options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
options.data = data
options.rowClass = function (item, index,evt) {
@ -64,9 +73,14 @@ monitor.processes.render = function(label,data) {
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"}
options.fields = [
{ name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"},
{ name: "cpu_usage", type: "number", title: "CPU", headercss: "small bold" , width:'64px'},
{ 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", width:'64px'}
]
var grid = $('#latest_processes').jsGrid(options) ;
//
@ -159,7 +173,12 @@ 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 colors = [COLORS[11], COLORS[1], COLORS[2]]
colors = [COLORS[11], COLORS[2], COLORS[100]]
RUNNING_COLOR = COLORS[26]
IDLE_COLOR = COLORS[100]
CRASH_COLOR=COLORS[2]
var i = 0;
for( label in logs ){
var rows = logs[label]
@ -169,19 +188,15 @@ monitor.processes.summary.init = function(logs){
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 data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]}
var context = jx.dom.get.instance('CANVAS')
jx.dom.set.value('summary_chart','')
@ -190,17 +205,18 @@ monitor.processes.summary.init = function(logs){
conf.type = 'doughnut'
conf.data = data
conf.options = {legend:{ position:'right'}}
conf.options = {legend:{ position:'right'},repsonsive:true}
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)
@ -209,5 +225,80 @@ monitor.processes.summary.init = function(logs){
series[id].backgroundColor = COLORS[i++]
return series[id]})
chart = new Chart(context,conf);
*/
var labels = jx.utils.keys(logs)
conf.data = { labels: labels, backgroundColor:colors }
var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = []
jx.utils.patterns.visitor(labels, function (id) {
var rows = logs[id]
var index = xr.length
xr_bg[index] = RUNNING_COLOR
xi_bg[index] = IDLE_COLOR
xc_bg[index] = CRASH_COLOR
if (xr[index] == null) {
xr[index] = 0
xc[index] = 0
xi[index] = 0
}
jx.utils.patterns.visitor(logs[id], function (row) {
if (row.status.match(/running/i)) {
xr[index] += 1
} else if (row.status.match(/idle/i)) {
xi[index] += 1
} else {
xc[index] += 1
}
})
})
conf.data.datasets = [{ label: 'running', data:xr,backgroundColor:xr_bg},{label:'crash',data:xc,backgroundColor:xc_bg},{label:'idle',data:xi,backgroundColor:xi_bg} ]
console.log(conf.data.datasets)
chart = new Chart(context, conf)
}
monitor.sandbox = {}
monitor.sandbox.init = function () {
var httpclient = HttpClient.instance()
httpclient.get('/sandbox', function (x) {
var r = JSON.parse(x.responseText)
monitor.sandbox.render(r);
})
}
monitor.sandbox.render = function (logs) {
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 d = ([logs[0].day, '-', months[logs[0].month],'-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
jx.dom.set.value('sandbox_date',d)
var options = {width:$('#sandbox_status').width(),height:'auto'}
options.data = logs
options.paging = true
options.pageSize = 3
options.pageIndex = 1
options.pageButtonCount = 3
options.pagerContainer = '#latest_process_pager'
options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
options.rowClass = function (item) {
if (item.value < 70) {
return 'bad'
} else if (item.value < 100) {
return 'warning'
} else {
return 'good'
}
}
options.fields = [
{ name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
{ name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }
]
var grid = $('#sandbox_status').jsGrid(options)
}

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

@ -39,18 +39,24 @@
</div>
</div>
<div id="latest_processes" class="grid border-right" style="margin:4px; padding:2px"></div>
<div class = "border-right" style="padding:2px; margin:4px; height:170px">
<div id="latest_processes" class="grid" ></div>
</div>
<div style="height:22px; padding:2px" class="small">
<div id="latest_process_pager" align="center"></div>
</div>
<div id="process_summary" class="grid border-right" style="margin:4px">
<div class="" style="margin:4px; padding:4px">Global Process Summary By Status</div>
<div class="width-75" id="summary_chart" style="margin:4px"></div>
<div id="summary_details" class="left"></div>
<div class="" style="height:120px; margin:4px">
<div id="summary_chart" class="right"></div>
</div>
<div id="summary_details" class="right"></div>
</div>
<div class="grid border-right" style="margin:4px; margin-top:10px">
<div style="margin:4px; padding:4px">Global Process Summary By Groups</div>
<div class="width-75" id="summary_ranking" style="margin:4px"></div>
<div class="width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
</div>
</div>
<div class="left info">
@ -62,14 +68,18 @@
<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" onclick="monitor.processes.trend.render(null,'memory_available',null)"><i class="fa fa-chevron-right"></i> Mem. Avail</div>
</div>
<div id="trends_chart" class="small grid" >
<div style="height:255px">
<div id="trends_chart" class="small grid"></div>
</div>
<div class="border-top" style="padding:4px;">
<div>
<b>Python Virtual Environment</b>
<div class="right button border">Inspect</div>
<div class="small">Requirements Assessment</div>
<div style="height:48px">
<b>Python Virtual Environment Analysis</b>
<div class="right button border" onclick="monitor.sandbox.init()">Inspect</div>
<div class="small">Last fetch <span id="sandbox_date"></span></div>
</div>
<div class="">
<div id="sandbox_status" class="grid">
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save