Add VPC, Subnet to NIC table

[zephraph]

This PR adds VPC and Subnet to the NIC table. This was blocked for a while b/c we only get IDs back and we needed oxidecomputer/omicron#1266 to make it happen.

I added a new cell type that looks up a resource by id and returns whatever field you specify. Currently the cell only renders text, so that'll be something to keep in mind. I don't think this is the "final" version of what this should look like which is why I didn't put more effort in making it robust. The external types work well, but the internal types are... not great.

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

Lines 101 to 106 in 0103e4d

	<Column header="vpc" accessor="vpcId" cell={byIdCell('vpcViewById', 'name')} />
	<Column
	header="subnet"
	accessor="subnetId"
	cell={byIdCell('vpcSubnetViewById', 'name')}
	/>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	Jul 21, 2022 at 8:34AM (UTC)

[zephraph]

The outside types are correct, but these inner types are fucked.

[zephraph]

I would like to make the vpc/subnet names links eventually. We can do that w/ the VPC without too much trouble, but the subnet is a trick b/c it requires the VPC name. Also subnets are only really viewable inside a list in the VPC so it's hard to focus on a particular table instance.

A side thought here: If we could use UUIDs as a valid param in the route (which would admittedly take some magic to translate correctly) then we could always use the ID in the route path.

[david-crespo]

I tried a version that's more manual but it avoids the @ts-expect-error and made it easy to make the VPC one into a link. See what you think: #1063

[david-crespo]

I spent some time trying to get the approach that works for useApiQuery to work here — no dice. So annoying.

-interface IdLookupCellProps<M extends keyof ApiViewByIdMethods> {
+interface IdLookupCellProps<A extends ApiViewByIdMethods, M extends keyof A> {
   type: M
-  field: keyof NonNullable<AsyncReturnType<ApiViewByIdMethods[M]>['data']>
+  field: keyof NonNullable<AsyncReturnType<A[M]>['data']>
   value: string
 }
-function IdLookupCell<M extends keyof ApiViewByIdMethods>({
+
+function IdLookupCell<A extends ApiViewByIdMethods, M extends keyof A>({
   type,
   field,
   value,
-}: IdLookupCellProps<M>) {
-  // @ts-expect-error TODO M isn't correctly narrowing the type down
-  const { data } = useApiQuery<M>(type, { id: value })
+}: IdLookupCellProps<A, M>) {
+  const { data } = useApiQuery<M>(type as M, { 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']
+const getByIdCell =
+  <A extends ApiViewByIdMethods>() =>
+  <M extends keyof A>(
+    type: IdLookupCellProps<A, M>['type'],
+    field: IdLookupCellProps<A, M>['field']
   ) =>
   ({ value }: Cell<string>) => {
     return <IdLookupCell type={type} field={field} value={value} />
   }
+
+export const byIdCell = getByIdCell()

[zephraph]

Cool, yeah. Manual approach works 👍. The subnet link is what was more difficult given you need the name of the vpc. Fine with doing without that for now.