Skip to content

Commit

Permalink
Add picker to Sled page topbar (#2493)
Browse files Browse the repository at this point in the history
  • Loading branch information
charliepark authored Oct 9, 2024
1 parent 352c802 commit 48f3bca
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 2 deletions.
23 changes: 23 additions & 0 deletions app/components/TopBarPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
useInstanceSelector,
useIpPoolSelector,
useSiloSelector,
useSledParams,
useVpcRouterSelector,
useVpcSelector,
} from '~/hooks/use-params'
Expand Down Expand Up @@ -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 (
<TopBarPicker
aria-label="Switch sled"
category="Sled"
current={sledId}
to={pb.sled({ sledId })}
items={items}
noItemsText="No sleds found"
/>
)
}
10 changes: 8 additions & 2 deletions app/layouts/SystemLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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()

Expand Down Expand Up @@ -92,6 +97,7 @@ export function SystemLayout() {
<SiloSystemPicker value="system" />
{silo && <SiloPicker />}
{pool && <IpPoolPicker />}
{sledId && <SledPicker />}
</TopBar>
<Sidebar>
<Sidebar.Nav>
Expand Down

0 comments on commit 48f3bca

Please sign in to comment.