- Adjust `alignItems` to `stretch` and add `maxWidth` (260) to Gauge components in Infrastructure Details page.
- Update German translations for memory titles, temperatures, and labels in locales file.
The status page appearance form saves a customer-picked brand color
(`statusPage.color`), but `StatusPageThemeProvider` never consumed it —
every rendered surface styled from `tokens.up`, so the picker had no
visible effect on the public page.
Rather than overriding `tokens.up` (the semantic OK/up status color,
which would let a red or orange brand color render the "all
operational" indicator in a red that reads as downtime), this
introduces a separate `brand` / `brandStrong` / `brandSoft` token
triple that is distinct from the up/OK color.
## Changes
- `themes/tokens.ts`: add optional `brand` / `brandStrong` / `brandSoft`
fields on `StatusPageThemeTokens`. Themes leave them undefined; the
provider falls back to the theme's `up*` values so nothing regresses
before individual themes opt in.
- `themes/StatusPageThemeProvider.tsx`: add `brandColor` prop and a
`resolveBrandTokens` helper. When a valid hex is provided it feeds
`brand`, `brandStrong = darken(x, 0.2)`, `brandSoft = alpha(x, 0.15)`
using MUI's shared `alpha`/`darken` (replaces the ad-hoc hex helpers).
Invalid or empty values fall through cleanly.
- `Status/index.tsx`: pass `brandColor={statusPage.color}` only at the
public route. The admin preview provider wraps an iframe whose
document renders itself, so passing the prop there had no effect and
is dropped.
- `themes/refined/styles.ts`: switch accent surfaces (hero logo, active
chart-switch button, hardware pill, footer link) from `tokens.up` to
`tokens.brand`. Uptime bars, status pills, and OK indicators stay on
`tokens.up`. Other themes keep their current styling until a designer
decides which surfaces should switch.
## Benefits
- Brand Color picker actually changes the rendered accent surfaces.
- The semantic "OK/up" status color is never repainted by the brand
color, so operational-state indicators stay green regardless of the
customer's brand.
- Reuses MUI's `alpha` / `darken` helpers already used across the
client; no divergent color utilities.
- Small, incremental adoption: themes opt in at their own pace by
reading `tokens.brand*` where they want the brand accent.
The notice now triggers on interface names (loopback / container-bridge
only), not on zero traffic. Update the variable, i18n key, and English
copy to match:
- showNoTrafficNotice -> showLoopbackOnlyNotice
- pages.infrastructure.charts.labels.netNoTraffic ->
pages.infrastructure.charts.labels.loopbackOnlyNotice
- English string rewritten to describe the loopback-only condition
rather than "zero traffic on every interface"
Other locales still hold the old string under the old key and will fall
back to English until the translation pipeline picks up the new key.
Tracked separately.
The notice at the top of the network charts was firing whenever the aggregated
per-second delta was zero across all interfaces. That is a false positive when
Capture is running on a real host but the polling interval is >= 1 minute and
the aggregation bucket is also 1 minute — first == last in the bucket, delta
is zero, but the interface has plenty of real traffic in its cumulative
counters.
Base the notice on interface names instead: only show it when the ONLY
interfaces Capture reports are loopback / container-bridge names (lo, lo0,
docker0). Real NICs (enp0s6, eth0, wlan0, tunN, vethN, brN, etc.) keep the
notice hidden even when the aggregation currently reports zero throughput.
The underlying zero-throughput bug (single-sample buckets producing zero
deltas) is tracked separately.
The customCSS field on status pages was persisted and validated
end-to-end but never rendered on the public page, so operator-supplied
styles had no effect.
Inject the string as a <style> tag on the public route (which the
admin preview iframe also renders), reusing the existing
cssReferencesExternalResource check so external-resource CSS
(@import, url(http…), //…) is dropped defensively on the client.
The admin preview iframe already points at the public URL, so this
one insertion covers both the live page and the in-app preview.
The preview framed the page public URL, which for a custom domain is cross
origin and blocked by the admin document CSP frame-src. Point the iframe at the
same-origin public path while the frame chrome still shows the public URL.
The preview previously rendered the themed status page inline in the
admin document, so document-global concerns leaked in both directions:
custom CSS spilled into the admin UI and the theme body painting never
showed. Pointing the BrowserFrame at the real public URL in an iframe
isolates the CSS completely and makes the preview pixel-identical to
what visitors see. Auth for unpublished pages keeps working because the
same-origin iframe shares localStorage and the API client reads the
token from the rehydrated store.
The customCSS field existed on the model, types, and form schema but was
never editable, sent to the API, or rendered. Wire it end to end:
- Accept customCSS in the create/update status page body validation and
regenerate the OpenAPI spec
- Add a Custom CSS editor (multiline field) to the status page form and
include the value in the submitted form data
- Support multiline mode in the shared TextInput component
- Inject the saved CSS via a style tag when rendering the status page
Alex Holliday
Iven Schlenther
gorkem-bwl
Harshitbro-ctrlv
Arnaud GRIMBERT
Buco7854
harsh-aghara
Ian Troisi
Br0wnHammer
joaquimpeixoto