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

ImagesTable: Add OCI images

Browse source 
This adds a row for OCI images in the ImagesTable. Details about the images show UUID of the image and the Object Storage URL which is needed to deploy the image.

"Image link" button in the Instance column contains instrucion on how to run an OCI image built by Image Builder in Oracle Cloud. The documentation link in the popover is just a placeholder for now as the documentation is being prepared.

Until the build is finished the "Image link" button is disabled as it would be missing the Object Storage URL which is creating on upload.
This commit is contained in:
regexowl 2023-10-17 09:39:57 +02:00 • committed by Klara Simickova
parent fd61cd135b
commit b8372eeaf5
4 changed files with 198 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/Components/ImagesTable/ImageDetails.tsx
View file

@ -28,6 +28,7 @@ import {
isAzureUploadStatus,
isGcpUploadRequestOptions,
isGcpUploadStatus,
isOciUploadStatus,
} from '../../store/typeGuards';
const SourceNotFoundPopover = () => {
@ -361,6 +362,66 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
);
};
type OciDetailsPropTypes = {
compose: ComposesResponseItem;
};
export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
const { data: composeStatus } = useGetComposeStatusQuery({
composeId: compose.id,
});
const options = composeStatus?.image_status.upload_status?.options;
if (options && !isOciUploadStatus(options)) {
throw TypeError(
`Error: uploadStatus must be of type OciUploadStatus, not ${typeof options}.`
);
}
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>
<ClipboardCopy
hoverTip="Copy"
clickTip="Copied"
variant="inline-compact"
ouiaId="gcp-uuid"
>
{compose.id}
</ClipboardCopy>
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
<br />
<div className="pf-u-font-weight-bold pf-u-pb-md">
Cloud Provider Identifiers
</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>Object Storage URL</DescriptionListTerm>
<DescriptionListDescription>
{composeStatus?.image_status.status === 'success' && (
<ClipboardCopy
hoverTip="Copy"
clickTip="Copied"
variant="inline-compact"
isBlock
>
{options?.url}
</ClipboardCopy>
)}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</>
);
};
type AwsS3DetailsPropTypes = {
compose: ComposesResponseItem;
};