Experimental stop instance in modal

Author: benjaminleonard

app/components/StopInstancePrompt.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 { useEffect, useState, type ReactNode } from 'react'
+
+import {
+  instanceTransitioning,
+  useApiMutation,
+  useApiQuery,
+  useApiQueryClient,
+  type Instance,
+} from '@oxide/api'
+
+import { HL } from '~/components/HL'
+import { addToast } from '~/stores/toast'
+import { Button } from '~/ui/lib/Button'
+import { Message } from '~/ui/lib/Message'
+
+const POLL_INTERVAL_FAST = 2000 // 2 seconds
+
+type StopInstancePromptProps = {
+  instance: Instance
+  children: ReactNode
+}
+
+export function StopInstancePrompt({ instance, children }: StopInstancePromptProps) {
+  const queryClient = useApiQueryClient()
+  const [isStoppingInstance, setIsStoppingInstance] = useState(false)
+
+  const { data } = useApiQuery(
+    'instanceView',
+    {
+      path: { instance: instance.name },
+      query: { project: instance.projectId },
+    },
+    {
+      refetchInterval:
+        isStoppingInstance || instanceTransitioning(instance) ? POLL_INTERVAL_FAST : false,
+    }
+  )
+
+  const { mutateAsync: stopInstanceAsync } = useApiMutation('instanceStop', {
+    onSuccess: () => {
+      setIsStoppingInstance(true)
+      addToast(
+        <>
+          Stopping instance <HL>{instance.name}</HL>
+        </>
+      )
+    },
+    onError: (error) => {
+      addToast({
+        variant: 'error',
+        title: `Error stopping instance '${instance.name}'`,
+        content: error.message,
+      })
+      setIsStoppingInstance(false)
+    },
+  })
+
+  const handleStopInstance = () => {
+    stopInstanceAsync({
+      path: { instance: instance.name },
+      query: { project: instance.projectId },
+    })
+  }
+
+  const currentInstance = data || instance
+
+  useEffect(() => {
+    if (!data) {
+      return
+    }
+    if (isStoppingInstance && data.runState === 'stopped') {
+      queryClient.invalidateQueries('instanceView')
+      setIsStoppingInstance(false)
+    }
+  }, [isStoppingInstance, data, queryClient])
+
+  if (
+    !currentInstance ||
+    (currentInstance.runState !== 'stopping' && currentInstance.runState !== 'running')
+  ) {
+    return null
+  }
+
+  return (
+    <Message
+      variant="notice"
+      content={
+        <>
+          {children}{' '}
+          <Button
+            size="xs"
+            className="mt-3"
+            variant="notice"
+            onClick={handleStopInstance}
+            loading={isStoppingInstance}
+          >
+            Stop instance
+          </Button>
+        </>
+      }
+    />
+  )
+}

app/forms/disk-attach.tsx

@@ -8,10 +8,11 @@
 import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { useApiQuery, type ApiError } from '@oxide/api'
+import { useApiQuery, type ApiError, type Instance } from '@oxide/api'
 
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { ModalForm } from '~/components/form/ModalForm'
+import { StopInstancePrompt } from '~/components/StopInstancePrompt'
 import { useProjectSelector } from '~/hooks/use-params'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { ALL_ISH } from '~/util/consts'
@@ -25,6 +26,7 @@ type AttachDiskProps = {
   diskNamesToExclude?: string[]
   loading?: boolean
   submitError?: ApiError | null
+  instance: Instance
 }
 
 /**
@@ -37,6 +39,7 @@ export function AttachDiskModalForm({
   diskNamesToExclude = [],
   loading = false,
   submitError = null,
+  instance,
 }: AttachDiskProps) {
   const { project } = useProjectSelector()
 
@@ -67,7 +70,13 @@ export function AttachDiskModalForm({
       title="Attach disk"
       onSubmit={onSubmit}
       width="medium"
+      submitDisabled={
+        instance.runState !== 'stopped' ? 'Instance must be stopped' : undefined
+      }
     >
+      <StopInstancePrompt instance={instance}>
+        An instance must be stopped to attach a disk.
+      </StopInstancePrompt>
       <ComboboxField
         label="Disk name"
         placeholder="Select a disk"

app/ui/lib/Button.tsx

@@ -13,13 +13,14 @@ import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { Wrap } from '~/ui/util/wrap'
 
-export const buttonSizes = ['sm', 'icon', 'base'] as const
-export const variants = ['primary', 'secondary', 'ghost', 'danger'] as const
+export const buttonSizes = ['xs', 'sm', 'icon', 'base'] as const
+export const variants = ['primary', 'secondary', 'ghost', 'danger', 'notice'] as const
 
 export type ButtonSize = (typeof buttonSizes)[number]
 export type Variant = (typeof variants)[number]
 
 const sizeStyle: Record<ButtonSize, string> = {
+  xs: 'h-6 px-2 text-mono-xs',
   sm: 'h-8 px-3 text-mono-sm [&>svg]:w-4',
   // meant for buttons that only contain a single icon
   icon: 'h-8 w-8 text-mono-sm [&>svg]:w-4',
@@ -115,7 +116,7 @@ export const Button = ({
             animate={{ opacity: 1, y: '-50%', x: '-50%' }}
             initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
             transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-            className="absolute left-1/2 top-1/2"
+            className="absolute left-1/2 top-1/2 flex items-center justify-center"
           >
             <Spinner variant={variant} />
           </m.span>

app/ui/styles/components/button.css

@@ -44,6 +44,10 @@
   @apply hidden;
 }
 
+.btn-notice.ox-button:after {
+  @apply opacity-40;
+}
+
 /**
  * A class to make it very visually obvious that a button style is missing
  */

app/ui/styles/components/spinner.css

@@ -13,6 +13,11 @@
   animation: rotate 5s linear infinite;
 }
 
+.spinner .path,
+.spinner .bg {
+  stroke: currentColor;
+}
+
 .spinner.spinner-md {
   --radius: 8;
   --circumference: calc(var(--PI) * var(--radius) * 2px);
@@ -27,7 +32,6 @@
   stroke-dasharray: var(--circumference);
   transform-origin: center;
   animation: dash 8s ease-in-out infinite;
-  stroke: var(--content-accent-tertiary);
 }
 
 @media (prefers-reduced-motion) {
@@ -50,24 +54,6 @@
   }
 }
 
-.spinner-ghost .bg,
-.spinner-secondary .bg {
-  stroke: var(--content-default);
-}
-
-.spinner-secondary .path {
-  stroke: var(--content-secondary);
-}
-
-.spinner-primary .bg {
-  stroke: var(--content-accent);
-}
-
-.spinner-danger .bg,
-.spinner-danger .path {
-  stroke: var(--content-destructive-tertiary);
-}
-
 @keyframes rotate {
   100% {
     transform: rotate(360deg);