Kizuren/statusPage
1
0
Fork 0
mirror of https://github.com/Kizuren/statusPage.git synced 2025-12-29 10:34:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Base implementation of status-bar custom elment

Browse source
This commit is contained in:
ybouane 2024-10-09 22:33:48 -04:00
parent 49c52ba2e2
commit aacc3a074b
1 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
static/client.js
View file

@ -70,3 +70,53 @@ const findClosestPoint = (logs, t, maxDistance=Infinity) => {
}
return best;
}
class StatusBar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
set logs(logs) {
console.log(logs);
this.shadowRoot.innerHTML = '';
this.logs_ = logs;
let now = Date.now();
for(let i=config.nDataPoints;i>0;i--) {
let date = now - i * config.interval * 60_000;
let point = findClosestPoint(logs, date, config.interval * 60_000/2);
const $entry = document.createElement('status-bar-entry');
if(point) {
$entry.innerHTML = `<div>
<strong>${formatDate(point.t)}</strong>
<em title="Total Request Time">Total <span class="dur">N/A</span></em>
<span title="Time To First Byte">TTFB <span class="ttfb">N/A</span></span>
<span title="Download Time">Download Time <span class="dll">N/A</span></span>
</div>`;
if(point.err) {
$entry.setAttribute('data-status', 'outage');
$entry.querySelector('em').innerText = point.err;
} else {
if(point.dur > config.responseTimeWarning) {
$entry.setAttribute('data-status', 'highly-degraded');
} else if(point.dur > config.responseTimeGood) {
$entry.setAttribute('data-status', 'degraded');
} else {
$entry.setAttribute('data-status', 'healthy');
}
}
$entry.querySelector('.dur').innerText = point.dur.toFixed(2)+'ms';
if(point.ttfb)
$entry.querySelector('.ttfb').innerText = point.ttfb.toFixed(2)+'ms';
if(point.dll)
$entry.querySelector('.dll').innerText = point.dll.toFixed(2)+'ms';
} else {
$entry.setAttribute('data-status', 'none');
$entry.innerHTML = `<div><strong>No Data</strong></div>`;
}
this.shadowRoot.append($entry);
}
}
}
customElements.define('status-bar', StatusBar);