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{' '}
+ }
+ iconPosition='right'
+ href={`https://portal.azure.com/#view/Microsoft_Azure_ComputeHub/ComputeHubMenuBlade/~/imagesBrowse`}
+ className='pf-v6-u-pl-0'
+ >
+ Azure console
+
+ .
+
+
+ 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) => {