webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js in foreman_ansible-7.0.4 vs webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js in foreman_ansible-7.1.0

@@ -1,98 +1,84 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
-
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
 import {
   TableComposable,
   Thead,
   Tbody,
   Tr,
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import Pagination from 'foremanReact/components/Pagination';
 
 import { decodeId } from '../../../../globalIdHelper';
 import withLoading from '../../../withLoading';
 import { readableCron, readablePurpose } from './JobsTabHelper';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../helpers/paginationHelper';
 
 const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
   const columns = [
     __('Description'),
     __('Result'),
     __('State'),
     __('Executed at'),
     __('Schedule'),
   ];
 
-  const handlePerPageSelected = (event, perPage) => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = (event, page) => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
-
   return (
     <React.Fragment>
       <h3>{__('Previously executed jobs')}</h3>
-      <Flex className="pf-u-pt-md">
+      <Flex direction={{ default: 'column' }} className="pf-u-pt-md">
         <FlexItem align={{ default: 'alignRight' }}>
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
+        </FlexItem>
+        <FlexItem>
+          <TableComposable variant="compact">
+            <Thead>
+              <Tr>
+                {columns.map(col => (
+                  <Th key={col}>{col}</Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {jobs.map(job => (
+                <Tr key={job.id}>
+                  <Td>
+                    <a
+                      onClick={() =>
+                        window.tfm.nav.pushUrl(
+                          `/job_invocations/${decodeId(job.id)}`
+                        )
+                      }
+                    >
+                      {job.description}
+                    </a>
+                    &nbsp;
+                    {readablePurpose(job.recurringLogic.purpose)}
+                  </Td>
+                  <Td>{job.task.result}</Td>
+                  <Td>{job.task.state}</Td>
+                  <Td>
+                    <RelativeDateTime date={job.startAt} />
+                  </Td>
+                  <Td>{readableCron(job.recurringLogic.cronLine)}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        </FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
           <Pagination
+            updateParamsByUrl
             itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
+            variant="bottom"
           />
         </FlexItem>
       </Flex>
-      <TableComposable variant="compact">
-        <Thead>
-          <Tr>
-            {columns.map(col => (
-              <Th key={col}>{col}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {jobs.map(job => (
-            <Tr key={job.id}>
-              <Td>
-                <a
-                  onClick={() =>
-                    window.tfm.nav.pushUrl(
-                      `/job_invocations/${decodeId(job.id)}`
-                    )
-                  }
-                >
-                  {job.description}
-                </a>
-                &nbsp;
-                {readablePurpose(job.recurringLogic.purpose)}
-              </Td>
-              <Td>{job.task.result}</Td>
-              <Td>{job.task.state}</Td>
-              <Td>
-                <RelativeDateTime date={job.startAt} />
-              </Td>
-              <Td>{readableCron(job.recurringLogic.cronLine)}</Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </TableComposable>
     </React.Fragment>
   );
 };
 
 PreviousJobsTable.propTypes = {