[SDC] Full OnBoard health-check and NFoD support

Change-Id: I606f8a52c7e6d2bd5558f824957d890e552c5423
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

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);
-