Skip to content
Snippets Groups Projects
Commit fed64919 authored by Johanna Szepanski's avatar Johanna Szepanski
Browse files

removed all two way and unneccessary dependencies between details view and management view

parent 8fd59fa4
No related branches found
No related tags found
2 merge requests!612Release 5.0.0,!577CE-3395: Fix infinite loop
Hide whitespace changes
Inline Side-by-side
src/components/IOC/IOCManage/IOCManage.jsx
+ 16
− 69
View file @ fed64919
import { Button, Stack, Tooltip } from "@mui/material"; import { Button, Stack, Tooltip } from "@mui/material";
import { useState, useEffect, useContext, useCallback, useMemo } from "react"; import { useState, useEffect, useContext, useCallback } from "react";
import { import { userContext, ExternalLink, InternalLink } from "@ess-ics/ce-ui-common";
userContext,
useAPIMethod,
ExternalLink,
InternalLink
} from "@ess-ics/ce-ui-common";
import { JobSection } from "./JobSection"; import { JobSection } from "./JobSection";
import { IOCService } from "./IOCService";
import { IOCDetails } from "../IOCDetails"; import { IOCDetails } from "../IOCDetails";
import { DeployIOC } from "../DeployIOC"; import { DeployIOC } from "../DeployIOC";
import { UndeployIOC } from "../UndeployIOC"; import { UndeployIOC } from "../UndeployIOC";
import { AccessControl } from "../../auth/AccessControl"; import { AccessControl } from "../../auth/AccessControl";
import { DeploymentStatus } from "../../../api/DataTypes"; import { DeploymentStatus } from "../../../api/DataTypes";
import { IOCService } from "../IOCService"; import { useLazyFetchJobStatusQuery } from "../../../store/deployApi";
import { apiContext } from "../../../api/DeployApi";
import env from "../../../config/env"; import env from "../../../config/env";
export function IOCManage({ export const IOCManage = ({ ioc }) => {
ioc,
buttonDisabled,
currentCommand,
getJobs,
setButtonDisabled,
pagination
}) {
const { user } = useContext(userContext); const { user } = useContext(userContext);
const client = useContext(apiContext);
const [deployDialogOpen, setDeployDialogOpen] = useState(false); const [deployDialogOpen, setDeployDialogOpen] = useState(false);
const [undeployDialogOpen, setUndeployDialogOpen] = useState(false); const [undeployDialogOpen, setUndeployDialogOpen] = useState(false);
const [getjobStatus, { data: jobStatus }] = useLazyFetchJobStatusQuery();
const jobStatusParams = useMemo(
() => ({ awx_job_id: ioc.activeDeployment?.jobId }),
[ioc]
);
const { value: deploymentJob, wrapper: callGetJobDetails } = useAPIMethod({
fcn: client.apis.Jobs.fetchJobStatus,
call: false,
params: jobStatusParams
});
useEffect(() => { useEffect(() => {
if (ioc.activeDeployment?.jobId) { if (ioc.activeDeployment?.jobId) {
callGetJobDetails(ioc.activeDeployment?.jobId); getjobStatus({ awxJobId: ioc.activeDeployment?.jobId });
} }
}, [callGetJobDetails, ioc.activeDeployment?.jobId]); }, [getjobStatus, ioc.activeDeployment?.jobId]);
const closeDeployModal = () => {
setDeployDialogOpen(false);
};
const closeUndeployModal = () => {
setUndeployDialogOpen(false);
};
const getSubset = useCallback( const getSubset = useCallback(
(ioc) => { (ioc) => {
...@@ -63,7 +31,7 @@ export function IOCManage({ ...@@ -63,7 +31,7 @@ export function IOCManage({
// Show START/STOP components only when IOC was deployed SUCCESSFULLY // Show START/STOP components only when IOC was deployed SUCCESSFULLY
const deploymentStatus = new DeploymentStatus( const deploymentStatus = new DeploymentStatus(
ioc.activeDeployment, ioc.activeDeployment,
deploymentJob jobStatus
); );
const showControls = deploymentStatus.wasSuccessful(); const showControls = deploymentStatus.wasSuccessful();
...@@ -96,16 +64,7 @@ export function IOCManage({ ...@@ -96,16 +64,7 @@ export function IOCManage({
if (user) { if (user) {
subset["IOC Service Controls"] = showControls ? ( subset["IOC Service Controls"] = showControls ? (
<IOCService <IOCService {...{ ioc }} />
{...{
ioc,
currentCommand,
getJobs,
buttonDisabled,
setButtonDisabled,
jobLazyParams: pagination
}}
/>
) : ( ) : (
"IOC is not currently deployed" "IOC is not currently deployed"
); );
...@@ -113,15 +72,7 @@ export function IOCManage({ ...@@ -113,15 +72,7 @@ export function IOCManage({
return subset; return subset;
}, },
[ [jobStatus, user]
buttonDisabled,
pagination,
currentCommand,
deploymentJob,
getJobs,
setButtonDisabled,
user
]
); );
if (ioc) { if (ioc) {
...@@ -145,13 +96,13 @@ export function IOCManage({ ...@@ -145,13 +96,13 @@ export function IOCManage({
} }
let disabledDebployButtonTitle = ""; let disabledDebployButtonTitle = "";
if (buttonDisabled || ioc.operationInProgress) { if (ioc.operationInProgress) {
disabledDebployButtonTitle = disabledDebployButtonTitle =
"There is an ongoing operation, you can not deploy the IOC right now"; "There is an ongoing operation, you can not deploy the IOC right now";
} }
let disabledUndeployButtonTitle = ""; let disabledUndeployButtonTitle = "";
if (buttonDisabled || ioc.operationInProgress) { if (ioc.operationInProgress) {
disabledUndeployButtonTitle = disabledUndeployButtonTitle =
"There is an ongoing operation, you can not undeploy the IOC right now"; "There is an ongoing operation, you can not undeploy the IOC right now";
} }
...@@ -207,19 +158,15 @@ export function IOCManage({ ...@@ -207,19 +158,15 @@ export function IOCManage({
<DeployIOC <DeployIOC
open={deployDialogOpen} open={deployDialogOpen}
setOpen={setDeployDialogOpen} setOpen={setDeployDialogOpen}
submitCallback={closeDeployModal} submitCallback={() => setDeployDialogOpen(false)}
deployIocFormDefaults={deployIocFormDefaults} deployIocFormDefaults={deployIocFormDefaults}
ioc={ioc} ioc={ioc}
hasActiveDeployment={Boolean(ioc.activeDeployment)} hasActiveDeployment={Boolean(ioc.activeDeployment)}
buttonDisabled={buttonDisabled}
setButtonDisabled={setButtonDisabled}
/> />
<UndeployIOC <UndeployIOC
open={undeployDialogOpen} open={undeployDialogOpen}
setOpen={setUndeployDialogOpen} setOpen={setUndeployDialogOpen}
submitCallback={closeUndeployModal} submitCallback={() => setUndeployDialogOpen(false)}
buttonDisabled={buttonDisabled}
setButtonDisabled={setButtonDisabled}
ioc={ioc} ioc={ioc}
/> />
</AccessControl> </AccessControl>
...@@ -227,4 +174,4 @@ export function IOCManage({ ...@@ -227,4 +174,4 @@ export function IOCManage({
); );
} }
return null; return null;
} };
src/components/IOC/IOCService/IOCService.jsx → src/components/IOC/IOCManage/IOCService.jsx
+ 14
− 59
View file @ fed64919
...@@ -3,40 +3,30 @@ import { ...@@ -3,40 +3,30 @@ import {
LinearProgress, LinearProgress,
Grid, Grid,
Typography, Typography,
Tooltip, Tooltip
Alert
} from "@mui/material"; } from "@mui/material";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
import { initRequestParams } from "../../common/Helper";
import { AccessControl } from "../../auth/AccessControl"; import { AccessControl } from "../../auth/AccessControl";
import { useStartJobMutation } from "../../../store/deployApi"; import { useStartJobMutation } from "../../../store/deployApi";
import { getErrorMessage } from "../../common/Alerts/AlertsData"; import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
export function IOCService({ export function IOCService({ ioc, currentCommand }) {
ioc,
currentCommand,
getJobs,
buttonDisabled,
setButtonDisabled,
jobLazyParams
}) {
const navigate = useNavigate(); const navigate = useNavigate();
const [error, setError] = useState(); const [error, setError] = useState();
const [inProgress, setInProgress] = useState(false);
const [startModalOpen, setStartModalOpen] = useState(false); const [startModalOpen, setStartModalOpen] = useState(false);
const [stopModalOpen, setStopModalOpen] = useState(false); const [stopModalOpen, setStopModalOpen] = useState(false);
const [command, setCommand] = useState(null); const [command, setCommand] = useState(null);
const [startJob, { error: jobError, data: jobData }] = useStartJobMutation(); const [startJob, { error: jobError, data: jobData, isLoading }] =
useStartJobMutation();
useEffect(() => { useEffect(() => {
if (jobError) { if (jobError) {
setError(jobError); setError(jobError);
setButtonDisabled(false);
} }
}, [jobError, setButtonDisabled]); }, [jobError]);
useEffect(() => { useEffect(() => {
if (jobData && (!command || command.id !== jobData.id)) { if (jobData && (!command || command.id !== jobData.id)) {
...@@ -54,55 +44,23 @@ export function IOCService({ ...@@ -54,55 +44,23 @@ export function IOCService({
const start = useCallback(() => { const start = useCallback(() => {
resetUI(); resetUI();
setInProgress(true);
setButtonDisabled(true);
startJob({ startJob({
iocId: ioc.id, iocId: ioc.id,
createJobRequest: { createJobRequest: {
type: "START" type: "START"
} }
}); });
}, [resetUI, startJob, ioc.id]);
let requestParams = initRequestParams(jobLazyParams);
requestParams.deployment_id = ioc.activeDeployment?.id;
getJobs(requestParams);
}, [
getJobs,
ioc.activeDeployment?.id,
jobLazyParams,
resetUI,
setButtonDisabled,
startJob,
ioc.id
]);
const stop = useCallback(() => { const stop = useCallback(() => {
resetUI(); resetUI();
setInProgress(true);
setButtonDisabled(true);
startJob({ startJob({
iocId: ioc.id, iocId: ioc.id,
createJobRequest: { createJobRequest: {
type: "STOP" type: "STOP"
} }
}); });
}, [resetUI, startJob, ioc.id]);
let requestParams = initRequestParams(jobLazyParams);
requestParams.deployment_id = ioc.activeDeployment?.id;
getJobs(requestParams);
}, [
getJobs,
ioc.activeDeployment?.id,
jobLazyParams,
resetUI,
setButtonDisabled,
startJob,
ioc.id
]);
const onStartModalClose = useCallback(() => { const onStartModalClose = useCallback(() => {
setStartModalOpen(false); setStartModalOpen(false);
...@@ -121,13 +79,13 @@ export function IOCService({ ...@@ -121,13 +79,13 @@ export function IOCService({
}, [stop]); }, [stop]);
let disabledStartButtonTitle = ""; let disabledStartButtonTitle = "";
if (buttonDisabled || ioc.operationInProgress) { if (isLoading || ioc.operationInProgress) {
disabledStartButtonTitle = disabledStartButtonTitle =
"There is an ongoing operation, you can not Start the IOC right now"; "There is an ongoing operation, you can not Start the IOC right now";
} }
let disabledStopButtonTitle = ""; let disabledStopButtonTitle = "";
if (buttonDisabled || ioc.operationInProgress) { if (isLoading || ioc.operationInProgress) {
disabledStopButtonTitle = disabledStopButtonTitle =
"There is an ongoing operation, you can not Stop the IOC right now"; "There is an ongoing operation, you can not Stop the IOC right now";
} }
...@@ -203,7 +161,7 @@ export function IOCService({ ...@@ -203,7 +161,7 @@ export function IOCService({
<Tooltip title={disabledStopButtonTitle}> <Tooltip title={disabledStopButtonTitle}>
<Button <Button
color="secondary" color="secondary"
disabled={buttonDisabled} disabled={ioc.operationInProgress || isLoading}
variant="contained" variant="contained"
sx={{ sx={{
":hover": { ":hover": {
...@@ -221,7 +179,7 @@ export function IOCService({ ...@@ -221,7 +179,7 @@ export function IOCService({
<Button <Button
color="essGrass" color="essGrass"
variant="contained" variant="contained"
disabled={buttonDisabled} disabled={ioc.operationInProgress || isLoading}
sx={{ sx={{
color: "essWhite.main" // theme.palette.primary.main color: "essWhite.main" // theme.palette.primary.main
}} }}
...@@ -236,11 +194,8 @@ export function IOCService({ ...@@ -236,11 +194,8 @@ export function IOCService({
xs={12} xs={12}
md={12} md={12}
> >
{error ? ( {error && <ApiAlertError error={error} />}
<Alert severity="error">{getErrorMessage(error)}</Alert> {isLoading && <LinearProgress color="primary" />}
) : (
inProgress && <LinearProgress color="primary" />
)}
</Grid> </Grid>
</Grid> </Grid>
</AccessControl> </AccessControl>
......
src/components/IOC/IOCService/index.js deleted 100644 → 0
+ 0
− 4
View file @ 8fd59fa4
import { IOCService } from "./IOCService";
export { IOCService };
export default IOCService;
src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.jsx
+ 6
− 12
View file @ fed64919
...@@ -9,8 +9,7 @@ export function IOCUndeployDialog({ ...@@ -9,8 +9,7 @@ export function IOCUndeployDialog({
ioc, ioc,
error, error,
resetError, resetError,
buttonDisabled, buttonDisabled
setButtonDisabled
}) { }) {
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
...@@ -19,18 +18,13 @@ export function IOCUndeployDialog({ ...@@ -19,18 +18,13 @@ export function IOCUndeployDialog({
const onSubmit = (event) => { const onSubmit = (event) => {
event.preventDefault(); event.preventDefault();
setButtonDisabled(true);
submitCallback( submitCallback({
{ iocId: ioc.id,
ioc_id: ioc.id createJobRequest: {
}, type: "UNDEPLOY"
{
requestBody: {
type: "UNDEPLOY"
}
} }
); });
}; };
return ( return (
......
src/components/IOC/UndeployIOC/UndeployIOC.jsx
+ 16
− 32
View file @ fed64919
import { useContext, useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Navigate } from "react-router-dom"; import { Navigate } from "react-router-dom";
import { useAPIMethod } from "@ess-ics/ce-ui-common";
import { IOCUndeployDialog } from "../IOCUndeployDialog"; import { IOCUndeployDialog } from "../IOCUndeployDialog";
import { apiContext } from "../../../api/DeployApi"; import { useStartJobMutation } from "../../../store/deployApi";
import { getErrorMessage } from "../../common/Helper";
// Process component export const UndeployIOC = ({ open, setOpen, submitCallback, ioc }) => {
export function UndeployIOC({
open,
setOpen,
submitCallback,
ioc,
buttonDisabled,
setButtonDisabled
}) {
const [error, setError] = useState(); const [error, setError] = useState();
const client = useContext(apiContext);
const { const [
value: deployment, undeploy,
wrapper: action, { data: undeployment, error: unDeploymentError, isLoading }
error: deploymentError ] = useStartJobMutation();
} = useAPIMethod({
fcn: client.apis.Jobs.startJob,
call: false
});
useEffect(() => { useEffect(() => {
if (deploymentError) { if (unDeploymentError) {
setButtonDisabled(false); setError(unDeploymentError);
setError(getErrorMessage(deploymentError));
} }
}, [deploymentError, setButtonDisabled]); }, [unDeploymentError]);
if (!deployment) { if (!undeployment) {
return ( return (
<IOCUndeployDialog <IOCUndeployDialog
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
submitCallback={action} submitCallback={undeploy}
ioc={ioc} ioc={ioc}
error={error} error={error}
resetError={() => setError(null)} resetError={() => setError(null)}
buttonDisabled={buttonDisabled} buttonDisabled={ioc.operationInProgress || isLoading}
setButtonDisabled={setButtonDisabled}
/> />
); );
} else { } else {
submitCallback(); // This works but throws a warning because I am changing state in the parent while the child is rerendering. Not sure yet how to fix. submitCallback(); // This works but throws a warning because I am changing state in the parent while the child is rerendering. Not sure yet how to fix.
return ( return (
<Navigate <Navigate
to={`/jobs/${deployment.id}`} to={`/jobs/${undeployment.id}`}
push push
/> />
); );
} }
} };
src/views/IOC/IOCDetailsView.jsx
+ 10
− 81
View file @ fed64919
import { Grid, IconButton, Stack } from "@mui/material"; import { Grid, IconButton, Stack } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { import {
GlobalAppBarContext, GlobalAppBarContext,
useAPIMethod,
useIsCurrentUserPermitted, useIsCurrentUserPermitted,
TabPanel, TabPanel
usePagination,
usePolling
} from "@ess-ics/ce-ui-common"; } from "@ess-ics/ce-ui-common";
import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus"; import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
import { IOCManage } from "../../components/IOC/IOCManage"; import { IOCManage } from "../../components/IOC/IOCManage";
import { IOCAdmin } from "../../components/IOC/IOCAdmin"; import { IOCAdmin } from "../../components/IOC/IOCAdmin";
import { applicationTitle } from "../../components/common/Helper"; import { applicationTitle } from "../../components/common/Helper";
import { apiContext } from "../../api/DeployApi";
import { ROWS_PER_PAGE } from "../../constants";
const IOC_POLL_INTERVAL = 10000; export function IOCDetailsView({ ioc }) {
export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
const { setTitle } = useContext(GlobalAppBarContext); const { setTitle } = useContext(GlobalAppBarContext);
useEffect(() => {
if (ioc) {
setTitle(applicationTitle(`IOC Details: ${ioc.namingName}`));
}
}, [ioc, setTitle]);
const [buttonDisabled, setButtonDisabled] = useState(false); const [buttonDisabled, setButtonDisabled] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const client = useContext(apiContext);
const ongoingCommandParams = useMemo(
() => ({
ioc_id: ioc.id,
type: "COMMAND",
status: "ONGOING"
}),
[ioc]
);
const {
value: ongoingCommand,
wrapper: getOngoingCommand,
loading: ongoingCommandLoading,
dataReady: ongoingCommandDataReady,
abort: abortGetOngoingCommand
} = useAPIMethod({
fcn: client.apis.Jobs.listJobs,
params: ongoingCommandParams,
call: false
});
const { pagination: jobPagination, setPagination: setJobPagination } =
usePagination({
rowsPerPageOptions: ROWS_PER_PAGE,
initLimit: ROWS_PER_PAGE[0],
initPage: 0
});
const [tabIndex, setTabIndex] = useState(0); const [tabIndex, setTabIndex] = useState(0);
// Invoked by Table on change to pagination
const onPage = useCallback(
(params) => {
setJobPagination(params);
},
[setJobPagination]
);
usePolling(getIOC, loading, IOC_POLL_INTERVAL, abortGetIOC);
usePolling(
getOngoingCommand,
ongoingCommandLoading || !ongoingCommandDataReady,
IOC_POLL_INTERVAL,
abortGetOngoingCommand
);
useEffect(() => { useEffect(() => {
setButtonDisabled(Boolean(ioc?.operationInProgress)); setButtonDisabled(Boolean(ioc?.operationInProgress));
}, [ioc?.operationInProgress]); }, [ioc?.operationInProgress]);
useEffect(() => {
if (ioc) {
setTitle(applicationTitle(`IOC Details: ${ioc.namingName}`));
}
}, [ioc, setTitle]);
const handleClick = () => { const handleClick = () => {
navigate(-1); navigate(-1);
}; };
const setButtonDisabledAndUpdate = useCallback(
(isDisabled) => {
setButtonDisabled(isDisabled);
getIOC();
},
[getIOC]
);
const tabs = [ const tabs = [
{ {
label: "Status", label: "Status",
...@@ -110,18 +51,7 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) { ...@@ -110,18 +51,7 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
if (isPermittedManagement) { if (isPermittedManagement) {
tabs.push({ tabs.push({
label: "Management", label: "Management",
content: ( content: <IOCManage ioc={ioc} />
<IOCManage
ioc={ioc}
buttonDisabled={buttonDisabled}
currentCommand={
ongoingCommand?.jobs?.length > 0 ? ongoingCommand.jobs[0] : null
}
setButtonDisabled={setButtonDisabledAndUpdate}
pagination={jobPagination}
onPage={onPage}
/>
)
}); });
} }
if (isPermittedAdmin) { if (isPermittedAdmin) {
...@@ -130,7 +60,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) { ...@@ -130,7 +60,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
content: ( content: (
<IOCAdmin <IOCAdmin
ioc={ioc} ioc={ioc}
getIOC={getIOC}
resetTab={() => setTabIndex(0)} resetTab={() => setTabIndex(0)}
buttonDisabled={buttonDisabled} buttonDisabled={buttonDisabled}
setButtonDisabled={setButtonDisabled} setButtonDisabled={setButtonDisabled}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment