Skip to content

Commit

Permalink
Add confirmation dialog for shutdown and reboot operation
Browse files Browse the repository at this point in the history
  • Loading branch information
@skobyda
skobyda committed May 5, 2023
1 parent 490ea26 commit 44f637b
Showing 1 changed file with 139 additions and 6 deletions.
145 changes: 139 additions & 6 deletions src/components/vm/vmActions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@ import cockpit from 'cockpit';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Button } from "@patternfly/react-core/dist/esm/components/Button";
import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList";
import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from "@patternfly/react-core/dist/esm/deprecated/components/Dropdown";
import { Modal } from "@patternfly/react-core/dist/esm/components/Modal";
import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
import { PowerOffIcon, RedoIcon } from '@patternfly/react-icons';
import { useDialogs } from 'dialogs.jsx';

import { updateVm } from '../../actions/store-actions.js';
Expand Down Expand Up @@ -53,6 +56,7 @@ import {
domainStart,
} from '../../libvirtApi/domain.js';
import store from "../../store.js";
import { distanceToNow } from 'timeformat.js';

const _ = cockpit.gettext;

Expand Down Expand Up @@ -166,6 +170,45 @@ const onSendNMI = (vm) => domainSendNMI({ name: vm.name, id: vm.id, connectionNa
);
});

export const ConfirmModal = ({ idPrefix, actionsList, startTime, title, titleIcon }) => {
const Dialogs = useDialogs();

const actions = actionsList.map(action =>
<Button variant={action.variant}
key={action.id}
id={`${idPrefix}-${action.id}`}
onClick={() => {
action.handler();
Dialogs.close();
}}>
{action.name}
</Button>
);
actions.push(
<Button variant="link" key="cancel" onClick={Dialogs.close}>
{_("Cancel")}
</Button>
);

return (
<Modal id={`${idPrefix}-confirm-action-modal`}
position="top"
variant="small"
onClose={Dialogs.close}
title={title}
titleIconVariant={titleIcon}
isOpen
footer={actions}>
<DescriptionList isHorizontal>
<DescriptionListGroup id="uptim">
<DescriptionListTerm>{_("Uptime")}</DescriptionListTerm>
<DescriptionListDescription>{distanceToNow(new Date(startTime))}</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</Modal>
);
};

const VmActions = ({ vm, onAddErrorNotification, isDetailsPage }) => {
const Dialogs = useDialogs();
const [isActionOpen, setIsActionOpen] = useState(false);
Expand Down Expand Up @@ -219,29 +262,93 @@ const VmActions = ({ vm, onAddErrorNotification, isDetailsPage }) => {
variant={isDetailsPage ? 'primary' : 'secondary'}
isLoading={operationInProgress}
isDisabled={operationInProgress}
onClick={() => { setOperationInProgress(true); onShutdown(vm, setOperationInProgress) }} id={`${id}-shutdown-button`}>
id={`${id}-shutdown-button`}
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Shut down")}
titleIcon={PowerOffIcon}
startTime={vm.startTime}
actionsList={[
{
variant: "primary",
handler: () => {
setOperationInProgress(true);
onShutdown(vm, setOperationInProgress);
},
name: _("Shut down"),
id: "shutdown",
},
{
variant: "secondary",
handler: () => {
setOperationInProgress(true);
onReboot(vm);
},
name: _("Reboot"),
id: "reboot",
},
]} />
)}>
{_("Shut down")}
</Button>
);
dropdownItems.push(
<DropdownItem key={`${id}-off`}
id={`${id}-off`}
onClick={() => onShutdown(vm)}>
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Shut down")}
titleIcon={PowerOffIcon}
startTime={vm.startTime}
actionsList={[
{
variant: "primary",
handler: () => onShutdown(vm),
name: _("Shut down"),
id: "shutdown",
},
]} />
)}>
{_("Shut down")}
</DropdownItem>
);
dropdownItems.push(
<DropdownItem key={`${id}-forceOff`}
id={`${id}-forceOff`}
onClick={() => onForceoff(vm)}>
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Force shut down")}
titleIcon={PowerOffIcon}
startTime={vm.startTime}
actionsList={[
{
variant: "primary",
handler: () => onForceoff(vm),
name: _("Force shut down"),
id: "forceoff",
},
]} />
)}>
{_("Force shut down")}
</DropdownItem>
);
dropdownItems.push(<DropdownSeparator key="separator-shutdown" />);
dropdownItems.push(
<DropdownItem key={`${id}-sendNMI`}
id={`${id}-sendNMI`}
onClick={() => onSendNMI(vm)}>
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Send non-maskable interrupt")}
startTime={vm.startTime}
actionsList={[
{
variant: "primary",
handler: () => onSendNMI(vm),
name: _("Send non-maskable interrupt"),
id: "forceoff",
},
]} />
)}>
{_("Send non-maskable interrupt")}
</DropdownItem>
);
Expand All @@ -252,14 +359,40 @@ const VmActions = ({ vm, onAddErrorNotification, isDetailsPage }) => {
dropdownItems.push(
<DropdownItem key={`${id}-reboot`}
id={`${id}-reboot`}
onClick={() => onReboot(vm)}>
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Reboot")}
titleIcon={RedoIcon}
startTime={vm.startTime}
actionsList={[
{
variant: "primary",
handler: onReboot(vm),
name: _("Reboot"),
id: "reboot",
},
]} />
)}>
{_("Reboot")}
</DropdownItem>
);
dropdownItems.push(
<DropdownItem key={`${id}-forceReboot`}
id={`${id}-forceReboot`}
onClick={() => onForceReboot(vm)}>
onClick={() => Dialogs.show(
<ConfirmModal idPrefix={id}
title={_("Force reboot")}
startTime={vm.startTime}
titleIcon={RedoIcon}
actionsList={[
{
variant: "primary",
handler: onForceReboot(vm),
name: _("Force reboot"),
id: "reboot",
},
]} />
)}>
{_("Force reboot")}
</DropdownItem>
);
Expand Down

0 comments on commit 44f637b

Please sign in to comment.