Skip to content

Commit 69cae16

Browse files
Alice1319Alice1319
committed
display service actions data.
1 parent 0545cb6 commit 69cae16

File tree

9 files changed

+286
-10
lines changed

9 files changed

+286
-10
lines changed

‎src/components/content/catalog/services/details/ServiceDetail.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { FlavorsText } from '../../../common/ocl/FlavorsText';
2929
import { RegionText } from '../../../common/ocl/RegionText.tsx';
3030
import useDeployedServicesQuery from '../../../deployedServices/myServices/query/useDeployedServiceQuery';
3131
import DeploymentManagement from '../../../deployment/DeploymentManagement';
32+
import { ServiceActionManagement } from '../../../serviceActionManage/ServiceActionManagement.tsx';
3233
import ServiceConfigManagement from '../../../serviceConfigurationManage/ServiceConfigManagement';
3334
import { ShowIcon } from './ShowIcon';
3435

@@ -151,6 +152,9 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
151152
{serviceDetails.serviceConfigurationManage ? (
152153
<ServiceConfigManagement configurationManage={serviceDetails.serviceConfigurationManage} />
153154
) : null}
155+
{serviceDetails.serviceActions && serviceDetails.serviceActions.length > 0 ? (
156+
<ServiceActionManagement serviceActions={serviceDetails.serviceActions} />
157+
) : null}
154158
</>
155159
);
156160
}

‎src/components/content/common/ocl/DisplayOclData.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import oclDisplayStyles from '../../../../styles/ocl-display.module.css';
1212
import { Ocl, serviceHostingType } from '../../../../xpanse-api/generated';
1313
import { DeployedServicesHostingType } from '../../deployedServices/common/DeployedServicesHostingType';
1414
import DeploymentManagement from '../../deployment/DeploymentManagement';
15+
import { ServiceActionManagement } from '../../serviceActionManage/ServiceActionManagement.tsx';
1516
import ServiceConfigManagement from '../../serviceConfigurationManage/ServiceConfigManagement';
1617
import { cspMap } from '../csp/CspLogo';
1718
import { AgreementText } from './AgreementText';
@@ -121,6 +122,7 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
121122
{ocl.serviceConfigurationManage ? (
122123
<ServiceConfigManagement configurationManage={ocl.serviceConfigurationManage} />
123124
) : null}
125+
{ocl.serviceActions ? <ServiceActionManagement serviceActions={ocl.serviceActions} /> : null}
124126
</div>
125127
</div>
126128
</>

‎src/components/content/serviceConfigurationManage/ServiceConfigurationParameters.tsx ‎src/components/content/common/serviceChangeParameters/ServiceChangeParameters.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@
66
import { Button, Popover, Table } from 'antd';
77
import { ColumnsType } from 'antd/es/table';
88
import React from 'react';
9-
import catalogStyles from '../../../styles/catalog.module.css';
10-
import deploymentVariablesStyles from '../../../styles/deployment-variables.module.css';
11-
import { deployResourceKind, sensitiveScope, ServiceChangeParameter } from '../../../xpanse-api/generated';
9+
import catalogStyles from '../../../../styles/catalog.module.css';
10+
import deploymentVariablesStyles from '../../../../styles/deployment-variables.module.css';
11+
import { deployResourceKind, sensitiveScope, ServiceChangeParameter } from '../../../../xpanse-api/generated';
1212

13-
function ServiceConfigurationParameters({ parameters }: { parameters: ServiceChangeParameter[] }): React.JSX.Element {
13+
function ServiceChangeParameters({
14+
parameters,
15+
tableName,
16+
}: {
17+
parameters: ServiceChangeParameter[];
18+
tableName: string;
19+
}): React.JSX.Element {
1420
const columns: ColumnsType<ServiceChangeParameter> = [
1521
{
1622
title: <div className={deploymentVariablesStyles.variablesColumns}>Name</div>,
@@ -201,13 +207,13 @@ function ServiceConfigurationParameters({ parameters }: { parameters: ServiceCha
201207
return (
202208
<>
203209
<div className={`${catalogStyles.catalogDetailsH6} ${catalogStyles.managementVariable}`}>
204-
&nbsp;Service Configuration Parameters
210+
&nbsp;{tableName}
205211
</div>
206212
<div className={deploymentVariablesStyles.variablesTableContainer}>
207-
<Table columns={columns} dataSource={parameters} rowKey={'name'} bordered pagination={false} />
213+
<Table bordered columns={columns} dataSource={parameters} rowKey={'name'} pagination={false} />
208214
</div>
209215
</>
210216
);
211217
}
212218

213-
export default ServiceConfigurationParameters;
219+
export default ServiceChangeParameters;

‎src/components/content/review/ServiceReviewsDetails.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { DeploymentText } from '../common/ocl/DeploymentText';
2020
import { FlavorsText } from '../common/ocl/FlavorsText';
2121
import { RegionText } from '../common/ocl/RegionText.tsx';
2222
import DeploymentManagement from '../deployment/DeploymentManagement';
23+
import { ServiceActionManagement } from '../serviceActionManage/ServiceActionManagement.tsx';
2324
import ServiceConfigManagement from '../serviceConfigurationManage/ServiceConfigManagement';
2425
import { ApproveOrRejectServiceTemplate } from './ApproveOrRejectServiceTemplate';
2526
import useApproveOrRejectRequest from './query/useApproveOrRejectRequest';
@@ -199,6 +200,11 @@ export const ServiceReviewsDetails = ({
199200
configurationManage={currentServiceTemplateRequestToReview.ocl.serviceConfigurationManage}
200201
/>
201202
) : null}
203+
{currentServiceTemplateRequestToReview.ocl.serviceActions ? (
204+
<ServiceActionManagement
205+
serviceActions={currentServiceTemplateRequestToReview.ocl.serviceActions}
206+
/>
207+
) : null}
202208
<>
203209
<h3 className={catalogStyles.catalogDetailsH3}>
204210
<BarsOutlined />

‎src/components/content/serviceActionManage/ServiceActionItems.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
* SPDX-FileCopyrightText: Huawei Inc.
4+
*/
5+
6+
import React from 'react';
7+
import { ServiceAction } from '../../../xpanse-api/generated';
8+
import ServiceChangeParameters from '../common/serviceChangeParameters/ServiceChangeParameters.tsx';
9+
import ServiceActionScripts from './ServiceActionScripts.tsx';
10+
11+
function ServiceActionItems({ serviceAction }: { serviceAction: ServiceAction }): React.JSX.Element {
12+
return (
13+
<>
14+
{serviceAction.actionManageScripts ? <ServiceActionScripts serviceAction={serviceAction} /> : null}
15+
{serviceAction.actionParameters ? (
16+
<ServiceChangeParameters
17+
parameters={serviceAction.actionParameters}
18+
tableName={'Service Action Parameters'}
19+
/>
20+
) : null}
21+
</>
22+
);
23+
}
24+
25+
export default ServiceActionItems;

‎src/components/content/serviceActionManage/ServiceActionManagement.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
* SPDX-FileCopyrightText: Huawei Inc.
4+
*/
5+
6+
import { PlaySquareOutlined } from '@ant-design/icons';
7+
import { Card, Tabs } from 'antd';
8+
import React, { useState } from 'react';
9+
import catalogStyles from '../../../styles/catalog.module.css';
10+
import { ServiceAction } from '../../../xpanse-api/generated';
11+
import ServiceActionItems from './ServiceActionItems.tsx';
12+
13+
export const ServiceActionManagement = ({ serviceActions }: { serviceActions: ServiceAction[] }): React.JSX.Element => {
14+
const [actionName, setActionName] = useState<string | undefined>(serviceActions[0].name);
15+
const onChange = (key: string) => {
16+
setActionName(key);
17+
};
18+
const items = serviceActions.map((serviceAction) => {
19+
return {
20+
key: serviceAction.name,
21+
label: serviceAction.name,
22+
children: <ServiceActionItems serviceAction={serviceAction} />,
23+
};
24+
});
25+
26+
return (
27+
<>
28+
{' '}
29+
<h3 className={catalogStyles.catalogDetailsH3}>
30+
<PlaySquareOutlined />
31+
&nbsp;Service Action Management
32+
</h3>
33+
<Card>
34+
<Tabs
35+
defaultActiveKey={serviceActions[0].name}
36+
items={items}
37+
activeKey={actionName}
38+
onChange={onChange}
39+
destroyInactiveTabPane={true}
40+
/>
41+
</Card>
42+
</>
43+
);
44+
};

‎src/components/content/serviceActionManage/ServiceActionScripts.tsx

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
* SPDX-FileCopyrightText: Huawei Inc.
4+
*/
5+
6+
import { Table } from 'antd';
7+
import { ColumnsType } from 'antd/es/table';
8+
import React from 'react';
9+
import catalogStyles from '../../../styles/catalog.module.css';
10+
import deploymentVariablesStyles from '../../../styles/deployment-variables.module.css';
11+
import { AnsibleScriptConfig, ServiceAction } from '../../../xpanse-api/generated';
12+
import { getServiceConfigurationToolIcon } from '../serviceConfigurationManage/getServiceConfigurationToolIcon.ts';
13+
14+
interface ServiceActionChangeScript {
15+
type: string;
16+
changeHandler: string;
17+
runOnlyOnce: boolean;
18+
ansibleScriptConfig: AnsibleScriptConfig;
19+
}
20+
21+
const getServiceActionScript = (serviceAction: ServiceAction) => {
22+
const serviceActionScript: ServiceActionChangeScript[] = [];
23+
if (serviceAction.actionManageScripts) {
24+
serviceAction.actionManageScripts.forEach((actionManageScript) => {
25+
serviceActionScript.push({
26+
type: serviceAction.type,
27+
changeHandler: actionManageScript.changeHandler,
28+
runOnlyOnce: actionManageScript.runOnlyOnce,
29+
ansibleScriptConfig: actionManageScript.ansibleScriptConfig,
30+
});
31+
});
32+
}
33+
return serviceActionScript;
34+
};
35+
36+
function ServiceActionScripts({ serviceAction }: { serviceAction: ServiceAction }): React.JSX.Element {
37+
const columns: ColumnsType<ServiceActionChangeScript> = [
38+
{
39+
title: <div className={deploymentVariablesStyles.variablesColumns}>Type</div>,
40+
dataIndex: 'type',
41+
render: (text: string) => {
42+
return <img src={getServiceConfigurationToolIcon(text)} alt={text} />;
43+
},
44+
width: '5%',
45+
},
46+
{
47+
title: <div className={deploymentVariablesStyles.variablesColumns}>ChangeHandler</div>,
48+
dataIndex: 'changeHandler',
49+
render: (text: string) => {
50+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
51+
},
52+
},
53+
{
54+
title: <div className={deploymentVariablesStyles.variablesColumns}>RunOnlyOnce</div>,
55+
dataIndex: 'runOnlyOnce',
56+
render: (text: boolean | undefined | null) => {
57+
if (text === true) {
58+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
59+
} else if (text === false) {
60+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
61+
} else {
62+
return null;
63+
}
64+
},
65+
},
66+
{
67+
title: <div className={deploymentVariablesStyles.variablesColumns}>AnsibleScriptConfig</div>,
68+
dataIndex: 'ansibleScriptConfig',
69+
children: [
70+
{
71+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Playbook Name</div>,
72+
dataIndex: ['ansibleScriptConfig', 'playbookName'],
73+
key: 'playbookName',
74+
render: (text: string) => {
75+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
76+
},
77+
},
78+
{
79+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Virtual Env</div>,
80+
dataIndex: ['ansibleScriptConfig', 'virtualEnv'],
81+
key: 'virtualEnv',
82+
render: (text: string) => {
83+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
84+
},
85+
},
86+
{
87+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Python Version</div>,
88+
dataIndex: ['ansibleScriptConfig', 'pythonVersion'],
89+
key: 'pythonVersion',
90+
render: (text: string) => {
91+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
92+
},
93+
},
94+
{
95+
title: (
96+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>
97+
Is Prepare Ansible Environment
98+
</div>
99+
),
100+
dataIndex: ['ansibleScriptConfig', 'isPrepareAnsibleEnvironment'],
101+
key: 'isPrepareAnsibleEnvironment',
102+
render: (text: boolean | undefined | null) => {
103+
if (text === true) {
104+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
105+
} else if (text === false) {
106+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
107+
} else {
108+
return null;
109+
}
110+
},
111+
},
112+
{
113+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>RepoUrl</div>,
114+
dataIndex: ['ansibleScriptConfig', 'repoUrl'],
115+
key: 'repoUrl',
116+
render: (text: string) => {
117+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
118+
},
119+
},
120+
{
121+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Branch</div>,
122+
dataIndex: ['ansibleScriptConfig', 'branch'],
123+
key: 'branch',
124+
render: (text: string) => {
125+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
126+
},
127+
},
128+
{
129+
title: (
130+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>RequirementsFile</div>
131+
),
132+
dataIndex: ['ansibleScriptConfig', 'requirementsFile'],
133+
key: 'requirementsFile',
134+
render: (text: string) => {
135+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
136+
},
137+
},
138+
{
139+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>GalaxyFile</div>,
140+
dataIndex: ['ansibleScriptConfig', 'galaxyFile'],
141+
key: 'galaxyFile',
142+
render: (text: string) => {
143+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
144+
},
145+
},
146+
{
147+
title: (
148+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>
149+
AnsibleInventoryRequired
150+
</div>
151+
),
152+
dataIndex: ['ansibleScriptConfig', 'ansibleInventoryRequired'],
153+
key: 'ansibleInventoryRequired',
154+
render: (text: boolean | undefined | null) => {
155+
if (text === true) {
156+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
157+
} else if (text === false) {
158+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
159+
} else {
160+
return null;
161+
}
162+
},
163+
},
164+
],
165+
},
166+
];
167+
168+
return (
169+
<>
170+
<div className={`${catalogStyles.catalogDetailsH6} ${catalogStyles.managementVariable}`}>
171+
&nbsp;Service Action Scripts
172+
</div>
173+
<div className={deploymentVariablesStyles.variablesTableContainer}>
174+
<Table
175+
bordered
176+
columns={columns}
177+
dataSource={getServiceActionScript(serviceAction)}
178+
rowKey={'name'}
179+
pagination={false}
180+
/>
181+
</div>
182+
</>
183+
);
184+
}
185+
186+
export default ServiceActionScripts;

‎src/components/content/serviceConfigurationManage/ServiceConfigManagement.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ControlOutlined } from '@ant-design/icons';
77
import React from 'react';
88
import catalogStyles from '../../../styles/catalog.module.css';
99
import { ServiceChangeManage } from '../../../xpanse-api/generated';
10-
import ServiceConfigurationParameters from './ServiceConfigurationParameters';
10+
import ServiceChangeParameters from '../common/serviceChangeParameters/ServiceChangeParameters.tsx';
1111
import ServiceConfigurationScripts from './ServiceConfigurationScripts';
1212

1313
function ServiceConfigManagement({
@@ -25,7 +25,10 @@ function ServiceConfigManagement({
2525
<ServiceConfigurationScripts configurationManage={configurationManage} />
2626
) : null}
2727
{configurationManage.configurationParameters ? (
28-
<ServiceConfigurationParameters parameters={configurationManage.configurationParameters} />
28+
<ServiceChangeParameters
29+
parameters={configurationManage.configurationParameters}
30+
tableName={'Service Configuration Parameters'}
31+
/>
2932
) : null}
3033
</>
3134
);

‎src/components/content/serviceConfigurationManage/ServiceConfigurationScripts.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function ServiceConfigurationScripts({
2929
/>
3030
</Descriptions.Item>
3131
<Descriptions.Item label='Agent Version'>{configurationManage.agentVersion}</Descriptions.Item>
32-
<Descriptions.Item label='ConfigManage Scripts'>
32+
<Descriptions.Item label='Config Manage Scripts'>
3333
<ConfigurationManageScriptText configManageScripts={configurationManage.configManageScripts} />
3434
</Descriptions.Item>
3535
</Descriptions>

0 commit comments

Comments
 (0)