summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js8
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx7
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx10
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx24
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx23
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx15
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx12
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx4
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx29
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js35
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);
-