82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
// retoor <retoor@molodetz.nl>
|
|
import { Http } from "./Http.js";
|
|
import { Poller } from "./Poller.js";
|
|
|
|
export class ServiceMonitor {
|
|
constructor() {
|
|
this.root = document.querySelector("[data-service-monitor]");
|
|
if (!this.root) {
|
|
return;
|
|
}
|
|
this.mode = this.root.dataset.serviceMonitor;
|
|
this.poller = new Poller(() => this.refresh(), 3000).start();
|
|
}
|
|
|
|
async refresh() {
|
|
if (this.mode === "detail") {
|
|
const payload = await Http.getJson(`/admin/services/${encodeURIComponent(this.root.dataset.service)}`);
|
|
this.renderDetail(payload.service || {});
|
|
} else {
|
|
const payload = await Http.getJson("/admin/services");
|
|
(payload.services || []).forEach((service) => this.renderRow(service));
|
|
}
|
|
}
|
|
|
|
setStatus(node, status) {
|
|
if (node) {
|
|
node.className = `status ${status}`;
|
|
node.textContent = status;
|
|
}
|
|
}
|
|
|
|
setTime(node, iso) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
node.replaceChildren();
|
|
if (iso) {
|
|
const time = document.createElement("time");
|
|
time.dataset.dt = iso;
|
|
time.dataset.mode = "datetime";
|
|
time.dateTime = iso;
|
|
time.textContent = iso;
|
|
node.append(time);
|
|
}
|
|
}
|
|
|
|
renderRow(service) {
|
|
const row = this.root.querySelector(`[data-service="${CSS.escape(service.name)}"]`);
|
|
if (!row) {
|
|
return;
|
|
}
|
|
this.setStatus(row.querySelector('[data-field="status"]'), service.status);
|
|
this.setTime(row.querySelector('[data-field="last_run"]'), service.last_run);
|
|
this.setTime(row.querySelector('[data-field="next_run"]'), service.next_run);
|
|
}
|
|
|
|
renderDetail(service) {
|
|
this.setStatus(this.root.querySelector('[data-field="status"]'), service.status);
|
|
const logs = this.root.querySelector('[data-field="logs"]');
|
|
if (logs) {
|
|
logs.textContent = (service.logs || []).join("\n");
|
|
}
|
|
const cards = this.root.querySelector('[data-field="cards"]');
|
|
if (cards && service.metrics?.cards) {
|
|
cards.replaceChildren(...service.metrics.cards.map((card) => {
|
|
const box = document.createElement("div");
|
|
box.className = "stat-card";
|
|
const value = document.createElement("span");
|
|
value.className = "value";
|
|
value.textContent = card.value;
|
|
const name = document.createElement("span");
|
|
name.className = "name";
|
|
name.textContent = card.label;
|
|
box.append(value, name);
|
|
return box;
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
|
|
window.serviceMonitor = new ServiceMonitor();
|