Skip to content

First adaptations to the storage page #1322

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
teclator merged 4 commits into from
Jun 12, 2024
Merged

First adaptations to the storage page #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68081d8
web: Adjustments at storage result card
ancorgs Jun 12, 2024
49a2a42
web: Adjustments in the space policy card
ancorgs Jun 12, 2024
2153f6b
web: remove Lorem Ipsum
ancorgs Jun 12, 2024
d5535ed
web: WIP: adapt installation device card
ancorgs 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
39 changes: 25 additions & 14 deletions web/src/components/storage/InstallationDeviceField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@

import React from "react";
import { Link } from "react-router-dom";
import { Skeleton } from "@patternfly/react-core";
import {
Card, CardHeader, CardTitle, CardBody, CardFooter, Skeleton
} from "@patternfly/react-core";
import { ButtonLink, CardField } from "~/components/core";
import { _ } from "~/i18n";
import { deviceLabel } from '~/components/storage/utils';
import { sprintf } from "sprintf-js";
import textStyles from '@patternfly/react-styles/css/utilities/Text/text';

/**
* @typedef {import ("~/client/storage").ProposalTarget} ProposalTarget
Expand All @@ -48,13 +51,16 @@ const DESCRIPTION = _("Main disk or LVM Volume Group for installation.");
* @returns {string}
*/
const targetValue = (target, targetDevice, targetPVDevices) => {
if (target === "DISK" && targetDevice) return deviceLabel(targetDevice);
if (target === "DISK" && targetDevice) {
// TRANSLATORS: %s is the installation disk (eg. "/dev/sda, 80 GiB)
return sprintf(_("File systems created as new partitions at %s"), deviceLabel(targetDevice));
}
if (target === "NEW_LVM_VG" && targetPVDevices.length > 0) {
if (targetPVDevices.length > 1) return _("new LVM volume group");
if (targetPVDevices.length > 1) return _("File systems created at a new LVM volume group");

if (targetPVDevices.length === 1) {
// TRANSLATORS: %s is the disk used for the LVM physical volumes (eg. "/dev/sda, 80 GiB)
return sprintf(_("new LVM volume group on %s"), deviceLabel(targetPVDevices[0]));
return sprintf(_("File systems created at a new LVM volume group on %s"), deviceLabel(targetPVDevices[0]));
}
}

Expand Down Expand Up @@ -94,15 +100,20 @@ export default function InstallationDeviceField({
value = targetValue(target, targetDevice, targetPVDevices);

return (
<CardField
label={LABEL}
description={DESCRIPTION}
value={value}
actions={
isLoading
? <Skeleton fontSize="sm" width="100px" />
: <ButtonLink to="target-device" isPrimary={false}>{_("Change")}</ButtonLink>
}
/>
<Card isCompact isFullHeight isRounded>
<CardHeader>
<CardTitle>
<h3>{LABEL}</h3>
</CardTitle>
</CardHeader>
<CardBody>
<div className={textStyles.color_200}>{DESCRIPTION}</div>
</CardBody>
<CardBody>{value}</CardBody>
<CardFooter>{ isLoading
? <Skeleton fontSize="sm" width="100px" />
: <ButtonLink to="target-device" isPrimary={false}>{_("Change")}</ButtonLink>}
</CardFooter>
</Card>
);
}
1 change: 0 additions & 1 deletion web/src/components/storage/ProposalPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,6 @@ export default function ProposalPage() {
<>
<Page.Header>
<h2>{_("Storage")}</h2>
<p className={textStyles.color_400}>{_("Lorem ipsum dolor")}</p>
<ProposalTransactionalInfo
settings={state.settings}
/>
Expand Down
25 changes: 12 additions & 13 deletions web/src/components/storage/ProposalResultSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,15 @@ const DeletionsInfo = ({ actions, systems }) => {
* @param {object} props
* @param {Action[]} props.actions
*/
const ActionsInfo = ({ onClick }) => {
const ActionsInfo = ({ numActions, onClick }) => {
// TRANSLATORS: %d will be replaced by the number of proposal actions.
const text = sprintf(
n_("Check the planned action", "Check the %d planned actions", numActions),
numActions
);

return (
<Button onClick={onClick} variant="link" isInline>{_("Check all planned actions")}</Button>
<Button onClick={onClick} variant="link" isInline>{text}</Button>
);
};

Expand Down Expand Up @@ -140,24 +146,15 @@ const SectionContent = ({ system, staging, actions, errors, isLoading, onActions
if (errors.length) return;

const totalActions = actions.length;
// TRANSLATORS: The description for the Result section in storage proposal
// page. %d will be replaced by the number of proposal actions.
const description = sprintf(n_(
"During installation, %d action will be performed to configure the system as displayed below",
"During installation, %d actions will be performed to configure the system as displayed below",
totalActions
), totalActions);

const devicesManager = new DevicesManager(system, staging, actions);

return (
<Stack hasGutter>
<div>{description}</div>
<DeletionsInfo
actions={devicesManager.actions.filter(a => a.delete && !a.subvol)}
systems={devicesManager.deletedSystems()}
/>
<ActionsInfo onClick={onActionsClick} />
<ActionsInfo numActions={totalActions} onClick={onActionsClick} />
<ProposalResultTable devicesManager={devicesManager} />
</Stack>
);
Expand Down Expand Up @@ -188,6 +185,8 @@ export default function ProposalResultSection({
const openDrawer = () => setDrawerOpen(true);
const closeDrawer = () => setDrawerOpen(false);

const description = _("During installation, some actions will be performed to configure the system as displayed below.");

return (
<Card isCompact isRounded isFullHeight>
<Drawer isExpanded={drawerOpen}>
Expand All @@ -212,7 +211,7 @@ export default function ProposalResultSection({
</CardTitle>
</CardHeader>
<CardBody>
<div className={textStyles.color_200}>{_("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")}</div>
<div className={textStyles.color_200}>{description}</div>
</CardBody>
<CardBody>
<SectionErrors errors={errors} />
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/storage/SpacePolicyField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default function SpacePolicyField({
description={_("Allocating the file systems might need to find free space \
in the installation device(s).")}
actions={
isLoading ? <Skeleton fontSize="sm" width="100px" /> : <Button variant="secondary" onClick={openDialog}>{_("Change space policy")}</Button>
isLoading ? <Skeleton fontSize="sm" width="100px" /> : <Button variant="secondary" onClick={openDialog}>{_("Change")}</Button>
}
>
{isDialogOpen &&
Expand Down
20 changes: 7 additions & 13 deletions web/src/components/storage/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,8 @@ const SPACE_POLICIES = [
description: N_("All partitions will be removed and any data in the disks will be lost."),
summaryLabels: [
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space deleting all content[...]"
N_("deleting all content of the installation device"),
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space deleting all content[...]"
N_("deleting all content of the %d selected disks")
// would read as "Find space deleting current content". Keep it short
N_("deleting current content")
]
},
{
Expand All @@ -91,11 +88,8 @@ const SPACE_POLICIES = [
description: N_("The data is kept, but the current partitions will be resized as needed."),
summaryLabels: [
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space shrinking partitions[...]"
N_("shrinking partitions of the installation device"),
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space shrinking partitions[...]"
N_("shrinking partitions of the %d selected disks")
// would read as "Find space shrinking partitions". Keep it short.
N_("shrinking partitions")
]
},
{
Expand All @@ -104,7 +98,7 @@ const SPACE_POLICIES = [
description: N_("The data is kept. Only the space not assigned to any partition will be used."),
summaryLabels: [
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space without modifying any partition".
// would read as "Find space without modifying any partition". Keep it short.
N_("without modifying any partition")
]
},
Expand All @@ -114,8 +108,8 @@ const SPACE_POLICIES = [
description: N_("Select what to do with each partition."),
summaryLabels: [
// TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
// would read as "Find space performing a custom set of actions".
N_("performing a custom set of actions")
// would read as "Find space with custom actions". Keep it short.
N_("with custom actions")
]
}
];
Expand Down