Dependencies

One demo service in the centre with its consumers on the left and dependencies on the right. Moving pixels show live requests.

View as Markdown

<sv-deps>· loading

Tryselect PostgreSQL in the right column.

Playground

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

Loading <sv-deps>

Props

svcremounts

<SvDeps svc="pgb" />

Installation

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

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

Usage

import { SvDeps } from "@/components/lumesec/sv-deps";

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

Behaviour

One service in the middle, what consumes it on the left and what it consumes on the right. The pixels are requests.

API reference

Attributes

svcReact propsvcTypestringDefaultpgb

Id of the service to centre, for example pgb or api-1. Exporters and the Internet clients are not in the menu; an id that is not in the menu falls back to the first entry (Reverse proxy on edge-01). Read once on first connect.

Events

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

selectReact proponSelectDetail{ service: string }

Fires when a consumer or dependency is clicked; that service moves to the centre. service is its id. The Internet clients node is not in the menu, so clicking it centres the first entry (Reverse proxy). Choosing from the menu does not fire it.

Accessibility

The service menu is labelled Service. Consumers and dependencies are buttons that show their host and request rate as text.
The traffic canvas and the column headings are aria-hidden.
Reduced motion: no request particles are drawn and the connecting lines are static.

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

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

Notes

Reads the shared demo infrastructure INFRA, without monitoring scrapes; svc="pgb" selects the record.
Rates are simulated around the demo values and update every second.
Container query: under 480 px the icons and column headings are hidden.

<sv-matrix>

Consumer × providersv-matrix

<sv-blast>

What breaks if…sv-blast

<sv-conn>

Connectionsv-conn

<sv-trace>

Tracesv-trace

Was this page helpful?

Related