Merge "[SDC] OnBoard with enabled tests and features"

5 files changed, 152 insertions, 80 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
index f70f917725..5c4e50d673 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -7,16 +7,24 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Validator from 'nfvo-utils/Validator.js';
+import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
+import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
 	name: React.PropTypes.string,
 	description: React.PropTypes.string,
-	metric: React.PropTypes.string,
-	value: React.PropTypes.number,
+	metric: React.PropTypes.shape({
+		choice: React.PropTypes.string,
+		other: React.PropTypes.string
+	}),
+	value: React.PropTypes.string,
 	aggregationFunction: React.PropTypes.string,
 	time: React.PropTypes.string,
-	unit: React.PropTypes.number
+	unit: React.PropTypes.shape({
+		choice: React.PropTypes.string,
+		other: React.PropTypes.string
+	})
 });
 
 class LimitEditor extends React.Component {
@@ -33,8 +41,8 @@ class LimitEditor extends React.Component {
 		onCancel: React.PropTypes.func.isRequired
 	};
 
-	componentDidUpdate(prevProps) {				
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { 
+	componentDidUpdate(prevProps) {
+		if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
 			this.submit();
 		}
 	}
@@ -44,21 +52,21 @@ class LimitEditor extends React.Component {
 		let {name, description, metric, value, aggregationFunction, time, unit} = data;
 		return (
 			<div className='limit-editor'>
-			{!data.id && 
+			{!data.id &&
 			<div className='limit-editor-title'>
 				{data.name ? data.name : i18n('NEW LIMIT')}
 			</div>}
 			{
-				genericFieldInfo && 
+				genericFieldInfo &&
 				<Form
 					ref='validationForm'
-					hasButtons={false}				
+					hasButtons={false}
 					isValid={isFormValid}
 					formReady={formReady}
 					onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
 					labledButtons={false}
 					isReadOnlyMode={isReadOnlyMode}
-					className='limit-editor-form'>					
+					className='limit-editor-form'>
 					<GridSection className='limit-editor-form-grid-section'>
 						<GridItem colSpan={2}>
 							<Input
@@ -83,24 +91,23 @@ class LimitEditor extends React.Component {
 								type='text'/>
 						</GridItem>
 						<GridItem colSpan={2}>
-							<Input
-								onChange={e => {									
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({metric: val}, LIMITS_FORM_NAME);}
-								}
+							<InputOptions
+								onInputChange={()=>{}}
+								isMultiSelect={false}
 								isRequired={true}
-								value={metric}
+								onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
+									LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})}
+								onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
+									other: metric}}, LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})}
 								label={i18n('Metric')}
 								data-test-id='limit-editor-metric'
+								type='select'
+								required={true}
+								selectedEnum={metric && metric.choice}
+								otherValue={metric && metric.other}
+								values={selectValues.METRIC}
 								isValid={genericFieldInfo.metric.isValid}
-								errorText={genericFieldInfo.metric.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.METRIC.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
+								errorText={genericFieldInfo.metric.errorText} />
 						</GridItem>
 						<GridItem>
 							<Input
@@ -111,22 +118,30 @@ class LimitEditor extends React.Component {
 								isValid={genericFieldInfo.value.isValid}
 								errorText={genericFieldInfo.value.errorText}
 								isRequired={true}
-								type='number'/>
+								type='text'/>
 						</GridItem>
 						<GridItem>
-							<Input
-								onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)}
+							<InputOptions
+								onInputChange={()=>{}}
+								isMultiSelect={false}
+								isRequired={false}
+								onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
+									LIMITS_FORM_NAME)}
+								onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
+									other: unit}}, LIMITS_FORM_NAME)}
 								label={i18n('Units')}
 								data-test-id='limit-editor-units'
-								value={unit}
+								type='select'
+								required={false}
+								selectedEnum={unit && unit.choice}
+								otherValue={unit && unit.other}
+								values={selectValues.UNIT}
 								isValid={genericFieldInfo.unit.isValid}
-								errorText={genericFieldInfo.unit.errorText}
-								isRequired={false}
-								type='number'/>
+								errorText={genericFieldInfo.unit.errorText} />
 						</GridItem>
 						<GridItem colSpan={2}>
 							<Input
-								onChange={e => {									
+								onChange={e => {
 									const selectedIndex = e.target.selectedIndex;
 									const val = e.target.options[selectedIndex].value;
 									onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
@@ -145,7 +160,7 @@ class LimitEditor extends React.Component {
 						</GridItem>
 						<GridItem>
 							<Input
-								onChange={e => {									
+								onChange={e => {
 									const selectedIndex = e.target.selectedIndex;
 									const val = e.target.options[selectedIndex].value;
 									onDataChanged({time: val}, LIMITS_FORM_NAME);}
@@ -160,15 +175,15 @@ class LimitEditor extends React.Component {
 								type='select' >
 								{selectValues.TIME.map(mtype =>
 									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>							
+							</Input>
 						</GridItem>
 					</GridSection>
 					<GridSection className='limit-editor-buttons'>
-						<Button btnType='outline'  disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>	
+						<Button btnType='outline'  disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
 						<Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
-					</GridSection>						
-				</Form>	
-			}	
+					</GridSection>
+				</Form>
+			}
 			</div>
 		);
 	}
@@ -181,6 +196,24 @@ class LimitEditor extends React.Component {
 		{isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
 	}
 
+	validateChoiceWithOther(value) {
+		let chosen = value.choice;
+		// if we have an empty multiple select we have a problem since it's required
+		if (value.choices) {
+			if (value.choices.length === 0) {
+				return  Validator.validate('field', '', [{type: 'required', data: true}]);
+			} else {
+				// continuing validation with the first chosen value in case we have the 'Other' field
+				chosen = value.choices[0];
+			}
+		}
+		if (chosen !== optionInputOther.OTHER) {
+			return  Validator.validate('field', chosen, [{type: 'required', data: true}]);
+		} else { // when 'Other' was chosen, validate other value
+			return  Validator.validate('field', value.other, [{type: 'required', data: true}]);
+		}
+	}
+
 	submit() {
 		if (!this.props.formReady) {
 			this.props.onValidateForm(LIMITS_FORM_NAME);
@@ -190,4 +223,4 @@ class LimitEditor extends React.Component {
 	}
 }
 
-export default LimitEditor;
\ No newline at end of file
+export default LimitEditor;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
index 09c64ada62..8ac845a1a7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
@@ -14,17 +14,41 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './LimitEditorConstants.js';
+import {actionTypes, selectValues} from './LimitEditorConstants.js';
+import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 
 const LimitEditorActionHelper = {
 	openLimitsEditor(dispatch, {limit}) {
-		dispatch({type: actionTypes.OPEN, limitItem: limit});
+		let modifiedLimit = {...limit};
+		if (limit && limit.metric) {
+			modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC);
+		}
+		if (limit && limit.unit) {
+			modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT);
+		}
+		dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit});
 	},
 
 	closeLimitsEditor(dispatch) {
 		dispatch({type: actionTypes.CLOSE});
+	},
+
+	createChoiceObject(value, optionsList) {
+		let option = optionsList.find(function(item) { return item.enum === value; });
+		if (!option) {
+			return {
+				choice: optionInputOther.OTHER,
+				other: value
+			};
+		}
+		else {
+			return {
+				choice: value,
+				other: ''
+			};
+		}
 	}
 };
 
-export default LimitEditorActionHelper;
\ No newline at end of file
+export default LimitEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
index 1bef286442..9829e696c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
@@ -13,18 +13,25 @@ export const LIMITS_FORM_NAME = 'LIMITSFORM';
 export const selectValues = {
 	METRIC: [
 		{enum: '', title: i18n('please select…')},
-		{enum: 'Software_Instances_Count', title: 'Software Instances'},
-		{enum: 'Core', title: 'Core'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Trunks', title: 'Trunks'},
-		{enum: 'User', title: 'User'},
-		{enum: 'Subscribers', title: 'Subscribers'},
-		{enum: 'Tenants', title: 'Tenants'},
-		{enum: 'Tokens', title: 'Tokens'},
-		{enum: 'Seats', title: 'Seats'},
-		{enum: 'Units_TB', title: 'Units-TB'},
-		{enum: 'Units_GB', title: 'Units-GB'},
-		{enum: 'Units_MB', title: 'Units-MB'}
+		{enum: 'BWTH', title: 'BWTH'},
+		{enum: 'Country', title: 'Country'},
+		{enum: 'Session', title: 'Session'},
+		{enum: 'LoB', title: 'LoB'},
+		{enum: 'Site', title: 'Site'},
+		{enum: 'Usage', title: 'Usage'}
+	],
+	UNIT: [
+		{enum: '', title: i18n('please select…')},
+		{enum: 'trunk', title: 'Trunks'},
+		{enum: 'user', title: 'Users'},
+		{enum: 'subscriber', title: 'Subscribers'},
+		{enum: 'session', title: 'Sessions'},
+		{enum: 'tenant', title: 'Tenants'},
+		{enum: 'token', title: 'Tokens'},
+		{enum: 'seats', title: 'Seats'},
+		{enum: 'TB', title: 'TB'},
+		{enum: 'GB', title: 'GB'},
+		{enum: 'MB', title: 'MB'}
 	],
 	AGGREGATION_FUNCTION: [
 		{enum: '', title: i18n('please select…')},
@@ -33,11 +40,14 @@ export const selectValues = {
 	],
 	TIME: [
 		{enum: '', title: i18n('please select…')},
-		{enum: 'Hour', title: 'Hour'},
 		{enum: 'Day', title: 'Day'},
-		{enum: 'Month', title: 'Month'}
+		{enum: 'Month', title: 'Month'},
+		{enum: 'Hour', title: 'Hour'},
+		{enum: 'Minute', title: 'Minute'},
+		{enum: 'Second', title: 'Second'},
+		{enum: 'Milli-Second', title: 'Milli-Second'}
 	]
-	
+
 };
 
 export const limitType = {
@@ -46,7 +56,9 @@ export const limitType = {
 };
 
 export const defaultState = {
-	LIMITS_EDITOR_DATA: {}
+	LIMITS_EDITOR_DATA: {
+		metric: {choice: '', other: ''},
+	}
 };
 
-export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
\ No newline at end of file
+export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
index 2499093af2..de9e7c8c38 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
@@ -20,7 +20,7 @@ export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.OPEN:
 			return {
-				...state,				
+				...state,
 				data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA,
 				formReady: null,
 				formName: LIMITS_FORM_NAME,
@@ -38,17 +38,17 @@ export default (state = {}, action) => {
 					'metric' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}]
+						validations: []
 					},
 					'value' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'numeric', data: true}, {type: 'minimum', data: 0}]
+						validations: [{type: 'required', data: true}]
 					},
 					'unit' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'numeric', data: true}]
+						validations: []
 					},
 					'aggregationFunction' : {
 						isValid: true,
@@ -67,4 +67,4 @@ export default (state = {}, action) => {
 		default:
 			return state;
 	}
-};
\ No newline at end of file
+};
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});
 	}