Events

Live network event log with severity filters; Pause holds the list, and selecting an event shows its ID, device and time.

View as Markdown

<ln-events>· loading

Tryfilter to Security, then pause.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-events

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

Usage

import { LnEvents } from "@/components/lumesec/ln-events";

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

Behaviour

Live event log with severity filters. Pause holds the list while you read; select an event for its ID and device.

API reference

Events

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

eventReact proponEventDetail{ sev: "info" | "warn" | "sec", ic: string, m: string, d: string, t: string, id: string, fresh: boolean }

Fires for each new event, every 2.6 s unless paused. m is the message, d the device, t the time (HH:MM:SS) and id the event ID; ic and fresh are internal.

Accessibility

The list has role="log" with aria-live="off", so new events are not announced.
Each event is a button with aria-expanded that shows or hides its details.
The filter is a role="group" labelled Filter. Pause is a toggle with aria-pressed whose label changes to Resume.
The list re-renders on every new event; keyboard focus stays on the focused event while it is still among the seven shown.
Reduced motion: colour transitions are removed and new rows appear without sliding in.

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, --destructive, --lumesec-warning, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-border-subtle, --ui-danger, --ui-mono, --ui-muted, --ui-track and --ui-warn.

Notes

Events are picked at random from a built-in pool of 13 demo messages, never the same message twice in a row; no attribute supplies events. The log keeps 40 events and shows the latest 7 that match the filter.
While paused, no events are generated and event does not fire.
Uses a container query: below 460px the device column hides.

<ln-health>

Network healthln-health

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

<ln-device-list>

Device listln-device-list

Was this page helpful?

Related