Skip to content

Commit

Permalink
Adding bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@nothingface0
nothingface0 committed Sep 4, 2023
1 parent 800474b commit 8e96f24
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 53 deletions.
8 changes: 4 additions & 4 deletions static/dqm_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
float: right;
}

.active {
.active-glamour {
background-color: #52BE80;
color: #f2f2f2;
-webkit-animation: glowing 2500ms infinite;
Expand Down Expand Up @@ -81,7 +81,7 @@
}
}

.btn:hover {
.btn-glamour:hover {
background-color: #239b56;
color: #d4ac0d;
}
Expand Down Expand Up @@ -201,9 +201,9 @@ col:nth-child(2n) {
overflow: scroll;
}

.btn {
/* .btn {
font-weight: bold;
}
} */

.column {
float: left;
Expand Down
7 changes: 6 additions & 1 deletion templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
{% block head%}
{%endblock%}
</head>
Expand All @@ -20,7 +25,7 @@
<small class="version_string">v{{ VERSION }}</small>
</div>

<div>
<div class="container-lg">
{% block content %}{%endblock%}
</div>

Expand Down
32 changes: 16 additions & 16 deletions templates/cr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
<div id="myBar"></div>
</div>

<button class="btn" id="btn_get_dqm_machines" onclick="cr_get_dqm_machines()">Print DQM machines</button>
<button class="btn" id="btn_get_hltd_version" onclick="cr_get_hltd_version()">Print HLTD versions</button>
<button class="btn" id="btn_get_fff_version" onclick="cr_get_fff_version()">Print FFF versions</button>
<button class="btn" id="btn_get_cmssw_info" onclick="cr_get_cmssw_info()">Print CMSSW info</button>
<button class="btn btn-secondary" id="btn_get_dqm_machines" onclick="cr_get_dqm_machines()">Print DQM machines</button>
<button class="btn btn-secondary" id="btn_get_hltd_version" onclick="cr_get_hltd_version()">Print HLTD versions</button>
<button class="btn btn-secondary" id="btn_get_fff_version" onclick="cr_get_fff_version()">Print FFF versions</button>
<button class="btn btn-secondary" id="btn_get_cmssw_info" onclick="cr_get_cmssw_info()">Print CMSSW info</button>

<div class="row">
<div class="column">
Expand All @@ -32,22 +32,22 @@
<div class="column">
<div id="playback_run"> </div>
<strong>Playback simulations:</strong> <br>
<button class="btn" id="btn_get_simulator_config" onclick="cr_get_simulator_config()">Print Simulator
<button class="btn btn-secondary" id="btn_get_simulator_config" onclick="cr_get_simulator_config()">Print Simulator
config</button> <br>
Select playback run: <select id="run_number" name="run_number"
onchange="update_oms_link( this.options[this.selectedIndex].value )"></select> <br>
<a id="oms_link" href="https://cmsoms.cern.ch/cms/runs/report?cms_run=349963&cms_run_sequence=GLOBAL-RUN"
target="_blank">OMS link run 349963</a> <br>
Select run class: <select id="run_key" name="run_key"></select><br>
Set LS number: <input type="number" id="LS_number" name="LS_number" min="1" max="10000" size="7"><br>
<button class="btn" id="btn_start_playback_run" onclick="cr_start_playback_run()">Start new run</button><br><br>
<button class="btn btn-secondary" id="btn_start_playback_run" onclick="cr_start_playback_run()">Start new run</button><br><br>

<strong>Productions runs:</strong> <br>
Select production run: <select id="run_number_prod" name="run_number_prod"></select>
<button class="btn" id="btn_get_production_runs" onclick="cr_get_production_runs()">refresh</button> <br>
<button class="btn btn-secondary" id="btn_get_production_runs" onclick="cr_get_production_runs()">refresh</button> <br>
Set LS number to copy: <input type="number" id="LS_number_prod" name="LS_number_prod" min="1" max="10000"
size="7"><br>
<button class="btn" id="btn_copy_production_runs" onclick="cr_copy_production_runs()">Copy production
<button class="btn btn-secondary" id="btn_copy_production_runs" onclick="cr_copy_production_runs()">Copy production
run</button><br>
</div>
</div>
Expand Down Expand Up @@ -400,22 +400,22 @@
// get logs hltd
text += "hltd logs: <br>";
dqm_machines_pl.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn hltd logs " + item + "\" onclick=\"cr_get_hltd_logs(\'" + item + "\')\">Get HLTD logs from " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn hltd logs " + item + "\" onclick=\"cr_get_hltd_logs(\'" + item + "\')\">Get HLTD logs from " + item + "</button>";
})
// restart hltd
text += "<br> hltd restart: <br>";
dqm_machines_pl.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn hltd restart " + item + "\" onclick=\"cr_restart_hltd(\'" + item + "\')\">Restart HLTD at " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn hltd restart " + item + "\" onclick=\"cr_restart_hltd(\'" + item + "\')\">Restart HLTD at " + item + "</button>";
})
// get fff hltd
text += "<br> fff logs: <br>";
dqm_machines_pl.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn fff logs " + item + "\" onclick=\"cr_get_fff_logs(\'" + item + "\')\">Get FFF logs from " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn fff logs " + item + "\" onclick=\"cr_get_fff_logs(\'" + item + "\')\">Get FFF logs from " + item + "</button>";
})
// restart fff
text += "<br> fff restart: <br>";
dqm_machines_pl.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn fff restart " + item + "\" onclick=\"cr_restart_fff(\'" + item + "\')\">Restart FFF at " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn fff restart " + item + "\" onclick=\"cr_restart_fff(\'" + item + "\')\">Restart FFF at " + item + "</button>";
})
document.getElementById("hltd_playback").innerHTML = text;

Expand Down Expand Up @@ -448,22 +448,22 @@
// get logs
text += "hltd logs: <br>"
dqm_machines_pr.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn hltd logs " + item + "\" onclick=\"cr_get_hltd_logs(\'" + item + "\')\">Get HLTD logs from " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn hltd logs " + item + "\" onclick=\"cr_get_hltd_logs(\'" + item + "\')\">Get HLTD logs from " + item + "</button>";
})
// restart hltd
text += "<br> hltd restart: <br>"
dqm_machines_pr.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn hltd restart " + item + "\" onclick=\"cr_restart_hltd(\'" + item + "\')\">Restart HLTD at " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn hltd restart " + item + "\" onclick=\"cr_restart_hltd(\'" + item + "\')\">Restart HLTD at " + item + "</button>";
})
// get fff hltd
text += "<br> fff logs: <br>"
dqm_machines_pr.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn fff logs " + item + "\" onclick=\"cr_get_fff_logs(\'" + item + "\')\">Get FFF logs from " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn fff logs " + item + "\" onclick=\"cr_get_fff_logs(\'" + item + "\')\">Get FFF logs from " + item + "</button>";
})
// restart fff
text += "<br> fff restart: <br>"
dqm_machines_pr.forEach(function (item, index, array) {
text += "<button class=\"btn\" id=\"btn fff restart " + item + "\" onclick=\"cr_restart_fff(\'" + item + "\')\">Restart FFF at " + item + "</button>";
text += "<button class=\"btn btn-secondary\" id=\"btn fff restart " + item + "\" onclick=\"cr_restart_fff(\'" + item + "\')\">Restart FFF at " + item + "</button>";
})

document.getElementById("hltd_production").innerHTML = text;
Expand Down
109 changes: 77 additions & 32 deletions templates/runs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

{%block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='dqm_style.css') }}">
<title>DQM&sup2; Mirror</title>

{% endblock %}
{% block extra_mirror_links %}
<button class="btn-navbar" id="btn_production" onclick="init_load_production()">production</button>
Expand All @@ -10,16 +12,48 @@

{% block content %}
<p style="clear:both;margin-bottom:25px"></p>
<div class="btn-group" role="group" aria-label="Run navigation" id="nextRuns">

<p id="nextRuns" style="margin-bottom:1px"></p>
<table id="runTable" style="text-align:center;margin-top:10px;margin-bottom:10px;font-size: 14px;" border=1 frame=hsides
rules=rows></table>
<p id="runInfo" style="margin-bottom:1px"></p>
</div>
<div class="col">
<div class="row">
<table id="runTable" style="text-align:center;margin-top:10px;margin-bottom:10px;font-size: 14px;" border=1 frame=hsides
rules=rows>
</table>
</div>
<div class="row">
<div class="col-5">
<table class="table">
<tbody>
<tr>
<th scope="row">CMSSW version</th>
<td id="run-info-cmssw-version"></td>
</tr>
<tr>
<th scope="row"><pre>run_key</pre></th>
<td id="run-info-key"></td>
</tr>
<tr>
<th scope="row">Known jobs</th>
<td id="run-info-known-jobs"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Graphs -->
<!-- <div class="chart-container" style="position: relative; height:60vh; width:60vw"> -->
<div class="row">
<div class="col-8">
<canvas id="chart-delay-times" style="width: 400px; height: 150px;"></canvas>
</div>
</div>
<div class="row">
<div class="col-8">
<canvas id="chart-events-accepted" style="width: 400px; height: 150px;"></canvas>
</div>
</div>

<p style="clear:both;margin-bottom:25px"></p>
<div class="chart-container" style="position: relative; height:60vh; width:60vw">
<canvas id="chart-delay-times" style="width: 400px; height: 150px;"></canvas>
<canvas id="chart-events-accepted" style="width: 400px; height: 150px;"></canvas>
</div>
{% endblock %}

Expand Down Expand Up @@ -52,14 +86,16 @@
// No run number requested, start live mode.
start_live(true);
}


function update_table(run_id, data) {
other_runs = data[0]
global_data = data[1][0];
clients_data = data[1][1];

// Other runs info
let p_runnext = document.getElementById("nextRuns");
let p_content = "";
let el_nextRuns = document.getElementById("nextRuns");
el_nextRuns.innerHTML = ""; // Clear all links

if (other_runs[1] != null) {
if (other_runs[1] < run_id) {
Expand All @@ -71,21 +107,32 @@

// Create links to next and previous run
if (other_runs[0] != null) {
p_content += `<a href="{{ PREFIX }}?run=${other_runs[0]}&db=${db}"><-${other_runs[0]}</a> &nbsp;`;
let prev = document.createElement("a");
prev.setAttribute("href",`{{ PREFIX }}?run=${other_runs[0]}&db=${db}`);
prev.innerHTML = `<i class="bi bi-arrow-left"></i> ${other_runs[0]}`;
prev.classList.add("btn", "btn-link");
el_nextRuns.appendChild(prev);
}
p_content += `<a href="{{ PREFIX }}?run=${run_id}&db=${db}"><strong>${run_id}</strong></a> &nbsp;`;
let current = document.createElement("a");
current.setAttribute("href",`{{ PREFIX }}?run=${run_id}&db=${db}`);
current.innerHTML = `${run_id}`;
current.classList.add("btn", "btn-link");
el_nextRuns.appendChild(current);

if (other_runs[1] != null)
{
p_content += `<a href="{{ PREFIX }}?run=${other_runs[1]}&db=${db}">${other_runs[1]}-></a> &nbsp;`;
let next = document.createElement("a");
next.setAttribute("href",`{{ PREFIX }}?run=${other_runs[1]}&db=${db}`);
next.innerHTML = `${other_runs[1]}<i class="bi bi-arrow-right"></i>`;
next.classList.add("btn", "btn-link");
el_nextRuns.appendChild(next);
}
p_runnext.innerHTML = p_content;

// Table
// Table creation
let tb_main = document.getElementById("runTable");
tb_main.innerHTML = '';

// Table header ...
// Table header
for (let j = 0; j < static_headers.length; ++j) {
let col = document.createElement("col");
tb_main.appendChild(col);
Expand All @@ -101,14 +148,13 @@
tb_main.appendChild(tr);

// Table clients ...
// console.log( clients_data );
let state_G = 0;
let state_Y = 0;
let state_R = 0;
for (let client_data of clients_data) { // (timestamp, td, hostname, fi_state, client, cmssw_lumi, VmRSS, events_total, id, events_rate)
// (timestamp, td, hostname, fi_state, client, cmssw_lumi, VmRSS, events_total, id, events_rate)
for (let client_data of clients_data) {
tr = document.createElement("tr");
client_data[0] = new Date(client_data[0]).toLocaleString('en-GB', { hour12: false, timeZone: 'Europe/Zurich' });
// console.log(client_data)
if (client_data[9] < 0) client_data[9] = 0
client_data[7] = client_data[7] + " (" + client_data[9].toFixed(1) + " ev/s)"

Expand Down Expand Up @@ -136,20 +182,19 @@
let td = document.createElement("td");
td.className = "jtc2 " + style;
let log_link = `{{ PREFIX }}api?what=get_logs&id=${id}&db=${db}`;
td.innerHTML = `<a href=${log_link} target=\"_blank\"> -> </a>`;
td.innerHTML = `<a title="Open log in a new tab" href=${log_link} target=\"_blank\"><i class="bi bi-file-earmark-text"></i> </a>`;
tr.appendChild(td);
tb_main.appendChild(tr);
}

// Info
let p_runinfo = document.getElementById("runInfo");
let content = `CMSSW: <strong>${global_data[0]}</strong> &nbsp;&nbsp;<br> run_key: <strong>${global_data[1]}</strong><br>`;
content += `Known cmssw jobs: <strong>${clients_data.length}</strong> &nbsp;&nbsp;&nbsp;&nbsp;`;
content += 'Legend: ';
content += '<strong><span class=grun> &nbsp;&nbsp; running ' + state_G + ' &nbsp;&nbsp; </span></strong>';
content += '<strong><span class=yrun> &nbsp;&nbsp; stopped ' + state_Y + ' &nbsp;&nbsp; </span></strong>';
content += '<strong><span class=rrun> &nbsp;&nbsp; crashed ' + state_R + ' &nbsp;&nbsp; </span></strong>';
p_runinfo.innerHTML = content;
// Run info table update
let el_cmssw_version = document.getElementById("run-info-cmssw-version");
el_cmssw_version.innerHTML = `${global_data[0]}`;
let el_run_key = document.getElementById("run-info-key");
el_run_key.innerHTML = `${global_data[1]}`;
let el_known_jobs = document.getElementById("run-info-known-jobs");
el_known_jobs.innerHTML = `${clients_data.length}`;

};

/*
Expand All @@ -169,7 +214,7 @@
const array_events_accepted = [];

if (typeof stream_data === 'undefined') { return };

// For each stream, create two timeseries: delay times and events accepted
for (const [stream, stream_datum] of Object.entries(stream_data)) {
stream_name = stream.split('_')[0];
labels.push(stream_name);
Expand Down Expand Up @@ -325,7 +370,7 @@
error => console.error('error:', error)
);
window.timer_load_production = setTimeout(load_production, reload_time);
document.getElementById("btn_production").classList.add('active');
document.getElementById("btn_production").classList.add('active-glamour');
};

async function load_playback() {
Expand All @@ -342,7 +387,7 @@
);

window.timer_load_playback = setTimeout(load_playback, reload_time);
document.getElementById("btn_playback").classList.add('active');
document.getElementById("btn_playback").classList.add('active-glamour');
};

// Unused, AFAIK
Expand Down

0 comments on commit 8e96f24

Please sign in to comment.