diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index 09e4b8d7..8c9118a1 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/src/Components/ImagesTable/ImagesTable.tsx @@ -88,6 +88,7 @@ import { timestampToDisplayString, timestampToDisplayStringDetailed, } from '../../Utilities/time'; +import { AzureLaunchModal } from '../Launch/AzureLaunchModal'; import { OciLaunchModal } from '../Launch/OciLaunchModal'; const ImagesTable = () => { @@ -384,8 +385,14 @@ type AzureRowPropTypes = { }; const AzureRow = ({ compose, rowIndex }: AzureRowPropTypes) => { + const launchEofFlag = useFlag('image-builder.launcheof'); + const details = ; - const instance = ; + const instance = launchEofFlag ? ( + + ) : ( + + ); const status = ; return ( diff --git a/src/Components/Launch/AzureLaunchModal.tsx b/src/Components/Launch/AzureLaunchModal.tsx new file mode 100644 index 00000000..8cfba072 --- /dev/null +++ b/src/Components/Launch/AzureLaunchModal.tsx @@ -0,0 +1,116 @@ +import React, { Fragment, useState } from 'react'; + +import { + Button, + List, + ListComponent, + ListItem, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, + OrderType, + Skeleton, +} from '@patternfly/react-core'; +import { ExternalLinkAltIcon } from '@patternfly/react-icons'; + +import { + ComposesResponseItem, + useGetComposeStatusQuery, +} from '../../store/imageBuilderApi'; +import { isAzureUploadStatus } from '../../store/typeGuards'; + +type LaunchProps = { + compose: ComposesResponseItem; +}; + +export const AzureLaunchModal = ({ compose }: LaunchProps) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const { data, isSuccess, isFetching } = useGetComposeStatusQuery({ + composeId: compose.id, + }); + + if (!isSuccess) { + return ; + } + + const options = data?.image_status.upload_status?.options; + + if (options && !isAzureUploadStatus(options)) { + throw TypeError( + `Error: options must be of type AzureUploadStatus, not ${typeof options}.`, + ); + } + + const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { + setIsModalOpen(!isModalOpen); + }; + + return ( + + + + + + + + + Locate{' '} + {!isFetching && ( + + {options?.image_name}{' '} + + )} + {isFetching && } + in the{' '} + + . + + + Create a Virtual Machine (VM) by using the image. +
+ Note: Review the{' '} + + Availability Zone + {' '} + and the Size to + meet your requirements. Adjust these settings as needed. +
+
+
+ + + +
+
+ ); +}; diff --git a/src/Components/Launch/OciLaunchModal.tsx b/src/Components/Launch/OciLaunchModal.tsx index 8d9f93d6..fa129be3 100644 --- a/src/Components/Launch/OciLaunchModal.tsx +++ b/src/Components/Launch/OciLaunchModal.tsx @@ -72,7 +72,7 @@ export const OciLaunchModal = ({ isExpired, compose }: LaunchProps) => {