Create Floating IPs and attach them to instances

app/components/AccordionItem.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 * as Accordion from '@radix-ui/react-accordion'
+import cn from 'classnames'
+import { useEffect, useRef } from 'react'
+
+import { DirectionRightIcon } from '@oxide/design-system/icons/react'
+
+type AccordionItemProps = {
+  children: React.ReactNode
+  isOpen: boolean
+  label: string
+  value: string
+}
+
+export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemProps) => {
+  const contentRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      contentRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [isOpen])
+
+  return (
+    <Accordion.Item value={value}>
+      <Accordion.Header className="max-w-lg">
+        <Accordion.Trigger className="group flex w-full items-center justify-between border-t pt-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
+          <div className="text-secondary">{label}</div>
+          <DirectionRightIcon className="transition-all text-secondary" />
+        </Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content
+        ref={contentRef}
+        forceMount
+        className={cn('ox-accordion-content overflow-hidden py-8', { hidden: !isOpen })}
+      >
+        {children}
+      </Accordion.Content>
+    </Accordion.Item>
+  )
+}

app/forms/floating-ip-create.tsx

@@ -0,0 +1,147 @@
+/*
+ * 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 * as Accordion from '@radix-ui/react-accordion'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import type { SetRequired } from 'type-fest'
+
+import {
+  apiQueryClient,
+  useApiMutation,
+  useApiQueryClient,
+  usePrefetchedApiQuery,
+  type FloatingIpCreate,
+  type SiloIpPool,
+} from '@oxide/api'
+import { Badge, Message } from '@oxide/ui'
+import { validateIp } from '@oxide/util'
+
+import { AccordionItem } from 'app/components/AccordionItem'
+import {
+  DescriptionField,
+  ListboxField,
+  NameField,
+  SideModalForm,
+  TextField,
+} from 'app/components/form'
+import { useForm, useProjectSelector, useToast } from 'app/hooks'
+import { pb } from 'app/util/path-builder'
+
+CreateFloatingIpSideModalForm.loader = async () => {
+  await apiQueryClient.prefetchQuery('projectIpPoolList', {
+    query: { limit: 1000 },
+  })
+  return null
+}
+
+const toListboxItem = (p: SiloIpPool) => {
+  if (!p.isDefault) {
+    return { value: p.name, label: p.name }
+  }
+  // For the default pool, add a label to the dropdown
+  return {
+    value: p.name,
+    labelString: p.name,
+    label: (
+      <>
+        {p.name}{' '}
+        <Badge className="ml-1" color="neutral">
+          default
+        </Badge>
+      </>
+    ),
+  }
+}
+
+const defaultValues: SetRequired<FloatingIpCreate, 'address'> = {
+  name: '',
+  description: '',
+  pool: undefined,
+  address: '',
+}
+
+export function CreateFloatingIpSideModalForm() {
+  // Fetch 1000 to we can be sure to get them all.
+  const { data: allPools } = usePrefetchedApiQuery('projectIpPoolList', {
+    query: { limit: 1000 },
+  })
+
+  const queryClient = useApiQueryClient()
+  const projectSelector = useProjectSelector()
+  const addToast = useToast()
+  const navigate = useNavigate()
+
+  const createFloatingIp = useApiMutation('floatingIpCreate', {
+    onSuccess() {
+      queryClient.invalidateQueries('floatingIpList')
+      addToast({ content: 'Your Floating IP has been created' })
+      navigate(pb.floatingIps(projectSelector))
+    },
+  })
+
+  const form = useForm({ defaultValues })
+  const isPoolSelected = !!form.watch('pool')
+
+  const [openItems, setOpenItems] = useState<string[]>([])
+
+  return (
+    <SideModalForm
+      id="create-floating-ip-form"
+      title="Create Floating IP"
+      form={form}
+      onDismiss={() => navigate(pb.floatingIps(projectSelector))}
+      onSubmit={({ address, ...rest }) => {
+        createFloatingIp.mutate({
+          query: projectSelector,
+          // if address is '', evaluate as false and send as undefined
+          body: { address: address || undefined, ...rest },
+        })
+      }}
+      loading={createFloatingIp.isPending}
+      submitError={createFloatingIp.error}
+    >
+      <NameField name="name" control={form.control} />
+      <DescriptionField name="description" control={form.control} />
+
+      <Accordion.Root
+        type="multiple"
+        className="mt-12 max-w-lg"
+        value={openItems}
+        onValueChange={setOpenItems}
+      >
+        <AccordionItem
+          isOpen={openItems.includes('advanced')}
+          label="Advanced"
+          value="advanced"
+        >
+          <Message
+            variant="info"
+            content="If you don’t specify a pool, the default will be used"
+          />
+
+          <ListboxField
+            name="pool"
+            items={allPools.items.map((p) => toListboxItem(p))}
+            label="IP pool"
+            control={form.control}
+            placeholder="Select pool"
+          />
+          <TextField
+            name="address"
+            control={form.control}
+            disabled={!isPoolSelected}
+            transform={(v) => v.replace(/\s/g, '')}
+            validate={(ip) =>
+              ip && !validateIp(ip).valid ? 'Not a valid IP address' : true
+            }
+          />
+        </AccordionItem>
+      </Accordion.Root>
+    </SideModalForm>
+  )
+}

app/forms/instance-create.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import * as Accordion from '@radix-ui/react-accordion'
-import cn from 'classnames'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useWatch, type Control } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 import type { SetRequired } from 'type-fest'
@@ -23,7 +22,6 @@ import {
   type InstanceCreate,
 } from '@oxide/api'
 import {
-  DirectionRightIcon,
   EmptyMessage,
   FormDivider,
   Images16Icon,
@@ -35,6 +33,7 @@ import {
 } from '@oxide/ui'
 import { GiB, invariant } from '@oxide/util'
 
+import { AccordionItem } from 'app/components/AccordionItem'
 import {
   CheckboxField,
   DescriptionField,
@@ -487,41 +486,6 @@ const AdvancedAccordion = ({
   )
 }
 
-type AccordionItemProps = {
-  value: string
-  isOpen: boolean
-  label: string
-  children: React.ReactNode
-}
-
-function AccordionItem({ value, label, children, isOpen }: AccordionItemProps) {
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (isOpen && contentRef.current) {
-      contentRef.current.scrollIntoView({ behavior: 'smooth' })
-    }
-  }, [isOpen])
-
-  return (
-    <Accordion.Item value={value}>
-      <Accordion.Header className="max-w-lg">
-        <Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
-          <div className="text-secondary">{label}</div>
-          <DirectionRightIcon className="transition-all text-secondary" />
-        </Accordion.Trigger>
-      </Accordion.Header>
-      <Accordion.Content
-        ref={contentRef}
-        forceMount
-        className={cn('ox-accordion-content overflow-hidden py-8', { hidden: !isOpen })}
-      >
-        {children}
-      </Accordion.Content>
-    </Accordion.Item>
-  )
-}
-
 const renderLargeRadioCards = (category: string) => {
   return PRESETS.filter((option) => option.category === category).map((option) => (
     <RadioCard key={option.id} value={option.id}>

app/hooks/use-params.ts

@@ -33,6 +33,7 @@ export const requireParams =
   }
 
 export const getProjectSelector = requireParams('project')
+export const getFloatingIpSelector = requireParams('project', 'floatingIp')
 export const getInstanceSelector = requireParams('project', 'instance')
 export const getVpcSelector = requireParams('project', 'vpc')
 export const getSiloSelector = requireParams('silo')
@@ -69,6 +70,7 @@ function useSelectedParams<T>(getSelector: (params: AllParams) => T) {
 // params are present. Only the specified keys end up in the result object, but
 // we do not error if there are other params present in the query string.
 
+export const useFloatingIpSelector = () => useSelectedParams(getFloatingIpSelector)
 export const useProjectSelector = () => useSelectedParams(getProjectSelector)
 export const useProjectImageSelector = () => useSelectedParams(getProjectImageSelector)
 export const useProjectSnapshotSelector = () =>

app/layouts/ProjectLayout.tsx

@@ -20,6 +20,7 @@ import {
   Folder16Icon,
   Images16Icon,
   Instances16Icon,
+  IpGlobal16Icon,
   Networking16Icon,
   Snapshots16Icon,
   Storage16Icon,
@@ -67,7 +68,8 @@ function ProjectLayout({ overrideContentPane }: ProjectLayoutProps) {
           { value: 'Disks', path: pb.disks(projectSelector) },
           { value: 'Snapshots', path: pb.snapshots(projectSelector) },
           { value: 'Images', path: pb.projectImages(projectSelector) },
-          { value: 'Networking', path: pb.vpcs(projectSelector) },
+          { value: 'VPCs', path: pb.vpcs(projectSelector) },
+          { value: 'Floating IPs', path: pb.floatingIps(projectSelector) },
           { value: 'Access & IAM', path: pb.projectAccess(projectSelector) },
         ]
           // filter out the entry for the path we're currently on
@@ -111,7 +113,10 @@ function ProjectLayout({ overrideContentPane }: ProjectLayoutProps) {
             <Images16Icon title="images" /> Images
           </NavLinkItem>
           <NavLinkItem to={pb.vpcs(projectSelector)}>
-            <Networking16Icon /> Networking
+            <Networking16Icon /> VPCs
+          </NavLinkItem>
+          <NavLinkItem to={pb.floatingIps(projectSelector)}>
+            <IpGlobal16Icon /> Floating IPs
           </NavLinkItem>
           <NavLinkItem to={pb.projectAccess(projectSelector)}>
             <Access16Icon title="Access & IAM" /> Access &amp; IAM

app/pages/project/disks/DisksPage.tsx

@@ -12,15 +12,13 @@ import {
   diskCan,
   genName,
   useApiMutation,
-  useApiQuery,
   useApiQueryClient,
   type Disk,
 } from '@oxide/api'
 import {
   DateCell,
-  LinkCell,
+  InstanceLinkCell,
   SizeCell,
-  SkeletonCell,
   useQueryTable,
   type MenuAction,
 } from '@oxide/table'
@@ -40,24 +38,6 @@ import { pb } from 'app/util/path-builder'
 
 import { fancifyStates } from '../instances/instance/tabs/common'
 
-function InstanceNameFromId({ value: instanceId }: { value: string | null }) {
-  const { project } = useProjectSelector()
-  const { data: instance } = useApiQuery(
-    'instanceView',
-    { path: { instance: instanceId! } },
-    { enabled: !!instanceId }
-  )
-
-  if (!instanceId) return null
-  if (!instance) return <SkeletonCell />
-
-  return (
-    <LinkCell to={pb.instancePage({ project, instance: instance.name })}>
-      {instance.name}
-    </LinkCell>
-  )
-}
-
 const EmptyState = () => (
   <EmptyMessage
     icon={<Storage24Icon />}
@@ -157,7 +137,7 @@ export function DisksPage() {
             // whether it has an instance field
             'instance' in disk.state ? disk.state.instance : null
           }
-          cell={InstanceNameFromId}
+          cell={InstanceLinkCell}
         />
         <Column header="Size" accessor="size" cell={SizeCell} />
         <Column