Manage IP pools (#1910)

* basic IP pools page and list silos for pool

* Stubbing out tabs for silo IP pools

* Stubbing out tabs for silo IP pools

* Switch to query param-based URL and tabs

* Copy change

* Cleanup on IP Pools page, but not there yet

* use the right API endpoint

* make/clear default row action

* use silo page loader for API calls backing the tabs

* tweak display

* move fleet role mapping into a tab

* add properties table to silo detail

* unlink pool

* make e2e tests pass, improve empty fleet role mapping state

* add IP ranges

* make /system/ip-pools the top-level route for now

* add apology for incomplete UI, will hopefully get far enough to remove

* create pool form

* delete IP pool

* ip pool edit form

* update path-builder test

* basic e2e tests

* silo names on IP pools silo list, link to silo, help text

* make *NameFromId rendering logic more uniform

* change IP pools page back to Networking with one tab

* confirm actions on silo IP pools list

* add docs links, remove apology callout

* confirm unlink in ip pool silos list

* link silo from ip pool silos list

* link pool from silo pools list

* error toast and loading states on link modals

* fix e2e test with confirm

* fix already exists check on mock ip pool update handler

* add disabled range add/remove buttons to suggest using API instead

---------

Co-authored-by: Charlie Park <[email protected]>

Author: david-crespo

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>