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

Author: david-crespo

app/pages/system/SiloImageEdit.tsx app/pages/SiloImageEdit.tsxapp/pages/system/SiloImageEdit.tsx renamed to app/pages/SiloImageEdit.tsx

@@ -51,11 +51,13 @@ const EmptyState = () => (
 
 const imageList = getListQFn('imageList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(imageList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Images' }
+
 const colHelper = createColumnHelper<Image>()
 const staticCols = [
   colHelper.accessor('name', {
@@ -66,8 +68,7 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-Component.displayName = 'SiloImagesPage'
-export function Component() {
+export default function SiloImagesPage() {
   const [showModal, setShowModal] = useState(false)
   const [demoteImage, setDemoteImage] = useState<Image | null>(null)
 

app/pages/system/SiloImagesPage.tsx app/pages/SiloImagesPage.tsxapp/pages/system/SiloImagesPage.tsx renamed to app/pages/SiloImagesPage.tsx

@@ -27,12 +27,12 @@ import { VpcDocsPopover } from './VpcsPage'
 const vpcView = ({ project, vpc }: PP.Vpc) =>
   apiq('vpcView', { path: { vpc }, query: { project } })
 
-VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   await queryClient.prefetchQuery(vpcView(getVpcSelector(params)))
   return null
 }
 
-export function VpcPage() {
+export default function VpcPage() {
   const navigate = useNavigate()
   const vpcSelector = useVpcSelector()
   const { project, vpc: vpcName } = vpcSelector

app/pages/project/vpcs/VpcPage.tsx

@@ -35,14 +35,15 @@ const colHelper = createColumnHelper<VpcRouter>()
 
 const vpcRouterList = (query: PP.Vpc) => getListQFn('vpcRouterList', { query })
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await queryClient.prefetchQuery(vpcRouterList({ project, vpc }).optionsFn())
   return null
 }
 
-Component.displayName = 'VpcRoutersTab'
-export function Component() {
+export const handle = { crumb: 'Routers' }
+
+export default function VpcRoutersTab() {
   const vpcSelector = useVpcSelector()
   const navigate = useNavigate()
   const { project, vpc } = vpcSelector

app/pages/project/vpcs/VpcRoutersTab.tsx

@@ -15,6 +15,7 @@ import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/r
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
@@ -65,13 +66,15 @@ const colHelper = createColumnHelper<Vpc>()
 
 // just as in the vpcList call for the quick actions menu, include limit to make
 // sure it matches the call in the QueryTable
-VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
   await queryClient.prefetchQuery(vpcList(project).optionsFn())
   return null
 }
 
-export function VpcsPage() {
+export const handle = makeCrumb('VPCs', (p) => pb.vpcs(getProjectSelector(p)))
+
+export default function VpcsPage() {
   const { project } = useProjectSelector()
   const navigate = useNavigate()
 

app/pages/project/vpcs/VpcsPage.tsx

@@ -40,11 +40,13 @@ const EmptyState = () => (
 
 const diskList = getListQFn('physicalDiskList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(diskList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Disks' }
+
 const colHelper = createColumnHelper<PhysicalDisk>()
 const staticCols = [
   colHelper.accessor('id', {}),
@@ -69,8 +71,7 @@ const staticCols = [
   }),
 ]
 
-Component.displayName = 'DisksTab'
-export function Component() {
+export default function DisksTab() {
   const emptyState = <EmptyState />
   const { table } = useQueryTable({ query: diskList, columns: staticCols, emptyState })
   return table

app/pages/system/inventory/DisksTab.tsx

@@ -11,18 +11,21 @@ import { Servers16Icon, Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const rackList = getListQFn('rackList', {})
 
-InventoryPage.loader = async () => {
+export async function clientLoader() {
   await queryClient.prefetchQuery(rackList.optionsFn())
   return null
 }
 
-export function InventoryPage() {
+export const handle = makeCrumb('Inventory', pb.sledInventory())
+
+export default function InventoryPage() {
   const { data: racks } = usePrefetchedQuery(rackList.optionsFn())
   const rack = racks?.items[0]
 

app/pages/system/inventory/InventoryPage.tsx

@@ -30,11 +30,13 @@ const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
 
 const sledList = getListQFn('sledList', {})
 
-export async function loader() {
+export async function clientLoader() {
   await queryClient.prefetchQuery(sledList.optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Sleds' }
+
 const colHelper = createColumnHelper<Sled>()
 const staticCols = [
   colHelper.accessor('id', {
@@ -88,8 +90,7 @@ const staticCols = [
   }),
 ]
 
-Component.displayName = 'SledsTab'
-export function Component() {
+export default function SledsTab() {
   const emptyState = <EmptyMessage icon={<Servers24Icon />} title="No sleds found" />
   const { table } = useQueryTable({ query: sledList, columns: staticCols, emptyState })
   return table

app/pages/system/inventory/SledsTab.tsx

@@ -33,12 +33,14 @@ const EmptyState = () => {
   )
 }
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await queryClient.prefetchQuery(sledInstanceList(sledId).optionsFn())
   return null
 }
 
+export const handle = { crumb: 'Instances' }
+
 // passing in empty function because we still want the copy ID button
 const makeActions = (): MenuAction[] => []
 
@@ -69,8 +71,7 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-Component.displayName = 'SledInstancesTab'
-export function Component() {
+export default function SledInstancesTab() {
   const { sledId } = useSledParams()
   const columns = useColsWithActions(staticCols, makeActions)
   const { table } = useQueryTable({

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

@@ -12,21 +12,26 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { requireSledParams, useSledParams } from '~/hooks/use-params'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await apiQueryClient.prefetchQuery('sledView', {
     path: { sledId },
   })
   return null
 }
+export const handle = makeCrumb(
+  (p) => truncate(p.sledId!, 12, 'middle'),
+  (p) => pb.sled({ sledId: p.sledId! })
+)
 
-Component.displayName = 'SledPage'
-export function Component() {
+export default function SledPage() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })