Add quota editing sidemodal to system utilization page

app/forms/silo-quotas-edit.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 { useForm } from 'react-hook-form'
+import type { SetNonNullable } from 'type-fest'
+
+import {
+  api,
+  queryClient,
+  useApiMutation,
+  type SiloQuotasUpdate,
+  type VirtualResourceCounts,
+} from '@oxide/api'
+import { Cloud16Icon } from '@oxide/design-system/icons/react'
+
+import { NumberField } from '~/components/form/fields/NumberField'
+import { SideModalForm } from '~/components/form/SideModalForm'
+import { addToast } from '~/stores/toast'
+import { Message } from '~/ui/lib/Message'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { ResourceLabel } from '~/ui/lib/SideModal'
+import { docLinks } from '~/util/links'
+import { bytesToGiB, GiB } from '~/util/units'
+
+type Props = {
+  /** Silo name, used as the path param on update */
+  silo: string
+  /** Current quotas, i.e., the `allocated` counts from silo utilization */
+  quotas: VirtualResourceCounts
+  onDismiss: () => void
+}
+
+export function EditQuotasSideModalForm({ silo, quotas, onDismiss }: Props) {
+  // required because we need to rule out undefined because NumberField hates that
+  const defaultValues: SetNonNullable<Required<SiloQuotasUpdate>> = {
+    cpus: quotas.cpus,
+    memory: bytesToGiB(quotas.memory),
+    storage: bytesToGiB(quotas.storage),
+  }
+
+  const form = useForm({ defaultValues })
+
+  const updateQuotas = useApiMutation(api.siloQuotasUpdate, {
+    onSuccess() {
+      queryClient.invalidateEndpoint('siloUtilizationView')
+      queryClient.invalidateEndpoint('siloUtilizationList')
+      addToast({ content: 'Quotas updated' })
+      onDismiss()
+    },
+  })
+
+  return (
+    <SideModalForm
+      form={form}
+      formType="edit"
+      resourceName="Quotas"
+      title="Edit quotas"
+      subtitle={
+        <ResourceLabel>
+          <Cloud16Icon /> {silo}
+        </ResourceLabel>
+      }
+      onDismiss={onDismiss}
+      onSubmit={({ cpus, memory, storage }) =>
+        updateQuotas.mutate({
+          body: {
+            cpus,
+            memory: memory * GiB,
+            // TODO: we use GiB on instance create but TiB on utilization. HM
+            storage: storage * GiB,
+          },
+          path: { silo },
+        })
+      }
+      loading={updateQuotas.isPending}
+      submitError={updateQuotas.error}
+    >
+      <Message
+        content="If a quota is set below the amount currently in use, users will not be able to provision resources."
+        variant="info"
+      />
+
+      <NumberField name="cpus" label="CPU" units="vCPUs" required control={form.control} />
+      <NumberField
+        name="memory"
+        label="Memory"
+        units="GiB"
+        required
+        control={form.control}
+      />
+      <NumberField
+        name="storage"
+        label="Storage"
+        units="GiB"
+        required
+        control={form.control}
+      />
+      <SideModalFormDocs docs={[docLinks.resourceManagement]} />
+    </SideModalForm>
+  )
+}

app/pages/system/UtilizationPage.tsx

@@ -16,6 +16,7 @@ import {
   queryClient,
   totalUtilization,
   usePrefetchedQuery,
+  type SiloUtilization,
 } from '@oxide/api'
 import { Metrics16Icon, Metrics24Icon } from '@oxide/design-system/icons/react'
 
@@ -25,6 +26,7 @@ import { useDateTimeRangePicker } from '~/components/form/fields/DateTimeRangePi
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { useIntervalPicker } from '~/components/RefetchIntervalPicker'
 import { SystemMetric } from '~/components/SystemMetric'
+import { EditQuotasSideModalForm } from '~/forms/silo-quotas-edit'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { RowActions } from '~/table/columns/action-col'
 import { Listbox } from '~/ui/lib/Listbox'
@@ -171,84 +173,105 @@ const MetricsTab = () => {
 function UsageTab() {
   const { data: siloUtilizations } = usePrefetchedQuery(siloUtilList.optionsFn())
 
+  // silo whose quotas are being edited, if any
+  const [editingSilo, setEditingSilo] = useState<SiloUtilization | null>(null)
+
   return (
-    <Table className="w-full">
-      <Table.Header>
-        <Table.HeaderRow>
-          <Table.HeadCell data-test-ignore></Table.HeadCell>
-          {/* data-test-ignore makes the row asserts work in the e2e tests */}
-          <Table.HeadCell colSpan={3} data-test-ignore>
-            Provisioned / Quota
-          </Table.HeadCell>
-          <Table.HeadCell colSpan={3} data-test-ignore>
-            Available
-          </Table.HeadCell>
-          <Table.HeadCell data-test-ignore></Table.HeadCell>
-        </Table.HeaderRow>
-        <Table.HeaderRow>
-          <Table.HeadCell>Silo</Table.HeadCell>
-          <Table.HeadCell>CPU</Table.HeadCell>
-          <Table.HeadCell>Memory</Table.HeadCell>
-          <Table.HeadCell>Storage</Table.HeadCell>
-          <Table.HeadCell>CPU</Table.HeadCell>
-          <Table.HeadCell>Memory</Table.HeadCell>
-          <Table.HeadCell>Storage</Table.HeadCell>
-          <Table.HeadCell data-test-ignore></Table.HeadCell>
-        </Table.HeaderRow>
-      </Table.Header>
-      <Table.Body>
-        {siloUtilizations.items.map((silo) => (
-          <Table.Row key={silo.siloName}>
-            <Table.Cell width="16%" height="large">
-              <LinkCell to={pb.silo({ silo: silo.siloName })}>{silo.siloName}</LinkCell>
-            </Table.Cell>
-            <Table.Cell width="14%" height="large">
-              <UsageCell
-                provisioned={silo.provisioned.cpus}
-                allocated={silo.allocated.cpus}
-              />
-            </Table.Cell>
-            <Table.Cell width="14%" height="large">
-              <UsageCell
-                provisioned={bytesToGiB(silo.provisioned.memory)}
-                allocated={bytesToGiB(silo.allocated.memory)}
-                unit="GiB"
-              />
-            </Table.Cell>
-            <Table.Cell width="14%" height="large">
-              <UsageCell
-                provisioned={bytesToTiB(silo.provisioned.storage)}
-                allocated={bytesToTiB(silo.allocated.storage)}
-                unit="TiB"
-              />
-            </Table.Cell>
-            <Table.Cell width="14%" className="relative" height="large">
-              <AvailableCell
-                provisioned={silo.provisioned.cpus}
-                allocated={silo.allocated.cpus}
-              />
-            </Table.Cell>
-            <Table.Cell width="14%" className="relative" height="large">
-              <AvailableCell
-                provisioned={bytesToGiB(silo.provisioned.memory)}
-                allocated={bytesToGiB(silo.allocated.memory)}
-                unit="GiB"
-              />
-            </Table.Cell>
-            <Table.Cell width="14%" className="relative" height="large">
-              <AvailableCell
-                provisioned={bytesToTiB(silo.provisioned.storage)}
-                allocated={bytesToTiB(silo.allocated.storage)}
-                unit="TiB"
-              />
-            </Table.Cell>
-            <Table.Cell className="action-col w-10 *:p-0" height="large">
-              <RowActions id={silo.siloId} copyIdLabel="Copy silo ID" />
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
+    <>
+      <Table className="w-full">
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeadCell data-test-ignore></Table.HeadCell>
+            {/* data-test-ignore makes the row asserts work in the e2e tests */}
+            <Table.HeadCell colSpan={3} data-test-ignore>
+              Provisioned / Quota
+            </Table.HeadCell>
+            <Table.HeadCell colSpan={3} data-test-ignore>
+              Available
+            </Table.HeadCell>
+            <Table.HeadCell data-test-ignore></Table.HeadCell>
+          </Table.HeaderRow>
+          <Table.HeaderRow>
+            <Table.HeadCell>Silo</Table.HeadCell>
+            <Table.HeadCell>CPU</Table.HeadCell>
+            <Table.HeadCell>Memory</Table.HeadCell>
+            <Table.HeadCell>Storage</Table.HeadCell>
+            <Table.HeadCell>CPU</Table.HeadCell>
+            <Table.HeadCell>Memory</Table.HeadCell>
+            <Table.HeadCell>Storage</Table.HeadCell>
+            <Table.HeadCell data-test-ignore></Table.HeadCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          {siloUtilizations.items.map((silo) => (
+            <Table.Row key={silo.siloName}>
+              <Table.Cell width="16%" height="large">
+                <LinkCell to={pb.silo({ silo: silo.siloName })}>{silo.siloName}</LinkCell>
+              </Table.Cell>
+              <Table.Cell width="14%" height="large">
+                <UsageCell
+                  provisioned={silo.provisioned.cpus}
+                  allocated={silo.allocated.cpus}
+                />
+              </Table.Cell>
+              <Table.Cell width="14%" height="large">
+                <UsageCell
+                  provisioned={bytesToGiB(silo.provisioned.memory)}
+                  allocated={bytesToGiB(silo.allocated.memory)}
+                  unit="GiB"
+                />
+              </Table.Cell>
+              <Table.Cell width="14%" height="large">
+                <UsageCell
+                  provisioned={bytesToTiB(silo.provisioned.storage)}
+                  allocated={bytesToTiB(silo.allocated.storage)}
+                  unit="TiB"
+                />
+              </Table.Cell>
+              <Table.Cell width="14%" className="relative" height="large">
+                <AvailableCell
+                  provisioned={silo.provisioned.cpus}
+                  allocated={silo.allocated.cpus}
+                />
+              </Table.Cell>
+              <Table.Cell width="14%" className="relative" height="large">
+                <AvailableCell
+                  provisioned={bytesToGiB(silo.provisioned.memory)}
+                  allocated={bytesToGiB(silo.allocated.memory)}
+                  unit="GiB"
+                />
+              </Table.Cell>
+              <Table.Cell width="14%" className="relative" height="large">
+                <AvailableCell
+                  provisioned={bytesToTiB(silo.provisioned.storage)}
+                  allocated={bytesToTiB(silo.allocated.storage)}
+                  unit="TiB"
+                />
+              </Table.Cell>
+              <Table.Cell className="action-col w-10 *:p-0" height="large">
+                <RowActions
+                  id={silo.siloId}
+                  copyIdLabel="Copy silo ID"
+                  actions={[
+                    {
+                      label: 'Edit quotas',
+                      onActivate: () => setEditingSilo(silo),
+                    },
+                  ]}
+                />
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      {editingSilo && (
+        <EditQuotasSideModalForm
+          silo={editingSilo.siloName}
+          quotas={editingSilo.allocated}
+          onDismiss={() => setEditingSilo(null)}
+        />
+      )}
+    </>
   )
 }