Skip to content
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
78 changes: 8 additions & 70 deletions webpack/ForemanTasks/Components/TaskDetails/Components/Task.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,13 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import React from 'react';
import { Stack, StackItem } from '@patternfly/react-core';
import TaskInfo from './TaskInfo';
import {
ForceUnlockConfirmationModal,
UnlockConfirmationModal,
} from '../../common/ClickConfirmation';
import { TaskButtons } from './TaskButtons';

const Task = props => {
const {
taskReload,
id,
forceCancelTaskRequest,
unlockTaskRequest,
action,
taskReloadStart,
} = props;
const forceUnlock = () => {
if (!taskReload) {
taskReloadStart(id);
}
forceCancelTaskRequest(id, action);
};
const unlock = () => {
if (!taskReload) {
taskReloadStart(id);
}
unlockTaskRequest(id, action);
};
const [unlockModalOpen, setUnlockModalOpen] = useState(false);
const [forceUnlockModalOpen, setForceUnlockModalOpen] = useState(false);

return (
<React.Fragment>
<UnlockConfirmationModal
onClick={unlock}
isOpen={unlockModalOpen}
setModalClosed={() => setUnlockModalOpen(false)}
/>
<ForceUnlockConfirmationModal
onClick={forceUnlock}
isOpen={forceUnlockModalOpen}
setModalClosed={() => setForceUnlockModalOpen(false)}
/>
<TaskButtons
taskReloadStart={taskReloadStart}
setUnlockModalOpen={setUnlockModalOpen}
setForceUnlockModalOpen={setForceUnlockModalOpen}
{...props}
/>
const Task = props => (
<Stack hasGutter>
<StackItem>
<TaskInfo {...props} />
</React.Fragment>
);
};

Task.propTypes = {
taskReload: PropTypes.bool,
id: PropTypes.string,
forceCancelTaskRequest: PropTypes.func,
unlockTaskRequest: PropTypes.func,
action: PropTypes.string,
taskReloadStart: PropTypes.func,
};

Task.defaultProps = {
taskReload: false,
id: '',
forceCancelTaskRequest: () => null,
unlockTaskRequest: () => null,
action: '',
taskReloadStart: () => null,
};
</StackItem>
</Stack>
);

export default Task;
219 changes: 115 additions & 104 deletions webpack/ForemanTasks/Components/TaskDetails/Components/TaskButtons.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from '@patternfly/react-core';
import { SyncAltIcon } from '@patternfly/react-icons';
import { Button, Flex, FlexItem, Icon } from '@patternfly/react-core';
import { SimpleDropdown } from '@patternfly/react-templates';
import { EllipsisVIcon, SyncAltIcon } from '@patternfly/react-icons';
import { translate as __ } from 'foremanReact/common/I18n';

import './TaskButtons.scss';

export const TaskButtons = ({
canEdit,
dynflowEnableConsole,
Expand All @@ -30,120 +33,128 @@ export const TaskButtons = ({
? undefined
: `dynflow_enable_console ${__('Setting is off')}`;

const overflowItems = [
{
value: 'reload',
ouiaId: 'task-buttons-reload-button',
content: (
<>
<Icon>
<SyncAltIcon className={taskReload ? 'spin' : ''} />
</Icon>
&nbsp;
{taskReload ? __('Stop auto-reloading') : __('Start auto-reloading')}
</>
),
onClick: taskProgressToggle,
},
{
value: 'resume',
ouiaId: 'task-buttons-resume-button',
content: __('Resume'),
onClick: () => {
if (!taskReload) {
taskReloadStart(id);
}

resumeTaskRequest(id, action);
},
Comment thread
andreilakatos marked this conversation as resolved.
isDisabled: !canEdit || !resumable,
tooltip: editActionsTitle,
},
...(parentTask
? [
{
value: 'parent',
ouiaId: 'task-buttons-parent-button',
content: __('Parent task'),
to: `/foreman_tasks/tasks/${parentTask}`,
},
]
: []),
...(hasSubTasks
? [
{
value: 'subtasks',
ouiaId: 'task-buttons-subtask-button',
content: __('Sub tasks'),
to: `/foreman_tasks/tasks/${id}/sub_tasks`,
},
]
: []),
{
value: 'unlock',
ouiaId: 'task-buttons-unlock-button',
content: __('Unlock'),
onClick: () => setUnlockModalOpen(true),
isDisabled: !canEdit || state !== 'paused',
tooltip: editActionsTitle,
},
{
value: 'force-unlock',
ouiaId: 'task-buttons-force-unlock-button',
content: __('Force Unlock'),
onClick: () => setForceUnlockModalOpen(true),
isDisabled: !canEdit || state === 'stopped',
tooltip: editActionsTitle,
},
];

return (
<>
<Button
variant="secondary"
ouiaId="task-buttons-reload-button"
className="reload-button"
size="sm"
onClick={taskProgressToggle}
>
<Icon className={taskReload ? 'spin' : ''}>
<SyncAltIcon />
</Icon>
{taskReload ? __('Stop auto-reloading') : __('Start auto-reloading')}
</Button>
<Button
variant="secondary"
ouiaId="task-buttons-dynflow-button"
className="dynflow-button"
size="sm"
component="a"
href={`/foreman_tasks/dynflow/${externalId}`}
isDisabled={!dynflowEnableConsole}
target="_blank"
rel="noopener noreferrer"
>
<span title={dynflowTitle} data-original-title={dynflowTitle}>
{__('Dynflow console')}
</span>
</Button>
<Button
variant="secondary"
ouiaId="task-buttons-resume-button"
className="resume-button"
size="sm"
title={editActionsTitle}
data-original-title={editActionsTitle}
isDisabled={!canEdit || !resumable}
onClick={() => {
if (!taskReload) {
taskReloadStart(id);
}
resumeTaskRequest(id, action);
}}
>
{__('Resume')}
</Button>
<Button
variant="secondary"
ouiaId="task-buttons-cancel-button"
className="cancel-button"
size="sm"
title={editActionsTitle}
data-original-title={editActionsTitle}
isDisabled={!canEdit || !cancellable}
onClick={() => {
if (!taskReload) {
taskReloadStart(id);
}
cancelTaskRequest(id, action);
}}
>
{__('Cancel')}
</Button>
{parentTask && (
<Flex
className="task-buttons"
display={{ default: 'inlineFlex' }}
alignItems={{ default: 'alignItemsCenter' }}
spaceItems={{ default: 'spaceItemsSm' }}
>
<FlexItem>
<Button
variant="secondary"
ouiaId="task-buttons-parent-button"
className="parent-button"
ouiaId="task-buttons-cancel-button"
className="cancel-button"
size="sm"
href={`/foreman_tasks/tasks/${parentTask}`}
component="a"
title={editActionsTitle}
data-original-title={editActionsTitle}
isDisabled={!canEdit || !cancellable}
onClick={() => {
if (!taskReload) {
taskReloadStart(id);
}

cancelTaskRequest(id, action);
}}
>
{__('Parent task')}
{__('Cancel')}
</Button>
)}
{hasSubTasks && (
</FlexItem>
<FlexItem>
<Button
variant="secondary"
ouiaId="task-buttons-subtask-button"
className="subtask-button"
ouiaId="task-buttons-dynflow-button"
className="dynflow-button"
size="sm"
href={`/foreman_tasks/tasks/${id}/sub_tasks`}
component="a"
href={`/foreman_tasks/dynflow/${externalId}`}
isDisabled={!dynflowEnableConsole}
target="_blank"
rel="noopener noreferrer"
>
{__('Sub tasks')}
<span title={dynflowTitle} data-original-title={dynflowTitle}>
{__('Dynflow console')}
</span>
</Button>
)}
<Button
variant="secondary"
ouiaId="task-buttons-unlock-button"
className="unlock-button"
size="sm"
isDisabled={!canEdit || state !== 'paused'}
onClick={() => {
setUnlockModalOpen(true);
}}
title={editActionsTitle}
data-original-title={editActionsTitle}
>
{__('Unlock')}
</Button>
<Button
variant="secondary"
ouiaId="task-buttons-force-unlock-button"
className="force-unlock-button"
size="sm"
isDisabled={!canEdit || state === 'stopped'}
onClick={() => setForceUnlockModalOpen(true)}
title={editActionsTitle}
data-original-title={editActionsTitle}
>
{__('Force Unlock')}
</Button>
</>
</FlexItem>
<FlexItem>
<SimpleDropdown
ouiaId="task-buttons-overflow-dropdown"
toggleVariant="plain"
toggleContent={<EllipsisVIcon aria-hidden="true" />}
popperProps={{ position: 'right' }}
initialItems={overflowItems}
Comment thread
andreilakatos marked this conversation as resolved.
toggleProps={{ 'aria-label': __('Task actions') }}
/>
</FlexItem>
</Flex>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
.task-buttons {
.spin {
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%; /* IE 9 */
}

@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}

to {
-moz-transform: rotate(360deg);
}
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}

to {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.dynflow-button > span {
pointer-events: auto;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@ const TaskInfo = props => {

return (
<Grid>
<GridItem span={12} className="pf-v5-u-pb-lg" />
{details.map((items, key) => (
<React.Fragment key={key}>
<GridItem md={2} sm={6}>
Expand Down
Loading
Loading