Merge pull request #188 from KKoukiou/use-configured-storage-review

storage: show the partitioning request review for the 'Use configured storage'

src/components/AnacondaWizard.jsx

@@ -52,7 +52,7 @@ import { SystemTypeContext, OsReleaseContext } from "./Common.jsx";
 const _ = cockpit.gettext;
 const N_ = cockpit.noop;
 
-export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtimeData, onCritFail, onJsError, showStorage, setShowStorage, title, conf }) => {
+export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtimeData, onCritFail, showStorage, setShowStorage, title, conf }) => {
     const [isFormDisabled, setIsFormDisabled] = useState(false);
     const [isFormValid, setIsFormValid] = useState(false);
     const [reusePartitioning, setReusePartitioning] = useState(false);
@@ -119,6 +119,7 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
                 diskSelection: storageData.diskSelection,
                 dispatch,
                 partitioning: storageData.partitioning.path,
+                requests: storageData.partitioning.requests,
                 scenarioPartitioningMapping,
                 storageScenarioId,
                 setStorageScenarioId: (scenarioId) => {
@@ -287,7 +288,7 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
               deviceData={storageData.devices}
               dispatch={dispatch}
               onCritFail={onCritFail}
-              onJsError={onJsError}
+              requests={storageData.partitioning.requests}
               scenarioPartitioningMapping={scenarioPartitioningMapping}
               selectedDisks={selectedDisks}
               setShowStorage={setShowStorage}

src/components/review/ReviewConfiguration.jsx

@@ -22,7 +22,6 @@ import {
     DescriptionList, DescriptionListGroup,
     DescriptionListTerm, DescriptionListDescription,
     HelperText, HelperTextItem,
-    List, ListItem,
     Modal, ModalVariant,
     Stack,
 } from "@patternfly/react-core";
@@ -32,10 +31,10 @@ import {
     getPartitioningRequest,
     getPartitioningMethod,
 } from "../../apis/storage_partitioning.js";
-import { checkDeviceInSubTree } from "../../helpers/storage.js";
 
 import { getScenario } from "../storage/InstallationScenario.jsx";
 import { OsReleaseContext } from "../Common.jsx";
+import { StorageReview } from "./StorageReview.jsx";
 
 import "./ReviewConfiguration.scss";
 
@@ -59,46 +58,6 @@ const ReviewDescriptionList = ({ children }) => {
     );
 };
 
-const DeviceRow = ({ deviceData, disk, requests }) => {
-    const data = deviceData[disk];
-    const name = data.name.v;
-
-    const renderRow = row => {
-        const name = row["device-spec"];
-        const action = (
-            row.reformat
-                ? (row["format-type"] ? cockpit.format(_("format as $0"), row["format-type"]) : null)
-                : ((row["format-type"] === "biosboot") ? row["format-type"] : _("mount"))
-        );
-        const mount = row["mount-point"] || null;
-        const actions = [action, mount].filter(Boolean).join(", ");
-        const size = cockpit.format_bytes(deviceData[name].size.v);
-
-        return (
-            <ListItem className="pf-v5-u-font-size-s" key={name}>
-                {name}, {size}: {actions}
-            </ListItem>
-        );
-    };
-
-    const partitionRows = requests?.filter(req => {
-        if (!req.reformat && req["mount-point"] === "") {
-            return false;
-        }
-
-        return checkDeviceInSubTree({ device: req["device-spec"], rootDevice: name, deviceData });
-    }).map(renderRow) || [];
-
-    return (
-        <Stack id={`disk-${name}`} hasGutter>
-            <span>{cockpit.format_bytes(data.size.v)} {name} {"(" + data.description.v + ")"}</span>
-            <List>
-                {partitionRows}
-            </List>
-        </Stack>
-    );
-};
-
 export const ReviewConfiguration = ({ deviceData, diskSelection, language, localizationData, requests, idPrefix, setIsFormValid, storageScenarioId, accounts }) => {
     const [encrypt, setEncrypt] = useState();
     const osRelease = useContext(OsReleaseContext);
@@ -176,16 +135,12 @@ export const ReviewConfiguration = ({ deviceData, diskSelection, language, local
                     </DescriptionListTerm>
                     <DescriptionListDescription id={idPrefix + "-target-storage"}>
                         <Stack hasGutter>
-                            {diskSelection.selectedDisks.map(disk => {
-                                return (
-                                    <DeviceRow
-                                      key={disk}
-                                      deviceData={deviceData}
-                                      disk={disk}
-                                      requests={["mount-point-mapping", "use-configured-storage"].includes(storageScenarioId) ? requests : null}
-                                    />
-                                );
-                            })}
+                            <StorageReview
+                              deviceData={deviceData}
+                              requests={requests}
+                              selectedDisks={diskSelection.selectedDisks}
+                              storageScenarioId={storageScenarioId}
+                            />
                         </Stack>
                     </DescriptionListDescription>
                 </DescriptionListGroup>

src/components/review/StorageReview.jsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2022 Red Hat, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with This program; If not, see <http://www.gnu.org/licenses/>.
+ */
+import cockpit from "cockpit";
+import React from "react";
+
+import {
+    List, ListItem,
+    Stack,
+} from "@patternfly/react-core";
+
+import { checkDeviceInSubTree } from "../../helpers/storage.js";
+
+const _ = cockpit.gettext;
+
+export const StorageReview = ({ selectedDisks, deviceData, requests, storageScenarioId }) => {
+    return (
+        <>
+            {selectedDisks.map(disk => {
+                return (
+                    <DeviceRow
+                      key={disk}
+                      deviceData={deviceData}
+                      disk={disk}
+                      requests={["mount-point-mapping", "use-configured-storage"].includes(storageScenarioId) ? requests : null}
+                    />
+                );
+            })}
+        </>
+    );
+};
+
+const DeviceRow = ({ deviceData, disk, requests }) => {
+    const data = deviceData[disk];
+    const name = data.name.v;
+
+    const renderRow = row => {
+        const name = row["device-spec"];
+        const action = (
+            row.reformat
+                ? (row["format-type"] ? cockpit.format(_("format as $0"), row["format-type"]) : null)
+                : ((row["format-type"] === "biosboot") ? row["format-type"] : _("mount"))
+        );
+        const mount = row["mount-point"] || null;
+        const actions = [action, mount].filter(Boolean).join(", ");
+        const size = cockpit.format_bytes(deviceData[name].size.v);
+
+        return (
+            <ListItem className="pf-v5-u-font-size-s" key={name}>
+                {name}, {size}: {actions}
+            </ListItem>
+        );
+    };
+
+    const partitionRows = requests?.filter(req => {
+        if (!req.reformat && req["mount-point"] === "") {
+            return false;
+        }
+
+        return checkDeviceInSubTree({ device: req["device-spec"], rootDevice: name, deviceData });
+    }).map(renderRow) || [];
+
+    return (
+        <Stack id={`disk-${name}`} hasGutter>
+            <span>{cockpit.format_bytes(data.size.v)} {name} {"(" + data.description.v + ")"}</span>
+            <List>
+                {partitionRows}
+            </List>
+        </Stack>
+    );
+};

src/components/storage/CockpitStorageIntegration.jsx

@@ -33,6 +33,7 @@ import {
     Modal,
     PageSection,
     PageSectionVariants,
+    Stack,
     Text,
     TextContent,
     Title,
@@ -92,7 +93,7 @@ export const CockpitStorageIntegration = ({
     deviceData,
     dispatch,
     onCritFail,
-    onJsError,
+    requests,
     setShowStorage,
 }) => {
     const [showDialog, setShowDialog] = useState(false);
@@ -105,7 +106,7 @@ export const CockpitStorageIntegration = ({
         });
 
         resetPartitioning().then(() => setNeedsResetPartitioning(false), onCritFail);
-    }, [onCritFail, onJsError]);
+    }, [onCritFail]);
 
     return (
         <>
@@ -147,6 +148,7 @@ export const CockpitStorageIntegration = ({
               deviceData={deviceData}
               dispatch={dispatch}
               onCritFail={onCritFail}
+              requests={requests}
               scenarioAvailability={scenarioAvailability}
               scenarioPartitioningMapping={scenarioPartitioningMapping}
               selectedDisks={selectedDisks}
@@ -217,6 +219,7 @@ const CheckStorageDialog = ({
     deviceData,
     dispatch,
     onCritFail,
+    requests,
     scenarioPartitioningMapping,
     selectedDisks,
     setShowDialog,
@@ -244,6 +247,27 @@ const CheckStorageDialog = ({
         return availability.available;
     }, [deviceData, mountPointConstraints, newMountPoints, scenarioPartitioningMapping]);
 
+    const useConfiguredStorageReview = useMemo(() => {
+        const availability = checkConfiguredStorage({
+            deviceData,
+            mountPointConstraints,
+            newMountPoints,
+            requests,
+            scenarioPartitioningMapping,
+            selectedDisks,
+            storageScenarioId: "use-configured-storage"
+        });
+
+        return availability.review;
+    }, [
+        deviceData,
+        mountPointConstraints,
+        newMountPoints,
+        requests,
+        scenarioPartitioningMapping,
+        selectedDisks,
+    ]);
+
     const useFreeSpace = useMemo(() => {
         const availability = checkUseFreeSpace({ diskFreeSpace, diskTotalSpace, requiredSize });
 
@@ -431,8 +455,15 @@ const CheckStorageDialog = ({
                     {storageRequirementsNotMet ? error?.message : null}
                     <HelperText>
                         {!storageRequirementsNotMet &&
-                        <HelperTextItem variant="success" hasIcon>
-                            {_("Current configuration can be used for installation.")}
+                        <HelperTextItem variant="success" isDynamic>
+                            {useConfiguredStorage
+                                ? (
+                                    <Stack hasGutter>
+                                        <span>{_("Detected valid storage layout:")}</span>
+                                        {useConfiguredStorageReview}
+                                    </Stack>
+                                )
+                                : _("Free space requirements met")}
                         </HelperTextItem>}
                     </HelperText>
                 </>}

src/components/storage/CockpitStorageIntegration.scss

@@ -46,3 +46,9 @@ ul.cockpit-storage-integration-requirements-hint-list {
 .cockpit-storage-integration-check-storage-dialog--loading svg.pf-v5-c-spinner {
     --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
 }
+
+.cockpit-storage-integration-check-storage-dialog {
+    .pf-v5-c-helper-text__item-text {
+        color: unset;
+    }
+}

src/components/storage/InstallationMethod.jsx

@@ -38,6 +38,7 @@ export const InstallationMethod = ({
     isFormDisabled,
     onCritFail,
     partitioning,
+    requests,
     scenarioPartitioningMapping,
     setIsFormDisabled,
     setIsFormValid,
@@ -73,6 +74,7 @@ export const InstallationMethod = ({
               onCritFail={onCritFail}
               scenarioPartitioningMapping={scenarioPartitioningMapping}
               partitioning={partitioning}
+              requests={requests}
               setIsFormValid={setIsFormValid}
               setStorageScenarioId={setStorageScenarioId}
               storageScenarioId={storageScenarioId}