Health checks

Health checks of demo services with probe, interval, latency and the last 30 results. New results slide in from the right.

View as Markdown

<sv-health>· loading

Tryrun a check now.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-health

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

Usage

import { SvHealth } from "@/components/lumesec/sv-health";

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

Behaviour

Each check with its probe, interval and the last 30 results. New results slide in from the right.

API reference

Events

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

checkReact proponCheckDetail{ service: string }

Fires when a Run check button is pressed. service is the display name, so both AIOP API rows report AIOP API.

Accessibility

Checks are a role="list". Each result strip is role="img" with an aria-label that counts the passed results out of the last 30.
Each run button has an aria-label that names the service, for example Run Redis check now.
The passing and degraded summary is a polite live region.
Reduced motion: the newest result appears without the accent flash and scale. Checks still run every second.

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

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

Notes

Built-in demo data: seven checks (AIOP API on app-01 and app-02, PostgreSQL, Redis, Identity, Inference, Loki). No attribute selects a record.
Results are simulated: Inference degrades when its latency passes 1.5 s, the other checks fail at random about 1.5% of the time.
Container query: under 440 px the result strip moves to its own line.

<sv-service-card>

Service cardsv-service-card

<sv-catalog>

Service catalogsv-catalog

<sv-service-form>

Deploy a servicesv-service-form

<sv-placement>

Placementsv-placement

Was this page helpful?

Related