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', {