ICSHWI-11558: Redirect to start/stop job details from IOC service controls

src/components/IOC/CommandJobStepper.js

-import React, { useState, useEffect, useMemo } from "react";
-import {
-  ScheduleOutlined,
-  RotateRightOutlined,
-  CheckCircleOutline
-} from "@material-ui/icons";
-import { useJob } from "../../api/SwaggerApi";
-import { StepperWithStyle } from "../common/stepper/StepperWithStyle";
-import { useSafePolling } from "../../hooks/Polling";
-import { AWXCommandDetails } from "../../api/DataTypes";
-
-const POLL_COMMAND_JOB_INTERVAL = 3000;
-export function CommandJobStepper({ awxCommandId, actionType }) {
-  const [commandJob, getCommandJob /* reset*/, , loading] =
-    useJob(awxCommandId);
-  const [activeStep, setActiveStep] = useState(0);
-  const [pollJob, setPollJob] = useState(true);
-  const commandStatus = useMemo(
-    () => new AWXCommandDetails(commandJob),
-    [commandJob]
-  );
-
-  useEffect(() => {
-    if (commandJob) {
-      if (commandStatus.notFinished()) {
-        if (commandStatus.isRunning()) {
-          setActiveStep(1);
-        }
-      } else {
-        if (commandStatus.wasSuccessful()) {
-          setActiveStep(3);
-        }
-        if (commandStatus.wasFailed()) {
-          setActiveStep(1);
-        }
-        setPollJob(false);
-      }
-    }
-  }, [commandJob, commandStatus, getCommandJob]);
-
-  const icons = {
-    1: <ScheduleOutlined />,
-    2: <RotateRightOutlined />,
-    3: <CheckCircleOutline />
-  };
-
-  const steps = ["Queued ", "Running", (actionType ?? "") + " Completed"];
-
-  const isStepFailed = (step) => {
-    if (commandStatus.wasFailed()) {
-      return step === activeStep;
-    }
-    return false;
-  };
-
-  return (
-    <>
-      <StepperWithStyle
-        steps={steps}
-        activeStep={activeStep}
-        isStepFailed={isStepFailed}
-        icons={icons}
-      />
-      {pollJob && <CommandJobWatcher {...{ getCommandJob, loading }} />}
-    </>
-  );
-}
-
-function CommandJobWatcher({ getCommandJob, loading }) {
-  useSafePolling(getCommandJob, loading, POLL_COMMAND_JOB_INTERVAL);
-  return null;
-}

src/components/IOC/IOCService.js

@@ -8,7 +8,6 @@ import {
 import { makeStyles } from "@material-ui/core/styles";
 import React, { useState, useEffect, useRef, useContext } from "react";
 import { useStartIOC, useStopIOC } from "../../api/SwaggerApi";
-import { CommandJobStepper } from "./CommandJobStepper";
 import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
 import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
 import { notificationContext } from "../../components/common/notification/Notifications";
@@ -17,6 +16,7 @@ import { theme } from "../../style/Theme";
 import { initRequestParams } from "../common/Helper";
 import AccessControl from "../auth/AccessControl";
 import { essColors } from "../../style/Palette";
+import { useNavigate } from "react-router-dom";
 
 const useStyles = makeStyles({
   startButton: {
@@ -56,6 +56,7 @@ export function IOCService({
 }) {
   const classes = useStyles(theme);
   const [error, setError] = useState();
+  const navigate = useNavigate();
 
   function onError(message) {
     setError(message);
@@ -64,7 +65,6 @@ export function IOCService({
   const [startJob, startIOC, resetStartJob] = useStartIOC(ioc.id, onError);
   const [stopJob, stopIOC, resetStopJob] = useStopIOC(ioc.id, onError);
   const [inProgress, setInProgress] = useState(false);
-  const [action, setAction] = useState(null);
   const [adHocDialogOpen, setAdHocDialogOpen] = useState(false);
   const [adHocDialogTitle, setAdHocDiatlogTitle] = useState();
   const [adHocDialogDescription, setAdHocDialogDescription] = useState();
@@ -75,22 +75,28 @@ export function IOCService({
   useEffect(() => {
     if (startJob && (!command || command.id !== startJob.id)) {
       watchCommand(startJob.id);
+      navigate(`/jobs/${startJob.id}`);
       setCommand(startJob);
-      setInProgress(false);
     } else if (stopJob && (!command || command.id !== stopJob.id)) {
       watchCommand(stopJob.id);
+      navigate(`/jobs/${stopJob.id}`);
       setCommand(stopJob);
-      setInProgress(false);
     } else if (currentCommand) {
       watchCommand(currentCommand.id);
       setCommand(currentCommand);
-      setInProgress(false);
     }
-  }, [startJob, stopJob, command, watchCommand, getCommands, currentCommand]);
+  }, [
+    startJob,
+    stopJob,
+    command,
+    watchCommand,
+    getCommands,
+    currentCommand,
+    navigate
+  ]);
 
   function resetUI() {
     setCommand(null);
-    setAction(null);
     resetStartJob();
     resetStopJob();
     setError(null);
@@ -98,10 +104,9 @@ export function IOCService({
 
   const start = async () => {
     resetUI();
-    setAction("Start");
     setInProgress(true);
     setButtonDisabled(true);
-    startIOC();
+    await startIOC();
     let requestParams = initRequestParams(
       commandLazyParams,
       null,
@@ -113,7 +118,6 @@ export function IOCService({
 
   const stop = async () => {
     resetUI();
-    setAction("Stop");
     setInProgress(true);
     setButtonDisabled(true);
     await stopIOC();
@@ -243,18 +247,7 @@ export function IOCService({
             {error ? (
               <Alert severity="error">{error}</Alert>
             ) : (
-              <>
-                {command ? (
-                  <CommandJobStepper
-                    awxCommandId={command.awxCommandId}
-                    actionType={action}
-                  />
-                ) : inProgress ? (
-                  <LinearProgress color="primary" />
-                ) : (
-                  <></>
-                )}
-              </>
+              inProgress && <LinearProgress color="primary" />
             )}
           </Grid>
         </Grid>