Skip to content

Commit

Permalink
Add retry option to deployed services
Browse files Browse the repository at this point in the history
  • Loading branch information
@WangLiNaruto
WangLiNaruto committed Jun 13, 2024
1 parent 1d2e9ea commit dd304bd
Show file tree
Hide file tree
Showing 9 changed files with 678 additions and 462 deletions.
74 changes: 74 additions & 0 deletions src/components/content/deployedServices/myServices/MyServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ import { MyServiceDetails } from './MyServiceDetails';
import { MyServiceHistory } from './MyServiceHistory';
import useGetOrderableServiceDetailsQuery from './query/useGetOrderableServiceDetailsQuery';
import useListDeployedServicesDetailsQuery from './query/useListDeployedServicesDetailsQuery';
import useRedeployFailedDeploymentQuery from "../../order/retryDeployment/useRedeployFailedDeploymentQuery";
import RetryDeployServiceStatusAlert from "../../order/retryDeployment/RetryDeployServiceStatusAlert";

function MyServices(): React.JSX.Element {
const [urlParams] = useSearchParams();
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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,
Expand Down Expand Up @@ -518,6 +532,30 @@ 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: (
Expand Down Expand Up @@ -636,6 +674,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 &&
Expand Down Expand Up @@ -700,6 +745,14 @@ function MyServices(): React.JSX.Element {
}
};

const closeRetryDeployResultAlert = (isClose: boolean) => {
if (isClose) {
setActiveRecord(undefined);
refreshData();
setIsRetryDeployRequestSubmitted(false);
}
};

const closeStartResultAlert = (isClose: boolean) => {
if (isClose) {
setActiveRecord(undefined);
Expand Down Expand Up @@ -942,6 +995,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(
Expand Down Expand Up @@ -1271,6 +1335,16 @@ function MyServices(): React.JSX.Element {
closeDestroyResultAlert={closeDestroyResultAlert}
/>
) : null}
{isRetryDeployRequestSubmitted && activeRecord ? (
<RetryDeployServiceStatusAlert
key={activeRecord.serviceId}
deployedService={activeRecord}
retryDeploySubmitError={redeployFailedDeploymentQuery.error}
statusPollingError={getServiceDetailsByIdQuery.error}
deployedServiceDetails={getRetryDeployServiceDetailsByIdQuery.data}
closeRetryDeployResultAlert={closeRetryDeployResultAlert}
/>
) : null}
{isStartRequestSubmitted && activeRecord ? (
<StartServiceStatusAlert
key={activeRecord.serviceId}
Expand Down
9 changes: 8 additions & 1 deletion src/components/content/order/create/OrderSubmit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,10 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
.concat('&latestVersion=', state.version)
.concat('&billingMode=', state.billingMode);

const retryRequest = () => {
void getServiceDetailsByIdQuery.refetch();
};

return (
<>
<div>
Expand All @@ -111,6 +115,7 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
deployedServiceDetails={getServiceDetailsByIdQuery.data}
isPollingError={getServiceDetailsByIdQuery.isError}
serviceProviderContactDetails={state.contactServiceDetails}
retryRequest={retryRequest}
/>
) : null}
<Form
Expand Down Expand Up @@ -197,7 +202,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
Expand Down
60 changes: 57 additions & 3 deletions src/components/content/order/orderStatus/OrderSubmitResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Alert } from 'antd';
import { Alert, Button } from 'antd';
import React from 'react';
import { StopwatchResult } from 'react-timer-hook';
import { StopwatchResult, useStopwatch } from 'react-timer-hook';
import errorAlertStyles from '../../../../styles/error-alert.module.css';
import submitAlertStyles from '../../../../styles/submit-alert.module.css';
import { ServiceProviderContactDetails } from '../../../../xpanse-api/generated';
import { DeployedServiceDetails, ServiceProviderContactDetails } from '../../../../xpanse-api/generated';
import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType';
import { ContactDetailsText } from '../../common/ocl/ContactDetailsText';
import useRedeployFailedDeploymentQuery from '../retryDeployment/useRedeployFailedDeploymentQuery';
import DeploymentTimerNew from './DeploymentTimer';
import OrderSubmitResultDetails from './OrderSubmitResultDetails';

Expand All @@ -19,13 +21,52 @@ export const OrderSubmitResult = ({
type,
stopWatch,
contactServiceDetails,
retryRequest,
deployedServiceDetails,
}: {
msg: string | React.JSX.Element;
uuid: string;
type: 'success' | 'error';
stopWatch: StopwatchResult;
contactServiceDetails: ServiceProviderContactDetails | undefined;
retryRequest: () => void;
deployedServiceDetails: DeployedServiceDetails | undefined;
}): React.JSX.Element => {
const redeployFailedDeploymentQuery = useRedeployFailedDeploymentQuery();
stopWatch = useStopwatch({
autoStart: true,
});
const reDeploymentService = () => {
redeployFailedDeploymentQuery.mutate(uuid);
};

if (redeployFailedDeploymentQuery.isSuccess) {
retryRequest();
}
if (deployedServiceDetails) {
if (
deployedServiceDetails.serviceDeploymentState.toString() ===
DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
deployedServiceDetails.serviceDeploymentState.toString() ===
DeployedServiceDetails.serviceDeploymentState.ROLLBACK_FAILED.toString() ||
deployedServiceDetails.serviceDeploymentState.toString() ===
DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()
) {
if (stopWatch.isRunning) {
stopWatch.pause();
}
}

if (
deployedServiceDetails.serviceDeploymentState.toString() ===
DeployedServiceDetails.serviceDeploymentState.DEPLOYING.toString()
) {
if (!stopWatch.isRunning) {
stopWatch.start();
}
}
}

return (
<div className={submitAlertStyles.submitAlertTip}>
{' '}
Expand All @@ -37,6 +78,19 @@ export const OrderSubmitResult = ({
type={type}
action={
<>
{type === 'error' ? (
<Button
className={errorAlertStyles.tryAgainBtnInAlertClass}
size='small'
type='primary'
onClick={reDeploymentService}
danger={true}
>
Retry Request
</Button>
) : (
<></>
)}
{contactServiceDetails !== undefined ? (
<ContactDetailsText
serviceProviderContactDetails={contactServiceDetails}
Expand Down
4 changes: 4 additions & 0 deletions src/components/content/order/orderStatus/OrderSubmitStatusAlert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,14 @@ function OrderSubmitStatusAlert({
deployedServiceDetails,
serviceProviderContactDetails,
isPollingError,
retryRequest,
}: {
uuid: string | undefined;
isSubmitFailed: Error | null;
deployedServiceDetails: DeployedServiceDetails | undefined;
serviceProviderContactDetails: ServiceProviderContactDetails | undefined;
isPollingError: boolean;
retryRequest: () => void;
}): React.JSX.Element {
const stopWatch = useStopwatch({
autoStart: true,
Expand Down Expand Up @@ -121,6 +123,8 @@ function OrderSubmitStatusAlert({
type={alertType}
stopWatch={stopWatch}
contactServiceDetails={alertType !== 'success' ? serviceProviderContactDetails : undefined}
retryRequest={retryRequest}
deployedServiceDetails={deployedServiceDetails}
/>
);
}
Expand Down
Loading

0 comments on commit dd304bd

Please sign in to comment.