Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): warn the user when using the new storage settings #1881

Merged
merged 4 commits into from
Jan 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions web/package/agama-web-ui.changes
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
-------------------------------------------------------------------
Fri Jan 10 13:22:27 UTC 2025 - Imobach Gonzalez Sosa <[email protected]>

- Do not allow changing the storage setup when Agama is using the
new storage settings (gh#agama-project/agama#1881).

-------------------------------------------------------------------
Wed Jan 8 16:07:13 UTC 2025 - Imobach Gonzalez Sosa <[email protected]>

Expand Down
7 changes: 5 additions & 2 deletions web/src/api/storage/proposal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,12 @@ const fetchDefaultVolume = (mountPath: string): Promise<Volume | undefined> => {
return get(`/api/storage/product/volume_for?mount_path=${path}`);
};

const fetchSettings = (): Promise<ProposalSettings> => get("/api/storage/proposal/settings");
// NOTE: the settings might not exist.
const fetchSettings = (): Promise<ProposalSettings> =>
get("/api/storage/proposal/settings").catch(() => null);

const fetchActions = (): Promise<Action[]> => get("/api/storage/proposal/actions");
// NOTE: the actions might not exist.
const fetchActions = (): Promise<Action[]> => get("/api/storage/proposal/actions").catch(() => []);

const calculate = (settings: ProposalSettingsPatch) =>
put("/api/storage/proposal/settings", settings);
Expand Down
21 changes: 18 additions & 3 deletions web/src/components/overview/StorageSection.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,30 @@ const mockAvailableDevices = [
];

const mockResultSettings = { target: "disk", targetDevice: "/dev/sda", spacePolicy: "delete" };
let mockProposalResult;

jest.mock("~/queries/storage", () => ({
...jest.requireActual("~/queries/storage"),
useAvailableDevices: () => mockAvailableDevices,
useProposalResult: () => ({
useProposalResult: () => mockProposalResult,
}));

beforeEach(() => {
mockProposalResult = {
settings: mockResultSettings,
actions: [],
}),
}));
};
});

describe("when using the new storage settings", () => {
beforeEach(() => (mockProposalResult = undefined));

it("renders a warning message", () => {
plainRender(<StorageSection />);

expect(screen.getByText("Install using an advanced configuration.")).toBeInTheDocument();
});
});

describe("when there is a proposal", () => {
beforeEach(() => {
Expand Down
8 changes: 7 additions & 1 deletion web/src/components/overview/StorageSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,13 @@ export default function StorageSection() {
const availableDevices = useAvailableDevices();
const result = useProposalResult();

if (result === undefined) return;
if (result === undefined) {
return (
<Content>
<Text>{_("Install using an advanced configuration.")}</Text>
</Content>
);
}

const label = (deviceName) => {
const device = availableDevices.find((d) => d.name === deviceName);
Expand Down
10 changes: 5 additions & 5 deletions web/src/components/storage/BootSelection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,16 @@ export default function BootSelectionDialog() {
};

const [state, setState] = useState<BootSelectionState>({ load: false });
const { settings } = useProposalResult();
const proposal = useProposalResult();
const availableDevices = useAvailableDevices();
const updateProposal = useProposalMutation();
const navigate = useNavigate();

useEffect(() => {
if (state.load) return;
if (state.load || !proposal.settings) return;

let selectedOption: string;
const { bootDevice, configureBoot, defaultBootDevice } = settings;
const { bootDevice, configureBoot, defaultBootDevice } = proposal.settings;

if (!configureBoot) {
selectedOption = BOOT_DISABLED_ID;
Expand All @@ -82,7 +82,7 @@ export default function BootSelectionDialog() {
availableDevices,
selectedOption,
});
}, [availableDevices, settings, state.load]);
}, [availableDevices, proposal, state.load]);

if (!state.load) return;

Expand All @@ -97,7 +97,7 @@ export default function BootSelectionDialog() {
bootDevice: state.selectedOption === BOOT_MANUAL_ID ? state.bootDevice.name : undefined,
};

await updateProposal.mutateAsync({ ...settings, ...newSettings });
await updateProposal.mutateAsync({ ...proposal.settings, ...newSettings });
navigate("..");
};

Expand Down
14 changes: 8 additions & 6 deletions web/src/components/storage/DeviceSelection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ type DeviceSelectionState = {
* @component
*/
export default function DeviceSelection() {
const { settings } = useProposalResult();
const proposal = useProposalResult();
const availableDevices = useAvailableDevices();
const updateProposal = useProposalMutation();
const navigate = useNavigate();
Expand All @@ -63,11 +63,13 @@ export default function DeviceSelection() {

// FIXME: move to a state/reducer
setState({
target: settings.target,
targetDevice: availableDevices.find((d) => d.name === settings.targetDevice),
targetPVDevices: availableDevices.filter((d) => settings.targetPVDevices?.includes(d.name)),
target: proposal.settings.target,
targetDevice: availableDevices.find((d) => d.name === proposal.settings.targetDevice),
targetPVDevices: availableDevices.filter((d) =>
proposal.settings.targetPVDevices?.includes(d.name),
),
});
}, [settings, availableDevices, state.target]);
}, [proposal, availableDevices, state.target]);

const selectTargetDisk = () => setState({ ...state, target: ProposalTarget.DISK });
const selectTargetNewLvmVG = () => setState({ ...state, target: ProposalTarget.NEW_LVM_VG });
Expand All @@ -86,7 +88,7 @@ export default function DeviceSelection() {
targetPVDevices: isTargetNewLvmVg ? state.targetPVDevices.map((d) => d.name) : [],
};

updateProposal.mutateAsync({ ...settings, ...newSettings });
updateProposal.mutateAsync({ ...proposal.settings, ...newSettings });
navigate("..");
};

Expand Down
24 changes: 22 additions & 2 deletions web/src/components/storage/ProposalPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

import React, { useRef } from "react";
import { Grid, GridItem, Stack } from "@patternfly/react-core";
import { Page, Drawer } from "~/components/core/";
import { Page, Drawer, EmptyState } from "~/components/core/";
import ProposalTransactionalInfo from "./ProposalTransactionalInfo";
import ProposalSettingsSection from "./ProposalSettingsSection";
import ProposalResultSection from "./ProposalResultSection";
Expand All @@ -46,6 +46,22 @@ import {
import { useQueryClient } from "@tanstack/react-query";
import { refresh } from "~/api/storage";

const StorageWarning = () => (
<Page>
<Page.Header>
<h2>{_("Storage")}</h2>
</Page.Header>
<Page.Content>
<EmptyState
title={_(
"The system layout was set up using a advanced configuration that cannot be modified with the current version of this visual interface. This limitation will be removed in a future version of Agama.",
)}
icon="warning"
/>
</Page.Content>
</Page>
);

/**
* Which UI item is being changed by user
*/
Expand Down Expand Up @@ -78,7 +94,7 @@ export default function ProposalPage() {
const volumeDevices = useVolumeDevices();
const volumeTemplates = useVolumeTemplates();
const { encryptionMethods } = useProductParams({ suspense: true });
const { actions, settings } = useProposalResult();
const proposal = useProposalResult();
const updateProposal = useProposalMutation();
const deprecated = useDeprecated();
const queryClient = useQueryClient();
Expand All @@ -95,6 +111,10 @@ export default function ProposalPage() {
.filter((s) => s.severity === IssueSeverity.Error)
.map(toValidationError);

if (proposal === undefined) return <StorageWarning />;

const { settings, actions } = proposal;

const changeSettings = async (changing, updated: object) => {
const newSettings = { ...settings, ...updated };
updateProposal.mutateAsync(newSettings).catch(console.error);
Expand Down
2 changes: 2 additions & 0 deletions web/src/queries/storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,8 @@ const useProposalResult = (): ProposalResult | undefined => {
const systemDevices = useDevices("system", { suspense: true });
const { mountPoints: productMountPoints } = useProductParams({ suspense: true });

if (settings === null) return undefined;

return {
settings: {
...settings,
Expand Down
Loading