Skip to content

Commit a3566bd

Browse files
authored
chore: convert last few routes (#2719)
* convert more modules * convert IP pools routes * sleds routes * move misplaced silo images files * last few pages. down to 163kb * bump min chunk size
1 parent 251e7b7 commit a3566bd

File tree

16 files changed

+103
-70
lines changed

16 files changed

+103
-70
lines changed
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,13 @@ const EmptyState = () => (
5151

5252
const imageList = getListQFn('imageList', {})
5353

54-
export async function loader() {
54+
export async function clientLoader() {
5555
await queryClient.prefetchQuery(imageList.optionsFn())
5656
return null
5757
}
5858

59+
export const handle = { crumb: 'Images' }
60+
5961
const colHelper = createColumnHelper<Image>()
6062
const staticCols = [
6163
colHelper.accessor('name', {
@@ -66,8 +68,7 @@ const staticCols = [
6668
colHelper.accessor('timeCreated', Columns.timeCreated),
6769
]
6870

69-
Component.displayName = 'SiloImagesPage'
70-
export function Component() {
71+
export default function SiloImagesPage() {
7172
const [showModal, setShowModal] = useState(false)
7273
const [demoteImage, setDemoteImage] = useState<Image | null>(null)
7374

app/pages/project/vpcs/VpcPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import { VpcDocsPopover } from './VpcsPage'
2727
const vpcView = ({ project, vpc }: PP.Vpc) =>
2828
apiq('vpcView', { path: { vpc }, query: { project } })
2929

30-
VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
30+
export async function clientLoader({ params }: LoaderFunctionArgs) {
3131
await queryClient.prefetchQuery(vpcView(getVpcSelector(params)))
3232
return null
3333
}
3434

35-
export function VpcPage() {
35+
export default function VpcPage() {
3636
const navigate = useNavigate()
3737
const vpcSelector = useVpcSelector()
3838
const { project, vpc: vpcName } = vpcSelector

app/pages/project/vpcs/VpcRoutersTab.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,15 @@ const colHelper = createColumnHelper<VpcRouter>()
3535

3636
const vpcRouterList = (query: PP.Vpc) => getListQFn('vpcRouterList', { query })
3737

38-
export async function loader({ params }: LoaderFunctionArgs) {
38+
export async function clientLoader({ params }: LoaderFunctionArgs) {
3939
const { project, vpc } = getVpcSelector(params)
4040
await queryClient.prefetchQuery(vpcRouterList({ project, vpc }).optionsFn())
4141
return null
4242
}
4343

44-
Component.displayName = 'VpcRoutersTab'
45-
export function Component() {
44+
export const handle = { crumb: 'Routers' }
45+
46+
export default function VpcRoutersTab() {
4647
const vpcSelector = useVpcSelector()
4748
const navigate = useNavigate()
4849
const { project, vpc } = vpcSelector

app/pages/project/vpcs/VpcsPage.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/r
1515

1616
import { DocsPopover } from '~/components/DocsPopover'
1717
import { HL } from '~/components/HL'
18+
import { makeCrumb } from '~/hooks/use-crumbs'
1819
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
1920
import { useQuickActions } from '~/hooks/use-quick-actions'
2021
import { confirmDelete } from '~/stores/confirm-delete'
@@ -65,13 +66,15 @@ const colHelper = createColumnHelper<Vpc>()
6566

6667
// just as in the vpcList call for the quick actions menu, include limit to make
6768
// sure it matches the call in the QueryTable
68-
VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
69+
export async function clientLoader({ params }: LoaderFunctionArgs) {
6970
const { project } = getProjectSelector(params)
7071
await queryClient.prefetchQuery(vpcList(project).optionsFn())
7172
return null
7273
}
7374

74-
export function VpcsPage() {
75+
export const handle = makeCrumb('VPCs', (p) => pb.vpcs(getProjectSelector(p)))
76+
77+
export default function VpcsPage() {
7578
const { project } = useProjectSelector()
7679
const navigate = useNavigate()
7780

app/pages/system/inventory/DisksTab.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,13 @@ const EmptyState = () => (
4040

4141
const diskList = getListQFn('physicalDiskList', {})
4242

43-
export async function loader() {
43+
export async function clientLoader() {
4444
await queryClient.prefetchQuery(diskList.optionsFn())
4545
return null
4646
}
4747

48+
export const handle = { crumb: 'Disks' }
49+
4850
const colHelper = createColumnHelper<PhysicalDisk>()
4951
const staticCols = [
5052
colHelper.accessor('id', {}),
@@ -69,8 +71,7 @@ const staticCols = [
6971
}),
7072
]
7173

72-
Component.displayName = 'DisksTab'
73-
export function Component() {
74+
export default function DisksTab() {
7475
const emptyState = <EmptyState />
7576
const { table } = useQueryTable({ query: diskList, columns: staticCols, emptyState })
7677
return table

app/pages/system/inventory/InventoryPage.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,21 @@ import { Servers16Icon, Servers24Icon } from '@oxide/design-system/icons/react'
1111

1212
import { DocsPopover } from '~/components/DocsPopover'
1313
import { RouteTabs, Tab } from '~/components/RouteTabs'
14+
import { makeCrumb } from '~/hooks/use-crumbs'
1415
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
1516
import { docLinks } from '~/util/links'
1617
import { pb } from '~/util/path-builder'
1718

1819
const rackList = getListQFn('rackList', {})
1920

20-
InventoryPage.loader = async () => {
21+
export async function clientLoader() {
2122
await queryClient.prefetchQuery(rackList.optionsFn())
2223
return null
2324
}
2425

25-
export function InventoryPage() {
26+
export const handle = makeCrumb('Inventory', pb.sledInventory())
27+
28+
export default function InventoryPage() {
2629
const { data: racks } = usePrefetchedQuery(rackList.optionsFn())
2730
const rack = racks?.items[0]
2831

app/pages/system/inventory/SledsTab.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,13 @@ const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
3030

3131
const sledList = getListQFn('sledList', {})
3232

33-
export async function loader() {
33+
export async function clientLoader() {
3434
await queryClient.prefetchQuery(sledList.optionsFn())
3535
return null
3636
}
3737

38+
export const handle = { crumb: 'Sleds' }
39+
3840
const colHelper = createColumnHelper<Sled>()
3941
const staticCols = [
4042
colHelper.accessor('id', {
@@ -88,8 +90,7 @@ const staticCols = [
8890
}),
8991
]
9092

91-
Component.displayName = 'SledsTab'
92-
export function Component() {
93+
export default function SledsTab() {
9394
const emptyState = <EmptyMessage icon={<Servers24Icon />} title="No sleds found" />
9495
const { table } = useQueryTable({ query: sledList, columns: staticCols, emptyState })
9596
return table

app/pages/system/inventory/sled/SledInstancesTab.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@ const EmptyState = () => {
3333
)
3434
}
3535

36-
export async function loader({ params }: LoaderFunctionArgs) {
36+
export async function clientLoader({ params }: LoaderFunctionArgs) {
3737
const { sledId } = requireSledParams(params)
3838
await queryClient.prefetchQuery(sledInstanceList(sledId).optionsFn())
3939
return null
4040
}
4141

42+
export const handle = { crumb: 'Instances' }
43+
4244
// passing in empty function because we still want the copy ID button
4345
const makeActions = (): MenuAction[] => []
4446

@@ -69,8 +71,7 @@ const staticCols = [
6971
colHelper.accessor('timeCreated', Columns.timeCreated),
7072
]
7173

72-
Component.displayName = 'SledInstancesTab'
73-
export function Component() {
74+
export default function SledInstancesTab() {
7475
const { sledId } = useSledParams()
7576
const columns = useColsWithActions(staticCols, makeActions)
7677
const { table } = useQueryTable({

app/pages/system/inventory/sled/SledPage.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,26 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
1212
import { Servers24Icon } from '@oxide/design-system/icons/react'
1313

1414
import { RouteTabs, Tab } from '~/components/RouteTabs'
15+
import { makeCrumb } from '~/hooks/use-crumbs'
1516
import { requireSledParams, useSledParams } from '~/hooks/use-params'
1617
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
1718
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
19+
import { truncate } from '~/ui/lib/Truncate'
1820
import { pb } from '~/util/path-builder'
1921

20-
export async function loader({ params }: LoaderFunctionArgs) {
22+
export async function clientLoader({ params }: LoaderFunctionArgs) {
2123
const { sledId } = requireSledParams(params)
2224
await apiQueryClient.prefetchQuery('sledView', {
2325
path: { sledId },
2426
})
2527
return null
2628
}
29+
export const handle = makeCrumb(
30+
(p) => truncate(p.sledId!, 12, 'middle'),
31+
(p) => pb.sled({ sledId: p.sledId! })
32+
)
2733

28-
Component.displayName = 'SledPage'
29-
export function Component() {
34+
export default function SledPage() {
3035
const { sledId } = useSledParams()
3136
const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })
3237

0 commit comments

Comments
 (0)