2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
13 * or implied. See the License for the specific language governing
14 * permissions and limitations under the License.
17 import React from 'react';
18 import i18n from 'nfvo-utils/i18n/i18n.js';
20 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
21 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
22 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
23 import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
26 const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
31 overlayMsg={i18n('There is a loop between selections')}
32 hasError={dependency.hasCycle}
34 showAction={showAction}
35 actionIcon={actionIcon}>
36 <SelectActionTableCell
37 options={sourceOptions}
38 selected={dependency.sourceId}
39 placeholder={i18n('Select VFC...')}
42 dependency.sourceId = newVal;
43 onDataChanged(dependency);
45 <SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
46 <SelectActionTableCell
47 placeholder={i18n('Select VFC...')}
48 options={targetOptions}
49 selected={dependency.targetId}
52 dependency.targetId = newVal;
53 onDataChanged(dependency);
55 </SelectActionTableRow>
60 export default class SoftwareProductDependenciesView extends React.Component {
61 filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
62 let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
63 return componentsOptions.filter(component => {
64 if (component.value === selectedTargetId) {
67 return component.value !== selectedSourceId && (isInMap ? sourceToTargetMapping[selectedSourceId].indexOf(component.value) < 0 : true);
72 filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
73 return componentsOptions.filter(component => {
74 if (component.value === selectedSourceId) {
77 let isInMap = sourceToTargetMapping.hasOwnProperty(component.value);
78 return component.value !== selectedTargetId && (isInMap ? sourceToTargetMapping[component.value].indexOf(selectedTargetId) < 0 : true);
84 let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
85 let sourceToTargetMapping = {};
86 softwareProductDependencies.map(dependency => {
87 let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
88 if (dependency.targetId) {
89 sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
92 let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
93 let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
95 <div className='software-product-dependencies'>
96 <div className='page-title'>{i18n('Dependencies')}</div>
98 columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
100 isReadOnlyMode={isReadOnlyMode}>
101 {!isReadOnlyMode && <TableActionRow
102 key={newDependency.id}
103 actionIcon='plusCircle'
104 onAction={() => onAddDependency(newDependency)}
105 dependency={newDependency}
106 componentsOptions={componentsOptions}
107 sourceToTargetMapping={sourceToTargetMapping}
108 onDataChanged={onDataChanged}
109 sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
110 targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
111 showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
112 {depList.map(dependency => (
116 onAction={() => onDeleteDependency(dependency)}
117 dependency={dependency}
118 componentsOptions={componentsOptions}
119 sourceToTargetMapping={sourceToTargetMapping}
120 sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
121 targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
122 onDataChanged={onDataChanged}