Manage IP pools

app/components/ExternalLink.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 cn from 'classnames'
+
+type ExternalLinkProps = {
+  href: string
+  className?: string
+  children: React.ReactNode
+}
+
+export function ExternalLink({ href, className, children }: ExternalLinkProps) {
+  return (
+    <a
+      href={href}
+      className={cn('underline text-accent-secondary hover:text-accent', className)}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  )
+}

app/components/HL.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
+ */
+import { classed } from '@oxide/util'
+
+export const HL = classed.span`text-sans-semi-md text-default`

app/components/TopBarPicker.tsx

@@ -20,7 +20,7 @@ import {
   Wrap,
 } from '@oxide/ui'
 
-import { useInstanceSelector, useSiloSelector } from 'app/hooks'
+import { useInstanceSelector, useIpPoolSelector, useSiloSelector } from 'app/hooks'
 import { useCurrentUser } from 'app/layouts/AuthenticatedLayout'
 import { pb } from 'app/util/path-builder'
 
@@ -228,6 +228,27 @@ export function SiloPicker() {
   )
 }
 
+/** Used when drilling down into a pool from the System/Networking view. */
+export function IpPoolPicker() {
+  // picker only shows up when a pool is in scope
+  const { pool: poolName } = useIpPoolSelector()
+  const { data } = useApiQuery('ipPoolList', { query: { limit: 10 } })
+  const items = (data?.items || []).map((pool) => ({
+    label: pool.name,
+    to: pb.ipPool({ pool: pool.name }),
+  }))
+
+  return (
+    <TopBarPicker
+      aria-label="Switch pool"
+      category="IP Pools"
+      current={poolName}
+      items={items}
+      noItemsText="No IP pools found"
+    />
+  )
+}
+
 const NoProjectLogo = () => (
   <div className="flex h-[34px] w-[34px] items-center justify-center rounded text-secondary bg-secondary">
     <Folder16Icon />

app/forms/ip-pool-create.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { useNavigate } from 'react-router-dom'
+
+import { useApiMutation, useApiQueryClient, type IpPoolCreate } from '@oxide/api'
+
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import { useForm } from 'app/hooks'
+import { addToast } from 'app/stores/toast'
+import { pb } from 'app/util/path-builder'
+
+const defaultValues: IpPoolCreate = {
+  name: '',
+  description: '',
+}
+
+export function CreateIpPoolSideModalForm() {
+  const navigate = useNavigate()
+  const queryClient = useApiQueryClient()
+
+  const onDismiss = () => navigate(pb.ipPools())
+
+  const createPool = useApiMutation('ipPoolCreate', {
+    onSuccess(_pool) {
+      queryClient.invalidateQueries('ipPoolList')
+      addToast({ content: 'Your IP pool has been created' })
+      navigate(pb.ipPools())
+    },
+  })
+
+  const form = useForm({ defaultValues })
+
+  return (
+    <SideModalForm
+      id="create-pool-form"
+      form={form}
+      title="Create IP pool"
+      onDismiss={onDismiss}
+      onSubmit={({ name, description }) => {
+        createPool.mutate({ body: { name, description } })
+      }}
+      loading={createPool.isPending}
+      submitError={createPool.error}
+    >
+      <NameField name="name" control={form.control} />
+      <DescriptionField name="description" control={form.control} />
+    </SideModalForm>
+  )
+}

app/forms/ip-pool-edit.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+
+import {
+  apiQueryClient,
+  useApiMutation,
+  useApiQueryClient,
+  usePrefetchedApiQuery,
+} from '@oxide/api'
+
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import { getIpPoolSelector, useForm, useIpPoolSelector, useToast } from 'app/hooks'
+import { pb } from 'app/util/path-builder'
+
+EditIpPoolSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+  const { pool } = getIpPoolSelector(params)
+  await apiQueryClient.prefetchQuery('ipPoolView', { path: { pool } })
+  return null
+}
+
+export function EditIpPoolSideModalForm() {
+  const queryClient = useApiQueryClient()
+  const addToast = useToast()
+  const navigate = useNavigate()
+
+  const poolSelector = useIpPoolSelector()
+
+  const onDismiss = () => navigate(pb.ipPools())
+
+  const { data: pool } = usePrefetchedApiQuery('ipPoolView', { path: poolSelector })
+
+  const editPool = useApiMutation('ipPoolUpdate', {
+    onSuccess(_pool) {
+      queryClient.invalidateQueries('ipPoolList')
+      addToast({ content: 'Your IP pool has been updated' })
+      onDismiss()
+    },
+  })
+
+  const form = useForm({ defaultValues: pool })
+
+  return (
+    <SideModalForm
+      id="edit-pool-form"
+      form={form}
+      title="Edit IP pool"
+      onDismiss={onDismiss}
+      onSubmit={({ name, description }) => {
+        editPool.mutate({ path: poolSelector, body: { name, description } })
+      }}
+      loading={editPool.isPending}
+      submitError={editPool.error}
+      submitLabel="Save changes"
+    >
+      <NameField name="name" control={form.control} />
+      <DescriptionField name="description" control={form.control} />
+    </SideModalForm>
+  )
+}

app/forms/project-create.tsx

@@ -36,8 +36,6 @@ export function CreateProjectSideModalForm() {
     },
   })
 
-  // TODO: RHF docs warn about the performance impact of validating on every
-  // change
   const form = useForm({ defaultValues })
 
   return (

app/hooks/use-params.ts

@@ -42,6 +42,7 @@ export const getProjectImageSelector = requireParams('project', 'image')
 export const getProjectSnapshotSelector = requireParams('project', 'snapshot')
 export const requireSledParams = requireParams('sledId')
 export const requireUpdateParams = requireParams('version')
+export const getIpPoolSelector = requireParams('pool')
 
 /**
  * Turn `getThingSelector`, a pure function on a params object, into a hook
@@ -79,3 +80,4 @@ export const useSiloImageSelector = () => useSelectedParams(getSiloImageSelector
 export const useIdpSelector = () => useSelectedParams(getIdpSelector)
 export const useSledParams = () => useSelectedParams(requireSledParams)
 export const useUpdateParams = () => useSelectedParams(requireUpdateParams)
+export const useIpPoolSelector = () => useSelectedParams(getIpPoolSelector)

app/layouts/SystemLayout.tsx

@@ -9,12 +9,18 @@ import { useMemo } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { apiQueryClient } from '@oxide/api'
-import { Cloud16Icon, Divider, Metrics16Icon, Storage16Icon } from '@oxide/ui'
+import {
+  Cloud16Icon,
+  Divider,
+  Metrics16Icon,
+  Networking16Icon,
+  Storage16Icon,
+} from '@oxide/ui'
 
 import { trigger404 } from 'app/components/ErrorBoundary'
 import { DocsLinkItem, NavLinkItem, Sidebar } from 'app/components/Sidebar'
 import { TopBar } from 'app/components/TopBar'
-import { SiloPicker, SiloSystemPicker } from 'app/components/TopBarPicker'
+import { IpPoolPicker, SiloPicker, SiloSystemPicker } from 'app/components/TopBarPicker'
 import { useQuickActions } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
@@ -49,7 +55,7 @@ export default function SystemLayout() {
   // robust way of doing this would be to make a separate layout for the
   // silo-specific routes in the route config, but it's overkill considering
   // this is a one-liner. Switch to that approach at the first sign of trouble.
-  const { silo } = useParams()
+  const { silo, pool } = useParams()
   const navigate = useNavigate()
   const { pathname } = useLocation()
 
@@ -60,6 +66,7 @@ export default function SystemLayout() {
       { value: 'Silos', path: pb.silos() },
       { value: 'Utilization', path: pb.systemUtilization() },
       { value: 'Inventory', path: pb.inventory() },
+      { value: 'Networking', path: pb.ipPools() },
     ]
       // filter out the entry for the path we're currently on
       .filter((i) => i.path !== pathname)
@@ -84,6 +91,7 @@ export default function SystemLayout() {
       <TopBar>
         <SiloSystemPicker value="system" />
         {silo && <SiloPicker />}
+        {pool && <IpPoolPicker />}
       </TopBar>
       <Sidebar>
         <Sidebar.Nav>
@@ -103,15 +111,9 @@ export default function SystemLayout() {
           <NavLinkItem to={pb.sledInventory()}>
             <Storage16Icon /> Inventory
           </NavLinkItem>
-          {/* <NavLinkItem to={pb.systemHealth()} disabled>
-            <Health16Icon /> Health
-          </NavLinkItem>
-          <NavLinkItem to={pb.systemUpdates()} disabled>
-            <SoftwareUpdate16Icon /> System Update
-          </NavLinkItem>
-          <NavLinkItem to={pb.systemNetworking()} disabled>
+          <NavLinkItem to={pb.ipPools()}>
             <Networking16Icon /> Networking
-          </NavLinkItem> */}
+          </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>
       <ContentPane />

app/pages/SiloAccessPage.tsx

@@ -32,12 +32,13 @@ import {
 import { groupBy, isTruthy } from '@oxide/util'
 
 import { AccessNameCell } from 'app/components/AccessNameCell'
+import { HL } from 'app/components/HL'
 import { RoleBadgeCell } from 'app/components/RoleBadgeCell'
 import {
   SiloAccessAddUserSideModal,
   SiloAccessEditUserSideModal,
 } from 'app/forms/silo-access'
-import { confirmDelete, HL } from 'app/stores/confirm-delete'
+import { confirmDelete } from 'app/stores/confirm-delete'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>

app/pages/project/access/ProjectAccessPage.tsx

@@ -35,13 +35,14 @@ import {
 import { groupBy, isTruthy } from '@oxide/util'
 
 import { AccessNameCell } from 'app/components/AccessNameCell'
+import { HL } from 'app/components/HL'
 import { RoleBadgeCell } from 'app/components/RoleBadgeCell'
 import {
   ProjectAccessAddUserSideModal,
   ProjectAccessEditUserSideModal,
 } from 'app/forms/project-access'
 import { getProjectSelector, useProjectSelector } from 'app/hooks'
-import { confirmDelete, HL } from 'app/stores/confirm-delete'
+import { confirmDelete } from 'app/stores/confirm-delete'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>

app/pages/project/disks/DisksPage.tsx

@@ -16,7 +16,14 @@ import {
   useApiQueryClient,
   type Disk,
 } from '@oxide/api'
-import { DateCell, linkCell, SizeCell, useQueryTable, type MenuAction } from '@oxide/table'
+import {
+  DateCell,
+  LinkCell,
+  SizeCell,
+  SkeletonCell,
+  useQueryTable,
+  type MenuAction,
+} from '@oxide/table'
 import {
   buttonStyle,
   EmptyMessage,
@@ -33,22 +40,22 @@ import { pb } from 'app/util/path-builder'
 
 import { fancifyStates } from '../instances/instance/tabs/common'
 
-function AttachedInstance({
-  instanceId,
-  ...projectSelector
-}: {
-  project: string
-  instanceId: string
-}) {
-  const { data: instance } = useApiQuery('instanceView', {
-    path: { instance: instanceId },
-  })
-
-  const instanceLinkCell = linkCell((instanceName) =>
-    pb.instancePage({ ...projectSelector, instance: instanceName })
+function InstanceNameFromId({ value: instanceId }: { value: string | null }) {
+  const { project } = useProjectSelector()
+  const { data: instance } = useApiQuery(
+    'instanceView',
+    { path: { instance: instanceId! } },
+    { enabled: !!instanceId }
   )
 
-  return instance ? instanceLinkCell({ value: instance.name }) : null
+  if (!instanceId) return null
+  if (!instance) return <SkeletonCell />
+
+  return (
+    <LinkCell to={pb.instancePage({ project, instance: instance.name })}>
+      {instance.name}
+    </LinkCell>
+  )
 }
 
 const EmptyState = () => (
@@ -143,9 +150,7 @@ export function DisksPage() {
             // whether it has an instance field
             'instance' in disk.state ? disk.state.instance : null
           }
-          cell={({ value }: { value: string | undefined }) =>
-            value ? <AttachedInstance {...projectSelector} instanceId={value} /> : null
-          }
+          cell={InstanceNameFromId}
         />
         <Column header="Size" accessor="size" cell={SizeCell} />
         <Column