Skip to content
NewService Map: 30 components for hosts, ports and routes
<ln-firmware>Custom elementDevicesFree

Firmware rollout

Staged firmware rollout: one canary, then two waves, each waiting for healthy telemetry before the next; Pause holds between steps.

View as Markdown
<ln-firmware>

Trystart the rollout.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-firmware
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/ln-firmware.json

Usage

import { LnFirmware } from "@/components/lumesec/ln-firmware";

export function Example() {
  return (
    <LnFirmware />
  );
}

Behaviour

A staged rollout: one canary, then two waves, each waiting for healthy telemetry before the next starts. Pause holds the rollout between steps.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

rolloutReact proponRolloutDetail{ state: "started" | "done", version: string }

Fires when the rollout starts and when every device runs the target version ("7.2.0").

Methods

Call them on the element, for example through a React ref.

run()

Starts the rollout and returns a promise that resolves when it finishes. Same as Start rollout; ignored while a rollout runs.

Accessibility

  • Start rollout and Pause are native buttons. Pause changes its label to Resume and has no aria-pressed.
  • Progress messages are written to an aria-live="polite" line.
  • Each device's state (Waiting, Downloading with a percentage, Rebooting, Up to date) is text; the lane canvas is aria-hidden.
  • Reduced motion: traffic pixels are not drawn and each wait is cut to about 60 ms, so the rollout takes about 4 s instead of about 14 s.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --background, --border, --card, --foreground, --lumesec, --lumesec-success and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-border-subtle, --ui-fg, --ui-mono, --ui-muted, --ui-ok and --ui-surface.

Notes

  • Shows six built-in devices in three rings (Canary, Wave 1, Wave 2) moving to 7.2.0. No attribute selects devices or version; the rollout is simulated.
  • After a rollout finishes, Start rollout is enabled again; another run repeats the rollout for every ring.
  • Uses a container query: below 460px the version column hides.
  • The React wrapper's ref is typed as the element (LnFirmwareElement), so run() can be called on it once the element is connected.

Related

<ln-device-card>
Device cardln-device-cardOpen Device card
<ln-device-list>
Device listln-device-listOpen Device list
<ln-client-list>
Clientsln-client-listOpen Clients
<ln-port-panel>
Switch portsln-port-panelOpen Switch ports

Was this page helpful?