Skip to content

Commit

Permalink
Add clean up and reset modals
Browse files Browse the repository at this point in the history
  • Loading branch information
tomasmatus committed Aug 9, 2023
1 parent 9c19099 commit 27537be
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 7 deletions.
191 changes: 191 additions & 0 deletions src/deploymentModals.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
/*
* This file is part of Cockpit.
*
* Copyright (C) 2023 Red Hat, Inc.
*
* Cockpit is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation; either version 2.1 of the License, or
* (at your option) any later version.
*
* Cockpit is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/

import React, { useState } from 'react';

import cockpit from 'cockpit';

import { Alert, AlertActionCloseButton } from "@patternfly/react-core/dist/esm/components/Alert";
import { Button } from "@patternfly/react-core/dist/esm/components/Button";
import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
import { Modal } from "@patternfly/react-core/dist/esm/components/Modal";
import { Stack } from "@patternfly/react-core/dist/esm/layouts/Stack";
import { Text } from "@patternfly/react-core/dist/esm/components/Text";

const _ = cockpit.gettext;

export const CleanUpModal = ({ closeModal }) => {
const [deleteTemporaryFiles, setDeleteTemporaryFiles] = useState(true);
const [deleteRPMmetadata, setDeleteRPMmetadata] = useState(true);
const [deletePendingDeployments, setDeletePendingDeployments] = useState(false);
const [deleteRollbackDeployments, setDeleteRollbackDeployments] = useState(false);
const [error, setError] = useState("");

const doCleanup = () => {
const cleanupFlags = [];
if (deleteTemporaryFiles) {
cleanupFlags.push("--base");
}
if (deleteRPMmetadata) {
cleanupFlags.push("--repomd");
}
if (deletePendingDeployments) {
cleanupFlags.push("--pending");
}
if (deleteRollbackDeployments) {
cleanupFlags.push("--rollback");
}

cockpit.spawn(["rpm-ostree", "cleanup", ...cleanupFlags], { superuser: "try" })
.then(closeModal)
.catch(ex => setError(ex.message));
};

const actions = [
<Button key="cleanup-accept"
variant="primary"
isDisabled={!deleteTemporaryFiles && !deleteRPMmetadata && !deletePendingDeployments && !deleteRollbackDeployments}
onClick={() => doCleanup()}>
{_("Delete temporary files")}
</Button>,
<Button key="cleanup-cancel" variant="link" onClick={closeModal}>
{_("Cancel")}
</Button>
];

return (
<Modal isOpen
id="cleanup-deployment-modal"
title={_("Clean up")}
position="top"
variant="small"
onClose={closeModal}
actions={actions}
>
{error &&
<Alert variant="danger"
isInline
title={error}
actionClose={<AlertActionCloseButton onClose={() => setError("")} />}
/>
}
<Text>{_("Remove cache and other temporary files")}</Text>
<Stack className="pf-v5-u-pt-md">
<Checkbox label={_("Temporary files")}
key="temporary-files"
id="temporary-files-checkbox"
onChange={(_, isChecked) => setDeleteTemporaryFiles(isChecked)}
isChecked={deleteTemporaryFiles}
/>
<Checkbox label={_("RPM repo metadata")}
key="rpm-repo-metadata"
id="rpm-repo-metadata-checkbox"
onChange={(_, isChecked) => setDeleteRPMmetadata(isChecked)}
isChecked={deleteRPMmetadata}
/>
<Checkbox label={_("Pending deployment")}
key="pending-deployment"
id="pending-deployment-checkbox"
onChange={(_, isChecked) => setDeletePendingDeployments(isChecked)}
isChecked={deletePendingDeployments}
/>
<Checkbox label={_("Rollback deployment")}
key="rollback-deployment"
id="rollback-deployment-checkbox"
onChange={(_, isChecked) => setDeleteRollbackDeployments(isChecked)}
isChecked={deleteRollbackDeployments}
/>
</Stack>
</Modal>
);
};

export const ResetModal = ({ closeModal }) => {
const [removeOverlays, setRemoveOverlays] = useState(false);
const [removeOverrides, setRemoveOverrides] = useState(false);
const [error, setError] = useState(false);
const [buttonLoading, setButtonLoading] = useState(false);

const doReset = () => {
setButtonLoading(true);

const resetFlags = [];
if (removeOverlays) {
resetFlags.push("--overlays");
}
if (removeOverrides) {
resetFlags.push("--overrides");
}

cockpit.spawn(["rpm-ostree", "reset", ...resetFlags], { superuser: "try" })
.then(closeModal)
.catch(ex => setError(ex.message));
};

const actions = [
<Button key="reset-accept"
variant="warning"
isLoading={buttonLoading}
isDisabled={buttonLoading}
onClick={() => doReset()}>
{_("Reset to original state")}
</Button>,
<Button key="reset-cancel" variant="link" onClick={closeModal}>
{_("Cancel")}
</Button>
];

return (
<Modal isOpen
id="reset-modal"
title={_("Reset")}
position="top"
variant="small"
onClose={closeModal}
actions={actions}
>
{error &&
<Alert variant="danger"
isInline
title={error}
actionClose={<AlertActionCloseButton onClose={() => setError("")} />}
/>
}
<Text>
{_("Remove package additions or substitutions to return the current deployment to its original state.")}
</Text>
<Stack className="pf-v5-u-pt-md">
<Checkbox label={_("Remove overlays")}
key="remove-overlays"
id="remove-overlays-checkbox"
onChange={(_, isChecked) => setRemoveOverlays(isChecked)}
isChecked={removeOverlays}
description={_("Packages which have been added to the system")}
/>
<Checkbox label={_("Remove overrides")}
key="remove-overrides"
id="remove-overrides-checkbox"
onChange={(_, isChecked) => setRemoveOverrides(isChecked)}
isChecked={removeOverrides}
description={_("Substitutions of packages normally included in an OS build")}
/>
</Stack>
</Modal>
);
};
16 changes: 12 additions & 4 deletions src/ostree.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import * as remotes from './remotes';
import { AddRepositoryModal, EditRepositoryModal, RebaseRepositoryModal, RemoveRepositoryModal } from './repositoryModals.jsx';

import './ostree.scss';
import { CleanUpModal, ResetModal } from './deploymentModals';

const _ = cockpit.gettext;

Expand Down Expand Up @@ -460,13 +461,13 @@ const OStreeStatus = ({ ostreeState, versions }) => {
const [errorName, errorDetail] = ostreeState.branchLoadError.replace("error: ", "").split(';');
statusItems.push({
key: "status-error",
icon: <ExclamationTriangleIcon className="icon-color-warning" />,
icon: <ExclamationTriangleIcon className="warning-color" />,
message: (
<>
<Text>
{errorName}
</Text>
<Text component="small" className="ct-grey-text">
<Text component="small" className="grey-color">
{errorDetail}
</Text>
</>
Expand Down Expand Up @@ -773,13 +774,14 @@ class Application extends React.Component {
</DropdownItem>,
<DropdownSeparator key="deployment-separator-1" />,
<DropdownItem key="reset"
className="danger-color"
onClick={() => this.setState({ isResetModalOpen: true })}>
{_("Reset")}
</DropdownItem>,
];

const cardActions = (
<>
<Flex>
<Button variant="secondary"
id="check-for-updates-btn"
isLoading={!!client.local_running || !!this.state.progressMsg}
Expand All @@ -794,7 +796,7 @@ class Application extends React.Component {
id="deployment-actions"
dropdownItems={kebabActions}
/>
</>
</Flex>
);

return (
Expand All @@ -816,6 +818,12 @@ class Application extends React.Component {
</CardBody>
</Card>
</PageSection>
{this.state.isCleanupModalOpen &&
<CleanUpModal closeModal={() => this.setState({ isCleanupModalOpen: false })} />
}
{this.state.isResetModalOpen &&
<ResetModal closeModal={() => this.setState({ isResetModalOpen: false })} />
}
</Page>
);
}
Expand Down
9 changes: 7 additions & 2 deletions src/ostree.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
@import "patternfly/patternfly-5-overrides.scss";
@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@import "@patternfly/patternfly/utilities/Spacing/spacing.css";

#deployments {
@extend .ct-card;
Expand Down Expand Up @@ -80,11 +81,15 @@
padding-top: var(--pf-v5-c-button--PaddingTop);
}

.ct-grey-text {
.grey-color {
color: var(--pf-v5-global--Color--200);
}

.icon-color-warning {
.danger-color {
color: var(--pf-v5-global--danger-color--200);
}

.warning-color {
color: var(--pf-v5-global--warning-color--100);
}

Expand Down
2 changes: 1 addition & 1 deletion test/check-ostree
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,7 @@ class OstreeCase(testlib.MachineCase):
b.login_and_go("/updates")
b.enter_page("/updates")

b.wait_not_present('#ostree-status .icon-color-warning')
b.wait_not_present('#ostree-status .warning-color')
open_ostree_source_modal(b, "Rebase")
b.wait_in_text(".pf-v5-c-modal-box h1", "Rebase repository and branch")
b.wait_in_text("#change-repository .pf-v5-c-select__toggle-text", "local")
Expand Down

0 comments on commit 27537be

Please sign in to comment.