From c45d43d5bc5e583d6dd2267a3c6028887130b2e9 Mon Sep 17 00:00:00 2001
From: "EREBUS_DMN\\jsz" <johanna.szepanski@softhouse.se>
Date: Tue, 3 Dec 2024 12:08:29 +0100
Subject: [PATCH] pulled everything related to job section into it's own
component
---
src/components/IOC/IOCManage/IOCManage.jsx | 28 +++-----------
src/components/IOC/IOCManage/JobSection.tsx | 43 +++++++++++++++++++++
src/components/Job/JobTable/JobTable.jsx | 2 +-
src/views/IOC/IOCDetailsView.jsx | 43 +--------------------
4 files changed, 52 insertions(+), 64 deletions(-)
create mode 100644 src/components/IOC/IOCManage/JobSection.tsx
diff --git a/src/components/IOC/IOCManage/IOCManage.jsx b/src/components/IOC/IOCManage/IOCManage.jsx
index d4e64791..446f3a04 100644
--- a/src/components/IOC/IOCManage/IOCManage.jsx
+++ b/src/components/IOC/IOCManage/IOCManage.jsx
@@ -1,4 +1,4 @@
-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}
diff --git a/src/components/IOC/IOCManage/JobSection.tsx b/src/components/IOC/IOCManage/JobSection.tsx
new file mode 100644
index 00000000..d775c302
--- /dev/null
+++ b/src/components/IOC/IOCManage/JobSection.tsx
@@ -0,0 +1,43 @@
+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>
+ );
+};
diff --git a/src/components/Job/JobTable/JobTable.jsx b/src/components/Job/JobTable/JobTable.jsx
index b26018da..e05170b4 100644
--- a/src/components/Job/JobTable/JobTable.jsx
+++ b/src/components/Job/JobTable/JobTable.jsx
@@ -53,7 +53,7 @@ const createTableRow = (job) => ({
export const JobTable = ({
jobs,
- customColumns,
+ customColumns = null,
pagination,
onPage,
loading
diff --git a/src/views/IOC/IOCDetailsView.jsx b/src/views/IOC/IOCDetailsView.jsx
index 04184d99..4ff34f23 100644
--- a/src/views/IOC/IOCDetailsView.jsx
+++ b/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}
--
GitLab