pulled everything related to job section into it's own component

src/components/IOC/IOCManage/IOCManage.jsx

-import { Button, Stack, Tooltip, Typography } from "@mui/material";
+import { Button, Stack, Tooltip } from "@mui/material";
 import { useState, useEffect, useContext, useCallback, useMemo } from "react";
 import {
   userContext,
@@ -6,13 +6,13 @@ import {
   ExternalLink,
   InternalLink
 } from "@ess-ics/ce-ui-common";
+import { JobSection } from "./JobSection";
 import { IOCDetails } from "../IOCDetails";
 import { DeployIOC } from "../DeployIOC";
 import { UndeployIOC } from "../UndeployIOC";
 import { AccessControl } from "../../auth/AccessControl";
 import { DeploymentStatus } from "../../../api/DataTypes";
 import { IOCService } from "../IOCService";
-import { JobTable } from "../../Job";
 import { apiContext } from "../../../api/DeployApi";
 import env from "../../../config/env";
 
@@ -21,12 +21,9 @@ export function IOCManage({
   getIOC,
   buttonDisabled,
   currentCommand,
-  jobs,
-  jobsLoading,
   getJobs,
   setButtonDisabled,
-  pagination,
-  onPage
+  pagination
 }) {
   const { user } = useContext(userContext);
   const client = useContext(apiContext);
@@ -176,7 +173,7 @@ export function IOCManage({
                     onClick={() => {
                       setDeployDialogOpen(true);
                     }}
-                    disabled={buttonDisabled || ioc.operationInProgress}
+                    disabled={ioc.operationInProgress}
                   >
                     {ioc.activeDeployment ? "Deploy revision" : "Deploy"}
                   </Button>
@@ -192,7 +189,7 @@ export function IOCManage({
                       onClick={() => {
                         setUndeployDialogOpen(true);
                       }}
-                      disabled={buttonDisabled || ioc.operationInProgress}
+                      disabled={ioc.operationInProgress}
                     >
                       Undeploy
                     </Button>
@@ -208,20 +205,7 @@ export function IOCManage({
           allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
           renderNoAccess={() => <></>}
         >
-          <Stack gap={2}>
-            <Typography
-              component="h2"
-              variant="h3"
-            >
-              Operations
-            </Typography>
-            <JobTable
-              jobs={jobs}
-              pagination={pagination}
-              onPage={onPage}
-              loading={jobsLoading}
-            />
-          </Stack>
+          <JobSection />
           <DeployIOC
             open={deployDialogOpen}
             setOpen={setDeployDialogOpen}

src/components/IOC/IOCManage/JobSection.tsx

+import { useEffect } from "react";
+import { Stack, Typography } from "@mui/material";
+import { usePagination } from "@ess-ics/ce-ui-common";
+import { useListJobsQuery } from "../../../store/deployApi";
+import { initRequestParams } from "../../common/Helper";
+import { ROWS_PER_PAGE } from "../../../constants";
+import { JobTable } from "../../Job";
+
+export const JobSection = () => {
+  const { pagination, setPagination } = usePagination({
+    rowsPerPageOptions: ROWS_PER_PAGE,
+    initLimit: ROWS_PER_PAGE[0],
+    initPage: 0
+  });
+
+  const { data: jobs, isLoading } = useListJobsQuery(
+    initRequestParams(pagination),
+    { pollingInterval: 30000 }
+  );
+
+  console.log(jobs); //eslint-disable-line
+
+  useEffect(() => {
+    setPagination({ totalCount: jobs?.totalCount ?? 0 });
+  }, [setPagination, jobs?.totalCount]);
+
+  return (
+    <Stack gap={2}>
+      <Typography
+        component="h2"
+        variant="h3"
+      >
+        Operations
+      </Typography>
+      <JobTable
+        jobs={jobs?.jobs}
+        pagination={pagination}
+        onPage={setPagination}
+        loading={isLoading}
+      />
+    </Stack>
+  );
+};

src/components/Job/JobTable/JobTable.jsx

@@ -53,7 +53,7 @@ const createTableRow = (job) => ({
 
 export const JobTable = ({
   jobs,
-  customColumns,
+  customColumns = null,
   pagination,
   onPage,
   loading

src/views/IOC/IOCDetailsView.jsx

@@ -13,10 +13,7 @@ import {
 import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
 import { IOCManage } from "../../components/IOC/IOCManage";
 import { IOCAdmin } from "../../components/IOC/IOCAdmin";
-import {
-  applicationTitle,
-  initRequestParams
-} from "../../components/common/Helper";
+import { applicationTitle } from "../../components/common/Helper";
 import { apiContext } from "../../api/DeployApi";
 import { ROWS_PER_PAGE } from "../../constants";
 
@@ -33,16 +30,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
   const navigate = useNavigate();
 
   const client = useContext(apiContext);
-  const {
-    value: jobs,
-    wrapper: getJobs,
-    loading: jobsLoading,
-    dataReady: jobsDataReady,
-    abort: abortGetJobs
-  } = useAPIMethod({
-    fcn: client.apis.Jobs.listJobs,
-    call: false
-  });
 
   const ongoingCommandParams = useMemo(
     () => ({
@@ -73,18 +60,12 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
     });
   const [tabIndex, setTabIndex] = useState(0);
 
-  // update pagination whenever search result total pages change
-  useEffect(() => {
-    setJobPagination({ totalCount: jobs?.totalCount ?? 0 });
-  }, [setJobPagination, jobs?.totalCount]);
-
   // Invoked by Table on change to pagination
   const onPage = useCallback(
     (params) => {
       setJobPagination(params);
-      abortGetJobs();
     },
-    [abortGetJobs, setJobPagination]
+    [setJobPagination]
   );
 
   usePolling(getIOC, loading, IOC_POLL_INTERVAL, abortGetIOC);
@@ -99,23 +80,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
     setButtonDisabled(Boolean(ioc?.operationInProgress));
   }, [ioc?.operationInProgress]);
 
-  const callGetJobs = useCallback(() => {
-    let requestParams = initRequestParams(jobPagination);
-    requestParams.ioc_id = ioc.id;
-    getJobs(requestParams);
-  }, [getJobs, ioc.id, jobPagination]);
-
-  // Submit new search whenever pagination or ioc changes
-  useEffect(() => {
-    callGetJobs();
-
-    return () => {
-      abortGetJobs();
-    };
-  }, [callGetJobs, abortGetJobs]);
-
-  usePolling(callGetJobs, jobsLoading, 30000, abortGetJobs);
-
   const handleClick = () => {
     navigate(-1);
   };
@@ -154,9 +118,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
           currentCommand={
             ongoingCommand?.jobs?.length > 0 ? ongoingCommand.jobs[0] : null
           }
-          jobs={jobs?.jobs}
-          jobsLoading={jobsLoading || !jobsDataReady}
-          getJobs={getJobs}
           setButtonDisabled={setButtonDisabledAndUpdate}
           pagination={jobPagination}
           onPage={onPage}