Prototype: Stop instance disk modal

app/components/StopInstancePrompt.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { type ReactNode } from 'react'
+
+import { apiQueryClient, useApiMutation, 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'
+
+type StopInstancePromptProps = {
+  instance: Instance
+  children: ReactNode
+}
+
+export function StopInstancePrompt({ instance, children }: StopInstancePromptProps) {
+  const isStoppingInstance = instance.runState === 'stopping'
+
+  const stopInstance = useApiMutation('instanceStop', {
+    onSuccess: () => {
+      // trigger polling by the top level InstancePage one
+      apiQueryClient.invalidateQueries('instanceView')
+      addToast(<>Stopping instance <HL>{instance.name}</HL></>) // prettier-ignore
+    },
+    onError: (error) => {
+      addToast({
+        variant: 'error',
+        title: `Error stopping instance '${instance.name}'`,
+        content: error.message,
+      })
+    },
+  })
+
+  return (
+    <Message
+      variant="notice"
+      content={
+        <>
+          {children}{' '}
+          <Button
+            size="xs"
+            className="mt-3"
+            variant="notice"
+            onClick={() =>
+              stopInstance.mutateAsync({
+                path: { instance: instance.name },
+                query: { project: instance.projectId },
+              })
+            }
+            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 { instanceCan, 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()
 
@@ -66,7 +69,17 @@ export function AttachDiskModalForm({
       title="Attach disk"
       onSubmit={onSubmit}
       width="medium"
+      submitDisabled={
+        instance && !instanceCan.attachDisk(instance)
+          ? 'Instance must be stopped'
+          : undefined
+      }
     >
+      {instance && ['stopping', 'running'].includes(instance.runState) && (
+        <StopInstancePrompt instance={instance}>
+          An instance must be stopped to attach a disk.
+        </StopInstancePrompt>
+      )}
       <ComboboxField
         label="Disk name"
         placeholder="Select a disk"

app/pages/project/instances/StorageTab.tsx

@@ -334,18 +334,7 @@ export default function StorageTab() {
 
       <CardBlock>
         <CardBlock.Header title="Additional disks" titleId="other-disks-label">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={() => setShowDiskAttach(true)}
-            disabledReason={
-              <>
-                Instance must be <span className="text-raise">stopped</span> to attach a
-                disk
-              </>
-            }
-            disabled={!instanceCan.attachDisk(instance)}
-          >
+          <Button variant="secondary" size="sm" onClick={() => setShowDiskAttach(true)}>
             Attach existing disk
           </Button>
           <Button
@@ -393,6 +382,7 @@ export default function StorageTab() {
           }}
           loading={attachDisk.isPending}
           submitError={attachDisk.error}
+          instance={instance}
         />
       )}
     </div>

app/ui/lib/Button.tsx

@@ -13,13 +13,14 @@
 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,9 +116,9 @@
             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>
         )}
         <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);