From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../EntitlementPoolsActionHelper.js | 410 +++++++----- .../entitlementPools/EntitlementPoolsConstants.js | 162 ++--- .../entitlementPools/EntitlementPoolsEditor.js | 100 +-- .../EntitlementPoolsEditorReducer.js | 172 ++--- .../EntitlementPoolsEditorView.jsx | 730 +++++++++++++-------- .../entitlementPools/EntitlementPoolsLimits.js | 92 ++- .../entitlementPools/EntitlementPoolsListEditor.js | 83 ++- .../EntitlementPoolsListEditorView.jsx | 244 ++++--- .../EntitlementPoolsListReducer.js | 38 +- 9 files changed, 1216 insertions(+), 815 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools') diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js index 84bdac804c..181fc11c9d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js @@ -15,197 +15,281 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js'; -import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; -import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js'; +import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js'; +import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; +import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js'; import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js'; function baseUrl(licenseModelId, version) { - const restPrefix = Configuration.get('restPrefix'); - const {id: versionId} = version; - return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`; + const restPrefix = Configuration.get('restPrefix'); + const { id: versionId } = version; + return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`; } function fetchEntitlementPoolsList(licenseModelId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } function postEntitlementPool(licenseModelId, entitlementPool, version) { - return RestAPIUtil.post(baseUrl(licenseModelId, version), { - name: entitlementPool.name, - description: entitlementPool.description, - thresholdValue: entitlementPool.thresholdValue, - thresholdUnits: getValue(entitlementPool.thresholdUnits), - increments: entitlementPool.increments, - operationalScope: getValue(entitlementPool.operationalScope), - time: entitlementPool.time, - startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate - }); + return RestAPIUtil.post(baseUrl(licenseModelId, version), { + name: entitlementPool.name, + description: entitlementPool.description, + thresholdValue: entitlementPool.thresholdValue, + thresholdUnits: getValue(entitlementPool.thresholdUnits), + increments: entitlementPool.increments, + operationalScope: getValue(entitlementPool.operationalScope), + time: entitlementPool.time, + startDate: entitlementPool.startDate, + expiryDate: entitlementPool.expiryDate + }); } - -function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) { - - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, { - name: entitlementPool.name, - description: entitlementPool.description, - thresholdValue: entitlementPool.thresholdValue, - thresholdUnits: getValue(entitlementPool.thresholdUnits), - increments: entitlementPool.increments, - operationalScope: getValue(entitlementPool.operationalScope), - time: entitlementPool.time, - startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate - }); +function putEntitlementPool( + licenseModelId, + previousEntitlementPool, + entitlementPool, + version +) { + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, + { + name: entitlementPool.name, + description: entitlementPool.description, + thresholdValue: entitlementPool.thresholdValue, + thresholdUnits: getValue(entitlementPool.thresholdUnits), + increments: entitlementPool.increments, + operationalScope: getValue(entitlementPool.operationalScope), + time: entitlementPool.time, + startDate: entitlementPool.startDate, + expiryDate: entitlementPool.expiryDate + } + ); } function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`); + return RestAPIUtil.destroy( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}` + ); } function fetchLimitsList(licenseModelId, entitlementPoolId, version) { - return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`); + return RestAPIUtil.fetch( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits` + ); } function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) { - return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`); + return RestAPIUtil.destroy( + `${baseUrl( + licenseModelId, + version + )}/${entitlementPoolId}/limits/${limitId}` + ); } function postLimit(licenseModelId, entitlementPoolId, version, limit) { - return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, { - name: limit.name, - type: limit.type, - description: limit.description, - metric: getStrValue(limit.metric), - value: limit.value, - unit: getStrValue(limit.unit), - aggregationFunction: getValue(limit.aggregationFunction), - time: getValue(limit.time) - }); + return RestAPIUtil.post( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, + { + name: limit.name, + type: limit.type, + description: limit.description, + metric: getStrValue(limit.metric), + value: limit.value, + unit: getStrValue(limit.unit), + aggregationFunction: getValue(limit.aggregationFunction), + time: getValue(limit.time) + } + ); } function putLimit(licenseModelId, entitlementPoolId, version, limit) { - - return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limit.id}`, { - name: limit.name, - type: limit.type, - description: limit.description, - metric: getStrValue(limit.metric), - value: limit.value, - unit: getStrValue(limit.unit), - aggregationFunction: getValue(limit.aggregationFunction), - time: getValue(limit.time) - }); + return RestAPIUtil.put( + `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${ + limit.id + }`, + { + name: limit.name, + type: limit.type, + description: limit.description, + metric: getStrValue(limit.metric), + value: limit.value, + unit: getStrValue(limit.unit), + aggregationFunction: getValue(limit.aggregationFunction), + time: getValue(limit.time) + } + ); } export default { + fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) { + return fetchEntitlementPoolsList(licenseModelId, version).then( + response => + dispatch({ + type: + entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED, + response + }) + ); + }, + + openEntitlementPoolsEditor( + dispatch, + { entitlementPool, licenseModelId, version } = {} + ) { + if (licenseModelId && version) { + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + } + dispatch({ + type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN, + entitlementPool + }); + }, + + deleteEntitlementPool( + dispatch, + { licenseModelId, entitlementPoolId, version } + ) { + return deleteEntitlementPool( + licenseModelId, + entitlementPoolId, + version + ).then(() => { + dispatch({ + type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL, + entitlementPoolId + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, + + entitlementPoolsEditorDataChanged(dispatch, { deltaData }) { + dispatch({ + type: + entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED, + deltaData + }); + }, + + closeEntitlementPoolsEditor(dispatch) { + dispatch({ + type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE + }); + }, + + saveEntitlementPool( + dispatch, + { licenseModelId, previousEntitlementPool, entitlementPool, version } + ) { + if (previousEntitlementPool) { + return putEntitlementPool( + licenseModelId, + previousEntitlementPool, + entitlementPool, + version + ).then(() => { + dispatch({ + type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } else { + return postEntitlementPool( + licenseModelId, + entitlementPool, + version + ).then(response => { + dispatch({ + type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL, + entitlementPool: { + ...entitlementPool, + referencingFeatureGroups: [], + id: response.value + } + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } + }, + + hideDeleteConfirm(dispatch) { + dispatch({ + type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, + entitlementPoolToDelete: false + }); + }, + openDeleteEntitlementPoolConfirm(dispatch, { entitlementPool }) { + dispatch({ + type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, + entitlementPoolToDelete: entitlementPool + }); + }, + + fetchLimits(dispatch, { licenseModelId, version, entitlementPool }) { + return fetchLimitsList( + licenseModelId, + entitlementPool.id, + version + ).then(response => { + dispatch({ + type: + entitlementPoolsActionTypes.entitlementPoolsEditor + .LIMITS_LIST_LOADED, + response + }); + }); + }, + + submitLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) { + const propmise = limit.id + ? putLimit(licenseModelId, entitlementPool.id, version, limit) + : postLimit(licenseModelId, entitlementPool.id, version, limit); + return propmise.then(() => { + dispatch({ + type: limitEditorActions.CLOSE + }); + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + }, - fetchEntitlementPoolsList(dispatch, {licenseModelId, version}) { - return fetchEntitlementPoolsList(licenseModelId, version).then(response => dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED, - response - })); - }, - - openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version} = {}) { - if (licenseModelId && version) { - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - } - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN, - entitlementPool - }); - }, - - deleteEntitlementPool(dispatch, {licenseModelId, entitlementPoolId, version}) { - return deleteEntitlementPool(licenseModelId, entitlementPoolId, version).then(() => { - dispatch({ - type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL, - entitlementPoolId - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - entitlementPoolsEditorDataChanged(dispatch, {deltaData}) { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED, - deltaData - }); - }, - - closeEntitlementPoolsEditor(dispatch) { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE - }); - }, - - saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version}) { - if (previousEntitlementPool) { - return putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version).then(() => { - dispatch({ - type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL, - entitlementPool - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - else { - return postEntitlementPool(licenseModelId, entitlementPool, version).then(response => { - dispatch({ - type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL, - entitlementPool: { - ...entitlementPool, - referencingFeatureGroups: [], - id: response.value - } - }); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } - }, - - hideDeleteConfirm(dispatch) { - dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, - entitlementPoolToDelete: false - }); - }, - openDeleteEntitlementPoolConfirm(dispatch, {entitlementPool}) { - dispatch({ - type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM, - entitlementPoolToDelete: entitlementPool - }); - }, - - - - fetchLimits(dispatch, {licenseModelId, version, entitlementPool}) { - return fetchLimitsList(licenseModelId, entitlementPool.id, version). then (response => { - dispatch({ - type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED, - response - }); - }); - }, - - submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { - const propmise = limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit) - : postLimit(licenseModelId,entitlementPool.id, version, limit); - return propmise.then(() => { - dispatch({ - type: limitEditorActions.CLOSE - }); - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - }, - - deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { - return deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => { - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}); - }); - } + deleteLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) { + return deleteLimit( + licenseModelId, + entitlementPool.id, + version, + limit.id + ).then(() => { + this.fetchLimits(dispatch, { + licenseModelId, + version, + entitlementPool + }); + return ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js index de2a87ceaf..e69ff688ab 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js @@ -15,104 +15,112 @@ */ import keyMirror from 'nfvo-utils/KeyMirror.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import InputOptions, { + other as optionInputOther +} from 'nfvo-components/input/validation/InputOptions.jsx'; export const actionTypes = keyMirror({ + ENTITLEMENT_POOLS_LIST_LOADED: null, + ADD_ENTITLEMENT_POOL: null, + EDIT_ENTITLEMENT_POOL: null, + DELETE_ENTITLEMENT_POOL: null, - ENTITLEMENT_POOLS_LIST_LOADED: null, - ADD_ENTITLEMENT_POOL: null, - EDIT_ENTITLEMENT_POOL: null, - DELETE_ENTITLEMENT_POOL: null, - - entitlementPoolsEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - LIMITS_LIST_LOADED: null - } - + entitlementPoolsEditor: { + OPEN: null, + CLOSE: null, + DATA_CHANGED: null, + LIMITS_LIST_LOADED: null + } }); export const enums = keyMirror({ - SELECTED_FEATURE_GROUP_TAB: { - GENERAL: 1, - ENTITLEMENT_POOLS: 2, - LICENCE_KEY_GROUPS: 3 - }, - SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: { - ASSOCIATED_ENTITLEMENT_POOLS: 1, - AVAILABLE_ENTITLEMENT_POOLS: 2 - } + SELECTED_FEATURE_GROUP_TAB: { + GENERAL: 1, + ENTITLEMENT_POOLS: 2, + LICENCE_KEY_GROUPS: 3 + }, + SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: { + ASSOCIATED_ENTITLEMENT_POOLS: 1, + AVAILABLE_ENTITLEMENT_POOLS: 2 + } }); export const defaultState = { - ENTITLEMENT_POOLS_EDITOR_DATA: { - entitlementMetric: {choice: '', other: ''}, - aggregationFunction: {choice: '', other: ''}, - operationalScope: {choices: [], other: ''}, - time: {choice: '', other: ''} - } + ENTITLEMENT_POOLS_EDITOR_DATA: { + entitlementMetric: { choice: '', other: '' }, + aggregationFunction: { choice: '', other: '' }, + operationalScope: { choices: [], other: '' }, + time: { choice: '', other: '' } + } }; export const thresholdUnitType = { - ABSOLUTE: 'Absolute', - PERCENTAGE: 'Percentage' + ABSOLUTE: 'Absolute', + PERCENTAGE: 'Percentage' }; export const optionsInputValues = { - OPERATIONAL_SCOPE: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Network_Wide', title: 'Network Wide'}, - {enum: 'Availability_Zone', title: 'Availability Zone'}, - {enum: 'Data_Center', title: 'Data Center'}, - {enum: 'Tenant', title: 'Tenant'}, - {enum: 'VM', title: 'VM'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Core', title: 'Core'} - ], - TIME: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Hour', title: 'Hour'}, - {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'} - ], - AGGREGATE_FUNCTION: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Peak', title: 'Peak'}, - {enum: 'Average', title: 'Average'} - ], - ENTITLEMENT_METRIC: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Software_Instances_Count', title: 'Software Instances'}, - {enum: 'Core', title: 'Core'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Trunks', title: 'Trunks'}, - {enum: 'User', title: 'User'}, - {enum: 'Subscribers', title: 'Subscribers'}, - {enum: 'Tenants', title: 'Tenants'}, - {enum: 'Tokens', title: 'Tokens'}, - {enum: 'Seats', title: 'Seats'}, - {enum: 'Units_TB', title: 'Units-TB'}, - {enum: 'Units_GB', title: 'Units-GB'}, - {enum: 'Units_MB', title: 'Units-MB'} - ] + OPERATIONAL_SCOPE: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Network_Wide', title: 'Network Wide' }, + { enum: 'Availability_Zone', title: 'Availability Zone' }, + { enum: 'Data_Center', title: 'Data Center' }, + { enum: 'Tenant', title: 'Tenant' }, + { enum: 'VM', title: 'VM' }, + { enum: 'CPU', title: 'CPU' }, + { enum: 'Core', title: 'Core' } + ], + TIME: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Hour', title: 'Hour' }, + { enum: 'Day', title: 'Day' }, + { enum: 'Month', title: 'Month' } + ], + AGGREGATE_FUNCTION: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Peak', title: 'Peak' }, + { enum: 'Average', title: 'Average' } + ], + ENTITLEMENT_METRIC: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Software_Instances_Count', title: 'Software Instances' }, + { enum: 'Core', title: 'Core' }, + { enum: 'CPU', title: 'CPU' }, + { enum: 'Trunks', title: 'Trunks' }, + { enum: 'User', title: 'User' }, + { enum: 'Subscribers', title: 'Subscribers' }, + { enum: 'Tenants', title: 'Tenants' }, + { enum: 'Tokens', title: 'Tokens' }, + { enum: 'Seats', title: 'Seats' }, + { enum: 'Units_TB', title: 'Units-TB' }, + { enum: 'Units_GB', title: 'Units-GB' }, + { enum: 'Units_MB', title: 'Units-MB' } + ] }; -export const extractValue = (item) => { - if (item === undefined) {return '';} //TODO fix it later - return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; +export const extractValue = item => { + if (item === undefined) { + return ''; + } //TODO fix it later + return item + ? item.choice === optionInputOther.OTHER + ? item.other + : InputOptions.getTitleByName(optionsInputValues, item.choice) + : ''; }; -export const extractUnits = (units) => { - if (units === undefined) {return '';} //TODO fix it later - return units === 'Absolute' ? '' : '%'; +export const extractUnits = units => { + if (units === undefined) { + return ''; + } //TODO fix it later + return units === 'Absolute' ? '' : '%'; }; export const tabIds = { - GENERAL: 'GENERAL', - SP_LIMITS: 'SP_LIMITS', - VENDOR_LIMITS: 'VENDOR_LIMITS', - ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON' + GENERAL: 'GENERAL', + SP_LIMITS: 'SP_LIMITS', + VENDOR_LIMITS: 'VENDOR_LIMITS', + ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON' }; -export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL'; \ No newline at end of file +export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js index 23c260f793..5fcdad992a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js @@ -13,54 +13,80 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; import EntitlementPoolsEditorView from './EntitlementPoolsEditorView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js'; -const mapStateToProps = ({licenseModel: {entitlementPool}}) => { +const mapStateToProps = ({ licenseModel: { entitlementPool } }) => { + let { + data, + genericFieldInfo, + formReady, + limitsList + } = entitlementPool.entitlementPoolEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let {data, genericFieldInfo, formReady, limitsList} = entitlementPool.entitlementPoolEditor; + let previousData, + EPNames = {}; + const entitlementPoolId = data ? data.id : null; + if (entitlementPoolId) { + previousData = entitlementPool.entitlementPoolsList.find( + entitlementPool => entitlementPool.id === entitlementPoolId + ); + } - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + const list = entitlementPool.entitlementPoolsList; + for (let i = 0; i < list.length; i++) { + EPNames[list[i].name.toLowerCase()] = list[i].id; + } - let previousData, EPNames = {}; - const entitlementPoolId = data ? data.id : null; - if(entitlementPoolId) { - previousData = entitlementPool.entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId); - } - - const list = entitlementPool.entitlementPoolsList; - for (let i = 0; i < list.length; i++) { - EPNames[list[i].name.toLowerCase()] = list[i].id; - } - - return { - data, - genericFieldInfo, - previousData, - isFormValid, - formReady, - EPNames, - limitsList - }; + return { + data, + genericFieldInfo, + previousData, + isFormValid, + formReady, + EPNames, + limitsList + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onCancel: () => EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch), - onSubmit: ({previousEntitlementPool, entitlementPool, keepOpen}) => { - if (!keepOpen) {EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch);} - EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version}); - }, - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName), - onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch), - onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit}) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onCancel: () => + EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch), + onSubmit: ({ previousEntitlementPool, entitlementPool, keepOpen }) => { + if (!keepOpen) { + EntitlementPoolsActionHelper.closeEntitlementPoolsEditor( + dispatch + ); + } + EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, { + licenseModelId, + previousEntitlementPool, + entitlementPool, + version + }); + }, + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName), + onCloseLimitEditor: () => + LimitEditorActionHelper.closeLimitsEditor(dispatch), + onOpenLimitEditor: limit => + LimitEditorActionHelper.openLimitsEditor(dispatch, { limit }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + EntitlementPoolsEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js index be100f6802..4556b87129 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js @@ -13,87 +13,101 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, defaultState, SP_ENTITLEMENT_POOL_FORM} from './EntitlementPoolsConstants.js'; +import { + actionTypes, + defaultState, + SP_ENTITLEMENT_POOL_FORM +} from './EntitlementPoolsConstants.js'; import moment from 'moment'; -import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.entitlementPoolsEditor.OPEN: - let entitlementPoolData = {...action.entitlementPool}; - let {startDate, expiryDate} = entitlementPoolData; - if (startDate) { - entitlementPoolData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT); - } - if (expiryDate) { - entitlementPoolData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT); - } - return { - ...state, - formReady: null, - formName: SP_ENTITLEMENT_POOL_FORM, - genericFieldInfo: { - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'increments' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 120}] - }, - 'operationalScope' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdUnits' : { - isValid: true, - errorText: '', - validations: [] - }, - 'thresholdValue' : { - isValid: true, - errorText: '', - validations: [] - }, - 'startDate': { - isValid: true, - errorText: '', - validations: [] - }, - 'expiryDate': { - isValid: true, - errorText: '', - validations: [] - } - }, - data: action.entitlementPool ? entitlementPoolData : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA - }; - case actionTypes.entitlementPoolsEditor.DATA_CHANGED: - return { - ...state, - data: { - ...state.data, - ...action.deltaData - } - }; - case actionTypes.entitlementPoolsEditor.CLOSE: - return {}; - - case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED: - return { - ...state, - limitsList: action.response.results - }; - default: - return state; - } + switch (action.type) { + case actionTypes.entitlementPoolsEditor.OPEN: + let entitlementPoolData = { ...action.entitlementPool }; + let { startDate, expiryDate } = entitlementPoolData; + if (startDate) { + entitlementPoolData.startDate = moment( + startDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + if (expiryDate) { + entitlementPoolData.expiryDate = moment( + expiryDate, + DATE_FORMAT + ).format(DATE_FORMAT); + } + return { + ...state, + formReady: null, + formName: SP_ENTITLEMENT_POOL_FORM, + genericFieldInfo: { + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + increments: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 120 }] + }, + operationalScope: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdUnits: { + isValid: true, + errorText: '', + validations: [] + }, + thresholdValue: { + isValid: true, + errorText: '', + validations: [] + }, + startDate: { + isValid: true, + errorText: '', + validations: [] + }, + expiryDate: { + isValid: true, + errorText: '', + validations: [] + } + }, + data: action.entitlementPool + ? entitlementPoolData + : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA + }; + case actionTypes.entitlementPoolsEditor.DATA_CHANGED: + return { + ...state, + data: { + ...state.data, + ...action.deltaData + } + }; + case actionTypes.entitlementPoolsEditor.CLOSE: + return {}; + case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED: + return { + ...state, + limitsList: action.response.results + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx index efae7f3ad2..46eda622b5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx @@ -25,307 +25,479 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import Button from 'sdc-ui/lib/react/Button.js'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {optionsInputValues as EntitlementPoolsOptionsInputValues, SP_ENTITLEMENT_POOL_FORM, tabIds} from './EntitlementPoolsConstants.js'; -import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js'; -import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js'; -import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + optionsInputValues as EntitlementPoolsOptionsInputValues, + SP_ENTITLEMENT_POOL_FORM, + tabIds +} from './EntitlementPoolsConstants.js'; +import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js'; +import { + validateStartDate, + thresholdValueValidation +} from '../LicenseModelValidations.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; import Tabs from 'sdc-ui/lib/react/Tabs.js'; import Tab from 'sdc-ui/lib/react/Tab.js'; import EntitlementPoolsLimits from './EntitlementPoolsLimits.js'; -import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js'; +import { + limitType, + NEW_LIMIT_TEMP_ID +} from '../limits/LimitEditorConstants.js'; const EntitlementPoolPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - operationalScope: PropTypes.shape({ - choices: PropTypes.array, - other: PropTypes.string - }), - thresholdUnits: PropTypes.string, - thresholdValue: PropTypes.string, - increments: PropTypes.string, - startDate: PropTypes.string, - expiryDate: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + operationalScope: PropTypes.shape({ + choices: PropTypes.array, + other: PropTypes.string + }), + thresholdUnits: PropTypes.string, + thresholdValue: PropTypes.string, + increments: PropTypes.string, + startDate: PropTypes.string, + expiryDate: PropTypes.string }); -const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName, - thresholdValueValidation, validateStartDate}) => { +const EntitlementPoolsFormContent = ({ + data, + genericFieldInfo, + onDataChanged, + validateName, + thresholdValueValidation, + validateStartDate +}) => { + let { + name, + description, + operationalScope, + thresholdUnits, + thresholdValue, + increments, + startDate, + expiryDate + } = data; + return ( + + + + onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, { + name: validateName + }) + } + isValid={genericFieldInfo.name.isValid} + isRequired={true} + errorText={genericFieldInfo.name.errorText} + label={i18n('Name')} + value={name} + data-test-id="create-ep-name" + type="text" + /> + + + {}} + isMultiSelect={true} + onEnumChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: operationalScope, + other: '' + } + }, + SP_ENTITLEMENT_POOL_FORM + ) + } + onOtherChange={operationalScope => + onDataChanged( + { + operationalScope: { + choices: [optionInputOther.OTHER], + other: operationalScope + } + }, + SP_ENTITLEMENT_POOL_FORM + ) + } + label={i18n('Operational Scope')} + data-test-id="create-ep-operational-scope" + type="select" + multiSelectedEnum={ + operationalScope && operationalScope.choices + } + otherValue={operationalScope && operationalScope.other} + values={ + EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE + } + isValid={genericFieldInfo.operationalScope.isValid} + errorText={genericFieldInfo.operationalScope.errorText} + /> + + + + onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM) + } + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + label={i18n('Description')} + value={description} + data-test-id="create-ep-description" + type="textarea" + /> + + +
+ { + // setting the unit to the correct value + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onDataChanged( + { thresholdUnits: val }, + SP_ENTITLEMENT_POOL_FORM + ); + // TODO make sure that the value is valid too + if (thresholdValue && thresholdValue !== '') { + onDataChanged( + { thresholdValue: thresholdValue }, + SP_ENTITLEMENT_POOL_FORM, + { thresholdValue: thresholdValueValidation } + ); + } + }} + value={thresholdUnits} + label={i18n('Threshold Units')} + data-test-id="create-ep-threshold-units" + isValid={genericFieldInfo.thresholdUnits.isValid} + errorText={genericFieldInfo.thresholdUnits.errorText} + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map( + mtype => ( + + ) + )} + - let {name, description, operationalScope, thresholdUnits, thresholdValue, - increments, startDate, expiryDate} = data; - return ( - - - onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - data-test-id='create-ep-name' - type='text'/> - - - {}} - isMultiSelect={true} - onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}}, - SP_ENTITLEMENT_POOL_FORM)} - onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], - other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM)} - label={i18n('Operational Scope')} - data-test-id='create-ep-operational-scope' - type='select' - multiSelectedEnum={operationalScope && operationalScope.choices} - otherValue={operationalScope && operationalScope.other} - values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE} - isValid={genericFieldInfo.operationalScope.isValid} - errorText={genericFieldInfo.operationalScope.errorText} /> - - - onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Description')} - value={description} - data-test-id='create-ep-description' - type='textarea'/> - - -
- { - // setting the unit to the correct value - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({thresholdUnits: val}, SP_ENTITLEMENT_POOL_FORM); - // TODO make sure that the value is valid too - if(thresholdValue && thresholdValue !== '') { - onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{thresholdValue : thresholdValueValidation}); - }} - - } - value={thresholdUnits} - label={i18n('Threshold Units')} - data-test-id='create-ep-threshold-units' - isValid={genericFieldInfo.thresholdUnits.isValid} - errorText={genericFieldInfo.thresholdUnits.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype => - )} - - - onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM, - {thresholdValue : thresholdValueValidation})} - label={i18n('Threshold Value')} - isValid={genericFieldInfo.thresholdValue.isValid} - errorText={genericFieldInfo.thresholdValue.errorText} - data-test-id='create-ep-threshold-value' - value={thresholdValue} - type='text'/> -
- onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)} - label={i18n('Increments')} - value={increments} - data-test-id='create-ep-increments' - type='text'/> -
- onDataChanged( - {startDate: startDate ? startDate.format(DATE_FORMAT) : ''}, - SP_ENTITLEMENT_POOL_FORM, - {startDate: validateStartDate} - )} - isValid={genericFieldInfo.startDate.isValid} - errorText={genericFieldInfo.startDate.errorText} - selectsStart/> - { - onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, SP_ENTITLEMENT_POOL_FORM); - onDataChanged({startDate}, SP_ENTITLEMENT_POOL_FORM, {startDate: validateStartDate}); - }} - isValid={genericFieldInfo.expiryDate.isValid} - errorText={genericFieldInfo.expiryDate.errorText} - selectsEnd/> -
- - - ); + + onDataChanged( + { thresholdValue }, + SP_ENTITLEMENT_POOL_FORM, + { + thresholdValue: thresholdValueValidation + } + ) + } + label={i18n('Threshold Value')} + isValid={genericFieldInfo.thresholdValue.isValid} + errorText={genericFieldInfo.thresholdValue.errorText} + data-test-id="create-ep-threshold-value" + value={thresholdValue} + type="text" + /> +
+ + onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM) + } + label={i18n('Increments')} + value={increments} + data-test-id="create-ep-increments" + type="text" + /> +
+ + onDataChanged( + { + startDate: startDate + ? startDate.format(DATE_FORMAT) + : '' + }, + SP_ENTITLEMENT_POOL_FORM, + { startDate: validateStartDate } + ) + } + isValid={genericFieldInfo.startDate.isValid} + errorText={genericFieldInfo.startDate.errorText} + selectsStart + /> + { + onDataChanged( + { + expiryDate: expiryDate + ? expiryDate.format(DATE_FORMAT) + : '' + }, + SP_ENTITLEMENT_POOL_FORM + ); + onDataChanged( + { startDate }, + SP_ENTITLEMENT_POOL_FORM, + { + startDate: validateStartDate + } + ); + }} + isValid={genericFieldInfo.expiryDate.isValid} + errorText={genericFieldInfo.expiryDate.errorText} + selectsEnd + /> +
+ + + ); }; class EntitlementPoolsEditorView extends React.Component { + static propTypes = { + data: EntitlementPoolPropType, + previousData: EntitlementPoolPropType, + EPNames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: EntitlementPoolPropType, - previousData: EntitlementPoolPropType, - EPNames: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; - - static defaultProps = { - data: {} - }; - - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit - this.submit(); - } - } + static defaultProps = { + data: {} + }; - state = { - selectedTab: tabIds.GENERAL, - selectedLimit: '' - }; + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + // if form validation succeeded -> continue with submit + this.submit(); + } + } - render() { - let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCloseLimitEditor, limitsList = []} = this.props; - const {selectedTab} = this.state; - const isTabsDisabled = !data.id || !this.props.isFormValid; + state = { + selectedTab: tabIds.GENERAL, + selectedLimit: '' + }; - return ( -
- { - if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { - this.onAddLimit(); - } else { - this.setState({selectedTab: tabIndex}); - this.setState({selectedLimit: ''}); - onCloseLimitEditor(); - } - }} - invalidTabs={[]}> - - { - genericFieldInfo &&
this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) } - className='license-model-form entitlement-pools-form'> - this.validateName(value)} - validateStartDate={(value, state) => validateStartDate(value, state)} - thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/> - - } -
- - {selectedTab === tabIds.SP_LIMITS && - item.type === limitType.SERVICE_PROVIDER)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)}/>} - - - {selectedTab === tabIds.VENDOR_LIMITS && - item.type === limitType.VENDOR)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)}/>} - - { - selectedTab !== tabIds.GENERAL ? - - : -
// Render empty div to not break tabs - } - - - {!this.state.selectedLimit && - - } - - -
- ); - } + render() { + let { + data = {}, + onDataChanged, + isReadOnlyMode, + genericFieldInfo, + onCloseLimitEditor, + limitsList = [] + } = this.props; + const { selectedTab } = this.state; + const isTabsDisabled = !data.id || !this.props.isFormValid; - submit() { - const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props; - if (!formReady) { - this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM); - } else { - this.props.onSubmit({entitlementPool, previousEntitlementPool}); - } - } + return ( +
+ { + if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { + this.onAddLimit(); + } else { + this.setState({ selectedTab: tabIndex }); + this.setState({ selectedLimit: '' }); + onCloseLimitEditor(); + } + }} + invalidTabs={[]}> + + {genericFieldInfo && ( +
+ this.props.onValidateForm( + SP_ENTITLEMENT_POOL_FORM + ) + } + className="license-model-form entitlement-pools-form"> + + this.validateName(value) + } + validateStartDate={(value, state) => + validateStartDate(value, state) + } + thresholdValueValidation={(value, state) => + thresholdValueValidation(value, state) + } + /> + + )} +
+ + {selectedTab === tabIds.SP_LIMITS && ( + + item.type === limitType.SERVICE_PROVIDER + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + /> + )} + + + {selectedTab === tabIds.VENDOR_LIMITS && ( + item.type === limitType.VENDOR + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + /> + )} + + {selectedTab !== tabIds.GENERAL ? ( + + ) : ( +
+ ) // Render empty div to not break tabs + } + + + {!this.state.selectedLimit && ( + + )} + + +
+ ); + } - validateName(value) { - const {data: {id}, EPNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames}); + submit() { + const { + data: entitlementPool, + previousData: previousEntitlementPool, + formReady + } = this.props; + if (!formReady) { + this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM); + } else { + this.props.onSubmit({ entitlementPool, previousEntitlementPool }); + } + } - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')}; - } + validateName(value) { + const { data: { id }, EPNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: EPNames + }); - onSelectLimit(limit) { - if (limit.id === this.state.selectedLimit) { - this.setState({selectedLimit: ''}); - return; - } - this.setState({selectedLimit: limit.id}); - this.props.onOpenLimitEditor(limit); - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Entitlement pool by the name '" + + value + + "' already exists. Entitlement pool name must be unique" + ) + }; + } - onCloseLimitEditor() { - this.setState({selectedLimit: ''}); - this.props.onCloseLimitEditor(); - } + onSelectLimit(limit) { + if (limit.id === this.state.selectedLimit) { + this.setState({ selectedLimit: '' }); + return; + } + this.setState({ selectedLimit: limit.id }); + this.props.onOpenLimitEditor(limit); + } - onAddLimit() { - this.setState({selectedLimit: NEW_LIMIT_TEMP_ID}); - this.props.onOpenLimitEditor(); - } + onCloseLimitEditor() { + this.setState({ selectedLimit: '' }); + this.props.onCloseLimitEditor(); + } + onAddLimit() { + this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID }); + this.props.onOpenLimitEditor(); + } } export default EntitlementPoolsEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js index 8300594098..fd5fe6dd21 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js @@ -13,44 +13,74 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx'; -import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; -const mapStateToProps = ({licenseModel: {entitlementPool: {entitlementPoolEditor: {data}}, limitEditor}, currentScreen}) => { - let {props: {licenseModelId, version}} = currentScreen; - return { - parent: data, - limitEditor, - licenseModelId, - version - }; +const mapStateToProps = ({ + licenseModel: { + entitlementPool: { entitlementPoolEditor: { data } }, + limitEditor + }, + currentScreen +}) => { + let { props: { licenseModelId, version } } = currentScreen; + return { + parent: data, + limitEditor, + licenseModelId, + version + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onSubmit: (limit, entitlementPool, licenseModelId, version) => EntitlementPoolsActionHelper.submitLimit(dispatch, - { - limit, - entitlementPool, - licenseModelId, - version}), - onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({ - type: globalModalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=> EntitlementPoolsActionHelper.deleteLimit(dispatch, {limit, entitlementPool: parent, licenseModelId, version}).then(() => - selectedLimit === limit.id && onCloseLimitEditor() - ) - } - }) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onSubmit: (limit, entitlementPool, licenseModelId, version) => + EntitlementPoolsActionHelper.submitLimit(dispatch, { + limit, + entitlementPool, + licenseModelId, + version + }), + onDelete: ({ + limit, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + }) => + dispatch({ + type: globalModalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete {name}?', { + name: limit.name + }), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + EntitlementPoolsActionHelper.deleteLimit(dispatch, { + limit, + entitlementPool: parent, + licenseModelId, + version + }).then( + () => + selectedLimit === limit.id && + onCloseLimitEditor() + ) + } + }) + }; }; export default connect(mapStateToProps, mapActionsToProps)(Limits); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js index f1dc1f8542..819fb7d824 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js @@ -13,45 +13,60 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js'; -import EntitlementPoolsListEditorView, {generateConfirmationMsg} from './EntitlementPoolsListEditorView.jsx'; -import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js'; +import EntitlementPoolsListEditorView, { + generateConfirmationMsg +} from './EntitlementPoolsListEditorView.jsx'; +import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js'; -const mapStateToProps = ({licenseModel: {entitlementPool, licenseModelEditor}}) => { - - const {entitlementPoolsList} = entitlementPool; - const {data} = entitlementPool.entitlementPoolEditor; - const {vendorName} = licenseModelEditor.data; - - return { - vendorName, - entitlementPoolsList, - isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id), - }; +const mapStateToProps = ({ + licenseModel: { entitlementPool, licenseModelEditor } +}) => { + const { entitlementPoolsList } = entitlementPool; + const { data } = entitlementPool.entitlementPoolEditor; + const { vendorName } = licenseModelEditor.data; + return { + vendorName, + entitlementPoolsList, + isDisplayModal: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {licenseModelId, version}) => { - return { - onAddEntitlementPoolClick: () => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch), - onEditEntitlementPoolClick: entitlementPool => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version}), - onDeleteEntitlementPool: entitlementPool => dispatch({ - type: globalMoadlActions.GLOBAL_MODAL_WARNING, - data:{ - msg: generateConfirmationMsg(entitlementPool), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: () => EntitlementPoolsActionHelper.deleteEntitlementPool(dispatch, { - licenseModelId, - entitlementPoolId: entitlementPool.id, - version - }) - } - }) - }; +const mapActionsToProps = (dispatch, { licenseModelId, version }) => { + return { + onAddEntitlementPoolClick: () => + EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch), + onEditEntitlementPoolClick: entitlementPool => + EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, { + entitlementPool, + licenseModelId, + version + }), + onDeleteEntitlementPool: entitlementPool => + dispatch({ + type: globalMoadlActions.GLOBAL_MODAL_WARNING, + data: { + msg: generateConfirmationMsg(entitlementPool), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + EntitlementPoolsActionHelper.deleteEntitlementPool( + dispatch, + { + licenseModelId, + entitlementPoolId: entitlementPool.id, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsListEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + EntitlementPoolsListEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx index cc0cda1992..7a07f94bd5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx @@ -22,120 +22,162 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import EntitlementPoolsEditor from './EntitlementPoolsEditor.js'; -import {extractUnits} from './EntitlementPoolsConstants'; +import { extractUnits } from './EntitlementPoolsConstants'; class EntitlementPoolsListEditorView extends React.Component { - static propTypes = { - vendorName: PropTypes.string, - licenseModelId: PropTypes.string.isRequired, - entitlementPoolsList: PropTypes.array, - isReadOnlyMode: PropTypes.bool.isRequired, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - onAddEntitlementPoolClick: PropTypes.func, - onEditEntitlementPoolClick: PropTypes.func, - onDeleteEntitlementPool: PropTypes.func, - }; + static propTypes = { + vendorName: PropTypes.string, + licenseModelId: PropTypes.string.isRequired, + entitlementPoolsList: PropTypes.array, + isReadOnlyMode: PropTypes.bool.isRequired, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onAddEntitlementPoolClick: PropTypes.func, + onEditEntitlementPoolClick: PropTypes.func, + onDeleteEntitlementPool: PropTypes.func + }; - static defaultProps = { - entitlementPoolsList: [] - }; + static defaultProps = { + entitlementPoolsList: [] + }; - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props; - let {onAddEntitlementPoolClick} = this.props; - const {localFilter} = this.state; + render() { + let { + licenseModelId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode, + version + } = this.props; + let { onAddEntitlementPoolClick } = this.props; + const { localFilter } = this.state; - return ( -
- this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode}> - {this.filterList().map(entitlementPool => this.renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode))} - - - - {`${isModalInEditMode ? i18n('Edit Entitlement Pool') : i18n('Create New Entitlement Pool')}`} - - - { - isDisplayModal && ( - - ) - } - - -
- ); - } + return ( +
+ this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(entitlementPool => + this.renderEntitlementPoolListItem( + entitlementPool, + isReadOnlyMode + ) + )} + + + + {`${ + isModalInEditMode + ? i18n('Edit Entitlement Pool') + : i18n('Create New Entitlement Pool') + }`} + + + {isDisplayModal && ( + + )} + + +
+ ); + } - filterList() { - let {entitlementPoolsList} = this.props; - let {localFilter} = this.state; - if(localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return entitlementPoolsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return entitlementPoolsList; - } - } + filterList() { + let { entitlementPoolsList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return entitlementPoolsList.filter( + ({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return entitlementPoolsList; + } + } - renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) { - let {id, name, description, thresholdValue, thresholdUnits} = entitlementPool; - let {onEditEntitlementPoolClick, onDeleteEntitlementPool} = this.props; - return ( - onEditEntitlementPoolClick(entitlementPool)} - onDelete={() => onDeleteEntitlementPool(entitlementPool)} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode}> -
+ renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) { + let { + id, + name, + description, + thresholdValue, + thresholdUnits + } = entitlementPool; + let { + onEditEntitlementPoolClick, + onDeleteEntitlementPool + } = this.props; + return ( + onEditEntitlementPoolClick(entitlementPool)} + onDelete={() => onDeleteEntitlementPool(entitlementPool)} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode}> +
+
{i18n('Name')}
+
+
{name}
+
+
-
{i18n('Name')}
-
{name}
-
- -
-
{i18n('Entitlement')}
-
{thresholdValue && `${thresholdValue} ${extractUnits(thresholdUnits)}`}
-
- -
-
{i18n('Description')}
-
{description}
-
- - ); - } +
+
{i18n('Entitlement')}
+
+ {thresholdValue && + `${thresholdValue} ${extractUnits(thresholdUnits)}`} +
+
+
+
{i18n('Description')}
+
{description}
+
+ + ); + } } export default EntitlementPoolsListEditorView; export function generateConfirmationMsg(entitlementPoolToDelete) { - let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : ''; - let msg = i18n('Are you sure you want to delete "{poolName}"?', {poolName: poolName}); - let subMsg = entitlementPoolToDelete - && entitlementPoolToDelete.referencingFeatureGroups - && entitlementPoolToDelete.referencingFeatureGroups.length > 0 ? - i18n('This entitlement pool is associated with one or more feature groups') : - ''; - return ( -
-

{msg}

-

{subMsg}

-
- ); + let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : ''; + let msg = i18n('Are you sure you want to delete "{poolName}"?', { + poolName: poolName + }); + let subMsg = + entitlementPoolToDelete && + entitlementPoolToDelete.referencingFeatureGroups && + entitlementPoolToDelete.referencingFeatureGroups.length > 0 + ? i18n( + 'This entitlement pool is associated with one or more feature groups' + ) + : ''; + return ( +
+

{msg}

+

{subMsg}

+
+ ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js index fefd823207..3c8621d9d8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js @@ -13,19 +13,29 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './EntitlementPoolsConstants'; +import { actionTypes } from './EntitlementPoolsConstants'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.ADD_ENTITLEMENT_POOL: - return [...state, action.entitlementPool]; - case actionTypes.EDIT_ENTITLEMENT_POOL: - const indexForEdit = state.findIndex(entitlementPool => entitlementPool.id === action.entitlementPool.id); - return [...state.slice(0, indexForEdit), action.entitlementPool, ...state.slice(indexForEdit + 1)]; - case actionTypes.DELETE_ENTITLEMENT_POOL: - return state.filter(entitlementPool => entitlementPool.id !== action.entitlementPoolId); - default: - return state; - } + switch (action.type) { + case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.ADD_ENTITLEMENT_POOL: + return [...state, action.entitlementPool]; + case actionTypes.EDIT_ENTITLEMENT_POOL: + const indexForEdit = state.findIndex( + entitlementPool => + entitlementPool.id === action.entitlementPool.id + ); + return [ + ...state.slice(0, indexForEdit), + action.entitlementPool, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.DELETE_ENTITLEMENT_POOL: + return state.filter( + entitlementPool => + entitlementPool.id !== action.entitlementPoolId + ); + default: + return state; + } }; -- cgit 1.2.3-korg