V2 Wizard: Add File System Configuration Step (HMS-2781)

The FSC step is added to the wizard and takes full advantage of Redux for state management. This is still a work in progress. Supported features: 1. Select partition mountpoint prefix (e.g. /var, /home) 2. Edit partition mountpoint suffix (e.g. /home/videogames) 3. Change displayed units (KiB, MiB, GiB) Supported but buggy features: 1. Edit partition size Unsupported features: 1. Add partitions 2. Remove partitions 3. Validation
2024-02-18 12:45:45 +02:00 · 2024-02-18 12:45:45 +02:00 · 430ea83df0
commit 430ea83df0
parent d063279b79
20 changed files with 751 additions and 111 deletions
--- a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
+++ b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
@ -10,6 +10,7 @@ import {
 import { useNavigate, useSearchParams } from 'react-router-dom';

 import DetailsStep from './steps/Details';
+import FileSystemStep from './steps/FileSystem';
 import ImageOutputStep from './steps/ImageOutput';
 import OscapStep from './steps/Oscap';
 import PackagesStep from './steps/Packages';
@ -131,7 +132,6 @@ const CreateImageWizard = ({ startStepIndex = 1 }: CreateImageWizardProps) => {
    selectAzureResourceGroup(state)
  );
  const azureSource = useAppSelector((state) => selectAzureSource(state));
-
  const registrationType = useAppSelector((state) =>
    selectRegistrationType(state)
  );
@ -249,6 +249,13 @@ const CreateImageWizard = ({ startStepIndex = 1 }: CreateImageWizardProps) => {
          >
            <OscapStep />
          </WizardStep>
+          <WizardStep
+            name="File system configuration"
+            id="step-file-system"
+            footer={<CustomWizardFooter disableNext={false} />}
+          >
+            <FileSystemStep />
+          </WizardStep>
          <WizardStep
            name="Content"
            id="step-content"
--- a/src/Components/CreateImageWizardV2/EditImageWizard.tsx
+++ b/src/Components/CreateImageWizardV2/EditImageWizard.tsx
@ -36,7 +36,7 @@ const EditImageWizard = ({ blueprintId }: EditImageWizardProps) => {
      navigate(resolveRelPath(''));
    }
  }, [error, navigate]);
-  return <CreateImageWizard startStepIndex={12} />;
+  return <CreateImageWizard startStepIndex={13} />;
 };

 export default EditImageWizard;
--- a/src/Components/CreateImageWizardV2/UsrSubDirectoriesDisabled.tsx
+++ b/src/Components/CreateImageWizardV2/UsrSubDirectoriesDisabled.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Alert } from '@patternfly/react-core';
+
+const UsrSubDirectoriesDisabled = () => {
+  return (
+    <Alert
+      variant="warning"
+      title="Sub-directories for the /usr mount point are no longer supported"
+      isInline
+    >
+      Please note that including sub-directories in the /usr path is no longer
+      supported. Previously included mount points with /usr sub-directory are
+      replaced by /usr when recreating an image.
+    </Alert>
+  );
+};
+
+export default UsrSubDirectoriesDisabled;
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  Button,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+const FileSystemAutomaticPartition = () => {
+  return (
+    <TextContent>
+      <Text component={TextVariants.h3}>Automatic partitioning</Text>
+      <Text>
+        Red Hat will automatically partition your image to what is best,
+        depending on the target environment(s).
+      </Text>
+      <Text>
+        The target environment sometimes dictates the partitioning scheme or
+        parts of it, and sometimes the target environment is unknown (e.g., for
+        the .qcow2 generic cloud image).
+      </Text>
+      <Text>
+        Using automatic partitioning will apply the most current supported
+        configuration.
+        <br></br>
+        <Button
+          component="a"
+          target="_blank"
+          variant="link"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_images_by_using_insights_image_builder/customizing-file-systems-during-the-image-creation"
+          className="pf-u-pl-0"
+        >
+          Customizing file systems during the image creation
+        </Button>
+      </Text>
+    </TextContent>
+  );
+};
+
+export default FileSystemAutomaticPartition;
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx
@ -0,0 +1,329 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Popover,
+  Text,
+  TextContent,
+  TextInput,
+  TextVariants,
+} from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import {
+  HelpIcon,
+  MinusCircleIcon,
+  PlusCircleIcon,
+} from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { UNIT_GIB, UNIT_KIB, UNIT_MIB } from '../../../../constants';
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
+import {
+  changePartitionMinSize,
+  changePartitionMountpoint,
+  selectPartitions,
+} from '../../../../store/wizardSlice';
+import UsrSubDirectoriesDisabled from '../../UsrSubDirectoriesDisabled';
+import { ValidatedTextInput } from '../../ValidatedTextInput';
+
+export type Partition = {
+  id: string;
+  mountpoint: string;
+  min_size: string;
+};
+
+const FileSystemConfiguration = () => {
+  const partitions = useAppSelector((state) => selectPartitions(state));
+
+  return (
+    <>
+      <TextContent>
+        <Text component={TextVariants.h3}>Configure partitions</Text>
+      </TextContent>
+      {partitions?.find((partition) =>
+        partition?.mountpoint?.includes('/usr')
+      ) && <UsrSubDirectoriesDisabled />}
+      <TextContent>
+        <Text>
+          Create partitions for your image by defining mount points and minimum
+          sizes. Image builder creates partitions with a logical volume (LVM)
+          device type.
+        </Text>
+        <Text>
+          The order of partitions may change when the image is installed in
+          order to conform to best practices and ensure functionality.
+          <br></br>
+          <Button
+            component="a"
+            target="_blank"
+            variant="link"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_images_by_using_insights_image_builder/customizing-file-systems-during-the-image-creation"
+            className="pf-u-pl-0"
+          >
+            Read more about manual configuration here
+          </Button>
+        </Text>
+      </TextContent>
+      <Table aria-label="File system table" variant="compact">
+        <Thead>
+          <Tr>
+            <Th />
+            <Th>Mount point</Th>
+            <Th></Th>
+            <Th>Type</Th>
+            <Th>
+              Minimum size
+              <Popover
+                hasAutoWidth
+                bodyContent={
+                  <TextContent>
+                    <Text>
+                      Image Builder may extend this size based on requirements,
+                      selected packages, and configurations.
+                    </Text>
+                  </TextContent>
+                }
+              >
+                <Button
+                  variant="plain"
+                  aria-label="File system configuration info"
+                  aria-describedby="file-system-configuration-info"
+                  className="pf-c-form__group-label-help"
+                >
+                  <HelpIcon />
+                </Button>
+              </Popover>
+            </Th>
+            <Th />
+            <Th />
+          </Tr>
+        </Thead>
+        <Tbody data-testid="file-system-configuration-tbody">
+          {partitions &&
+            partitions.map((partition) => (
+              <Row key={partition.id} partition={partition} />
+            ))}
+        </Tbody>
+      </Table>
+      <TextContent>
+        <Button
+          ouiaId="add-partition"
+          data-testid="file-system-add-partition"
+          className="pf-u-text-align-left"
+          variant="link"
+          icon={<PlusCircleIcon />}
+          onClick={() => {}}
+        >
+          Add partition
+        </Button>
+      </TextContent>
+    </>
+  );
+};
+
+type RowPropTypes = {
+  partition: Partition;
+};
+
+const getPrefix = (mountpoint: string) => {
+  return mountpoint.split('/')[1] ? '/' + mountpoint.split('/')[1] : '/';
+};
+const getSuffix = (mountpoint: string) => {
+  const prefix = getPrefix(mountpoint);
+  return mountpoint.substring(prefix.length);
+};
+
+const Row = ({ partition }: RowPropTypes) => {
+  const [units, setUnits] = useState<Units>('MiB');
+
+  return (
+    <Tr>
+      <Td />
+      <Td className="pf-m-width-15">
+        <MountpointPrefix partition={partition} />
+      </Td>
+      <Td className="pf-m-width-15">
+        <MountpointSuffix partition={partition} />
+      </Td>
+      <Td className="pf-m-width-20">xfs</Td>
+      <Td className="pf-m-width-30">
+        <MinimumSize partition={partition} units={units} />
+      </Td>
+      <Td className="pf-m-width-30">
+        <SizeUnit units={units} setUnits={setUnits} />
+      </Td>
+      <Td className="pf-m-width-10">
+        <Button
+          variant="link"
+          icon={<MinusCircleIcon />}
+          onClick={() => {}}
+          data-testid="remove-mount-point"
+          isDisabled={true}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export const mountpointPrefixes = [
+  '/app',
+  '/boot',
+  '/data',
+  '/home',
+  '/opt',
+  '/srv',
+  '/tmp',
+  '/usr',
+  '/var',
+];
+
+type MountpointPrefixPropTypes = {
+  partition: Partition;
+};
+
+const MountpointPrefix = ({ partition }: MountpointPrefixPropTypes) => {
+  const dispatch = useAppDispatch();
+  const [isOpen, setIsOpen] = useState(false);
+  const prefix = getPrefix(partition.mountpoint);
+  const suffix = getSuffix(partition.mountpoint);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = (event: React.MouseEvent, selection: string) => {
+    setIsOpen(false);
+    const mountpoint = selection + suffix;
+    dispatch(
+      changePartitionMountpoint({ id: partition.id, mountpoint: mountpoint })
+    );
+  };
+
+  return (
+    <Select
+      ouiaId="mount-point"
+      isOpen={isOpen}
+      onToggle={(_event, isOpen) => onToggle(isOpen)}
+      onSelect={onSelect}
+      selections={prefix}
+    >
+      {mountpointPrefixes.map((prefix, index) => {
+        return <SelectOption key={index} value={prefix} />;
+      })}
+    </Select>
+  );
+};
+
+type MountpointSuffixPropTypes = {
+  partition: Partition;
+};
+
+const MountpointSuffix = ({ partition }: MountpointSuffixPropTypes) => {
+  const dispatch = useAppDispatch();
+  const prefix = getPrefix(partition.mountpoint);
+  const suffix = getSuffix(partition.mountpoint);
+
+  return (
+    <TextInput
+      value={suffix}
+      type="text"
+      onChange={(event: React.FormEvent, suffix) => {
+        const mountpoint = prefix + suffix;
+        dispatch(
+          changePartitionMountpoint({
+            id: partition.id,
+            mountpoint: mountpoint,
+          })
+        );
+      }}
+      aria-label="text input example"
+    />
+  );
+};
+
+type MinimumSizePropTypes = {
+  partition: Partition;
+  units: Units;
+};
+
+type Units = 'KiB' | 'MiB' | 'GiB';
+
+const getConversionFactor = (units: Units) => {
+  switch (units) {
+    case 'KiB':
+      return UNIT_KIB;
+    case 'MiB':
+      return UNIT_MIB;
+    case 'GiB':
+      return UNIT_GIB;
+  }
+};
+
+const MinimumSize = ({ partition, units }: MinimumSizePropTypes) => {
+  const conversionFactor = getConversionFactor(units);
+
+  const convertToDisplayUnits = (minSize: string) => {
+    return (parseInt(minSize) * conversionFactor).toString();
+  };
+
+  const convertToBytes = (minSize: string) => {
+    return (parseInt(minSize) / conversionFactor).toString();
+  };
+
+  const dispatch = useAppDispatch();
+
+  return (
+    <ValidatedTextInput
+      ariaLabel="minimum partition size"
+      helperText=""
+      validator={() => true}
+      value={convertToDisplayUnits(partition.min_size)}
+      type="text"
+      onChange={(event, minSize) => {
+        dispatch(
+          changePartitionMinSize({
+            id: partition.id,
+            min_size: convertToBytes(minSize),
+          })
+        );
+      }}
+    />
+  );
+};
+
+type SizeUnitPropTypes = {
+  units: Units;
+  setUnits: React.Dispatch<React.SetStateAction<Units>>;
+};
+
+const SizeUnit = ({ units, setUnits }: SizeUnitPropTypes) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = (event: React.MouseEvent, selection: Units) => {
+    setUnits(selection);
+    setIsOpen(false);
+  };
+
+  return (
+    <Select
+      ouiaId="mount-point"
+      isOpen={isOpen}
+      onToggle={(_event, isOpen) => onToggle(isOpen)}
+      onSelect={onSelect}
+      selections={units}
+    >
+      <SelectOption value={'KiB'} />
+      <SelectOption value={'MiB'} />
+      <SelectOption value={'GiB'} />
+    </Select>
+  );
+};
+
+export default FileSystemConfiguration;
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx
@ -0,0 +1,49 @@
+import React from 'react';
+
+import { FormGroup, Label, Radio } from '@patternfly/react-core';
+
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
+import {
+  changeFileSystemPartitionMode,
+  selectFileSystemPartitionMode,
+} from '../../../../store/wizardSlice';
+
+const FileSystemPartition = () => {
+  const dispatch = useAppDispatch();
+  const fileSystemPartition = useAppSelector((state) =>
+    selectFileSystemPartitionMode(state)
+  );
+  return (
+    <FormGroup>
+      <Radio
+        id="automatic file system config radio"
+        label={
+          <>
+            <Label isCompact color="blue">
+              Recommended
+            </Label>{' '}
+            Use automatic partitioning
+          </>
+        }
+        name="sc-radio-automatic"
+        description="Automatically partition your image to what is best, depending on the target environment(s)"
+        isChecked={fileSystemPartition === 'automatic'}
+        onChange={() => {
+          dispatch(changeFileSystemPartitionMode('automatic'));
+        }}
+      />
+      <Radio
+        id="manual file system config radio"
+        label="Manually configure partitions"
+        name="fsc-radio-manual"
+        description="Manually configure the file system of your image by adding, removing, and editing partitions"
+        isChecked={fileSystemPartition === 'manual'}
+        onChange={() => {
+          dispatch(changeFileSystemPartitionMode('manual'));
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+export default FileSystemPartition;
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/index.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/index.tsx
@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Text, Form, Title } from '@patternfly/react-core';
+
+import FileSystemAutomaticPartition from './FileSystemAutomaticPartitionInformation';
+import FileSystemConfiguration from './FileSystemConfiguration';
+import FileSystemPartition from './FileSystemPartition';
+
+import { useAppSelector } from '../../../../store/hooks';
+import { selectFileSystemPartitionMode } from '../../../../store/wizardSlice';
+export type FileSystemPartitionMode = 'automatic' | 'manual';
+
+const FileSystemStep = () => {
+  const fileSystemPartitionMode = useAppSelector((state) =>
+    selectFileSystemPartitionMode(state)
+  );
+
+  return (
+    <Form>
+      <Title headingLevel="h2">File system configuration</Title>
+      <Text>Define the partitioning of the image</Text>
+      {fileSystemPartitionMode === 'automatic' ? (
+        <>
+          <FileSystemPartition />
+          <FileSystemAutomaticPartition />
+        </>
+      ) : fileSystemPartitionMode === 'manual' ? (
+        <>
+          <FileSystemPartition />
+          <FileSystemConfiguration />
+        </>
+      ) : (
+        fileSystemPartitionMode === 'oscap' && <FileSystemConfiguration />
+      )}
+    </Form>
+  );
+};
+
+export default FileSystemStep;
--- a/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
+++ b/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
@ -64,6 +64,7 @@ export const FSReviewTable = () => {
              <Th>Minimum size</Th>
            </Tr>
          </Thead>
+          <Tbody data-testid="file-system-configuration-tbody-review"></Tbody>
        </Table>
      </PanelMain>
    </Panel>
--- a/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTextLists.tsx
+++ b/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTextLists.tsx
@ -19,6 +19,7 @@ import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'

 import ActivationKeyInformation from './../Registration/ActivationKeyInformation';
 import { PackagesTable, RepositoriesTable } from './ReviewStepTables';
+import { FSReviewTable } from './ReviewStepTables';

 import {
  RELEASES,
@ -50,6 +51,7 @@ import {
  selectGcpShareMethod,
  selectPackages,
  selectRegistrationType,
+  selectFileSystemPartitionMode,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear } from '../../../../Utilities/time';
 import { MajorReleasesLifecyclesChart } from '../ImageOutput/ReleaseLifecycle';
@ -103,13 +105,85 @@ export const ImageOutputList = () => {
  );
 };
 export const FSCList = () => {
+  const fileSystemPartitionMode = useAppSelector((state) =>
+    selectFileSystemPartitionMode(state)
+  );
+
  return (
    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-u-min-width"
+        >
+          Configuration type
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dd}
+          data-testid="partitioning-auto-manual"
+        >
+          {fileSystemPartitionMode === 'manual' ? 'Manual' : 'Automatic'}
+          {fileSystemPartitionMode === 'manual' && (
+            <>
+              {' '}
+              <Popover
+                position="bottom"
+                headerContent="Partitions"
+                hasAutoWidth
+                minWidth="30rem"
+                bodyContent={<FSReviewTable />}
+              >
+                <Button
+                  data-testid="file-system-configuration-popover"
+                  variant="link"
+                  aria-label="File system configuration info"
+                  aria-describedby="file-system-configuration-info"
+                  className="pf-u-pt-0 pf-u-pb-0"
+                >
+                  View partitions
+                </Button>
+              </Popover>
+            </>
+          )}
+        </TextListItem>
+        {fileSystemPartitionMode === 'manual' && (
+          <>
+            <TextListItem component={TextListItemVariants.dt}>
+              Image size (minimum)
+              <Popover
+                hasAutoWidth
+                bodyContent={
+                  <TextContent>
+                    <Text>
+                      Image Builder may extend this size based on requirements,
+                      selected packages, and configurations.
+                    </Text>
+                  </TextContent>
+                }
+              >
+                <Button
+                  variant="plain"
+                  aria-label="File system configuration info"
+                  aria-describedby="file-system-configuration-info"
+                  className="pf-c-form__group-label-help"
+                >
+                  <HelpIcon />
+                </Button>
+              </Popover>
+            </TextListItem>
+            <MinSize />
+          </>
+        )}
+      </TextList>
      <br />
    </TextContent>
  );
 };

+export const MinSize = () => {
+  return <TextListItem component={TextListItemVariants.dd} />;
+};
+
 export const TargetEnvAWSList = () => {
  const { isSuccess } = useGetSourceListQuery({
    provider: 'aws',
--- a/src/Components/CreateImageWizardV2/utilities/requestMapper.tsx
+++ b/src/Components/CreateImageWizardV2/utilities/requestMapper.tsx
@ -108,6 +108,11 @@ export const mapRequestToState = (request: BlueprintResponse): wizardState => {
        enabled: [],
      },
    },
+    fileSystem: {
+      mode: 'automatic',
+      partitions: [],
+    },
+
    architecture: request.image_requests[0].architecture,
    distribution: request.distribution,
    imageTypes: request.image_requests.map((image) => image.image_type),