improvement of trends with Couchdb, need to have a level of automatic rendering

master
Steve L. Nyemba 8 years ago
parent 2ddede65a3
commit 3b5718c0f5

@ -84,21 +84,16 @@ def procs(id):
@app.route('/trends') @app.route('/trends')
def trends (): def trends ():
id = request.args.get('id') id = request.args.get('id')
app = request.args.get('app').strip()
r = gReader.basic_read() r = gReader.basic_read()
if id in r: if id in r:
r = r[id] r = r[id] #--matrix
series = {} series = []
for row in r: for row in r:
series += [item for item in row if str(item['label'])== app]
for item in row: if len(series) > 24 :
id = item['label'] beg = len(series) - 25
if id not in series : series = series[beg:]
series[id] = []
series[id].append(item)
if len(series[id]) > 24 :
beg = len(series[id]) - 25
series[id] = series[id][beg:]
return json.dumps(series) return json.dumps(series)
else: else:
return "[]" return "[]"

@ -32,6 +32,7 @@ body {
margin:4px; margin:4px;
padding:4px; padding:4px;
width:100%; width:100%;
height:150px;
} }
.grid .fa-check {color:green} .grid .fa-check {color:green}
.grid .fa-times {color:maroon; } .grid .fa-times {color:maroon; }

@ -25,7 +25,7 @@ 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);
monitor.processes.trend.init(this.label) //monitor.processes.trend.init(this.label)
} }
jx.dom.append('menu',frame) jx.dom.append('menu',frame)
}) })
@ -50,6 +50,12 @@ monitor.processes.render = function(label,data) {
return 'small' 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.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"}, 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"} {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center"}
@ -60,68 +66,61 @@ monitor.processes.render = function(label,data) {
} }
monitor.processes.trend = {} monitor.processes.trend = {}
monitor.processes.trend.init = function (label) { monitor.processes.trend.init = function (label,app) {
var httpclient = HttpClient.instance() var httpclient = HttpClient.instance()
var uri = '/trends?id='+label 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)
console.log(logs)
// jx.dom.set.attribute(label,'logs',logs) // jx.dom.set.attribute(label,'logs',logs)
monitor.processes.trend.render(logs) monitor.processes.trend.render(logs,null,app)
}) })
} }
monitor.processes.trend.render = function (logs, key) { monitor.processes.trend.render = function (logs, key,label) {
if (key == null) { if (key == null) {
key = 'memory_usage' key = 'memory_usage'
} }
var context = $('#trends_chart') var context = $('#trends_chart')
var conf = { type: 'line' } 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 = [{ title: {display:true,text:key},gridLines: {display:false}}] conf.options.scales.yAxes = [ {ticks:{min:0,beginAtZero:true},gridLines: {display:false}}]
conf.options.scales.xAxes = [ conf.options.scales.xAxes = [
{ {
type: 'time', type: 'time',
gridLines: {display:false}, gridLines: {display:false},
unitStepSize:25,
time: { time: {
format:'dd-MMM HH:mm' format:'DD-MMM HH:mm'
} }
} }
] ]
// conf.data.labels = x_axis
var p = jx.utils.keys(logs)
conf.data.datasets = [ ] conf.data.datasets = [ ]
var labels = [] var x_axis = []
var i = 0; var values = jx.utils.patterns.visitor(logs,function(item){
for (id in logs) {
var serie = {}
serie.label = id
serie.data = jx.utils.patterns.visitor(logs[id], function (item) {
// x = parseFloat(item['hour'] + '.' + item['minute']).toFixed(2)
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)
y = item[key] y = item[key]
labels.push(x) x_axis.push(x)
console.log([item.day,item.hour,item.minute])
return {x:x,y:y} return {x:x,y:y}
}) })
serie.backgroundColor = ['#ffffff'] var serie = {label:label,data:values}
i = parseInt(Math.random() * (COLORS.length - 1))
serie.backgroundColor = 'transparent'
serie.borderColor = COLORS[i] serie.borderColor = COLORS[i]
serie.borderWidth = 1 serie.borderWidth = 1
++i serie.type = 'line'
conf.data.datasets.push(serie) conf.data.datasets.push(serie)
x_axis = jx.utils.unique(x_axis)
} conf.data.labels = x_axis
labels = jx.utils.unique(labels)
console.log(labels)
conf.data.labels = labels
// console.log(conf) // console.log(conf)
var chart = new Chart(context,conf) var chart = new Chart(context,conf)

@ -46,7 +46,7 @@
<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"><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"><i class="fa fa-chevron-right"></i> Mem. Avail</div>
</div> </div>
<canvas id="trends_chart" class="small grid"> <canvas id="trends_chart" class="small grid" height="92%">
</canvas> </canvas>
</div> </div>

Loading…
Cancel
Save