Reorganize storage methods and hooks

web/src/App.test.tsx

@@ -31,7 +31,7 @@ import { Product } from "~/types/software";
 import { PATHS } from "~/router";
 import { PRODUCT } from "~/routes/paths";
 import type { Config } from "~/api";
-import type { Progress, State } from "~/model/status";
+import type { Progress, Stage } from "~/model/status";
 import App from "./App";
 import { System } from "~/model/system/network";
 
@@ -51,7 +51,7 @@ const network: System = {
   accessPoints: [],
 };
 const mockProgresses: jest.Mock<Progress[]> = jest.fn();
-const mockState: jest.Mock<State> = jest.fn();
+const mockState: jest.Mock<Stage> = jest.fn();
 const mockSelectedProduct: jest.Mock<Config["product"]> = jest.fn();
 
 jest.mock("~/hooks/api", () => ({
@@ -62,7 +62,7 @@ jest.mock("~/hooks/api", () => ({
   }),
 
   useStatus: (): ReturnType<typeof useStatus> => ({
-    state: mockState(),
+    stage: mockState(),
     progresses: mockProgresses(),
   }),
 

web/src/components/overview/StorageSection.tsx

@@ -24,7 +24,7 @@ import React from "react";
 import { Content } from "@patternfly/react-core";
 import { deviceLabel } from "~/components/storage/utils";
 import { useAvailableDevices, useDevices, useIssues } from "~/hooks/model/system/storage";
-import { useConfigModel } from "~/hooks/model/storage";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import { _ } from "~/i18n";
 import type { Storage } from "~/model/system";
 import type { ConfigModel } from "~/model/storage/config-model";

web/src/components/storage/BootSection.tsx

@@ -26,7 +26,7 @@ import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import Link from "~/components/core/Link";
 import Icon from "~/components/layout/Icon";
 import { useAvailableDrives } from "~/hooks/model/system/storage";
-import { useConfigModel } from "~/hooks/model/storage";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import configModel from "~/model/storage/config-model";
 import { STORAGE } from "~/routes/paths";
 import { deviceLabel, formattedPath } from "~/components/storage/utils";
@@ -76,8 +76,8 @@ export default function BootSection() {
   const config = useConfigModel();
   const devices = useAvailableDrives();
 
-  const isDefaultBoot = configModel.hasDefaultBoot(config);
-  const bootDevice = configModel.bootDevice(config);
+  const isDefaultBoot = configModel.boot.isDefault(config);
+  const bootDevice = configModel.boot.findDevice(config);
   const device = devices.find((d) => d.name === bootDevice?.name);
 
   return (

web/src/components/storage/BootSelection.tsx

@@ -27,14 +27,13 @@ import { DevicesFormSelect } from "~/components/storage";
 import { Page, SubtleContent } from "~/components/core";
 import { deviceLabel, formattedPath } from "~/components/storage/utils";
 import { useCandidateDevices, useDevices } from "~/hooks/model/system/storage";
-import { useModel } from "~/hooks/storage/model";
-import { useConfigModel } from "~/hooks/model/storage";
-import { isDrive } from "~/storage/device";
 import {
+  useConfigModel,
   useSetBootDevice,
   useSetDefaultBootDevice,
-  useDisableBootConfig,
-} from "~/hooks/storage/boot";
+  useDisableBoot,
+} from "~/hooks/model/storage/config-model";
+import { isDrive } from "~/model/storage/device";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -77,21 +76,20 @@ export default function BootSelection() {
   const [state, setState] = useState<BootSelectionState>({ load: false });
   const navigate = useNavigate();
   const devices = useDevices();
-  const model = useModel();
   const config = useConfigModel();
   const allCandidateDevices = useCandidateDevices();
   const setBootDevice = useSetBootDevice();
   const setDefaultBootDevice = useSetDefaultBootDevice();
-  const disableBootConfig = useDisableBootConfig();
+  const disableBootConfig = useDisableBoot();
 
-  const candidateDevices = filteredCandidates(allCandidateDevices, model);
+  const candidateDevices = filteredCandidates(allCandidateDevices, config);
 
   useEffect(() => {
-    if (state.load || !model) return;
+    if (state.load || !config) return;
 
     const bootModel = config.boot;
-    const isDefaultBoot = configModel.hasDefaultBoot(config);
-    const bootDevice = configModel.bootDevice(config);
+    const isDefaultBoot = configModel.boot.isDefault(config);
+    const bootDevice = configModel.boot.findDevice(config);
     let selectedOption: string;
 
     if (!bootModel.configure) {
@@ -118,9 +116,9 @@ export default function BootSelection() {
       candidateDevices: candidates,
       selectedOption,
     });
-  }, [devices, candidateDevices, model, state.load, config]);
+  }, [devices, candidateDevices, config, state.load]);
 
-  if (!state.load || !model) return;
+  if (!state.load || !config) return;
 
   const onSubmit = async (e) => {
     e.preventDefault();

web/src/components/storage/ConfigEditor.tsx

@@ -28,7 +28,7 @@ import VolumeGroupEditor from "~/components/storage/VolumeGroupEditor";
 import MdRaidEditor from "~/components/storage/MdRaidEditor";
 import { useReset } from "~/hooks/model/config/storage";
 import ConfigureDeviceMenu from "./ConfigureDeviceMenu";
-import { useModel } from "~/hooks/storage/model";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import { _ } from "~/i18n";
 
 const NoDevicesConfiguredAlert = () => {
@@ -57,10 +57,10 @@ const NoDevicesConfiguredAlert = () => {
 };
 
 export default function ConfigEditor() {
-  const model = useModel();
-  const drives = model.drives;
-  const mdRaids = model.mdRaids;
-  const volumeGroups = model.volumeGroups;
+  const config = useConfigModel();
+  const drives = config.drives;
+  const mdRaids = config.mdRaids;
+  const volumeGroups = config.volumeGroups;
 
   if (!drives.length && !mdRaids.length && !volumeGroups.length) {
     return <NoDevicesConfiguredAlert />;

web/src/components/storage/ConfigureDeviceMenu.tsx

@@ -25,14 +25,12 @@ import { useNavigate } from "react-router";
 import MenuButton, { MenuButtonItem } from "~/components/core/MenuButton";
 import { Divider, Flex, MenuItemProps } from "@patternfly/react-core";
 import { useAvailableDevices } from "~/hooks/model/system/storage";
-import { useModel } from "~/hooks/storage/model";
-import { useAddDrive } from "~/hooks/storage/drive";
-import { useAddReusedMdRaid } from "~/hooks/storage/md-raid";
+import { useConfigModel, useAddDrive, useAddMdRaid } from "~/hooks/model/storage/config-model";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { sprintf } from "sprintf-js";
 import { _, n_ } from "~/i18n";
 import DeviceSelectorModal from "./DeviceSelectorModal";
-import { isDrive } from "~/storage/device";
+import { isDrive } from "~/model/storage/device";
 import { Icon } from "../layout";
 import type { Storage } from "~/model/system";
 
@@ -126,12 +124,12 @@ export default function ConfigureDeviceMenu(): React.ReactNode {
 
   const navigate = useNavigate();
 
-  const model = useModel();
+  const config = useConfigModel();
   const addDrive = useAddDrive();
-  const addReusedMdRaid = useAddReusedMdRaid();
+  const addReusedMdRaid = useAddMdRaid();
   const allDevices = useAvailableDevices();
 
-  const usedDevicesNames = model.drives.concat(model.mdRaids).map((d) => d.name);
+  const usedDevicesNames = config.drives.concat(config.mdRaids).map((d) => d.name);
   const usedDevicesCount = usedDevicesNames.length;
   const devices = allDevices.filter((d) => !usedDevicesNames.includes(d.name));
   const withRaids = !!allDevices.filter((d) => !isDrive(d)).length;

web/src/components/storage/DeviceEditorContent.tsx

@@ -25,7 +25,7 @@ import UnusedMenu from "~/components/storage/UnusedMenu";
 import FilesystemMenu from "~/components/storage/FilesystemMenu";
 import PartitionsSection from "~/components/storage/PartitionsSection";
 import SpacePolicyMenu from "~/components/storage/SpacePolicyMenu";
-import { useConfigModel } from "~/hooks/model/storage";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import configModel from "~/model/storage/config-model";
 
 type DeviceEditorContentProps = {
@@ -39,7 +39,7 @@ export default function DeviceEditorContent({
 }: DeviceEditorContentProps): React.ReactNode {
   const config = useConfigModel();
   const device = config[collection][index];
-  const isUsed = configModel.isUsedDevice(config, device.name);
+  const isUsed = configModel.partitionable.isUsed(config, device.name);
 
   if (!isUsed) return <UnusedMenu collection={collection} index={index} />;
 

web/src/components/storage/DeviceSelectorModal.tsx

@@ -35,7 +35,7 @@ import {
 import { deviceSize } from "~/components/storage/utils";
 import { sortCollection } from "~/utils";
 import { _ } from "~/i18n";
-import { deviceSystems } from "~/storage/device";
+import { deviceSystems } from "~/model/storage/device";
 import type { Storage } from "~/model/system";
 
 type DeviceSelectorProps = {

web/src/components/storage/DriveEditor.tsx

@@ -27,10 +27,9 @@ import DriveHeader from "~/components/storage/DriveHeader";
 import DeviceEditorContent from "~/components/storage/DeviceEditorContent";
 import SearchedDeviceMenu from "~/components/storage/SearchedDeviceMenu";
 import { CustomToggleProps } from "~/components/core/MenuButton";
-import { useDeleteDrive } from "~/hooks/storage/drive";
 import { Button, Flex, FlexItem } from "@patternfly/react-core";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
-import { useDrive } from "~/hooks/storage/model";
+import { useDrive, useDeleteDrive } from "~/hooks/model/storage/config-model";
 import { useDevice } from "~/hooks/model/system/storage";
 import type { ConfigModel } from "~/model/storage/config-model";
 import type { Storage as System } from "~/model/system";
@@ -69,23 +68,24 @@ const DriveDeviceMenuToggle = forwardRef(
 );
 
 type DriveDeviceMenuProps = {
-  drive: ConfigModel.Drive;
-  selected: System.Device;
+  index: number;
 };
 
 /**
  * Internal component that renders generic actions available for a Drive device.
  */
-const DriveDeviceMenu = ({ drive, selected }: DriveDeviceMenuProps) => {
+const DriveDeviceMenu = ({ index }: DriveDeviceMenuProps) => {
+  const driveModel = useDrive(index);
+  const drive = useDevice(driveModel.name);
   const deleteDrive = useDeleteDrive();
-  const deleteFn = (device: ConfigModel.Drive) => deleteDrive(device.name);
+  const deleteFn = () => deleteDrive(index);
 
   return (
     <SearchedDeviceMenu
-      modelDevice={drive}
-      selected={selected}
+      modelDevice={driveModel}
+      selected={drive}
       deleteFn={deleteFn}
-      toggle={<DriveDeviceMenuToggle drive={drive} device={selected} />}
+      toggle={<DriveDeviceMenuToggle drive={driveModel} device={drive} />}
     />
   );
 };
@@ -107,7 +107,7 @@ export default function DriveEditor({ index }: DriveEditorProps) {
   if (drive === undefined) return null;
 
   return (
-    <ConfigEditorItem header={<DriveDeviceMenu drive={driveModel} selected={drive} />}>
+    <ConfigEditorItem header={<DriveDeviceMenu index={index} />}>
       <DeviceEditorContent collection="drives" index={index} />
     </ConfigEditorItem>
   );

web/src/components/storage/DriveHeader.tsx

@@ -22,9 +22,8 @@
 
 import { sprintf } from "sprintf-js";
 import { deviceLabel } from "./utils";
-import { useConfigModel } from "~/hooks/model/storage";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import configModel from "~/model/storage/config-model";
-import partitionableModel from "~/model/storage/partitionable-model";
 import { _ } from "~/i18n";
 import type { ConfigModel } from "~/model/storage/config-model";
 import type { Storage } from "~/model/system";
@@ -41,10 +40,10 @@ const Text = (drive: ConfigModel.Drive): string => {
     return _("Format disk %s");
   }
 
-  const isBoot = configModel.isBootDevice(config, drive.name);
+  const isBoot = configModel.boot.hasDevice(config, drive.name);
   const hasPv = configModel.isTargetDevice(config, drive.name);
-  const isRoot = !!partitionableModel.findPartition(drive, "/");
-  const hasFs = !!partitionableModel.usedMountPaths(drive).length;
+  const isRoot = !!configModel.partitionable.findPartition(drive, "/");
+  const hasFs = !!configModel.partitionable.usedMountPaths(drive).length;
 
   if (isRoot) {
     if (hasPv) {

web/src/components/storage/EncryptionSection.tsx

@@ -25,7 +25,7 @@ import { Content, Flex, Split, Stack } from "@patternfly/react-core";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import { Link } from "~/components/core";
 import Icon from "~/components/layout/Icon";
-import { useEncryption } from "~/queries/storage/config-model";
+import { useConfigModel } from "~/hooks/model/storage/config-model";
 import { STORAGE } from "~/routes/paths";
 import { _ } from "~/i18n";
 import PasswordCheck from "~/components/users/PasswordCheck";
@@ -39,7 +39,8 @@ function encryptionLabel(method?: ConfigModel.EncryptionMethod) {
 }
 
 export default function EncryptionSection() {
-  const { encryption } = useEncryption();
+  const configModel = useConfigModel();
+  const encryption = configModel?.encryption;
   const method = encryption?.method;
   const password = encryption?.password;
 

web/src/components/storage/EncryptionSettingsPage.tsx

@@ -26,7 +26,7 @@ import { ActionGroup, Alert, Checkbox, Content, Form } from "@patternfly/react-c
 import { NestedContent, Page, PasswordAndConfirmationInput } from "~/components/core";
 import PasswordCheck from "~/components/users/PasswordCheck";
 import { useEncryptionMethods } from "~/hooks/model/system/storage";
-import { useEncryption } from "~/queries/storage/config-model";
+import { useConfigModel, useSetEncryption } from "~/hooks/model/storage/config-model";
 import { isEmpty } from "radashi";
 import { _ } from "~/i18n";
 import type { ConfigModel } from "~/model/storage/config-model";
@@ -37,8 +37,9 @@ import type { ConfigModel } from "~/model/storage/config-model";
 export default function EncryptionSettingsPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { encryption: encryptionConfig, enable, disable } = useEncryption();
   const methods = useEncryptionMethods();
+  const configModel = useConfigModel();
+  const setEncryption = useSetEncryption();
 
   const [errors, setErrors] = useState([]);
   const [isEnabled, setIsEnabled] = useState(false);
@@ -49,12 +50,12 @@ export default function EncryptionSettingsPage() {
   const formId = "encryptionSettingsForm";
 
   useEffect(() => {
-    if (encryptionConfig) {
+    if (configModel?.encryption) {
       setIsEnabled(true);
-      setMethod(encryptionConfig.method);
-      setPassword(encryptionConfig.password || "");
+      setMethod(configModel.encryption.method);
+      setPassword(configModel.encryption.password || "");
     }
-  }, [encryptionConfig]);
+  }, [configModel]);
 
   const changePassword = (_, v: string) => setPassword(v);
 
@@ -81,7 +82,7 @@ export default function EncryptionSettingsPage() {
       return;
     }
 
-    const commit = () => (isEnabled ? enable(method, password) : disable());
+    const commit = () => (isEnabled ? setEncryption({ method, password }) : setEncryption(null));
 
     commit();
     navigate({ pathname: "..", search: location.search });
@@ -128,7 +129,7 @@ at the new file systems, including data, programs, and system files.",
             <NestedContent margin="mxLg">
               <PasswordAndConfirmationInput
                 inputRef={passwordRef}
-                initialValue={encryptionConfig?.password}
+                initialValue={configModel?.encryption?.password}
                 value={password}
                 onChange={changePassword}
                 isDisabled={!isEnabled}

web/src/components/storage/FilesystemMenu.tsx

@@ -27,7 +27,7 @@ import { generatePath, useNavigate } from "react-router";
 import MenuButton, { CustomToggleProps } from "~/components/core/MenuButton";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { filesystemType, formattedPath } from "~/components/storage/utils";
-import { useDevice } from "~/hooks/storage/model";
+import { usePartitionable } from "~/hooks/model/storage/config-model";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 import type { ConfigModel } from "~/model/storage/config-model";
@@ -91,7 +91,7 @@ export default function FilesystemMenu({
   index,
 }: FilesystemMenuProps): React.ReactNode {
   const navigate = useNavigate();
-  const deviceModel = useDevice(collection, index);
+  const deviceModel = usePartitionable(collection, index);
   const editFilesystemPath = generatePath(PATHS.formatDevice, { collection, index });
 
   return (