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
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

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

@ -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

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

@ -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>

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

@ -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();
// });