Skip to content

fix(web): display the installation progress #1321

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.

Sign up for GitHub

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

Merged
imobachgs merged 6 commits into from
Jun 12, 2024
Merged

fix(web): display the installation progress #1321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3d4354
fix(web): display the installation progress
imobachgs Jun 12, 2024
5b55c6e
web: allow SimpleLayout display Outlet or children
dgdavid Jun 12, 2024
3d2347c
web: wrap installation progress with SimpleLayout
dgdavid Jun 12, 2024
612a121
web: avoid mounting Questions twice
dgdavid Jun 12, 2024
82c5e4c
web: fix broken test
dgdavid Jun 12, 2024
70a5e32
fix(web): make sure the client is connected
imobachgs Jun 12, 2024
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
13 changes: 7 additions & 6 deletions web/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { BUSY } from "~/client/status";
*/
function App() {
const client = useInstallerClient();
const { error } = useInstallerClientStatus();
const { connected, error } = useInstallerClientStatus();
const { products } = useProduct();
const { language } = useInstallerL10n();
const [status, setStatus] = useState(undefined);
Expand Down Expand Up @@ -73,7 +73,12 @@ function App() {

const Content = () => {
if (error) return <ServerError />;
if (!products) return <Loading />;

if (phase === INSTALL) {
return <Installation status={status} />;
}

if (!products || !connected) return <Loading />;

if ((phase === STARTUP && status === BUSY) || phase === undefined || status === undefined) {
return <Loading />;
Expand All @@ -83,10 +88,6 @@ function App() {
return <ProductSelectionProgress />;
}

if (phase === INSTALL) {
return <Installation status={status} />;
}

return <Outlet />;
};

Expand Down
4 changes: 2 additions & 2 deletions web/src/SimpleLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { _ } from "~/i18n";
* Simple layout for displaying content that comes before product configuration
* TODO: improve documentation
*/
export default function SimpleLayout() {
export default function SimpleLayout({ showOutlet = true, children }) {
return (
<Page>
<Masthead backgroundColor="light200">
Expand All @@ -49,7 +49,7 @@ export default function SimpleLayout() {
</Toolbar>
</MastheadContent>
</Masthead>
<Outlet />
{showOutlet ? <Outlet /> : children}
</Page>
);
}
68 changes: 41 additions & 27 deletions web/src/components/core/InstallationFinished.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,16 @@
import React, { useState, useEffect } from "react";
import {
Alert,
Button,
Card, CardBody,
EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, ExpandableSection,
Flex,
Grid, GridItem,
Stack,
Text
} from "@patternfly/react-core";
import { Page } from "~/components/core";
import { Icon } from "~/components/layout";
import SimpleLayout from "~/SimpleLayout";
import { Center, Icon } from "~/components/layout";
import { EncryptionMethods } from "~/client/storage";
import { _ } from "~/i18n";
import { useInstallerClient } from "~/context/installer";
Expand Down Expand Up @@ -83,31 +87,41 @@ function InstallationFinished() {
});

return (
// TRANSLATORS: page title
<Page icon="task_alt" title={_("Installation Finished")}>
<EmptyState variant="xl">
<EmptyStateHeader
titleText={_("Congratulations!")}
headingLevel="h2"
icon={<EmptyStateIcon icon={SuccessIcon} />}
/>
<EmptyStateBody>
<Text>{_("The installation on your machine is complete.")}</Text>
<Text>
{usingIguana
? _("At this point you can power off the machine.")
: _("At this point you can reboot the machine to log in to the new system.")}
</Text>
{usingTpm && <TpmHint />}
</EmptyStateBody>
</EmptyState>

<Page.Actions>
<Page.Action onClick={closingAction}>
{usingIguana ? _("Finish") : _("Reboot")}
</Page.Action>
</Page.Actions>
</Page>
<SimpleLayout showOutlet={false}>
<Center>
<Grid hasGutter>
<GridItem sm={8} smOffset={2}>
<Card isRounded>
<CardBody>
<Stack hasGutter>
<EmptyState variant="xl">
<EmptyStateHeader
titleText={_("Congratulations!")}
headingLevel="h2"
icon={<EmptyStateIcon icon={SuccessIcon} />}
/>
<EmptyStateBody>
<Text>{_("The installation on your machine is complete.")}</Text>
<Text>
{usingIguana
? _("At this point you can power off the machine.")
: _("At this point you can reboot the machine to log in to the new system.")}
</Text>
{!usingTpm && <TpmHint />}
</EmptyStateBody>
</EmptyState>
<Flex direction={{ default: "rowReverse" }}>
<Button size="lg" variant="primary" onClick={closingAction}>
{usingIguana ? _("Finish") : _("Reboot")}
</Button>
</Flex>
</Stack>
</CardBody>
</Card>
</GridItem>
</Grid>
</Center>
</SimpleLayout>
);
}

Expand Down
22 changes: 15 additions & 7 deletions web/src/components/core/InstallationProgress.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,27 @@
*/

import React from "react";

import { Card, CardBody, Grid, GridItem } from "@patternfly/react-core";
import SimpleLayout from "~/SimpleLayout";
import ProgressReport from "./ProgressReport";
import { Center } from "~/components/layout";
import { Page } from "~/components/core";
import { Questions } from "~/components/questions";
import { _ } from "~/i18n";

function InstallationProgress() {
return (
<Page icon="downloading" title={_("Installing")}>
<Center><ProgressReport /></Center>
<Questions />
</Page>
<SimpleLayout showOutlet={false}>
<Center>
<Grid hasGutter>
<GridItem sm={8} smOffset={2}>
<Card>
<CardBody>
<ProgressReport />
</CardBody>
</Card>
</GridItem>
</Grid>
</Center>
</SimpleLayout>
);
}

Expand Down
48 changes: 25 additions & 23 deletions web/src/components/core/ProgressReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import React, { useState, useEffect } from "react";
import { useCancellablePromise } from "~/utils";
import { useInstallerClient } from "~/context/installer";

import { Progress, Text } from "@patternfly/react-core";
import { Grid, GridItem, Progress, Text } from "@patternfly/react-core";

const ProgressReport = () => {
const client = useInstallerClient();
Expand Down Expand Up @@ -57,29 +57,31 @@ const ProgressReport = () => {
if (!progress.steps) return <Text>Waiting for progress status...</Text>;

return (
<>
<Progress
min={0}
max={progress.steps}
value={progress.step}
title={progress.message}
label={" "}
aria-label={progress.message}
/>
<Grid hasGutter>
<GridItem sm={12}>
<Progress
min={0}
max={progress.steps}
value={progress.step}
title={progress.message}
label={" "}
aria-label={progress.message}
/>

<Progress
size="sm"
min={0}
max={subProgress?.steps}
value={subProgress?.step}
title={subProgress?.message}
label={" "}
measureLocation="none"
className={!subProgress && 'hidden'}
aria-label={subProgress?.message || " "}
aria-hidden={!subProgress}
/>
</>
<Progress
size="sm"
min={0}
max={subProgress?.steps}
value={subProgress?.step}
title={subProgress?.message}
label={" "}
measureLocation="none"
className={!subProgress && 'hidden'}
aria-label={subProgress?.message || " "}
aria-hidden={!subProgress}
/>
</GridItem>
</Grid>
);
};

Expand Down
22 changes: 11 additions & 11 deletions ...ponents/storage/ProposalPageMenu.test.jsx → ...mponents/storage/DevicesTechMenu.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import React from "react";
import { screen } from "@testing-library/react";
import { installerRender } from "~/test-utils";
import { createClient } from "~/client";
import { ProposalPageMenu } from "~/components/storage";
import DevicesTechMenu from "./DevicesTechMenu";

jest.mock("~/client");

Expand Down Expand Up @@ -51,43 +51,43 @@ beforeEach(() => {
});

it("contains an entry for configuring iSCSI", async () => {
const { user } = installerRender(<ProposalPageMenu />);
const { user } = installerRender(<DevicesTechMenu />);
const toggler = screen.getByRole("button");
await user.click(toggler);
const link = screen.getByRole("menuitem", { name: /iSCSI/ });
const link = screen.getByRole("option", { name: /iSCSI/ });
expect(link).toHaveAttribute("href", "/storage/iscsi");
});

it("contains an entry for configuring DASD when is supported", async () => {
isDASDSupportedFn.mockResolvedValue(true);
const { user } = installerRender(<ProposalPageMenu />);
const { user } = installerRender(<DevicesTechMenu />);
const toggler = screen.getByRole("button");
await user.click(toggler);
const link = screen.getByRole("menuitem", { name: /DASD/ });
const link = screen.getByRole("option", { name: /DASD/ });
expect(link).toHaveAttribute("href", "/storage/dasd");
});

it("does not contain an entry for configuring DASD when is NOT supported", async () => {
isDASDSupportedFn.mockResolvedValue(false);
const { user } = installerRender(<ProposalPageMenu />);
const { user } = installerRender(<DevicesTechMenu />);
const toggler = screen.getByRole("button");
await user.click(toggler);
expect(screen.queryByRole("menuitem", { name: /DASD/ })).toBeNull();
expect(screen.queryByRole("option", { name: /DASD/ })).toBeNull();
});

it("contains an entry for configuring zFCP when is supported", async () => {
isZFCPSupportedFn.mockResolvedValue(true);
const { user } = installerRender(<ProposalPageMenu />);
const { user } = installerRender(<DevicesTechMenu />);
const toggler = screen.getByRole("button");
await user.click(toggler);
const link = screen.getByRole("menuitem", { name: /zFCP/ });
const link = screen.getByRole("option", { name: /zFCP/ });
expect(link).toHaveAttribute("href", "/storage/zfcp");
});

it("does not contain an entry for configuring zFCP when is NOT supported", async () => {
isZFCPSupportedFn.mockResolvedValue(false);
const { user } = installerRender(<ProposalPageMenu />);
const { user } = installerRender(<DevicesTechMenu />);
const toggler = screen.getByRole("button");
await user.click(toggler);
expect(screen.queryByRole("menuitem", { name: /DASD/ })).toBeNull();
expect(screen.queryByRole("option", { name: /DASD/ })).toBeNull();
});
6 changes: 3 additions & 3 deletions web/src/components/storage/ProposalPage.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ jest.mock("@patternfly/react-core", () => {

};
});
jest.mock("~/components/storage/ProposalPageMenu", () => () => <div>ProposalPage Options</div>);
jest.mock("./DevicesTechMenu", () => () => <div>Devices Tech Menu</div>);

jest.mock("~/context/product", () => ({
...jest.requireActual("~/context/product"),
useProduct: () => ({
selectedProduct : { name: "Test" }
selectedProduct: { name: "Test" }
})
}));

Expand All @@ -73,7 +73,7 @@ const vda = {
active: true,
name: "/dev/vda",
size: 1e+12,
systems : ["Windows 11", "openSUSE Leap 15.2"],
systems: ["Windows 11", "openSUSE Leap 15.2"],
udevIds: ["ata-Micron_1100_SATA_512GB_12563", "scsi-0ATA_Micron_1100_SATA_512GB"],
udevPaths: ["pci-0000:00-12", "pci-0000:00-12-ata"],
};
Expand Down