# Upstream pool
> Backends behind the demo api.lumesec.local route with weights, open connections and balancing method. Draining lets connections finish.
- Element: `<sv-upstream>`
- React: `import { SvUpstream } from "@/components/lumesec/sv-upstream"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-upstream.json
- Page: https://elements.lumesec.ai/components/service-map/upstream



Live preview: https://elements.lumesec.ai/view/sv-upstream

```html
<sv-upstream></sv-upstream>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-upstream
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-upstream.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-upstream.js"></script>

<sv-upstream></sv-upstream>
```

## 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.

| Event    | React prop | Detail                                                                                                                                                                 | Description                                                                                                                                                                                           |
| -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ 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](/docs/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.