Add floating ips to instance create (#2252)

charliepark · david-crespo · web-flow · commit c9f2bba3b58d · 2024-05-24T20:34:12.000-05:00
* Add step to attach floating IPs to instance creation form * Slight refactoring of const names * Smoother handling of unchecking Floating IP box * Add noItemsPlaceholder to Listbox * add type guard to clean up code * Remove checkbox; button-only to open modal * only show message when IPs are available to attach * Simplify floating IP label, sans-pool * revert removal of api call * Add header to new file * Merge main; disable modal trigger button if no floating IPs available * Add empty state for when no floatingIPs exist * Update app/forms/instance-create.tsx Co-authored-by: David Crespo <david-crespo@users.noreply.github.com> * Refactor deeply-nested JSX * Extract FloatingIpLabel, update TipIcon copy * Extract Listbox labels * Revert "Extract Listbox labels" This reverts commit 59b27d1. * Refactor to use useState instead of weird form entry for state management * small refactor on onAction * another small refactor * refactor to use FloatingIp in useState, rather than a string * simplify and future-proof logic Co-authored-by: David Crespo <david-crespo@users.noreply.github.com> * Add test for attaching a floating IP to instance * include assertion regarding IP address in modal message * Add test for empty floating IPs state * Update mock serviceworker to attach IPs to instance; update tests * Move ipFromPool to util function * refactor * fix the button! * use RemoveCell in floating IPs MiniTable * Add test to remove row from form --------- Co-authored-by: David Crespo <david-crespo@users.noreply.github.com> Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx
@@ -11,6 +11,7 @@ import type { Image } from '@oxide/api'
 
 import type { InstanceCreateInput } from '~/forms/instance-create'
 import type { ListboxItem } from '~/ui/lib/Listbox'
+import { Slash } from '~/ui/lib/Slash'
 import { nearest10 } from '~/util/math'
 import { bytesToGiB, GiB } from '~/util/units'
 
@@ -50,10 +51,6 @@ export function BootDiskImageSelectField({
   )
 }
 
-const Slash = () => (
-  <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
-)
-
 export function toListboxItem(i: Image, includeProjectSiloIndicator = false): ListboxItem {
   const { name, os, projectId, size, version } = i
   const formattedSize = `${bytesToGiB(size, 1)} GiB`
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
@@ -34,6 +34,7 @@ import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Radio } from '~/ui/lib/Radio'
 import { RadioGroup } from '~/ui/lib/RadioGroup'
+import { Slash } from '~/ui/lib/Slash'
 import { toLocaleDateString } from '~/util/date'
 import { bytesToGiB, GiB } from '~/util/units'
 
@@ -259,9 +260,8 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
               <div>{i.name}</div>
               <div className="text-tertiary selected:text-accent-secondary">
                 Created on {toLocaleDateString(i.timeCreated)}
-                <DiskNameFromId disk={i.diskId} />{' '}
-                <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>{' '}
-                {formattedSize.value} {formattedSize.unit}
+                <DiskNameFromId disk={i.diskId} /> <Slash /> {formattedSize.value}{' '}
+                {formattedSize.unit}
               </div>
             </>
           ),
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
@@ -20,13 +20,17 @@ import {
   useApiMutation,
   useApiQueryClient,
   usePrefetchedApiQuery,
+  type ExternalIpCreate,
+  type FloatingIp,
   type InstanceCreate,
   type InstanceDiskAttachment,
+  type NameOrId,
 } from '@oxide/api'
 import {
   Images16Icon,
   Instances16Icon,
   Instances24Icon,
+  IpGlobal16Icon,
   Storage16Icon,
 } from '@oxide/design-system/icons/react'
 
@@ -50,19 +54,25 @@ import { SshKeysField } from '~/components/form/fields/SshKeysField'
 import { TextField } from '~/components/form/fields/TextField'
 import { Form } from '~/components/form/Form'
 import { FullPageForm } from '~/components/form/FullPageForm'
+import { HL } from '~/components/HL'
 import { getProjectSelector, useForm, useProjectSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { Badge } from '~/ui/lib/Badge'
+import { Button } from '~/ui/lib/Button'
 import { Checkbox } from '~/ui/lib/Checkbox'
 import { FormDivider } from '~/ui/lib/Divider'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
+import * as MiniTable from '~/ui/lib/MiniTable'
+import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { RadioCard } from '~/ui/lib/Radio'
+import { Slash } from '~/ui/lib/Slash'
 import { Tabs } from '~/ui/lib/Tabs'
 import { TextInputHint } from '~/ui/lib/TextInput'
 import { TipIcon } from '~/ui/lib/TipIcon'
+import { isTruthy } from '~/util/array'
 import { readBlobAsBase64 } from '~/util/file'
 import { docLinks, links } from '~/util/links'
 import { nearest10 } from '~/util/math'
@@ -153,6 +163,7 @@ CreateInstanceForm.loader = async ({ params }: LoaderFunctionArgs) => {
     }),
     apiQueryClient.prefetchQuery('currentUserSshKeyList', {}),
     apiQueryClient.prefetchQuery('projectIpPoolList', { query: { limit: 1000 } }),
+    apiQueryClient.prefetchQuery('floatingIpList', { query: { project, limit: 1000 } }),
   ])
   return null
 }
@@ -573,6 +584,28 @@ export function CreateInstanceForm() {
   )
 }
 
+// `ip is …` guard is necessary until we upgrade to 5.5, which handles this automatically
+const isFloating = (
+  ip: ExternalIpCreate
+): ip is { type: 'floating'; floatingIp: NameOrId } => ip.type === 'floating'
+
+const FloatingIpLabel = ({ ip }: { ip: FloatingIp }) => (
+  <div>
+    <div>{ip.name}</div>
+    <div className="flex gap-0.5 text-tertiary selected:text-accent-secondary">
+      <div>{ip.ip}</div>
+      {ip.description && (
+        <>
+          <Slash />
+          <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            {ip.description}
+          </div>
+        </>
+      )}
+    </div>
+  </div>
+)
+
 const AdvancedAccordion = ({
   control,
   isSubmitting,
@@ -586,11 +619,65 @@ const AdvancedAccordion = ({
   // tell, inside AccordionItem, when an accordion is opened so we can scroll its
   // contents into view
   const [openItems, setOpenItems] = useState<string[]>([])
+  const [floatingIpModalOpen, setFloatingIpModalOpen] = useState(false)
+  const [selectedFloatingIp, setSelectedFloatingIp] = useState<FloatingIp | undefined>()
   const externalIps = useController({ control, name: 'externalIps' })
   const ephemeralIp = externalIps.field.value?.find((ip) => ip.type === 'ephemeral')
   const assignEphemeralIp = !!ephemeralIp
   const selectedPool = ephemeralIp && 'pool' in ephemeralIp ? ephemeralIp.pool : undefined
   const defaultPool = siloPools.find((pool) => pool.isDefault)?.name
+  const attachedFloatingIps = (externalIps.field.value || []).filter(isFloating)
+
+  const { project } = useProjectSelector()
+  const { data: floatingIpList } = usePrefetchedApiQuery('floatingIpList', {
+    query: { project, limit: 1000 },
+  })
+
+  // Filter out the IPs that are already attached to an instance
+  const attachableFloatingIps = useMemo(
+    () => floatingIpList.items.filter((ip) => !ip.instanceId),
+    [floatingIpList]
+  )
+
+  // To find available floating IPs, we remove the ones that are already committed to this instance
+  const availableFloatingIps = attachableFloatingIps.filter(
+    (ip) => !attachedFloatingIps.find((attachedIp) => attachedIp.floatingIp === ip.name)
+  )
+  const attachedFloatingIpsData = attachedFloatingIps
+    .map((ip) => attachableFloatingIps.find((fip) => fip.name === ip.floatingIp))
+    .filter(isTruthy)
+
+  const closeFloatingIpModal = () => {
+    setFloatingIpModalOpen(false)
+    setSelectedFloatingIp(undefined)
+  }
+
+  const attachFloatingIp = () => {
+    if (selectedFloatingIp) {
+      externalIps.field.onChange([
+        ...(externalIps.field.value || []),
+        { type: 'floating', floatingIp: selectedFloatingIp.name },
+      ])
+    }
+    closeFloatingIpModal()
+  }
+
+  const detachFloatingIp = (name: string) => {
+    externalIps.field.onChange(
+      externalIps.field.value?.filter(
+        (ip) => !(ip.type === 'floating' && ip.floatingIp === name)
+      )
+    )
+  }
+
+  const isFloatingIpAttached = attachedFloatingIps.some((ip) => ip.floatingIp !== '')
+
+  const selectedFloatingIpMessage = (
+    <>
+      This instance will be reachable at{' '}
+      {selectedFloatingIp ? <HL>{selectedFloatingIp.ip}</HL> : 'the selected IP'}
+    </>
+  )
 
   return (
     <Accordion.Root
@@ -669,6 +756,101 @@ const AdvancedAccordion = ({
             />
           )}
         </div>
+
+        <div className="flex flex-1 flex-col gap-4">
+          <h2 className="text-sans-md">
+            Floating IPs{' '}
+            <TipIcon>
+              Floating IPs exist independently of instances and can be attached to and
+              detached from them as needed.
+            </TipIcon>
+          </h2>
+          {isFloatingIpAttached && (
+            <MiniTable.Table>
+              <MiniTable.Header>
+                <MiniTable.HeadCell>Name</MiniTable.HeadCell>
+                <MiniTable.HeadCell>IP</MiniTable.HeadCell>
+                {/* For remove button */}
+                <MiniTable.HeadCell className="w-12" />
+              </MiniTable.Header>
+              <MiniTable.Body>
+                {attachedFloatingIpsData.map((item, index) => (
+                  <MiniTable.Row
+                    tabIndex={0}
+                    aria-rowindex={index + 1}
+                    aria-label={`Name: ${item.name}, IP: ${item.ip}`}
+                    key={item.name}
+                  >
+                    <MiniTable.Cell>{item.name}</MiniTable.Cell>
+                    <MiniTable.Cell>{item.ip}</MiniTable.Cell>
+                    <MiniTable.RemoveCell
+                      onClick={() => detachFloatingIp(item.name)}
+                      label={`remove floating IP ${item.name}`}
+                    />
+                  </MiniTable.Row>
+                ))}
+              </MiniTable.Body>
+            </MiniTable.Table>
+          )}
+          {floatingIpList.items.length === 0 ? (
+            <div className="flex max-w-lg items-center justify-center rounded-lg border p-6 border-default">
+              <EmptyMessage
+                icon={<IpGlobal16Icon />}
+                title="No floating IPs found"
+                body="Create a floating IP to attach it to this instance"
+              />
+            </div>
+          ) : (
+            <div>
+              <Button
+                size="sm"
+                className="shrink-0"
+                disabled={availableFloatingIps.length === 0}
+                disabledReason="No floating IPs available"
+                onClick={() => setFloatingIpModalOpen(true)}
+              >
+                Attach floating IP
+              </Button>
+            </div>
+          )}
+
+          <Modal
+            isOpen={floatingIpModalOpen}
+            onDismiss={closeFloatingIpModal}
+            title="Attach floating IP"
+          >
+            <Modal.Body>
+              <Modal.Section>
+                <Message variant="info" content={selectedFloatingIpMessage} />
+                <form>
+                  <Listbox
+                    name="floatingIp"
+                    items={availableFloatingIps.map((i) => ({
+                      value: i.name,
+                      label: <FloatingIpLabel ip={i} />,
+                      selectedLabel: `${i.name} (${i.ip})`,
+                    }))}
+                    label="Floating IP"
+                    onChange={(name) => {
+                      setSelectedFloatingIp(
+                        availableFloatingIps.find((i) => i.name === name)
+                      )
+                    }}
+                    required
+                    placeholder="Select floating IP"
+                    selected={selectedFloatingIp?.name || ''}
+                  />
+                </form>
+              </Modal.Section>
+            </Modal.Body>
+            <Modal.Footer
+              actionText="Attach"
+              disabled={!selectedFloatingIp}
+              onAction={attachFloatingIp}
+              onDismiss={closeFloatingIpModal}
+            ></Modal.Footer>
+          </Modal>
+        </div>
       </AccordionItem>
       <AccordionItem
         value="configuration"
diff --git a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
@@ -13,6 +13,7 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
+import { Slash } from '~/ui/lib/Slash'
 
 function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
   return (
@@ -22,7 +23,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         <div>{fip.ip}</div>
         {fip.description && (
           <>
-            <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
+            <Slash />
             <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
               {fip.description}
             </div>
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
@@ -32,6 +32,7 @@ export interface ListboxProps<Value extends string = string> {
   onChange: (value: Value) => void
   items: ListboxItem<Value>[]
   placeholder?: string
+  noItemsPlaceholder?: string
   className?: string
   disabled?: boolean
   hasError?: boolean
@@ -48,6 +49,7 @@ export const Listbox = <Value extends string = string>({
   selected,
   items,
   placeholder = 'Select an option',
+  noItemsPlaceholder = 'No items',
   className,
   onChange,
   hasError = false,
@@ -107,7 +109,7 @@ export const Listbox = <Value extends string = string>({
                   selectedItem.selectedLabel || selectedItem.label
                 ) : (
                   <span className="text-quaternary">
-                    {noItems ? 'No items' : placeholder}
+                    {noItems ? noItemsPlaceholder : placeholder}
                   </span>
                 )}
               </div>
diff --git a/app/ui/lib/Slash.tsx b/app/ui/lib/Slash.tsx
@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+export const Slash = () => (
+  <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
+)
diff --git a/mock-api/msw/db.ts b/mock-api/msw/db.ts
@@ -37,6 +37,18 @@ export const lookupById = <T extends { id: string }>(table: T[], id: string) =>
   return item
 }
 
+export const getIpFromPool = (poolName: string | undefined) => {
+  const pool = lookup.ipPool({ pool: poolName })
+  const ipPoolRange = db.ipPoolRanges.find((range) => range.ip_pool_id === pool.id)
+  if (!ipPoolRange) throw notFoundErr
+
+  // right now, we're just using the first address in the range, but we'll
+  // want to filter the list of available IPs for the first unused address
+  // also: think through how calling code might want to handle various issues
+  // and what appropriate error codes would be: no ranges? pool is exhausted? etc.
+  return ipPoolRange.range.first
+}
+
 export const lookup = {
   project({ project: id }: PP.Project): Json<Api.Project> {
     if (!id) throw notFoundErr
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
