aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
blob: da975a7be2f2d87b1fe799ac73804c2e19575c6e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';

import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
import {relationTypesOptions} from './SoftwareProductDependenciesConstants.js';

export default class SoftwareProductDependenciesView extends React.Component {
	filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
		let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
		return componentsOptions.filter(component => {
			if (component.value === selectedTargetId) {
				return true;
			} else {
				return component.value !== selectedSourceId && (isInMap ? sourceToTargetMapping[selectedSourceId].indexOf(component.value) < 0 : true);
			}
		});
	}

	filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
		return componentsOptions.filter(component => {
			if (component.value === selectedSourceId) {
				return true;
			} else {
				let isInMap = sourceToTargetMapping.hasOwnProperty(component.value);
				return component.value !== selectedTargetId && (isInMap ? sourceToTargetMapping[component.value].indexOf(selectedTargetId) < 0 : true);
			}
		});
	}

	render() {
		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, isReadOnlyMode} = this.props;
		let canAdd = softwareProductDependencies.length < componentsOptions.length * (componentsOptions.length - 1);
		let sourceToTargetMapping = {};
		softwareProductDependencies.map(dependency => {
			let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
			if (dependency.targetId) {
				sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
			}
		});
		return (
			<div className='software-product-dependencies'>
				<div className='software-product-dependencies-title'>{i18n('Dependencies')}</div>
				<SelectActionTable
					columns={['Source', 'Relation Type', 'Target']}
					isReadOnlyMode={isReadOnlyMode}
					onAdd={canAdd ? onAddDependency : undefined}
					onAddItem={i18n('Add Rule')}>					
					{softwareProductDependencies.map(dependency => (
						<SelectActionTableRow
							key={dependency.id}
							onDelete={() => onDataChanged(softwareProductDependencies.filter(currentDependency => currentDependency.id !== dependency.id))}
							overlayMsg={i18n('There is a loop between selections')}
							hasError={dependency.hasCycle}>
							<SelectActionTableCell
								options={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
								selected={dependency.sourceId}
								placeholder={i18n('Select VFC...')}
								onChange={newSourceId => onDataChanged(softwareProductDependencies.map(currentDependency =>
									({...currentDependency, sourceId: currentDependency.id === dependency.id ? newSourceId : currentDependency.sourceId})
								))} />
							<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
							<SelectActionTableCell
								placeholder={i18n('Select VFC...')}
								options={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
								selected={dependency.targetId}
								onChange={newTargetId => onDataChanged(softwareProductDependencies.map(currentDependency =>
									({...currentDependency, targetId: currentDependency.id === dependency.id ? newTargetId : currentDependency.targetId})
								))} />
						</SelectActionTableRow>
					))}
				</SelectActionTable>
			</div>
		);
	}

	save() {
		let {onSubmit, softwareProductDependencies} = this.props;
		return onSubmit(softwareProductDependencies);
	}
}