Skip to content

Commit 76d3178

Browse files
authored
display service actions data. (#1551)
1 parent 0545cb6 commit 76d3178

13 files changed

+306
-11
lines changed

public/ansible_logo.png

-2.18 KB
Binary file not shown.

public/ansible_logo.svg

+7
Loading

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 />
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;
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+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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 (
43+
<img
44+
src={getServiceConfigurationToolIcon(text)}
45+
alt={text}
46+
className={deploymentVariablesStyles.ansibleKindContent}
47+
/>
48+
);
49+
},
50+
},
51+
{
52+
title: <div className={deploymentVariablesStyles.variablesColumns}>ChangeHandler</div>,
53+
dataIndex: 'changeHandler',
54+
render: (text: string) => {
55+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
56+
},
57+
},
58+
{
59+
title: <div className={deploymentVariablesStyles.variablesColumns}>RunOnlyOnce</div>,
60+
dataIndex: 'runOnlyOnce',
61+
render: (text: boolean | undefined | null) => {
62+
if (text === true) {
63+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
64+
} else if (text === false) {
65+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
66+
} else {
67+
return null;
68+
}
69+
},
70+
},
71+
{
72+
title: <div className={deploymentVariablesStyles.variablesColumns}>AnsibleScriptConfig</div>,
73+
dataIndex: 'ansibleScriptConfig',
74+
children: [
75+
{
76+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Playbook Name</div>,
77+
dataIndex: ['ansibleScriptConfig', 'playbookName'],
78+
key: 'playbookName',
79+
render: (text: string) => {
80+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
81+
},
82+
},
83+
{
84+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Virtual Env</div>,
85+
dataIndex: ['ansibleScriptConfig', 'virtualEnv'],
86+
key: 'virtualEnv',
87+
render: (text: string) => {
88+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
89+
},
90+
},
91+
{
92+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Python Version</div>,
93+
dataIndex: ['ansibleScriptConfig', 'pythonVersion'],
94+
key: 'pythonVersion',
95+
render: (text: string) => {
96+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
97+
},
98+
},
99+
{
100+
title: (
101+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>
102+
Is Prepare Ansible Environment
103+
</div>
104+
),
105+
dataIndex: ['ansibleScriptConfig', 'isPrepareAnsibleEnvironment'],
106+
key: 'isPrepareAnsibleEnvironment',
107+
render: (text: boolean | undefined | null) => {
108+
if (text === true) {
109+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
110+
} else if (text === false) {
111+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
112+
} else {
113+
return null;
114+
}
115+
},
116+
},
117+
{
118+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>RepoUrl</div>,
119+
dataIndex: ['ansibleScriptConfig', 'repoUrl'],
120+
key: 'repoUrl',
121+
render: (text: string) => {
122+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
123+
},
124+
},
125+
{
126+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>Branch</div>,
127+
dataIndex: ['ansibleScriptConfig', 'branch'],
128+
key: 'branch',
129+
render: (text: string) => {
130+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
131+
},
132+
},
133+
{
134+
title: (
135+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>RequirementsFile</div>
136+
),
137+
dataIndex: ['ansibleScriptConfig', 'requirementsFile'],
138+
key: 'requirementsFile',
139+
render: (text: string) => {
140+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
141+
},
142+
},
143+
{
144+
title: <div className={deploymentVariablesStyles.variablesTableChildrenTitle}>GalaxyFile</div>,
145+
dataIndex: ['ansibleScriptConfig', 'galaxyFile'],
146+
key: 'galaxyFile',
147+
render: (text: string) => {
148+
return <div className={deploymentVariablesStyles.variablesColumns}>{text}</div>;
149+
},
150+
},
151+
{
152+
title: (
153+
<div className={deploymentVariablesStyles.variablesTableChildrenTitle}>
154+
AnsibleInventoryRequired
155+
</div>
156+
),
157+
dataIndex: ['ansibleScriptConfig', 'ansibleInventoryRequired'],
158+
key: 'ansibleInventoryRequired',
159+
render: (text: boolean | undefined | null) => {
160+
if (text === true) {
161+
return <div className={deploymentVariablesStyles.variablesColumns}>{`true`}</div>;
162+
} else if (text === false) {
163+
return <div className={deploymentVariablesStyles.variablesColumns}>{`false`}</div>;
164+
} else {
165+
return null;
166+
}
167+
},
168+
},
169+
],
170+
},
171+
];
172+
173+
return (
174+
<>
175+
<div className={`${catalogStyles.catalogDetailsH6} ${catalogStyles.managementVariable}`}>
176+
&nbsp;Service Action Scripts
177+
</div>
178+
<div className={deploymentVariablesStyles.variablesTableContainer}>
179+
<Table
180+
bordered
181+
columns={columns}
182+
dataSource={getServiceActionScript(serviceAction)}
183+
rowKey={'name'}
184+
pagination={false}
185+
/>
186+
</div>
187+
</>
188+
);
189+
}
190+
191+
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
);

0 commit comments

Comments
 (0)