Fix Console language support and named frame monitoring cards

2026-10-17 23:07:49 +08:00
parent d2498ba68b
commit f45eefa31b
8 changed files with 116 additions and 8 deletions
@@ -0,0 +1,30 @@
+import { state } from '/assets/js/state.js';
+import { esc, pluginText as text } from '/assets/js/shared.js';
+
+const typeName = type => ({service: text('服务', 'Service'), device: text('画框', 'Frame'), job: text('任务', 'Job')}[type] || type);
+const metricValue = metric => {
+  if (metric.unit === 'percent') return `${metric.value}%`;
+  if (metric.unit === 'count') return `${metric.value} ${text('个', 'items')}`;
+  const values = {
+    service_ready: [text('未就绪', 'Not ready'), text('就绪', 'Ready')],
+    device_online: [text('离线', 'Offline'), text('在线', 'Online')],
+    job_enabled: [text('停用', 'Disabled'), text('启用', 'Enabled')],
+    last_run_success: [text('失败或待确认', 'Failed or unconfirmed'), text('成功', 'Succeeded')],
+  };
+  return values[metric.key]?.[metric.value] ?? String(metric.value);
+};
+
+export function hostCard(entry) {
+  const snapshot = entry.snapshot || {};
+  const resources = snapshot.resources || [];
+  const current = entry.dataCurrent === true;
+  const label = item => item.label?.[state.LANG] || item.key || item.id;
+  const name = id => resources.find(r => r.id === id)?.name || id;
+  const alertRows = (snapshot.alerts || []).map(alert => {
+    const separator = alert.id.indexOf(':');
+    const kind = alert.id.split(':')[0];
+    const resource = separator < 0 ? '' : `${kind.startsWith('JOB_') ? 'job' : 'device'}:${alert.id.slice(separator + 1)}`;
+    return `<div class="row"><span>${esc(label(alert))}</span><span>${esc(resource ? name(resource) : '')}</span></div>`;
+  }).join('');
+  return `<article class="panel host-panel"><div class="host-head"><h2>${esc(entry.host.name || 'Frame Flow')}</h2><span class="badge semantic-status" data-semantic="${current ? 'online' : 'unknown'}">${current ? text('在线', 'Online') : text('状态未确认', 'Unconfirmed')}</span></div>${!current ? `<p class="muted">${text('以下为上次采集数据', 'Showing the last collected data')}</p>` : ''}${resources.map(resource => `<div class="group"><h3>${esc(resource.name || resource.id)} · ${esc(typeName(resource.type))}</h3><div class="host-grid">${(snapshot.metrics || []).filter(m => m.resource_id === resource.id).map(metric => `<div class="metric"><div class="muted">${esc(label(metric))}</div><div class="value">${esc(metricValue(metric))}</div></div>`).join('')}</div></div>`).join('')}<div class="group"><h3>${text('当前告警', 'Current alerts')}</h3>${alertRows || text('无告警', 'No alerts')}</div></article>`;
+}