diff --git a/app/pages/project/instances/NetworkingTab.tsx b/app/pages/project/instances/NetworkingTab.tsx index 10817eac6..8c89087e4 100644 --- a/app/pages/project/instances/NetworkingTab.tsx +++ b/app/pages/project/instances/NetworkingTab.tsx @@ -9,7 +9,7 @@ import { useQuery } from '@tanstack/react-query' import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table' import { useCallback, useMemo, useState } from 'react' import { useForm } from 'react-hook-form' -import { type LoaderFunctionArgs } from 'react-router' +import { Link, type LoaderFunctionArgs } from 'react-router' import { match } from 'ts-pattern' import { @@ -347,6 +347,16 @@ export default function NetworkingTab() { }) ).data.items + // Firewall rules and other external networking state live on the VPC of the + // primary NIC. The parent InstancePage loader prefetches this VPC, but + // primaryNic may be undefined, so we can't use usePrefetchedQuery. + const primaryVpcId = nics.find((nic) => nic.primary)?.vpcId + const { data: primaryVpc } = useQuery({ + // primaryVpcId is defined when enabled, so the assertion is safe + ...q(api.vpcView, { path: { vpc: primaryVpcId! } }), + enabled: !!primaryVpcId, + }) + const { data: siloPools } = usePrefetchedQuery( q(api.ipPoolList, { query: { limit: ALL_ISH } }) ) @@ -739,7 +749,7 @@ export default function NetworkingTab() { - +