diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx | 292 |
1 files changed, 191 insertions, 101 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx index ed92de7bb1..3ea1f2d5cc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx @@ -20,111 +20,201 @@ 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, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; +import { + relationTypesOptions, + NEW_RULE_TEMP_ID +} from './SoftwareProductDependenciesConstants.js'; - -const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => { - return ( - <SelectActionTableRow - key={dependency.id} - onAction={onAction} - overlayMsg={i18n('There is a loop between selections')} - hasError={dependency.hasCycle} - hasErrorIndication - showAction={showAction} - actionIcon={actionIcon}> - <SelectActionTableCell - options={sourceOptions} - selected={dependency.sourceId} - placeholder={i18n('Select VFC...')} - clearable={false} - onChange={newVal => { - dependency.sourceId = newVal; - onDataChanged(dependency); - }} /> - <SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/> - <SelectActionTableCell - placeholder={i18n('Select VFC...')} - options={targetOptions} - selected={dependency.targetId} - clearable={false} - onChange={newVal => { - dependency.targetId = newVal; - onDataChanged(dependency); - }} /> - </SelectActionTableRow> - ); +const TableActionRow = ({ + onAction, + actionIcon, + showAction, + dependency, + sourceOptions, + targetOptions, + onDataChanged +}) => { + return ( + <SelectActionTableRow + key={dependency.id} + onAction={onAction} + overlayMsg={i18n('There is a loop between selections')} + hasError={dependency.hasCycle} + hasErrorIndication + showAction={showAction} + actionIcon={actionIcon}> + <SelectActionTableCell + options={sourceOptions} + selected={dependency.sourceId} + placeholder={i18n('Select VFC...')} + clearable={false} + onChange={newVal => { + dependency.sourceId = newVal; + onDataChanged(dependency); + }} + /> + <SelectActionTableCell + options={relationTypesOptions} + selected={dependency.relationType} + clearable={false} + /> + <SelectActionTableCell + placeholder={i18n('Select VFC...')} + options={targetOptions} + selected={dependency.targetId} + clearable={false} + onChange={newVal => { + dependency.targetId = newVal; + onDataChanged(dependency); + }} + /> + </SelectActionTableRow> + ); }; - 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); - } - }); - } + 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) + ); + } + }); + } - render() { - let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props; - 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]; - } - }); - let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID); - let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID); - return ( - <div className='software-product-dependencies'> - <div className='page-title'>{i18n('Dependencies')}</div> - <SelectActionTable - columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]} - numOfIcons={2} - isReadOnlyMode={isReadOnlyMode}> - {!isReadOnlyMode && <TableActionRow - key={newDependency.id} - actionIcon='plusCircle' - onAction={() => onAddDependency(newDependency)} - dependency={newDependency} - componentsOptions={componentsOptions} - sourceToTargetMapping={sourceToTargetMapping} - onDataChanged={onDataChanged} - sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})} - targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})} - showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> } - {depList.map(dependency => ( - <TableActionRow - key={dependency.id} - actionIcon='trashO' - onAction={() => onDeleteDependency(dependency)} - dependency={dependency} - componentsOptions={componentsOptions} - sourceToTargetMapping={sourceToTargetMapping} - sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} - targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})} - onDataChanged={onDataChanged} - showAction={true}/> - ))} - </SelectActionTable> - </div> - ); - } + 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, + onDeleteDependency, + isReadOnlyMode + } = this.props; + 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]; + } + }); + let depList = softwareProductDependencies.filter( + dependency => dependency.id !== NEW_RULE_TEMP_ID + ); + let newDependency = softwareProductDependencies.find( + dependency => dependency.id === NEW_RULE_TEMP_ID + ); + return ( + <div className="software-product-dependencies"> + <div className="page-title">{i18n('Dependencies')}</div> + <SelectActionTable + columns={[ + i18n('Source'), + i18n('Relation Type'), + i18n('Target') + ]} + numOfIcons={2} + isReadOnlyMode={isReadOnlyMode}> + {!isReadOnlyMode && ( + <TableActionRow + key={newDependency.id} + actionIcon="plusCircle" + onAction={() => onAddDependency(newDependency)} + dependency={newDependency} + componentsOptions={componentsOptions} + sourceToTargetMapping={sourceToTargetMapping} + onDataChanged={onDataChanged} + sourceOptions={this.filterSources({ + componentsOptions, + sourceToTargetMapping, + selectedSourceId: newDependency.sourceId, + selectedTargetId: newDependency.targetId + })} + targetOptions={this.filterTargets({ + componentsOptions, + sourceToTargetMapping, + selectedSourceId: newDependency.sourceId, + selectedTargetId: newDependency.targetId + })} + showAction={ + newDependency.targetId !== null && + newDependency.relationType !== null && + newDependency.sourceId !== null + } + /> + )} + {depList.map(dependency => ( + <TableActionRow + key={dependency.id} + actionIcon="trashO" + onAction={() => onDeleteDependency(dependency)} + dependency={dependency} + componentsOptions={componentsOptions} + sourceToTargetMapping={sourceToTargetMapping} + sourceOptions={this.filterSources({ + componentsOptions, + sourceToTargetMapping, + selectedSourceId: dependency.sourceId, + selectedTargetId: dependency.targetId + })} + targetOptions={this.filterTargets({ + componentsOptions, + sourceToTargetMapping, + selectedSourceId: dependency.sourceId, + selectedTargetId: dependency.targetId + })} + onDataChanged={onDataChanged} + showAction={true} + /> + ))} + </SelectActionTable> + </div> + ); + } } |