Add snat to external ips (#2868)

* Add SNAT to external IPs table

* add test; add more mock SNATs to mock DB

* Update IP Pools tests now that more IPs are allocated, but is the count off because of shared IPs

* update mock data; dedupe utilization

* copy

* proper port range value

* don't show SNAT in external IPs list at top of page

* comments and cleanups

* tweak tooltip copy

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/components/ExternalIps.tsx

@@ -18,9 +18,9 @@ import { intersperse } from '~/util/array'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
-/** Move ephemeral IP (if present) to the end of the list of external IPs */
-export const orderIps = (ips: ExternalIp[]) =>
-  R.sortBy(ips, (a) => (a.kind === 'ephemeral' ? 1 : -1))
+/** Order IPs: floating first, then ephemeral, then SNAT */
+const IP_ORDER = { floating: 0, ephemeral: 1, snat: 2 } as const
+export const orderIps = (ips: ExternalIp[]) => R.sortBy(ips, (a) => IP_ORDER[a.kind])
 
 export function ExternalIps({ project, instance }: PP.Instance) {
   const { data, isPending } = useApiQuery('instanceExternalIpList', {
@@ -29,7 +29,11 @@ export function ExternalIps({ project, instance }: PP.Instance) {
   })
   if (isPending) return <SkeletonCell />
 
-  const ips = data?.items
+  // Exclude SNAT IPs from the properties table because they are rarely going
+  // to be what the user wants as the "external IP" of the instance -- they
+  // want one that can receive inbound traffic. This will have to change with
+  // https://github.com/oxidecomputer/omicron/issues/4317
+  const ips = data?.items.filter((ip) => ip.kind !== 'snat')
   if (!ips || ips.length === 0) return <EmptyCell />
   const orderedIps = orderIps(ips)
   const ipsToShow = orderedIps.slice(0, 2)

app/pages/project/instances/InstancePage.tsx

@@ -263,7 +263,7 @@ export default function InstancePage() {
         <PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
         <PropertiesTable.IdRow id={instance.id} />
         <PropertiesTable.Row label="external IPs">
-          {<ExternalIps {...instanceSelector} />}
+          <ExternalIps {...instanceSelector} />
         </PropertiesTable.Row>
       </PropertiesTable>
       <RouteTabs fullWidth>

app/pages/project/instances/NetworkingTab.tsx

@@ -8,7 +8,7 @@
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
 import { type LoaderFunctionArgs } from 'react-router'
-import { match, P } from 'ts-pattern'
+import { match } from 'ts-pattern'
 
 import {
   apiQueryClient,
@@ -88,8 +88,11 @@ const SubnetNameFromId = ({ value }: { value: string }) => {
   return <span className="text-default">{subnet.name}</span>
 }
 
-const EphemeralIPEmptyCell = () => (
-  <Tooltip content="Ephemeral IPs don’t have names or descriptions" placement="top">
+const NonFloatingEmptyCell = ({ kind }: { kind: 'snat' | 'ephemeral' }) => (
+  <Tooltip
+    content={`${kind === 'snat' ? 'SNAT' : 'Ephemeral'} IPs don’t have names or descriptions`}
+    placement="top"
+  >
     <div>
       <EmptyCell />
     </div>
@@ -168,14 +171,30 @@ const updateNicStates = fancifyStates(instanceCan.updateNic.states)
 const ipColHelper = createColumnHelper<ExternalIp>()
 const staticIpCols = [
   ipColHelper.accessor('ip', {
-    cell: (info) => <CopyableIp ip={info.getValue()} />,
+    cell: (info) => (
+      <div className="flex items-center gap-2">
+        <CopyableIp ip={info.getValue()} />
+        {info.row.original.kind === 'snat' && (
+          <Tooltip content="Outbound traffic uses this IP and port range" placement="top">
+            {/* div needed for Tooltip */}
+            <div>
+              <Badge color="neutral">
+                {info.row.original.firstPort}–{info.row.original.lastPort}
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    ),
   }),
   ipColHelper.accessor('kind', {
     header: () => (
       <>
         Kind
         <TipIcon className="ml-2">
-          Floating IPs can be detached from this instance and attached to another
+          Floating IPs can be detached from this instance and attached to another. SNAT IPs
+          cannot receive traffic; they are used for outbound traffic when there are no
+          ephemeral or floating IPs.
         </TipIcon>
       </>
     ),
@@ -187,15 +206,19 @@ const staticIpCols = [
   }),
   ipColHelper.accessor('name', {
     cell: (info) =>
-      info.row.original.kind === 'ephemeral' ? <EphemeralIPEmptyCell /> : info.getValue(),
+      info.row.original.kind === 'floating' ? (
+        info.getValue()
+      ) : (
+        <NonFloatingEmptyCell kind={info.row.original.kind} />
+      ),
   }),
   ipColHelper.accessor((row) => ('description' in row ? row.description : undefined), {
     header: 'description',
     cell: (info) =>
-      info.row.original.kind === 'ephemeral' ? (
-        <EphemeralIPEmptyCell />
-      ) : (
+      info.row.original.kind === 'floating' ? (
         <DescriptionCell text={info.getValue()} />
+      ) : (
+        <NonFloatingEmptyCell kind={info.row.original.kind} />
       ),
   }),
 ]
@@ -364,18 +387,38 @@ export default function NetworkingTab() {
         },
       }
 
-      const doAction =
-        externalIp.kind === 'floating'
-          ? () =>
-              floatingIpDetach({
-                path: { floatingIp: externalIp.name },
-                query: { project },
-              })
-          : () =>
-              ephemeralIpDetach({
-                path: { instance: instanceName },
-                query: { project },
-              })
+      if (externalIp.kind === 'snat') {
+        return [
+          copyAction,
+          {
+            label: 'Detach',
+            disabled: "SNAT IPs can't be detached",
+            onActivate: () => {},
+          },
+        ]
+      }
+
+      const doDetach = match(externalIp)
+        .with(
+          { kind: 'ephemeral' },
+          () => () =>
+            ephemeralIpDetach({ path: { instance: instanceName }, query: { project } })
+        )
+        .with(
+          { kind: 'floating' },
+          ({ name }) =>
+            () =>
+              floatingIpDetach({ path: { floatingIp: name }, query: { project } })
+        )
+        .exhaustive()
+
+      const label = match(externalIp)
+        .with({ kind: 'ephemeral' }, () => 'this ephemeral IP')
+        .with(
+          { kind: 'floating' },
+          ({ name }) => <>floating IP <HL>{name}</HL></> // prettier-ignore
+        )
+        .exhaustive()
 
       return [
         copyAction,
@@ -384,21 +427,12 @@ export default function NetworkingTab() {
           onActivate: () =>
             confirmAction({
               actionType: 'danger',
-              doAction,
+              doAction: doDetach,
               modalTitle: `Confirm detach ${externalIp.kind} IP`,
               modalContent: (
                 <p>
-                  Are you sure you want to detach{' '}
-                  {match(externalIp)
-                    .with({ kind: P.union('ephemeral', 'snat') }, () => 'this ephemeral IP')
-                    .with({ kind: 'floating' }, ({ name }) => (
-                      <>
-                        floating IP <HL>{name}</HL>
-                      </>
-                    ))
-                    .exhaustive()}{' '}
-                  from <HL>{instanceName}</HL>? The instance will no longer be reachable at{' '}
-                  <HL>{externalIp.ip}</HL>.
+                  Are you sure you want to detach {label} from <HL>{instanceName}</HL>? The
+                  instance will no longer be reachable at <HL>{externalIp.ip}</HL>.
                 </p>
               ),
               errorTitle: `Error detaching ${externalIp.kind} IP`,

mock-api/external-ip.ts

@@ -7,7 +7,7 @@
  */
 import type { ExternalIp } from '@oxide/api'
 
-import { instances } from './instance'
+import { failedInstance, instance, instanceDb2, startingInstance } from './instance'
 import { ipPool1 } from './ip-pool'
 import type { Json } from './json-type'
 
@@ -24,44 +24,88 @@ type DbExternalIp = {
   external_ip: Json<ExternalIp>
 }
 
-// Note that ExternalIp is a union of types representing ephemeral and floating
-// IPs, but we only put the ephemeral ones here. We have a separate table for
-// floating IPs analogous to the floating_ip view in Nexus.
+// Note that ExternalIp is a union of types representing ephemeral, floating, and
+// SNAT IPs, but we only put the ephemeral and SNAT ones here. We have a separate
+// table for floating IPs, analogous to the floating_ip view in Nexus.
 
 // Note that these addresses should come from ranges in ip-pool-1
-
 export const ephemeralIps: DbExternalIp[] = [
   {
-    instance_id: instances[0].id,
+    instance_id: instance.id,
     external_ip: {
       ip: '123.4.56.0',
       ip_pool_id: ipPool1.id,
       kind: 'ephemeral',
     },
   },
-  // middle one has no IPs
+  // failedInstance has no ephemeral IPs
   {
-    instance_id: instances[2].id,
+    instance_id: startingInstance.id,
     external_ip: {
       ip: '123.4.56.1',
       ip_pool_id: ipPool1.id,
       kind: 'ephemeral',
     },
   },
   {
-    instance_id: instances[2].id,
+    instance_id: startingInstance.id,
     external_ip: {
       ip: '123.4.56.2',
       ip_pool_id: ipPool1.id,
       kind: 'ephemeral',
     },
   },
   {
-    instance_id: instances[2].id,
+    instance_id: startingInstance.id,
     external_ip: {
       ip: '123.4.56.3',
       ip_pool_id: ipPool1.id,
       kind: 'ephemeral',
     },
   },
 ]
+
+// Note that SNAT IPs are subdivided into four ranges of ports,
+// with each instance getting a unique range.
+export const snatIps: DbExternalIp[] = [
+  {
+    instance_id: instance.id,
+    external_ip: {
+      ip: '123.4.56.10',
+      ip_pool_id: ipPool1.id,
+      kind: 'snat',
+      first_port: 0,
+      last_port: 16383,
+    },
+  },
+  {
+    instance_id: startingInstance.id,
+    external_ip: {
+      ip: '123.4.56.10',
+      ip_pool_id: ipPool1.id,
+      kind: 'snat',
+      first_port: 16384,
+      last_port: 32767,
+    },
+  },
+  {
+    instance_id: instanceDb2.id,
+    external_ip: {
+      ip: '123.4.56.10',
+      ip_pool_id: ipPool1.id,
+      kind: 'snat',
+      first_port: 32768,
+      last_port: 49151,
+    },
+  },
+  {
+    instance_id: failedInstance.id,
+    external_ip: {
+      ip: '123.4.56.10',
+      ip_pool_id: ipPool1.id,
+      kind: 'snat',
+      first_port: 49152,
+      last_port: 65535,
+    },
+  },
+]

mock-api/instance.ts

@@ -34,7 +34,7 @@ export const instance: Json<Instance> = {
   boot_disk_id: '7f2309a5-13e3-47e0-8a4c-2a3b3bc992fd', // disk-1: needs to be written out here to reduce circular dependencies
 }
 
-const failedInstance: Json<Instance> = {
+export const failedInstance: Json<Instance> = {
   ...base,
   id: 'b5946edc-5bed-4597-88ab-9a8beb9d32a4',
   name: 'you-fail',

mock-api/msw/db.ts

@@ -512,6 +512,7 @@ const initDb = {
   sleds: [...mock.sleds],
   switches: [...mock.switches],
   snapshots: [...mock.snapshots],
+  snatIps: [...mock.snatIps],
   sshKeys: [...mock.sshKeys],
   users: [...mock.users],
   vpcFirewallRules: [...mock.firewallRules],

mock-api/msw/handlers.ts

@@ -752,13 +752,17 @@ export const handlers = makeHandlers({
       .filter((eip) => eip.instance_id === instance.id)
       .map((eip) => eip.external_ip)
 
+    const snatIps = db.snatIps
+      .filter((sip) => sip.instance_id === instance.id)
+      .map((sip) => sip.external_ip)
+
     // floating IPs are missing their `kind` field in the DB so we add it
     const floatingIps = db.floatingIps
       .filter((f) => f.instance_id === instance.id)
       .map((f) => ({ kind: 'floating' as const, ...f }))
 
     // endpoint is not paginated. or rather, it's fake paginated
-    return { items: [...ephemeralIps, ...floatingIps] }
+    return { items: [...ephemeralIps, ...snatIps, ...floatingIps] }
   },
   instanceNetworkInterfaceList({ query }) {
     const instance = lookup.instance(query)
@@ -868,11 +872,12 @@ export const handlers = makeHandlers({
       (r) => parseIp(r.first).type === 'v4'
     )
 
-    // in the real backend there are also SNAT IPs, but we don't currently
-    // represent those because they are not exposed through the API (except
-    // through the counts)
+    // Include SNAT IPs in IP utilization calculation, deduplicating by IP address
+    // since multiple instances can share the same SNAT IP with different port ranges
+    const uniqueSnatIps = [...new Set(db.snatIps.map((sip) => sip.external_ip.ip))]
     const allIps = [
       ...db.ephemeralIps.map((eip) => eip.external_ip.ip),
+      ...uniqueSnatIps,
       ...db.floatingIps.map((fip) => fip.ip),
     ]
 

test/e2e/instance-networking.e2e.ts

@@ -143,9 +143,14 @@ test('Instance networking tab — floating IPs', async ({ page }) => {
   // See list of external IPs
   await expectRowVisible(externalIpTable, { ip: '123.4.56.0', Kind: 'ephemeral' })
   await expectRowVisible(externalIpTable, { ip: '123.4.56.5', Kind: 'floating' })
+  await expectRowVisible(externalIpTable, { ip: '123.4.56.100–16383', Kind: 'snat' })
 
   await expect(page.getByText('external IPs123.4.56.5/123.4.56.0')).toBeVisible()
 
+  // The list of IPs at the top of the page should not show the SNAT IP
+  await expect(page.getByText('external IPs123.4.56.5/123.4.56.0')).toBeVisible()
+  await expect(page.getByText('external IPs123.4.56.5/123.4.56.0/')).toBeHidden()
+
   // Attach a new external IP
   await attachFloatingIpButton.click()
   await expectVisible(page, ['role=heading[name="Attach floating IP"]'])
@@ -183,6 +188,25 @@ test('Instance networking tab — floating IPs', async ({ page }) => {
   await expect(attachFloatingIpButton).toBeEnabled()
 })
 
+test('Instance networking tab — SNAT IPs', async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1/networking')
+  const externalIpTable = page.getByRole('table', { name: 'External IPs' })
+  const snatRow = externalIpTable.locator('tr').filter({ hasText: 'snat' })
+  await expect(snatRow).toBeVisible()
+
+  // expect the SNAT IP to have a port range badge
+  await expect(snatRow).toContainText('0–16383')
+
+  const actionsButton = snatRow.getByRole('button', { name: 'Row actions' })
+  await actionsButton.click()
+
+  // Should have "Copy IP address" action, just for consistency with other IP rows
+  await expect(page.getByRole('menuitem', { name: 'Copy IP address' })).toBeVisible()
+
+  // Should have a disabled "Detach" action
+  await expect(page.getByRole('menuitem', { name: 'Detach' })).toBeDisabled()
+})
+
 test('Edit network interface - Transit IPs', async ({ page }) => {
   await page.goto('/projects/mock-project/instances/db1/networking')