From 8e96f24b84227e873f7b277e892528d5dc78162f Mon Sep 17 00:00:00 2001 From: Dimitris Papagiannis Date: Mon, 4 Sep 2023 17:50:42 +0200 Subject: [PATCH] Adding bootstrap --- static/dqm_style.css | 8 ++-- templates/base.html | 7 ++- templates/cr.html | 32 ++++++------- templates/runs.html | 109 ++++++++++++++++++++++++++++++------------- 4 files changed, 103 insertions(+), 53 deletions(-) diff --git a/static/dqm_style.css b/static/dqm_style.css index 3252233..158d3b2 100644 --- a/static/dqm_style.css +++ b/static/dqm_style.css @@ -16,7 +16,7 @@ float: right; } -.active { +.active-glamour { background-color: #52BE80; color: #f2f2f2; -webkit-animation: glowing 2500ms infinite; @@ -81,7 +81,7 @@ } } -.btn:hover { +.btn-glamour:hover { background-color: #239b56; color: #d4ac0d; } @@ -201,9 +201,9 @@ col:nth-child(2n) { overflow: scroll; } -.btn { +/* .btn { font-weight: bold; -} +} */ .column { float: left; diff --git a/templates/base.html b/templates/base.html index b47907c..8475b91 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,7 +2,12 @@ + + + + + {% block head%} {%endblock%} @@ -20,7 +25,7 @@ v{{ VERSION }} -
+
{% block content %}{%endblock%}
diff --git a/templates/cr.html b/templates/cr.html index b1fb5f6..6023873 100644 --- a/templates/cr.html +++ b/templates/cr.html @@ -17,10 +17,10 @@
- - - - + + + +
@@ -32,7 +32,7 @@
Playback simulations:
-
Select playback run:
@@ -40,14 +40,14 @@ target="_blank">OMS link run 349963
Select run class:
Set LS number:
-

+

Productions runs:
Select production run: -
+
Set LS number to copy:
-
@@ -400,22 +400,22 @@ // get logs hltd text += "hltd logs:
"; dqm_machines_pl.forEach(function (item, index, array) { - text += ""; + text += ""; }) // restart hltd text += "
hltd restart:
"; dqm_machines_pl.forEach(function (item, index, array) { - text += ""; + text += ""; }) // get fff hltd text += "
fff logs:
"; dqm_machines_pl.forEach(function (item, index, array) { - text += ""; + text += ""; }) // restart fff text += "
fff restart:
"; dqm_machines_pl.forEach(function (item, index, array) { - text += ""; + text += ""; }) document.getElementById("hltd_playback").innerHTML = text; @@ -448,22 +448,22 @@ // get logs text += "hltd logs:
" dqm_machines_pr.forEach(function (item, index, array) { - text += ""; + text += ""; }) // restart hltd text += "
hltd restart:
" dqm_machines_pr.forEach(function (item, index, array) { - text += ""; + text += ""; }) // get fff hltd text += "
fff logs:
" dqm_machines_pr.forEach(function (item, index, array) { - text += ""; + text += ""; }) // restart fff text += "
fff restart:
" dqm_machines_pr.forEach(function (item, index, array) { - text += ""; + text += ""; }) document.getElementById("hltd_production").innerHTML = text; diff --git a/templates/runs.html b/templates/runs.html index 09d0e33..50a9483 100644 --- a/templates/runs.html +++ b/templates/runs.html @@ -2,6 +2,8 @@ {%block head %} +DQM² Mirror + {% endblock %} {% block extra_mirror_links %} @@ -10,16 +12,48 @@ {% block content %}

+
-

-
-

+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + +
CMSSW version
run_key
Known jobs
+
+
+ + +
+
+ +
+
+
+
+ +
+
-

-
- -
{% endblock %} @@ -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) { @@ -71,21 +107,32 @@ // Create links to next and previous run if (other_runs[0] != null) { - p_content += `<-${other_runs[0]}  `; + let prev = document.createElement("a"); + prev.setAttribute("href",`{{ PREFIX }}?run=${other_runs[0]}&db=${db}`); + prev.innerHTML = ` ${other_runs[0]}`; + prev.classList.add("btn", "btn-link"); + el_nextRuns.appendChild(prev); } - p_content += `${run_id}  `; + 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 += `${other_runs[1]}->  `; + let next = document.createElement("a"); + next.setAttribute("href",`{{ PREFIX }}?run=${other_runs[1]}&db=${db}`); + next.innerHTML = `${other_runs[1]}`; + 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); @@ -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)" @@ -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 = ` -> `; + td.innerHTML = ` `; tr.appendChild(td); tb_main.appendChild(tr); } - // Info - let p_runinfo = document.getElementById("runInfo"); - let content = `CMSSW: ${global_data[0]}   
run_key: ${global_data[1]}
`; - content += `Known cmssw jobs: ${clients_data.length}     `; - content += 'Legend: '; - content += '    running ' + state_G + '    '; - content += '    stopped ' + state_Y + '    '; - content += '    crashed ' + state_R + '    '; - 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}`; + }; /* @@ -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); @@ -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() { @@ -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