Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add modify ui. #721

Merged
merged 1 commit into from
Apr 24, 2024
Merged

add modify ui. #721

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Alice1319 marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Loading