@flightctl/ui-components 1.0.2 → 1.1.0-rc4

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

@@ -0,0 +1,269 @@
+import * as React from 'react';
+import {
+  Alert,
+  Bullseye,
+  Card,
+  CardBody,
+  Divider,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  MenuToggle,
+  Select,
+  Spinner,
+  Stack,
+  StackItem,
+  TextArea,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+
+import { ExportFormatType, ImageBuildConditionReason, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
+import { useTranslation } from '../../../hooks/useTranslation';
+import {
+  getExportFormatLabel,
+  getImageBuildStatusReason,
+  getImageExportStatusReason,
+  isImageBuildActiveReason,
+  isImageExportActiveReason,
+} from '../../../utils/imageBuilds';
+import { ImageBuildWithExports } from '../../../types/extraTypes';
+import { LogResourceType, useImageBuildLogs } from '../useImageBuildLogs';
+import { StatusDisplayContent } from '../../Status/StatusDisplay';
+import { StatusLevel } from '../../../utils/status/common';
+import { useAppContext } from '../../../hooks/useAppContext';
+
+export const IMAGE_EXPORT_ID_PARAM = 'exportId';
+
+type LogEntity = {
+  type: LogResourceType;
+  id: string;
+  label: string;
+  isActive: boolean;
+  status: ImageBuildConditionReason | ImageExportConditionReason;
+};
+
+const ImageBuildAndExportLogStatus = ({
+  status,
+}: {
+  status: ImageBuildConditionReason | ImageExportConditionReason;
+}) => {
+  const { t } = useTranslation();
+  let label: string;
+  let level: StatusLevel;
+  if (status === ImageBuildConditionReason.ImageBuildConditionReasonCompleted) {
+    level = 'success';
+    label = t('Completed');
+  } else if (status === ImageBuildConditionReason.ImageBuildConditionReasonFailed) {
+    level = 'danger';
+    label = t('Failed');
+  } else if (
+    status === ImageBuildConditionReason.ImageBuildConditionReasonCanceling ||
+    status === ImageBuildConditionReason.ImageBuildConditionReasonCanceled
+  ) {
+    level = 'warning';
+    label = t('Canceled');
+  } else {
+    level = 'info';
+    label = t('In progress');
+  }
+  return <StatusDisplayContent label={label} level={level} />;
+};
+
+const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }) => {
+  const { t } = useTranslation();
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams] = useSearchParams();
+  const [isLogSelectOpen, setIsLogSelectOpen] = React.useState(false);
+  const logsRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const buildName = imageBuild.metadata.name as string;
+
+  const { selectableEntities, hasExports } = React.useMemo(() => {
+    const entities: LogEntity[] = [];
+
+    const buildReason = getImageBuildStatusReason(imageBuild);
+    entities.push({
+      type: LogResourceType.BUILD,
+      id: buildName,
+      label: t('Image build'),
+      isActive: isImageBuildActiveReason(buildReason),
+      status: buildReason,
+    });
+
+    // ImageExports can only exist once the ImageBuild is complete
+    if (buildReason !== ImageBuildConditionReason.ImageBuildConditionReasonCompleted) {
+      return { selectableEntities: entities, availableExportFormats: [] as ExportFormatType[], failedExportsCount: 0 };
+    }
+
+    let hasExports = false;
+    imageBuild.imageExports.forEach((ie) => {
+      const format = ie?.spec.format;
+      if (format) {
+        const exportReason = getImageExportStatusReason(ie);
+        hasExports = true;
+        entities.push({
+          type: LogResourceType.EXPORT,
+          id: ie.metadata.name as string,
+          label: getExportFormatLabel(t, format),
+          isActive: isImageExportActiveReason(exportReason),
+          status: exportReason,
+        });
+      }
+    });
+    return {
+      selectableEntities: entities,
+      hasExports,
+    };
+  }, [imageBuild, buildName, t]);
+
+  const [selectedEntityId, setSelectedEntityId] = React.useState<string>(() => {
+    const selectedId = searchParams.get(IMAGE_EXPORT_ID_PARAM);
+    if (selectedId && selectableEntities.some((e) => e.id === selectedId)) {
+      return selectedId;
+    }
+    return buildName;
+  });
+  const selectedEntity = selectableEntities.find((entity) => entity.id === selectedEntityId) || selectableEntities[0];
+  const { logs, isLoading, error, isStreaming } = useImageBuildLogs(
+    selectedEntity.id,
+    selectedEntity.type,
+    selectedEntity.isActive,
+  );
+
+  const onLogSourceSelected = React.useCallback(
+    (_event: React.MouseEvent | undefined, value: string | number | undefined) => {
+      if (value) {
+        setSelectedEntityId(value as string);
+      }
+      setIsLogSelectOpen(false);
+    },
+    [],
+  );
+
+  React.useEffect(() => {
+    // For live logs (when they are streaming), we auto-scroll to the bottom.
+    // For completed logs, we show the logs with scroll at the top
+    if (logsRef.current && logs && isStreaming) {
+      logsRef.current.scrollTop = logsRef.current.scrollHeight;
+    }
+  }, [logs, isStreaming]);
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardBody>
+          <Bullseye>
+            <Spinner size="xl" />
+          </Bullseye>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardBody>
+          <Alert variant="danger" title={t('Failed to load logs')}>
+            {error.message}
+          </Alert>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Alert variant="info" title={t('For built and failed export tasks, only the last 500 lines are available.')} />
+      </StackItem>
+      <StackItem>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarGroup align={{ default: 'alignStart' }}>
+              <ToolbarItem>
+                <Select
+                  toggle={(toggleRef: React.RefObject<HTMLButtonElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      onClick={() => setIsLogSelectOpen(!isLogSelectOpen)}
+                      isExpanded={isLogSelectOpen}
+                    >
+                      {selectedEntity.label}
+                    </MenuToggle>
+                  )}
+                  shouldFocusToggleOnSelect
+                  onSelect={onLogSourceSelected}
+                  selected={selectedEntityId}
+                  isOpen={isLogSelectOpen}
+                  onOpenChange={(isOpen) => setIsLogSelectOpen(isOpen)}
+                >
+                  <MenuContent>
+                    <MenuGroup label={t('Image build')} labelHeadingLevel="h3">
+                      <MenuList>
+                        {selectableEntities
+                          .filter((entity) => entity.type === LogResourceType.BUILD)
+                          .map((entity) => (
+                            <MenuItem key={entity.id} itemId={entity.id} isSelected={selectedEntityId === entity.id}>
+                              {entity.id}
+                            </MenuItem>
+                          ))}
+                      </MenuList>
+                    </MenuGroup>
+                    <Divider />
+                    <MenuGroup label={t('Export image')} labelHeadingLevel="h3">
+                      <MenuList>
+                        {selectableEntities
+                          .filter((entity) => entity.type === LogResourceType.EXPORT)
+                          .map((entity) => (
+                            <MenuItem
+                              key={entity.id}
+                              itemId={entity.id}
+                              isSelected={selectedEntityId === entity.id}
+                              description={entity.id}
+                            >
+                              {entity.label}
+                            </MenuItem>
+                          ))}
+                        {!hasExports && (
+                          <MenuItem key="all" itemId="all" isSelected={selectedEntityId === 'all'} isDisabled>
+                            {t('Export tasks logs are only available after the image build is completed')}
+                          </MenuItem>
+                        )}
+                      </MenuList>
+                    </MenuGroup>
+                  </MenuContent>
+                </Select>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarGroup align={{ default: 'alignEnd' }}>
+              <ToolbarItem>
+                <ImageBuildAndExportLogStatus status={selectedEntity.status} />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
+      </StackItem>
+
+      <StackItem>
+        <Divider />
+        <TextArea
+          aria-label={t('Image build logs')}
+          style={{ height: '70vh' }}
+          ref={logsRef}
+          value={logs || ''}
+          readOnly
+          resizeOrientation="vertical"
+        />
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default ImageBuildLogsTab;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { ImageBuild } from '@flightctl/types/imagebuilder';
+import { useTranslation } from '../../../hooks/useTranslation';
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
+import { ImageBuildWithExports } from '../../../types/extraTypes';
+
+// In the YAML editor, we must have the raw ImageBuild object
+// For that reason, we must remove the fields we add to "ImageBuildWithExports"
+const ImageBuildYaml = ({ imageBuild, refetch }: { imageBuild: ImageBuildWithExports; refetch: VoidFunction }) => {
+  const { t } = useTranslation();
+  const rawImageBuild = { ...imageBuild, imageExports: undefined, exportsCount: undefined } as ImageBuild;
+  return (
+    <YamlEditor
+      apiObj={rawImageBuild}
+      refetch={refetch}
+      disabledEditReason={t('Image builds cannot be edited. Use Retry to create a new image build based on this one.')}
+    />
+  );
+};
+
+export default ImageBuildYaml;

package/src/components/ImageBuilds/ImageBuildRow.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { Button, Content, Flex, FlexItem, Icon, Stack, StackItem, Title } from '@patternfly/react-core';
+import { ActionsColumn, ExpandableRowContent, IAction, OnSelect, Tbody, Td, Tr } from '@patternfly/react-table';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+import { ImageBuild, ImageBuildConditionReason } from '@flightctl/types/imagebuilder';
+import { ImageBuildWithExports } from '../../types/extraTypes';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import { getImageBuildImage, getImageBuildStatusReason, isImageBuildCancelable } from '../../utils/imageBuilds';
+import { getDateDisplay } from '../../utils/dates';
+import ResourceLink from '../common/ResourceLink';
+import ImageBuildExportsGallery from './ImageBuildDetails/ImageBuildExportsGallery';
+import { ImageBuildStatusDisplay } from './ImageBuildAndExportStatus';
+
+type ImageBuildRowProps = {
+  imageBuild: ImageBuildWithExports;
+  rowIndex: number;
+  onRowSelect: (imageBuild: ImageBuild) => OnSelect;
+  isRowSelected: (imageBuild: ImageBuild) => boolean;
+  canCreate: boolean;
+  onDeleteClick: VoidFunction;
+  canDelete: boolean;
+  onCancelClick: VoidFunction;
+  canCancel: boolean;
+  refetch: VoidFunction;
+};
+
+const ImageBuildRow = ({
+  imageBuild,
+  rowIndex,
+  onRowSelect,
+  isRowSelected,
+  onDeleteClick,
+  canCreate,
+  canDelete,
+  onCancelClick,
+  canCancel,
+  refetch,
+}: ImageBuildRowProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const imageBuildName = imageBuild.metadata.name || '';
+  const buildReason = getImageBuildStatusReason(imageBuild);
+
+  const actions: IAction[] = [
+    {
+      title: t('View details'),
+      onClick: () => {
+        navigate({ route: ROUTE.IMAGE_BUILD_DETAILS, postfix: imageBuildName });
+      },
+    },
+  ];
+
+  if (canCreate) {
+    actions.push({
+      title: buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed ? t('Retry') : t('Duplicate'),
+      onClick: () => {
+        navigate({ route: ROUTE.IMAGE_BUILD_EDIT, postfix: imageBuildName });
+      },
+    });
+  }
+
+  if (canCancel && isImageBuildCancelable(buildReason)) {
+    actions.push({
+      title: t('Cancel image build'),
+      onClick: onCancelClick,
+    });
+  } else if (canDelete) {
+    actions.push({
+      title: t('Delete image build'),
+      onClick: onDeleteClick,
+    });
+  }
+
+  const sourceImage = getImageBuildImage(imageBuild.spec.source);
+  const destinationImage = getImageBuildImage(imageBuild.spec.destination);
+
+  return (
+    <Tbody isExpanded={isExpanded}>
+      <Tr isContentExpanded={isExpanded}>
+        <Td
+          select={{
+            rowIndex,
+            onSelect: onRowSelect(imageBuild),
+            isSelected: isRowSelected(imageBuild),
+          }}
+        />
+        <Td
+          expand={{
+            rowIndex,
+            isExpanded,
+            onToggle: () => setIsExpanded(!isExpanded),
+          }}
+        />
+        <Td dataLabel={t('Name')}>
+          <ResourceLink id={imageBuildName} routeLink={ROUTE.IMAGE_BUILD_DETAILS} />
+        </Td>
+        <Td dataLabel={t('Base image')}>{sourceImage}</Td>
+        <Td dataLabel={t('Image output')}>{destinationImage}</Td>
+        <Td dataLabel={t('Status')}>
+          <ImageBuildStatusDisplay buildStatus={imageBuild.status} />
+        </Td>
+        <Td dataLabel={t('Export images')}>{`${imageBuild.exportsCount || 0}`}</Td>
+        <Td dataLabel={t('Date')}>{getDateDisplay(imageBuild.metadata.creationTimestamp)}</Td>
+        <Td isActionCell>
+          <ActionsColumn items={actions} />
+        </Td>
+      </Tr>
+      <Tr isExpanded={isExpanded}>
+        <Td colSpan={9}>
+          <ExpandableRowContent>
+            <Stack hasGutter>
+              <StackItem>
+                <Stack hasGutter>
+                  <StackItem>
+                    <Title headingLevel="h3" size="md" style={{ marginBottom: 0 }}>
+                      {t('Build information')}
+                    </Title>
+                  </StackItem>
+                  {buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed && (
+                    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                      <FlexItem>
+                        <Icon status="danger">
+                          <ExclamationCircleIcon />
+                        </Icon>
+                      </FlexItem>
+                      {canCreate ? (
+                        <>
+                          <FlexItem>
+                            <Content>{t('Build failed. Please retry.')}</Content>
+                          </FlexItem>
+                          <FlexItem>
+                            <Button
+                              variant="link"
+                              onClick={() => navigate({ route: ROUTE.IMAGE_BUILD_EDIT, postfix: imageBuildName })}
+                            >
+                              {t('Retry')}
+                            </Button>
+                          </FlexItem>
+                        </>
+                      ) : (
+                        <FlexItem>
+                          <Content>{t('Build failed.')}</Content>
+                        </FlexItem>
+                      )}
+                    </Flex>
+                  )}
+                  <StackItem>
+                    <Button
+                      variant="link"
+                      onClick={() => navigate({ route: ROUTE.IMAGE_BUILD_DETAILS, postfix: imageBuildName })}
+                    >
+                      {t('View more')}
+                    </Button>
+                  </StackItem>
+                </Stack>
+              </StackItem>
+              <StackItem>
+                <ImageBuildExportsGallery imageBuild={imageBuild} refetch={refetch} />
+              </StackItem>
+            </Stack>
+          </ExpandableRowContent>
+        </Td>
+      </Tr>
+    </Tbody>
+  );
+};
+
+export default ImageBuildRow;

package/src/components/ImageBuilds/ImageBuildsPage.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { TFunction } from 'i18next';
+import {
+  Button,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon';
+
+import { RESOURCE, VERB } from '../../types/rbac';
+import { useTableSelect } from '../../hooks/useTableSelect';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import PageWithPermissions from '../common/PageWithPermissions';
+import { usePermissionsContext } from '../common/PermissionsContext';
+import ListPage from '../ListPage/ListPage';
+import ListPageBody from '../ListPage/ListPageBody';
+import TablePagination from '../Table/TablePagination';
+import TableTextSearch from '../Table/TableTextSearch';
+import Table, { ApiSortTableColumn } from '../Table/Table';
+
+import MassDeleteImageBuildModal from '../modals/massModals/MassDeleteImageBuildModal/MassDeleteImageBuildModal';
+import CancelImageBuildModal from './CancelImageBuildModal/CancelImageBuildModal';
+import DeleteImageBuildModal from './DeleteImageBuildModal/DeleteImageBuildModal';
+import { useImageBuilds, useImageBuildsBackendFilters } from './useImageBuilds';
+import ImageBuildRow from './ImageBuildRow';
+import { OciRegistriesContextProvider } from './OciRegistriesContext';
+
+const getColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Name'),
+  },
+  {
+    name: t('Base image'),
+  },
+  {
+    name: t('Image output'),
+  },
+  {
+    name: t('Status'),
+  },
+  {
+    name: t('Export images'),
+  },
+  {
+    name: t('Date'),
+  },
+];
+
+const imageBuildTablePermissions = [
+  { kind: RESOURCE.IMAGE_BUILD, verb: VERB.CREATE },
+  { kind: RESOURCE.IMAGE_BUILD_CANCEL, verb: VERB.CREATE },
+  { kind: RESOURCE.IMAGE_BUILD, verb: VERB.DELETE },
+];
+
+const ImageBuildsEmptyState = ({ onCreateClick }: { onCreateClick?: VoidFunction }) => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={PlusCircleIcon} titleText={t('There are no image builds in your environment.')}>
+      <EmptyStateBody>{t('Generate system images for consistent deployment to edge devices.')}</EmptyStateBody>
+      {onCreateClick && (
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary" onClick={onCreateClick} icon={<PlusIcon />}>
+              {t('Build new image')}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      )}
+    </ResourceListEmptyState>
+  );
+};
+
+const ImageBuildTable = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const imageBuildColumns = React.useMemo(() => getColumns(t), [t]);
+  const { name, setName, hasFiltersEnabled } = useImageBuildsBackendFilters();
+  const { imageBuilds, isLoading, error, isUpdating, refetch, pagination } = useImageBuilds({ name });
+  const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
+
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreate, canCancel, canDelete] = checkPermissions(imageBuildTablePermissions);
+
+  const [imageBuildToDeleteId, setImageBuildToDeleteId] = React.useState<string>();
+  const [imageBuildToCancelId, setImageBuildToCancelId] = React.useState<string>();
+  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
+
+  const handleCreateClick = React.useCallback(() => {
+    navigate(ROUTE.IMAGE_BUILD_CREATE);
+  }, [navigate]);
+
+  return (
+    <ListPageBody error={error} loading={isLoading}>
+      <Toolbar inset={{ default: 'insetNone' }}>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem>
+              <TableTextSearch value={name || ''} setValue={setName} placeholder={t('Search by name')} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          {canCreate && (
+            <ToolbarItem>
+              <Button variant="primary" onClick={handleCreateClick}>
+                {t('Build new image')}
+              </Button>
+            </ToolbarItem>
+          )}
+          {canDelete && (
+            <ToolbarItem>
+              <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+                {t('Delete image builds')}
+              </Button>
+            </ToolbarItem>
+          )}
+        </ToolbarContent>
+      </Toolbar>
+      <Table
+        aria-label={t('Image builds table')}
+        loading={isUpdating}
+        columns={imageBuildColumns}
+        hasFilters={hasFiltersEnabled}
+        emptyData={imageBuilds.length === 0}
+        clearFilters={() => setName('')}
+        isAllSelected={isAllSelected}
+        onSelectAll={setAllSelected}
+        isExpandable
+      >
+        {imageBuilds.map((imageBuild, rowIndex) => {
+          const name = imageBuild.metadata.name || '';
+          return (
+            <ImageBuildRow
+              key={name}
+              imageBuild={imageBuild}
+              rowIndex={rowIndex}
+              canCreate={canCreate}
+              canDelete={canDelete}
+              canCancel={canCancel}
+              onDeleteClick={() => {
+                setImageBuildToDeleteId(name);
+              }}
+              onCancelClick={() => setImageBuildToCancelId(name)}
+              isRowSelected={() => isRowSelected(imageBuild)}
+              onRowSelect={() => onRowSelect(imageBuild)}
+              refetch={refetch}
+            />
+          );
+        })}
+      </Table>
+      <TablePagination pagination={pagination} isUpdating={isUpdating} />
+      {!isUpdating && imageBuilds.length === 0 && !name && (
+        <ImageBuildsEmptyState onCreateClick={canCreate ? handleCreateClick : undefined} />
+      )}
+
+      {imageBuildToCancelId && (
+        <CancelImageBuildModal
+          imageBuildId={imageBuildToCancelId}
+          onClose={(confirmed) => {
+            setImageBuildToCancelId(undefined);
+            if (confirmed) {
+              refetch();
+            }
+          }}
+        />
+      )}
+      {imageBuildToDeleteId && (
+        <DeleteImageBuildModal
+          imageBuildId={imageBuildToDeleteId}
+          onClose={(hasDeleted) => {
+            setImageBuildToDeleteId(undefined);
+            if (hasDeleted) {
+              refetch();
+            }
+          }}
+        />
+      )}
+      {isMassDeleteModalOpen && (
+        <MassDeleteImageBuildModal
+          onClose={() => setIsMassDeleteModalOpen(false)}
+          imageBuilds={imageBuilds.filter(isRowSelected)}
+          onDeleteSuccess={() => {
+            setIsMassDeleteModalOpen(false);
+            refetch();
+          }}
+        />
+      )}
+    </ListPageBody>
+  );
+};
+
+const ImageBuildsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ListPage title={t('Image builds')}>
+      <ImageBuildTable />
+    </ListPage>
+  );
+};
+
+const ImageBuildsPageWithPermissions = () => {
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.IMAGE_BUILD, verb: VERB.LIST }]);
+
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <OciRegistriesContextProvider>
+        <ImageBuildsPage />
+      </OciRegistriesContextProvider>
+    </PageWithPermissions>
+  );
+};
+
+export default ImageBuildsPageWithPermissions;

package/src/components/ImageBuilds/ImageExportCards.css

@@ -0,0 +1,13 @@
+/* 
+The UX design for this ImageExportCards is using a lot of customization.
+In the UI, we replicate the group component "ServiceCard" which is the closest to the design, and override some defaults.
+*/
+
+.fctl-imageexport-card .pf-v6-c-content--h2 {
+  --pf-v6-c-content--h2--FontWeight: normal;
+}
+
+.fctl-imageexport-card .fctl-imageexport-card__status .pf-v6-c-button {
+  /* Status is placed in the card title and needs a smaller font */
+  --pf-v6-c-button--FontSize: 0.75rem;
+}