Add VPC and instance external IP to instance page (#1882)

benjaminleonard · david-crespo · web-flow · commit 644a45b8e4ab · 2024-01-17T16:30:37.000-06:00
* Add VPC and instance external IP to instance page * Use slash as divider * Adds copy button on instance external IP (#1885) * Update copy to clipboard component Uses new icon and snazzy animation * Add copy to clipboard to external IP * `CopyOnTruncate` component * Add description to `CopyOnTruncate` * Revert "Add description to `CopyOnTruncate`" This reverts commit 4bf0bcc. * Revert "`CopyOnTruncate` component" This reverts commit e4a0107. * basic externalIps table. every instance still has the same IP though * make external IPs legit * add file license * fix fallback logic around no IPs * skeleton cell component * Give properties row a fixed height * `EmptyCellContent` component instead of `&mdash;` directly * extract ExternalIps component that doesn't know about primary * put https on IP link * remove external IP column from nics table, add asserts to e2e test * put prefetches in Promise.all * sneaky prefetch on VPC name * share primary VPC ID logic --------- Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx
@@ -0,0 +1,50 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { useApiQuery } from '@oxide/api'
+import { EmptyCell, SkeletonCell } from '@oxide/table'
+import { CopyToClipboard } from '@oxide/ui'
+import { intersperse } from '@oxide/util'
+
+type InstanceSelector = { project: string; instance: string }
+
+export function ExternalIps({ project, instance }: InstanceSelector) {
+  const { data, isPending } = useApiQuery('instanceExternalIpList', {
+    path: { instance },
+    query: { project },
+  })
+  if (isPending) return <SkeletonCell />
+
+  const ips = data?.items
+    ? intersperse(
+        data.items.map((eip) => <IpLink ip={eip.ip} key={eip.ip} />),
+        <span className="text-quinary"> / </span>
+      )
+    : undefined
+
+  return (
+    <div className="flex items-center gap-1 text-secondary">
+      {ips && ips.length > 0 ? ips : <EmptyCell />}
+      {/* If there's exactly one IP here, render a copy to clipboard button */}
+      {data?.items.length === 1 && <CopyToClipboard text={data.items[0].ip} />}
+    </div>
+  )
+}
+
+function IpLink({ ip }: { ip: string }) {
+  return (
+    <a
+      className="underline text-sans-semi-md text-secondary hover:text-default"
+      href={`https://${ip}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {ip}
+    </a>
+  )
+}
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
@@ -10,7 +10,13 @@ import filesize from 'filesize'
 import { useMemo } from 'react'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import { apiQueryClient, useApiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
+import {
+  apiQueryClient,
+  useApiQueryClient,
+  usePrefetchedApiQuery,
+  type InstanceNetworkInterface,
+} from '@oxide/api'
+import { EmptyCell } from '@oxide/table'
 import {
   Instances24Icon,
   PageHeader,
@@ -19,20 +25,52 @@ import {
   Truncate,
 } from '@oxide/ui'
 
+import { ExternalIps } from 'app/components/ExternalIps'
 import { MoreActionsMenu } from 'app/components/MoreActionsMenu'
 import { RouteTabs, Tab } from 'app/components/RouteTabs'
 import { InstanceStatusBadge } from 'app/components/StatusBadge'
 import { getInstanceSelector, useInstanceSelector, useQuickActions } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 import { useMakeInstanceActions } from '../actions'
+import { VpcNameFromId } from './tabs/NetworkingTab'
+
+function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
+  const nic = nics.find((nic) => nic.primary)
+  return nic ? nic.vpcId : undefined
+}
 
 InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, instance } = getInstanceSelector(params)
-  await apiQueryClient.prefetchQuery('instanceView', {
-    path: { instance },
-    query: { project },
-  })
+  await Promise.all([
+    apiQueryClient.prefetchQuery('instanceView', {
+      path: { instance },
+      query: { project },
+    }),
+    apiQueryClient.prefetchQuery('instanceExternalIpList', {
+      path: { instance },
+      query: { project },
+    }),
+    // The VPC fetch here ensures that the VPC shows up at pageload time without
+    // a loading state. This is an unusual prefetch in that
+    //
+    //   a) one call depends on the result of another, so they are in sequence
+    //   b) the corresponding render-time query is not right next to the loader
+    //      (which is what we usually prefer) but inside VpcNameFromId
+    //
+    // Using .then() like this instead of doing the NICs call before the
+    // entire Promise.all() means this whole *pair* of requests can happen in
+    // parallel with the other two instead of only the second one.
+    apiQueryClient
+      .fetchQuery('instanceNetworkInterfaceList', {
+        query: { project, instance },
+      })
+      .then((nics) => {
+        const vpc = getPrimaryVpcId(nics.items)
+        if (!vpc) return Promise.resolve()
+        return apiQueryClient.prefetchQuery('vpcView', { path: { vpc } })
+      }),
+  ])
   return null
 }
 
@@ -54,6 +92,14 @@ export function InstancePage() {
     query: { project: instanceSelector.project },
   })
 
+  const { data: nics } = usePrefetchedApiQuery('instanceNetworkInterfaceList', {
+    query: {
+      project: instanceSelector.project,
+      instance: instanceSelector.instance,
+    },
+  })
+  const primaryVpcId = getPrimaryVpcId(nics.items)
+
   const actions = useMemo(
     () => [
       {
@@ -100,16 +146,18 @@ export function InstancePage() {
           <PropertiesTable.Row label="status">
             <InstanceStatusBadge status={instance.runState} />
           </PropertiesTable.Row>
+          <PropertiesTable.Row label="vpc">
+            <span className="text-secondary">
+              {primaryVpcId ? VpcNameFromId({ value: primaryVpcId }) : <EmptyCell />}
+            </span>
+          </PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
           <PropertiesTable.Row label="description">
             <span className="text-secondary">
               <Truncate text={instance.description} maxLength={40} />
             </span>
           </PropertiesTable.Row>
-          {/* <PropertiesTable.Row label="dns name">
-            <span className="text-secondary">{instance.hostname || '–'}</span>
-          </PropertiesTable.Row> */}
           <PropertiesTable.Row label="created">
             <span className="text-secondary">
               {format(instance.timeCreated, 'MMM d, yyyy')}{' '}
@@ -123,6 +171,9 @@ export function InstancePage() {
               {instance.id}
             </span>
           </PropertiesTable.Row>
+          <PropertiesTable.Row label="external IP">
+            {<ExternalIps {...instanceSelector} />}
+          </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>
       <RouteTabs fullWidth>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -26,6 +26,7 @@ import {
   Spinner,
   Success12Icon,
 } from '@oxide/ui'
+import { classed } from '@oxide/util'
 
 import CreateNetworkInterfaceForm from 'app/forms/network-interface-create'
 import EditNetworkInterfaceForm from 'app/forms/network-interface-edit'
@@ -40,7 +41,9 @@ import { pb } from 'app/util/path-builder'
 
 import { fancifyStates } from './common'
 
-const VpcNameFromId = ({ value }: { value: string }) => {
+export const Skeleton = classed.div`h-4 w-12 rounded bg-tertiary motion-safe:animate-pulse`
+
+export const VpcNameFromId = ({ value }: { value: string }) => {
   const projectSelector = useProjectSelector()
   const { data: vpc, isError } = useApiQuery(
     'vpcView',
@@ -52,10 +55,10 @@ const VpcNameFromId = ({ value }: { value: string }) => {
   // possible because you can't delete a VPC that has child resources, but let's
   // be safe
   if (isError) return <Badge color="neutral">Deleted</Badge>
-  if (!vpc) return <Spinner /> // loading
+  if (!vpc) return <Skeleton />
   return (
     <Link
-      className="text-sans-semi-md text-default hover:underline"
+      className="underline text-sans-semi-md text-secondary hover:text-default"
       to={pb.vpc({ ...projectSelector, vpc: vpc.name })}
     >
       {vpc.name}
@@ -77,16 +80,6 @@ const SubnetNameFromId = ({ value }: { value: string }) => {
   return <span className="text-secondary">{subnet.name}</span>
 }
 
-function ExternalIpsFromInstanceName({ value: primary }: { value: boolean }) {
-  const { project, instance } = useInstanceSelector()
-  const { data } = useApiQuery('instanceExternalIpList', {
-    path: { instance },
-    query: { project },
-  })
-  const ips = data?.items.map((eip) => eip.ip).join(', ')
-  return <span className="text-secondary">{primary ? ips : <>&mdash;</>}</span>
-}
-
 NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, instance } = getInstanceSelector(params)
   await Promise.all([
@@ -202,15 +195,7 @@ export function NetworkingTab() {
       <Table labeled-by="nic-label" makeActions={makeActions} emptyState={emptyState}>
         <Column accessor="name" />
         <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"
-          id="external_ip"
-          cell={ExternalIpsFromInstanceName}
-        />
         <Column header="vpc" accessor="vpcId" cell={VpcNameFromId} />
         <Column header="subnet" accessor="subnetId" cell={SubnetNameFromId} />
         <Column
diff --git a/app/pages/system/SiloPage.tsx b/app/pages/system/SiloPage.tsx
@@ -8,7 +8,14 @@
 import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import { DateCell, DefaultCell, linkCell, TruncateCell, useQueryTable } from '@oxide/table'
+import {
+  DateCell,
+  DefaultCell,
+  EmptyCell,
+  linkCell,
+  TruncateCell,
+  useQueryTable,
+} from '@oxide/table'
 import {
   Badge,
   buttonStyle,
@@ -73,7 +80,7 @@ export function SiloPage() {
         Fleet role mapping <RoleMappingTooltip />
       </h2>
       {roleMapPairs.length === 0 ? (
-        <p className="text-secondary">&mdash;</p>
+        <EmptyCell />
       ) : (
         <ul className="space-y-3">
           {roleMapPairs.map(([siloRole, fleetRole]) => (
diff --git a/app/test/e2e/instance/networking.e2e.ts b/app/test/e2e/instance/networking.e2e.ts
@@ -12,6 +12,10 @@ import { expectNotVisible, expectRowVisible, expectVisible, stopInstance } from
 test('Instance networking tab', async ({ page }) => {
   await page.goto('/projects/mock-project/instances/db1')
 
+  // links to VPC and external IPs appear in table
+  await expect(page.getByRole('link', { name: 'mock-vpc' })).toBeVisible()
+  await expect(page.getByRole('link', { name: '123.4.56.0' })).toBeVisible()
+
   // Instance networking tab
   await page.click('role=tab[name="Network Interfaces"]')
 
diff --git a/libs/api-mocks/external-ip.ts b/libs/api-mocks/external-ip.ts
@@ -0,0 +1,50 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import type { ExternalIp } from '@oxide/api'
+
+import { instances } from './instance'
+import type { Json } from './json-type'
+
+type DbExternalIp = {
+  instance_id: string
+  external_ip: Json<ExternalIp>
+}
+
+// TODO: this type represents the API response, but we need to mock more
+// structure in order to be able to look up IPs for a particular instance
+export const externalIps: DbExternalIp[] = [
+  {
+    instance_id: instances[0].id,
+    external_ip: {
+      ip: `123.4.56.0`,
+      kind: 'ephemeral',
+    },
+  },
+  // middle one has no IPs
+  {
+    instance_id: instances[2].id,
+    external_ip: {
+      ip: `123.4.56.1`,
+      kind: 'ephemeral',
+    },
+  },
+  {
+    instance_id: instances[2].id,
+    external_ip: {
+      ip: `123.4.56.2`,
+      kind: 'ephemeral',
+    },
+  },
+  {
+    instance_id: instances[2].id,
+    external_ip: {
+      ip: `123.4.56.3`,
+      kind: 'ephemeral',
+    },
+  },
+]
diff --git a/libs/api-mocks/index.ts b/libs/api-mocks/index.ts
@@ -7,6 +7,7 @@
  */
 
 export * from './disk'
+export * from './external-ip'
 export * from './image'
 export * from './instance'
 export * from './ip-pool'
diff --git a/libs/api-mocks/msw/db.ts b/libs/api-mocks/msw/db.ts
@@ -224,6 +224,7 @@ const initDb = {
   /** Join table for `users` and `userGroups` */
   groupMemberships: [...mock.groupMemberships],
   images: [...mock.images],
+  externalIps: [...mock.externalIps],
   instances: [...mock.instances],
   ipPools: [...mock.ipPools],
   ipPoolSilos: [...mock.ipPoolSilos],
diff --git a/libs/api-mocks/msw/handlers.ts b/libs/api-mocks/msw/handlers.ts
@@ -444,17 +444,12 @@ export const handlers = makeHandlers({
     return disk
   },
   instanceExternalIpList({ path, query }) {
-    lookup.instance({ ...path, ...query })
-
-    // TODO: proper mock table
-    return {
-      items: [
-        {
-          ip: '123.4.56.7',
-          kind: 'ephemeral',
-        } as const,
-      ],
-    }
+    const instance = lookup.instance({ ...path, ...query })
+    const externalIps = db.externalIps
+      .filter((eip) => eip.instance_id === instance.id)
+      .map((eip) => eip.external_ip)
+    // endpoint is not paginated. or rather, it's fake paginated
+    return { items: externalIps }
   },
   instanceNetworkInterfaceList({ query }) {
     const instance = lookup.instance(query)
diff --git a/libs/table/cells/EmptyCell.tsx b/libs/table/cells/EmptyCell.tsx
@@ -0,0 +1,13 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { classed } from '@oxide/util'
+
+export const EmptyCell = () => <span className="text-sans-md text-quinary">&mdash;</span>
+
+export const SkeletonCell = classed.div`h-4 w-12 rounded bg-tertiary motion-safe:animate-pulse`
diff --git a/libs/table/cells/index.ts b/libs/table/cells/index.ts
@@ -11,6 +11,7 @@ export * from './Cell'
 export * from './DateCell'
 export * from './DefaultCell'
 export * from './EnabledCell'
+export * from './EmptyCell'
 export * from './FirewallFilterCell'
 export * from './InstanceResourceCell'
 export * from './InstanceStatusCell'
diff --git a/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx b/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx
diff --git a/libs/ui/lib/properties-table/PropertiesTable.tsx b/libs/ui/lib/properties-table/PropertiesTable.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
