ail-framework/var/www/modules/dashboard/templates/index.html
2024-11-06 11:25:46 +01:00

340 lines
11 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Analysis Information Leak framework Dashboard</title>
<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">
<!-- Core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/dygraph_gallery.css') }}" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/indexjavascript.js')}}"
data-urllog="{{ url_for('dashboard.logs') }}">
</script>
<style>
.tableQueue tbody tr td,
.tableQueue tbody tr th,
.tableQueue thead tr td,
.tableQueue thead tr th{
padding: 1px;
}
tr.table-disabled {
background-color: #f2f2f2;
}
tr.table-log-warning {
background-color: #ccfae3;
}
</style>
<script>
window.default_minute = {{ default_minute }};
</script>
</head>
<body>
{% include 'nav_bar.html' %}
<div class="container-fluid">
<div class="row">
{% include 'dashboard/menu_sidebar.html' %}
<div class="col-12 col-lg-10" id="core_content">
{%if background_update%}
<div class="alert alert-warning alert-dismissible fade show my-2" role="alert">
<strong>Warning!</strong> An Update is running on the background. Some informations can be <strong>missing from the UI.</strong>
<strong>Updating: {{update_message}}</strong>
(<a href="{{ url_for('settings_b.settings_page') }}">Check Update Status</a>)
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{%endif%}
<!-- TODO: Add users messages -->
{# {% include 'dashboard/update_modal.html' %}#}
<div class="row my-2">
<div class="col-xl-6">
<div class="card">
<div class="card-header">
<i class="far fa-chart-bar"></i> Feeder(s) Monitor:
</div>
<div class="card-body" id="panelbody"> {#style="height:420px;"#}
<strong>Processed items</strong>
<div id="Proc_feeder" style="height: 230px; padding: 0px; position: relative;"></div>
</div>
</div>
</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>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-clipboard-list"></i> Logs
<div class="float-right">
<label style="padding-bottom:2px;">
<select class="form-control input-sm" id="log_select">
{% for log_selection in log_select %}
{% if log_selection == selected %}
<option value="{{ log_selection }}" selected>{{ log_selection }}</option>
{% else %}
<option value="{{ log_selection }}">{{ log_selection }}</option>
{% endif %}
{% endfor %}
</select>
</label>
<input id="checkbox_log_info" type="checkbox" value="INFO"> INFO
<input id="checkbox_log_warning" type="checkbox" value="WARNING" checked="true"> WARNING
<input id="checkbox_log_critical" type="checkbox" value="CRITICAL" checked="true"> CRITICAL
</div>
</div>
<div class="card-body">
<table class="table table-hover table-sm" id="table_log">
<thead>
<tr>
<th>Time</th>
<th>Channel</th>
<th>Level</th>
<th>Script Name</th>
<th>Source</th>
<th>Date</th>
<th>Paste name</th>
<th>Message</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tab_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var url_showSavedPath = "{{ url_for('investigations_b.get_object_gid') }}";
</script>
<script>
$("#page-Dashboard").addClass("active");
var tableBody = document.getElementById('tab_body')
$.getJSON("{{ url_for('dashboard.get_last_logs_json') }}", function(data) {
data.forEach(function (d) {
var tr = document.createElement('TR')
var time = document.createElement('TD')
var chan = document.createElement('TD')
var level = document.createElement('TD')
var scrpt = document.createElement('TD')
var src = document.createElement('TD')
var pdate = document.createElement('TD')
var nam = document.createElement('TD')
var msage = document.createElement('TD')
var inspect = document.createElement('TD')
// console.log(d)
tr.className = "table-log-warning";
time.appendChild(document.createTextNode(d.time))
chan.appendChild(document.createTextNode('Script'))
level.appendChild(document.createTextNode('WARNING'))
scrpt.appendChild(document.createTextNode(d.script))
src.appendChild(document.createTextNode(d.domain))
pdate.appendChild(document.createTextNode(d.date_paste))
nam.appendChild(document.createTextNode(d.paste))
var iconspan = document.createElement('SPAN');
var message = d.message.split(" ")
if (message[0] == "Detected"){
iconspan.className = "fas fa-eye";
}
else if (message[0] == "Checked"){
iconspan.className = "far fa-thumbs-up";
}
iconspan.innerHTML = "&nbsp;";
msage.appendChild(iconspan);
msage.appendChild(document.createTextNode(message.join(" ")));
var action_icon_a = document.createElement("A");
action_icon_a.setAttribute("TARGET", "_blank");
action_icon_a.setAttribute("HREF", d.path);
var action_icon_span = document.createElement('SPAN');
action_icon_span.className = "fas fa-search-plus";
action_icon_a.appendChild(action_icon_span);
inspect.appendChild(action_icon_a)
inspect.setAttribute("style", "text-align:center;");
tr.appendChild(time)
tr.appendChild(chan);
tr.appendChild(level);
tr.appendChild(scrpt);
tr.appendChild(src);
tr.appendChild(pdate);
tr.appendChild(nam);
tr.appendChild(msage);
tr.appendChild(inspect);
tableBody.appendChild(tr);
});
});
function toggle_sidebar(){
if($('#nav_menu').is(':visible')){
$('#nav_menu').hide();
$('#side-bard-dashboard-content').hide();
$('#side_menu').removeClass('border-right')
$('#side_menu').removeClass('col-lg-2')
$('#core_content').removeClass('col-lg-10')
}else{
$('#nav_menu').show();
$('#side-bard-dashboard-content').show();
$('#side_menu').addClass('border-right')
$('#side_menu').addClass('col-lg-2')
$('#core_content').addClass('col-lg-10')
}
}
</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);
}
//
//
var event_queues
$(document).ready(function() {
// Hide Browser Error: connection interrupted while the page was loading
$(window).on("beforeunload", function() {
event_queues.close();
source.close();
});
event_queues = new EventSource("{{ url_for('dashboard._dashboard') }}");
event_queues.onmessage = function(event) {
let data = JSON.parse(event.data);
create_queue_table(data['queues'])
};
event_queues.onerror = function(event) {
console.error('EventSource failed:', event);
event_queues.close();
};
});
</script>
</html>