diff --git a/app/pages/__tests__/instance/networking.e2e.ts b/app/pages/__tests__/instance/networking.e2e.ts
index ca27c468a..ef4c4199b 100644
--- a/app/pages/__tests__/instance/networking.e2e.ts
+++ b/app/pages/__tests__/instance/networking.e2e.ts
@@ -1,4 +1,4 @@
-import { test } from '@playwright/test'
+import { expect, test } from '@playwright/test'
import { expectNotVisible, expectRowVisible, expectVisible } from 'app/util/e2e'
@@ -14,9 +14,17 @@ test('Instance networking tab', async ({ page }) => {
'my-nic',
'a network interface',
'172.30.0.10',
+ 'mock-vpc',
+ 'mock-subnet',
'primary',
])
+ // check VPC link in table points to the right page
+ await expect(page.locator('role=cell >> role=link[name="mock-vpc"]')).toHaveAttribute(
+ 'href',
+ '/orgs/maze-war/projects/mock-project/vpcs/mock-vpc'
+ )
+
// Have to stop instance to edit NICs
await stopInstance(page)
@@ -52,9 +60,11 @@ test('Instance networking tab', async ({ page }) => {
'my-nic',
'a network interface',
'172.30.0.10',
+ 'mock-vpc',
+ 'mock-subnet',
'',
])
- await expectRowVisible(page, 'nic-2', ['', 'nic-2', null, null, 'primary'])
+ await expectRowVisible(page, 'nic-2', ['', 'nic-2', null, null, null, null, 'primary'])
// Make an edit to the network interface
await page
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index 7b8cd33a1..4f17d6bed 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react'
+import { Link } from 'react-router-dom'
import type { NetworkInterface, NetworkInterfaceUpdate } from '@oxide/api'
import { useApiMutation, useApiQuery, useApiQueryClient } from '@oxide/api'
@@ -18,6 +19,26 @@ import CreateNetworkInterfaceSideModalForm from 'app/forms/network-interface-cre
import EditNetworkInterfaceSideModalForm from 'app/forms/network-interface-edit'
import { useParams, useToast } from 'app/hooks'
+const VpcNameFromId = ({ value }: { value: string }) => {
+ const { orgName, projectName } = useParams('orgName', 'projectName')
+ const { data: vpc } = useApiQuery('vpcViewById', { id: value })
+ if (!vpc) return null
+ return (
+
+ {vpc.name}
+
+ )
+}
+
+const SubnetNameFromId = ({ value }: { value: string }) => (
+
+ {useApiQuery('vpcSubnetViewById', { id: value }).data?.name}
+
+)
+
export function NetworkingTab() {
const instanceParams = useParams('orgName', 'projectName', 'instanceName')
const queryClient = useApiQueryClient()
@@ -98,6 +119,8 @@ export function NetworkingTab() {
{/* TODO: mark v4 or v6 explicitly? */}
+
+
diff --git a/libs/api/index.ts b/libs/api/index.ts
index 649963907..d16a91fe6 100644
--- a/libs/api/index.ts
+++ b/libs/api/index.ts
@@ -2,7 +2,6 @@
import type * as ApiTypes from './__generated__/Api'
import { Api } from './__generated__/Api'
import { handleErrors } from './errors'
-import type { ResultItem } from './hooks'
import { getUseApiMutation, getUseApiQuery, getUseApiQueryClient } from './hooks'
const api = new Api({
@@ -11,18 +10,6 @@ const api = new Api({
export type ApiMethods = typeof api.methods
-/**
- * API methods that return a list of items.
- */
-export type ApiListMethods = {
- // Only never extends never. If ResultItem extends never, that means we
- // couldn't pull out an item, which means it's not a list endpoint. If we can
- // infer an item, that means it's a list endpoint, so include its M.
- [M in keyof ApiMethods as ResultItem extends never
- ? never
- : M]: ApiMethods[M]
-}
-
export const useApiQuery = getUseApiQuery(api.methods, handleErrors)
export const useApiMutation = getUseApiMutation(api.methods, handleErrors)
export const useApiQueryClient = getUseApiQueryClient()
diff --git a/libs/table/QueryTable.tsx b/libs/table/QueryTable.tsx
index dea49a437..b8c8f8977 100644
--- a/libs/table/QueryTable.tsx
+++ b/libs/table/QueryTable.tsx
@@ -126,7 +126,7 @@ const makeQueryTable = - (
manualPagination: true,
})
- if (debug) console.table(data)
+ if (debug) console.table((data as { items?: any[] })?.items || data)
const paginationParams = useMemo(
() => ({