Merge pull request #1486 from swaroopar/feature/fixRetryUpdate

iskey · web-flow · commit 41e4f1f4dd2d · 2025-02-05T09:20:44.000+08:00
refactor status polling to use order status only
diff --git a/package.json b/package.json
@@ -99,9 +99,6 @@
             "eslint-config-prettier",
             "eslint-plugin-prettier"
         ],
-        "ignoreBinaries": [
-            "zip"
-        ],
         "eslint": {
             "config": [
                 "./eslint.config.mjs"
diff --git a/src/components/content/common/queries/useServiceDetailsByServiceIdQuery.ts b/src/components/content/common/queries/useServiceDetailsByServiceIdQuery.ts
@@ -13,13 +13,15 @@ import {
     taskStatus,
 } from '../../../../xpanse-api/generated';
 
+const GET_SERVICE_DETAILS_QUERY_ID = 'getServiceDetailsById';
+
 export function useServiceDetailsByServiceIdQuery(
     serviceId: string | undefined,
     currentServiceHostingType: string,
     currentServiceOrderTaskStatus: string | undefined
 ) {
     return useQuery({
-        queryKey: ['getServiceDetailsById', serviceId, currentServiceHostingType],
+        queryKey: [GET_SERVICE_DETAILS_QUERY_ID, serviceId, currentServiceHostingType],
         queryFn: () => {
             if (currentServiceHostingType === serviceHostingType.SELF.toString()) {
                 const data: GetSelfHostedServiceDetailsByIdData = {
@@ -41,3 +43,10 @@ export function useServiceDetailsByServiceIdQuery(
         gcTime: Infinity,
     });
 }
+
+export function getQueryKeyForServiceDetailsByServiceIdQuery(
+    serviceId: string,
+    currentServiceHostingType: string
+): string[] {
+    return [GET_SERVICE_DETAILS_QUERY_ID, serviceId, currentServiceHostingType];
+}
diff --git a/src/components/content/deployedServices/myServices/MyServices.tsx b/src/components/content/deployedServices/myServices/MyServices.tsx
@@ -157,7 +157,9 @@ function MyServices(): React.JSX.Element {
 
     const serviceDestroyQuery = useDestroyRequestSubmitQuery();
     const servicePurgeQuery = usePurgeRequestSubmitQuery();
-    const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery();
+    const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery(
+        activeRecord ? (activeRecord.serviceHostingType as serviceHostingType) : serviceHostingType.SELF
+    );
     const serviceRecreateRequest = useRecreateRequest();
 
     const serviceStateStartQuery = useServiceStateStartQuery();
diff --git a/src/components/content/order/create/OrderSubmit.tsx b/src/components/content/order/create/OrderSubmit.tsx
@@ -22,7 +22,6 @@ import { isHandleKnownErrorResponse } from '../../common/error/isHandleKnownErro
 import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType.ts';
 import { ContactDetailsText } from '../../common/ocl/ContactDetailsText.tsx';
 import { useLatestServiceOrderStatusQuery } from '../../common/queries/useLatestServiceOrderStatusQuery.ts';
-import { useServiceDetailsByServiceIdQuery } from '../../common/queries/useServiceDetailsByServiceIdQuery.ts';
 import { EulaInfo } from '../common/EulaInfo';
 import { IsvNameDisplay } from '../common/IsvNameDisplay.tsx';
 import { ServiceTitle } from '../common/ServiceTitle.tsx';
@@ -41,7 +40,7 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
     const [isShowDeploymentResult, setIsShowDeploymentResult] = useState<boolean>(false);
     const uniqueRequestId = useRef(v4());
     const submitDeploymentRequest = useDeployRequestSubmitQuery();
-    const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery();
+    const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery(state.serviceHostingType);
     const getSubmitLatestServiceOrderStatusQuery = useLatestServiceOrderStatusQuery(
         redeployFailedDeploymentQuery.isSuccess
             ? redeployFailedDeploymentQuery.data.orderId
@@ -50,12 +49,6 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
         [taskStatus.SUCCESSFUL, taskStatus.FAILED]
     );
 
-    const getServiceDetailsByIdQuery = useServiceDetailsByServiceIdQuery(
-        submitDeploymentRequest.data?.serviceId ?? '',
-        state.serviceHostingType,
-        getSubmitLatestServiceOrderStatusQuery.data?.taskStatus
-    );
-
     const orderableServicesQuery = userOrderableServicesQuery(state.category, state.name);
 
     const [cacheFormVariable] = useOrderFormStore((state) => [state.addDeployVariable]);
@@ -227,12 +220,11 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                     {isShowDeploymentResult ? (
                         <OrderSubmitStatusAlert
                             key={uniqueRequestId.current}
-                            uuid={submitDeploymentRequest.data?.serviceId ?? ''}
+                            serviceId={submitDeploymentRequest.data?.serviceId ?? ''}
                             serviceHostType={state.serviceHostingType}
                             submitDeploymentRequest={submitDeploymentRequest}
                             redeployFailedDeploymentQuery={redeployFailedDeploymentQuery}
                             getSubmitLatestServiceOrderStatusQuery={getSubmitLatestServiceOrderStatusQuery}
-                            deployedServiceDetails={getServiceDetailsByIdQuery.data}
                             serviceProviderContactDetails={state.contactServiceDetails}
                             retryRequest={retryRequest}
                             onClose={onClose}
diff --git a/src/components/content/order/orderStatus/OrderEndPointDetails.tsx b/src/components/content/order/orderStatus/OrderEndPointDetails.tsx
@@ -0,0 +1,65 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Skeleton } from 'antd';
+import React from 'react';
+import submitResultStyles from '../../../../styles/submit-result.module.css';
+import { serviceHostingType, ServiceOrderStatusUpdate } from '../../../../xpanse-api/generated';
+import { convertMapToDetailsList } from '../../../utils/convertMapToDetailsList.tsx';
+import FallbackSkeleton from '../../common/lazy/FallBackSkeleton.tsx';
+import { useServiceDetailsByServiceIdQuery } from '../../common/queries/useServiceDetailsByServiceIdQuery.ts';
+import { OperationType } from '../types/OperationType.ts';
+
+export function OrderEndPointDetails({
+    serviceOrderStatus,
+    serviceId,
+    selectedServiceHostingType,
+    operationType,
+}: {
+    serviceOrderStatus: ServiceOrderStatusUpdate;
+    serviceId: string;
+    selectedServiceHostingType: serviceHostingType;
+    operationType: OperationType;
+}): React.JSX.Element {
+    const endPointMap = new Map<string, string>();
+    const deployServiceDetailsQuery = useServiceDetailsByServiceIdQuery(
+        serviceId,
+        selectedServiceHostingType,
+        serviceOrderStatus.taskStatus
+    );
+    if (
+        deployServiceDetailsQuery.isPending ||
+        deployServiceDetailsQuery.isFetching ||
+        deployServiceDetailsQuery.isRefetching
+    ) {
+        return <Skeleton />;
+    }
+    if (deployServiceDetailsQuery.data) {
+        if (deployServiceDetailsQuery.data.deployedServiceProperties) {
+            for (const key in deployServiceDetailsQuery.data.deployedServiceProperties) {
+                endPointMap.set(key, deployServiceDetailsQuery.data.deployedServiceProperties[key]);
+            }
+        }
+        if (endPointMap.size > 0) {
+            return (
+                <>
+                    <span>
+                        {operationType === OperationType.Deploy ? 'Deployment Successful' : 'Modification Successful'}
+                    </span>
+                    <div className={submitResultStyles.resultContainer}>
+                        {convertMapToDetailsList(endPointMap, 'Endpoint Information')}
+                    </div>
+                </>
+            );
+        } else {
+            return (
+                <span>
+                    {operationType === OperationType.Deploy ? 'Deployment Successful' : 'Modification Successful'}
+                </span>
+            );
+        }
+    }
+    return <FallbackSkeleton />;
+}
diff --git a/src/components/content/order/orderStatus/OrderProcessingStatus.tsx b/src/components/content/order/orderStatus/OrderProcessingStatus.tsx
@@ -0,0 +1,92 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import React from 'react';
+import { serviceHostingType, ServiceOrderStatusUpdate } from '../../../../xpanse-api/generated';
+import { OperationType } from '../types/OperationType';
+import { OrderEndPointDetails } from './OrderEndPointDetails.tsx';
+
+export const OrderProcessingStatus = ({
+    operationType,
+    serviceOrderStatus,
+    serviceId,
+    selectedServiceHostingType,
+}: {
+    operationType: OperationType;
+    serviceOrderStatus: ServiceOrderStatusUpdate;
+    serviceId: string;
+    selectedServiceHostingType: serviceHostingType;
+}): React.JSX.Element => {
+    const errorMsg: string = 'Please contact service vendor for error details.';
+    if (operationType === OperationType.Deploy) {
+        if (serviceOrderStatus.taskStatus === 'successful') {
+            return (
+                <OrderEndPointDetails
+                    serviceOrderStatus={serviceOrderStatus}
+                    serviceId={serviceId}
+                    selectedServiceHostingType={selectedServiceHostingType}
+                    operationType={operationType}
+                />
+            );
+        } else if (serviceOrderStatus.taskStatus === 'failed') {
+            return (
+                <div>
+                    <span>{serviceOrderStatus.error?.errorType.toString()}</span>
+                    <div>
+                        {selectedServiceHostingType === serviceHostingType.SELF
+                            ? serviceOrderStatus.error?.details.join()
+                            : errorMsg}
+                    </div>
+                </div>
+            );
+        }
+    }
+
+    if (operationType === OperationType.Modify) {
+        if (serviceOrderStatus.taskStatus === 'successful') {
+            return (
+                <OrderEndPointDetails
+                    serviceOrderStatus={serviceOrderStatus}
+                    serviceId={serviceId}
+                    selectedServiceHostingType={selectedServiceHostingType}
+                    operationType={operationType}
+                />
+            );
+        } else if (serviceOrderStatus.taskStatus === 'failed') {
+            return (
+                <div>
+                    <span>{'Modification Failed.'}</span>
+                    <div>
+                        {selectedServiceHostingType === serviceHostingType.SELF
+                            ? serviceOrderStatus.error?.details.join()
+                            : errorMsg}
+                    </div>
+                </div>
+            );
+        }
+    }
+
+    if (operationType === OperationType.Destroy) {
+        if (serviceOrderStatus.taskStatus === 'successful') {
+            return (
+                <div>
+                    <span>{'Destroyed Successfully'}</span>
+                </div>
+            );
+        } else if (serviceOrderStatus.taskStatus === 'failed') {
+            return (
+                <div>
+                    <span>{'Destroyed Failed.'}</span>
+                    <div>
+                        {selectedServiceHostingType === serviceHostingType.SELF
+                            ? serviceOrderStatus.error?.details.join()
+                            : errorMsg}
+                    </div>
+                </div>
+            );
+        }
+    }
+    return <></>;
+};
diff --git a/src/components/content/order/orderStatus/OrderSubmitStatusAlert.tsx b/src/components/content/order/orderStatus/OrderSubmitStatusAlert.tsx
@@ -7,7 +7,6 @@ import { UseMutationResult, UseQueryResult } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { useStopwatch } from 'react-timer-hook';
 import {
-    DeployedServiceDetails,
     DeployRequest,
     ErrorResponse,
     serviceHostingType,
@@ -19,28 +18,26 @@ import {
 import { convertStringArrayToUnorderedList } from '../../../utils/generateUnorderedList';
 import { isHandleKnownErrorResponse } from '../../common/error/isHandleKnownErrorResponse.ts';
 import { OperationType } from '../types/OperationType';
+import { OrderProcessingStatus } from './OrderProcessingStatus.tsx';
 import { OrderSubmitResult } from './OrderSubmitResult';
-import { ProcessingStatus } from './ProcessingStatus';
 
 function OrderSubmitStatusAlert({
-    uuid,
+    serviceId,
     serviceHostType,
     submitDeploymentRequest,
     redeployFailedDeploymentQuery,
     getSubmitLatestServiceOrderStatusQuery,
-    deployedServiceDetails,
     serviceProviderContactDetails,
     retryRequest,
     onClose,
 }: {
-    uuid: string;
+    serviceId: string;
     serviceHostType: serviceHostingType;
     submitDeploymentRequest:
         | UseMutationResult<ServiceOrder, Error, DeployRequest>
         | UseMutationResult<ServiceOrder, Error, string>;
     redeployFailedDeploymentQuery: UseMutationResult<ServiceOrder, Error, string>;
     getSubmitLatestServiceOrderStatusQuery: UseQueryResult<ServiceOrderStatusUpdate>;
-    deployedServiceDetails: DeployedServiceDetails | undefined;
     serviceProviderContactDetails: ServiceProviderContactDetails | undefined;
     retryRequest: () => void;
     onClose: () => void;
@@ -76,7 +73,14 @@ function OrderSubmitStatusAlert({
                     taskStatus.SUCCESSFUL.toString() ||
                     getSubmitLatestServiceOrderStatusQuery.data.taskStatus.toString() === taskStatus.FAILED.toString())
             ) {
-                return <ProcessingStatus response={deployedServiceDetails} operationType={OperationType.Deploy} />;
+                return (
+                    <OrderProcessingStatus
+                        operationType={OperationType.Deploy}
+                        serviceOrderStatus={getSubmitLatestServiceOrderStatusQuery.data}
+                        serviceId={serviceId}
+                        selectedServiceHostingType={serviceHostType}
+                    />
+                );
             } else if (getSubmitLatestServiceOrderStatusQuery.isError) {
                 if (serviceHostType === serviceHostingType.SERVICE_VENDOR) {
                     return 'Deployment status polling failed. Please visit MyServices page to check the status of the request and contact service vendor for error details.';
@@ -91,11 +95,20 @@ function OrderSubmitStatusAlert({
             }
         }
     }, [
+        submitDeploymentRequest.isPending,
+        submitDeploymentRequest.isError,
+        submitDeploymentRequest.isSuccess,
+        submitDeploymentRequest.error,
+        redeployFailedDeploymentQuery.isPending,
+        redeployFailedDeploymentQuery.isError,
+        redeployFailedDeploymentQuery.isSuccess,
+        redeployFailedDeploymentQuery.error,
+        getSubmitLatestServiceOrderStatusQuery.isSuccess,
+        getSubmitLatestServiceOrderStatusQuery.data,
+        getSubmitLatestServiceOrderStatusQuery.isError,
+        getSubmitLatestServiceOrderStatusQuery.isPending,
+        serviceId,
         serviceHostType,
-        deployedServiceDetails,
-        submitDeploymentRequest,
-        redeployFailedDeploymentQuery,
-        getSubmitLatestServiceOrderStatusQuery,
     ]);
 
     const alertType = useMemo(() => {
@@ -156,7 +169,7 @@ function OrderSubmitStatusAlert({
             ) {
                 return submitDeploymentRequest.error.body.serviceId as string;
             } else {
-                return uuid;
+                return serviceId;
             }
         }
     };
diff --git a/src/components/content/order/orderStatus/ProcessingStatus.tsx b/src/components/content/order/orderStatus/ProcessingStatus.tsx
@@ -18,7 +18,7 @@ export const ProcessingStatus = ({
 }): React.JSX.Element => {
     const errorMsg: string = 'Please contact service vendor for error details.';
     const endPointMap = new Map<string, string>();
-    if (operationType === (OperationType.Deploy as OperationType)) {
+    if (operationType === OperationType.Deploy) {
         if (response?.serviceDeploymentState === serviceDeploymentState.DEPLOYMENT_SUCCESSFUL) {
             if (response.deployedServiceProperties) {
                 for (const key in response.deployedServiceProperties) {
@@ -49,7 +49,7 @@ export const ProcessingStatus = ({
         }
     }
 
-    if (operationType === (OperationType.Modify as OperationType)) {
+    if (operationType === OperationType.Modify) {
         if (response?.serviceDeploymentState === serviceDeploymentState.MODIFICATION_SUCCESSFUL) {
             if (response.deployedServiceProperties) {
                 for (const key in response.deployedServiceProperties) {
@@ -80,7 +80,7 @@ export const ProcessingStatus = ({
         }
     }
 
-    if (operationType === (OperationType.Destroy as OperationType)) {
+    if (operationType === OperationType.Destroy) {
         if (response?.serviceDeploymentState === serviceDeploymentState.DESTROY_SUCCESSFUL) {
             return (
                 <div>
diff --git a/src/components/content/order/retryDeployment/RetryServiceSubmit.tsx b/src/components/content/order/retryDeployment/RetryServiceSubmit.tsx
@@ -13,7 +13,6 @@ import {
     ServiceOrderStatusUpdate,
     ServiceProviderContactDetails,
 } from '../../../../xpanse-api/generated';
-import { useServiceDetailsByServiceIdQuery } from '../../common/queries/useServiceDetailsByServiceIdQuery.ts';
 import OrderSubmitStatusAlert from '../orderStatus/OrderSubmitStatusAlert.tsx';
 
 export const RetryServiceSubmit = ({
@@ -35,20 +34,14 @@ export const RetryServiceSubmit = ({
     retryRequest: () => void;
     onClose: () => void;
 }): React.JSX.Element => {
-    const getServiceDetailsQuery = useServiceDetailsByServiceIdQuery(
-        currentSelectedService.serviceId,
-        currentSelectedService.serviceHostingType,
-        getSubmitLatestServiceOrderStatusQuery.data?.taskStatus
-    );
     return (
         <>
             <OrderSubmitStatusAlert
-                uuid={currentSelectedService.serviceId}
+                serviceId={currentSelectedService.serviceId}
                 serviceHostType={currentSelectedService.serviceHostingType as serviceHostingType}
                 submitDeploymentRequest={submitDeploymentRequest}
                 redeployFailedDeploymentQuery={redeployFailedDeploymentQuery}
                 getSubmitLatestServiceOrderStatusQuery={getSubmitLatestServiceOrderStatusQuery}
-                deployedServiceDetails={getServiceDetailsQuery.data}
                 serviceProviderContactDetails={serviceProviderContactDetails}
                 retryRequest={retryRequest}
                 onClose={onClose}
diff --git a/src/components/content/order/retryDeployment/useRedeployFailedDeploymentQuery.ts b/src/components/content/order/retryDeployment/useRedeployFailedDeploymentQuery.ts
diff --git a/src/components/content/order/types/OperationType.ts b/src/components/content/order/types/OperationType.ts

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export const ProcessingStatus = ({`
`18`	`18`	`}): React.JSX.Element => {`
`19`	`19`	`const errorMsg: string = 'Please contact service vendor for error details.';`
`20`	`20`	`const endPointMap = new Map<string, string>();`
`21`		`- if (operationType === (OperationType.Deploy as OperationType)) {`
	`21`	`+ if (operationType === OperationType.Deploy) {`
`22`	`22`	`if (response?.serviceDeploymentState === serviceDeploymentState.DEPLOYMENT_SUCCESSFUL) {`
`23`	`23`	`if (response.deployedServiceProperties) {`
`24`	`24`	`for (const key in response.deployedServiceProperties) {`
`@@ -49,7 +49,7 @@ export const ProcessingStatus = ({`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
`52`		`- if (operationType === (OperationType.Modify as OperationType)) {`
	`52`	`+ if (operationType === OperationType.Modify) {`
`53`	`53`	`if (response?.serviceDeploymentState === serviceDeploymentState.MODIFICATION_SUCCESSFUL) {`
`54`	`54`	`if (response.deployedServiceProperties) {`
`55`	`55`	`for (const key in response.deployedServiceProperties) {`
`@@ -80,7 +80,7 @@ export const ProcessingStatus = ({`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`
`83`		`- if (operationType === (OperationType.Destroy as OperationType)) {`
	`83`	`+ if (operationType === OperationType.Destroy) {`
`84`	`84`	`if (response?.serviceDeploymentState === serviceDeploymentState.DESTROY_SUCCESSFUL) {`
`85`	`85`	`return (`
`86`	`86`	`<div>`