fix status alert and form cache comparison

eclipse-xpanse · Apr 22, 2024 · a2f163c · a2f163c
1 parent 3e251aa
commit a2f163c
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,8 @@
             "no-undef": "off",
             "@typescript-eslint/no-inferrable-types": "off",
             "@tanstack/query/exhaustive-deps": "error",
-            "no-console": "error"
+            "no-console": "error",
+            "@typescript-eslint/no-dynamic-delete": "off"
         },
         "ignorePatterns": [
             "src/xpanse-api/**",

diff --git a/src/components/content/deployedServices/myServices/MyServices.tsx b/src/components/content/deployedServices/myServices/MyServices.tsx
@@ -55,6 +55,7 @@ import { useServiceDetailsPollingQuery } from '../../order/orderStatus/useServic
 import { usePurgeRequestStatusQuery } from '../../order/purge/usePurgeRequestStatusQuery';
 import { Modify } from '../../order/modify/Modify';
 import { Scale } from '../../order/scale/Scale';
+import { getExistingServiceParameters } from '../../order/common/utils/existingServiceParameters';
 
 function MyServices(): React.JSX.Element {
     const [urlParams] = useSearchParams();
@@ -73,6 +74,7 @@ function MyServices(): React.JSX.Element {
     const [activeRecord, setActiveRecord] = useState<
         DeployedServiceDetails | VendorHostedDeployedServiceDetails | undefined
     >(undefined);
+    const [cacheFormVariable] = useOrderFormStore((state) => [state.addDeployVariable]);
     const [isDestroyRequestSubmitted, setIsDestroyRequestSubmitted] = useState<boolean>(false);
     const [isPurgeRequestSubmitted, setIsPurgeRequestSubmitted] = useState<boolean>(false);
     const [isMyServiceDetailsModalOpen, setIsMyServiceDetailsModalOpen] = useState(false);
@@ -755,6 +757,10 @@ function MyServices(): React.JSX.Element {
                 ? (record as DeployedServiceDetails)
                 : (record as VendorHostedDeployedServiceDetails)
         );
+        const existingParameters = getExistingServiceParameters(record);
+        for (const existingServiceParametersKey in existingParameters) {
+            cacheFormVariable(existingServiceParametersKey, existingParameters[existingServiceParametersKey]);
+        }
         setIsModifyModalOpen(true);
     }
 
@@ -764,6 +770,10 @@ function MyServices(): React.JSX.Element {
                 ? (record as DeployedServiceDetails)
                 : (record as VendorHostedDeployedServiceDetails)
         );
+        const existingParameters = getExistingServiceParameters(record);
+        for (const existingServiceParametersKey in existingParameters) {
+            cacheFormVariable(existingServiceParametersKey, existingParameters[existingServiceParametersKey]);
+        }
         setIsScaleModalOpen(true);
     }
 

diff --git a/src/components/content/order/common/ScaleOrModifySubmitStatusAlert.tsx b/src/components/content/order/common/ScaleOrModifySubmitStatusAlert.tsx
@@ -8,47 +8,60 @@ import {
     DeployedServiceDetails,
     Response,
     ServiceProviderContactDetails,
+    VendorHostedDeployedServiceDetails,
 } from '../../../../xpanse-api/generated';
 import React, { useMemo } from 'react';
 import { useStopwatch } from 'react-timer-hook';
 import { ProcessingStatus } from '../orderStatus/ProcessingStatus';
 import { OperationType } from '../types/OperationType';
 import { OrderSubmitResult } from '../orderStatus/OrderSubmitResult';
 import { convertStringArrayToUnorderedList } from '../../../utils/generateUnorderedList';
+import { useServiceDetailsPollingQuery } from '../orderStatus/useServiceDetailsPollingQuery';
 
 function ScaleOrModifySubmitStatusAlert({
-    uuid,
     isSubmitFailed,
-    deployedServiceDetails,
+    isSubmitInProgress,
+    currentSelectedService,
     serviceProviderContactDetails,
-    isPollingError,
 }: {
-    uuid: string;
     isSubmitFailed: Error | null;
-    deployedServiceDetails: DeployedServiceDetails | undefined;
+    isSubmitInProgress: boolean;
+    currentSelectedService: DeployedServiceDetails | VendorHostedDeployedServiceDetails;
     serviceProviderContactDetails: ServiceProviderContactDetails | undefined;
-    isPollingError: boolean;
 }): React.JSX.Element {
     const stopWatch = useStopwatch({
         autoStart: true,
     });
+    const getServiceDetailsByIdQuery = useServiceDetailsPollingQuery(
+        currentSelectedService.id,
+        !isSubmitFailed && !isSubmitInProgress,
+        currentSelectedService.serviceHostingType,
+        [
+            DeployedServiceDetails.serviceDeploymentState.MODIFICATION_FAILED,
+            DeployedServiceDetails.serviceDeploymentState.MODIFICATION_SUCCESSFUL,
+        ]
+    );
     const msg = useMemo(() => {
-        if (deployedServiceDetails) {
+        if (isSubmitInProgress) {
+            return 'Request accepted';
+        }
+        if (getServiceDetailsByIdQuery.data) {
             if (
-                uuid &&
-                deployedServiceDetails.serviceDeploymentState.toString() ===
-                    DeployedServiceDetails.serviceDeploymentState.MODIFYING.toString()
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
+                DeployedServiceDetails.serviceDeploymentState.MODIFYING.toString()
             ) {
                 return 'Modifying, Please wait...';
             } else if (
-                deployedServiceDetails.serviceDeploymentState.toString() ===
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                     DeployedServiceDetails.serviceDeploymentState.MODIFICATION_SUCCESSFUL.toString() ||
-                deployedServiceDetails.serviceDeploymentState.toString() ===
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                     DeployedServiceDetails.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
-                deployedServiceDetails.serviceDeploymentState.toString() ===
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                     DeployedServiceDetails.serviceDeploymentState.ROLLBACK_FAILED.toString()
             ) {
-                return <ProcessingStatus response={deployedServiceDetails} operationType={OperationType.Modify} />;
+                return (
+                    <ProcessingStatus response={getServiceDetailsByIdQuery.data} operationType={OperationType.Modify} />
+                );
             }
         } else if (isSubmitFailed) {
             if (isSubmitFailed instanceof ApiError && isSubmitFailed.body && 'details' in isSubmitFailed.body) {
@@ -57,44 +70,44 @@ function ScaleOrModifySubmitStatusAlert({
             } else {
                 return getOrderSubmissionFailedDisplay([isSubmitFailed.message]);
             }
-        } else if (uuid && isPollingError) {
+        } else if (getServiceDetailsByIdQuery.error) {
             return 'Modification status polling failed. Please visit MyServices page to check the status of the request.';
-        } else if (uuid) {
-            return 'Request accepted';
+        } else {
+            return 'Modifying, Please wait...';
         }
         return '';
-    }, [deployedServiceDetails, uuid, isPollingError, isSubmitFailed]);
+    }, [getServiceDetailsByIdQuery.data, getServiceDetailsByIdQuery.error, isSubmitFailed, isSubmitInProgress]);
 
     const alertType = useMemo(() => {
-        if (isPollingError || isSubmitFailed) {
+        if (getServiceDetailsByIdQuery.isError || isSubmitFailed) {
             return 'error';
         }
-        if (deployedServiceDetails) {
+        if (getServiceDetailsByIdQuery.data) {
             if (
-                deployedServiceDetails.serviceDeploymentState.toString() ===
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                     DeployedServiceDetails.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
-                deployedServiceDetails.serviceDeploymentState.toString() ===
+                getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                     DeployedServiceDetails.serviceDeploymentState.ROLLBACK_FAILED.toString()
             ) {
                 return 'error';
             }
         }
         return 'success';
-    }, [deployedServiceDetails, isPollingError, isSubmitFailed]);
+    }, [getServiceDetailsByIdQuery.data, getServiceDetailsByIdQuery.isError, isSubmitFailed]);
 
-    if (isPollingError || isSubmitFailed) {
+    if (getServiceDetailsByIdQuery.isError || isSubmitFailed) {
         if (stopWatch.isRunning) {
             stopWatch.pause();
         }
     }
 
-    if (deployedServiceDetails) {
+    if (getServiceDetailsByIdQuery.data) {
         if (
-            deployedServiceDetails.serviceDeploymentState.toString() ===
+            getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                 DeployedServiceDetails.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
-            deployedServiceDetails.serviceDeploymentState.toString() ===
+            getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                 DeployedServiceDetails.serviceDeploymentState.ROLLBACK_FAILED.toString() ||
-            deployedServiceDetails.serviceDeploymentState.toString() ===
+            getServiceDetailsByIdQuery.data.serviceDeploymentState.toString() ===
                 DeployedServiceDetails.serviceDeploymentState.MODIFICATION_SUCCESSFUL.toString()
         ) {
             if (stopWatch.isRunning) {
@@ -115,7 +128,7 @@ function ScaleOrModifySubmitStatusAlert({
     return (
         <OrderSubmitResult
             msg={msg}
-            uuid={uuid}
+            uuid={currentSelectedService.id}
             type={alertType}
             stopWatch={stopWatch}
             contactServiceDetails={alertType !== 'success' ? serviceProviderContactDetails : undefined}

diff --git a/src/components/content/order/common/utils/existingServiceParameters.ts b/src/components/content/order/common/utils/existingServiceParameters.ts
@@ -0,0 +1,29 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import {
+    DeployedService,
+    DeployedServiceDetails,
+    VendorHostedDeployedServiceDetails,
+} from '../../../../../xpanse-api/generated';
+import { CUSTOMER_SERVICE_NAME_FIELD } from '../../../../utils/constants';
+
+export function getExistingServiceParameters(deployedService: DeployedService): Record<string, unknown> {
+    const variables: Record<string, unknown> = {};
+    variables[CUSTOMER_SERVICE_NAME_FIELD] = deployedService.customerServiceName;
+    if (deployedService.serviceHostingType === DeployedService.serviceHostingType.SELF) {
+        const selfHostedService = deployedService as DeployedServiceDetails;
+        for (const key in selfHostedService.deployRequest.serviceRequestProperties) {
+            variables[key] = selfHostedService.deployRequest.serviceRequestProperties[key];
+        }
+    }
+    if (deployedService.serviceHostingType === DeployedService.serviceHostingType.SERVICE_VENDOR) {
+        const selfHostedService = deployedService as VendorHostedDeployedServiceDetails;
+        for (const key in selfHostedService.deployRequest.serviceRequestProperties) {
+            variables[key] = selfHostedService.deployRequest.serviceRequestProperties[key];
+        }
+    }
+    return variables;
+}
diff --git a/src/components/content/order/create/SelectServiceForm.tsx b/src/components/content/order/create/SelectServiceForm.tsx
@@ -215,7 +215,6 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
             }));
         } else {
             const newAvailabilityZone = selectAvailabilityZones;
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
             delete newAvailabilityZone[varName];
             setSelectAvailabilityZones({ ...newAvailabilityZone });
         }

diff --git a/src/components/content/order/migrate/SelectDestination.tsx b/src/components/content/order/migrate/SelectDestination.tsx
@@ -219,7 +219,6 @@ export const SelectDestination = ({
             }));
         } else {
             const newAvailabilityZone = selectAvailabilityZones;
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
             delete newAvailabilityZone[varName];
             setSelectAvailabilityZones({ ...newAvailabilityZone });
         }

diff --git a/src/components/content/order/modify/Modify.tsx b/src/components/content/order/modify/Modify.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { Button, Form, Input, Tooltip } from 'antd';
 import '../../../../styles/service_modify.css';
 import {
@@ -18,13 +18,12 @@ import { CUSTOMER_SERVICE_NAME_FIELD } from '../../../utils/constants';
 import { OrderItem } from '../common/utils/OrderItem';
 import { useOrderFormStore } from '../store/OrderFormStore';
 import '../../../../styles/service_order.css';
-import { useServiceDetailsPollingQuery } from '../orderStatus/useServiceDetailsPollingQuery';
 import { getModifyParams } from '../formDataHelpers/modifyParamsHelper';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
 import ScaleOrModifySubmitStatusAlert from '../common/ScaleOrModifySubmitStatusAlert';
 import { ModifySubmitRequest } from '../common/modifySubmitRequest';
 import { useMutation } from '@tanstack/react-query';
-import { v4 as uuidv4 } from 'uuid';
+import { getExistingServiceParameters } from '../common/utils/existingServiceParameters';
 
 export const Modify = ({
     currentSelectedService,
@@ -33,21 +32,10 @@ export const Modify = ({
 }): React.JSX.Element => {
     const [form] = Form.useForm();
     let getParams: OrderSubmitProps | undefined = undefined;
-    const uniqueRequestId = useRef(currentSelectedService.id);
 
     const [isShowModifyingResult, setIsShowModifyingResult] = useState<boolean>(false);
-    const [isVariableUpdate, setIsVaraibleUpdate] = useState<boolean>(false);
-
     const [cacheFormVariable] = useOrderFormStore((state) => [state.addDeployVariable]);
-
-    // Display previously deployed variables.
-    cacheFormVariable(CUSTOMER_SERVICE_NAME_FIELD, currentSelectedService.customerServiceName);
-    if (currentSelectedService.deployRequest.serviceRequestProperties) {
-        const record = currentSelectedService.deployRequest.serviceRequestProperties;
-        for (const key in record) {
-            cacheFormVariable(key, record[key]);
-        }
-    }
+    const [storedDeployVariables] = useOrderFormStore((state) => [state.deployParams]);
 
     const serviceTemplateDetailsQuery = useGetServiceTemplateDetails(currentSelectedService.serviceTemplateId);
     const modifyServiceRequest = useMutation({
@@ -56,6 +44,12 @@ export const Modify = ({
         },
     });
 
+    const hasVariableChanged: () => boolean = () => {
+        const prevParamsString = JSON.stringify(getExistingServiceParameters(currentSelectedService));
+        const newParamsString = JSON.stringify(storedDeployVariables);
+        return prevParamsString !== newParamsString;
+    };
+
     if (serviceTemplateDetailsQuery.isSuccess) {
         getParams = getModifyParams(
             currentSelectedService,
@@ -64,34 +58,8 @@ export const Modify = ({
         );
     }
 
-    const getServiceDetailsByIdQuery = useServiceDetailsPollingQuery(
-        currentSelectedService.id,
-        modifyServiceRequest.isSuccess,
-        currentSelectedService.serviceHostingType,
-        [
-            DeployedServiceDetails.serviceDeploymentState.MODIFICATION_FAILED,
-            DeployedServiceDetails.serviceDeploymentState.MODIFICATION_SUCCESSFUL,
-        ]
-    );
-
-    useEffect(() => {
-        const unsubscribe = useOrderFormStore.subscribe((newState, prevState) => {
-            const prevParamsString = JSON.stringify(prevState.deployParams);
-            const newParamsString = JSON.stringify(newState.deployParams);
-
-            if (prevParamsString !== newParamsString) {
-                setIsVaraibleUpdate(true);
-            }
-        });
-
-        return () => {
-            unsubscribe();
-        };
-    }, [currentSelectedService]);
-
     const onFinish = () => {
         const deployParamsCache = useOrderFormStore.getState().deployParams;
-        uniqueRequestId.current = currentSelectedService.id;
         const createRequest: ModifyRequest = {
             flavor: currentSelectedService.flavor,
         };
@@ -115,19 +83,16 @@ export const Modify = ({
         <div className={'modify-select-class'}>
             <div className={'modify-title-class content-title'}>Modify Parameters:</div>
             {isShowModifyingResult ? (
-                <React.Fragment key={uuidv4()}>
-                    <ScaleOrModifySubmitStatusAlert
-                        uuid={currentSelectedService.id}
-                        isSubmitFailed={modifyServiceRequest.error}
-                        deployedServiceDetails={getServiceDetailsByIdQuery.data}
-                        serviceProviderContactDetails={
-                            serviceTemplateDetailsQuery.isSuccess
-                                ? serviceTemplateDetailsQuery.data.serviceProviderContactDetails
-                                : undefined
-                        }
-                        isPollingError={getServiceDetailsByIdQuery.isError}
-                    />
-                </React.Fragment>
+                <ScaleOrModifySubmitStatusAlert
+                    isSubmitFailed={modifyServiceRequest.error}
+                    isSubmitInProgress={modifyServiceRequest.isPending}
+                    currentSelectedService={currentSelectedService}
+                    serviceProviderContactDetails={
+                        serviceTemplateDetailsQuery.isSuccess
+                            ? serviceTemplateDetailsQuery.data.serviceProviderContactDetails
+                            : undefined
+                    }
+                />
             ) : null}
             <Form
                 form={form}
@@ -184,7 +149,9 @@ export const Modify = ({
                             type='primary'
                             htmlType='submit'
                             disabled={
-                                !isVariableUpdate || modifyServiceRequest.isPending || modifyServiceRequest.isSuccess
+                                !hasVariableChanged() ||
+                                modifyServiceRequest.isPending ||
+                                modifyServiceRequest.isSuccess
                             }
                         >
                             Modify

diff --git a/src/components/content/order/orderStatus/useServiceDetailsPollingQuery.ts b/src/components/content/order/orderStatus/useServiceDetailsPollingQuery.ts
@@ -31,5 +31,6 @@ export function useServiceDetailsPollingQuery(
         refetchIntervalInBackground: true,
         refetchOnWindowFocus: false,
         enabled: uuid !== undefined && isStartPolling,
+        gcTime: 0,
     });
 }