particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ImagesTable: Update Image commands popover for GCP images

Browse source 
This adds "Launch an instance" and "Save a copy" commands to the Image commands popover for GCP images.
This commit is contained in:
regexowl 2023-06-15 11:07:37 +02:00 • committed by Lucas Garfield
parent b171cd056d
commit 57be1e4a9d
2 changed files with 38 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/ImagesTable/ImageLink.js
View file

@ -47,7 +47,7 @@ const ProvisioningLink = ({ imageId, isExpired, isInClonesTable }) => {
const appendTo = useMemo(() => document.querySelector(MODAL_ANCHOR), []);
const provider = getImageProvider(image);
if (!error) {
if (!error && provider !== 'gcp') {
return (
<Suspense fallback="loading...">
<Button variant="link" isInline onClick={() => openWizard(true)}>

58
src/Components/ImagesTable/ImageLinkDirect.js
View file

@ -2,11 +2,12 @@ import React from 'react';
import {
Button,
ClipboardCopy,
ClipboardCopyVariant,
Divider,
Popover,
Text,
TextContent,
TextVariants,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import PropTypes from 'prop-types';
@ -19,6 +20,14 @@ import { selectImageById } from '../../store/composesSlice';
import { resolveRelPath } from '../../Utilities/path';
import BetaLabel from '../sharedComponents/BetaLabel';
const launchInstanceCommand = (uploadStatus) => {
return `gcloud compute instances create ${uploadStatus.options.image_name}-instance --image-project ${uploadStatus.options.project_id} --image ${uploadStatus.options.image_name}`;
};
const saveCopyCommand = (uploadStatus) => {
return `gcloud compute images create ${uploadStatus.options.image_name}-copy --source-image-project ${uploadStatus.options.project_id} --source-image ${uploadStatus.options.image_name}`;
};
const ImageLinkDirect = ({ imageId, isExpired, isInClonesTable }) => {
const navigate = useNavigate();
@ -110,37 +119,44 @@ const ImageLinkDirect = ({ imageId, isExpired, isInClonesTable }) => {
} else if (uploadStatus.type === 'gcp') {
return (
<Popover
aria-label="Popover with google cloud platform image details"
aria-label="Popover with google cloud platform image commands"
maxWidth="30rem"
headerContent={'GCP image details'}
headerContent={'Image commands'}
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>
<br />
<Text>
<strong>Project ID</strong>
<br />
{uploadStatus.options.project_id}
<strong>Launch an instance</strong>
</Text>
<ClipboardCopy
hoverTip="Copy"
clickTip="Copied"
ouiaId="gcp-launch-instance"
variant={ClipboardCopyVariant.expansion}
isReadOnly
isExpanded
>
{launchInstanceCommand(uploadStatus)}
</ClipboardCopy>
<br />
<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 */}
{image.uploadOptions.share_with_accounts[0].split(':')[1]}
<strong>Save a copy</strong>
</Text>
<ClipboardCopy
hoverTip="Copy"
clickTip="Copied"
ouiaId="gcp-save-copy"
variant={ClipboardCopyVariant.expansion}
isReadOnly
isExpanded
>
{saveCopyCommand(uploadStatus)}
</ClipboardCopy>
</TextContent>
}
>
<Button component="a" target="_blank" variant="link" isInline>
Image details
Image commands
</Button>
</Popover>
);