Add retry option to deployed services

src/components/content/deployedServices/myServices/MyServices.tsx

@@ -45,10 +45,12 @@ import { useDestroyRequestSubmitQuery } from '../../order/destroy/useDestroyRequ
 import { Locks } from '../../order/locks/Locks';
 import { Migrate } from '../../order/migrate/Migrate';
 import { Modify } from '../../order/modify/Modify';
+import OrderSubmitStatusAlert from '../../order/orderStatus/OrderSubmitStatusAlert';
 import { useServiceDetailsPollingQuery } from '../../order/orderStatus/useServiceDetailsPollingQuery';
 import { PurgeServiceStatusAlert } from '../../order/purge/PurgeServiceStatusAlert';
 import { usePurgeRequestStatusQuery } from '../../order/purge/usePurgeRequestStatusQuery';
 import { usePurgeRequestSubmitQuery } from '../../order/purge/usePurgeRequestSubmitQuery';
+import useRedeployFailedDeploymentQuery from '../../order/retryDeployment/useRedeployFailedDeploymentQuery';
 import { Scale } from '../../order/scale/Scale';
 import RestartServiceStatusAlert from '../../order/serviceState/restart/RestartServiceStatusAlert';
 import { useServiceStateRestartQuery } from '../../order/serviceState/restart/useServiceStateRestartQuery';
@@ -90,6 +92,7 @@ function MyServices(): React.JSX.Element {
     const [isStopRequestSubmitted, setIsStopRequestSubmitted] = useState<boolean>(false);
     const [isRestartRequestSubmitted, setIsRestartRequestSubmitted] = useState<boolean>(false);
     const [isDestroyRequestSubmitted, setIsDestroyRequestSubmitted] = useState<boolean>(false);
+    const [isRetryDeployRequestSubmitted, setIsRetryDeployRequestSubmitted] = useState<boolean>(false);
     const [isPurgeRequestSubmitted, setIsPurgeRequestSubmitted] = useState<boolean>(false);
     const [isMyServiceDetailsModalOpen, setIsMyServiceDetailsModalOpen] = useState(false);
     const [isMyServiceHistoryModalOpen, setIsMyServiceHistoryModalOpen] = useState(false);
@@ -99,6 +102,7 @@ function MyServices(): React.JSX.Element {
     const [isLocksModalOpen, setIsLocksModalOpen] = useState<boolean>(false);
     const serviceDestroyQuery = useDestroyRequestSubmitQuery();
     const servicePurgeQuery = usePurgeRequestSubmitQuery();
+    const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery();
     const serviceStateStartQuery = useServiceStateStartQuery(refreshData);
     const serviceStateStopQuery = useServiceStateStopQuery(refreshData);
     const serviceStateRestartQuery = useServiceStateRestartQuery(refreshData);
@@ -116,6 +120,16 @@ function MyServices(): React.JSX.Element {
         ]
     );
 
+    const getRetryDeployServiceDetailsByIdQuery = useServiceDetailsPollingQuery(
+        activeRecord?.serviceId,
+        redeployFailedDeploymentQuery.isSuccess,
+        activeRecord?.serviceHostingType ?? DeployedService.serviceHostingType.SELF,
+        [
+            DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL,
+            DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_FAILED,
+        ]
+    );
+
     const getStartServiceDetailsQuery = useServiceDetailsByServiceStatePollingQuery(
         activeRecord?.serviceId,
         serviceStateStartQuery.isSuccess,
@@ -144,6 +158,9 @@ function MyServices(): React.JSX.Element {
         getStartServiceDetailsQuery.data?.serviceState,
         getStopServiceDetailsQuery.data?.serviceState,
         getRestartServiceDetailsQuery.data?.serviceState,
+        getRetryDeployServiceDetailsByIdQuery.isError,
+        redeployFailedDeploymentQuery.error,
+        getRetryDeployServiceDetailsByIdQuery.data?.serviceDeploymentState,
     ]);
 
     const getPurgeServiceDetailsQuery = usePurgeRequestStatusQuery(
@@ -518,6 +535,33 @@ function MyServices(): React.JSX.Element {
                         </>
                     ),
             },
+            {
+                key: 'retryDeployment',
+                label:
+                    record.serviceDeploymentState.toString() ===
+                    DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ? (
+                        <Popconfirm
+                            title='Retry Deployment the service'
+                            description='Are you sure to retry deployment the service?'
+                            cancelText='Yes'
+                            okText='No'
+                            onCancel={() => {
+                                retryDeployment(record);
+                            }}
+                        >
+                            <Button
+                                className={myServicesStyles.buttonAsLink}
+                                icon={<PlayCircleOutlined />}
+                                disabled={isDisableRetryDeploymentBtn(record)}
+                                type={'link'}
+                            >
+                                retry deployment
+                            </Button>
+                        </Popconfirm>
+                    ) : (
+                        <></>
+                    ),
+            },
             {
                 key: 'start',
                 label: (
@@ -636,6 +680,13 @@ function MyServices(): React.JSX.Element {
         return true;
     };
 
+    const isDisableRetryDeploymentBtn = (record: DeployedService) => {
+        if (record.serviceDeploymentState === DeployedService.serviceDeploymentState.DEPLOYING) {
+            return true;
+        }
+        return false;
+    };
+
     const isDisableStartBtn = (record: DeployedService) => {
         if (
             record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL &&
@@ -700,6 +751,12 @@ function MyServices(): React.JSX.Element {
         }
     };
 
+    const closeRetryDeployResultAlert = () => {
+        setActiveRecord(undefined);
+        refreshData();
+        setIsRetryDeployRequestSubmitted(false);
+    };
+
     const closeStartResultAlert = (isClose: boolean) => {
         if (isClose) {
             setActiveRecord(undefined);
@@ -942,6 +999,17 @@ function MyServices(): React.JSX.Element {
         record.serviceDeploymentState = DeployedService.serviceDeploymentState.DESTROYING;
     }
 
+    function retryDeployment(record: DeployedService): void {
+        setIsRetryDeployRequestSubmitted(true);
+        setActiveRecord(
+            record.serviceHostingType === DeployedService.serviceHostingType.SELF
+                ? (record as DeployedServiceDetails)
+                : (record as VendorHostedDeployedServiceDetails)
+        );
+        redeployFailedDeploymentQuery.mutate(record.serviceId);
+        record.serviceDeploymentState = DeployedService.serviceDeploymentState.DEPLOYING;
+    }
+
     function start(record: DeployedService): void {
         setIsStartRequestSubmitted(true);
         setActiveRecord(
@@ -1259,6 +1327,16 @@ function MyServices(): React.JSX.Element {
         return undefined;
     }
 
+    const retryRequest = () => {
+        if (activeRecord && activeRecord.serviceId.length > 0) {
+            redeployFailedDeploymentQuery.mutate(activeRecord.serviceId);
+        }
+    };
+
+    if (redeployFailedDeploymentQuery.isPending) {
+        void getServiceDetailsByIdQuery.refetch();
+    }
+
     return (
         <div className={tableStyles.genericTableContainer}>
             {isDestroyRequestSubmitted && activeRecord ? (
@@ -1271,6 +1349,20 @@ function MyServices(): React.JSX.Element {
                     closeDestroyResultAlert={closeDestroyResultAlert}
                 />
             ) : null}
+            {isRetryDeployRequestSubmitted && activeRecord ? (
+                <OrderSubmitStatusAlert
+                    key={activeRecord.serviceId}
+                    uuid={activeRecord.serviceId}
+                    isSubmitFailed={redeployFailedDeploymentQuery.error}
+                    isRetrySubmitIsPending={redeployFailedDeploymentQuery.isPending}
+                    isRetrySubmitFailed={redeployFailedDeploymentQuery.error}
+                    deployedServiceDetails={getRetryDeployServiceDetailsByIdQuery.data}
+                    isPollingError={getRetryDeployServiceDetailsByIdQuery.isError}
+                    serviceProviderContactDetails={getOrderableServiceDetails.data?.serviceProviderContactDetails}
+                    retryRequest={retryRequest}
+                    onClose={closeRetryDeployResultAlert}
+                />
+            ) : null}
             {isStartRequestSubmitted && activeRecord ? (
                 <StartServiceStatusAlert
                     key={activeRecord.serviceId}

src/components/content/order/common/ScaleOrModifySubmitResult.tsx

@@ -0,0 +1,55 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Alert } from 'antd';
+import React from 'react';
+import { StopwatchResult } from 'react-timer-hook';
+import submitAlertStyles from '../../../../styles/submit-alert.module.css';
+import { ServiceProviderContactDetails } from '../../../../xpanse-api/generated';
+import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType';
+import { ContactDetailsText } from '../../common/ocl/ContactDetailsText';
+import DeploymentTimerNew from '../orderStatus/DeploymentTimer';
+import OrderSubmitResultDetails from '../orderStatus/OrderSubmitResultDetails';
+
+export const ScaleOrModifySubmitResult = ({
+    msg,
+    uuid,
+    type,
+    stopWatch,
+    contactServiceDetails,
+}: {
+    msg: string | React.JSX.Element;
+    uuid: string;
+    type: 'success' | 'error';
+    stopWatch: StopwatchResult;
+    contactServiceDetails: ServiceProviderContactDetails | undefined;
+}): React.JSX.Element => {
+    return (
+        <div className={submitAlertStyles.submitAlertTip}>
+            {' '}
+            <Alert
+                message={`Processing Status`}
+                description={<OrderSubmitResultDetails msg={msg} uuid={uuid} />}
+                showIcon
+                closable={true}
+                type={type}
+                action={
+                    <>
+                        {contactServiceDetails !== undefined ? (
+                            <ContactDetailsText
+                                serviceProviderContactDetails={contactServiceDetails}
+                                showFor={ContactDetailsShowType.Order}
+                            />
+                        ) : (
+                            <></>
+                        )}
+
+                        <DeploymentTimerNew stopWatch={stopWatch} />
+                    </>
+                }
+            />{' '}
+        </div>
+    );
+};

src/components/content/order/common/ScaleOrModifySubmitStatusAlert.tsx

@@ -14,10 +14,10 @@ import {
     VendorHostedDeployedServiceDetails,
 } from '../../../../xpanse-api/generated';
 import { convertStringArrayToUnorderedList } from '../../../utils/generateUnorderedList';
-import { OrderSubmitResult } from '../orderStatus/OrderSubmitResult';
 import { ProcessingStatus } from '../orderStatus/ProcessingStatus';
 import { useServiceDetailsPollingQuery } from '../orderStatus/useServiceDetailsPollingQuery';
 import { OperationType } from '../types/OperationType';
+import { ScaleOrModifySubmitResult } from './ScaleOrModifySubmitResult';
 
 function ScaleOrModifySubmitStatusAlert({
     isSubmitFailed,
@@ -145,7 +145,7 @@ function ScaleOrModifySubmitStatusAlert({
     }
 
     return (
-        <OrderSubmitResult
+        <ScaleOrModifySubmitResult
             msg={msg}
             uuid={currentSelectedService.serviceId}
             type={alertType}

src/components/content/order/create/OrderSubmit.tsx

@@ -12,13 +12,19 @@ import appStyles from '../../../../styles/app.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import tableStyles from '../../../../styles/table.module.css';
 import { DeployRequest, DeployedService, DeployedServiceDetails } from '../../../../xpanse-api/generated';
-import { CUSTOMER_SERVICE_NAME_FIELD, createServicePageRoute, homePageRoute } from '../../../utils/constants';
+import {
+    CUSTOMER_SERVICE_NAME_FIELD,
+    createServicePageRoute,
+    homePageRoute,
+    servicesSubPageRoute,
+} from '../../../utils/constants';
 import { ApiDoc } from '../../common/doc/ApiDoc';
 import { EulaInfo } from '../common/EulaInfo';
 import { OrderItem } from '../common/utils/OrderItem';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
 import OrderSubmitStatusAlert from '../orderStatus/OrderSubmitStatusAlert';
 import { useServiceDetailsPollingQuery } from '../orderStatus/useServiceDetailsPollingQuery';
+import useRedeployFailedDeploymentQuery from '../retryDeployment/useRedeployFailedDeploymentQuery';
 import { useOrderFormStore } from '../store/OrderFormStore';
 import NavigateOrderSubmission from './NavigateOrderSubmission';
 import { useDeployRequestSubmitQuery } from './useDeployRequestSubmitQuery';
@@ -30,6 +36,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 getServiceDetailsByIdQuery = useServiceDetailsPollingQuery(
         submitDeploymentRequest.data,
         submitDeploymentRequest.isSuccess,
@@ -86,6 +93,20 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
         .concat('&latestVersion=', state.version)
         .concat('&billingMode=', state.billingMode);
 
+    const retryRequest = () => {
+        if (submitDeploymentRequest.isSuccess && submitDeploymentRequest.data.length > 0) {
+            redeployFailedDeploymentQuery.mutate(submitDeploymentRequest.data);
+        }
+    };
+
+    if (redeployFailedDeploymentQuery.isPending) {
+        void getServiceDetailsByIdQuery.refetch();
+    }
+
+    const onClose = () => {
+        navigate(servicesSubPageRoute.concat(state.category));
+    };
+
     return (
         <>
             <div>
@@ -108,9 +129,13 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                             key={uniqueRequestId.current}
                             uuid={submitDeploymentRequest.data}
                             isSubmitFailed={submitDeploymentRequest.error}
+                            isRetrySubmitIsPending={redeployFailedDeploymentQuery.isPending}
+                            isRetrySubmitFailed={redeployFailedDeploymentQuery.error}
                             deployedServiceDetails={getServiceDetailsByIdQuery.data}
                             isPollingError={getServiceDetailsByIdQuery.isError}
                             serviceProviderContactDetails={state.contactServiceDetails}
+                            retryRequest={retryRequest}
+                            onClose={onClose}
                         />
                     ) : null}
                     <Form
@@ -197,7 +222,9 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                                         disabled={
                                             submitDeploymentRequest.isPending ||
                                             getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
-                                                DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()
+                                                DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString() ||
+                                            getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
+                                                DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_FAILED.toString()
                                         }
                                     >
                                         Deploy