Hide launch button until image is built
Move the conditional render on the main ImageLink component. Also use destruct for props to streamline the usage of props.
This commit is contained in:
Ondrej Ezr
Sanne Raymaekers
parent
9c92da8bb3
commit
f3d44adf01
2 changed files with 119 additions and 106 deletions
|
|
@ -4,10 +4,20 @@ import { Button } from '@patternfly/react-core';
|
|||
import { useLoadModule, useScalprum } from '@scalprum/react-core';
|
||||
import ImageLinkDirect from './ImageLinkDirect';
|
||||
|
||||
const ImageLink = (props) => {
|
||||
const ImageLink = ({
|
||||
imageId,
|
||||
imageName,
|
||||
imageType,
|
||||
imageStatus,
|
||||
...props
|
||||
}) => {
|
||||
const scalprum = useScalprum();
|
||||
const hasProvisionig = scalprum.initialized && scalprum.config?.provisioning;
|
||||
if (hasProvisionig && props.imageType === 'ami') {
|
||||
const uploadStatus = imageStatus?.upload_status;
|
||||
|
||||
if (!uploadStatus) return null;
|
||||
|
||||
if (hasProvisionig && imageType === 'ami') {
|
||||
const [wizardOpen, openWizard] = React.useState(false);
|
||||
const [{ default: ProvisioningWizard }, error] = useLoadModule(
|
||||
{
|
||||
|
|
@ -30,7 +40,7 @@ const ImageLink = (props) => {
|
|||
<ProvisioningWizard
|
||||
isOpen
|
||||
onClose={() => openWizard(false)}
|
||||
image={{ name: props.imageName, id: props.imageId }}
|
||||
image={{ name: imageName, id: imageId }}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
|
|
@ -38,7 +48,13 @@ const ImageLink = (props) => {
|
|||
}
|
||||
}
|
||||
|
||||
return <ImageLinkDirect {...props} />;
|
||||
return (
|
||||
<ImageLinkDirect
|
||||
imageType={imageType}
|
||||
uploadStatus={uploadStatus}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ImageLink.propTypes = {
|
||||
|
|
@ -47,6 +63,8 @@ ImageLink.propTypes = {
|
|||
imageStatus: PropTypes.object,
|
||||
imageType: PropTypes.string,
|
||||
uploadOptions: PropTypes.object,
|
||||
isExpired: PropTypes.bool,
|
||||
recreateImage: PropTypes.object,
|
||||
};
|
||||
|
||||
export default ImageLink;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
import { DownloadIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
|
||||
import { resolveRelPath } from '../../Utilities/path';
|
||||
|
||||
const ImageLinkDirect = (props) => {
|
||||
const ImageLinkDirect = ({ uploadStatus, ...props }) => {
|
||||
const navigate = useNavigate();
|
||||
const fileExtensions = {
|
||||
vsphere: '.vmdk',
|
||||
|
|
@ -20,124 +20,119 @@ const ImageLinkDirect = (props) => {
|
|||
'image-installer': '.iso',
|
||||
};
|
||||
|
||||
const uploadStatus = props.imageStatus
|
||||
? props.imageStatus.upload_status
|
||||
: undefined;
|
||||
if (uploadStatus) {
|
||||
if (uploadStatus.type === 'aws') {
|
||||
const url =
|
||||
'https://console.aws.amazon.com/ec2/v2/home?region=' +
|
||||
uploadStatus.options.region +
|
||||
'#LaunchInstanceWizard:ami=' +
|
||||
uploadStatus.options.ami;
|
||||
if (uploadStatus.type === 'aws') {
|
||||
const url =
|
||||
'https://console.aws.amazon.com/ec2/v2/home?region=' +
|
||||
uploadStatus.options.region +
|
||||
'#LaunchInstanceWizard:ami=' +
|
||||
uploadStatus.options.ami;
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={url}
|
||||
>
|
||||
Launch instance
|
||||
</Button>
|
||||
);
|
||||
} else if (uploadStatus.type === 'azure') {
|
||||
const url =
|
||||
'https://portal.azure.com/#@' +
|
||||
props.uploadOptions.tenant_id +
|
||||
'/resource/subscriptions/' +
|
||||
props.uploadOptions.subscription_id +
|
||||
'/resourceGroups/' +
|
||||
props.uploadOptions.resource_group +
|
||||
'/providers/Microsoft.Compute/images/' +
|
||||
uploadStatus.options.image_name;
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={url}
|
||||
>
|
||||
View uploaded image
|
||||
</Button>
|
||||
);
|
||||
} else if (uploadStatus.type === 'gcp') {
|
||||
return (
|
||||
<Popover
|
||||
aria-label="Popover with google cloud platform image details"
|
||||
maxWidth="30rem"
|
||||
headerContent={'GCP image details'}
|
||||
bodyContent={
|
||||
<TextContent>
|
||||
<Text component={TextVariants.p}>
|
||||
To use an Image Builder created Google Cloud Platform (GCP) image
|
||||
in your project, specify the project ID and image name in your
|
||||
templates and configurations.
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Project ID</strong>
|
||||
<br />
|
||||
{uploadStatus.options.project_id}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Image Name</strong>
|
||||
<br />
|
||||
{uploadStatus.options.image_name}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Shared with</strong>
|
||||
<br />
|
||||
{/* the account the image is shared with is stored in the form type:account so this extracts the account */}
|
||||
{props.uploadOptions.share_with_accounts[0].split(':')[1]}
|
||||
</Text>
|
||||
</TextContent>
|
||||
}
|
||||
>
|
||||
<Button component="a" target="_blank" variant="link" isInline>
|
||||
Image details
|
||||
</Button>
|
||||
</Popover>
|
||||
);
|
||||
} else if (uploadStatus.type === 'aws.s3') {
|
||||
if (!props.isExpired) {
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
icon={<DownloadIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={url}
|
||||
href={uploadStatus.options.url}
|
||||
>
|
||||
Launch instance
|
||||
Download {fileExtensions[props.imageType]}
|
||||
</Button>
|
||||
);
|
||||
} else if (uploadStatus.type === 'azure') {
|
||||
const url =
|
||||
'https://portal.azure.com/#@' +
|
||||
props.uploadOptions.tenant_id +
|
||||
'/resource/subscriptions/' +
|
||||
props.uploadOptions.subscription_id +
|
||||
'/resourceGroups/' +
|
||||
props.uploadOptions.resource_group +
|
||||
'/providers/Microsoft.Compute/images/' +
|
||||
uploadStatus.options.image_name;
|
||||
} else {
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<ExternalLinkAltIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={url}
|
||||
>
|
||||
View uploaded image
|
||||
</Button>
|
||||
);
|
||||
} else if (uploadStatus.type === 'gcp') {
|
||||
return (
|
||||
<Popover
|
||||
aria-label="Popover with google cloud platform image details"
|
||||
maxWidth="30rem"
|
||||
headerContent={'GCP image details'}
|
||||
bodyContent={
|
||||
<TextContent>
|
||||
<Text component={TextVariants.p}>
|
||||
To use an Image Builder created Google Cloud Platform (GCP)
|
||||
image in your project, specify the project ID and image name in
|
||||
your templates and configurations.
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Project ID</strong>
|
||||
<br />
|
||||
{uploadStatus.options.project_id}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Image Name</strong>
|
||||
<br />
|
||||
{uploadStatus.options.image_name}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Shared with</strong>
|
||||
<br />
|
||||
{/* the account the image is shared with is stored in the form type:account so this extracts the account */}
|
||||
{props.uploadOptions.share_with_accounts[0].split(':')[1]}
|
||||
</Text>
|
||||
</TextContent>
|
||||
onClick={() =>
|
||||
navigate(resolveRelPath('/imagewizard'), {
|
||||
state: {
|
||||
composeRequest: props.recreateImage,
|
||||
initialStep: 'review',
|
||||
},
|
||||
})
|
||||
}
|
||||
isInline
|
||||
>
|
||||
<Button component="a" target="_blank" variant="link" isInline>
|
||||
Image details
|
||||
</Button>
|
||||
</Popover>
|
||||
Recreate image
|
||||
</Button>
|
||||
);
|
||||
} else if (uploadStatus.type === 'aws.s3') {
|
||||
if (!props.isExpired) {
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
icon={<DownloadIcon />}
|
||||
iconPosition="right"
|
||||
isInline
|
||||
href={uploadStatus.options.url}
|
||||
>
|
||||
Download {fileExtensions[props.imageType]}
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="link"
|
||||
onClick={() =>
|
||||
navigate(resolveRelPath('/imagewizard'), {
|
||||
state: {
|
||||
composeRequest: props.recreateImage,
|
||||
initialStep: 'review',
|
||||
},
|
||||
})
|
||||
}
|
||||
isInline
|
||||
>
|
||||
Recreate image
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,7 +140,7 @@ const ImageLinkDirect = (props) => {
|
|||
};
|
||||
|
||||
ImageLinkDirect.propTypes = {
|
||||
imageStatus: PropTypes.object,
|
||||
uploadStatus: PropTypes.object,
|
||||
imageType: PropTypes.string,
|
||||
isExpired: PropTypes.bool,
|
||||
recreateImage: PropTypes.object,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue