Add create and edit functionality to anti-affinity groups

app/components/AffinityDocsPopover.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { Affinity16Icon } from '@oxide/design-system/icons/react'
+
+import { policyHelpText } from '~/forms/affinity-util'
+import { TipIcon } from '~/ui/lib/TipIcon'
+import { docLinks } from '~/util/links'
+
+import { DocsPopover } from './DocsPopover'
+
+export const AffinityDocsPopover = () => (
+  <DocsPopover
+    heading="affinity"
+    icon={<Affinity16Icon />}
+    summary="Instances in an anti-affinity group will be placed on different sleds when they start. The policy attribute determines whether instances can still start when a unique sled is not available."
+    links={[docLinks.affinity]}
+  />
+)
+
+export const AffinityPolicyHeader = () => (
+  <>
+    Policy<TipIcon className="ml-1.5">{policyHelpText}</TipIcon>
+  </>
+)

app/forms/affinity-util.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { apiq } from '~/api'
+import { ALL_ISH } from '~/util/consts'
+import type * as PP from '~/util/path-params'
+
+export const instanceList = ({ project }: PP.Project) =>
+  apiq('instanceList', { query: { project, limit: ALL_ISH } })
+
+export const antiAffinityGroupList = ({ project }: PP.Project) =>
+  apiq('antiAffinityGroupList', { query: { project, limit: ALL_ISH } })
+
+export const antiAffinityGroupView = ({
+  project,
+  antiAffinityGroup,
+}: PP.AntiAffinityGroup) =>
+  apiq('antiAffinityGroupView', { path: { antiAffinityGroup }, query: { project } })
+
+export const antiAffinityGroupMemberList = ({
+  antiAffinityGroup,
+  project,
+}: PP.AntiAffinityGroup) =>
+  apiq('antiAffinityGroupMemberList', {
+    path: { antiAffinityGroup },
+    // member limit in DB is currently 32, so pagination isn't needed
+    query: { project, limit: ALL_ISH },
+  })
+
+export const policyHelpText =
+  "Determines whether member instances are allowed to start when the anti-affinity rule can't be satisfied"

app/forms/anti-affinity-group-create.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 { useNavigate } from 'react-router'
+
+import { queryClient, useApiMutation, type AntiAffinityGroupCreate } from '@oxide/api'
+
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { NameField } from '~/components/form/fields/NameField'
+import { RadioField } from '~/components/form/fields/RadioField'
+import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { useProjectSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+import { pb } from '~/util/path-builder'
+
+import { policyHelpText } from './affinity-util'
+
+export const handle = titleCrumb('New anti-affinity group')
+
+const defaultValues: Omit<AntiAffinityGroupCreate, 'failureDomain'> = {
+  name: '',
+  description: '',
+  policy: 'allow',
+}
+
+export default function CreateAntiAffinityGroupForm() {
+  const { project } = useProjectSelector()
+
+  const navigate = useNavigate()
+
+  const createAntiAffinityGroup = useApiMutation('antiAffinityGroupCreate', {
+    onSuccess(antiAffinityGroup) {
+      queryClient.invalidateEndpoint('antiAffinityGroupList')
+      navigate(pb.antiAffinityGroup({ project, antiAffinityGroup: antiAffinityGroup.name }))
+      addToast(<>Anti-affinity group <HL>{antiAffinityGroup.name}</HL> created</>) // prettier-ignore
+    },
+  })
+
+  const form = useForm({ defaultValues })
+  const control = form.control
+
+  return (
+    <SideModalForm
+      form={form}
+      formType="create"
+      resourceName="rule"
+      title="Add anti-affinity group"
+      onDismiss={() => navigate(pb.affinity({ project }))}
+      onSubmit={(values) =>
+        createAntiAffinityGroup.mutate({
+          query: { project },
+          body: { ...values, failureDomain: 'sled' },
+        })
+      }
+      loading={createAntiAffinityGroup.isPending}
+      submitError={createAntiAffinityGroup.error}
+      submitLabel="Add group"
+    >
+      <NameField name="name" control={control} />
+      <DescriptionField name="description" control={control} />
+      <RadioField
+        name="policy"
+        // forgive me
+        description={`${policyHelpText}, i.e., when all available sleds already contain a group member.`}
+        column
+        control={control}
+        items={[
+          { value: 'allow', label: 'Allow' },
+          { value: 'fail', label: 'Fail' },
+        ]}
+      />
+    </SideModalForm>
+  )
+}

app/forms/anti-affinity-group-edit.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 { useNavigate, type LoaderFunctionArgs } from 'react-router'
+import * as R from 'remeda'
+
+import {
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  type AntiAffinityGroupUpdate,
+} from '@oxide/api'
+
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { NameField } from '~/components/form/fields/NameField'
+import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import {
+  getAntiAffinityGroupSelector,
+  useAntiAffinityGroupSelector,
+} from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+import { pb } from '~/util/path-builder'
+
+import { antiAffinityGroupView } from './affinity-util'
+
+export const handle = titleCrumb('New anti-affinity group')
+
+export async function clientLoader({ params }: LoaderFunctionArgs) {
+  const { project, antiAffinityGroup } = getAntiAffinityGroupSelector(params)
+  await queryClient.prefetchQuery(antiAffinityGroupView({ project, antiAffinityGroup }))
+  return null
+}
+
+export default function EditAntiAffintyGroupForm() {
+  const { project, antiAffinityGroup } = useAntiAffinityGroupSelector()
+
+  const navigate = useNavigate()
+
+  const editAntiAffinityGroup = useApiMutation('antiAffinityGroupUpdate', {
+    onSuccess(updatedGroup) {
+      queryClient.invalidateEndpoint('antiAffinityGroupView')
+      queryClient.invalidateEndpoint('antiAffinityGroupList')
+      navigate(pb.antiAffinityGroup({ project, antiAffinityGroup: updatedGroup.name }))
+      addToast(<>Anti-affinity group <HL>{updatedGroup.name}</HL> updated</>) // prettier-ignore
+    },
+  })
+
+  const { data: group } = usePrefetchedQuery(
+    antiAffinityGroupView({ project, antiAffinityGroup })
+  )
+
+  const defaultValues: AntiAffinityGroupUpdate = R.pick(group, ['name', 'description'])
+  const form = useForm({ defaultValues })
+
+  return (
+    <SideModalForm
+      form={form}
+      formType="create"
+      resourceName="rule"
+      title="Edit anti-affinity group"
+      onDismiss={() => navigate(pb.antiAffinityGroup({ project, antiAffinityGroup }))}
+      onSubmit={(values) => {
+        editAntiAffinityGroup.mutate({
+          path: { antiAffinityGroup },
+          query: { project },
+          body: values,
+        })
+      }}
+      loading={editAntiAffinityGroup.isPending}
+      submitError={editAntiAffinityGroup.error}
+      submitLabel="Edit group"
+    >
+      <NameField name="name" control={form.control} />
+      <DescriptionField name="description" control={form.control} />
+    </SideModalForm>
+  )
+}

app/forms/anti-affinity-group-member-add.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { useId } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { queryClient, useApiMutation, type Instance } from '~/api'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
+import { HL } from '~/components/HL'
+import { useAntiAffinityGroupSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+import { toComboboxItems } from '~/ui/lib/Combobox'
+import { Modal } from '~/ui/lib/Modal'
+
+type Values = { instance: string }
+
+const defaultValues: Values = { instance: '' }
+
+type Props = { instances: Instance[]; onDismiss: () => void }
+
+export default function AddAntiAffinityGroupMemberForm({ instances, onDismiss }: Props) {
+  const { project, antiAffinityGroup } = useAntiAffinityGroupSelector()
+
+  const form = useForm({ defaultValues })
+  const formId = useId()
+
+  const { mutateAsync: addMember } = useApiMutation('antiAffinityGroupMemberInstanceAdd', {
+    onSuccess(_data, variables) {
+      onDismiss()
+      queryClient.invalidateEndpoint('antiAffinityGroupMemberList')
+      queryClient.invalidateEndpoint('antiAffinityGroupView')
+      addToast(<>Instance <HL>{variables.path.instance}</HL> added to anti-affinity group <HL>{antiAffinityGroup}</HL></>) // prettier-ignore
+    },
+  })
+
+  const onSubmit = form.handleSubmit(({ instance }) => {
+    addMember({
+      path: { antiAffinityGroup, instance },
+      query: { project },
+    })
+  })
+
+  return (
+    <Modal isOpen onDismiss={onDismiss} title="Add instance to group">
+      <Modal.Body>
+        <Modal.Section>
+          <p className="text-sm text-gray-500">
+            Select an instance to add to the anti-affinity group{' '}
+            <HL>{antiAffinityGroup}</HL>. Only stopped instances can be added to the group.
+          </p>
+          <form id={formId} onSubmit={onSubmit}>
+            <ComboboxField
+              placeholder="Select an instance"
+              name="instance"
+              label="Instance"
+              items={toComboboxItems(instances)}
+              required
+              control={form.control}
+            />
+          </form>
+        </Modal.Section>
+      </Modal.Body>
+      <Modal.Footer onDismiss={onDismiss} actionText="Add to group" formId={formId} />
+    </Modal>
+  )
+}

app/layouts/ProjectLayoutBase.tsx

@@ -69,7 +69,7 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
           { value: 'Images', path: pb.projectImages(projectSelector) },
           { value: 'VPCs', path: pb.vpcs(projectSelector) },
           { value: 'Floating IPs', path: pb.floatingIps(projectSelector) },
-          { value: 'Affinity', path: pb.affinity(projectSelector) },
+          { value: 'Affinity Groups', path: pb.affinity(projectSelector) },
           { value: 'Access', path: pb.projectAccess(projectSelector) },
         ]
           // filter out the entry for the path we're currently on
@@ -106,7 +106,7 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
             <Snapshots16Icon /> Snapshots
           </NavLinkItem>
           <NavLinkItem to={pb.projectImages(projectSelector)}>
-            <Images16Icon title="images" /> Images
+            <Images16Icon /> Images
           </NavLinkItem>
           <NavLinkItem to={pb.vpcs(projectSelector)}>
             <Networking16Icon /> VPCs
@@ -115,10 +115,10 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
             <IpGlobal16Icon /> Floating IPs
           </NavLinkItem>
           <NavLinkItem to={pb.affinity(projectSelector)}>
-            <Affinity16Icon title="Affinity" /> Affinity
+            <Affinity16Icon /> Affinity Groups
           </NavLinkItem>
           <NavLinkItem to={pb.projectAccess(projectSelector)}>
-            <Access16Icon title="Access" /> Access
+            <Access16Icon /> Access
           </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>