[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

19 files changed, 1198 insertions, 0 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
new file mode 100644
index 0000000000..1ca4f37988
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
@@ -0,0 +1,163 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 {connect} from 'react-redux';
+import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
+import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import LicenseModelOverviewView from './LicenseModelOverviewView.jsx';
+import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import licenseModelOverviewActionHelper from './licenseModelOverviewActionHelper.js';
+
+export const mapStateToProps = ({licenseModel: {licenseModelEditor, entitlementPool, licenseAgreement, featureGroup, licenseKeyGroup, licenseModelOverview}}) => {
+
+	let modalHeader, licensingDataList;
+	let isDisplayModal = false;
+
+	const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
+		let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(item => {return item.id === licenseKeyGroupId;});
+		if (curLicenseKeyGroup) {
+			accum.push({
+				...curLicenseKeyGroup,
+				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+			});
+		}
+		return accum;
+	};
+
+	const reduceEntitlementPools = (accum, entitlementPoolId) => {
+		let curEntitlementPool = entitlementPool.entitlementPoolsList.find(item => {return item.id === entitlementPoolId;});
+		if (curEntitlementPool) {
+			accum.push ({
+				...curEntitlementPool,
+				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+			});
+		}
+		return accum;
+	};
+
+	const reduceFeatureGroups = (accum, featureGroupId) => {
+		let curFeatureGroup = featureGroup.featureGroupsList.find(item => {return item.id === featureGroupId;});
+		if (curFeatureGroup) {
+			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = curFeatureGroup;
+			accum.push({
+				...curFeatureGroup,
+				itemType: overviewEditorHeaders.FEATURE_GROUP,
+				children: [
+					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
+					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
+				]
+			});
+		}
+		return accum;
+	};
+
+
+	const checkEP  = (accum, elem) => {
+		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
+			accum.push({
+				...elem,
+				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+			});
+		}
+		return accum;
+	};
+
+	const checkLG = (accum, elem) => {
+		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
+			accum.push({
+				...elem,
+				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+			});
+		}
+		return accum;
+	};
+
+	const checkFG = (accum, elem) => {
+		if (!elem.referencingLicenseAgreements || !elem.referencingLicenseAgreements.length) {
+			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = elem;
+			accum.push({
+				...elem,
+				itemType: overviewEditorHeaders.FEATURE_GROUP,
+
+				children: [
+					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
+					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
+				]
+
+			});
+		}
+		return accum;
+	};
+
+
+
+	const mapLicenseAgreementData = licenseAgreement => {
+		let {featureGroupsIds = []} = licenseAgreement;
+		return {
+			...licenseAgreement,
+			itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
+			children: featureGroupsIds.length ? featureGroupsIds.reduce(reduceFeatureGroups, []) : []
+		};
+	};
+
+	if (entitlementPool.entitlementPoolEditor && entitlementPool.entitlementPoolEditor.data) {
+		modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
+		isDisplayModal = true;
+	}else
+	if (licenseAgreement.licenseAgreementEditor && licenseAgreement.licenseAgreementEditor.data) {
+		modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
+		isDisplayModal = true;
+	}else
+	if (featureGroup.featureGroupEditor && featureGroup.featureGroupEditor.data) {
+		modalHeader = overviewEditorHeaders.FEATURE_GROUP;
+		isDisplayModal = true;
+	}else
+	if (licenseKeyGroup.licenseKeyGroupsEditor && licenseKeyGroup.licenseKeyGroupsEditor.data) {
+		modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
+		isDisplayModal = true;
+	}
+
+	if (licenseModelOverview.selectedTab === selectedButton.NOT_IN_USE) {
+		licensingDataList = [
+			...featureGroup.featureGroupsList.reduce(checkFG, []),
+			...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
+			...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
+		];
+	}else {
+		licensingDataList = licenseAgreement.licenseAgreementList && licenseAgreement.licenseAgreementList.length ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) : [];
+	}
+
+	return {
+		isReadOnlyMode: VersionControllerUtils.isReadOnly(licenseModelEditor.data),
+		isDisplayModal,
+		modalHeader,
+		licenseModelId: licenseModelEditor.data.id,
+		version: licenseModelEditor.data.version,
+		licensingDataList,
+		selectedTab: licenseModelOverview.selectedTab
+
+	};
+};
+
+const mapActionsToProps = (dispatch, {licenseModelId}) => {
+	return {
+		onCallVCAction: action => {
+			LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action});
+		},
+		onTabSelect: (buttonTab) => licenseModelOverviewActionHelper.selectVLMListView(dispatch,{buttonTab})
+	};
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(LicenseModelOverviewView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
new file mode 100644
index 0000000000..b5a27ed018
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
@@ -0,0 +1,42 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const overviewItems = keyMirror({
+	LICENSE_AGREEMENTS: 'License Agreements',
+	FEATURE_GROUPS: 'Feature Groups',
+	ENTITLEMENT_POOLS: 'Entitlement Pools',
+	LICENSE_KEY_GROUPS: 'License Key Groups'
+});
+
+export const overviewEditorHeaders = keyMirror({
+	LICENSE_AGREEMENT: 'License Agreement',
+	FEATURE_GROUP: 'Feature Group',
+	ENTITLEMENT_POOL: 'Entitlement Pool',
+	LICENSE_KEY_GROUP: 'License Key Group'
+});
+
+export const actionTypes = keyMirror({
+	LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
+	LM_DATA_CHANGED: null
+});
+
+export const selectedButton = keyMirror({
+	VLM_LIST_VIEW: null,
+	NOT_IN_USE: null
+});
+
+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
new file mode 100644
index 0000000000..d6c79ddb52
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
@@ -0,0 +1,105 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+import Modal from 'nfvo-components/modal/Modal.jsx';
+import classNames from 'classnames';
+
+import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.js';
+import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js';
+import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js';
+import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js';
+import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+
+import SummaryView from './SummaryView.jsx';
+import VLMListView from './VLMListView.jsx';
+import ListButtons from './summary/ListButtons.jsx';
+
+
+const setModalClassName = (modalHeader) => {
+	switch (modalHeader) {
+		case overviewEditorHeaders.ENTITLEMENT_POOL:
+			return 'entitlement-pools-modal';
+		case overviewEditorHeaders.LICENSE_AGREEMENT:
+			return 'license-agreement-modal';
+		case overviewEditorHeaders.FEATURE_GROUP:
+			return 'feature-group-modal';
+		case overviewEditorHeaders.LICENSE_KEY_GROUP:
+			return 'license-key-groups-modal';
+		default:
+			return '';
+	}
+};
+
+class LicenseModelOverviewView extends React.Component {
+
+	static propTypes = {
+		isDisplayModal: React.PropTypes.bool,
+		isReadOnlyMode: React.PropTypes.bool,
+		licenseModelId: React.PropTypes.string,
+		licensingDataList: React.PropTypes.array,
+		modalHeader: React.PropTypes.string,
+		selectedTab: React.PropTypes.symbol,
+		onTabSelect: React.PropTypes.func,
+		onCallVCAction: React.PropTypes.func,
+		onClose: React.PropTypes.func
+	};
+
+	render() {
+		let {isDisplayModal, modalHeader, licensingDataList, selectedTab, onTabSelect} = this.props;
+		let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
+
+		return(
+			<div className='license-model-overview'>
+				<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}/>
+					</div>
+					<VLMListView licensingDataList={licensingDataList} showInUse={selectedInUse}/>
+				</div>
+				{
+					isDisplayModal &&
+					<Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal', setModalClassName(modalHeader))}>
+						<Modal.Header>
+							<Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title>
+						</Modal.Header>
+						<Modal.Body>
+							{this.renderModalBody(modalHeader)}
+						</Modal.Body>
+					</Modal>
+				}
+			</div>
+		);
+	}
+
+	renderModalBody(modalHeader) {
+		let {licenseModelId, version} = this.props;
+		switch (modalHeader) {
+			case overviewEditorHeaders.ENTITLEMENT_POOL:
+				return <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={false}/>;
+			case overviewEditorHeaders.LICENSE_AGREEMENT:
+				return <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={false}/>;
+			case overviewEditorHeaders.FEATURE_GROUP:
+				return <FeatureGroupEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={false}/>;
+			case overviewEditorHeaders.LICENSE_KEY_GROUP:
+				return <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={false}/>;
+		}
+	}
+}
+
+export default  LicenseModelOverviewView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
new file mode 100644
index 0000000000..6fcdb477e6
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
@@ -0,0 +1,33 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+import {default as VendorDataView} from './summary/VendorDataView.js';
+import {default as SummaryCountList} from './summary/SummaryCountList.js';
+
+function SummaryView() {
+	return(
+		<div className='overview-top-section'>
+			<div className='overview-title'>{i18n('overview')}</div>
+			<div className='license-model-overview-top'>
+				<VendorDataView/>
+				<SummaryCountList/>
+			</div>
+		</div>
+	);
+}
+
+export default SummaryView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
new file mode 100644
index 0000000000..119008a849
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
@@ -0,0 +1,123 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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, {Component} from 'react';
+import {Collapse} from 'react-bootstrap';
+import LicenseAgreement from './listItems/LicenseAgreement.jsx';
+import EntitlementPool from './listItems/EntitlementPool.jsx';
+import FeatureGroup from './listItems/FeatureGroup.jsx';
+import LicenseKeyGroup from './listItems/LicenseKeyGroup.jsx';
+import {overviewEditorHeaders} from './LicenseModelOverviewConstants.js';
+
+class VLMListView extends Component {
+
+	static propTypes = {
+		licensingDataList: React.PropTypes.array,
+		showInUse: React.PropTypes.bool
+	};
+
+	state = {
+
+	};
+
+	render() {
+		let {licensingDataList = []} = this.props;
+		return (
+			<div className='vlm-list-view'>
+				<div>
+					<ul className='vlm-list' data-test-id='vlm-list'>
+						{licensingDataList.map(item => this.renderLicensingItem(item))}
+					</ul>
+				</div>
+			</div>
+		);
+	}
+
+	renderLicensingItem(item) {
+		switch (item.itemType) {
+			case overviewEditorHeaders.LICENSE_AGREEMENT :
+				return this.renderLicenseAgreementItem(item);
+			case overviewEditorHeaders.FEATURE_GROUP :
+				return this.renderFeatureGroupItem(item);
+			case overviewEditorHeaders.LICENSE_KEY_GROUP :
+				return this.renderLicenseKeyGroupItem(item);
+			case overviewEditorHeaders.ENTITLEMENT_POOL:
+				return this.renderEntitlementPoolItem(item);
+			default:
+				return;
+		}
+	}
+
+	renderLicenseAgreementItem(licenseAgreement) {
+		return (
+			<li  key={licenseAgreement.id}>
+				<LicenseAgreement
+					laData={licenseAgreement}
+					isCollapsed={this.state[licenseAgreement.id]}
+					onClick={event => this.updateCollapsable(event, licenseAgreement.id) }/>
+				<Collapse in={this.state[licenseAgreement.id]}>
+					<ul>
+						{licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))}
+					</ul>
+				</Collapse>
+			</li>
+		);
+	}
+
+	renderFeatureGroupItem(featureGroup) {
+		const {showInUse} = this.props;
+		return (
+			<li key={featureGroup.id}>
+				<FeatureGroup
+					fgData={featureGroup}
+					isCollapsed={this.state[featureGroup.id]}
+					onClick={event=> this.updateCollapsable(event, featureGroup.id) }/>
+				{
+					showInUse && <Collapse in={this.state[featureGroup.id]}>
+					<ul>
+						{featureGroup.children && featureGroup.children.map(item => this.renderLicensingItem(item))}
+
+					</ul>
+				</Collapse>
+				}
+			</li>
+		);
+	}
+
+	renderEntitlementPoolItem(entitlementPool) {
+		return (
+			<li key={entitlementPool.id}>
+				<EntitlementPool epData={entitlementPool}  />
+			</li>
+		);
+	}
+
+	renderLicenseKeyGroupItem(licenseKeyGroup) {
+		return (
+			<li key={licenseKeyGroup.id}>
+				<LicenseKeyGroup lkgData={licenseKeyGroup}  />
+			</li>
+		);
+	}
+
+	updateCollapsable(event, id) {
+		event.stopPropagation();
+		let obj = {};
+		obj[id] = !this.state[id];
+		this.setState(obj);
+	}
+}
+
+export default VLMListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
new file mode 100644
index 0000000000..f0286ba3bb
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
@@ -0,0 +1,39 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 {actionTypes} from './LicenseModelOverviewConstants.js';
+
+export default {
+	selectVLMListView(dispatch, {buttonTab}) {
+		dispatch({
+			type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
+			buttonTab
+		});
+	},
+
+	editDescriptionOpen(dispatch, {description}) {
+		dispatch({
+			type: actionTypes.LM_DATA_CHANGED,
+			description
+		});
+	},
+
+	editDescriptionClose(dispatch) {
+		dispatch({
+			type: actionTypes.LM_DATA_CHANGED,
+			description: false
+		});
+	}
+};
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
new file mode 100644
index 0000000000..94977b40d1
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
@@ -0,0 +1,53 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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, {Component} from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {extractValue, extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js';
+import ArrowCol from './listItemsComponents/ArrowCol.jsx';
+import ItemInfo from './listItemsComponents/ItemInfo.jsx';
+import IconCol from './listItemsComponents/IconCol.jsx';
+import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+
+class EntitlementPool extends Component {
+	render() {
+		let {epData: {name, description, manufacturerReferenceNumber}} = this.props;
+		return (
+			<div className='vlm-list-item vlm-list-item-ep' data-test-id='vlm-list-item-ep'>
+				<ArrowCol/>
+				<IconCol className='ep-icon'/>
+				<ItemInfo name={name} description={description}/>
+				<AdditionalDataCol>
+					<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'/>
+				</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
new file mode 100644
index 0000000000..8dbd46a29e
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
@@ -0,0 +1,50 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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, {Component} from 'react';
+import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js';
+import ArrowCol from './listItemsComponents/ArrowCol.jsx';
+import ItemInfo from './listItemsComponents/ItemInfo.jsx';
+import IconCol from './listItemsComponents/IconCol.jsx';
+
+class FeatureGroup extends Component {
+	render() {
+		let {fgData: {name, description, children = []}, isCollapsed, onClick} = 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'/>
+				<ItemInfo name={name} description={description}>
+					<div className='children-count'>
+						<span className='count-value'>
+							Entitlement Pools:
+							<span data-test-id='vlm-list-ep-count-value'>
+								{`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`}
+							</span>
+						</span>
+						<span className='count-value'>
+								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>
+			</div>
+		);
+	}
+}
+
+export default FeatureGroup;
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
new file mode 100644
index 0000000000..dd4686d330
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
@@ -0,0 +1,53 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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, {Component} from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
+import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js';
+import ArrowCol from './listItemsComponents/ArrowCol.jsx';
+import ItemInfo from './listItemsComponents/ItemInfo.jsx';
+import IconCol from './listItemsComponents/IconCol.jsx';
+import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+
+class LicenseAgreement extends Component {
+	render() {
+		let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick} = 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'/>
+				<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>
+					</div>
+				</ItemInfo>
+				<AdditionalDataCol>
+					<AdditionalDataElement
+						name={i18n('License Model Type')}
+						value={this.extractValue(licenseTerm)}/>
+				</AdditionalDataCol>
+			</div>
+		);
+	}
+
+	extractValue(item) {
+		if (item === undefined) {return '';} //TODO fix it later
+
+		return  item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+	}
+}
+
+export default LicenseAgreement;
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
new file mode 100644
index 0000000000..9722b83336
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
@@ -0,0 +1,48 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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, {Component} from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
+import ArrowCol from './listItemsComponents/ArrowCol.jsx';
+import ItemInfo from './listItemsComponents/ItemInfo.jsx';
+import IconCol from './listItemsComponents/IconCol.jsx';
+import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+
+class LicenseKeyGroup extends Component {
+	render() {
+		let {lkgData: {name, description, operationalScope, type}} = this.props;
+		return (
+			<div className='vlm-list-item vlm-list-item-lkg' data-test-id='vlm-list-item-lkg'>
+				<ArrowCol/>
+				<IconCol className='lkg-icon'/>
+				<ItemInfo name={name} description={description}/>
+				<AdditionalDataCol>
+					<AdditionalDataElement
+						className='vlm-list-item-operational-scope'
+						name={i18n('Operational Scope')}
+						value={operationalScope && getOperationalScopes(operationalScope)}/>
+					<AdditionalDataElement
+						className='vlm-list-item-group-type'
+						name={i18n('Type')}
+						value={extractValue(type)}/>
+				</AdditionalDataCol>
+			</div>
+		);
+	}
+
+}
+
+export default LicenseKeyGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
new file mode 100644
index 0000000000..5b5daafb4f
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
@@ -0,0 +1,51 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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';
+
+function AdditionalDataCol({children}) {
+	return (
+		<div className='list-item-section list-item-additional-data-col'>
+			<div className='additional-data-col-border'></div>
+			<div className='additional-data'>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+AdditionalDataCol.propTypes = {
+	children: React.PropTypes.oneOfType([
+		React.PropTypes.arrayOf(React.PropTypes.node),
+		React.PropTypes.node
+	])
+};
+
+function AdditionalDataElement({className, name, value}) {
+	return (
+		<div className={className}>
+			<span className='additional-data-name'>{name}: </span>
+			<span className='additional-data-value'>{value}</span>
+		</div>
+	);
+}
+
+AdditionalDataElement.propTypes = {
+	name: React.PropTypes.string,
+	value: React.PropTypes.string,
+	className: React.PropTypes.string
+};
+
+export {AdditionalDataCol, AdditionalDataElement};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
new file mode 100644
index 0000000000..a5eb9d27dd
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 classNames from 'classnames';
+
+function ArrowCol ({isCollapsed, length}) {
+	return (
+		<div className='list-item-section list-item-arrow-col'>
+			<div className={classNames('arrow-icon', {'chevron': length > 0},
+				{'down': (length > 0 && isCollapsed)},
+				{'right': (length > 0 && (!isCollapsed))})} >
+			</div>
+		</div>
+	);
+}
+
+ArrowCol.propTypes = {
+	isCollapsed: React.PropTypes.bool,
+	length: React.PropTypes.number
+};
+
+export default ArrowCol;
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
new file mode 100644
index 0000000000..7fd7fcb88a
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
@@ -0,0 +1,26 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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';
+
+function IconCol({className}) {
+	return (
+		<div className='list-item-section list-item-icon-col'>
+			<div className={className}></div>
+		</div>
+	);
+}
+
+export default IconCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
new file mode 100644
index 0000000000..655a0dd4a8
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
@@ -0,0 +1,39 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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';
+
+function ItemInfo({name, description, children}) {
+	return (
+		<div className='list-item-section vlm-item-info'>
+			<div className='vlm-list-item-title'>
+				<div className='item-name' data-test-id='vlm-list-item-name'>{name}</div>
+				{children}
+			</div>
+			<div className='vlm-list-item-description'>{description}</div>
+		</div>
+	);
+}
+
+ItemInfo.propTypes = {
+	name: React.PropTypes.string,
+	description: React.PropTypes.string,
+	children: React.PropTypes.oneOfType([
+		React.PropTypes.arrayOf(React.PropTypes.node),
+		React.PropTypes.node
+	])
+};
+
+export default ItemInfo;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
new file mode 100644
index 0000000000..0c0103fc10
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
@@ -0,0 +1,56 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 Input from 'nfvo-components/input/validation/Input.jsx';
+
+class LicenseModelDescriptionEdit extends React.Component {
+	render() {
+		let {onDataChanged, description, genericFieldInfo} = this.props;
+		let saveButtonClassName = (genericFieldInfo.description.isValid) ? 'description-save' : 'description-save disabled';
+		return(
+			<div className='vendor-description-edit'>
+
+				<Input
+					onChange={description => onDataChanged({description})}
+					value={description}
+					isValid={genericFieldInfo.description.isValid}
+					errorText={genericFieldInfo.description.errorText}
+					className='description-edit-textarea'
+					type='textarea'/>
+				<div className='buttons-row'>
+					<div className='buttons-wrapper'>
+						<div onClick={() => this.onClose()} className='description-button' data-test-id='vlm-summary-vendor-desc-cancel-btn'>cancel</div>
+						<div onClick={() => this.submit()}  className={saveButtonClassName} data-test-id='vlm-summary-vendor-desc-save-btn'>save</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	onClose() {
+		this.props.onClose();
+	}
+
+	submit() {
+		let {onSubmit, data, description} = this.props;
+		onSubmit({
+			...data,
+			description: description
+		});
+	}
+}
+
+export default LicenseModelDescriptionEdit;
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
new file mode 100644
index 0000000000..730ccb33f1
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -0,0 +1,39 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 {selectedButton} from '../LicenseModelOverviewConstants.js';
+
+function ListButtons ({onTabSelect, selectedInUse}) {
+	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>
+	);
+}
+
+ListButtons.propTypes = {
+	onTabSelect: React.PropTypes.func,
+	selectedInUse: React.PropTypes.bool
+};
+
+export default ListButtons;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
new file mode 100644
index 0000000000..66f2cc6838
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
@@ -0,0 +1,31 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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';
+
+function  SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) {
+	return(
+		<div className='summary-count-item'>
+			<div className='summary-name-and-count' onClick={onNavigate}>
+				<span className='item-name' onClick={onNavigate}>{name}</span>
+				<span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span>
+			</div>
+			<div className={isReadOnlyMode ? 'add-button disabled' : 'add-button'}   onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
+		</div>
+	);
+}
+
+export default SummaryCountItem;
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
new file mode 100644
index 0000000000..c69a092d23
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
@@ -0,0 +1,126 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 {connect} from 'react-redux';
+
+import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+
+import OnboardingActionHelper from '../../../OnboardingActionHelper.js';
+import EntitlementPoolsActionHelper from '../../entitlementPools/EntitlementPoolsActionHelper.js';
+import LicenseAgreementActionHelper from '../../licenseAgreement/LicenseAgreementActionHelper.js';
+import LicenseKeyGroupsActionHelper from '../../licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
+import FeatureGroupsActionHelper from '../../featureGroups/FeatureGroupsActionHelper.js';
+
+import {overviewItems} from '../LicenseModelOverviewConstants.js';
+import SummaryCountItem from './SummaryCountItem.jsx';
+
+export const mapStateToProps = ({licenseModel: {licenseModelEditor, licenseAgreement: {licenseAgreementList},
+	featureGroup: {featureGroupsList}, entitlementPool: {entitlementPoolsList}, licenseKeyGroup: {licenseKeyGroupsList}}}) => {
+
+	let {vendorName, description, id, version} = licenseModelEditor.data;
+
+	let isReadOnlyMode = VersionControllerUtils.isReadOnly(licenseModelEditor.data);
+
+	let counts = [
+		{name: overviewItems.LICENSE_AGREEMENTS, count: licenseAgreementList.length},
+		{name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length},
+		{name: overviewItems.ENTITLEMENT_POOLS, count: entitlementPoolsList.length},
+		{name: overviewItems.LICENSE_KEY_GROUPS, count: licenseKeyGroupsList.length},
+	];
+	return {
+		vendorName,
+		licenseModelId: id,
+		description,
+		counts,
+		isReadOnlyMode,
+		version
+	};
+};
+
+const mapActionsToProps = (dispatch) => {
+	return {
+		onEditorOpenClick: (name, licenseModelId, version) => {
+			switch (name) {
+				case overviewItems.ENTITLEMENT_POOLS:
+					EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch);
+					break;
+				case overviewItems.FEATURE_GROUPS:
+					FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version});
+					break;
+				case overviewItems.LICENSE_AGREEMENTS:
+					LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version});
+					break;
+				case overviewItems.LICENSE_KEY_GROUPS:
+					LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch);
+					break;
+				default:
+					break;
+			}
+		},
+		onNavigateClick: ({name, licenseModelId, version}) => {
+			switch (name) {
+				case overviewItems.ENTITLEMENT_POOLS:
+					OnboardingActionHelper.navigateToEntitlementPools(dispatch, {licenseModelId, version});
+					break;
+				case overviewItems.FEATURE_GROUPS:
+					OnboardingActionHelper.navigateToFeatureGroups(dispatch, {licenseModelId, version});
+					break;
+				case overviewItems.LICENSE_AGREEMENTS:
+					OnboardingActionHelper.navigateToLicenseAgreements(dispatch, {licenseModelId, version});
+					break;
+				case overviewItems.LICENSE_KEY_GROUPS:
+					OnboardingActionHelper.navigateToLicenseKeyGroups(dispatch, {licenseModelId, version});
+					break;
+				default:
+					break;
+			}
+		}
+	};
+};
+
+export class SummaryCountList extends React.Component {
+
+	render() {
+		let {counts} = this.props;
+		return(
+			<div className='summary-count-list'>
+				{counts.map(item => this.renderItem(item))}
+			</div>
+		);
+	}
+
+	renderItem(item){
+		const {name, count} = item;
+		const {isReadOnlyMode} = this.props;
+		return(
+			<SummaryCountItem isReadOnlyMode={isReadOnlyMode} name={name} counter={count} onNavigate={() => this.onNavigate(name)} onAdd={() => this.onAdd(name)} key={name} />
+		);
+	}
+
+	onAdd(name) {
+		let {onEditorOpenClick, licenseModelId, isReadOnlyMode, version} = this.props;
+		if (!isReadOnlyMode) {
+			onEditorOpenClick(name, licenseModelId, version);
+		}
+	}
+
+	onNavigate(name) {
+		let {onNavigateClick, licenseModelId, version} = this.props;
+		onNavigateClick({licenseModelId, name, version});
+	}
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(SummaryCountList);
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
new file mode 100644
index 0000000000..1d65ab9869
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -0,0 +1,86 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 {connect} from 'react-redux';
+
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
+import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
+import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
+import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx';
+import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js';
+
+export const mapStateToProps = ({licenseModel: {licenseModelEditor: {data}, licenseModelOverview: {descriptionEditor: {data: descriptionData, genericFieldInfo} }}}) => {
+	let description = (descriptionData && descriptionData.description) ? descriptionData.description : null;
+	let isReadOnlyMode = VersionControllerUtils.isReadOnly(data);
+	return {
+		data,
+		description,
+		genericFieldInfo,
+		isReadOnlyMode
+	};
+};
+
+const mapActionsToProps = (dispatch) => {
+	return {
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}),
+		onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
+		onSubmit: (licenseModel) => {
+			licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
+			LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel});
+		},
+		onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description})
+	};
+};
+
+
+
+export class VendorDataView extends React.Component {
+	render() {
+		let {data: {vendorName}, description, isReadOnlyMode} = this.props;
+		return (
+			<div className='vendor-data-view'>
+				<div className='vendor-title'>vendor</div>
+				<div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div>
+				{
+					description && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription()
+				}
+			</div>
+		);
+	}
+
+	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>
+		);
+	}
+
+	renderDescriptionEdit() {
+		let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props;
+		return(
+			<LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/>
+		);
+	}
+
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);
+