diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies')
5 files changed, 151 insertions, 73 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js index 05a1fc7797..9888087800 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js @@ -16,24 +16,21 @@ import {connect} from 'react-redux'; import SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js'; export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct; return { - isReadOnlyMode, - softwareProductDependencies: softwareProductDependencies.length ? softwareProductDependencies : [{sourceId: '', targetId: '', relationType: 'dependsOn', id: 'fake'}], + softwareProductDependencies: softwareProductDependencies, componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName})) }; }; const mapActionsToProps = (dispatch, {softwareProductId, version}) => { return { - onDataChanged: dependenciesList => SoftwareProductDependenciesActionHelper.updateDependencyList(dispatch, {dependenciesList}), - onAddDependency: () => SoftwareProductDependenciesActionHelper.addDependency(dispatch), - onSubmit: (dependenciesList) => SoftwareProductDependenciesActionHelper.saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) + onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}), + onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}), + onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item}) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js index e47b33a577..f04f8faf56 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js @@ -15,44 +15,83 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './SoftwareProductDependenciesConstants.js'; -import uuid from 'uuid-js'; +import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; function baseUrl(softwareProductId, version) { const versionId = version.id; const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependency-model`; + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`; } -function fetchDependency(softwareProductId, version) { +function fetchDependencies(softwareProductId, version) { return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); } -function postDependency(softwareProductId, version, dependenciesList) { - let modifedDependencyList = dependenciesList ? dependenciesList.filter(item => item.sourceId && item.targetId) - .map(item => ({sourceId: item.sourceId, targetId: item.targetId, relationType: item.relationType})) : []; - return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {componentDependencyModels:modifedDependencyList}); +function addDepencency(softwareProductId, version, item) { + return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { + sourceId: item.sourceId, + targetId: item.targetId, + relationType: item.relationType + }); } + +function updateDepencency(softwareProductId, version, item) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`, + { + sourceId: item.sourceId, + targetId: item.targetId, + relationType: item.relationType + }); +} + +function removeDependency(softwareProductId, version, item) { + return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`); +} + + const SoftwareProductDependenciesActionHelper = { - updateDependencyList(dispatch, {dependenciesList}) { - dispatch({type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, dependenciesList}); + updateDependency(dispatch, {softwareProductId, version, item}) { + // if change was made on existing item - we will update the server and refresh the list + // if change was made on the 'new' row - we will only fire the event + if (item.id !== NEW_RULE_TEMP_ID) { + return updateDepencency(softwareProductId, version, item).then(() => { + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); + } else { + dispatch({ + type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY, + item: item + }); + } }, - addDependency(dispatch) { - dispatch({type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY}); + + createDependency(dispatch, {softwareProductId, version, item}) { + // removing the temp id + delete item.id; + // creating the new dependency + return addDepencency(softwareProductId, version, item).then(() => { + dispatch({ + type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY + }); + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); }, + + removeDependency(dispatch, {softwareProductId, version, item}) { + return removeDependency(softwareProductId, version, item).then( () => { + return this.fetchDependencies(dispatch, {softwareProductId, version}); + }); + }, + fetchDependencies(dispatch, {softwareProductId, version}) { - return fetchDependency(softwareProductId, version).then( response => { - const dependenciesList = response.results ? response.results.map(item => {return {...item, id: uuid.create().toString()};}) : []; + return fetchDependencies(softwareProductId, version).then( response => { dispatch({ type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, - dependenciesList + dependenciesList : response.results }); }); - }, - saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) { - return postDependency(softwareProductId, version, dependenciesList); - } + } }; export default SoftwareProductDependenciesActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js index 1f27ed8311..c25561da17 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js @@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null, - ADD_SOFTWARE_PRODUCT_DEPENDENCY: null + ADD_SOFTWARE_PRODUCT_DEPENDENCY: null, + UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null }); export const relationTypes = { @@ -27,3 +28,5 @@ export const relationTypes = { export const relationTypesOptions = [ {value: relationTypes.DEPENDS_ON, label: 'Depends On'} ]; + +export const NEW_RULE_TEMP_ID = 'newRuleTempId';
\ No newline at end of file diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js index 3fb479eedc..3edd3b899a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js @@ -15,21 +15,31 @@ * permissions and limitations under the License. */ -import {actionTypes, relationTypes} from './SoftwareProductDependenciesConstants.js'; +import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js'; import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js'; -import uuid from 'uuid-js'; -export default (state = [], action) => { +let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON}; + +export default (state = [Object.assign({}, newRowObject) ], action) => { switch (action.type) { case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: + // copying the entity with the data for the row that is in the 'add' mode + let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID); + action.dependenciesList.push(newDependency); + // returning list from the server with our 'new entity' row return checkCyclesAndMarkDependencies(action.dependenciesList); - case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY: - return [...state, { - sourceId: null, - relationType: relationTypes.DEPENDS_ON, - targetId: null, - id: uuid.create() - }]; + case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY : + // resetting the entity with the data for the 'add' mode for a new entity + let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID); + newArray.push(Object.assign({}, newRowObject)); + return newArray; + case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY : + // we really only need this for the 'new' row since we need to change the state to get + // everything updated + let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID); + let updateArray = state.slice(); + updateArray.splice(updateArrayIndex, 1, action.item); + return checkCyclesAndMarkDependencies(updateArray); default: return state; } 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 a427470a4f..ed92de7bb1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx @@ -20,7 +20,42 @@ 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'; +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> + ); +}; + export default class SoftwareProductDependenciesView extends React.Component { filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) { @@ -46,8 +81,7 @@ export default class SoftwareProductDependenciesView extends React.Component { } render() { - let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, isReadOnlyMode} = this.props; - let canAdd = softwareProductDependencies.length < componentsOptions.length * (componentsOptions.length - 1); + let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props; let sourceToTargetMapping = {}; softwareProductDependencies.map(dependency => { let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId); @@ -55,47 +89,42 @@ export default class SoftwareProductDependenciesView extends React.Component { 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='software-product-dependencies-title'>{i18n('Dependencies')}</div> + <div className='page-title'>{i18n('Dependencies')}</div> <SelectActionTable - columns={['Source', 'Relation Type', 'Target']} + columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]} numOfIcons={2} - isReadOnlyMode={isReadOnlyMode} - onAdd={canAdd ? onAddDependency : undefined} - onAddItem={i18n('Add Rule')}> - {softwareProductDependencies.map(dependency => ( - <SelectActionTableRow + 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} - onDelete={() => onDataChanged(softwareProductDependencies.filter(currentDependency => currentDependency.id !== dependency.id))} - overlayMsg={i18n('There is a loop between selections')} - hasError={dependency.hasCycle} - hasErrorIndication - showDelete={dependency.id !== 'fake' || dependency.hasCycle !== undefined}> - <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> + 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> ); } - save() { - let {onSubmit, softwareProductDependencies} = this.props; - return onSubmit(softwareProductDependencies); - } } |