foreman-tasks 12.0.0 → 12.1.0

data/webpack/ForemanTasks/Components/TasksTable/TasksBulkActions.js

@@ -17,9 +17,7 @@ import {
   TASKS_FORCE_CANCEL_SUCCESS,
   TASKS_FORCE_CANCEL_FAILURE,
 } from '../TaskActions/TaskActionsConstants';
-import { reloadPage } from './TasksTableActions';
 import {
-  convertDashboardQuery,
   resumeToastInfo,
   cancelToastInfo,
   toastDispatch,
@@ -41,11 +39,11 @@ export const bulkByIdRequest = (resumeTasks, path) => {
 export const bulkBySearchRequest = ({ query, parentTaskID, path }) => {
   const url = `/foreman_tasks/api/tasks/${path}`;
   if (parentTaskID) {
-    query.search = query.search
-      ? ` ${query.search} and parent_task_id=${parentTaskID}`
+    query = query
+      ? ` ${query} and parent_task_id=${parentTaskID}`
       : `parent_task_id=${parentTaskID}`;
   }
-  const searchParam = { search: convertDashboardQuery(query) };
+  const searchParam = { search: query };
   return API.post(url, searchParam);
 };
 
@@ -58,12 +56,11 @@ const handleErrorResume = (error, dispatch) => {
   );
 };
 
-export const bulkResumeById = ({
-  selected,
-  url,
-  parentTaskID,
-}) => async dispatch => {
-  const resumeTasks = selected.filter(task => task.isResumable && task.canEdit);
+export const bulkResumeById = ({ selected, reloadPage }) => async dispatch => {
+  const resumeTasks = selected.filter(
+    // eslint-disable-next-line camelcase
+    task => task?.available_actions?.resumable && task.can_edit
+  );
   if (resumeTasks.length < selected.length)
     dispatch(
       addToast(
@@ -87,7 +84,7 @@ export const bulkResumeById = ({
           });
       });
       if (data.resumed) {
-        reloadPage(url, parentTaskID)(dispatch);
+        reloadPage();
       }
     } catch (error) {
       handleErrorResume(error, dispatch);
@@ -130,13 +127,10 @@ export const bulkCancelBySearch = ({
   await bulkBySearchRequest({ query, path: BULK_CANCEL_PATH, parentTaskID });
 };
 
-export const bulkCancelById = ({
-  selected,
-  url,
-  parentTaskID,
-}) => async dispatch => {
+export const bulkCancelById = ({ selected, reloadPage }) => async dispatch => {
   const cancelTasks = selected.filter(
-    task => task.isCancellable && task.canEdit
+    // eslint-disable-next-line camelcase
+    task => task?.available_actions?.cancellable && task.can_edit
   );
   if (cancelTasks.length < selected.length)
     dispatch(
@@ -162,7 +156,7 @@ export const bulkCancelById = ({
           });
       });
       if (data.cancelled) {
-        reloadPage(url, parentTaskID)(dispatch);
+        reloadPage();
       }
     } catch (error) {
       handleErrorCancel(error, dispatch);
@@ -183,11 +177,10 @@ const handleErrorForceCancel = (error, dispatch) => {
 
 export const bulkForceCancelById = ({
   selected,
-  url,
-  parentTaskID,
+  reloadPage,
 }) => async dispatch => {
   const stopTasks = selected.filter(task => task.state !== 'stopped');
-  const authorisedTasks = stopTasks.filter(task => task.canEdit);
+  const authorisedTasks = stopTasks.filter(task => task.can_edit);
   if (authorisedTasks.length < stopTasks.length)
     dispatch(
       addToast(
@@ -236,7 +229,7 @@ export const bulkForceCancelById = ({
           )
         );
       if (data.stopped_length > 0) {
-        reloadPage(url, parentTaskID)(dispatch);
+        reloadPage();
       }
     } catch (error) {
       handleErrorForceCancel(error, dispatch);

data/webpack/ForemanTasks/Components/TasksTable/TasksColumns.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { getDuration } from './TasksTableHelpers';
+import { CellActionButton } from './Components/CellActionButton';
+
+export const columns = (setClickedTask, openModal, canEdit) => ({
+  select: {},
+  action: {
+    title: __('Action'),
+    wrapper: ({ id, action }) => (
+      <a href={`/foreman_tasks/tasks/${id}`}>{action}</a>
+    ),
+  },
+  state: {
+    title: __('State'),
+  },
+  result: {
+    title: __('Result'),
+  },
+  started_at: {
+    title: __('Started at'),
+    isSorted: true,
+    wrapper: ({ started_at: startedAt }) => (
+      <LongDateTime seconds date={startedAt} defaultValue={__('N/A')} />
+    ),
+  },
+  duration: {
+    title: __('Duration'),
+    isSorted: true,
+    wrapper: ({ started_at: startedAt, ended_at: endedAt }) => {
+      const duration = getDuration(startedAt, endedAt);
+      return (
+        <span className="param-value" title={duration.tooltip}>
+          {duration.text}
+        </span>
+      );
+    },
+  },
+  action_button: {
+    title: __('Action'),
+    wrapper: ({ id, action, available_actions: availableActions, state }) => (
+      <CellActionButton
+        id={id}
+        action={action}
+        canEdit={canEdit}
+        availableActions={availableActions}
+        cancellable={availableActions.cancellable}
+        resumable={availableActions.resumable}
+        stoppable={state !== 'stopped'}
+        setClickedTask={setClickedTask}
+        openModal={openModal}
+      />
+    ),
+  },
+});

data/webpack/ForemanTasks/Components/TasksTable/TasksIndexPage.js

@@ -1,4 +1,278 @@
-import React from 'react';
-import TasksTablePage from './';
+import React, { useState, useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import URI from 'urijs';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Button,
+  Spinner,
+  PageSection,
+} from '@patternfly/react-core';
+import { RedoIcon } from '@patternfly/react-icons';
 
-export const TasksIndexPage = props => <TasksTablePage {...props} />;
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import { STATUS } from 'foremanReact/constants';
+import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { getPageStats } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanPermissions } from 'foremanReact/Root/Context/ForemanContext';
+import { getURIQuery } from 'foremanReact/common/helpers';
+
+import { getCSVurl, getApiPathname } from './TasksTableHelpers';
+import { convertDashboardQuery } from '../TaskActions/TaskActionHelpers';
+import {
+  TASKS_API_KEY,
+  CANCEL_MODAL,
+  RESUME_MODAL,
+  FORCE_UNLOCK_MODAL,
+  CANCEL_SELECTED_MODAL,
+  RESUME_SELECTED_MODAL,
+  FORCE_UNLOCK_SELECTED_MODAL,
+  TASKS_SEARCH_PROPS,
+} from './TasksTableConstants';
+import { columns } from './TasksColumns';
+import TasksModals from './TasksModals';
+import { ActionSelectButton } from './Components/ActionSelectButton';
+import { fetchTasksSummary } from '../TasksDashboard/TasksDashboardActions';
+import TasksDashboard from '../TasksDashboard';
+
+const TasksTableIndexPage = ({ match, history }) => {
+  const parentTaskID = match.params.id;
+  const dispatch = useDispatch();
+  const url = window.location.pathname + window.location.search;
+  const uriQueryObject = getURIQuery(url);
+  const apiUrl = useMemo(() => {
+    const urlWithSearch = new URI(getApiPathname(url));
+    urlWithSearch.addSearch({
+      ...convertDashboardQuery(),
+      include_permissions: true,
+    });
+    return urlWithSearch.toString();
+    // convertDashboardQuery uses the url to get the query parameters, so we need to recompute it when the url changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+  const apiResponse = useAPI('get', apiUrl, {
+    key: TASKS_API_KEY,
+  });
+
+  const { status, setAPIOptions } = apiResponse;
+  const overrideSetAPIOptions = useCallback(
+    newParams => {
+      const { search, ...rest } = newParams;
+      const newUrl = new URI(url);
+      newUrl.addSearch({ search });
+      setAPIOptions({
+        params: {
+          url: newUrl.toString(),
+          ...rest,
+        },
+      });
+    },
+    [setAPIOptions, url]
+  );
+
+  const userPermissions = useForemanPermissions();
+  const canEdit = userPermissions.has('edit_foreman_tasks');
+  const [modalStates, setModalStates] = useState({
+    [CANCEL_MODAL]: false,
+    [RESUME_MODAL]: false,
+    [FORCE_UNLOCK_MODAL]: false,
+    [CANCEL_SELECTED_MODAL]: false,
+    [RESUME_SELECTED_MODAL]: false,
+    [FORCE_UNLOCK_SELECTED_MODAL]: false,
+  });
+  const openModal = id => {
+    setModalStates(prev => ({
+      ...prev,
+      [id]: true,
+    }));
+  };
+  const closeModal = id => {
+    setModalStates(prev => ({
+      ...prev,
+      [id]: false,
+    }));
+  };
+  const [clickedTask, setClickedTask] = useState(null);
+  const {
+    search: apiSearchQuery,
+    results,
+    total,
+    per_page: perPage,
+    page,
+    subtotal,
+  } = apiResponse.response;
+
+  const reloadPage = useCallback(() => {
+    setAPIOptions({
+      params: {
+        page,
+        per_page: perPage,
+        search: convertDashboardQuery().search,
+      },
+    });
+
+    dispatch(fetchTasksSummary(uriQueryObject.time, parentTaskID));
+  }, [
+    setAPIOptions,
+    page,
+    perPage,
+    uriQueryObject.time,
+    dispatch,
+    parentTaskID,
+  ]);
+  const { pageRowCount } = getPageStats({ total, page, perPage });
+
+  const {
+    fetchBulkParams,
+    searchQuery,
+    updateSearchQuery,
+    ...selectAllOptions
+  } = useBulkSelect({
+    results,
+    metadata: { total, page, selectable: subtotal },
+    initialSearchQuery: apiSearchQuery,
+  });
+
+  const {
+    selectAll,
+    selectPage,
+    selectNone,
+    selectedCount,
+    selectOne,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+    isSelected,
+  } = selectAllOptions;
+
+  const customToolbarItems = (
+    <Toolbar ouiaId="tasks-table-toolbar">
+      <ToolbarContent>
+        <ToolbarGroup align={{ default: 'alignRight' }}>
+          <ToolbarItem>
+            <Button
+              ouiaId="tasks-table-refresh-data"
+              variant="primary"
+              onClick={reloadPage}
+              icon={<RedoIcon />}
+            >
+              {__('Refresh Data')}
+            </Button>
+          </ToolbarItem>
+          {status === STATUS.PENDING && <Spinner size="lg" />}
+          <ToolbarItem>
+            <Button
+              ouiaId="tasks-table-export-all"
+              variant="secondary"
+              component="a"
+              href={getCSVurl()}
+            >
+              {__('Export All')}
+            </Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectAll,
+          selectPage,
+          selectNone,
+          selectedCount,
+          pageRowCount,
+        }}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+  return (
+    <>
+      <TasksModals
+        taskId={clickedTask?.id}
+        taskName={clickedTask?.action}
+        modalStates={modalStates}
+        closeModal={closeModal}
+        parentTaskID={parentTaskID}
+        uriQuery={apiSearchQuery}
+        selectAllOptions={selectAllOptions}
+        reloadPage={reloadPage}
+      />
+      <TableIndexPage
+        breadcrumbOptions={
+          parentTaskID
+            ? {
+                breadcrumbItems: [
+                  { caption: __('Tasks'), url: `/foreman_tasks/tasks` },
+                  { caption: __('Sub tasks') },
+                ],
+              }
+            : null
+        }
+        header={parentTaskID ? __('Sub tasks') : __('Tasks')}
+        beforeToolbarComponent={
+          <>
+            <PageSection className="tasks-dashboard-section">
+              <TasksDashboard history={history} parentTaskID={parentTaskID} />
+            </PageSection>
+            {customToolbarItems}
+          </>
+        }
+        apiUrl=""
+        apiOptions={{ key: TASKS_API_KEY }}
+        controller="foreman_tasks/tasks"
+        customSearchProps={TASKS_SEARCH_PROPS}
+        columns={columns(setClickedTask, openModal, canEdit)}
+        creatable={false}
+        showCheckboxes
+        selectOne={selectOne}
+        selectPage={selectPage}
+        selectNone={selectNone}
+        selectedCount={selectedCount}
+        areAllRowsSelected={areAllRowsSelected}
+        isSelected={isSelected}
+        selectionToolbar={selectionToolbar}
+        customToolbarItems={
+          <ToolbarItem>
+            <ActionSelectButton
+              disabled={!canEdit || !(selectedCount || areAllRowsSelected())}
+              onCancel={() => openModal(CANCEL_SELECTED_MODAL)}
+              onResume={() => openModal(RESUME_SELECTED_MODAL)}
+              onForceCancel={() => openModal(FORCE_UNLOCK_SELECTED_MODAL)}
+            />
+          </ToolbarItem>
+        }
+        replacementResponse={{
+          ...apiResponse,
+          setAPIOptions: overrideSetAPIOptions,
+        }}
+      />
+    </>
+  );
+};
+
+TasksTableIndexPage.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string,
+    }),
+  }),
+  history: PropTypes.object.isRequired,
+};
+
+TasksTableIndexPage.defaultProps = {
+  match: {
+    params: { id: null },
+  },
+};
+
+export default TasksTableIndexPage;

data/webpack/ForemanTasks/Components/TasksTable/TasksModals.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  CANCEL_MODAL,
+  RESUME_MODAL,
+  FORCE_UNLOCK_MODAL,
+  CANCEL_SELECTED_MODAL,
+  RESUME_SELECTED_MODAL,
+  FORCE_UNLOCK_SELECTED_MODAL,
+} from './TasksTableConstants';
+import {
+  CancelModal,
+  ResumeModal,
+  ForceUnlockModal,
+  CancelSelectedModal,
+  ResumeSelectedModal,
+  ForceUnlockSelectedModal,
+} from './Components/ConfirmModal';
+
+const TasksModals = ({
+  taskId,
+  taskName,
+  modalStates,
+  closeModal,
+  parentTaskID,
+  selectAllOptions,
+  uriQuery,
+  reloadPage,
+}) => (
+  <>
+    <CancelModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[CANCEL_MODAL]}
+      setIsModalOpen={() => closeModal(CANCEL_MODAL)}
+      taskId={taskId}
+      taskName={taskName}
+    />
+    <ResumeModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[RESUME_MODAL]}
+      setIsModalOpen={() => closeModal(RESUME_MODAL)}
+      taskId={taskId}
+      taskName={taskName}
+    />
+    <ForceUnlockModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[FORCE_UNLOCK_MODAL]}
+      setIsModalOpen={() => closeModal(FORCE_UNLOCK_MODAL)}
+      taskId={taskId}
+      taskName={taskName}
+    />
+    <CancelSelectedModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[CANCEL_SELECTED_MODAL]}
+      setIsModalOpen={() => closeModal(CANCEL_SELECTED_MODAL)}
+      uriQuery={uriQuery}
+      selectAllOptions={selectAllOptions}
+    />
+    <ResumeSelectedModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[RESUME_SELECTED_MODAL]}
+      setIsModalOpen={() => closeModal(RESUME_SELECTED_MODAL)}
+      uriQuery={uriQuery}
+      parentTaskID={parentTaskID}
+      selectAllOptions={selectAllOptions}
+    />
+    <ForceUnlockSelectedModal
+      reloadPage={reloadPage}
+      isModalOpen={modalStates[FORCE_UNLOCK_SELECTED_MODAL]}
+      setIsModalOpen={() => closeModal(FORCE_UNLOCK_SELECTED_MODAL)}
+      uriQuery={uriQuery}
+      parentTaskID={parentTaskID}
+      selectAllOptions={selectAllOptions}
+    />
+  </>
+);
+
+TasksModals.propTypes = {
+  taskId: PropTypes.string,
+  taskName: PropTypes.string,
+  modalStates: PropTypes.object.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  parentTaskID: PropTypes.string,
+  selectAllOptions: PropTypes.object.isRequired,
+  uriQuery: PropTypes.string,
+  reloadPage: PropTypes.func.isRequired,
+};
+
+TasksModals.defaultProps = {
+  taskId: null,
+  taskName: null,
+  parentTaskID: null,
+  uriQuery: null,
+};
+
+export default TasksModals;

data/webpack/ForemanTasks/Components/TasksTable/TasksTableConstants.js

@@ -1,28 +1,20 @@
 import { getControllerSearchProps } from 'foremanReact/constants';
 
-export const TASKS_TABLE_ID = 'TASKS_TABLE';
-
-export const SELECT_ROWS = 'SELECT_ROWS';
-export const UNSELECT_ROWS = 'UNSELECT_ROWS';
-export const UNSELECT_ALL_ROWS = 'UNSELECT_ALL_ROWS';
-export const SELECT_ALL_ROWS = 'SELECT_ALL_ROWS';
-export const OPEN_SELECT_ALL = 'OPEN_SELECT_ALL';
-
 export const BULK_CANCEL_PATH = 'bulk_cancel';
 export const BULK_RESUME_PATH = 'bulk_resume';
 export const BULK_FORCE_CANCEL_PATH = 'bulk_stop';
 
-export const CANCEL_MODAL = 'cancelConfirmModal';
-export const RESUME_MODAL = 'resumeConfirmModal';
-export const CANCEL_SELECTED_MODAL = 'cancelSelectedConfirmModal';
-export const RESUME_SELECTED_MODAL = 'resumeSelectedConfirmModal';
-export const FORCE_UNLOCK_MODAL = 'forceUnlockConfirmModal';
-export const FORCE_UNLOCK_SELECTED_MODAL = 'forceUnlockSelectedConfirmModal';
-
-export const UPDATE_CLICKED = 'UPDATE_CLICKED';
-export const UPDATE_MODAL = 'UPDATE_MODAL';
-
 export const TASKS_SEARCH_PROPS = {
   ...getControllerSearchProps('tasks'),
   controller: 'foreman_tasks_tasks',
 };
+
+export const TASKS_API_KEY = 'tasks_table';
+
+export const CANCEL_MODAL = 'cancel';
+export const RESUME_MODAL = 'resume';
+export const FORCE_UNLOCK_MODAL = 'force_unlock';
+
+export const CANCEL_SELECTED_MODAL = 'cancelSelectedConfirmModal';
+export const RESUME_SELECTED_MODAL = 'resumeSelectedConfirmModal';
+export const FORCE_UNLOCK_SELECTED_MODAL = 'forceUnlockSelectedConfirmModal';

data/webpack/ForemanTasks/Components/TasksTable/TasksTableHelpers.js

@@ -15,10 +15,10 @@ export const getApiPathname = url => {
   return uri.pathname().replace('foreman_tasks/', 'foreman_tasks/api/');
 };
 
-export const getCSVurl = (path, query) => {
-  let url = new URI(path);
+export const getCSVurl = () => {
+  let url = new URI(window.location.pathname);
   url = url.pathname(`${url.pathname()}.csv`);
-  url.addSearch(convertDashboardQuery(query));
+  url.addSearch(convertDashboardQuery());
   return url.toString();
 };