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 5e8f03e commit 21b7258
Show file tree
Hide file tree
Showing 8 changed files with 411 additions and 6 deletions.
77 changes: 77 additions & 0 deletions src/components/content/deployedServices/myServices/MyServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ import { useServiceDetailsPollingQuery } from '../../order/orderStatus/useServic
import { PurgeServiceStatusAlert } from '../../order/purge/PurgeServiceStatusAlert';
import { usePurgeRequestStatusQuery } from '../../order/purge/usePurgeRequestStatusQuery';
import { usePurgeRequestSubmitQuery } from '../../order/purge/usePurgeRequestSubmitQuery';
import RetryDeployServiceStatusAlert from '../../order/retryDeployment/RetryDeployServiceStatusAlert';
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';
Expand Down Expand Up @@ -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,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: (
Expand Down Expand Up @@ -636,6 +677,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 +748,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 +998,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 +1338,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
54 changes: 54 additions & 0 deletions src/components/content/order/common/ScaleOrModifySubmitResult.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* 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>
);
};
4 changes: 2 additions & 2 deletions src/components/content/order/common/ScaleOrModifySubmitStatusAlert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -145,7 +145,7 @@ function ScaleOrModifySubmitStatusAlert({
}

return (
<OrderSubmitResult
<ScaleOrModifySubmitResult
msg={msg}
uuid={currentSelectedService.serviceId}
type={alertType}
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 21b7258

Please sign in to comment.