Create instance from existing boot disk (#2076)

* Create instance from existing boot disk * Remove setting undefined on tab change (for now) * Improve descriptions * copy tweaks * tweak empty states copy, fix diskList prefetch * Fix issue with sourceType overload on project vs silo images and disks (#2097) * Fix issue with sourceType collision on project vs silo images and disks * refactor * Refactoring, and updating types * Maintain state of fields across tab navigation (#2100) * Simplify test; make it work for Safari * Clean up and add comments * verify in test that correct image used * clean up comment * imageSize -> imageSizeGiB --------- Co-authored-by: David Crespo <[email protected]> Co-authored-by: Charlie Park <[email protected]>
oxidecomputer · Apr 3, 2024 · 2cfc8ee · 2cfc8ee
1 parent 11411bb
commit 2cfc8ee
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 98 deletions.
diff --git a/app/api/util.ts b/app/api/util.ts
@@ -118,6 +118,8 @@ export const diskCan = mapValues(
     delete: ['detached', 'creating', 'faulted'],
     // TODO: link to API source
     snapshot: ['attached', 'detached'],
+    // https://github.com/oxidecomputer/omicron/blob/4970c71e/nexus/db-queries/src/db/datastore/disk.rs#L169-L172
+    attach: ['creating', 'detached'],
   },
   (states: DiskState['state'][]) => {
     // only have to Pick because we want this to work for both Disk and

diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx
@@ -11,6 +11,7 @@ import type { Image } from '@oxide/api'
 
 import type { InstanceCreateInput } from '~/forms/instance-create'
 import type { ListboxItem } from '~/ui/lib/Listbox'
+import { nearest10 } from '~/util/math'
 import { bytesToGiB, GiB } from '~/util/units'
 
 import { ListboxField } from './ListboxField'
@@ -19,24 +20,30 @@ type ImageSelectFieldProps = {
   images: Image[]
   control: Control<InstanceCreateInput>
   disabled?: boolean
+  name: 'siloImageSource' | 'projectImageSource'
 }
 
-export function ImageSelectField({ images, control, disabled }: ImageSelectFieldProps) {
+export function BootDiskImageSelectField({
+  images,
+  control,
+  disabled,
+  name,
+}: ImageSelectFieldProps) {
   const diskSizeField = useController({ control, name: 'bootDiskSize' }).field
   return (
     <ListboxField
       disabled={disabled}
       control={control}
-      name="image"
+      name={name}
+      label="Image"
       placeholder="Select an image"
       items={images.map((i) => toListboxItem(i))}
       required
       onChange={(id) => {
         const image = images.find((i) => i.id === id)! // if it's selected, it must be present
         const imageSizeGiB = image.size / GiB
         if (diskSizeField.value < imageSizeGiB) {
-          const nearest10 = Math.ceil(imageSizeGiB / 10) * 10
-          diskSizeField.onChange(nearest10)
+          diskSizeField.onChange(nearest10(imageSizeGiB))
         }
       }}
     />