Host card

Card for one demo host with kind, address, live CPU and memory, and each service with its ports and request rate.

View as Markdown

<sv-host-card>· loading

Tryrestart the host.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <sv-host-card>

Props

hostremounts

<SvHostCard host="db-01" />

Installation

pnpm dlx shadcn@latest add @lumesec/sv-host-card

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/sv-host-card.json

Usage

import { SvHostCard } from "@/components/lumesec/sv-host-card";

export function Example() {
  return (
    <SvHostCard host="db-01" />
  );
}

Behaviour

One host with its kind, address, load and every service it runs, each with its ports and current request rate.

API reference

Attributes

hostReact prophostTypestringDefaultdb-01

Host id from the demo inventory: edge-01, app-01, app-02, auth-01, mon-01, db-01, cache-01, gpu-01 or store-01. Unknown ids fall back to db-01. Read once on first connect.

Events

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

restartReact proponRestartDetail{ host: string }

Fires when a restart finishes, with the host id.

Methods

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

restart()

Simulates a restart: meters and rates show a dash for 2.4 s, then the host reports back and restart fires.

Accessibility

Services are a role="list" of role="listitem" rows.
A polite live region announces the restart and when the host is back.
The Restart host button is disabled while the restart runs.
Reduced motion: the restart finishes after 50 ms instead of 2.4 s, and the meter bars change without a width transition.

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 --border, --foreground and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-border, --ui-fg2, --ui-mono and --ui-muted.

Notes

Reads the shared demo infrastructure INFRA; host="db-01" selects the record.
CPU, memory and request rates are simulated and drift every 1.2 s. A service's rate is the sum of its inbound demo edges; services without any show idle.

<sv-host-list>

Host listsv-host-list

<sv-host-form>

<sv-vm-stack>

Hypervisorssv-vm-stack

<sv-containers>

Containerssv-containers

Was this page helpful?

Related