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

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { TFunction } from 'react-i18next';
 import {
   Alert,
   Bullseye,
@@ -25,6 +24,7 @@ import {
 import { ExportFormatType, ImageBuildConditionReason, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
 import { useTranslation } from '../../../hooks/useTranslation';
 import {
+  getExportFormatLabel,
   getImageBuildStatusReason,
   getImageExportStatusReason,
   isImageBuildActiveReason,
@@ -34,6 +34,9 @@ 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;
@@ -43,19 +46,6 @@ type LogEntity = {
   status: ImageBuildConditionReason | ImageExportConditionReason;
 };
 
-const getExportFormatText = (t: TFunction, format: ExportFormatType) => {
-  switch (format) {
-    case ExportFormatType.ExportFormatTypeVMDK:
-      return t('Virtualization (VMDK)');
-    case ExportFormatType.ExportFormatTypeQCOW2:
-      return t('OpenStack/KVM (QCOW2)');
-    case ExportFormatType.ExportFormatTypeQCOW2DiskContainer:
-      return t('OpenShift Virtualization (QCOW2)');
-    case ExportFormatType.ExportFormatTypeISO:
-      return t('Metal installer (ISO)');
-  }
-};
-
 const ImageBuildAndExportLogStatus = ({
   status,
 }: {
@@ -85,18 +75,23 @@ const ImageBuildAndExportLogStatus = ({
 
 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 buildName = imageBuild.metadata.name as string;
 
     const buildReason = getImageBuildStatusReason(imageBuild);
     entities.push({
       type: LogResourceType.BUILD,
       id: buildName,
-      label: buildName,
+      label: t('Image build'),
       isActive: isImageBuildActiveReason(buildReason),
       status: buildReason,
     });
@@ -115,7 +110,7 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
         entities.push({
           type: LogResourceType.EXPORT,
           id: ie.metadata.name as string,
-          label: getExportFormatText(t, format),
+          label: getExportFormatLabel(t, format),
           isActive: isImageExportActiveReason(exportReason),
           status: exportReason,
         });
@@ -125,9 +120,15 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
       selectableEntities: entities,
       hasExports,
     };
-  }, [imageBuild, t]);
+  }, [imageBuild, buildName, t]);
 
-  const [selectedEntityId, setSelectedEntityId] = React.useState<string>(imageBuild.metadata.name as string);
+  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,
@@ -209,13 +210,8 @@ const ImageBuildLogsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }
                         {selectableEntities
                           .filter((entity) => entity.type === LogResourceType.BUILD)
                           .map((entity) => (
-                            <MenuItem
-                              key={entity.id}
-                              itemId={entity.id}
-                              isSelected={selectedEntityId === entity.id}
-                              description={entity.id}
-                            >
-                              {entity.label}
+                            <MenuItem key={entity.id} itemId={entity.id} isSelected={selectedEntityId === entity.id}>
+                              {entity.id}
                             </MenuItem>
                           ))}
                       </MenuList>

package/src/components/ImageBuilds/ImageBuildRow.tsx

@@ -7,7 +7,7 @@ import { ImageBuild, ImageBuildConditionReason } from '@flightctl/types/imagebui
 import { ImageBuildWithExports } from '../../types/extraTypes';
 import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
-import { getImageBuildImage, getImageBuildStatusReason } from '../../utils/imageBuilds';
+import { getImageBuildImage, getImageBuildStatusReason, isImageBuildCancelable } from '../../utils/imageBuilds';
 import { getDateDisplay } from '../../utils/dates';
 import ResourceLink from '../common/ResourceLink';
 import ImageBuildExportsGallery from './ImageBuildDetails/ImageBuildExportsGallery';
@@ -18,8 +18,11 @@ type ImageBuildRowProps = {
   rowIndex: number;
   onRowSelect: (imageBuild: ImageBuild) => OnSelect;
   isRowSelected: (imageBuild: ImageBuild) => boolean;
-  canDelete: boolean;
+  canCreate: boolean;
   onDeleteClick: VoidFunction;
+  canDelete: boolean;
+  onCancelClick: VoidFunction;
+  canCancel: boolean;
   refetch: VoidFunction;
 };
 
@@ -29,7 +32,10 @@ const ImageBuildRow = ({
   onRowSelect,
   isRowSelected,
   onDeleteClick,
+  canCreate,
   canDelete,
+  onCancelClick,
+  canCancel,
   refetch,
 }: ImageBuildRowProps) => {
   const { t } = useTranslation();
@@ -48,14 +54,21 @@ const ImageBuildRow = ({
     },
   ];
 
-  actions.push({
-    title: buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed ? t('Retry') : t('Duplicate'),
-    onClick: () => {
-      navigate({ route: ROUTE.IMAGE_BUILD_EDIT, postfix: imageBuildName });
-    },
-  });
+  if (canCreate) {
+    actions.push({
+      title: buildReason === ImageBuildConditionReason.ImageBuildConditionReasonFailed ? t('Retry') : t('Duplicate'),
+      onClick: () => {
+        navigate({ route: ROUTE.IMAGE_BUILD_EDIT, postfix: imageBuildName });
+      },
+    });
+  }
 
-  if (canDelete) {
+  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,
@@ -114,17 +127,25 @@ const ImageBuildRow = ({
                           <ExclamationCircleIcon />
                         </Icon>
                       </FlexItem>
-                      <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>
+                      {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>

package/src/components/ImageBuilds/ImageBuildsPage.tsx

@@ -27,6 +27,7 @@ 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';
@@ -55,21 +56,24 @@ const getColumns = (t: TFunction): ApiSortTableColumn[] => [
 
 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: () => void }) => {
+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>
-      <EmptyStateFooter>
-        <EmptyStateActions>
-          <Button variant="primary" onClick={onCreateClick} icon={<PlusIcon />}>
-            {t('Build new image')}
-          </Button>
-        </EmptyStateActions>
-      </EmptyStateFooter>
+      {onCreateClick && (
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary" onClick={onCreateClick} icon={<PlusIcon />}>
+              {t('Build new image')}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      )}
     </ResourceListEmptyState>
   );
 };
@@ -80,16 +84,15 @@ const ImageBuildTable = () => {
 
   const imageBuildColumns = React.useMemo(() => getColumns(t), [t]);
   const { name, setName, hasFiltersEnabled } = useImageBuildsBackendFilters();
-
   const { imageBuilds, isLoading, error, isUpdating, refetch, pagination } = useImageBuilds({ name });
-
-  const [imageBuildToDeleteId, setImageBuildToDeleteId] = React.useState<string>();
-  const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
-
   const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
 
   const { checkPermissions } = usePermissionsContext();
-  const [canCreate, canDelete] = checkPermissions(imageBuildTablePermissions);
+  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);
@@ -138,10 +141,13 @@ const ImageBuildTable = () => {
               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}
@@ -150,8 +156,21 @@ const ImageBuildTable = () => {
         })}
       </Table>
       <TablePagination pagination={pagination} isUpdating={isUpdating} />
-      {!isUpdating && imageBuilds.length === 0 && !name && <ImageBuildsEmptyState onCreateClick={handleCreateClick} />}
+      {!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}