mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 00:28:22 +00:00
chg: [dashboard] replace interval requests by event stream
This commit is contained in:
parent
8cf4975713
commit
f37349a6cc
4 changed files with 160 additions and 52 deletions
|
@ -136,11 +136,11 @@ login_manager.init_app(app)
|
|||
|
||||
@login_manager.user_loader
|
||||
def load_user(session_id): # TODO USE Alternative ID
|
||||
print(session)
|
||||
# print(session)
|
||||
user_id = get_session_user(session_id)
|
||||
if user_id:
|
||||
user = AILUser.get(user_id)
|
||||
print(user)
|
||||
# print(user)
|
||||
return user
|
||||
return None
|
||||
|
||||
|
|
|
@ -56,6 +56,16 @@ def event_stream():
|
|||
if msg['type'] == 'pmessage' and level != "DEBUG":
|
||||
yield 'data: %s\n\n' % json.dumps(msg)
|
||||
|
||||
def event_stream_dashboard():
|
||||
try:
|
||||
while True:
|
||||
# jsonify(row1=get_queues())
|
||||
data = {'queues': get_queues()}
|
||||
yield f'data: {json.dumps(data)}\n\n'
|
||||
time.sleep(1)
|
||||
except GeneratorExit:
|
||||
print("Generator Exited")
|
||||
|
||||
def get_queues():
|
||||
# We may want to put the llen in a pipeline to do only one query.
|
||||
return ail_queues.get_modules_queues_stats()
|
||||
|
@ -103,6 +113,12 @@ def datetime_from_utc_to_local(utc_str):
|
|||
def logs():
|
||||
return flask.Response(event_stream(), mimetype="text/event-stream")
|
||||
|
||||
@dashboard.route("/_dashboard")
|
||||
@login_required
|
||||
@login_read_only
|
||||
def _dashboard():
|
||||
return flask.Response(event_stream_dashboard(), content_type="text/event-stream")
|
||||
|
||||
@dashboard.route("/_get_last_logs_json")
|
||||
@login_required
|
||||
@login_read_only
|
||||
|
|
|
@ -94,17 +94,17 @@
|
|||
</div>
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="far fa-chart-bar"></i> Queues Monitor
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="" id="Graph" style="height:195px; width:88%;"></div>
|
||||
<div style="height:10px;"></div>
|
||||
<div class="" id="Graph2" style="height:195px; width:88%;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{# <div class="card">#}
|
||||
{# <div class="card-header">#}
|
||||
{# <i class="far fa-chart-bar"></i> Queues Monitor#}
|
||||
{# </div>#}
|
||||
{# <div class="card-body">#}
|
||||
{# <div class="" id="Graph" style="height:195px; width:88%;"></div>#}
|
||||
{# <div style="height:10px;"></div>#}
|
||||
{# <div class="" id="Graph2" style="height:195px; width:88%;"></div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -246,4 +246,92 @@ function toggle_sidebar(){
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function create_queue_table(data) {
|
||||
document.getElementById("queueing").innerHTML = "";
|
||||
let Tablediv = document.getElementById("queueing")
|
||||
let table = document.createElement('TABLE')
|
||||
table.className = "table table-bordered table-hover tableQueue";
|
||||
let tableHead = document.createElement('THEAD')
|
||||
let tableBody = document.createElement('TBODY')
|
||||
|
||||
table.appendChild(tableHead);
|
||||
table.appendChild(tableBody);
|
||||
let heading = new Array();
|
||||
heading[0] = "Queue Name.PID"
|
||||
heading[1] = "Amount"
|
||||
let tr = document.createElement('TR');
|
||||
tableHead.appendChild(tr);
|
||||
|
||||
for (i = 0; i < heading.length; i++) {
|
||||
let th = document.createElement('TH')
|
||||
if (heading[i] === "Amount") {
|
||||
th.width = '50';
|
||||
} else {
|
||||
th.width = '100';
|
||||
}
|
||||
th.appendChild(document.createTextNode(heading[i]));
|
||||
tr.appendChild(th);
|
||||
}
|
||||
|
||||
if ((data).length === 0) {
|
||||
let tr = document.createElement('TR');
|
||||
let td = document.createElement('TD');
|
||||
let td2 = document.createElement('TD');
|
||||
td.appendChild(document.createTextNode("No running queues"));
|
||||
td2.appendChild(document.createTextNode("Or no feed"));
|
||||
td.className += " table-danger";
|
||||
td2.className += " table-danger";
|
||||
tr.appendChild(td);
|
||||
tr.appendChild(td2);
|
||||
tableBody.appendChild(tr);
|
||||
}
|
||||
else {
|
||||
for(i = 0; i < (data).length;i++){
|
||||
let tr = document.createElement('TR')
|
||||
for(j = 0; j < 2; j++){
|
||||
let td = document.createElement('TD')
|
||||
let moduleNum = j == 0 ? "." + data[i][3] : "";
|
||||
td.appendChild(document.createTextNode(data[i][j] + moduleNum));
|
||||
tr.appendChild(td)
|
||||
}
|
||||
// Used to decide the color of the row
|
||||
// We have data[][j] with:
|
||||
// - j=0: ModuleName
|
||||
// - j=1: queueLength
|
||||
// - j=2: LastProcessedPasteTime
|
||||
// - j=3: Number of the module belonging in the same category
|
||||
if (data[i][3]==="Not Launched")
|
||||
tr.className += " bg-danger text-white";
|
||||
else if (parseInt(data[i][2]) > window.threshold_stucked_module && parseInt(data[i][1]) > 2)
|
||||
tr.className += " table-danger";
|
||||
else if (parseInt(data[i][1]) === 0)
|
||||
tr.className += " table-disabled";
|
||||
else
|
||||
tr.className += " table-success";
|
||||
tableBody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
Tablediv.appendChild(table);
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let eventSource = new EventSource("{{ url_for('dashboard._dashboard') }}");
|
||||
|
||||
eventSource.onmessage = function(event) {
|
||||
let data = JSON.parse(event.data);
|
||||
create_queue_table(data['queues'])
|
||||
|
||||
};
|
||||
|
||||
eventSource.onerror = function(event) {
|
||||
console.error('EventSource failed:', event);
|
||||
eventSource.close(); // Close the connection
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -8,12 +8,12 @@ function getSyncScriptParams() {
|
|||
var lastScript = scripts[scripts.length-1];
|
||||
var scriptName = lastScript;
|
||||
return {
|
||||
urlstuff : scriptName.getAttribute('data-urlstuff'),
|
||||
//urlstuff : scriptName.getAttribute('data-urlstuff'),
|
||||
urllog : scriptName.getAttribute('data-urllog')
|
||||
};
|
||||
}
|
||||
|
||||
var urlstuff = getSyncScriptParams().urlstuff;
|
||||
//var urlstuff = getSyncScriptParams().urlstuff;
|
||||
var urllog = getSyncScriptParams().urllog;
|
||||
|
||||
//If we do not received info from mixer, set pastes_num to 0
|
||||
|
@ -34,17 +34,17 @@ function checkIfReceivedData(){
|
|||
}
|
||||
|
||||
|
||||
function initfunc( csvay, scroot) {
|
||||
window.csv = csvay;
|
||||
window.scroot = scroot;
|
||||
};
|
||||
// function initfunc( csvay, scroot) {
|
||||
// window.csv = csvay;
|
||||
// window.scroot = scroot;
|
||||
// };
|
||||
|
||||
function update_values() {
|
||||
$.getJSON(urlstuff,
|
||||
function(data) {
|
||||
window.glob_tabvar = data;
|
||||
});
|
||||
}
|
||||
// function update_values() {
|
||||
// $.getJSON(urlstuff,
|
||||
// function(data) {
|
||||
// window.glob_tabvar = data;
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
// Plot and update the number of processed pastes
|
||||
|
@ -129,10 +129,10 @@ function update_processed_pastes(graph, dataset, graph_type) {
|
|||
|
||||
// END PROCESSED PASTES
|
||||
|
||||
function initfunc( csvay, scroot) {
|
||||
window.csv = csvay;
|
||||
window.scroot = scroot;
|
||||
};
|
||||
// function initfunc( csvay, scroot) {
|
||||
// window.csv = csvay;
|
||||
// window.scroot = scroot;
|
||||
// };
|
||||
|
||||
var source = new EventSource(urllog);
|
||||
|
||||
|
@ -146,6 +146,7 @@ function pad_2(number) {
|
|||
}
|
||||
|
||||
function create_log_table(obj_json) {
|
||||
//console.log("create_log_table")
|
||||
tableBody = document.getElementById("tab_body")
|
||||
var tr = document.createElement('TR')
|
||||
var time = document.createElement('TD')
|
||||
|
@ -294,7 +295,8 @@ function create_log_table(obj_json) {
|
|||
}
|
||||
}
|
||||
|
||||
function create_queue_table() {
|
||||
/*
|
||||
function create_queue_table(data) {
|
||||
document.getElementById("queueing").innerHTML = "";
|
||||
var Tablediv = document.getElementById("queueing")
|
||||
var table = document.createElement('TABLE')
|
||||
|
@ -321,7 +323,7 @@ function create_queue_table() {
|
|||
tr.appendChild(th);
|
||||
}
|
||||
|
||||
if ((glob_tabvar.row1).length == 0) {
|
||||
if ((data).length == 0) {
|
||||
var tr = document.createElement('TR');
|
||||
var td = document.createElement('TD');
|
||||
var td2 = document.createElement('TD');
|
||||
|
@ -334,25 +336,25 @@ function create_queue_table() {
|
|||
tableBody.appendChild(tr);
|
||||
}
|
||||
else {
|
||||
for(i = 0; i < (glob_tabvar.row1).length;i++){
|
||||
for(i = 0; i < (data).length;i++){
|
||||
var tr = document.createElement('TR')
|
||||
for(j = 0; j < 2; j++){
|
||||
var td = document.createElement('TD')
|
||||
var moduleNum = j == 0 ? "." + glob_tabvar.row1[i][3] : "";
|
||||
td.appendChild(document.createTextNode(glob_tabvar.row1[i][j] + moduleNum));
|
||||
var moduleNum = j == 0 ? "." + data[i][3] : "";
|
||||
td.appendChild(document.createTextNode(data[i][j] + moduleNum));
|
||||
tr.appendChild(td)
|
||||
}
|
||||
// Used to decide the color of the row
|
||||
// We have glob_tabvar.row1[][j] with:
|
||||
// We have data[][j] with:
|
||||
// - j=0: ModuleName
|
||||
// - j=1: queueLength
|
||||
// - j=2: LastProcessedPasteTime
|
||||
// - j=3: Number of the module belonging in the same category
|
||||
if (glob_tabvar.row1[i][3]==="Not Launched")
|
||||
if (data[i][3]==="Not Launched")
|
||||
tr.className += " bg-danger text-white";
|
||||
else if (parseInt(glob_tabvar.row1[i][2]) > window.threshold_stucked_module && parseInt(glob_tabvar.row1[i][1]) > 2)
|
||||
else if (parseInt(data[i][2]) > window.threshold_stucked_module && parseInt(data[i][1]) > 2)
|
||||
tr.className += " table-danger";
|
||||
else if (parseInt(glob_tabvar.row1[i][1]) === 0)
|
||||
else if (parseInt(data[i][1]) === 0)
|
||||
tr.className += " table-disabled";
|
||||
else
|
||||
tr.className += " table-success";
|
||||
|
@ -360,9 +362,9 @@ function create_queue_table() {
|
|||
}
|
||||
}
|
||||
Tablediv.appendChild(table);
|
||||
}
|
||||
|
||||
}*/
|
||||
|
||||
/*
|
||||
function load_queues() {
|
||||
var data = [];
|
||||
var data2 = [];
|
||||
|
@ -429,7 +431,7 @@ function load_queues() {
|
|||
var interval = 1000; //number of mili seconds between each call
|
||||
var refresh = function() {
|
||||
|
||||
$.ajax({
|
||||
$.ajax({ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
url: "",
|
||||
cache: false,
|
||||
success: function(html) {
|
||||
|
@ -487,16 +489,18 @@ function load_queues() {
|
|||
|
||||
refresh();
|
||||
}
|
||||
*/
|
||||
|
||||
function manage_undefined() {
|
||||
if (typeof glob_tabvar == "undefined")
|
||||
setTimeout(function() { if (typeof glob_tabvar == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000);
|
||||
else if (typeof glob_tabvar.row1 == "undefined")
|
||||
setTimeout(function() { if (typeof glob_tabvar.row1 == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000);
|
||||
else
|
||||
load_queues();
|
||||
}
|
||||
// function manage_undefined() {
|
||||
// if (typeof glob_tabvar == "undefined")
|
||||
// setTimeout(function() { if (typeof glob_tabvar == "undefined") { manage_undefined(); } else { /*load_queues();*/ } }, 1000);
|
||||
// else if (typeof glob_tabvar.row1 == "undefined")
|
||||
// setTimeout(function() { if (typeof glob_tabvar.row1 == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000);
|
||||
// else
|
||||
// load_queues();
|
||||
// }
|
||||
|
||||
$(document).ready(function () {
|
||||
manage_undefined();
|
||||
});
|
||||
|
||||
// $(document).ready(function () {
|
||||
// manage_undefined();
|
||||
// });
|
||||
|
|
Loading…
Reference in a new issue