diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index d079c975a6..20e0fe915e 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -5,7 +5,7 @@
*
* Copyright Oxide Computer Company
*/
-import { createColumnHelper } from '@tanstack/react-table'
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import type { LoaderFunctionArgs } from 'react-router-dom'
@@ -28,25 +28,34 @@ import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params'
import { addToast } from '~/stores/toast'
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
import { Columns } from '~/table/columns/common'
-import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { Table } from '~/table/Table'
import { Button } from '~/ui/lib/Button'
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TableEmptyBox } from '~/ui/lib/Table'
import { fancifyStates } from './common'
+const EmptyState = () => (
+
+ }
+ title="No disks"
+ body="Attach a disk to this instance to see it here"
+ />
+
+)
+
StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
const { project, instance } = getInstanceSelector(params)
+ const selector = { path: { instance }, query: { project } }
await Promise.all([
- apiQueryClient.prefetchQuery('instanceDiskList', {
- path: { instance },
- query: { project, limit: PAGE_SIZE },
- }),
+ // don't bother with page size because this will never paginate. max disks
+ // per instance is 8
+ // https://github.com/oxidecomputer/omicron/blob/40fc3835/nexus/db-queries/src/db/queries/disk.rs#L16-L21
+ apiQueryClient.prefetchQuery('instanceDiskList', selector),
// This is covered by the InstancePage loader but there's no downside to
// being redundant. If it were removed there, we'd still want it here.
- apiQueryClient.prefetchQuery('instanceView', {
- path: { instance },
- query: { project },
- }),
+ apiQueryClient.prefetchQuery('instanceView', selector),
])
return null
}
@@ -158,21 +167,17 @@ export function StorageTab() {
},
})
- const { Table } = useQueryTable('instanceDiskList', instancePathQuery)
-
- const emptyState = (
- }
- title="No disks"
- body="Attach a disk to this instance to see it here"
- />
- )
+ const { data: disks } = usePrefetchedApiQuery('instanceDiskList', instancePathQuery)
- const columns = useColsWithActions(staticCols, makeActions)
+ const table = useReactTable({
+ columns: useColsWithActions(staticCols, makeActions),
+ data: disks.items,
+ getCoreRowModel: getCoreRowModel(),
+ })
return (
<>
-
+ {disks.items.length > 0 ? : }