Routes

Reverse-proxy routes in priority order, reordered by drag or Alt and arrow keys. A route that a broader one above always catches is shadowed.

View as Markdown

<sv-routes>· loading

Trydrag route 6 above route 1.

Installation

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

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

Usage

import { SvRoutes } from "@/components/lumesec/sv-routes";

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

Behaviour

Host and path to upstream, in priority order. A route that a broader one above it always catches is marked as shadowed.

API reference

Events

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

reorderReact proponReorderDetail{ route: string, position: number }

Fires when a route moves. route is host plus path, position the new 1-based position.

changeReact proponChangeDetail{ action: 'add-route', host: string }

Fires when a route is added. host includes the path when it is not /.

Keyboard

Keys	Action
Alt + ArrowUp / Alt + ArrowDown	On a drag handle: move the route up or down one position. Focus follows the handle.

Accessibility

Routes are a role="list". Each drag handle is a button whose aria-label names the route and the Alt and arrow keys.
A polite live region announces the new position after a move.
On an invalid new route the field gets aria-invalid="true" and focus, and the message is in an assertive live region.
Reduced motion: no animation; with reduced motion only the shared button transitions are switched off.

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

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

Notes

Built-in demo data: the six routes from INFRA, with api.lumesec.local/v1/infer placed below its catch-all so it starts shadowed. No attribute selects a record.
A route is shadowed when an earlier route has the same host and a shorter path that is a prefix of its path.
A new route needs a host like docs.lumesec.local, a path that starts with /, and a host and path that are not taken. It starts as Planned with TLS and points at one upstream: AIOP API, Admin UI, Identity, Grafana, Object store or Prometheus.
Container query: compact rows and a two-column form under 480 px.

<sv-route-tester>

Where does this request go?sv-route-tester

<sv-upstream>

Upstream poolsv-upstream

<sv-middleware>

Middleware chainsv-middleware

<sv-certs>

Certificatessv-certs

Was this page helpful?

Related