@flightctl/ui-components 1.1.0-rc1 → 1.1.0-rc3

package/src/components/ImageBuilds/CreateImageBuildWizard/utils.ts

@@ -2,32 +2,148 @@ import { TFunction } from 'i18next';
 import * as Yup from 'yup';
 
 import {
+  ApiVersion,
   BindingType,
   ExportFormatType,
   ImageBuild,
   ImageBuildDestination,
   ImageBuildSource,
+  ImageBuildUserConfiguration,
   ImageExport,
   ResourceKind,
 } from '@flightctl/types/imagebuilder';
-import { API_VERSION } from '../../../constants';
+import { validImageBuildName } from '../../form/validations';
 import { ImageBuildFormValues } from './types';
 import { ImageBuildWithExports } from '../../../types/extraTypes';
 
-export const getValidationSchema = (t: TFunction) => {
-  return Yup.object<ImageBuildFormValues>({
-    source: Yup.object<ImageBuildSource>({
-      repository: Yup.string().required(t('Source repository is required')),
-      imageName: Yup.string().required(t('Image name is required')),
-      imageTag: Yup.string().required(t('Image tag is required')),
-    }).required(t('Source image is required')),
-    destination: Yup.object<ImageBuildDestination>({
-      repository: Yup.string().required(t('Target repository is required')),
-      imageName: Yup.string().required(t('Image name is required')),
-      imageTag: Yup.string().required(t('Image tag is required')),
-    }).required(t('Target image is required')),
-    bindingType: Yup.string<BindingType>().required(t('Binding type is required')),
+export const PUBLIC_KEY_MAX_LENGTH = 8 * 1024; // (8 KB)
+const VALID_SSH_PUBLIC_KEY_TYPES = [
+  'ssh-rsa',
+  'ssh-ed25519',
+  'ecdsa-sha2-nistp256',
+  'ecdsa-sha2-nistp384',
+  'ecdsa-sha2-nistp521',
+  'ssh-dss',
+];
+
+const SSH_PUBLIC_KEY_BASE64_DATA_REGEX = /^(?=.{50,}$)[A-Za-z0-9+/]+=*$/;
+// Characters that could be used for injection attacks
+const MALICIOUS_PUBLIC_KEY_CHARACTERS = /[;|&`()[\]{}<>"'\\\t$]/;
+
+const OCI_IMAGE_NAME_MAX_LENGTH = 255;
+const OCI_IMAGE_NAME_REGEX = /^[a-z0-9]+(?:[._-]+[a-z0-9]+)*(?:\/[a-z0-9]+(?:[._-]+[a-z0-9]+)*)*$/;
+const OCI_IMAGE_NAME_VALID_CHARS = /^[a-z0-9._/-]+$/;
+
+const OCI_IMAGE_TAG_MAX_LENGTH = 128;
+const OCI_IMAGE_TAG_REGEX = /^[\w][\w.-]{0,127}$/;
+const OCI_IMAGE_TAG_VALID_CHARS = /^[\w.-]+$/;
+
+/** Returns an error message for image name: invalid chars, or invalid format. */
+const getImageNameValidationError = (value: string, t: TFunction): string | undefined => {
+  if (!value) return undefined;
+  if (value.length > OCI_IMAGE_NAME_MAX_LENGTH) {
+    return t('Image name must not exceed {{max}} characters.', { max: OCI_IMAGE_NAME_MAX_LENGTH });
+  }
+  if (!OCI_IMAGE_NAME_VALID_CHARS.test(value)) {
+    return t('Image name may only contain alphanumeric characters, dots, underscores, hyphens, and slashes.');
+  }
+  if (!OCI_IMAGE_NAME_REGEX.test(value)) {
+    return t('Only alphanumeric characters are allowed at the start and end of each path component.');
+  }
+  return undefined;
+};
+
+const getImageTagValidationError = (value: string, t: TFunction): string | undefined => {
+  if (!value) return undefined;
+  if (value.length > OCI_IMAGE_TAG_MAX_LENGTH) {
+    return t('Image tag must not exceed {{max}} characters.', { max: OCI_IMAGE_TAG_MAX_LENGTH });
+  }
+  if (!OCI_IMAGE_TAG_VALID_CHARS.test(value)) {
+    return t('Image tag may only contain letters, numbers, underscores, dots, and hyphens.');
+  }
+  if (!OCI_IMAGE_TAG_REGEX.test(value)) {
+    return t('Image tag must start with a letter, number, or underscore.');
+  }
+  return undefined;
+};
+
+const getPublicKeyValidationError = (publicKey: string, t: TFunction): string | undefined => {
+  if (publicKey.length > PUBLIC_KEY_MAX_LENGTH) {
+    return t('SSH public key is too long');
+  }
+
+  // Allow newlines only at the end
+  const trimmedKey = publicKey.replace(/[\r\n]+$/g, '');
+  if (/[\r\n]/.test(trimmedKey)) {
+    return t('A single public key can be provided only');
+  }
+
+  if (MALICIOUS_PUBLIC_KEY_CHARACTERS.test(trimmedKey)) {
+    return t('Invalid SSH public key');
+  }
+
+  const parts = trimmedKey.trim().split(/\s+/);
+  if (parts.length < 2) {
+    return t('Invalid SSH public key format. Expected: "[TYPE] key [comment]"');
+  }
+
+  const keyType = parts[0];
+  if (!VALID_SSH_PUBLIC_KEY_TYPES.includes(keyType)) {
+    return t('Unsupported SSH public key type. Supported types: {{supportedTypes}}', {
+      supportedTypes: VALID_SSH_PUBLIC_KEY_TYPES.join(', '),
+    });
+  }
+
+  const base64Data = parts[1];
+  if (!SSH_PUBLIC_KEY_BASE64_DATA_REGEX.test(base64Data)) {
+    return t('Invalid SSH public key data');
+  }
+
+  return undefined;
+};
+
+const validImageBuildImageFields = (t: TFunction) =>
+  Yup.object<ImageBuildSource | ImageBuildDestination>({
+    repository: Yup.string().required(t('Repository is required')),
+    imageName: Yup.string()
+      .required(t('Image name is required'))
+      .test('oci-image-name', function (value) {
+        if (!value) return true;
+        const error = getImageNameValidationError(value, t);
+        return error ? this.createError({ message: error }) : true;
+      }),
+    imageTag: Yup.string()
+      .required(t('Image tag is required'))
+      .test('oci-image-tag', function (value) {
+        if (!value) return true;
+        const error = getImageTagValidationError(value, t);
+        return error ? this.createError({ message: error }) : true;
+      }),
   });
+
+export const getValidationSchema = (t: TFunction) => {
+  return Yup.lazy((values: ImageBuildFormValues) =>
+    Yup.object<ImageBuildFormValues>({
+      buildName: validImageBuildName(t),
+      source: validImageBuildImageFields(t).required(t('Source image is required')),
+      destination: validImageBuildImageFields(t).required(t('Target image is required')),
+      bindingType: Yup.string<BindingType>().required(t('Binding type is required')),
+      userConfiguration: Yup.object<ImageBuildUserConfiguration>({
+        username: values.remoteAccessEnabled ? Yup.string().required(t('Username is required')) : Yup.string(),
+        publickey: values.remoteAccessEnabled
+          ? Yup.string()
+              .required(t('SSH public key is required'))
+              .test('flightctl-ssh-public-key', function (publicKey) {
+                if (!publicKey) {
+                  return true;
+                }
+                const error = getPublicKeyValidationError(publicKey, t);
+                return error ? this.createError({ message: error }) : true;
+              })
+          : Yup.string(),
+      }),
+    }),
+  );
 };
 
 // Returns an array with one item per format (VMDK, QCOW2, ISO), where each item is either
@@ -84,32 +200,40 @@ export const toImageBuildWithExports = (imageBuild: ImageBuild): ImageBuildWithE
   };
 };
 
-export const getInitialValues = (imageBuild?: ImageBuildWithExports): ImageBuildFormValues => {
+const getExistingImageData = (image: ImageBuildSource | ImageBuildDestination, repoIds: Set<string>) => {
+  if (repoIds.has(image.repository)) {
+    return image;
+  }
+  // When copying the image build, drop the reference to the repository if it doesn't exist anymore
+  return {
+    ...image,
+    repository: '',
+  };
+};
+
+export const getInitialValues = (
+  imageBuild: ImageBuildWithExports | undefined,
+  repoIds: Set<string>,
+): ImageBuildFormValues => {
   if (imageBuild) {
     const exportFormats = imageBuild.imageExports
       .filter((ie): ie is ImageExport => ie !== undefined)
       .map((imageExport) => imageExport.spec.format);
     const userConfig = imageBuild.spec.userConfiguration;
-    const userConfiguration = userConfig
-      ? {
-          ...userConfig,
-          enabled: !!(userConfig.username || userConfig.publickey),
-        }
-      : {
-          username: '',
-          publickey: '',
-          enabled: false,
-        };
     return {
-      source: imageBuild.spec.source,
-      destination: imageBuild.spec.destination,
+      // Since we're always creating new imageBuilds, we don't copy the current name
+      buildName: '',
+      source: getExistingImageData(imageBuild.spec.source, repoIds),
+      destination: getExistingImageData(imageBuild.spec.destination, repoIds),
       bindingType: imageBuild.spec.binding.type as BindingType,
       exportFormats: exportFormats || [],
-      userConfiguration,
+      remoteAccessEnabled: !!(userConfig?.username || userConfig?.publickey),
+      userConfiguration: userConfig || { username: '', publickey: '' },
     };
   }
 
   return {
+    buildName: '',
     source: {
       repository: '',
       imageName: '',
@@ -122,10 +246,10 @@ export const getInitialValues = (imageBuild?: ImageBuildWithExports): ImageBuild
     },
     bindingType: BindingType.BindingTypeEarly,
     exportFormats: [],
+    remoteAccessEnabled: false,
     userConfiguration: {
       username: '',
       publickey: '',
-      enabled: false,
     },
   };
 };
@@ -136,13 +260,13 @@ const getHash = () =>
     .toString(16)
     .padStart(6, '0');
 
-const generateBuildName = () => `imagebuild-${getHash()}`;
 const generateExportName = (imageBuildName: string, format: ExportFormatType) => {
-  return `${imageBuildName}-${format}-${getHash()}`;
+  const formatKey = format === ExportFormatType.ExportFormatTypeQCOW2DiskContainer ? 'qcow2-disk' : format;
+  return `${imageBuildName}-${formatKey}-${getHash()}`;
 };
 
 export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild => {
-  const name = generateBuildName();
+  const name = values.buildName;
   const spec: ImageBuild['spec'] = {
     source: values.source,
     destination: values.destination,
@@ -152,9 +276,9 @@ export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild
   };
 
   // Allow the user to uncheck the toggle without having cleared the fields
-  const username = values.userConfiguration?.username || '';
-  const publickey = values.userConfiguration?.publickey || '';
-  if (values.userConfiguration?.enabled && username && publickey) {
+  const username = values.userConfiguration.username || '';
+  const publickey = values.userConfiguration.publickey || '';
+  if (values.remoteAccessEnabled && username && publickey) {
     spec.userConfiguration = {
       username,
       publickey,
@@ -162,7 +286,7 @@ export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild
   }
 
   return {
-    apiVersion: API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
     kind: ResourceKind.IMAGE_BUILD,
     metadata: {
       name,
@@ -175,7 +299,7 @@ export const getImageExportResource = (imageBuildName: string, format: ExportFor
   const exportName = generateExportName(imageBuildName, format);
 
   return {
-    apiVersion: API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
     kind: ResourceKind.IMAGE_EXPORT,
     metadata: {
       name: exportName,

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsPage.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import { useAppContext } from '../../../hooks/useAppContext';
-import { getImageBuildStatusReason } from '../../../utils/imageBuilds';
+import { getImageBuildStatusReason, isImageBuildCancelable } from '../../../utils/imageBuilds';
 import DetailsPage from '../../DetailsPage/DetailsPage';
 import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteImageBuildModal from '../DeleteImageBuildModal/DeleteImageBuildModal';
@@ -19,10 +19,14 @@ import ImageBuildYaml from './ImageBuildYaml';
 import ImageBuildDetailsTab from './ImageBuildDetailsTab';
 import ImageBuildExportsGallery from './ImageBuildExportsGallery';
 import ImageBuildLogsTab from './ImageBuildLogsTab';
+import CancelImageBuildModal from '../CancelImageBuildModal/CancelImageBuildModal';
 
 const imageBuildDetailsPermissions = [
   { kind: RESOURCE.IMAGE_BUILD, verb: VERB.CREATE },
+  { kind: RESOURCE.IMAGE_BUILD_CANCEL, verb: VERB.CREATE },
   { kind: RESOURCE.IMAGE_BUILD, verb: VERB.DELETE },
+  // Users that can view logs for imagebuilds also can view logs for imageexports
+  { kind: RESOURCE.IMAGE_BUILD_LOG, verb: VERB.GET },
 ];
 
 const ImageBuildDetailsPageContent = () => {
@@ -34,10 +38,17 @@ const ImageBuildDetailsPageContent = () => {
 
   const { imageBuildId } = useParams() as { imageBuildId: string };
   const [imageBuild, isLoading, error, refetch] = useImageBuild(imageBuildId);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState<boolean>();
   const { checkPermissions } = usePermissionsContext();
-  const [canCreate, canDelete] = checkPermissions(imageBuildDetailsPermissions);
   const buildReason = imageBuild ? getImageBuildStatusReason(imageBuild) : undefined;
+  const [canCreate, hasCancelPermission, canDelete, canViewLogs] = checkPermissions(imageBuildDetailsPermissions);
+  const canCancel = hasCancelPermission && buildReason && isImageBuildCancelable(buildReason);
+
+  const tabKeys = React.useMemo(
+    () => (canViewLogs ? ['details', 'exports', 'yaml', 'logs'] : ['details', 'exports', 'yaml']),
+    [canViewLogs],
+  );
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState<boolean>();
+  const [isCancelModalOpen, setIsCancelModalOpen] = React.useState<boolean>();
 
   return (
     <DetailsPage
@@ -48,11 +59,11 @@ const ImageBuildDetailsPageContent = () => {
       resourceType="Image builds"
       resourceTypeLabel={t('Image builds')}
       nav={
-        <TabsNav aria-label="Image build details tabs" tabKeys={['details', 'exports', 'yaml', 'logs']}>
-          <Tab eventKey="details" title={t('Image details')} />
+        <TabsNav aria-label="Image build details tabs" tabKeys={tabKeys}>
+          <Tab eventKey="details" title={t('Base image')} />
           <Tab eventKey="exports" title={t('Export images')} />
           <Tab eventKey="yaml" title={t('YAML')} />
-          <Tab eventKey="logs" title={t('Logs')} />
+          {canViewLogs && <Tab eventKey="logs" title={t('Logs')} />}
         </TabsNav>
       }
       actions={
@@ -66,7 +77,10 @@ const ImageBuildDetailsPageContent = () => {
                     : t('Duplicate')}
                 </DropdownItem>
               )}
-              {canDelete && (
+              {canCancel && (
+                <DropdownItem onClick={() => setIsCancelModalOpen(true)}>{t('Cancel image build')}</DropdownItem>
+              )}
+              {canDelete && !canCancel && (
                 <DropdownItem onClick={() => setIsDeleteModalOpen(true)}>{t('Delete image build')}</DropdownItem>
               )}
             </DropdownList>
@@ -81,7 +95,7 @@ const ImageBuildDetailsPageContent = () => {
             <Route path="details" element={<ImageBuildDetailsTab imageBuild={imageBuild} />} />
             <Route path="exports" element={<ImageBuildExportsGallery imageBuild={imageBuild} refetch={refetch} />} />
             <Route path="yaml" element={<ImageBuildYaml imageBuild={imageBuild} refetch={refetch} />} />
-            <Route path="logs" element={<ImageBuildLogsTab imageBuild={imageBuild} />} />
+            {canViewLogs && <Route path="logs" element={<ImageBuildLogsTab imageBuild={imageBuild} />} />}
           </Routes>
           {isDeleteModalOpen && (
             <DeleteImageBuildModal
@@ -94,26 +108,31 @@ const ImageBuildDetailsPageContent = () => {
               }}
             />
           )}
+          {isCancelModalOpen && (
+            <CancelImageBuildModal
+              imageBuildId={imageBuildId}
+              onClose={(confirmed) => {
+                setIsCancelModalOpen(false);
+                if (confirmed) {
+                  refetch();
+                }
+              }}
+            />
+          )}
         </>
       )}
     </DetailsPage>
   );
 };
 
-const ImageBuildDetailsPage = () => {
-  return (
-    <OciRegistriesContextProvider>
-      <ImageBuildDetailsPageContent />
-    </OciRegistriesContextProvider>
-  );
-};
-
 const ImageBuildDetailsWithPermissions = () => {
   const { checkPermissions, loading } = usePermissionsContext();
   const [allowed] = checkPermissions([{ kind: RESOURCE.IMAGE_BUILD, verb: VERB.GET }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
-      <ImageBuildDetailsPage />
+      <OciRegistriesContextProvider>
+        <ImageBuildDetailsPageContent />
+      </OciRegistriesContextProvider>
     </PageWithPermissions>
   );
 };

package/src/components/ImageBuilds/ImageBuildDetails/ImageBuildExportsGallery.tsx

@@ -2,15 +2,20 @@ import * as React from 'react';
 import { Gallery } from '@patternfly/react-core';
 import { saveAs } from 'file-saver';
 
-import { ExportFormatType, ImageExport } from '@flightctl/types/imagebuilder';
+import { ExportFormatType, ImageBuildConditionReason, ImageExport } from '@flightctl/types/imagebuilder';
 import { ImageBuildWithExports } from '../../../types/extraTypes';
+import { getImageBuildStatusReason } from '../../../utils/imageBuilds';
+import { RESOURCE, VERB } from '../../../types/rbac';
 import { useFetch } from '../../../hooks/useFetch';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { getErrorMessage } from '../../../utils/error';
 import { getImageExportResource } from '../CreateImageBuildWizard/utils';
-import { ViewImageBuildExportCard } from '../ImageExportCards';
+import { ImageExportAction, ViewImageBuildExportCard } from '../ImageExportCards';
 import { useOciRegistriesContext } from '../OciRegistriesContext';
 import { showSpinnerBriefly } from '../../../utils/time';
 import { getAllExportFormats, getExportDownloadResult, getImageReference } from '../../../utils/imageBuilds';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { IMAGE_EXPORT_ID_PARAM } from './ImageBuildLogsTab';
 
 type ImageBuildExportsGalleryProps = {
   imageBuild: ImageBuildWithExports;
@@ -21,6 +26,8 @@ const REFRESH_IMAGE_BUILD_DELAY = 450;
 // Delay to keep loading state while browser processes redirect
 const DOWNLOAD_REDIRECT_DELAY = 1000;
 
+const createExportAliases = ['retry', 'rebuild', 'createExport'];
+
 const createDownloadLink = (url: string) => {
   const link = document.createElement('a');
   link.href = url;
@@ -30,21 +37,69 @@ const createDownloadLink = (url: string) => {
   document.body.removeChild(link);
 };
 
+const imageBuildExportsPermissions = [
+  { kind: RESOURCE.IMAGE_EXPORT, verb: VERB.CREATE },
+  { kind: RESOURCE.IMAGE_EXPORT, verb: VERB.DELETE },
+  { kind: RESOURCE.IMAGE_EXPORT_LOG, verb: VERB.GET },
+  { kind: RESOURCE.IMAGE_EXPORT_DOWNLOAD, verb: VERB.GET },
+  { kind: RESOURCE.IMAGE_EXPORT_CANCEL, verb: VERB.CREATE },
+];
+
 const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGalleryProps) => {
-  const { post, proxyFetch } = useFetch();
+  const { post, proxyFetch, remove } = useFetch();
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateExport, canDelete, canViewLogs, canDownload, canCancel] =
+    checkPermissions(imageBuildExportsPermissions);
+
+  const buildReason = getImageBuildStatusReason(imageBuild);
+
+  const actionPermissions = React.useMemo(() => {
+    const actions: ImageExportAction[] = [];
+    if (
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed ||
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonCanceled ||
+      buildReason === ImageBuildConditionReason.ImageBuildConditionReasonCanceling
+    ) {
+      if (canDelete) {
+        actions.push('delete');
+      }
+      return actions;
+    }
+
+    if (canCreateExport) {
+      actions.push('createExport');
+      actions.push('rebuild');
+      actions.push('retry');
+    }
+    if (canDelete) {
+      actions.push('delete');
+    }
+    if (canViewLogs) {
+      actions.push('viewLogs');
+    }
+    if (canDownload) {
+      actions.push('download');
+    }
+    if (canCancel) {
+      actions.push('cancel');
+    }
+    return actions;
+  }, [buildReason, canCreateExport, canDelete, canViewLogs, canDownload, canCancel]);
+
+  const navigate = useNavigate();
   const [error, setError] = React.useState<{
     format: ExportFormatType;
+    action: ImageExportAction;
     message: string;
-    mode: 'export' | 'download';
   }>();
   const { ociRegistries } = useOciRegistriesContext();
-  const [exportingFormat, setExportingFormat] = React.useState<ExportFormatType>();
-  const [downloadingFormat, setDownloadingFormat] = React.useState<ExportFormatType>();
+
+  const [activeFormatAction, setActiveFormatAction] = React.useState<
+    { format: ExportFormatType; action: ImageExportAction } | undefined
+  >();
   const imageBuildId = imageBuild.metadata.name as string;
 
-  const handleExportImage = async (format: ExportFormatType) => {
-    setExportingFormat(format);
-    setError(undefined);
+  const handleCreateNewExport = async (format: ExportFormatType) => {
     try {
       const imageExport = getImageExportResource(imageBuildId, format);
       await post<ImageExport>('imageexports', imageExport);
@@ -54,44 +109,79 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
     } catch (error) {
       // If process failed, it was likely very fast, so we also add the delay in this case.
       await showSpinnerBriefly(REFRESH_IMAGE_BUILD_DELAY);
-
-      setError({ format, message: getErrorMessage(error), mode: 'export' });
-    } finally {
-      setExportingFormat(undefined);
+      throw error;
     }
   };
+  const handleDownload = async (ieName: string, format: ExportFormatType) => {
+    const response = await proxyFetch(`imagebuilder/api/v1/imageexports/${ieName}/download`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const downloadResult = await getExportDownloadResult(response);
+    if (downloadResult === null) {
+      await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
+      throw new Error(`Download failed: ${response.status} ${response.statusText}`);
+    }
+    if (downloadResult.type === 'redirect') {
+      createDownloadLink(downloadResult.url);
+      await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
+    } else {
+      const defaultFilename = `image-export-${ieName}.${format}`;
+      saveAs(downloadResult.blob, downloadResult.filename || defaultFilename);
+    }
+  };
+
+  const handleCancel = async (ieName: string) => {
+    await post(`imageexports/${ieName}/cancel`, {});
+    await showSpinnerBriefly(REFRESH_IMAGE_BUILD_DELAY);
+    refetch();
+  };
+
+  const handleDelete = async (ieName: string) => {
+    await remove(`imageexports/${ieName}`);
+    await showSpinnerBriefly(REFRESH_IMAGE_BUILD_DELAY);
+    refetch();
+  };
 
-  const handleDownload = async (format: ExportFormatType) => {
+  const handleCardAction = async ({ format, action }: { format: ExportFormatType; action: ImageExportAction }) => {
     const imageExport = imageBuild.imageExports.find((ie) => ie?.spec.format === format);
-    if (!imageExport) {
+    if (!imageExport && !createExportAliases.includes(action)) {
       return;
     }
 
-    setDownloadingFormat(format);
+    setActiveFormatAction({ format, action });
+    setError(undefined);
+
     try {
-      const ieName = imageExport.metadata.name as string;
-      const downloadEndpoint = `imagebuilder/api/v1/imageexports/${ieName}/download`;
-      const response = await proxyFetch(downloadEndpoint, {
-        method: 'GET',
-        credentials: 'include',
-        redirect: 'manual', // Prevent automatic redirect following to avoid CORS issues
-      });
-
-      const downloadResult = await getExportDownloadResult(response);
-      if (downloadResult === null) {
-        await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
-        throw new Error(`Download failed: ${response.status} ${response.statusText}`);
-      } else if (downloadResult.type === 'redirect') {
-        createDownloadLink(downloadResult.url);
-        await showSpinnerBriefly(DOWNLOAD_REDIRECT_DELAY);
-      } else {
-        const defaultFilename = `image-export-${ieName}.${format}`;
-        saveAs(downloadResult.blob, downloadResult.filename || defaultFilename);
+      const ieName = imageExport?.metadata.name as string;
+      switch (action) {
+        case 'createExport':
+        case 'retry':
+        case 'rebuild':
+          await handleCreateNewExport(format);
+          break;
+        case 'download':
+          await handleDownload(ieName, format);
+          break;
+        case 'cancel':
+          await handleCancel(ieName);
+          break;
+        case 'delete':
+          await handleDelete(ieName);
+          break;
+        case 'viewLogs': {
+          const searchParams = new URLSearchParams({
+            [IMAGE_EXPORT_ID_PARAM]: ieName,
+          });
+          navigate({ route: ROUTE.IMAGE_BUILD_DETAILS, postfix: `${imageBuildId}/logs?${searchParams.toString()}` });
+          break;
+        }
       }
-    } catch (err) {
-      setError({ format, message: getErrorMessage(err), mode: 'download' });
+    } catch (error) {
+      setError({ format, message: getErrorMessage(error), action });
+      refetch();
     } finally {
-      setDownloadingFormat(undefined);
+      setActiveFormatAction(undefined);
     }
   };
 
@@ -99,26 +189,23 @@ const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGall
     <Gallery hasGutter minWidths={{ default: '350px' }}>
       {getAllExportFormats().map((format) => {
         const imageExport = imageBuild.imageExports.find((imageExport) => imageExport?.spec.format === format);
-        const isDisabled = exportingFormat && exportingFormat !== format;
         // We can only link to the generic destination for the image build.
         // The individual export artifacts are references to this generic output image.
         const imageReference = getImageReference(ociRegistries, imageBuild.spec.destination);
 
         const hasError = error?.format === format;
+        const activeAction = activeFormatAction?.format === format ? activeFormatAction.action : undefined;
         return (
           <ViewImageBuildExportCard
-            imageBuildId={imageBuildId}
             key={format}
             imageReference={imageReference}
             format={format}
             error={hasError ? error : null}
             imageExport={imageExport}
-            isCreating={exportingFormat === format}
-            isDownloading={downloadingFormat === format}
-            isDisabled={isDisabled}
+            activeAction={activeAction}
             onDismissError={() => setError(undefined)}
-            onExportImage={handleExportImage}
-            onDownload={handleDownload}
+            onCardAction={handleCardAction}
+            actionPermissions={actionPermissions}
           />
         );
       })}