diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx index c0ae1ddf4..7c9bf6bb4 100644 --- a/app/pages/system/networking/IpPoolPage.tsx +++ b/app/pages/system/networking/IpPoolPage.tsx @@ -101,6 +101,37 @@ export async function clientLoader({ params }: LoaderFunctionArgs) { export const handle = makeCrumb((p) => p.pool!) +function SiloNameFromId({ value: siloId }: { value: string }) { + const { data: silo } = useQuery(q(api.siloView, { path: { silo: siloId } })) + + if (!silo) return + + return {silo.name} +} + +const silosColHelper = createColumnHelper() + +const silosCols = [ + silosColHelper.accessor('siloId', { + header: 'Silo', + cell: (info) => , + }), + silosColHelper.accessor('isDefault', { + header: () => { + return ( + + Silo default + + When no pool is specified, IPs are allocated from the silo's default pool for + the relevant version and type. + + + ) + }, + cell: (info) => (info.getValue() ? default : null), + }), +] + export default function IpPoolpage() { const poolSelector = useIpPoolSelector() const { data: pool } = usePrefetchedQuery(ipPoolView(poolSelector)) @@ -256,16 +287,6 @@ function IpRangesTable() { ) } -function SiloNameFromId({ value: siloId }: { value: string }) { - const { data: silo } = useQuery(q(api.siloView, { path: { silo: siloId } })) - - if (!silo) return - - return {silo.name} -} - -const silosColHelper = createColumnHelper() - /** Look up silo name from query cache and return a label for use in modals. */ function getSiloLabel(siloId: string) { const siloName = queryClient.getQueryData(siloView({ silo: siloId }).queryKey)?.name @@ -405,30 +426,6 @@ function LinkedSilosTable() { /> ) - const silosCols = useMemo( - () => [ - silosColHelper.accessor('siloId', { - header: 'Silo', - cell: (info) => , - }), - silosColHelper.accessor('isDefault', { - header: () => { - return ( - - Silo default - - When no pool is specified, IPs are allocated from the silo's default pool - for the relevant version and type. - - - ) - }, - cell: (info) => (info.getValue() ? default : null), - }), - ], - [] - ) - const columns = useColsWithActions(silosCols, makeActions) const { table } = useQueryTable({ query: ipPoolSiloList(poolSelector),