Skip to content

Commit

Permalink
add modify for myservices.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alice1319
Alice1319 committed Apr 17, 2024
1 parent cb4f7fa commit 2716910
Show file tree
Hide file tree
Showing 12 changed files with 936 additions and 17 deletions.
146 changes: 143 additions & 3 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,8 @@ 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 './modify/Modify';
import { Scale } from './modify/Scale';

function MyServices(): React.JSX.Element {
const [urlParams] = useSearchParams();
Expand All @@ -73,6 +77,8 @@ function MyServices(): React.JSX.Element {
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 +178,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 +247,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 +268,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 +279,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 +317,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 +432,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 +455,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 @@ -662,6 +738,24 @@ function MyServices(): React.JSX.Element {
setIsMigrateModalOpen(true);
}

function modify(record: DeployedService): void {
setActiveRecord(
record.serviceHostingType === DeployedService.serviceHostingType.SELF
? (record as DeployedServiceDetails)
: (record as VendorHostedDeployedServiceDetails)
);
setIsModifyModalOpen(true);
}

function scale(record: DeployedService): void {
setActiveRecord(
record.serviceHostingType === DeployedService.serviceHostingType.SELF
? (record as DeployedServiceDetails)
: (record as VendorHostedDeployedServiceDetails)
);
setIsScaleModalOpen(true);
}

function onMonitor(record: DeployedService): void {
navigate('/monitor', {
state: record,
Expand Down Expand Up @@ -821,6 +915,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 +999,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
Loading

0 comments on commit 2716910

Please sign in to comment.