aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
diff options
context:
space:
mode:
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.jsx222
1 files changed, 140 insertions, 82 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 4841d0335c..2667560935 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
@@ -18,99 +18,157 @@ 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 {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js';
+import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js';
-const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => {
- 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;
+const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => {
+ 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
- onDelete={onDelete}
- onSelect={onSelect}
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field limit-name'>
- <div className='text name'>{name}</div>
- </div>
+ return (
+ <ListEditorItemView
+ onDelete={onDelete}
+ onSelect={onSelect}
+ isReadOnlyMode={isReadOnlyMode}>
+ <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='text description'>{description}</div>
- </div>
+ <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'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
- </div>
- </ListEditorItemView>
- );
+ <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() {
+ const {
+ isReadOnlyMode = false,
+ limitEditor,
+ limitsList = [],
+ onCloseLimitEditor,
+ selectedLimit
+ } = this.props;
+ let limitsNames = {};
+ for (let i = 0; i < limitsList.length; i++) {
+ limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
+ }
+ return (
+ <div className="license-model-limits-view">
+ <ListEditorView isReadOnlyMode={isReadOnlyMode}>
+ {this.props.selectedLimit === NEW_LIMIT_TEMP_ID &&
+ limitEditor.data && (
+ <LimitEditor
+ limitsNames={limitsNames}
+ onCancel={onCloseLimitEditor}
+ onSubmit={() => this.submit()}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ {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.deleteLimit(limit)}
+ onSelect={
+ selectedLimit
+ ? undefined
+ : () => this.props.onSelectLimit(limit)
+ }
+ clickable={!selectedLimit}
+ isReadOnlyMode={isReadOnlyMode}
+ limit={limit}
+ />
+ {limit.id === selectedLimit &&
+ limitEditor.data && (
+ <LimitEditor
+ limitsNames={limitsNames}
+ onCancel={onCloseLimitEditor}
+ onSubmit={() => this.submit()}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </div>
+ ))}
+ </ListEditorView>
+ </div>
+ );
+ }
- state = {
- localFilter: ''
- };
+ submit() {
+ let {
+ onSubmit,
+ onCloseLimitEditor,
+ parent,
+ limitEditor,
+ licenseModelId,
+ version,
+ limitType
+ } = this.props;
+ onSubmit(
+ { type: limitType, ...limitEditor.data },
+ parent,
+ licenseModelId,
+ version
+ ).then(() => onCloseLimitEditor());
+ }
- render() {
- const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props;
- let limitsNames = {};
- for (let i = 0; i < limitsList.length; i++) {
- limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
- }
- return (
- <div className='license-model-limits-view'>
- <ListEditorView isReadOnlyMode={isReadOnlyMode}>
- {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data &&
- <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/>
- }
- {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.deleteLimit(limit)}
- onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)}
- clickable={!selectedLimit}
- isReadOnlyMode={isReadOnlyMode}
- limit={limit}/>
- {limit.id === selectedLimit && limitEditor.data &&
- <LimitEditor
- limitsNames={limitsNames}
- onCancel={onCloseLimitEditor}
- onSubmit={ () => this.submit()}
- isReadOnlyMode={isReadOnlyMode} />
- }
- </div> )}
- </ListEditorView>
+ deleteLimit(limit) {
+ let {
+ onDelete,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ } = this.props;
+ onDelete({
+ limit,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ });
+ }
- </div>
- );
- }
-
- submit() {
- let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;
- onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor());
- }
-
- deleteLimit(limit) {
- let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props;
- onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit});
- }
-
- filterList() {
- let {limitsList = []} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return limitsList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return limitsList;
- }
- }
+ filterList() {
+ let { limitsList = [] } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return limitsList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return limitsList;
+ }
+ }
}
export default Limits;