diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx index ec5a1dff72..b144f63968 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx @@ -17,40 +17,43 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; -import LimitEditor from './LimitEditor.js'; +import LimitEditor from './LimitEditor.js'; import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js'; const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => { - const {name, description, metric, value, aggregationFunction = '', time = ''} = limit; + const {name, description, value, metric, aggregationFunction = '', time = ''} = limit; const timeLabel = time ? `per ${time}` : ''; + let metricOption = selectValues.METRIC.find(item => item.enum === metric); + metricOption = metricOption ? metricOption.title : metric; + return ( - <ListEditorItemView + <ListEditorItemView onDelete={onDelete} onSelect={onSelect} isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field limit-name'> + <div className='list-editor-item-view-field limit-name'> <div className='text name'>{name}</div> </div> - <div className='list-editor-item-view-field limit-description'> + <div className='list-editor-item-view-field limit-description'> <div className='text description'>{description}</div> </div> - <div className='list-editor-item-view-field limit-metric-details'> - <div className='text description'>{`${selectValues.METRIC.find(item => item.enum === metric).title} ${value} ${aggregationFunction} ${timeLabel}`}</div> - </div> + <div className='list-editor-item-view-field limit-metric-details'> + <div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> + </div> </ListEditorItemView> ); }; class Limits extends React.Component { - + state = { localFilter: '' }; - render() { + render() { const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props; let limitsNames = {}; for (let i = 0; i < limitsList.length; i++) { @@ -66,26 +69,26 @@ class Limits extends React.Component { {limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>} {limitsList.map(limit => <div key={limit.id} className='limit-item-wrapper'> - <LimitItem - onDelete={() => this.delete(limit)} + <LimitItem + onDelete={() => this.deleteLimit(limit)} onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)} - clickable={!selectedLimit} - isReadOnlyMode={isReadOnlyMode} + clickable={!selectedLimit} + isReadOnlyMode={isReadOnlyMode} limit={limit}/> {limit.id === selectedLimit && limitEditor.data && <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()}/>} </div> )} </ListEditorView> - + </div> ); } submit() { - let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; + let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor()); } - delete(limit) { + deleteLimit(limit) { let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props; onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}); } |