Skip to content

Commit

Permalink
Merge pull request #721 from Alice1319/feature/add_modify_for_myservices
Browse files Browse the repository at this point in the history 
add modify ui.
  • Loading branch information
@swaroopar
swaroopar committed Apr 24, 2024
2 parents 283f7dd + 3dfaf10 commit de19c26
Show file tree
Hide file tree
Showing 19 changed files with 1,022 additions and 25 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/**",
Expand Down
18 changes: 18 additions & 0 deletions src/components/content/deployedServices/common/DeployedServicesStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function DeployedServicesStatus(
): React.JSX.Element {
switch (serviceDeploymentState) {
case DeployedService.serviceDeploymentState.DEPLOYING:
case DeployedService.serviceDeploymentState.MODIFYING:
case DeployedService.serviceDeploymentState.DESTROYING:
return (
<Tag
Expand All @@ -36,6 +37,12 @@ export function DeployedServicesStatus(
{serviceDeploymentState.valueOf()}
</Tag>
);
case DeployedService.serviceDeploymentState.MODIFICATION_FAILED:
return (
<Tag bordered={false} icon={<CloseCircleOutlined />} color='error' className={'my-service-status-size'}>
{serviceDeploymentState.valueOf()}
</Tag>
);
case DeployedService.serviceDeploymentState.DESTROY_FAILED:
return (
<Tag
Expand Down Expand Up @@ -64,6 +71,17 @@ export function DeployedServicesStatus(
{serviceDeploymentState.valueOf()}
</Tag>
);
case DeployedService.serviceDeploymentState.MODIFICATION_SUCCESSFUL:
return (
<Tag
bordered={false}
icon={<CheckCircleOutlined />}
color='success'
className={'my-service-status-size'}
>
{serviceDeploymentState.valueOf()}
</Tag>
);
default:
return (
<Tag
Expand Down
160 changes: 156 additions & 4 deletions src/components/content/deployedServices/myServices/MyServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ import {
CloseCircleOutlined,
CopyOutlined,
DeleteOutlined,
EditOutlined,
FundOutlined,
InfoCircleOutlined,
PlayCircleOutlined,
PoweroffOutlined,
RiseOutlined,
SyncOutlined,
} from '@ant-design/icons';
import '../../../../styles/my_services.css';
Expand Down Expand Up @@ -51,6 +53,9 @@ import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType'
import { ContactDetailsText } from '../../common/ocl/ContactDetailsText';
import { useServiceDetailsPollingQuery } from '../../order/orderStatus/useServiceDetailsPollingQuery';
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();
Expand All @@ -69,10 +74,13 @@ 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);
const [isMigrateModalOpen, setIsMigrateModalOpen] = useState<boolean>(false);
const [isModifyModalOpen, setIsModifyModalOpen] = useState<boolean>(false);
const [isScaleModalOpen, setIsScaleModalOpen] = useState<boolean>(false);
const serviceDestroyQuery = useDestroyRequestSubmitQuery();
const servicePurgeQuery = usePurgeRequestSubmitQuery();
const serviceStateStartQuery = useServiceStateStartQuery(refreshData);
Expand Down Expand Up @@ -172,6 +180,62 @@ function MyServices(): React.JSX.Element {
</Button>
),
},
{
key: 'scale',
label: (
<Button
onClick={() => {
scale(record);
}}
className={'button-as-link'}
icon={<RiseOutlined />}
disabled={
activeRecord !== undefined ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.MODIFYING.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DESTROY_SUCCESSFUL.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYING.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DESTROYING.toString()
}
type={'link'}
>
scale
</Button>
),
},
{
key: 'modify parameters',
label: (
<Button
onClick={() => {
modify(record);
}}
className={'button-as-link'}
icon={<EditOutlined />}
disabled={
activeRecord !== undefined ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.MODIFYING.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DESTROY_SUCCESSFUL.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYING.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DESTROYING.toString()
}
type={'link'}
>
modify parameters
</Button>
),
},
{
key: 'migrate',
label: (
Expand All @@ -185,6 +249,8 @@ function MyServices(): React.JSX.Element {
activeRecord !== undefined ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DESTROY_SUCCESSFUL.toString() ||
record.serviceDeploymentState.toString() ===
Expand All @@ -204,6 +270,8 @@ function MyServices(): React.JSX.Element {
DeployedService.serviceDeploymentState.DESTROY_SUCCESSFUL.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.ROLLBACK_FAILED.toString()
? 'purge'
Expand All @@ -213,6 +281,8 @@ function MyServices(): React.JSX.Element {
DeployedService.serviceDeploymentState.DESTROY_SUCCESSFUL.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.DEPLOYMENT_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.MODIFICATION_FAILED.toString() ||
record.serviceDeploymentState.toString() ===
DeployedService.serviceDeploymentState.ROLLBACK_FAILED.toString() ? (
<Popconfirm
Expand Down Expand Up @@ -249,7 +319,9 @@ function MyServices(): React.JSX.Element {
(record.serviceDeploymentState.toString() !==
DeployedService.serviceDeploymentState.DESTROY_FAILED.toString() &&
record.serviceDeploymentState.toString() !==
DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()) ||
DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString() &&
record.serviceDeploymentState.toString() !==
DeployedService.serviceDeploymentState.MODIFICATION_SUCCESSFUL.toString()) ||
activeRecord !== undefined
}
className={'button-as-link'}
Expand Down Expand Up @@ -362,7 +434,10 @@ function MyServices(): React.JSX.Element {
};

const isDisableStartBtn = (record: DeployedService) => {
if (record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL) {
if (
record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL &&
record.serviceDeploymentState !== DeployedService.serviceDeploymentState.MODIFICATION_SUCCESSFUL
) {
if (record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DESTROY_FAILED) {
return true;
}
Expand All @@ -382,7 +457,10 @@ function MyServices(): React.JSX.Element {
};

const isDisabledStopOrRestartBtn = (record: DeployedService) => {
if (record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL) {
if (
record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL &&
record.serviceDeploymentState !== DeployedService.serviceDeploymentState.MODIFICATION_SUCCESSFUL
) {
if (record.serviceDeploymentState !== DeployedService.serviceDeploymentState.DESTROY_FAILED) {
return true;
}
Expand Down Expand Up @@ -554,7 +632,9 @@ function MyServices(): React.JSX.Element {
}}
disabled={
record.serviceDeploymentState.toString() !==
DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()
DeployedService.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString() &&
record.serviceDeploymentState.toString() !==
DeployedService.serviceDeploymentState.MODIFICATION_SUCCESSFUL.toString()
}
>
<FundOutlined />
Expand Down Expand Up @@ -662,6 +742,32 @@ function MyServices(): React.JSX.Element {
setIsMigrateModalOpen(true);
}

function modify(record: DeployedService): void {
setActiveRecord(
record.serviceHostingType === DeployedService.serviceHostingType.SELF
? (record as DeployedServiceDetails)
: (record as VendorHostedDeployedServiceDetails)
);
const existingParameters = getExistingServiceParameters(record);
for (const existingServiceParametersKey in existingParameters) {
cacheFormVariable(existingServiceParametersKey, existingParameters[existingServiceParametersKey]);
}
setIsModifyModalOpen(true);
}

function scale(record: DeployedService): void {
setActiveRecord(
record.serviceHostingType === DeployedService.serviceHostingType.SELF
? (record as DeployedServiceDetails)
: (record as VendorHostedDeployedServiceDetails)
);
const existingParameters = getExistingServiceParameters(record);
for (const existingServiceParametersKey in existingParameters) {
cacheFormVariable(existingServiceParametersKey, existingParameters[existingServiceParametersKey]);
}
setIsScaleModalOpen(true);
}

function onMonitor(record: DeployedService): void {
navigate('/monitor', {
state: record,
Expand Down Expand Up @@ -821,6 +927,20 @@ function MyServices(): React.JSX.Element {
setIsMigrateModalOpen(false);
};

const handleCancelModifyModel = () => {
setActiveRecord(undefined);
clearFormVariables();
refreshData();
setIsModifyModalOpen(false);
};

const handleCancelScaleModel = () => {
setActiveRecord(undefined);
clearFormVariables();
refreshData();
setIsScaleModalOpen(false);
};

function getServiceDeploymentStateFromQuery(): DeployedService.serviceDeploymentState | undefined {
const queryInUri = decodeURI(urlParams.get(serviceStateQuery) ?? '');
if (queryInUri.length > 0) {
Expand Down Expand Up @@ -891,6 +1011,38 @@ function MyServices(): React.JSX.Element {
</Modal>
) : null}

{activeRecord ? (
<Modal
open={isScaleModalOpen}
title={migrationTitle(activeRecord)}
closable={true}
maskClosable={false}
destroyOnClose={true}
footer={null}
onCancel={handleCancelScaleModel}
width={1400}
mask={true}
>
<Scale currentSelectedService={activeRecord} />
</Modal>
) : null}

{activeRecord ? (
<Modal
open={isModifyModalOpen}
title={migrationTitle(activeRecord)}
closable={true}
maskClosable={false}
destroyOnClose={true}
footer={null}
onCancel={handleCancelModifyModel}
width={1400}
mask={true}
>
<Modify currentSelectedService={activeRecord} />
</Modal>
) : null}

<div>
<Button
disabled={activeRecord !== undefined}
Expand Down
15 changes: 15 additions & 0 deletions src/components/content/deployedServices/myServices/query/useGetServiceTemplateDetails.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
* SPDX-License-Identifier: Apache-2.0
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { useQuery } from '@tanstack/react-query';
import { ServiceVendorService } from '../../../../../xpanse-api/generated';

export default function useGetServiceTemplateDetails(serviceTemplateId: string | undefined) {
return useQuery({
queryKey: ['getServiceTemplateDetails', serviceTemplateId],
queryFn: () => ServiceVendorService.details(serviceTemplateId ?? ''),
enabled: serviceTemplateId !== undefined && serviceTemplateId.length > 0,
});
}
Loading

0 comments on commit de19c26

Please sign in to comment.