Host list

Sortable table of the demo hosts with kind, address, occupied ports and live CPU, filtered by kind or by name, address or port.

View as Markdown

<sv-host-list>· loading

Trytype “91” to find hosts with port 9100.

Installation

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

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-list.json

Usage

import { SvHostList } from "@/components/lumesec/sv-host-list";

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

Behaviour

Every host in a sortable table with its occupied ports. Filter by kind, or search by name, address or port number.

API reference

Events

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

selectReact proponSelectDetail{ host: string }

Fires when a row is chosen by click, Enter or Space, with the host id.

Keyboard

Keys	Action
Enter / Space	On a focused row: select the host.
ArrowDown / ArrowUp	On a focused row: move focus to the next or previous row.

Accessibility

Rows are focusable (tabindex="0") and carry aria-selected.
The Host and CPU headers contain sort buttons; the active column has aria-sort (ascending for Host, descending for CPU).
The search field is labelled Filter hosts. The kind filter is a role="group" labelled Kind with aria-pressed buttons.
Reduced motion: no animation of its own; with reduced motion the CPU bar width transition is switched off. Values still update every 1.5 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 --border, --foreground, --muted and --muted-foreground.

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

Notes

Shows the 9 hosts of the shared demo infrastructure INFRA; the Internet node is left out. No attribute selects a subset.
Search matches host names and addresses by substring and ports by prefix, so 91 finds hosts with port 9100. Up to three ports are shown per row, then a +N chip.
CPU values are simulated.
The table is at least 560 px wide and scrolls horizontally in narrower containers.

<sv-host-card>

Host cardsv-host-card

<sv-host-form>

<sv-vm-stack>

Hypervisorssv-vm-stack

<sv-containers>

Containerssv-containers

Was this page helpful?

Related