Upstream pool

Backends behind the demo api.lumesec.local route with weights, open connections and balancing method. Draining lets connections finish.

View as Markdown

<sv-upstream>· loading

Trydrain app-01.

Installation

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

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

Usage

import { SvUpstream } from "@/components/lumesec/sv-upstream";

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

Behaviour

Backends behind one route with weights, open connections and the balancing method. Draining a backend lets its connections finish.

API reference

Events

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

changeReact proponChangeDetail

{ action: 'lb-method', method: string } | { action: 'weight', backend: string, weight: number } | { action: 'enable-backend' | 'drain-backend', backend: string }

Fires when the method changes (Round robin, Least connections or IP hash), when a weight slider is released, or when a backend is drained or enabled. backend is api-1, api-2 or api-3.

Accessibility

The balancing method is a role="group" labelled Balancing method with aria-pressed buttons.
Each backend has a role="switch" labelled Drain or Enable plus the backend, and a native range input (0 to 100, step 5) with an aria-label. The switch state and label follow the backend, also when raising a weight enables it.
A polite live region explains the chosen method and the drain state. The traffic canvas is aria-hidden.
Reduced motion: no request particles are drawn. Shares and connection counts still update 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, --foreground, --lumesec and --muted-foreground.

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

Notes

Built-in demo data: AIOP API on app-01 and app-02 at weight 50 and a planned third backend on app-03 at weight 0, sharing 1,700 req/s. Raising the planned backend's weight enables it. No attribute selects a record.
Traffic shares follow the weights of enabled backends; the balancing method changes only the explanation.
A drained backend's open connections fall by about half each second.

<sv-routes>

Routessv-routes

<sv-route-tester>

Where does this request go?sv-route-tester

<sv-middleware>

Middleware chainsv-middleware

<sv-certs>

Certificatessv-certs

Was this page helpful?

Related