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( () => ({