@flightctl/ui-components 1.0.2 → 1.1.0-rc4

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

@@ -0,0 +1,350 @@
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+
+import {
+  ApiVersion,
+  BindingType,
+  ExportFormatType,
+  ImageBuild,
+  ImageBuildDestination,
+  ImageBuildSource,
+  ImageBuildUserConfiguration,
+  ImageExport,
+  ResourceKind,
+} from '@flightctl/types/imagebuilder';
+import { validImageBuildName } from '../../form/validations';
+import { ImageBuildFormValues } from './types';
+import { ImageBuildWithExports } from '../../../types/extraTypes';
+
+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.-]+$/;
+
+const USERNAME_MAX_LENGTH = 256;
+const USERNAME_REGEX = /^[A-Za-z0-9_.][A-Za-z0-9_.-]*\$?$/;
+
+/** 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 getUsernameValidationError = (username: string, t: TFunction): string | undefined => {
+  if (/\s/.test(username)) {
+    return t('Username cannot contain spaces');
+  }
+  if (username.length > USERNAME_MAX_LENGTH) {
+    return t('Username must not exceed {{max}} characters.', { max: USERNAME_MAX_LENGTH });
+  }
+  if (!USERNAME_REGEX.test(username)) {
+    return t(
+      "Must start with a letter, digit, underscore, or dot. It may include hyphens, and can end with a trailing '$'.",
+    );
+  }
+  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'))
+              .test('flightctl-username', function (value) {
+                if (!value) return true;
+                const error = getUsernameValidationError(value, t);
+                return error ? this.createError({ message: error }) : true;
+              })
+          : 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
+// undefined or the latest ImageExport for that format.
+const getImageExportsByFormat = (
+  imageExports?: ImageExport[],
+): { imageExports: (ImageExport | undefined)[]; exportsCount: number } => {
+  const formatMap: Partial<Record<ExportFormatType, ImageExport>> = {};
+
+  imageExports?.forEach((ie) => {
+    const format = ie.spec.format;
+    const existing = formatMap[format];
+
+    if (!existing) {
+      formatMap[format] = ie;
+    } else {
+      // Compare creation timestamps to keep the most recent
+      const existingTimestamp = existing.metadata.creationTimestamp || '';
+      const currentTimestamp = ie.metadata.creationTimestamp;
+
+      if (existingTimestamp && currentTimestamp) {
+        const existingTime = new Date(existingTimestamp).getTime();
+        const currentTime = new Date(currentTimestamp).getTime();
+        if (currentTime > existingTime) {
+          formatMap[format] = ie;
+        }
+      }
+    }
+  });
+
+  return {
+    imageExports: [
+      formatMap[ExportFormatType.ExportFormatTypeISO],
+      formatMap[ExportFormatType.ExportFormatTypeQCOW2DiskContainer],
+      formatMap[ExportFormatType.ExportFormatTypeQCOW2],
+      formatMap[ExportFormatType.ExportFormatTypeVMDK],
+    ],
+    exportsCount: imageExports?.length || 0,
+  };
+};
+
+export const toImageBuildWithExports = (imageBuild: ImageBuild): ImageBuildWithExports => {
+  const allExports = imageBuild.imageexports || [];
+  const imageExportsByFormat = getImageExportsByFormat(allExports);
+  const latestExports = [...imageExportsByFormat.imageExports];
+
+  // Disable the rule as we want to omit the "imageexports" field
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { imageexports, ...imageBuildWithoutExports } = imageBuild;
+  return {
+    ...imageBuildWithoutExports,
+    imageExports: latestExports,
+    exportsCount: allExports.length,
+  };
+};
+
+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 !== undefined)
+      .map((imageExport) => imageExport.spec.format);
+    const userConfig = imageBuild.spec.userConfiguration;
+    return {
+      // 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 || [],
+      remoteAccessEnabled: !!(userConfig?.username || userConfig?.publickey),
+      userConfiguration: userConfig || { username: '', publickey: '' },
+    };
+  }
+
+  return {
+    buildName: '',
+    source: {
+      repository: '',
+      imageName: '',
+      imageTag: '',
+    },
+    destination: {
+      repository: '',
+      imageName: '',
+      imageTag: '',
+    },
+    bindingType: BindingType.BindingTypeEarly,
+    exportFormats: [],
+    remoteAccessEnabled: false,
+    userConfiguration: {
+      username: '',
+      publickey: '',
+    },
+  };
+};
+
+// Generates a random 6-digit hex hash
+const getHash = () =>
+  Math.floor(Math.random() * 0x1000000)
+    .toString(16)
+    .padStart(6, '0');
+
+const generateExportName = (imageBuildName: string, format: ExportFormatType) => {
+  const formatKey = format === ExportFormatType.ExportFormatTypeQCOW2DiskContainer ? 'qcow2-disk' : format;
+  return `${imageBuildName}-${formatKey}-${getHash()}`;
+};
+
+export const getImageBuildResource = (values: ImageBuildFormValues): ImageBuild => {
+  const name = values.buildName;
+  const spec: ImageBuild['spec'] = {
+    source: values.source,
+    destination: values.destination,
+    binding: {
+      type: values.bindingType,
+    },
+  };
+
+  // Allow the user to uncheck the toggle without having cleared the fields
+  const username = values.userConfiguration.username || '';
+  const publickey = values.userConfiguration.publickey || '';
+  if (values.remoteAccessEnabled && username && publickey) {
+    spec.userConfiguration = {
+      username,
+      publickey,
+    };
+  }
+
+  return {
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
+    kind: ResourceKind.IMAGE_BUILD,
+    metadata: {
+      name,
+    },
+    spec,
+  };
+};
+
+export const getImageExportResource = (imageBuildName: string, format: ExportFormatType): ImageExport => {
+  const exportName = generateExportName(imageBuildName, format);
+
+  return {
+    apiVersion: ApiVersion.ApiVersionV1alpha1,
+    kind: ResourceKind.IMAGE_EXPORT,
+    metadata: {
+      name: exportName,
+    },
+    spec: {
+      source: {
+        type: 'imageBuild',
+        imageBuildRef: imageBuildName,
+      },
+      format,
+    },
+  };
+};
+
+export const getImageExportResources = (values: ImageBuildFormValues, imageBuildName: string): ImageExport[] => {
+  if (!values.exportFormats || values.exportFormats.length === 0) {
+    return [];
+  }
+
+  return values.exportFormats.map((format) => getImageExportResource(imageBuildName, format));
+};

package/src/components/ImageBuilds/DeleteImageBuildModal/DeleteImageBuildModal.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+
+const DeleteImageBuildModal = ({
+  imageBuildId,
+  onClose,
+}: {
+  imageBuildId: string;
+  onClose: (hasDeleted?: boolean) => void;
+}) => {
+  const { t } = useTranslation();
+  const { remove } = useFetch();
+
+  const [error, setError] = React.useState<string>();
+  const [isDeleting, setIsDeleting] = React.useState<boolean>();
+
+  return (
+    <Modal
+      isOpen
+      onClose={() => {
+        onClose();
+      }}
+      variant="small"
+    >
+      <ModalHeader title={t('Delete this build?')} />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Content>{t('This will remove the record of this build and its history.', { count: 1 })}</Content>
+          </StackItem>
+          <StackItem>
+            <Content className="pf-v6-u-text-color-subtle">
+              {t('The actual image files in your storage will not be deleted.')}
+            </Content>
+          </StackItem>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('Deletion of image build failed.')}>
+                {error}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="confirm"
+          variant="danger"
+          isDisabled={isDeleting}
+          isLoading={isDeleting}
+          onClick={async () => {
+            setError(undefined);
+            try {
+              setIsDeleting(true);
+              await remove(`imagebuilds/${imageBuildId}`);
+              setIsDeleting(false);
+              onClose(true);
+            } catch (imageBuildErr) {
+              setError(getErrorMessage(imageBuildErr));
+              setIsDeleting(false);
+            }
+          }}
+        >
+          {t('Delete')}
+        </Button>
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={() => {
+            onClose();
+          }}
+          isDisabled={isDeleting}
+        >
+          {t('Cancel')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default DeleteImageBuildModal;

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}
+    />
+  );
+};