ImagesTable: Add OCI images

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.

src/Components/ImagesTable/ImageDetails.tsx

@@ -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;
 };

src/Components/ImagesTable/ImagesTable.tsx

@@ -36,8 +36,9 @@ import {
   AwsS3Details,
   AzureDetails,
   GcpDetails,
+  OciDetails,
 } from './ImageDetails';
-import { AwsS3Instance, CloudInstance } from './Instance';
+import { AwsS3Instance, CloudInstance, OciInstance } from './Instance';
 import Release from './Release';
 import { AwsS3Status, CloudStatus } from './Status';
 import { AwsTarget, Target } from './Target';
@@ -281,6 +282,8 @@ const ImagesTableRow = ({ compose, rowIndex }: ImagesTableRowPropTypes) => {
       return <GcpRow compose={compose} rowIndex={rowIndex} />;
     case 'azure':
       return <AzureRow compose={compose} rowIndex={rowIndex} />;
+    case 'oci.objectstorage':
+      return <OciRow compose={compose} rowIndex={rowIndex} />;
     case 'aws.s3':
       return <AwsS3Row compose={compose} rowIndex={rowIndex} />;
   }
@@ -328,6 +331,27 @@ const AzureRow = ({ compose, rowIndex }: AzureRowPropTypes) => {
   );
 };
 
+type OciRowPropTypes = {
+  compose: ComposesResponseItem;
+  rowIndex: number;
+};
+
+const OciRow = ({ compose, rowIndex }: OciRowPropTypes) => {
+  const details = <OciDetails compose={compose} />;
+  const instance = <OciInstance compose={compose} />;
+  const status = <CloudStatus compose={compose} />;
+
+  return (
+    <Row
+      compose={compose}
+      rowIndex={rowIndex}
+      details={details}
+      instance={instance}
+      status={status}
+    />
+  );
+};
+
 type AwsS3RowPropTypes = {
   compose: ComposesResponseItem;
   rowIndex: number;

src/Components/ImagesTable/Instance.tsx

@@ -1,6 +1,19 @@
 import React, { Suspense, useState } from 'react';
 
-import { Button, Modal, ModalVariant, Skeleton } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  ClipboardCopy,
+  List,
+  ListComponent,
+  ListItem,
+  Modal,
+  ModalVariant,
+  OrderType,
+  Popover,
+  Skeleton,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { useLoadModule, useScalprum } from '@scalprum/react-core';
 import { useNavigate } from 'react-router-dom';
@@ -16,6 +29,7 @@ import {
   isAwsUploadRequestOptions,
   isAwss3UploadStatus,
   isGcpUploadRequestOptions,
+  isOciUploadStatus,
 } from '../../store/typeGuards';
 import { resolveRelPath } from '../../Utilities/path';
 import useProvisioningPermissions from '../../Utilities/useProvisioningPermissions';
@@ -164,6 +178,101 @@ const getImageProvider = (compose: ComposesResponseItem) => {
   }
 };
 
+type OciInstancePropTypes = {
+  compose: ComposesResponseItem;
+};
+
+export const OciInstance = ({ compose }: OciInstancePropTypes) => {
+  const { data, isSuccess, isFetching, isError } = useGetComposeStatusQuery({
+    composeId: compose.id,
+  });
+
+  if (!isSuccess) {
+    return <Skeleton />;
+  }
+
+  const options = data.image_status.upload_status?.options;
+
+  if (options && !isOciUploadStatus(options)) {
+    throw TypeError(
+      `Error: options must be of type OciUploadStatus, not ${typeof options}.`
+    );
+  }
+
+  return (
+    <Popover
+      position="bottom"
+      headerContent={<div>Launch an OCI image</div>}
+      bodyContent={
+        <>
+          <p>
+            To run the image copy the link below and follow the steps below:
+          </p>
+          <List component={ListComponent.ol} type={OrderType.number}>
+            <ListItem>
+              Go to &quot;Compute&quot; in Oracle Cloud and choose &quot;Custom
+              Images&quot;.
+            </ListItem>
+            <ListItem>
+              Click on &quot;Import image&quot;, choose &quot;Import from an
+              object storage URL&quot;.
+            </ListItem>
+            <ListItem>
+              Choose &quot;Import from an object storage URL&quot; and paste the
+              URL in the &quot;Object Storage URL&quot; field. The image type
+              has to be set to QCOW2 and the launch mode should be
+              paravirtualized.
+            </ListItem>
+          </List>
+          <br />
+          {isSuccess && (
+            <ClipboardCopy
+              hoverTip="Copy"
+              clickTip="Copied"
+              variant="inline-compact"
+              ouiaId="oci-link"
+              isBlock
+            >
+              {options?.url}
+            </ClipboardCopy>
+          )}
+          {isFetching && <Skeleton />}
+          {isError && (
+            <Alert
+              title="The link to launch the image could not be loaded. Please refresh
+              the page and try again."
+              variant="danger"
+              isPlain
+              isInline
+            />
+          )}
+          <br />
+          <Button
+            component="a"
+            target="_blank"
+            variant="link"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            // TO DO update the link after documentation is up
+            href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_images_by_using_insights_image_builder/customizing-file-systems-during-the-image-creation"
+            className="pf-u-pl-0"
+          >
+            Read more about launching OCI images
+          </Button>
+        </>
+      }
+    >
+      <Button
+        variant="link"
+        className="pf-u-p-0 pf-u-font-size-sm"
+        isDisabled={data?.image_status.status === 'success' ? false : true}
+      >
+        Image link
+      </Button>
+    </Popover>
+  );
+};
+
 type AwsS3InstancePropTypes = {
   compose: ComposesResponseItem;
   isExpired: boolean;
@@ -198,6 +307,7 @@ export const AwsS3Instance = ({
     'rhel-edge-commit': '',
     'rhel-edge-installer': '',
     vhd: '',
+    oci: '',
   };
 
   const status = composeStatus.image_status.status;

src/Components/ImagesTable/Target.tsx

@@ -23,6 +23,7 @@ const targetOptions: { [key in ImageTypes]: string } = {
   'rhel-edge-commit': 'RHEL Edge Commit',
   'rhel-edge-installer': 'RHEL Edge Installer',
   vhd: '',
+  oci: 'Oracle Cloud Infrastructure',
 };
 
 type TargetPropTypes = {