diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems')
8 files changed, 268 insertions, 169 deletions
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 34d2ee6db5..60eba401c7 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 @@ -13,33 +13,46 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {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'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class EntitlementPool extends Component { - render() { - let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props; - return ( - <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> - {thresholdValue && <AdditionalDataElement - className='vlm-list-item-entitlement-metric' - name={i18n('Entitlement')} - value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/> - } - </AdditionalDataCol> - </div> - ); - } - + render() { + let { + epData: { name, description, thresholdValue, thresholdUnits }, + isOrphan + } = this.props; + return ( + <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> + {thresholdValue && ( + <AdditionalDataElement + className="vlm-list-item-entitlement-metric" + name={i18n('Entitlement')} + value={`${thresholdValue} ${extractUnits( + thresholdUnits + )}`} + /> + )} + </AdditionalDataCol> + </div> + ); + } } 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 6d97dea358..df1d813408 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 @@ -13,49 +13,83 @@ * 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 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'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class FeatureGroup extends Component { - render() { - 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 ${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'> - {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'> - {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> - ); - } + render() { + 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 ${ + 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"> + {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"> + {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> + ); + } } 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 index dfbbe20d69..b409776c27 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 @@ -13,44 +13,73 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; -import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js'; +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'; import IconCol from './listItemsComponents/IconCol.jsx'; -import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class LicenseAgreement extends Component { - render() { - 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 ${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'>{i18n('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> - ); - } + render() { + 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 ${ + 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"> + {i18n('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 + extractValue(item) { + if (item === undefined) { + return ''; + } //TODO fix it later - return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : ''; - } + 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 index b1036aae23..555acf8dbe 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 @@ -13,36 +13,53 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.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'; +import { + AdditionalDataCol, + AdditionalDataElement +} from './listItemsComponents/AdditionalDataCol.jsx'; class LicenseKeyGroup extends Component { - render() { - let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props; - return ( - <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> - {operationalScope && operationalScope.choices && <AdditionalDataElement - className='vlm-list-item-operational-scope' - name={i18n('Operational Scope')} - value={getOperationalScopes(operationalScope)}/>} - <AdditionalDataElement - className='vlm-list-item-group-type' - name={i18n('Type')} - value={extractValue(type)}/> - </AdditionalDataCol> - </div> - ); - } - + render() { + let { + lkgData: { name, description, operationalScope, type }, + isOrphan + } = this.props; + return ( + <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> + {operationalScope && + operationalScope.choices && ( + <AdditionalDataElement + className="vlm-list-item-operational-scope" + name={i18n('Operational Scope')} + value={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 index ffc0991354..0f9c783eac 100644 --- 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 @@ -16,37 +16,35 @@ import React from 'react'; import PropTypes from 'prop-types'; -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> - ); +function AdditionalDataCol({ children }) { + return ( + <div className="list-item-section list-item-additional-data-col"> + <div className="additional-data-col-border" /> + <div className="additional-data">{children}</div> + </div> + ); } AdditionalDataCol.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]) + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + 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> - ); +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: PropTypes.string, - value: PropTypes.string, - className: PropTypes.string + name: PropTypes.string, + value: PropTypes.string, + className: PropTypes.string }; -export {AdditionalDataCol, AdditionalDataElement}; +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 index 29aec64bdd..de12eae7d5 100644 --- 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 @@ -17,20 +17,24 @@ import React from 'react'; import PropTypes from 'prop-types'; 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> - ); +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> + ); } ArrowCol.propTypes = { - isCollapsed: PropTypes.bool, - length: PropTypes.number + isCollapsed: PropTypes.bool, + length: 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 index 826248e510..61eeb03496 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,12 +15,14 @@ */ import React from 'react'; -function IconCol({className, text}) { - return ( - <div className='list-item-section list-item-icon-col'> - <div className={`overview-list-icon ${className ? className : ''}`}>{text}</div> - </div> - ); +function IconCol({ className, text }) { + return ( + <div className="list-item-section list-item-icon-col"> + <div className={`overview-list-icon ${className ? className : ''}`}> + {text} + </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 index 95ae123974..2d2cc8f754 100644 --- 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 @@ -16,25 +16,27 @@ import React from 'react'; import PropTypes from 'prop-types'; -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> - ); +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: PropTypes.string, - description: PropTypes.string, - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]) + name: PropTypes.string, + description: PropTypes.string, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]) }; export default ItemInfo; |