Updated web interface to handle new mixer module. and fixed one dependency bug.

pull/96/head
Mokaddem 2016-12-23 15:44:46 +01:00
parent e70b9cd15c
commit 97292e0899
5 changed files with 107 additions and 54 deletions

View File

@ -59,7 +59,7 @@ if __name__ == '__main__':
if int(time.time() - time_1) > 30:
to_print = 'Global; ; ; ;glob Processed {0} paste(s)'.format(processed_paste)
print to_print
publisher.info(to_print)
#publisher.info(to_print)
time_1 = time.time()
processed_paste = 0
time.sleep(1)
@ -72,8 +72,6 @@ if __name__ == '__main__':
os.makedirs(dirname)
with open(filename, 'wb') as f:
print gzip64encoded
print base64.standard_b64decode(gzip64encoded)
f.write(base64.standard_b64decode(gzip64encoded))
p.populate_set_out(filename)
processed_paste+=1

View File

@ -150,7 +150,7 @@ if __name__ == '__main__':
else:
print "Empty Queues: Waiting..."
if int(time.time() - time_1) > refresh_time:
to_print = 'Mixer; ; ; ;mixer_all Processed {0} paste(s) in {1}sec'.format(processed_paste, refresh_time)
to_print = 'Mixer; ; ; ;mixer_all All_feeders Processed {0} paste(s) in {1}sec'.format(processed_paste, refresh_time)
print to_print
publisher.info(to_print)
processed_paste = 0

View File

@ -6,6 +6,7 @@
'''
import redis
import datetime
from Date import Date
import flask
from flask import Flask, render_template, jsonify, request

View File

@ -1,10 +1,16 @@
var time_since_last_pastes_num;
var time_since_last_pastes_num = {};
var data_for_processed_paste = { "global": [] };
var list_feeder = ["global"];
var htmltext_graph_container = "<div class=\"col-lg-6\"> <div id=\"$1\" style=\"height: 90px; padding: 0px; position: relative;\"></div></div>";
window.paste_num_tabvar_all = {};
//If we do not received info from global, set pastes_num to 0
function checkIfReceivedData(){
if ((new Date().getTime() - time_since_last_pastes_num) > 45*1000)
window.paste_num_tabvar = 0;
setTimeout(checkIfReceivedData, 45*1000);
for (i in list_feeder) {
if ((new Date().getTime() - time_since_last_pastes_num[list_feeder[i]]) > 45*1000)
window.paste_num_tabvar_all[list_feeder[i]] = 0;
setTimeout(checkIfReceivedData, 45*1000);
}
}
setTimeout(checkIfReceivedData, 45*1000);
@ -24,34 +30,41 @@ function update_values() {
// Plot and update the number of processed pastes
$(function() {
var data = [];
// BEGIN PROCESSED PASTES
var default_minute = (typeof window.default_minute !== "undefined") ? parseInt(window.default_minute) : 10;
var totalPoints = 60*parseInt(default_minute); //60s*minute
var curr_max = 0;
function getData() {
if (data.length > 0){
var data_old = data[0];
data = data.slice(1);
curr_max = curr_max == data_old ? Math.max.apply(null, data) : curr_max;
function getData(dataset) {
var curr_data;
if (data_for_processed_paste[dataset] === undefined) { // create feeder dataset if not exists yet
data_for_processed_paste[dataset] = [];
}
curr_data = data_for_processed_paste[dataset];
if (curr_data.length > 0){
var data_old = curr_data[0];
curr_data = curr_data.slice(1);
curr_max = curr_max == data_old ? Math.max.apply(null, curr_data) : curr_max;
}
while (data.length < totalPoints) {
var y = (typeof window.paste_num_tabvar !== "undefined") ? parseInt(window.paste_num_tabvar) : 0;
while (curr_data.length < totalPoints) {
//var y = (typeof window.paste_num_tabvar_all[dataset] !== "undefined") ? parseInt(window.paste_num_tabvar_all[dataset]) : 0;
var y = (typeof window.paste_num_tabvar_all[dataset] !== "undefined") ? parseInt(window.paste_num_tabvar_all[dataset]) : 0;
curr_max = y > curr_max ? y : curr_max;
data.push(y);
curr_data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
for (var i = 0; i < curr_data.length; ++i) {
res.push([i, curr_data[i]])
}
data_for_processed_paste[dataset] = curr_data;
return res;
}
var updateInterval = 1000;
var options = {
var options_processed_pastes = {
series: { shadowSize: 1 },
lines: { fill: true, fillColor: { colors: [ { opacity: 1 }, { opacity: 0.1 } ] }},
yaxis: { min: 0, max: 40 },
@ -61,17 +74,19 @@ $(function() {
borderWidth: 0
},
};
var plot = $.plot("#realtimechart", [ getData() ], options);
function update() {
plot.setData([getData()]);
plot.getOptions().yaxes[0].max = curr_max;
plot.setupGrid();
plot.draw();
setTimeout(update, updateInterval);
var total_proc = $.plot("#global", [ getData("global") ], options_processed_pastes);
function update_processed_pastes(graph, dataset) {
graph.setData([getData(dataset)]);
graph.getOptions().yaxes[0].max = curr_max;
graph.setupGrid();
graph.draw();
setTimeout(function(){ update_processed_pastes(graph, dataset); }, updateInterval);
}
update();
});
update_processed_pastes(total_proc, "global");
// END PROCESSED PASTES
function initfunc( csvay, scroot) {
window.csv = csvay;
@ -114,10 +129,34 @@ function create_log_table(obj_json) {
var chansplit = obj_json.channel.split('.');
var parsedmess = obj_json.data.split(';');
if (parsedmess[0] == "Global"){
var paste_processed = parsedmess[4].split(" ")[2];
window.paste_num_tabvar = paste_processed;
time_since_last_pastes_num = new Date().getTime();
if (parsedmess[0] == "Mixer"){
var feeder = parsedmess[4].split(" ")[1];
var paste_processed = parsedmess[4].split(" ")[3];
var msg_type = parsedmess[4].split(" ")[2];
if (feeder == "All_feeders"){
window.paste_num_tabvar_all["global"] = paste_processed;
time_since_last_pastes_num["global"] = new Date().getTime();
} else {
if (list_feeder.indexOf(feeder) == -1) {
list_feeder.push(feeder);
//ADD HTML CONTAINER + PLOT THE GRAPH, ADD IT TO A LIST CONTAING THE PLOTED GRAPH
$("#panelbody").append("<strong>"+feeder+"</strong>");
$("#panelbody").append("<div class=\"row\"> <div class=\"col-lg-12\">" + htmltext_graph_container.replace("$1", feeder+"Proc") + htmltext_graph_container.replace("$1", feeder+"Dup")+"</div></div>");
var new_feederProc = $.plot("#"+feeder+"Proc", [ getData(feeder+"Proc") ], options_processed_pastes);
options_processed_pastes.colors = ["#edc240"];
var new_feederDup = $.plot("#"+feeder+"Dup", [ getData(feeder+"Dup") ], options_processed_pastes);
options_processed_pastes.colors = ["#a971ff"];
update_processed_pastes(new_feederProc, feeder+"Proc");
update_processed_pastes(new_feederDup, feeder+"Dup");
}
var feederName = msg_type == "Duplicated" ? feeder+"Dup" : feeder+"Proc";
window.paste_num_tabvar_all[feederName] = paste_processed;
time_since_last_pastes_num[feederName] = new Date().getTime();
}
return;
}

View File

@ -52,10 +52,10 @@
<!-- /.sidebar-collapse -->
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-dashboard fa-fw"></i> Pastes since {{ default_minute }} min
<i class="fa fa-dashboard fa-fw"></i> Total pastes since {{ default_minute }} min
</div>
<div class="panel-body">
<div id="realtimechart" style="height: 90px; padding: 0px; position: relative;"></div>
<div id="global" style="height: 90px; padding: 0px; position: relative;"></div>
</div>
</div>
<!-- <div id="Graph_paste_num" style="height:90px; width:100%;"></div> -->
@ -91,23 +91,38 @@
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Queues Monitor
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6" id="Graph" style="height:400px; width:48%;"></div>
<div class="col-lg-6" id="Graph2" style="height:400px; width:48%;"></div>
</div>
<!-- /.row -->
<div class="col-lg-8">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> <i class="fa fa-dashboard fa-fw"></i> <i class="fa fa-copy"></i>Feeder(s) Monitor: Processed pastes and filtered duplicated
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-8 -->
<div id="panelbody" class="panel-body" style="height:489px;">
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Queues Monitor
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6" id="Graph" style="height:195px; width:88%;"></div>
<div style="height:10px;"></div>
<div class="col-lg-6" id="Graph2" style="height:195px; width:88%;"></div>
</div>
<!-- /.row -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">