Molodetz blogrol volgens DPP-template

2026-10-05 09:36:20 +02:00
commit f290a4c766
277 changed files with 15758 additions and 0 deletions
@@ -0,0 +1,81 @@
+// 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();