CIRCL
/
AIL-framework
mirror of https://github.com/CIRCL/AIL-framework
2
1
Fork 0
Code Issues Releases Wiki Activity

chg: [dashboard] replace interval requests by event stream

otp
terrtia 2024-07-01 17:31:59 +02:00
parent 8cf4975713
commit f37349a6cc
No known key found for this signature in database
GPG Key ID: 1E1B1F50D84613D0
4 changed files with 160 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
var/www/Flask_server.py
View File

@ -136,11 +136,11 @@ login_manager.init_app(app)
@login_manager.user_loader @login_manager.user_loader
def load_user(session_id): # TODO USE Alternative ID def load_user(session_id): # TODO USE Alternative ID
print(session) # print(session)
user_id = get_session_user(session_id) user_id = get_session_user(session_id)
if user_id: if user_id:
user = AILUser.get(user_id) user = AILUser.get(user_id)
print(user) # print(user)
return user return user
return None return None

16
var/www/modules/dashboard/Flask_dashboard.py
View File

@ -56,6 +56,16 @@ def event_stream():
if msg['type'] == 'pmessage' and level != "DEBUG": if msg['type'] == 'pmessage' and level != "DEBUG":
yield 'data: %s\n\n' % json.dumps(msg) 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(): def get_queues():
# We may want to put the llen in a pipeline to do only one query. # We may want to put the llen in a pipeline to do only one query.
return ail_queues.get_modules_queues_stats() return ail_queues.get_modules_queues_stats()
@ -103,6 +113,12 @@ def datetime_from_utc_to_local(utc_str):
def logs(): def logs():
return flask.Response(event_stream(), mimetype="text/event-stream") 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") @dashboard.route("/_get_last_logs_json")
@login_required @login_required
@login_read_only @login_read_only

110
var/www/modules/dashboard/templates/index.html
View File

@ -94,17 +94,17 @@
</div> </div>
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card"> {# <div class="card">#}
<div class="card-header"> {# <div class="card-header">#}
<i class="far fa-chart-bar"></i> Queues Monitor {# <i class="far fa-chart-bar"></i> Queues Monitor#}
</div> {# </div>#}
<div class="card-body"> {# <div class="card-body">#}
<div class="" id="Graph" style="height:195px; width:88%;"></div> {# <div class="" id="Graph" style="height:195px; width:88%;"></div>#}
<div style="height:10px;"></div> {# <div style="height:10px;"></div>#}
<div class="" id="Graph2" style="height:195px; width:88%;"></div> {# <div class="" id="Graph2" style="height:195px; width:88%;"></div>#}
</div> {# </div>#}
{##}
</div> {# </div>#}
</div> </div>
</div> </div>
@ -246,4 +246,92 @@ function toggle_sidebar(){
} }
</script> </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> </html>

82
var/www/static/js/indexjavascript.js
View File

@ -8,12 +8,12 @@ function getSyncScriptParams() {
var lastScript = scripts[scripts.length-1]; var lastScript = scripts[scripts.length-1];
var scriptName = lastScript; var scriptName = lastScript;
return { return {
urlstuff : scriptName.getAttribute('data-urlstuff'), //urlstuff : scriptName.getAttribute('data-urlstuff'),
urllog : scriptName.getAttribute('data-urllog') urllog : scriptName.getAttribute('data-urllog')
}; };
} }
var urlstuff = getSyncScriptParams().urlstuff; //var urlstuff = getSyncScriptParams().urlstuff;
var urllog = getSyncScriptParams().urllog; var urllog = getSyncScriptParams().urllog;
//If we do not received info from mixer, set pastes_num to 0 //If we do not received info from mixer, set pastes_num to 0
@ -34,17 +34,17 @@ function checkIfReceivedData(){
} }
function initfunc( csvay, scroot) { // function initfunc( csvay, scroot) {
window.csv = csvay; // window.csv = csvay;
window.scroot = scroot; // window.scroot = scroot;
}; // };
function update_values() { // function update_values() {
$.getJSON(urlstuff, // $.getJSON(urlstuff,
function(data) { // function(data) {
window.glob_tabvar = data; // window.glob_tabvar = data;
}); // });
} // }
// Plot and update the number of processed pastes // Plot and update the number of processed pastes
@ -129,10 +129,10 @@ function update_processed_pastes(graph, dataset, graph_type) {
// END PROCESSED PASTES // END PROCESSED PASTES
function initfunc( csvay, scroot) { // function initfunc( csvay, scroot) {
window.csv = csvay; // window.csv = csvay;
window.scroot = scroot; // window.scroot = scroot;
}; // };
var source = new EventSource(urllog); var source = new EventSource(urllog);
@ -146,6 +146,7 @@ function pad_2(number) {
} }
function create_log_table(obj_json) { function create_log_table(obj_json) {
//console.log("create_log_table")
tableBody = document.getElementById("tab_body") tableBody = document.getElementById("tab_body")
var tr = document.createElement('TR') var tr = document.createElement('TR')
var time = document.createElement('TD') 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 = ""; document.getElementById("queueing").innerHTML = "";
var Tablediv = document.getElementById("queueing") var Tablediv = document.getElementById("queueing")
var table = document.createElement('TABLE') var table = document.createElement('TABLE')
@ -321,7 +323,7 @@ function create_queue_table() {
tr.appendChild(th); tr.appendChild(th);
} }
if ((glob_tabvar.row1).length == 0) { if ((data).length == 0) {
var tr = document.createElement('TR'); var tr = document.createElement('TR');
var td = document.createElement('TD'); var td = document.createElement('TD');
var td2 = document.createElement('TD'); var td2 = document.createElement('TD');
@ -334,25 +336,25 @@ function create_queue_table() {
tableBody.appendChild(tr); tableBody.appendChild(tr);
} }
else { else {
for(i = 0; i < (glob_tabvar.row1).length;i++){ for(i = 0; i < (data).length;i++){
var tr = document.createElement('TR') var tr = document.createElement('TR')
for(j = 0; j < 2; j++){ for(j = 0; j < 2; j++){
var td = document.createElement('TD') var td = document.createElement('TD')
var moduleNum = j == 0 ? "." + glob_tabvar.row1[i][3] : ""; var moduleNum = j == 0 ? "." + data[i][3] : "";
td.appendChild(document.createTextNode(glob_tabvar.row1[i][j] + moduleNum)); td.appendChild(document.createTextNode(data[i][j] + moduleNum));
tr.appendChild(td) tr.appendChild(td)
} }
// Used to decide the color of the row // Used to decide the color of the row
// We have glob_tabvar.row1[][j] with: // We have data[][j] with:
// - j=0: ModuleName // - j=0: ModuleName
// - j=1: queueLength // - j=1: queueLength
// - j=2: LastProcessedPasteTime // - j=2: LastProcessedPasteTime
// - j=3: Number of the module belonging in the same category // - 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"; 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"; tr.className += " table-danger";
else if (parseInt(glob_tabvar.row1[i][1]) === 0) else if (parseInt(data[i][1]) === 0)
tr.className += " table-disabled"; tr.className += " table-disabled";
else else
tr.className += " table-success"; tr.className += " table-success";
@ -360,9 +362,9 @@ function create_queue_table() {
} }
} }
Tablediv.appendChild(table); Tablediv.appendChild(table);
} }*/
/*
function load_queues() { function load_queues() {
var data = []; var data = [];
var data2 = []; var data2 = [];
@ -429,7 +431,7 @@ function load_queues() {
var interval = 1000; //number of mili seconds between each call var interval = 1000; //number of mili seconds between each call
var refresh = function() { var refresh = function() {
$.ajax({ $.ajax({ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
url: "", url: "",
cache: false, cache: false,
success: function(html) { success: function(html) {
@ -487,16 +489,18 @@ function load_queues() {
refresh(); refresh();
} }
*/
function manage_undefined() { // function manage_undefined() {
if (typeof glob_tabvar == "undefined") // if (typeof glob_tabvar == "undefined")
setTimeout(function() { if (typeof glob_tabvar == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000); // setTimeout(function() { if (typeof glob_tabvar == "undefined") { manage_undefined(); } else { /*load_queues();*/ } }, 1000);
else if (typeof glob_tabvar.row1 == "undefined") // else if (typeof glob_tabvar.row1 == "undefined")
setTimeout(function() { if (typeof glob_tabvar.row1 == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000); // setTimeout(function() { if (typeof glob_tabvar.row1 == "undefined") { manage_undefined(); } else { load_queues(); } }, 1000);
else // else
load_queues(); // load_queues();
} // }
$(document).ready(function () {
manage_undefined(); // $(document).ready(function () {
}); // manage_undefined();
// });