Add VPC, Subnet to NIC table

app/pages/__tests__/instance/networking.e2e.ts

@@ -14,6 +14,8 @@ test('Instance networking tab', async ({ page }) => {
     'my-nic',
     'a network interface',
     '172.30.0.10',
+    'mock-vpc',
+    'mock-subnet',
     'primary',
   ])
 
@@ -52,9 +54,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

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import type { NetworkInterface, NetworkInterfaceUpdate } from '@oxide/api'
 import { useApiMutation, useApiQuery, useApiQueryClient } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
-import { useQueryTable } from '@oxide/table'
+import { byIdCell, useQueryTable } from '@oxide/table'
 import {
   Badge,
   Button,
@@ -98,6 +98,12 @@ export function NetworkingTab() {
         <Column accessor="description" />
         {/* TODO: mark v4 or v6 explicitly? */}
         <Column accessor="ip" />
+        <Column header="vpc" accessor="vpcId" cell={byIdCell('vpcViewById', 'name')} />
+        <Column
+          header="subnet"
+          accessor="subnetId"
+          cell={byIdCell('vpcSubnetViewById', 'name')}
+        />
         <Column
           accessor="primary"
           cell={({ value }) =>

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<ApiMethods[M]> extends never
-    ? never
-    : M]: ApiMethods[M]
-}
-
 export const useApiQuery = getUseApiQuery(api.methods, handleErrors)
 export const useApiMutation = getUseApiMutation(api.methods, handleErrors)
 export const useApiQueryClient = getUseApiQueryClient<ApiMethods>()

libs/table/QueryTable.tsx

@@ -126,7 +126,7 @@ const makeQueryTable = <Item,>(
       manualPagination: true,
     })
 
-    if (debug) console.table(data)
+    if (debug) console.table((data as { items?: any[] })?.items || data)
 
     const paginationParams = useMemo(
       () => ({

libs/table/cells/IdLookupCell.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { AsyncReturnType } from 'type-fest'
+
+import type { ApiViewByIdMethods } from '@oxide/api'
+import { useApiQuery } from '@oxide/api'
+
+import type { Cell } from './Cell'
+
+interface IdLookupCellProps<M extends keyof ApiViewByIdMethods> {
+  type: M
+  field: keyof NonNullable<AsyncReturnType<ApiViewByIdMethods[M]>['data']>
+  value: string
+}
+function IdLookupCell<M extends keyof ApiViewByIdMethods>({
+  type,
+  field,
+  value,
+}: IdLookupCellProps<M>) {
+  // @ts-expect-error TODO M isn't correctly narrowing the type down
+  const { data } = useApiQuery<M>(type, { id: value })
+  // @ts-expect-error TODO Because data isn't narrowed correctly above this is an error too
+  return (data && <span className="text-default">{data[field]}</span>) || null
+}
+
+export const byIdCell =
+  <M extends keyof ApiViewByIdMethods>(
+    type: IdLookupCellProps<M>['type'],
+    field: IdLookupCellProps<M>['field']
+  ) =>
+  ({ value }: Cell<string>) => {
+    return <IdLookupCell type={type} field={field} value={value} />
+  }

libs/table/cells/index.ts

@@ -11,3 +11,4 @@ export * from './SizeCell'
 export * from './TwoLineCell'
 export * from './TypeValueCell'
 export * from './TypeValueListCell'
+export * from './IdLookupCell'