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 && }