Metrics and Object Browser UI regressions: stale Uptime, malformed legends, and cramped menus

[Vonng]

Environment

• SILO Console v2.0.0 at b952a1202869b89e5cc7b821a0b5651f74e09d08
• SILO server RELEASE.2026-08-04T00-00-00Z
• Chrome desktop, tested against m.pigsty on 2026-08-05

This groups the closely related dashboard and compact action-menu polish regressions observed during the same acceptance pass.

Findings

1. Info always shows Uptime n/a

On Metrics → Info, the top Uptime tile showed n/a while the server card on the same page showed 13 minutes and Metrics → Usage later showed 27 minutes.

This is deterministic in source: BasicDashboard.tsx destructures lastScan, lastHeal, and upTime from an empty object, so the three tiles always use their n/a defaults.

2. Usage does not follow the redesigned Info presentation

Info uses the new large-card hierarchy, spacing, and typography. Usage falls back to a dense legacy grid of small cards. Switching tabs looks like switching between two design systems even though both describe the same server state.

3. Traffic legends expose template braces

Metrics → Traffic renders legends such as:

{{127.0.0.1:9000,deleteobject}}

The replacement fallback in constructLabelNames replaces bare key text after counting placeholders, which can preserve the surrounding double braces.

4. Chart actions are too small and their menu text is truncated

The chart download control is a 16 px SVG inside a borderless button with zero padding: DownloadWidgetDataButton.tsx. The visible/clickable control is unusually small. On Traffic, opening it rendered both menu rows as Do... even though their accessible text is Download as CSV and Download as PNG.

5. Object Browser Upload menu also clips its label

In a writable bucket, open Upload. Upload File fits, but Upload Folder is displayed as Upload Fol.... The full labels are supplied in UploadFilesButton.tsx; the popup should size to its content rather than the compact trigger.

Expected result / acceptance criteria

• Info derives Uptime, last scan, and last heal from real state and never contradicts the server card or Usage.
• Usage follows the same card language and responsive spacing as Info.
• Traffic legends contain resolved values without literal template braces.
• Chart action buttons have a conventional pointer target (at least 32 px; preferably 44×44 px for touch).
• Download and Upload popup menus have a minimum width sufficient for their longest label at 100% zoom.
• Add focused tests for constructLabelNames with composite labels and screenshots/component tests for both compact menus.

[Vonng]

The hardcoded Heal/Scan portion now has a focused V3 redesign proposal in #8. That issue proposes replacing the two low-signal time-since rows with Erasure Health and Usage Data Age, while this issue can continue tracking the broader UI regression bundle.

[Vonng]

All five findings are fixed in v2.1.0. They landed across three commits, since the grouping followed the change themes rather than the issue boundary.

1. Info always shows Uptime n/a — fixed in 437c56c

BasicDashboard.tsx literally destructured from an empty object literal, so all three tiles could only ever read their defaults. Uptime is now derived from the same server list the page already renders:

const getClusterUptime = (servers: ServerProperties[]) => {
  const onlineUptimes = servers
    .filter((s) => s.state === "online" && typeof s.uptime === "number" && s.uptime >= 0)
    .map((s) => s.uptime as number);
  if (!onlineUptimes.length) return "n/a";
  return niceDays(Math.min(...onlineUptimes).toString()).trim() || "0 seconds";
};

min() across online nodes is the conservative cluster reading, so the tile can no longer contradict the server card next to it. The lastScan / lastHeal tiles were not repaired but replaced — see #8.

2. Usage does not follow the Info presentation — fixed in e3fed07

The dashboard widget set was rebuilt on one card grammar: NumericStatCard, DualStatCard, CapacityItem, NetworkItem/NetworkGetItem/NetworkPutItem, BarChartWidget, LinearGraphWidget, ExpandGraphLink, and the shared LayoutUtil/styleLibrary spacing rules, so switching tabs no longer crosses two design systems. The dense Traffic and Resources panels reflow from tablet widths down.

3. Traffic legends expose template braces — fixed in e964992

Root cause was a label-name mismatch, not the formatter alone. The legend format asked for {{api}} while the series carried a differently named dimension, so nothing matched the primary regex and the brace-preserving fallback ran. Metrics V3 renamed that label api → name, and the widget legends were rewritten to match:

LegendFormat: "{{server}}, {{name}}",

Placeholders now resolve on the primary path. constructLabelNames also gained a guard for fully aggregated series — max()/min() results serialize with no metric field at all, which previously crashed label extraction and produced a 0 B capacity donut and an empty usage-growth chart.

Residual, disclosed: the fallback branch itself is unchanged. It is unreachable for the shipped legends, but a series that genuinely lacks an expected dimension can still render a literal {{label}}. There is no focused unit test for constructLabelNames — web-app has no unit-test runner at all (only TestCafe and Playwright), so adding one is a tooling change rather than a test addition. Both are tracked as follow-up rather than blockers.

4. Chart action button too small, menu text truncated — fixed in 437c56c and e3fed07

DownloadWidgetDataButton.tsx now renders a 32×32 px target around an 18 px glyph, meeting the stated minimum. The truncated Do... rows were the popup sizing to its compact trigger; both dropdowns get an explicit floor in root-styles.css:

#download-widget-main-menu,
#upload-files-main-menu { min-width: 180px; }

5. Object Browser Upload menu clips its label — fixed in 437c56c

Same rule as above. The menu id was also corrected from upload-main-menu to upload-files-main-menu so the aria-controls reference on the trigger resolves to the element that actually exists — it did not before.

Acceptance criteria

• Info derives Uptime from real state and cannot contradict the server card
• Usage follows the same card language and responsive spacing as Info
• Traffic legends contain resolved values
• Chart action buttons meet the 32 px minimum pointer target
• Download and Upload popups have a minimum width for their longest label
• Focused constructLabelNames tests and compact-menu component tests — see the residual note above

Closing: every user-visible defect reported here is fixed in v2.1.0. The outstanding item is test tooling, not behavior.