Get IP Pool tab for Internet Gateways working

oxidecomputer · Oct 10, 2024 · 6f5e7ff · 6f5e7ff
1 parent 39c8ca0
commit 6f5e7ff
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
@@ -38,5 +38,6 @@ export const ErrorBoundary = (props: { children: React.ReactNode }) => (
 export function RouterDataErrorBoundary() {
  // TODO: validate this unknown at runtime _before_ passing to ErrorFallback
  const error = useRouteError() as Props['error']
+ console.error(error)
  return <ErrorFallback error={error} />
 }
diff --git a/app/pages/project/vpcs/InternetGatewayPage/tabs/InternetGatewayIpPoolsTab.tsx b/app/pages/project/vpcs/InternetGatewayPage/tabs/InternetGatewayIpPoolsTab.tsx
@@ -7,10 +7,10 @@
  */
 
 import { createColumnHelper } from '@tanstack/react-table'
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 
-import { apiQueryClient, usePrefetchedApiQuery, type InternetGatewayIpPool } from '~/api'
+import { apiQueryClient, type InternetGatewayIpPool } from '~/api'
 import { getInternetGatewaySelector, useInternetGatewaySelector } from '~/hooks/use-params'
 import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
@@ -25,8 +25,21 @@ InternetGatewayIpPoolsTab.loader = async function ({ params }: LoaderFunctionArg
  apiQueryClient.prefetchQuery('internetGatewayIpPoolList', {
  query: { project, vpc, gateway, limit: ALL_ISH },
  }),
- // get IP Pools
- apiQueryClient.prefetchQuery('ipPoolList', { query: { limit: ALL_ISH } }),
+ // fetch IP Pools and preload into RQ cache so fetches by ID in
+ // IpPoolCell can be mostly instant yet gracefully fall back to
+ // fetching individually if we don't fetch them all here
+ apiQueryClient
+ .fetchQuery('projectIpPoolList', { query: { limit: ALL_ISH } })
+ .then((pools) => {
+ console.log({ pools })
+ for (const pool of pools.items) {
+ apiQueryClient.setQueryData(
+ 'projectIpPoolView',
+ { path: { pool: pool.id } },
+ pool
+ )
+ }
+ }),
  ])
  return null
 }
@@ -38,9 +51,6 @@ export function InternetGatewayIpPoolsTab() {
  const { Table } = useQueryTable('internetGatewayIpPoolList', {
  query: { project, vpc, gateway, limit: ALL_ISH },
  })
- const { data: ipPools } = usePrefetchedApiQuery('ipPoolList', {
- query: { limit: ALL_ISH },
- })
 
  const emptyState = (
  <EmptyMessage
@@ -49,17 +59,14 @@ export function InternetGatewayIpPoolsTab() {
  />
  )
 
- const staticColumns = useMemo(
- () => [
- colHelper.accessor('name', {}),
- colHelper.accessor('description', Columns.description),
- colHelper.accessor('ipPoolId', {
- header: 'IP Pool',
- cell: (info) => <IpPoolCell ipPoolId={info.getValue()} ipPools={ipPools.items} />,
- }),
- ],
- [ipPools]
- )
+ const staticColumns = [
+ colHelper.accessor('name', {}),
+ colHelper.accessor('description', Columns.description),
+ colHelper.accessor('ipPoolId', {
+ header: 'IP Pool',
+ cell: (info) => <IpPoolCell ipPoolId={info.getValue()} />,
+ }),
+ ]
 
  // The user can copy the ID of the IP Pool attached to this internet gateway
  const makeActions = useCallback(

diff --git a/mock-api/ip-pool.ts b/mock-api/ip-pool.ts
@@ -55,10 +55,15 @@ export const ipPools: Json<IpPool>[] = [defaultIpPool, ipPool1, ipPool2, ipPool3
 
 export const ipPoolSilos: Json<IpPoolSiloLink>[] = [
  {
- ip_pool_id: ipPool1.id,
+ ip_pool_id: defaultIpPool.id,
  silo_id: defaultSilo.id,
  is_default: true,
  },
+ {
+ ip_pool_id: ipPool1.id,
+ silo_id: defaultSilo.id,
+ is_default: false,
+ },
  {
  ip_pool_id: ipPool2.id,
  silo_id: defaultSilo.id,