diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 9e3c51599..17da2c90a 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -19,6 +19,7 @@ import {
useInstanceSelector,
useIpPoolSelector,
useSiloSelector,
+ useSledParams,
useVpcRouterSelector,
useVpcSelector,
} from '~/hooks/use-params'
@@ -343,3 +344,25 @@ export function InstancePicker() {
/>
)
}
+
+export function SledPicker() {
+ // picker only shows up when a sled is in scope
+ const { sledId } = useSledParams()
+ const { data: sleds } = useApiQuery('sledList', {
+ query: { limit: PAGE_SIZE },
+ })
+ const items = (sleds?.items || []).map(({ id }) => ({
+ label: id,
+ to: pb.sled({ sledId: id }),
+ }))
+ return (
+
+ )
+}
diff --git a/app/layouts/SystemLayout.tsx b/app/layouts/SystemLayout.tsx
index a2463e31c..22aeda428 100644
--- a/app/layouts/SystemLayout.tsx
+++ b/app/layouts/SystemLayout.tsx
@@ -19,7 +19,12 @@ import {
import { trigger404 } from '~/components/ErrorBoundary'
import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
import { TopBar } from '~/components/TopBar'
-import { IpPoolPicker, SiloPicker, SiloSystemPicker } from '~/components/TopBarPicker'
+import {
+ IpPoolPicker,
+ SiloPicker,
+ SiloSystemPicker,
+ SledPicker,
+} from '~/components/TopBarPicker'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { Divider } from '~/ui/lib/Divider'
import { pb } from '~/util/path-builder'
@@ -55,7 +60,7 @@ export function SystemLayout() {
// robust way of doing this would be to make a separate layout for the
// silo-specific routes in the route config, but it's overkill considering
// this is a one-liner. Switch to that approach at the first sign of trouble.
- const { silo, pool } = useParams()
+ const { silo, pool, sledId } = useParams()
const navigate = useNavigate()
const { pathname } = useLocation()
@@ -92,6 +97,7 @@ export function SystemLayout() {
{silo && }
{pool && }
+ {sledId && }