From cfb9f91309372036181962745903b2be02b66318 Mon Sep 17 00:00:00 2001 From: David Edler Date: Mon, 15 Apr 2024 21:06:47 +0200 Subject: [PATCH] fix(instance) ensure instance type is derived from image type also for custom images created from an instance snapshot. Kepp supporting iso volume quick links to the instance creation flow Signed-off-by: David Edler --- src/pages/images/CustomIsoModal.tsx | 2 +- src/pages/images/CustomIsoSelector.tsx | 2 +- src/pages/images/ImageSelector.tsx | 4 ++-- src/pages/images/actions/SelectImageBtn.tsx | 4 ++-- src/pages/images/actions/UseCustomIsoBtn.tsx | 4 ++-- src/pages/instances/CreateInstance.tsx | 16 +++++++--------- .../forms/InstanceCreateDetailsForm.tsx | 2 +- src/types/image.d.ts | 2 +- src/util/images.tsx | 3 ++- 9 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/pages/images/CustomIsoModal.tsx b/src/pages/images/CustomIsoModal.tsx index bd42bf14f..995a8851a 100644 --- a/src/pages/images/CustomIsoModal.tsx +++ b/src/pages/images/CustomIsoModal.tsx @@ -7,7 +7,7 @@ import { IsoImage } from "types/iso"; interface Props { onClose: () => void; - onSelect: (image: RemoteImage, type: LxdImageType | null) => void; + onSelect: (image: RemoteImage, type?: LxdImageType) => void; } const SELECT_ISO = "selectIso"; diff --git a/src/pages/images/CustomIsoSelector.tsx b/src/pages/images/CustomIsoSelector.tsx index 59a208684..164628cf4 100644 --- a/src/pages/images/CustomIsoSelector.tsx +++ b/src/pages/images/CustomIsoSelector.tsx @@ -12,7 +12,7 @@ import { useSupportedFeatures } from "context/useSupportedFeatures"; interface Props { primaryImage: IsoImage | null; - onSelect: (image: RemoteImage, type: LxdImageType | null) => void; + onSelect: (image: RemoteImage, type?: LxdImageType) => void; onUpload: () => void; onCancel: () => void; } diff --git a/src/pages/images/ImageSelector.tsx b/src/pages/images/ImageSelector.tsx index ca10169e1..3206ced5d 100644 --- a/src/pages/images/ImageSelector.tsx +++ b/src/pages/images/ImageSelector.tsx @@ -29,7 +29,7 @@ import { fetchImageList } from "api/images"; import { useParams } from "react-router-dom"; interface Props { - onSelect: (image: RemoteImage, type: LxdImageType | null) => void; + onSelect: (image: RemoteImage, type?: LxdImageType) => void; onClose: () => void; } @@ -53,7 +53,7 @@ const ImageSelector: FC = ({ onSelect, onClose }) => { const [os, setOs] = useState(""); const [release, setRelease] = useState(""); const [arch, setArch] = useState("amd64"); - const [type, setType] = useState(null); + const [type, setType] = useState(undefined); const [variant, setVariant] = useState(ANY); const { project } = useParams<{ project: string }>(); diff --git a/src/pages/images/actions/SelectImageBtn.tsx b/src/pages/images/actions/SelectImageBtn.tsx index ad92e69dd..8bb7ffe18 100644 --- a/src/pages/images/actions/SelectImageBtn.tsx +++ b/src/pages/images/actions/SelectImageBtn.tsx @@ -5,13 +5,13 @@ import { LxdImageType, RemoteImage } from "types/image"; import ImageSelector from "pages/images/ImageSelector"; interface Props { - onSelect: (image: RemoteImage, type: LxdImageType | null) => void; + onSelect: (image: RemoteImage, type?: LxdImageType) => void; } const SelectImageBtn: FC = ({ onSelect }) => { const { openPortal, closePortal, isOpen, Portal } = usePortal(); - const handleSelect = (image: RemoteImage, type: LxdImageType | null) => { + const handleSelect = (image: RemoteImage, type?: LxdImageType) => { closePortal(); onSelect(image, type); }; diff --git a/src/pages/images/actions/UseCustomIsoBtn.tsx b/src/pages/images/actions/UseCustomIsoBtn.tsx index 54ca0bd7e..a0b834dc6 100644 --- a/src/pages/images/actions/UseCustomIsoBtn.tsx +++ b/src/pages/images/actions/UseCustomIsoBtn.tsx @@ -5,13 +5,13 @@ import { LxdImageType, RemoteImage } from "types/image"; import CustomIsoModal from "pages/images/CustomIsoModal"; interface Props { - onSelect: (image: RemoteImage, type: LxdImageType | null) => void; + onSelect: (image: RemoteImage, type?: LxdImageType) => void; } const UseCustomIsoBtn: FC = ({ onSelect }) => { const { openPortal, closePortal, isOpen, Portal } = usePortal(); - const handleSelect = (image: RemoteImage, type: LxdImageType | null) => { + const handleSelect = (image: RemoteImage, type?: LxdImageType) => { closePortal(); onSelect(image, type); }; diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx index 5f9325663..56b969008 100644 --- a/src/pages/instances/CreateInstance.tsx +++ b/src/pages/instances/CreateInstance.tsx @@ -302,7 +302,7 @@ const CreateInstance: FC = () => { const isLocalIsoImage = formik.values.image?.server === LOCAL_ISO; - const handleSelectImage = (image: RemoteImage, type: LxdImageType | null) => { + const handleSelectImage = (image: RemoteImage, type?: LxdImageType) => { void formik.setFieldValue("image", image); const devices = formik.values.devices.filter( @@ -314,21 +314,19 @@ const CreateInstance: FC = () => { } void formik.setFieldValue("devices", devices); - if (isVmOnlyImage(image)) { + if (type) { + void formik.setFieldValue("instanceType", type); + } else if (isVmOnlyImage(image)) { void formik.setFieldValue("instanceType", "virtual-machine"); } else if (isContainerOnlyImage(image)) { void formik.setFieldValue("instanceType", "container"); - } else if (type) { - void formik.setFieldValue("instanceType", type); } }; useEffect(() => { - if (location.state?.selectedImage) { - const type = location.state.selectedImage.volume - ? "iso-volume" - : location.state.selectedImage.type ?? null; - handleSelectImage(location.state.selectedImage, type); + const imageFromLink = location.state?.selectedImage; + if (imageFromLink) { + handleSelectImage(imageFromLink, imageFromLink.type); } }, [location.state?.selectedImage]); diff --git a/src/pages/instances/forms/InstanceCreateDetailsForm.tsx b/src/pages/instances/forms/InstanceCreateDetailsForm.tsx index a550799b0..50362373f 100644 --- a/src/pages/instances/forms/InstanceCreateDetailsForm.tsx +++ b/src/pages/instances/forms/InstanceCreateDetailsForm.tsx @@ -73,7 +73,7 @@ export const instanceDetailPayload = (values: CreateInstanceFormValues) => { interface Props { formik: FormikProps; - onSelectImage: (image: RemoteImage, type: LxdImageType | null) => void; + onSelectImage: (image: RemoteImage, type?: LxdImageType) => void; project: string; } diff --git a/src/types/image.d.ts b/src/types/image.d.ts index 57d49cebc..f01948f49 100644 --- a/src/types/image.d.ts +++ b/src/types/image.d.ts @@ -1,6 +1,6 @@ import { LxdStorageVolume } from "types/storage"; -export type LxdImageType = "container" | "virtual-machine" | "iso-volume"; +export type LxdImageType = "container" | "virtual-machine"; interface LxdImageAlias { name: string; diff --git a/src/util/images.tsx b/src/util/images.tsx index 727f5bfd4..dbeca8806 100644 --- a/src/util/images.tsx +++ b/src/util/images.tsx @@ -2,7 +2,7 @@ import { LxdImage, RemoteImage } from "types/image"; import { LxdStorageVolume } from "types/storage"; export const isVmOnlyImage = (image: RemoteImage): boolean | undefined => { - if (image.server === LOCAL_ISO) { + if (image.server === LOCAL_ISO || image.type === "virtual-machine") { return true; } return image.variant?.includes("desktop"); @@ -32,6 +32,7 @@ export const isoToRemoteImage = (volume: LxdStorageVolume): RemoteImage => { pool: volume.pool, release: "-", server: LOCAL_ISO, + type: "virtual-machine", variant: "iso", created_at: new Date(volume.created_at).getTime(), volume: volume,