Service card

Card for one demo service with ports, exposure, a 60-second request-rate sparkline, consumer and dependency counts, and a restart.

View as Markdown

<sv-service-card>· loading

Trypress Restart.

Playground

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

Loading <sv-service-card>

Props

svcremounts

<SvServiceCard svc="api-1" />

Installation

pnpm dlx shadcn@latest add @lumesec/sv-service-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-service-card.json

Usage

import { SvServiceCard } from "@/components/lumesec/sv-service-card";

export function Example() {
  return (
    <SvServiceCard svc="api-1" />
  );
}

Behaviour

One service with its ports, exposure, request rate over the last minute, consumers and dependencies.

API reference

Attributes

svcReact propsvcTypestringDefaultapi-1

Service id from the demo inventory, for example api-1, pg, redis or infer. Unknown ids fall back to api-1. Read once on first connect.

Events

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

restartReact proponRestartDetail{ service: string }

Fires when a restart finishes, with the service id.

Methods

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

restart()

Simulates a restart: the status shows Restarting and the rate drops to zero for 2.2 s, then restart fires.

Accessibility

A polite live region announces the restart and when the service is running again.
The sparkline is aria-hidden; the current rate and p95 latency are plain text.
The Restart button is disabled while the restart runs.
Reduced motion: the restart finishes after 50 ms instead of 2.2 s. The sparkline still updates 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, --foreground, --lumesec and --muted-foreground.

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

Notes

Reads the shared demo infrastructure INFRA; svc="api-1" selects the record. Service ids: proxy, nx-edge, api-1, admin, nx-app1, api-2, worker, nx-app2, idp, ldap, prom, grafana, loki, pgb, pg, nx-db, redis, infer, s3.
Consumers and Depends on count the demo edges into and out of the service. Rate and p95 latency are simulated; a service without inbound edges idles around 5 req/s.

<sv-catalog>

Service catalogsv-catalog

<sv-service-form>

Deploy a servicesv-service-form

<sv-health>

Health checkssv-health

<sv-placement>

Placementsv-placement

Was this page helpful?

Related