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

ImagesTable: add gcp info

Browse source 
When a gcp image is successfully uploaded the user needs to know the
project id, image name, and account the image is shared with. These are
now displayed in a popover accessible from the status section of the
images table.
This commit is contained in:
Jacob Kozol 2021-05-31 12:30:34 +02:00 • committed by Sanne Raymaekers
parent 3571a7b3c6
commit ebdfbbf57d
2 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@patternfly/react-core';
import { Button, TextContent, Text, TextVariants, Popover } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
const ImageLink = (props) => {
@ -41,6 +41,42 @@ const ImageLink = (props) => {
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">
Image details
</Button>
</Popover>
);
}
}

6
src/test/Components/ImagesTable/ImagesTable.test.js
View file

@ -183,7 +183,11 @@ const store = {
image_type: 'vhd',
upload_request: {
type: 'gcp',
options: {}
options: {
share_with_accounts: [
'serviceAccount:test@email.com'
]
}
}
}
],