display external IPs on primary network interface

Author: david-crespo

OMICRON_VERSION

@@ -1 +1 @@
-604a35be03783f1506519f7652557626347343be
+b9f6c1d35e3901e7ecd2415f3c42ea1bc6ca246c

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

@@ -13,6 +13,7 @@ test('Instance networking tab', async ({ page }) => {
     'my-nic',
     'a network interface',
     '172.30.0.10',
+    '123.4.56.7',
     'mock-vpc',
     'mock-subnet',
     'primary',
@@ -58,11 +59,12 @@ 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, null, null, 'primary'])
+  await expectRowVisible(page, 'nic-2', ['nic-2', null, null, null, null, null, 'primary'])
 
   // Make an edit to the network interface
   await page

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

@@ -39,14 +39,11 @@ const SubnetNameFromId = ({ value }: { value: string }) => (
   </span>
 )
 
-function ExternalIpsFromInstanceName({ value: instanceName }: { value: string }) {
-  const { orgName, projectName } = useParams('orgName', 'projectName')
-  const { data } = useApiQuery('instanceExternalIpList', {
-    orgName,
-    projectName,
-    instanceName,
-  })
-  return <span className="text-default">{data?.items.map((eip) => eip.ip).join(', ')}</span>
+function ExternalIpsFromInstanceName({ value: primary }: { value: boolean }) {
+  const instanceParams = useParams('orgName', 'projectName', 'instanceName')
+  const { data } = useApiQuery('instanceExternalIpList', instanceParams)
+  const ips = data?.items.map((eip) => eip.ip).join(', ')
+  return <span className="text-default">{primary ? ips : <>&mdash;</>}</span>
 }
 
 export function NetworkingTab() {
@@ -129,9 +126,14 @@ export function NetworkingTab() {
         <Column accessor="description" />
         {/* TODO: mark v4 or v6 explicitly? */}
         <Column accessor="ip" />
+        <Column
+          header="External IP"
+          // we use primary to decide whether to show the IP in that row
+          accessor="primary"
+          cell={ExternalIpsFromInstanceName}
+        />
         <Column header="vpc" accessor="vpcId" cell={VpcNameFromId} />
         <Column header="subnet" accessor="subnetId" cell={SubnetNameFromId} />
-        <Column header="External IP" accessor="id" cell={ExternalIpsFromInstanceName} />
         <Column
           accessor="primary"
           cell={({ value }) =>

libs/api-mocks/msw/handlers.ts

@@ -462,6 +462,22 @@ export const handlers = [
     }
   ),
 
+  rest.get<never, InstanceParams, Json<Api.ExternalIpResultsPage> | GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/instances/:instanceName/external-ips',
+    (req, res) => {
+      const [, err] = lookupInstance(req.params)
+      if (err) return res(err)
+      // TODO: proper mock table
+      const items = [
+        {
+          ip: '123.4.56.7',
+          kind: 'ephemeral',
+        } as const,
+      ]
+      return res(json({ items }))
+    }
+  ),
+
   rest.get<never, InstanceParams, Json<Api.NetworkInterfaceResultsPage> | GetErr>(
     '/api/organizations/:orgName/projects/:projectName/instances/:instanceName/network-interfaces',
     (req, res) => {