@flightctl/ui-components 1.0.2 → 1.1.0-rc1

package/src/components/ImageBuilds/ImageBuildAndExportStatus.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { TFunction } from 'react-i18next';
+
+import {
+  ImageBuildCondition,
+  ImageBuildConditionReason,
+  ImageBuildConditionType,
+  ImageBuildStatus,
+  ImageExportCondition,
+  ImageExportConditionReason,
+  ImageExportConditionType,
+  ImageExportStatus,
+} from '@flightctl/types/imagebuilder';
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusLevel } from '../../utils/status/common';
+import { StatusDisplayContent } from '../Status/StatusDisplay';
+import ImageUrl from './ImageUrl';
+
+type ImageBuildStatusProps = {
+  buildStatus?: ImageBuildStatus;
+};
+
+type ImageExportStatusProps = {
+  imageStatus?: ImageExportStatus;
+  imageReference?: string;
+};
+
+type LevelAndLabel = {
+  level: StatusLevel;
+  label: string;
+};
+
+const getImageBuildStatusInfo = (condition: ImageBuildCondition | undefined, t: TFunction): LevelAndLabel => {
+  // Without the Ready condition, the build wouldn't be even queued for processing.
+  if (!condition) {
+    return { level: 'unknown', label: t('Unknown') };
+  }
+
+  switch (condition.reason) {
+    case ImageBuildConditionReason.ImageBuildConditionReasonPending:
+      return { level: 'unknown', label: t('Queued') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonBuilding:
+      return { level: 'info', label: t('Building') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonPushing:
+      return { level: 'info', label: t('Pushing') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonCompleted:
+      return { level: 'success', label: t('Complete') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonFailed:
+      return { level: 'danger', label: t('Failed') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonCanceling:
+      return { level: 'warning', label: t('Canceling') };
+    case ImageBuildConditionReason.ImageBuildConditionReasonCanceled:
+      return { level: 'warning', label: t('Canceled') };
+    default:
+      return { level: 'unknown', label: t('Unknown') };
+  }
+};
+
+const getImageExportStatusInfo = (condition: ImageExportCondition | undefined, t: TFunction): LevelAndLabel => {
+  const reason = condition?.reason;
+  switch (reason) {
+    case ImageExportConditionReason.ImageExportConditionReasonPending:
+      // ImageExports will have a "pending" state while their associated imageBuild is incomplete.
+      return { level: 'unknown', label: t('Queued') };
+    case ImageExportConditionReason.ImageExportConditionReasonConverting:
+      // Main status while the export image is being generated
+      return { level: 'info', label: t('Converting') };
+    case ImageExportConditionReason.ImageExportConditionReasonPushing:
+      return { level: 'info', label: t('Pushing') };
+    case ImageExportConditionReason.ImageExportConditionReasonCompleted:
+      return { level: 'success', label: t('Complete') };
+    case ImageExportConditionReason.ImageExportConditionReasonFailed:
+      return { level: 'danger', label: t('Failed') };
+    case ImageExportConditionReason.ImageExportConditionReasonCanceling:
+      return { level: 'warning', label: t('Canceling') };
+    case ImageExportConditionReason.ImageExportConditionReasonCanceled:
+      return { level: 'warning', label: t('Canceled') };
+    default:
+      return { level: 'unknown', label: t('Unknown') };
+  }
+};
+
+const ImageBuildAndExportStatus = ({
+  level,
+  label,
+  message,
+  imageReference,
+}: {
+  level: StatusLevel;
+  label: string;
+  message: React.ReactNode | undefined;
+  imageReference: string | undefined;
+}) => {
+  const { t } = useTranslation();
+  if (imageReference) {
+    message = (
+      <Stack hasGutter>
+        <StackItem>{t('Image built successfully')}</StackItem>
+        <StackItem>
+          <ImageUrl imageReference={imageReference} />
+        </StackItem>
+      </Stack>
+    );
+  }
+
+  return <StatusDisplayContent label={label} level={level} message={message} />;
+};
+
+export const ImageBuildStatusDisplay = ({ buildStatus }: ImageBuildStatusProps) => {
+  const { t } = useTranslation();
+
+  const conditions = buildStatus?.conditions || [];
+  const readyCondition = conditions.find((c) => c.type === ImageBuildConditionType.ImageBuildConditionTypeReady);
+  const { level, label } = getImageBuildStatusInfo(readyCondition, t);
+
+  return (
+    <ImageBuildAndExportStatus
+      level={level}
+      label={label}
+      message={readyCondition?.message}
+      imageReference={buildStatus?.imageReference}
+    />
+  );
+};
+
+export const ImageExportStatusDisplay = ({ imageStatus, imageReference }: ImageExportStatusProps) => {
+  const { t } = useTranslation();
+
+  const conditions = imageStatus?.conditions || [];
+  const readyCondition = conditions.find((c) => c.type === ImageExportConditionType.ImageExportConditionTypeReady);
+  const { level, label } = getImageExportStatusInfo(readyCondition, t);
+
+  return (
+    <ImageBuildAndExportStatus
+      level={level}
+      label={label}
+      message={readyCondition?.message}
+      imageReference={imageReference}
+    />
+  );
+};

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { DropdownItem, DropdownList, Tab } from '@patternfly/react-core';
+
+import { ImageBuildConditionReason } from '@flightctl/types/imagebuilder';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
+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 DetailsPage from '../../DetailsPage/DetailsPage';
+import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
+import DeleteImageBuildModal from '../DeleteImageBuildModal/DeleteImageBuildModal';
+import { useImageBuild } from '../useImageBuilds';
+import TabsNav from '../../TabsNav/TabsNav';
+import { OciRegistriesContextProvider } from '../OciRegistriesContext';
+import ImageBuildYaml from './ImageBuildYaml';
+import ImageBuildDetailsTab from './ImageBuildDetailsTab';
+import ImageBuildExportsGallery from './ImageBuildExportsGallery';
+import ImageBuildLogsTab from './ImageBuildLogsTab';
+
+const imageBuildDetailsPermissions = [
+  { kind: RESOURCE.IMAGE_BUILD, verb: VERB.CREATE },
+  { kind: RESOURCE.IMAGE_BUILD, verb: VERB.DELETE },
+];
+
+const ImageBuildDetailsPageContent = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const {
+    router: { useParams, Routes, Route, Navigate },
+  } = useAppContext();
+
+  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;
+
+  return (
+    <DetailsPage
+      loading={isLoading}
+      error={error}
+      id={imageBuildId}
+      resourceLink={ROUTE.IMAGE_BUILDS}
+      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')} />
+          <Tab eventKey="exports" title={t('Export images')} />
+          <Tab eventKey="yaml" title={t('YAML')} />
+          <Tab eventKey="logs" title={t('Logs')} />
+        </TabsNav>
+      }
+      actions={
+        (canCreate || canDelete) && (
+          <DetailsPageActions>
+            <DropdownList>
+              {canCreate && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.IMAGE_BUILD_EDIT, postfix: imageBuildId })}>
+                  {buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed
+                    ? t('Retry')
+                    : t('Duplicate')}
+                </DropdownItem>
+              )}
+              {canDelete && (
+                <DropdownItem onClick={() => setIsDeleteModalOpen(true)}>{t('Delete image build')}</DropdownItem>
+              )}
+            </DropdownList>
+          </DetailsPageActions>
+        )
+      }
+    >
+      {imageBuild && (
+        <>
+          <Routes>
+            <Route index element={<Navigate to="details" replace />} />
+            <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} />} />
+          </Routes>
+          {isDeleteModalOpen && (
+            <DeleteImageBuildModal
+              imageBuildId={imageBuildId}
+              onClose={(hasDeleted?: boolean) => {
+                if (hasDeleted) {
+                  navigate(ROUTE.IMAGE_BUILDS);
+                }
+                setIsDeleteModalOpen(false);
+              }}
+            />
+          )}
+        </>
+      )}
+    </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 />
+    </PageWithPermissions>
+  );
+};
+
+export default ImageBuildDetailsWithPermissions;

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

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import {
+  CardBody,
+  CardTitle,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Icon,
+  Label,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+
+import { BindingType, ImageExport } from '@flightctl/types/imagebuilder';
+import { getDateDisplay } from '../../../utils/dates';
+import { getExportFormatLabel, getImageReference } from '../../../utils/imageBuilds';
+import { useTranslation } from '../../../hooks/useTranslation';
+import FlightCtlDescriptionList from '../../common/FlightCtlDescriptionList';
+import DetailsPageCard from '../../DetailsPage/DetailsPageCard';
+import { CERTIFICATE_VALIDITY_IN_YEARS } from '../../../constants';
+import { ImageBuildWithExports } from '../../../types/extraTypes';
+import { useOciRegistriesContext } from '../OciRegistriesContext';
+import { ImageBuildStatusDisplay } from '../ImageBuildAndExportStatus';
+import ImageUrl from '../ImageUrl';
+
+const ImageBuildDetailsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }) => {
+  const { t } = useTranslation();
+  const srcRepositoryName = imageBuild.spec.source.repository;
+  const dstRepositoryName = imageBuild.spec.destination.repository;
+
+  const { ociRegistries } = useOciRegistriesContext();
+  const isEarlyBinding = imageBuild.spec.binding.type === BindingType.BindingTypeEarly;
+
+  const hasExports = imageBuild.exportsCount > 0;
+  const existingImageExports = imageBuild.imageExports.filter(
+    (imageExport) => imageExport !== undefined,
+  ) as ImageExport[];
+
+  const srcImageReference = React.useMemo(() => {
+    return getImageReference(ociRegistries, imageBuild.spec.source) || '';
+  }, [ociRegistries, imageBuild.spec.source]);
+
+  const dstImageReference = React.useMemo(() => {
+    return getImageReference(ociRegistries, imageBuild.spec.destination) || '';
+  }, [ociRegistries, imageBuild.spec.destination]);
+
+  const remoteAccessUsername = imageBuild.spec.userConfiguration?.username || '';
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Grid hasGutter>
+          <GridItem span={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Build information')}</CardTitle>
+              <CardBody>
+                <FlightCtlDescriptionList isCompact isHorizontal>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Build status')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      <ImageBuildStatusDisplay buildStatus={imageBuild.status} />
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Created')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {getDateDisplay(imageBuild.metadata.creationTimestamp)}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                </FlightCtlDescriptionList>
+              </CardBody>
+            </DetailsPageCard>
+          </GridItem>
+          <GridItem span={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Registration')}</CardTitle>
+              <CardBody>
+                <FlightCtlDescriptionList isHorizontal isCompact>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Binding type')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {isEarlyBinding ? t('Early binding') : t('Late binding')}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                  {isEarlyBinding ? (
+                    <>
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>{t('Enrollment')}</DescriptionListTerm>
+                        <DescriptionListDescription>{t('Auto-create certificate')}</DescriptionListDescription>
+                      </DescriptionListGroup>
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>{t('Registration')}</DescriptionListTerm>
+                        <DescriptionListDescription>
+                          {t('{{ validityPeriod }} years (Standard)', {
+                            validityPeriod: CERTIFICATE_VALIDITY_IN_YEARS,
+                            count: CERTIFICATE_VALIDITY_IN_YEARS,
+                          })}
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    </>
+                  ) : (
+                    <>
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>{t('Registration')}</DescriptionListTerm>
+                        <DescriptionListDescription>
+                          <Flex>
+                            <FlexItem>
+                              <Icon status="info" size="sm">
+                                <InfoCircleIcon />
+                              </Icon>
+                            </FlexItem>
+                            <FlexItem>{t('Cloud-init and ignition are enabled automatically')}</FlexItem>
+                          </Flex>
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    </>
+                  )}
+                  {remoteAccessUsername && (
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>{t('Remote access')}</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        <Trans t={t}>
+                          Enabled for <strong>{remoteAccessUsername}</strong>
+                        </Trans>
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  )}
+                </FlightCtlDescriptionList>
+              </CardBody>
+            </DetailsPageCard>
+          </GridItem>
+          <GridItem span={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Source image')}</CardTitle>
+              <CardBody>
+                <FlightCtlDescriptionList isCompact isHorizontal>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Source repository')}</DescriptionListTerm>
+                    <DescriptionListDescription>{srcRepositoryName}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image name')}</DescriptionListTerm>
+                    <DescriptionListDescription>{imageBuild.spec.source.imageName}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image tag')}</DescriptionListTerm>
+                    <DescriptionListDescription>{imageBuild.spec.source.imageTag}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image reference URL')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      <ImageUrl imageReference={srcImageReference} />
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                </FlightCtlDescriptionList>
+              </CardBody>
+            </DetailsPageCard>
+          </GridItem>
+          <GridItem span={6}>
+            <DetailsPageCard>
+              <CardTitle>{t('Image output')}</CardTitle>
+              <CardBody>
+                <FlightCtlDescriptionList isCompact isHorizontal>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Target repository')}</DescriptionListTerm>
+                    <DescriptionListDescription>{dstRepositoryName}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image output name')}</DescriptionListTerm>
+                    <DescriptionListDescription>{imageBuild.spec.destination.imageName}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image output tag')}</DescriptionListTerm>
+                    <DescriptionListDescription>{imageBuild.spec.destination.imageTag}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Image reference URL')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      <ImageUrl imageReference={dstImageReference} />
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>{t('Export formats')}</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {hasExports
+                        ? existingImageExports.map((imageExport) => (
+                            <Label key={imageExport.spec.format} color="blue" className="pf-v6-u-mr-sm">
+                              {getExportFormatLabel(t, imageExport.spec.format)}
+                            </Label>
+                          ))
+                        : t('None')}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                </FlightCtlDescriptionList>
+              </CardBody>
+            </DetailsPageCard>
+          </GridItem>
+        </Grid>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default ImageBuildDetailsTab;

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

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Gallery } from '@patternfly/react-core';
+import { saveAs } from 'file-saver';
+
+import { ExportFormatType, ImageExport } from '@flightctl/types/imagebuilder';
+import { ImageBuildWithExports } from '../../../types/extraTypes';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+import { getImageExportResource } from '../CreateImageBuildWizard/utils';
+import { ViewImageBuildExportCard } from '../ImageExportCards';
+import { useOciRegistriesContext } from '../OciRegistriesContext';
+import { showSpinnerBriefly } from '../../../utils/time';
+import { getAllExportFormats, getExportDownloadResult, getImageReference } from '../../../utils/imageBuilds';
+
+type ImageBuildExportsGalleryProps = {
+  imageBuild: ImageBuildWithExports;
+  refetch: VoidFunction;
+};
+
+const REFRESH_IMAGE_BUILD_DELAY = 450;
+// Delay to keep loading state while browser processes redirect
+const DOWNLOAD_REDIRECT_DELAY = 1000;
+
+const createDownloadLink = (url: string) => {
+  const link = document.createElement('a');
+  link.href = url;
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const ImageBuildExportsGallery = ({ imageBuild, refetch }: ImageBuildExportsGalleryProps) => {
+  const { post, proxyFetch } = useFetch();
+  const [error, setError] = React.useState<{
+    format: ExportFormatType;
+    message: string;
+    mode: 'export' | 'download';
+  }>();
+  const { ociRegistries } = useOciRegistriesContext();
+  const [exportingFormat, setExportingFormat] = React.useState<ExportFormatType>();
+  const [downloadingFormat, setDownloadingFormat] = React.useState<ExportFormatType>();
+  const imageBuildId = imageBuild.metadata.name as string;
+
+  const handleExportImage = async (format: ExportFormatType) => {
+    setExportingFormat(format);
+    setError(undefined);
+    try {
+      const imageExport = getImageExportResource(imageBuildId, format);
+      await post<ImageExport>('imageexports', imageExport);
+      // The "Export image" button wouldn't be seen as spinning without this delay.
+      await showSpinnerBriefly(REFRESH_IMAGE_BUILD_DELAY);
+      refetch();
+    } 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);
+    }
+  };
+
+  const handleDownload = async (format: ExportFormatType) => {
+    const imageExport = imageBuild.imageExports.find((ie) => ie?.spec.format === format);
+    if (!imageExport) {
+      return;
+    }
+
+    setDownloadingFormat(format);
+    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);
+      }
+    } catch (err) {
+      setError({ format, message: getErrorMessage(err), mode: 'download' });
+    } finally {
+      setDownloadingFormat(undefined);
+    }
+  };
+
+  return (
+    <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;
+        return (
+          <ViewImageBuildExportCard
+            imageBuildId={imageBuildId}
+            key={format}
+            imageReference={imageReference}
+            format={format}
+            error={hasError ? error : null}
+            imageExport={imageExport}
+            isCreating={exportingFormat === format}
+            isDownloading={downloadingFormat === format}
+            isDisabled={isDisabled}
+            onDismissError={() => setError(undefined)}
+            onExportImage={handleExportImage}
+            onDownload={handleDownload}
+          />
+        );
+      })}
+    </Gallery>
+  );
+};
+
+export default ImageBuildExportsGallery;