Skip to content

Commit

Permalink
fix(web): adapt to new config model hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@joseivanlopez
joseivanlopez committed Dec 19, 2024
1 parent 1401724 commit d807efe
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 54 deletions.
10 changes: 5 additions & 5 deletions web/src/components/overview/StorageSection.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ import { StorageSection } from "~/components/overview";
import * as ConfigModel from "~/api/storage/types/config-model";

const mockDevices = [
{ name: "/dev/sda", size: 536870912000, volumeGroups: [] },
{ name: "/dev/sdb", size: 697932185600, volumeGroups: [] },
{ name: "/dev/sda", size: 536870912000 },
{ name: "/dev/sdb", size: 697932185600 },
];

const mockConfig = { drives: [] as ConfigModel.Drive[] };
Expand All @@ -54,7 +54,7 @@ describe("when the configuration does not include any device", () => {

describe("when the configuration contains one drive", () => {
beforeEach(() => {
mockConfig.drives = [{ name: "/dev/sda", spacePolicy: "delete", volumeGroups: [] }];
mockConfig.drives = [{ name: "/dev/sda", spacePolicy: "delete" }];
});

it("renders the proposal summary", async () => {
Expand Down Expand Up @@ -105,8 +105,8 @@ describe("when the configuration contains one drive", () => {
describe("when the configuration contains several drives", () => {
beforeEach(() => {
mockConfig.drives = [
{ name: "/dev/sda", spacePolicy: "delete", volumeGroups: [] },
{ name: "/dev/sdb", spacePolicy: "delete", volumeGroups: [] },
{ name: "/dev/sda", spacePolicy: "delete" },
{ name: "/dev/sdb", spacePolicy: "delete" },
];
});

Expand Down
83 changes: 46 additions & 37 deletions web/src/components/storage/DriveEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { useAvailableDevices } from "~/queries/storage";
import { configModel } from "~/api/storage/types";
import { StorageDevice } from "~/types/storage";
import { STORAGE as PATHS } from "~/routes/paths";
import { useChangeDrive, useSetSpacePolicy } from "~/queries/storage";
import { useDrive } from "~/queries/storage/config-model";
import * as driveUtils from "~/components/storage/utils/drive";
import { typeDescription, contentDescription } from "~/components/storage/utils/device";
import { Icon } from "../layout";
Expand Down Expand Up @@ -89,13 +89,13 @@ const SpacePolicySelector = ({ drive, driveDevice }: DriveEditorProps) => {
const toggleMenuRef = useRef();
const [isOpen, setIsOpen] = useState(false);
const navigate = useNavigate();
const setSpacePolicy = useSetSpacePolicy();
const { setSpacePolicy } = useDrive(drive.name);
const onToggle = () => setIsOpen(!isOpen);
const onSpacePolicyChange = (spacePolicy: configModel.SpacePolicy) => {
if (spacePolicy === "custom") {
return navigate(generatePath(PATHS.spacePolicy, { id: baseName(drive.name) }));
} else {
setSpacePolicy(drive.name, spacePolicy);
setSpacePolicy(spacePolicy);
setIsOpen(false);
}
};
Expand Down Expand Up @@ -155,40 +155,42 @@ const SpacePolicySelector = ({ drive, driveDevice }: DriveEditorProps) => {
);
};

const SearchSelectorIntro = ({ drive }) => {
const mainText = (drive: configModel.Drive): string => {
const SearchSelectorIntro = ({ drive }: { drive: configModel.Drive }) => {
const { isBoot, isExplicitBoot } = useDrive(drive.name);
// TODO: Get volume groups associated to the drive.
const volumeGroups = [];

const mainText = (): string => {
if (driveUtils.hasReuse(drive)) {
// The current device will be the only option to choose from
return _("This uses existing partitions at the device");
}

const boot = driveUtils.explicitBoot(drive);

if (!driveUtils.hasFilesystem(drive)) {
// The current device will be the only option to choose from
if (driveUtils.hasPv(drive)) {
if (drive.volumeGroups.length > 1) {
if (boot) {
if (volumeGroups.length > 1) {
if (isExplicitBoot) {
return _(
"This device will contain the configured LVM groups and any partition needed to boot",
);
}
return _("This device will contain the configured LVM groups");
}
if (boot) {
if (isExplicitBoot) {
return sprintf(
// TRANSLATORS: %s is the name of the LVM
_("This device will contain the LVM group '%s' and any partition needed to boot"),
drive.volumeGroups[0],
volumeGroups[0],
);
}

// TRANSLATORS: %s is the name of the LVM
return sprintf(_("This device will contain the LVM group '%s'"), drive.volumeGroups[0]);
return sprintf(_("This device will contain the LVM group '%s'"), volumeGroups[0]);
}

// The current device will be the only option to choose from
if (boot) {
if (isExplicitBoot) {
return _("This device will contain any partition needed for booting");
}

Expand All @@ -212,17 +214,16 @@ const SearchSelectorIntro = ({ drive }) => {
);
};

const extraText = (drive: configModel.Drive): string => {
const extraText = (): string => {
// Nothing to add in these cases
if (driveUtils.hasReuse(drive)) return;
if (!driveUtils.hasFilesystem(drive)) return;

const name = baseName(drive.name);
const boot = driveUtils.explicitBoot(drive);

if (driveUtils.hasPv(drive)) {
if (drive.volumeGroups.length > 1) {
if (boot) {
if (volumeGroups.length > 1) {
if (isExplicitBoot) {
return sprintf(
// TRANSLATORS: %s is the name of the disk (eg. sda)
_("%s will still contain the configured LVM groups and any partition needed to boot"),
Expand All @@ -234,36 +235,36 @@ const SearchSelectorIntro = ({ drive }) => {
return sprintf(_("The configured LVM groups will remain at %s"), name);
}

if (boot) {
if (isExplicitBoot) {
return sprintf(
// TRANSLATORS: %1$s is the name of the disk (eg. sda) and %2$s the name of the LVM
_("%1$s will still contain the LVM group '%2$s' and any partition needed to boot"),
name,
drive.volumeGroups[0],
volumeGroups[0],
);
}

return sprintf(
// TRANSLATORS: %1$s is the name of the LVM and %2$s the name of the disk (eg. sda)
_("The LVM group '%1$s' will remain at %2$s"),
name,
drive.volumeGroups[0],
volumeGroups[0],
);
}

if (boot) {
if (isExplicitBoot) {
// TRANSLATORS: %s is the name of the disk (eg. sda)
return sprintf(_("Partitions needed for booting will remain at %s"), name);
}

if (drive.boot) {
if (isBoot) {
return _("Partitions needed for booting will also be adapted");
}
};

const Content = ({ drive }) => {
const main = mainText(drive);
const extra = extraText(drive);
const Content = () => {
const main = mainText();
const extra = extraText();

if (extra) {
return (
Expand All @@ -280,7 +281,7 @@ const SearchSelectorIntro = ({ drive }) => {

return (
<li style={{ padding: "0.7em" }}>
<Content drive={drive} />
<Content />
</li>
);
};
Expand Down Expand Up @@ -362,17 +363,21 @@ const SearchSelectorSingleOption = ({ selected }) => {
};

const SearchSelectorOptions = ({ drive, selected, onChange }) => {
const { isExplicitBoot } = useDrive(drive.name);
// const boot = isExplicitBoot(drive.name);

if (driveUtils.hasReuse(drive)) return <SearchSelectorSingleOption selected={selected} />;

if (!driveUtils.hasFilesystem(drive)) {
if (driveUtils.hasPv(drive) || driveUtils.explicitBoot(drive)) {
if (driveUtils.hasPv(drive) || isExplicitBoot) {
return <SearchSelectorSingleOption selected={selected} />;
}

return <SearchSelectorMultipleOptions selected={selected} onChange={onChange} />;
}

return <SearchSelectorMultipleOptions selected={selected} withNewVg onChange={onChange} />;
// TODO: use withNewVg prop once LVM is added.
return <SearchSelectorMultipleOptions selected={selected} onChange={onChange} />;
};

const SearchSelector = ({ drive, selected, onChange }) => {
Expand All @@ -385,8 +390,10 @@ const SearchSelector = ({ drive, selected, onChange }) => {
};

const RemoveDriveOption = ({ drive }) => {
const { isExplicitBoot } = useDrive(drive.name);

if (driveUtils.hasPv(drive)) return;
if (driveUtils.explicitBoot(drive)) return;
if (isExplicitBoot) return;
if (driveUtils.hasRoot(drive)) return;

return (
Expand All @@ -403,9 +410,9 @@ const DriveSelector = ({ drive, selected }) => {
const menuRef = useRef();
const toggleMenuRef = useRef();
const [isOpen, setIsOpen] = useState(false);
const changeDrive = useChangeDrive();
const driveHandler = useDrive(drive.name);
const onDriveChange = (newDriveName: string) => {
changeDrive(drive.name, newDriveName);
driveHandler.switch(newDriveName);
setIsOpen(false);
};
const onToggle = () => setIsOpen(!isOpen);
Expand Down Expand Up @@ -446,18 +453,20 @@ const DriveSelector = ({ drive, selected }) => {
};

const DriveHeader = ({ drive, driveDevice }: DriveEditorProps) => {
const { isBoot } = useDrive(drive.name);

const text = (drive: configModel.Drive): string => {
if (driveUtils.hasRoot(drive)) {
if (driveUtils.hasPv(drive)) {
if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to install, host LVM and boot");
}
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to install and host LVM");
}

if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to install and boot");
}
Expand All @@ -467,15 +476,15 @@ const DriveHeader = ({ drive, driveDevice }: DriveEditorProps) => {

if (driveUtils.hasFilesystem(drive)) {
if (driveUtils.hasPv(drive)) {
if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s for LVM, additional partitions and booting");
}
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s for LVM and additional partitions");
}

if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s for additional partitions and booting");
}
Expand All @@ -484,15 +493,15 @@ const DriveHeader = ({ drive, driveDevice }: DriveEditorProps) => {
}

if (driveUtils.hasPv(drive)) {
if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to host LVM and boot");
}
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to host LVM");
}

if (drive.boot) {
if (isBoot) {
// TRANSLATORS: %s will be replaced by the device name and its size - "/dev/sda, 20 GiB"
return _("Use %s to boot");
}
Expand Down
9 changes: 4 additions & 5 deletions web/src/components/storage/SpacePolicySelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ import { baseName, deviceChildren } from "~/components/storage/utils";
import { _ } from "~/i18n";
import { PartitionSlot, SpacePolicyAction, StorageDevice } from "~/types/storage";
import { configModel } from "~/api/storage/types";
import { useConfigModel, useDevices, useSetCustomSpacePolicy } from "~/queries/storage";
import { useDevices } from "~/queries/storage";
import { useConfigModel, useDrive } from "~/queries/storage/config-model";
import { toStorageDevice } from "./device-utils";
import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
import { sprintf } from "sprintf-js";
Expand All @@ -49,9 +50,9 @@ export default function SpacePolicySelection() {
const model = useConfigModel({ suspense: true });
const devices = useDevices("system", { suspense: true });
const device = devices.find((d) => baseName(d.name) === id);
const setCustomSpacePolicy = useSetCustomSpacePolicy();
const children = deviceChildren(device);
const drive = model.drives.find((d) => baseName(d.name) === id);
const { setSpacePolicy } = useDrive(drive.name);

const partitionDeviceAction = (device: StorageDevice) => {
const partition = drive.partitions?.find((p) => p.name === device.name);
Expand Down Expand Up @@ -87,9 +88,7 @@ export default function SpacePolicySelection() {

const onSubmit = (e) => {
e.preventDefault();

setCustomSpacePolicy(drive.name, actions);

setSpacePolicy("custom", actions);
navigate("..");
};

Expand Down
9 changes: 3 additions & 6 deletions web/src/components/storage/utils/drive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,20 +159,17 @@ const hasReuse = (drive: configModel.Drive): boolean => {
return drive.partitions && drive.partitions.some((p) => p.mountPath && p.name);
};

// TODO: maybe it should be moved to Drive hook from config-model.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const hasPv = (drive: configModel.Drive): boolean => {
return drive.volumeGroups && drive.volumeGroups.length > 0;
};

const explicitBoot = (drive: configModel.Drive): boolean => {
return drive.boot && drive.boot === "explicit";
return false;
};

export {
hasPv,
hasReuse,
hasFilesystem,
hasRoot,
explicitBoot,
label,
spacePolicyEntry,
contentActionsDescription,
Expand Down
2 changes: 1 addition & 1 deletion web/src/queries/storage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ const useDevices = (
/**
* Hook that returns the list of available devices for installation.
*/
const useAvailableDevices = () => {
const useAvailableDevices = (): StorageDevice[] => {
const findDevice = (devices: StorageDevice[], sid: number) => {
const device = devices.find((d) => d.sid === sid);

Expand Down

0 comments on commit d807efe

Please sign in to comment.