Disable add-instance-to-anti-affinity-group when instance not stopped (#2790)

* Disable instance adding to anti-affinity group when instance is not stopped

* Use Message to explicitly note issue with non-stopped instances

* update test

* testing

* use new instanceCan

* change omicron source link for can add to affinity group

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

Author: charliepark

app/api/util.ts

@@ -132,9 +132,9 @@ const instanceActions = {
   // https://github.com/oxidecomputer/omicron/blob/6dd9802/nexus/src/app/instance.rs#L1520-L1522
   serialConsole: ['running', 'rebooting', 'migrating', 'repairing'],
 
-  // https://github.com/oxidecomputer/omicron/blob/5e27bde/nexus/src/app/affinity.rs#L357 checks to see that there's no VMM
-  // TODO: determine whether the intent is only `stopped` or also `failed`
-  addToAntiAffinityGroup: ['stopped'],
+  // check to see that there's no VMM
+  // https://github.com/oxidecomputer/omicron/blob/c496683/nexus/db-queries/src/db/datastore/affinity.rs#L1025-L1034
+  addToAffinityGroup: ['stopped'],
 } satisfies Record<string, InstanceState[]>
 
 // setting .states is a cute way to make it ergonomic to call the test function

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

@@ -9,12 +9,13 @@
 import { useId } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { queryClient, useApiMutation, type Instance } from '~/api'
+import { instanceCan, 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 { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 
 type Values = { instance: string }
@@ -45,6 +46,12 @@ export default function AddAntiAffinityGroupMemberForm({ instances, onDismiss }:
     })
   })
 
+  const instance = form.watch('instance')
+  const selectedInstance = instances.find((i) => i.name === instance)
+  const canAddInstance = selectedInstance
+    ? instanceCan.addToAffinityGroup(selectedInstance)
+    : false
+
   return (
     <Modal isOpen onDismiss={onDismiss} title="Add instance to group">
       <Modal.Body>
@@ -63,9 +70,20 @@ export default function AddAntiAffinityGroupMemberForm({ instances, onDismiss }:
               control={form.control}
             />
           </form>
+          {!canAddInstance && (
+            <Message
+              variant="notice"
+              content="An instance must be stopped to add it to a group"
+            />
+          )}
         </Modal.Section>
       </Modal.Body>
-      <Modal.Footer onDismiss={onDismiss} actionText="Add to group" formId={formId} />
+      <Modal.Footer
+        onDismiss={onDismiss}
+        actionText="Add to group"
+        formId={formId}
+        disabled={!canAddInstance}
+      />
     </Modal>
   )
 }

app/pages/project/instances/AntiAffinityCard.tsx

@@ -152,7 +152,7 @@ export function AntiAffinityCard() {
   })
 
   let disabledReason = undefined
-  if (!instanceCan.addToAntiAffinityGroup(instanceData)) {
+  if (!instanceCan.addToAffinityGroup(instanceData)) {
     disabledReason =
       <>Only <HL>stopped</HL> instances can be added to a group</> // prettier-ignore
   } else if (allGroups.items.length === 0) {

test/e2e/anti-affinity.e2e.ts

@@ -59,6 +59,7 @@ test('can add a new anti-affinity group', async ({ page }) => {
   const addInstanceButton = page.getByRole('button', { name: 'Add instance' })
   const addInstanceModal = page.getByRole('dialog', { name: 'Add instance to group' })
   const instanceCombobox = page.getByRole('combobox', { name: 'Instance' })
+  const modalAddButton = page.getByRole('button', { name: 'Add to group' })
 
   // open modal and pick instance
   await addInstanceButton.click()
@@ -72,10 +73,30 @@ test('can add a new anti-affinity group', async ({ page }) => {
   await expect(addInstanceModal).toBeHidden()
   await addInstanceButton.click()
   await expect(instanceCombobox).toHaveValue('')
+  await page.getByRole('option', { name: 'db1' }).click()
+  // the submit button should be disabled
+  await expect(modalAddButton).toBeDisabled()
+
+  // go disable db1
+  await page.getByRole('button', { name: 'Cancel' }).click()
+  await page.getByRole('link', { name: 'Instances' }).click()
+  clickRowAction(page, 'db1', 'Stop')
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'db1',
+    state: expect.stringContaining('stopped'),
+  })
 
-  // now do it again for real and submit
+  // go back to the anti-affinity group and add the instance
+  await page.getByRole('link', { name: 'Affinity' }).click()
+  await page.getByRole('link', { name: 'new-anti-affinity-group' }).click()
+  await addInstanceButton.click()
+  await expect(addInstanceModal).toBeVisible()
+  await instanceCombobox.fill('db1')
   await page.getByRole('option', { name: 'db1' }).click()
-  await page.getByRole('button', { name: 'Add to group' }).click()
+  await expect(instanceCombobox).toHaveValue('db1')
+  // the submit button should be enabled
+  await modalAddButton.click()
 
   const cell = page.getByRole('cell', { name: 'db1' })
   await expect(cell).toBeVisible()