diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview')
10 files changed, 99 insertions, 68 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js index b5a27ed018..56b23384a7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js @@ -34,9 +34,9 @@ export const actionTypes = keyMirror({ LM_DATA_CHANGED: null }); -export const selectedButton = keyMirror({ - VLM_LIST_VIEW: null, - NOT_IN_USE: null -}); +export const selectedButton = { + VLM_LIST_VIEW: 'VLM_LIST_VIEW', + NOT_IN_USE: 'NOT_IN_USE' +}; export const VLM_DESCRIPTION_FORM = 'VLMDEWSCRIPTIONFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx index d6c79ddb52..15f6c2d1bb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx @@ -52,7 +52,7 @@ class LicenseModelOverviewView extends React.Component { licenseModelId: React.PropTypes.string, licensingDataList: React.PropTypes.array, modalHeader: React.PropTypes.string, - selectedTab: React.PropTypes.symbol, + selectedTab: React.PropTypes.string, onTabSelect: React.PropTypes.func, onCallVCAction: React.PropTypes.func, onClose: React.PropTypes.func @@ -67,14 +67,13 @@ class LicenseModelOverviewView extends React.Component { <SummaryView/> <div className={classNames('overview-list-section ', !selectedInUse ? 'overview-list-orphans' : '' )}> <div className='vlm-list-tab-panel'> - <div className='section-title'>{selectedInUse ? i18n('VLM List View') : i18n('Entities not in Use')}</div> - <ListButtons onTabSelect={onTabSelect} selectedInUse={selectedInUse}/> + <ListButtons onTabSelect={onTabSelect} selectedTab={selectedTab}/> </div> <VLMListView licensingDataList={licensingDataList} showInUse={selectedInUse}/> </div> { isDisplayModal && - <Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal', setModalClassName(modalHeader))}> + <Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal license-model-modal', setModalClassName(modalHeader))}> <Modal.Header> <Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title> </Modal.Header> diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx index 119008a849..ec05e37681 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx @@ -66,7 +66,8 @@ class VLMListView extends Component { <LicenseAgreement laData={licenseAgreement} isCollapsed={this.state[licenseAgreement.id]} - onClick={event => this.updateCollapsable(event, licenseAgreement.id) }/> + onClick={event => this.updateCollapsable(event, licenseAgreement.id) } + isOrphan={!this.props.showInUse}/> <Collapse in={this.state[licenseAgreement.id]}> <ul> {licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))} @@ -83,7 +84,8 @@ class VLMListView extends Component { <FeatureGroup fgData={featureGroup} isCollapsed={this.state[featureGroup.id]} - onClick={event=> this.updateCollapsable(event, featureGroup.id) }/> + onClick={event=> this.updateCollapsable(event, featureGroup.id) } + isOrphan={!this.props.showInUse}/> { showInUse && <Collapse in={this.state[featureGroup.id]}> <ul> @@ -99,7 +101,7 @@ class VLMListView extends Component { renderEntitlementPoolItem(entitlementPool) { return ( <li key={entitlementPool.id}> - <EntitlementPool epData={entitlementPool} /> + <EntitlementPool epData={entitlementPool} isOrphan={!this.props.showInUse}/> </li> ); } @@ -107,7 +109,7 @@ class VLMListView extends Component { renderLicenseKeyGroupItem(licenseKeyGroup) { return ( <li key={licenseKeyGroup.id}> - <LicenseKeyGroup lkgData={licenseKeyGroup} /> + <LicenseKeyGroup lkgData={licenseKeyGroup} isOrphan={!this.props.showInUse}/> </li> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx index 94977b40d1..34d2ee6db5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx @@ -15,7 +15,7 @@ */ import React, {Component} from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {extractValue, extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js'; +import {extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; @@ -23,31 +23,23 @@ import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/Ad class EntitlementPool extends Component { render() { - let {epData: {name, description, manufacturerReferenceNumber}} = this.props; + let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props; return ( - <div className='vlm-list-item vlm-list-item-ep' data-test-id='vlm-list-item-ep'> - <ArrowCol/> - <IconCol className='ep-icon'/> + <div className={`vlm-list-item vlm-list-item-ep ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-ep'> + {!isOrphan && <ArrowCol/>} + <IconCol className='ep-icon' text='EP'/> <ItemInfo name={name} description={description}/> <AdditionalDataCol> - <AdditionalDataElement + {thresholdValue && <AdditionalDataElement className='vlm-list-item-entitlement-metric' name={i18n('Entitlement')} - value={this.getEntitlement()}/> - <AdditionalDataElement - name={i18n('Manufacturer Reference Number')} - value={manufacturerReferenceNumber} - className='vlm-list-item-sku'/> + value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/> + } </AdditionalDataCol> </div> ); } - getEntitlement() { - let {epData: {entitlementMetric, aggregationFunction, time, thresholdValue, thresholdUnits}} = this.props; - return `${extractValue(aggregationFunction)} ${extractValue(entitlementMetric)} per ${extractValue(time)} ${thresholdValue} ${extractUnits(thresholdUnits)}`; - } - } export default EntitlementPool; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx index 8dbd46a29e..6d97dea358 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx @@ -18,30 +18,41 @@ import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; import IconCol from './listItemsComponents/IconCol.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; class FeatureGroup extends Component { render() { - let {fgData: {name, description, children = []}, isCollapsed, onClick} = this.props; + let {fgData: {name, manufacturerReferenceNumber, description, children = []}, isCollapsed, onClick, isOrphan} = this.props; return ( - <div onClick={e => onClick(e)} className='vlm-list-item vlm-list-item-fg' data-test-id='vlm-list-item-fg'> - <ArrowCol isCollapsed={isCollapsed} length={children.length} /> - <IconCol className='fg-icon'/> + <div + onClick={e => onClick(e)} + className={`vlm-list-item vlm-list-item-fg ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''}`} data-test-id='vlm-list-item-fg'> + {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />} + <IconCol className='fg-icon' text='FG'/> <ItemInfo name={name} description={description}> <div className='children-count'> <span className='count-value'> - Entitlement Pools: + {i18n('Entitlement Pools: ')} <span data-test-id='vlm-list-ep-count-value'> {`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`} </span> </span> + <span className='fg-pipeline-separator'>|</span> <span className='count-value'> - License Key Groups: + {i18n('License Key Groups: ')} <span data-test-id='vlm-list-lkg-count-value'> {`${children.filter(child => child.itemType === overviewEditorHeaders.LICENSE_KEY_GROUP).length}`} </span> </span> </div> </ItemInfo> + <AdditionalDataCol> + <AdditionalDataElement + name={i18n('Manufacturer Reference Number')} + value={manufacturerReferenceNumber} + className='vlm-list-item-sku'/> + </AdditionalDataCol> </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx index dd4686d330..dfbbe20d69 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx @@ -15,7 +15,7 @@ */ import React, {Component} from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; +import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js'; import ArrowCol from './listItemsComponents/ArrowCol.jsx'; import ItemInfo from './listItemsComponents/ItemInfo.jsx'; @@ -24,14 +24,17 @@ import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/Ad class LicenseAgreement extends Component { render() { - let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick} = this.props; + let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick, isOrphan} = this.props; return ( - <div onClick={e => onClick(e)} className='vlm-list-item vlm-list-item-la' data-test-id='vlm-list-la-item'> - <ArrowCol isCollapsed={isCollapsed} length={children.length} /> - <IconCol className='la-icon'/> + <div + onClick={e => onClick(e)} + className={`vlm-list-item vlm-list-item-la ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''} `} + data-test-id='vlm-list-la-item'> + {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />} + <IconCol className='la-icon' text='LA'/> <ItemInfo name={name} description={description}> <div className='children-count'> - <span className='count-value'>Feature Groups: <span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span> + <span className='count-value'>{i18n('Feature Groups: ')}<span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span> </div> </ItemInfo> <AdditionalDataCol> diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx index 9722b83336..b1036aae23 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx @@ -23,17 +23,17 @@ import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/Ad class LicenseKeyGroup extends Component { render() { - let {lkgData: {name, description, operationalScope, type}} = this.props; + let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props; return ( - <div className='vlm-list-item vlm-list-item-lkg' data-test-id='vlm-list-item-lkg'> - <ArrowCol/> - <IconCol className='lkg-icon'/> + <div className={`vlm-list-item vlm-list-item-lkg ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-lkg'> + {!isOrphan && <ArrowCol/>} + <IconCol className='lkg-icon' text='LKG'/> <ItemInfo name={name} description={description}/> <AdditionalDataCol> - <AdditionalDataElement + {operationalScope && operationalScope.choices && <AdditionalDataElement className='vlm-list-item-operational-scope' name={i18n('Operational Scope')} - value={operationalScope && getOperationalScopes(operationalScope)}/> + value={getOperationalScopes(operationalScope)}/>} <AdditionalDataElement className='vlm-list-item-group-type' name={i18n('Type')} diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx index 7fd7fcb88a..826248e510 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx @@ -15,10 +15,10 @@ */ import React from 'react'; -function IconCol({className}) { +function IconCol({className, text}) { return ( <div className='list-item-section list-item-icon-col'> - <div className={className}></div> + <div className={`overview-list-icon ${className ? className : ''}`}>{text}</div> </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx index 730ccb33f1..3d81aa5d5c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx @@ -15,19 +15,26 @@ */ import React from 'react'; import {selectedButton} from '../LicenseModelOverviewConstants.js'; +import Tabs from 'sdc-ui/lib/react/Tabs.js'; +import Tab from 'sdc-ui/lib/react/Tab.js'; +import i18n from 'nfvo-utils/i18n/i18n.js'; -function ListButtons ({onTabSelect, selectedInUse}) { +function ListButtons ({onTabSelect, selectedTab}) { return ( - <div className='overview-buttons-section'> - <div onClick={()=>onTabSelect(selectedButton.VLM_LIST_VIEW)} - className={selectedInUse ? 'button-vlm-list-view vlm-list-icon selected' : 'button-vlm-list-view vlm-list-icon' } - data-test-id='vlm-overview-vlmlist-tab'></div> - <div onClick={()=>onTabSelect(selectedButton.NOT_IN_USE)} - className={selectedInUse ? 'button-vlm-list-view entities-list-icon' : 'button-vlm-list-view entities-list-icon selected' } - data-test-id='vlm-overview-orphans-tab' > - </div> - - </div> + <Tabs + onTabClick={(tabId) => onTabSelect(tabId)} + activeTab={selectedTab} + className='overview-buttons-section' + type='header' > + <Tab + tabId={selectedButton.VLM_LIST_VIEW} + title={i18n('Connections List')} + data-test-id='vlm-overview-vlmlist-tab' /> + <Tab + tabId={selectedButton.NOT_IN_USE} + title={i18n('Orphans List')} + data-test-id='vlm-overview-orphans-tab' /> + </Tabs> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js index 1d65ab9869..87559901b3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js @@ -13,9 +13,11 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React from 'react'; +import React, {Component} from 'react'; import {connect} from 'react-redux'; +import Tooltip from 'react-bootstrap/lib/Tooltip.js'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js'; import LicenseModelActionHelper from '../../LicenseModelActionHelper.js'; @@ -46,9 +48,7 @@ const mapActionsToProps = (dispatch) => { }; }; - - -export class VendorDataView extends React.Component { +export class VendorDataView extends Component { render() { let {data: {vendorName}, description, isReadOnlyMode} = this.props; return ( @@ -62,13 +62,16 @@ export class VendorDataView extends React.Component { ); } + renderDescription() { let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props; return ( - <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}> - <div className='description-data' data-test-id='vlm-summary-vendor-description'> - {description} - </div> + <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}> + {this.renderOverlay( + <div className='description-data' data-test-id='vlm-summary-vendor-description'> + {description} + </div> + )} </div> ); } @@ -80,7 +83,21 @@ export class VendorDataView extends React.Component { ); } + renderOverlay(children) { + let {data: {description}, isReadOnlyMode} = this.props; + if (isReadOnlyMode) { + return ( + <OverlayTrigger + placement='bottom' + overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>} + delayShow={400}> + {children} + </OverlayTrigger> + ); + } + return children; + } + } export default connect(mapStateToProps, mapActionsToProps)(VendorDataView); - |