Versie 0.2.0

client/widgets/metrics.js

@@ -0,0 +1,53 @@
+// Generated, do not edit. sha256:1196ce67207fc0b54b2fc602d2f16cc37c4414638c2f9a09a7c16d83c58acd2f
+import { apiMetricsGlobal } from '../data/api-metrics.js';
+import { getSettings } from '../data/preferences.js';
+import { t } from '../i18n/index.js';
+import { esc } from '../ui/escape.js';
+import { fmtInt } from '../ui/format.js';
+import { CONFIG, METRICS } from '../../shared/config.js';
+
+function sinceBucket(minutes) {
+  return new Date(Date.now() - minutes * 60000).toISOString().slice(0, 16);
+}
+
+function failState(calls, fail) {
+  if (!calls) return 'ok';
+  const ratio = fail / calls;
+  if (ratio >= METRICS.FAIL_BAD) return 'bad';
+  if (ratio >= METRICS.FAIL_WARN) return 'warn';
+  return 'ok';
+}
+
+function tileHtml(label, value, state) {
+  return `<div class="metric-tile">
+      <span class="metric-dot is-${state}"></span>
+      <div class="metric-meta"><div class="t-value">${value}</div><div class="t-label t-label--ter">${label}</div></div>
+    </div>`;
+}
+
+export async function renderMetricsWidget(host) {
+  try {
+    const settings = await getSettings();
+    const schema = settings ? settings.version : null;
+    const dbState = schema === CONFIG.SCHEMA_VERSION ? 'ok' : 'warn';
+
+    const m = await apiMetricsGlobal(sinceBucket(METRICS.WINDOW_MINUTES));
+    const errState = failState(m.calls, m.fail);
+    const errPct = m.calls ? Math.round((m.fail / m.calls) * 100) : 0;
+
+    const tiles = [
+      tileHtml(t('sysmetrics.db'), `v${schema != null ? schema : '?'}`, dbState),
+      tileHtml(t('sysmetrics.calls'), fmtInt(m.calls), m.calls ? 'ok' : 'warn'),
+      tileHtml(t('sysmetrics.errors'), `${errPct}%`, errState),
+    ];
+
+    host.innerHTML = `<div class="card metrics-card">
+        <div class="t-label">${t('dashboard.widget.metrics')}</div>
+        <div class="metrics-strip" style="margin-top:0.6rem">${tiles.join('')}</div>
+        <div class="t-muted-cell" style="margin-top:0.5rem">${t('sysmetrics.window')} ${METRICS.WINDOW_MINUTES} min</div>
+      </div>`;
+  } catch (err) {
+    console.error('[metrics-widget]', err);
+    host.innerHTML = `<div class="card"><div class="t-label">${t('dashboard.widget.metrics')}</div><div class="t-body-sm t-muted">⚠ ${esc(err.message)}</div></div>`;
+  }
+}