diff --git a/app/pages/project/vpcs/VpcGatewaysTab.tsx b/app/pages/project/vpcs/VpcGatewaysTab.tsx index e1baf74d7..5eb1e19f6 100644 --- a/app/pages/project/vpcs/VpcGatewaysTab.tsx +++ b/app/pages/project/vpcs/VpcGatewaysTab.tsx @@ -20,6 +20,7 @@ import { Columns } from '~/table/columns/common' import { useQueryTable } from '~/table/QueryTable' import { CopyableIp } from '~/ui/lib/CopyableIp' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { TipIcon } from '~/ui/lib/TipIcon' import { ALL_ISH } from '~/util/consts' import { pb } from '~/util/path-builder' import type * as PP from '~/util/path-params' @@ -68,17 +69,15 @@ export async function clientLoader({ params }: LoaderFunctionArgs) { await Promise.all([ ...gateways.items.flatMap((gateway: InternetGateway) => [ - queryClient.prefetchQuery( + queryClient.fetchQuery( gatewayIpAddressList({ project, vpc, gateway: gateway.name }).optionsFn() ), - queryClient.prefetchQuery( + queryClient.fetchQuery( gatewayIpPoolList({ project, vpc, gateway: gateway.name }).optionsFn() ), ]), ...routers.items.map((router) => - queryClient.prefetchQuery( - routeList({ project, vpc, router: router.name }).optionsFn() - ) + queryClient.fetchQuery(routeList({ project, vpc, router: router.name }).optionsFn()) ), queryClient.fetchQuery(projectIpPoolList.optionsFn()).then((pools) => { for (const pool of pools.items) { @@ -91,6 +90,16 @@ export async function clientLoader({ params }: LoaderFunctionArgs) { return null } +export const AttachedIpAddressHeader = () => ( + <> + Attached IP Address + + Internet gateways without an IP address attached will use an address from the attached + IP pool + + +) + export default function VpcInternetGatewaysTab() { const { project, vpc } = useVpcSelector() @@ -111,18 +120,18 @@ export default function VpcInternetGatewaysTab() { colHelper.accessor('description', Columns.description), colHelper.accessor('name', { // ID needed to avoid key collision with other name column - id: 'ip-address', - header: 'Attached IP Address', + id: 'ip-pool', + header: 'Attached IP Pool', cell: (info) => ( - + ), }), colHelper.accessor('name', { // ID needed to avoid key collision with other name column - id: 'ip-pool', - header: 'Attached IP Pool', + id: 'ip-address', + header: AttachedIpAddressHeader, cell: (info) => ( - + ), }), colHelper.accessor('name', {