IP pool utilization fixes (#2897)

* unbreak IP pool pages for IPv6 changes

* fix e2e tests, stub out version radio on create form

* remove version from list and create form

* add column IDs for name-derived columns

* recombine utilization columns into one

* count IPs in pool by... counting IPs in pool

* more explicit handling of bigints in mock server, other tweaks

* type fix required by type-fest bump

Author: david-crespo

OMICRON_VERSION

@@ -1 +1 @@
-9577096abb2801be1280c46b323a501ba819b006
+1ee118395ed95450274fdde79f322b84c00e252e

app/api/__generated__/Api.ts

@@ -15,7 +15,6 @@ import type {
   DiskState,
   Instance,
   InstanceState,
-  IpPoolUtilization,
   Measurement,
   SiloUtilization,
   Sled,
@@ -281,16 +280,4 @@ export function synthesizeData(
   return result
 }
 
-// do this by hand instead of getting elaborate in the client generator.
-// see https://github.com/oxidecomputer/oxide.ts/pull/231
-export function parseIpUtilization({ ipv4, ipv6 }: IpPoolUtilization) {
-  return {
-    ipv4,
-    ipv6: {
-      allocated: BigInt(ipv6.allocated),
-      capacity: BigInt(ipv6.capacity),
-    },
-  }
-}
-
 export const OXQL_GROUP_BY_ERROR = 'Input tables to a `group_by` must be aligned'

app/api/__generated__/OMICRON_VERSION

@@ -19,9 +19,14 @@ import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
 
+// We are leaving the v4/v6 radio out for now because while you can
+// create a v6 pool, you can't actually add any ranges to it until
+// https://github.com/oxidecomputer/omicron/issues/8966
+
 const defaultValues: IpPoolCreate = {
   name: '',
   description: '',
+  ipVersion: 'v4',
 }
 
 export const handle = titleCrumb('New IP pool')

app/api/__generated__/validate.ts

@@ -15,7 +15,6 @@ import {
   apiq,
   apiQueryClient,
   getListQFn,
-  parseIpUtilization,
   queryClient,
   useApiMutation,
   useApiQuery,
@@ -147,30 +146,24 @@ export default function IpPoolpage() {
 function UtilizationBars() {
   const { pool } = useIpPoolSelector()
   const { data } = usePrefetchedApiQuery('ipPoolUtilizationView', { path: { pool } })
-  const { ipv4, ipv6 } = parseIpUtilization(data)
+  const { capacity, remaining } = data
 
-  if (ipv4.capacity === 0 && ipv6.capacity === 0n) return null
+  if (capacity === 0) return null
 
   return (
     <div className="-mt-8 mb-8 flex min-w-min flex-col gap-3 lg+:flex-row">
-      {ipv4.capacity > 0 && (
+      {capacity > 0 && (
         <CapacityBar
           icon={<IpGlobal16Icon />}
-          title="IPv4"
-          provisioned={ipv4.allocated}
-          capacity={ipv4.capacity}
-          provisionedLabel="Allocated"
-          capacityLabel="Capacity"
-          unit="IPs"
-          includeUnit={false}
-        />
-      )}
-      {ipv6.capacity > 0 && (
-        <CapacityBar
-          icon={<IpGlobal16Icon />}
-          title="IPv6"
-          provisioned={ipv6.allocated}
-          capacity={ipv6.capacity}
+          title="ALLOCATED"
+          // TODO: this is potentially broken in the case of large IPv6 numbers
+          // due to lack of full precision. This should be fine and useful
+          // for IPv4 pools, but for IPv6 we should probably just show the two
+          // numbers. For now there are no IPv6 pools.
+          // https://github.com/oxidecomputer/omicron/issues/8966
+          // https://github.com/oxidecomputer/omicron/issues/9004
+          provisioned={Math.max(capacity - remaining, 0)}
+          capacity={capacity}
           provisionedLabel="Allocated"
           capacityLabel="Capacity"
           unit="IPs"

app/api/util.ts

@@ -22,7 +22,6 @@ import { IpGlobal16Icon, IpGlobal24Icon } from '@oxide/design-system/icons/react
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
-import { IpUtilCell } from '~/components/IpPoolUtilization'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -31,6 +30,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
+import { BigNum } from '~/ui/lib/BigNum'
 import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -50,19 +50,24 @@ const EmptyState = () => (
 
 function UtilizationCell({ pool }: { pool: string }) {
   const { data } = useApiQuery('ipPoolUtilizationView', { path: { pool } })
-
   if (!data) return <SkeletonCell />
-  return <IpUtilCell {...data} />
+  return (
+    <div>
+      <BigNum className="text-raise" num={data.remaining} /> /{' '}
+      <BigNum className="text-secondary" num={data.capacity} />
+    </div>
+  )
 }
 
 const colHelper = createColumnHelper<IpPool>()
 
 const staticColumns = [
   colHelper.accessor('name', { cell: makeLinkCell((pool) => pb.ipPool({ pool })) }),
   colHelper.accessor('description', Columns.description),
-  colHelper.accessor('name', {
-    header: 'Utilization',
-    cell: (info) => <UtilizationCell pool={info.getValue()} />,
+  // TODO: add version column when API supports v6 pools
+  colHelper.display({
+    header: 'IPs Remaining',
+    cell: (info) => <UtilizationCell pool={info.row.original.id} />,
   }),
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]

app/components/IpPoolUtilization.tsx

@@ -17,6 +17,7 @@ export const ipPool1: Json<IpPool> = {
   description: 'public IPs',
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
+  ip_version: 'v4',
 }
 
 export const ipPool2: Json<IpPool> = {
@@ -25,6 +26,7 @@ export const ipPool2: Json<IpPool> = {
   description: 'VPN IPs',
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
+  ip_version: 'v6',
 }
 
 export const ipPool3: Json<IpPool> = {
@@ -33,6 +35,7 @@ export const ipPool3: Json<IpPool> = {
   description: '',
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
+  ip_version: 'v4',
 }
 
 export const ipPool4: Json<IpPool> = {
@@ -41,6 +44,7 @@ export const ipPool4: Json<IpPool> = {
   description: '',
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
+  ip_version: 'v6',
 }
 
 export const ipPools: Json<IpPool>[] = [ipPool1, ipPool2, ipPool3, ipPool4]
@@ -88,15 +92,6 @@ export const ipPoolRanges: Json<IpPoolRange[]> = [
     time_created: new Date().toISOString(),
   },
   // pool 3 has no ranges
-  {
-    id: '4d85c502-52cc-47f9-b525-14b64cf5f1ea',
-    ip_pool_id: ipPool4.id,
-    range: {
-      first: '10.0.0.50',
-      last: '10.0.1.0',
-    },
-    time_created: new Date().toISOString(),
-  },
   {
     id: '914b10e1-0452-4d87-bc9b-7b91cc7c7628',
     ip_pool_id: ipPool4.id,