Merge branch 'CE-3015-error-message-503' into 'develop'

CE-3015: Implement correct error handling for operation errors

See merge request !533

src/components/IOC/DeployIOC/DeployIOC.js

@@ -3,6 +3,7 @@ import { Navigate } from "react-router-dom";
 import { IOCDeployDialog } from "../IOCDeployDialog";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { getErrorMessage } from "../../common/Helper";
 
 // Process component
 export function DeployIOC({
@@ -29,11 +30,7 @@ export function DeployIOC({
   useEffect(() => {
     if (deployError) {
       setButtonDisabled(false);
-      setError(
-        deployError?.response?.body?.description ??
-          deployError?.message ??
-          "An unknown error occurred"
-      );
+      setError(getErrorMessage(deployError));
     }
   }, [deployError, setButtonDisabled]);
 

src/components/IOC/IOCDeployDialog/IOCDeployDialog.js

@@ -77,6 +77,7 @@ export function IOCDeployDialog({
 
   const handleClose = () => {
     setOpen(false);
+    resetError();
   };
 
   useEffect(() => {

src/components/IOC/IOCService/IOCService.js

@@ -5,13 +5,14 @@ import {
   Typography,
   Tooltip
 } from "@mui/material";
-import { useState, useEffect, useContext, useCallback } from "react";
-import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useState, useEffect, useCallback } from "react";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
 import Alert from "@mui/material/Alert";
 import { initRequestParams } from "../../common/Helper";
 import AccessControl from "../../auth/AccessControl";
 import { useNavigate } from "react-router-dom";
-import { apiContext } from "../../../api/DeployApi";
+import { useStartOperationMutation } from "../../../store/deployApi";
+import { getErrorMessage } from "../../common/Alerts/ApiAlertError";
 
 export function IOCService({
   ioc,
@@ -21,52 +22,28 @@ export function IOCService({
   setButtonDisabled,
   jobLazyParams
 }) {
-  const [error, setError] = useState();
   const navigate = useNavigate();
+  const [error, setError] = useState();
   const [inProgress, setInProgress] = useState(false);
   const [startModalOpen, setStartModalOpen] = useState(false);
   const [stopModalOpen, setStopModalOpen] = useState(false);
   const [command, setCommand] = useState(null);
 
-  const client = useContext(apiContext);
-
-  const {
-    value: startJob,
-    wrapper: startIOC,
-    error: startJobError
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.startOperation,
-    call: false
-  });
-
-  const {
-    value: stopJob,
-    wrapper: stopIOC,
-    error: stopJobError
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.startOperation,
-    call: false
-  });
+  const [startOperation, { error: jobError, data: jobData }] =
+    useStartOperationMutation();
 
   useEffect(() => {
-    setError(startJobError?.message);
-  }, [startJobError]);
+    setError(jobError);
+  }, [jobError]);
 
   useEffect(() => {
-    setError(stopJobError?.message);
-  }, [stopJobError]);
-
-  useEffect(() => {
-    if (startJob && (!command || command.id !== startJob.id)) {
-      navigate(`/jobs/${startJob.id}`);
-      setCommand(startJob);
-    } else if (stopJob && (!command || command.id !== stopJob.id)) {
-      navigate(`/jobs/${stopJob.id}`);
-      setCommand(stopJob);
+    if (jobData && (!command || command.id !== jobData.id)) {
+      navigate(`/jobs/${jobData.id}`);
+      setCommand(jobData);
     } else if (currentCommand) {
       setCommand(currentCommand);
     }
-  }, [startJob, stopJob, command, currentCommand, navigate]);
+  }, [jobData, command, currentCommand, navigate]);
 
   const resetUI = useCallback(() => {
     setCommand(null);
@@ -78,16 +55,12 @@ export function IOCService({
     setInProgress(true);
     setButtonDisabled(true);
 
-    startIOC(
-      {
-        ioc_id: ioc.id
-      },
-      {
-        requestBody: {
-          type: "START"
-        }
+    startOperation({
+      iocId: ioc.id,
+      createJobRequest: {
+        type: "START"
       }
-    );
+    });
 
     let requestParams = initRequestParams(jobLazyParams);
 
@@ -99,7 +72,7 @@ export function IOCService({
     jobLazyParams,
     resetUI,
     setButtonDisabled,
-    startIOC
+    startOperation
   ]);
 
   const stop = useCallback(() => {
@@ -107,16 +80,12 @@ export function IOCService({
     setInProgress(true);
     setButtonDisabled(true);
 
-    stopIOC(
-      {
-        ioc_id: ioc.id
-      },
-      {
-        requestBody: {
-          type: "STOP"
-        }
+    startOperation({
+      iocId: ioc.id,
+      createJobRequest: {
+        type: "STOP"
       }
-    );
+    });
 
     let requestParams = initRequestParams(jobLazyParams);
 
@@ -128,7 +97,7 @@ export function IOCService({
     jobLazyParams,
     resetUI,
     setButtonDisabled,
-    stopIOC
+    startOperation
   ]);
 
   const onStartModalClose = useCallback(() => {
@@ -264,7 +233,7 @@ export function IOCService({
           md={12}
         >
           {error ? (
-            <Alert severity="error">{error}</Alert>
+            <Alert severity="error">{getErrorMessage(error)}</Alert>
           ) : (
             inProgress && <LinearProgress color="primary" />
           )}

src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js

-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography, Button } from "@mui/material";
 import Alert from "@mui/material/Alert";
-import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
+import { Dialog } from "@ess-ics/ce-ui-common";
 
 export function IOCUndeployDialog({
   open,
@@ -8,22 +8,19 @@ export function IOCUndeployDialog({
   submitCallback,
   ioc,
   error,
+  resetError,
+  buttonDisabled,
   setButtonDisabled
 }) {
   const handleClose = () => {
     setOpen(false);
+    resetError();
   };
 
   const onSubmit = (event) => {
     event.preventDefault();
     setButtonDisabled(true);
 
-    submitCallback({
-      ioc_id: ioc.id
-    });
-  };
-
-  const onConfirm = () => {
     submitCallback(
       {
         ioc_id: ioc.id
@@ -37,7 +34,7 @@ export function IOCUndeployDialog({
   };
 
   return (
-    <ConfirmationDialog
+    <Dialog
       open={open}
       onClose={handleClose}
       title={
@@ -48,9 +45,6 @@ export function IOCUndeployDialog({
           Undeploy
         </Typography>
       }
-      confirmText="Undeploy"
-      cancelText="Cancel"
-      onConfirm={onConfirm}
       content={
         <Stack
           component="form"
@@ -69,6 +63,27 @@ export function IOCUndeployDialog({
             {ioc?.activeDeployment?.host?.fqdn}?
           </Typography>
           {error ? <Alert severity="error">{error}</Alert> : <></>}
+          <Stack
+            flexDirection="row"
+            justifyContent="flex-end"
+            gap={2}
+            marginTop={1}
+          >
+            <Button
+              onClick={handleClose}
+              color="primary"
+            >
+              Cancel
+            </Button>
+            <Button
+              color="primary"
+              variant="contained"
+              type="submit"
+              disabled={!ioc || error || buttonDisabled}
+            >
+              Undeploy
+            </Button>
+          </Stack>
         </Stack>
       }
     />

src/components/IOC/UndeployIOC/UndeployIOC.js

@@ -3,6 +3,7 @@ import { Navigate } from "react-router-dom";
 import { IOCUndeployDialog } from "../IOCUndeployDialog";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { getErrorMessage } from "../../common/Helper";
 
 // Process component
 export function UndeployIOC({
@@ -27,7 +28,7 @@ export function UndeployIOC({
   useEffect(() => {
     if (deploymentError) {
       setButtonDisabled(false);
-      setError(deploymentError?.message);
+      setError(getErrorMessage(deploymentError));
     }
   }, [deploymentError, setButtonDisabled]);
 
@@ -39,6 +40,7 @@ export function UndeployIOC({
         submitCallback={action}
         ioc={ioc}
         error={error}
+        resetError={() => setError(null)}
         buttonDisabled={buttonDisabled}
         setButtonDisabled={setButtonDisabled}
       />