53 lines
2.2 KiB
JavaScript
53 lines
2.2 KiB
JavaScript
|
// 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>`;
|
||
|
|
}
|
||
|
|
}
|