From 8f13330349a9a78b4cd2e32218237955f86fb4d8 Mon Sep 17 00:00:00 2001 From: svishnev Date: Mon, 6 Aug 2018 23:08:39 +0300 Subject: ui user feedback 1810 Enhance LKG & EP to include MRN Enhance EP & LKG UI to display Invariant UUID & UUID Remove MRN from FG Issue-ID: SDC-1524 Change-Id: Id6259f746ba4b4dcd5684d58d66f0df769107589 Signed-off-by: svishnev --- .../EntitlementPoolsActionHelper.js | 77 +++---- .../entitlementPools/EntitlementPoolsConstants.js | 16 +- .../EntitlementPoolsEditorReducer.js | 10 +- .../EntitlementPoolsEditorView.jsx | 213 ++----------------- .../EntitlementPoolsListEditorView.jsx | 14 +- .../EntitlementPoolsListReducer.js | 19 +- .../entitlementPools/components/FormContent.jsx | 234 +++++++++++++++++++++ 7 files changed, 307 insertions(+), 276 deletions(-) create mode 100644 openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx (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 51f353f7d9..ef705d67e4 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -13,6 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ + import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js'; @@ -39,7 +40,8 @@ function postEntitlementPool(licenseModelId, entitlementPool, version) { increments: entitlementPool.increments, time: entitlementPool.time, startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate + expiryDate: entitlementPool.expiryDate, + manufacturerReferenceNumber: entitlementPool.manufacturerReferenceNumber }); } @@ -59,7 +61,9 @@ function putEntitlementPool( increments: entitlementPool.increments, time: entitlementPool.time, startDate: entitlementPool.startDate, - expiryDate: entitlementPool.expiryDate + expiryDate: entitlementPool.expiryDate, + manufacturerReferenceNumber: + entitlementPool.manufacturerReferenceNumber } ); } @@ -119,7 +123,7 @@ function putLimit(licenseModelId, entitlementPoolId, version, limit) { ); } -export default { +const EntitlementPoolsActionHelper = { fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) { return fetchEntitlementPoolsList(licenseModelId, version).then( response => @@ -148,23 +152,20 @@ export default { }); }, - deleteEntitlementPool( + async deleteEntitlementPool( dispatch, { licenseModelId, entitlementPoolId, version } ) { - return deleteEntitlementPool( + await deleteEntitlementPool(licenseModelId, entitlementPoolId, version); + + await ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + + await EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, { licenseModelId, - entitlementPoolId, version - ).then(() => { - dispatch({ - type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL, - entitlementPoolId - }); - return ItemsHelper.checkItemStatus(dispatch, { - itemId: licenseModelId, - versionId: version.id - }); }); }, @@ -182,46 +183,28 @@ export default { }); }, - saveEntitlementPool( + async saveEntitlementPool( dispatch, { licenseModelId, previousEntitlementPool, entitlementPool, version } ) { if (previousEntitlementPool) { - return putEntitlementPool( + await 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 - }); - }); + await postEntitlementPool(licenseModelId, entitlementPool, version); } + await ItemsHelper.checkItemStatus(dispatch, { + itemId: licenseModelId, + versionId: version.id + }); + await EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, { + licenseModelId, + version + }); }, hideDeleteConfirm(dispatch) { @@ -291,3 +274,5 @@ export default { }); } }; + +export default EntitlementPoolsActionHelper; 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 dbb6b447a9..ab0f3dd100 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,16 +20,12 @@ import InputOptions, { } 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: 'ENTITLEMENT_POOLS_LIST_LOADED', entitlementPoolsEditor: { - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, - LIMITS_LIST_LOADED: null + OPEN: 'epEditor/OPEN', + CLOSE: 'epEditor/CLOSE', + DATA_CHANGED: 'epEditor/DATA_CHANGED', + LIMITS_LIST_LOADED: 'epEditor/LIMITS_LIST_LOADED' } }); 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 f773fa1c37..eb9cd51346 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -80,6 +80,14 @@ export default (state = {}, action) => { isValid: true, errorText: '', validations: [] + }, + manufacturerReferenceNumber: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 100 } + ] } }, data: action.entitlementPool 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 c74354c5a4..d5ca81cfac 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx @@ -19,21 +19,19 @@ import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; -import Input from 'nfvo-components/input/validation/Input.jsx'; 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 ModalButtons from 'sdc-app/onboarding/licenseModel/components/ModalButtons.jsx'; + import { 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 Tabs from 'sdc-ui/lib/react/Tabs.js'; import Tab from 'sdc-ui/lib/react/Tab.js'; import EntitlementPoolsLimits from './EntitlementPoolsLimits.js'; @@ -41,6 +39,7 @@ import { limitType, NEW_LIMIT_TEMP_ID } from '../limits/LimitEditorConstants.js'; +import EntitlementPoolsFormContent from './components/FormContent.jsx'; const EntitlementPoolPropType = PropTypes.shape({ id: PropTypes.string, @@ -53,178 +52,6 @@ const EntitlementPoolPropType = PropTypes.shape({ expiryDate: PropTypes.string }); -const EntitlementPoolsFormContent = ({ - data, - genericFieldInfo, - onDataChanged, - validateName, - thresholdValueValidation, - validateStartDate -}) => { - let { - name, - description, - 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" - /> - - -
- { - // 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({ 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" - /> - - - - 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, @@ -317,6 +144,7 @@ class EntitlementPoolsEditorView extends React.Component { )} + - - {!this.state.selectedLimit && ( - - )} - - + ); } - submit() { + submit = () => { const { data: entitlementPool, previousData: previousEntitlementPool, @@ -412,7 +229,7 @@ class EntitlementPoolsEditorView extends React.Component { } else { this.props.onSubmit({ entitlementPool, previousEntitlementPool }); } - } + }; validateName(value) { const { data: { id }, EPNames } = this.props; 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 7a07f94bd5..0648d6632d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -122,7 +122,8 @@ class EntitlementPoolsListEditorView extends React.Component { name, description, thresholdValue, - thresholdUnits + thresholdUnits, + manufacturerReferenceNumber } = entitlementPool; let { onEditEntitlementPoolClick, @@ -149,7 +150,14 @@ class EntitlementPoolsListEditorView extends React.Component { `${thresholdValue} ${extractUnits(thresholdUnits)}`} - +
+
+ {i18n('Manufacturer Reference Number')} +
+
+ {manufacturerReferenceNumber} +
+
{i18n('Description')}
{description}
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 3c8621d9d8..e37c9925f2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -18,23 +18,6 @@ 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; } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx new file mode 100644 index 0000000000..531b6b73b2 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx @@ -0,0 +1,234 @@ +/*! + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import { SP_ENTITLEMENT_POOL_FORM } from '../EntitlementPoolsConstants.js'; +import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js'; +import { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js'; +import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx'; + +export const EntitlementPoolsFormContent = ({ + data, + genericFieldInfo, + onDataChanged, + validateName, + thresholdValueValidation, + validateStartDate +}) => { + let { + name, + description, + thresholdUnits, + thresholdValue, + increments, + startDate, + expiryDate, + manufacturerReferenceNumber, + id, + versionUUID + } = 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" + /> + + + { + // 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({ 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" + /> + + + + 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( + { manufacturerReferenceNumber }, + SP_ENTITLEMENT_POOL_FORM + ) + } + isValid={ + genericFieldInfo.manufacturerReferenceNumber.isValid + } + isRequired={true} + errorText={ + genericFieldInfo.manufacturerReferenceNumber.errorText + } + label={i18n('Manufacturer Reference Number')} + data-test-id="create-ep-manufacturerReferenceNumber-value" + value={manufacturerReferenceNumber} + 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 + /> +
+ + {id && versionUUID && } + + ); +}; + +EntitlementPoolsFormContent.propTypes = { + data: PropTypes.object, + genericFieldInfo: PropTypes.object, + onDataChanged: PropTypes.func, + validateName: PropTypes.func, + thresholdValueValidation: PropTypes.func, + validateStartDate: PropTypes.func +}; + +export default EntitlementPoolsFormContent; -- cgit 1.2.3-korg