diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components')
49 files changed, 2195 insertions, 1464 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js index 3b8bc4f171..2ae9ad0bae 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js @@ -1,44 +1,43 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentsConstants.js'; +import {actionTypes, forms} from './SoftwareProductComponentsConstants.js'; export default (state = {}, action) => { switch (action.type) { - case actionTypes.COMPONENT_UPDATE: - return { - ...state, - data: action.component - }; - case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE: - return { - ...state, - qdata: action.payload.qdata || state.qdata, - qschema: action.payload.qschema || state.qschema - }; - case actionTypes.COMPONENT_DATA_CHANGED: + case actionTypes.COMPONENT_LOAD: return { ...state, - data: { - ...state.data, - ...action.deltaData + formReady: null, + formName: forms.ALL_SPC_FORMS, + genericFieldInfo: { + 'displayName' : { + isValid: true, + errorText: '', + validations: [] + }, + 'vfcCode' : { + isValid: true, + errorText: '', + validations: [] + }, + 'description' : { + isValid: true, + errorText: '', + validations: [] + } } }; default: diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js index e53b2ecafe..9b3c9eaa73 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js @@ -1,56 +1,51 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './SoftwareProductComponentsConstants.js'; +import {actionTypes, COMPONENTS_QUESTIONNAIRE, forms} from './SoftwareProductComponentsConstants.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -function baseUrl(softwareProductId) { +function baseUrl(softwareProductId, version) { + const versionId = version.id; const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components`; + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`; } function fetchSoftwareProductComponents(softwareProductId, version) { - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}${versionQuery}`); + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); } -function putSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, vspComponent) { - return RestAPIUtil.save(`${baseUrl(softwareProductId)}/${vspComponentId}/questionnaire`, vspComponent); +function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent); } -function fetchSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, version){ - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}/${vspComponentId}/questionnaire${versionQuery}`); +function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){ + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`); } -function fetchSoftwareProductComponent(softwareProductId, vspComponentId, version){ - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}/${vspComponentId}${versionQuery}`); +function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){ + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`); } -function putSoftwareProductComponent(softwareProductId, vspComponentId, vspComponent) { - return RestAPIUtil.save(`${baseUrl(softwareProductId)}/${vspComponentId}`, { +function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, { name: vspComponent.name, displayName: vspComponent.displayName, + vfcCode: vspComponent.vfcCode, description: vspComponent.description }); } @@ -65,27 +60,19 @@ const SoftwareProductComponentsActionHelper = { }); }, - componentDataChanged(dispatch, {deltaData}) { - dispatch({ - type: actionTypes.COMPONENT_DATA_CHANGED, - deltaData - }); - }, - - - updateSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId, componentData, qdata}) { + updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) { return Promise.all([ - SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, qdata}), - SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, vspComponentId, componentData}) + SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}), + SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) ]); }, - updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, qdata}) { - return putSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, qdata); + updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) { + return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata); }, - updateSoftwareProductComponentData(dispatch, {softwareProductId, vspComponentId, componentData}) { - return putSoftwareProductComponent(softwareProductId, vspComponentId, componentData).then(() => dispatch({ + updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) { + return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({ type: actionTypes.COMPONENTS_LIST_EDIT, component: { id: vspComponentId, @@ -94,36 +81,36 @@ const SoftwareProductComponentsActionHelper = { })); }, - - fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, version}) { - return fetchSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, version).then(response => { - dispatch({ - type: actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE, - payload: { - qdata: response.data ? JSON.parse(response.data) : {}, - qschema: JSON.parse(response.schema) - } - }); + fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId}) { + return fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => { + ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema)}}); }); }, - fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId, version}) { - return fetchSoftwareProductComponent(softwareProductId, vspComponentId, version).then(response => { - dispatch({ - type: actionTypes.COMPONENT_UPDATE, - component: response.data - }); + fetchSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId}) { + dispatch({ + type: actionTypes.COMPONENT_LOAD }); + return Promise.all([ + fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => { + ValidationHelper.dataChanged(dispatch,{deltaData: response.data, formName: forms.ALL_SPC_FORMS}); + return response; + }), + fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => { + ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema)}}); + }) + ]); }, - componentQuestionnaireUpdated(dispatch, {data}) { + + clearComponentsStore(dispatch) { dispatch({ - type: actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE, - payload: { - qdata: data - } + type: actionTypes.COMPONENTS_LIST_UPDATE, + componentsList: [] }); - }, + } }; export default SoftwareProductComponentsActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js index dee517e5d1..9307b099ed 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js @@ -1,31 +1,24 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 actionTypes = keyMirror({ COMPONENTS_LIST_UPDATE: null, COMPONENTS_LIST_EDIT: null, - COMPONENT_UPDATE: null, - COMPONENT_DATA_CHANGED: null, - COMPONENT_QUESTIONNAIRE_UPDATE: null + COMPONENT_LOAD: null }); export const storageConstants = keyMirror({ @@ -35,12 +28,18 @@ export const storageConstants = keyMirror({ } }); +export const forms = keyMirror({ + ALL_SPC_FORMS: null, + NIC_EDIT_FORM: null +}); + +export const COMPONENTS_QUESTIONNAIRE = 'component'; + export const navigationItems = keyMirror({ STORAGE: 'Storage', PROCESS_DETAILS: 'Process Details', MONITORING: 'Monitoring', NETWORK: 'Network', COMPUTE: 'Compute', - NETWORK: 'Network', LOAD_BALANCING: 'High Availability & Load Balancing' }); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js index f1c1ed1fcc..f789a92c6f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 SoftwareProductComponentsListView from './SoftwareProductComponentsListView.jsx'; import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; @@ -37,9 +32,9 @@ const mapStateToProps = ({softwareProduct}) => { }; -const mapActionToProps = (dispatch, {version}) => { +const mapActionToProps = (dispatch) => { return { - onComponentSelect: ({id: softwareProductId, componentId}) => { + onComponentSelect: ({id: softwareProductId, componentId, version}) => { OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version }); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js index b91362a0cf..c7aaca5573 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentsConstants.js'; export default (state = [], action) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx index 0c0ba0f646..c28831fbde 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -1,8 +1,24 @@ +/*! + * 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 ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; +import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; const ComponentPropType = React.PropTypes.shape({ id: React.PropTypes.string, @@ -43,8 +59,9 @@ class SoftwareProductComponentsListView extends React.Component { title={i18n('Virtual Function Components')} filterValue={localFilter} placeholder={i18n('Filter Components')} - onFilter={filter => this.setState({localFilter: filter})} - isReadOnlyMode={isReadOnlyMode}> + onFilter={value => this.setState({localFilter: value})} + isReadOnlyMode={isReadOnlyMode} + twoColumns> {this.filterList().map(component => this.renderComponentsListItem(component))} </ListEditorView> ); @@ -52,20 +69,18 @@ class SoftwareProductComponentsListView extends React.Component { renderComponentsListItem(component) { let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id}, onComponentSelect} = this.props; + let {currentSoftwareProduct: {id, version}, onComponentSelect} = this.props; return ( <ListEditorItemView key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} className='list-editor-item-view' - onSelect={() => onComponentSelect({id, componentId})}> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Component')}</div> + onSelect={() => onComponentSelect({id, componentId, version})}> + <ListEditorItemViewField> <div className='name'>{displayName}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Description')}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> <div className='description'>{description}</div> - </div> + </ListEditorItemViewField> </ListEditorItemView> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js index 7ac1c707ab..e97477b54d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js @@ -1,51 +1,46 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {qdata, qschema}} = softwareProductComponents; + let {componentEditor: {qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); - let minNumberOfVMsSelectedByUser = 0; - if(qdata && qdata.compute && qdata.compute.numOfVMs){ - minNumberOfVMsSelectedByUser = qdata.compute.numOfVMs.minimum || 0; - } - return { qdata, - qschema, - isReadOnlyMode, - minNumberOfVMsSelectedByUser + dataMap, + qgenericFieldInfo, + isReadOnlyMode }; }; -const mapActionToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => { return { - onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}), - onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});} + onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, customValidations: customValidations, + qName: COMPONENTS_QUESTIONNAIRE}), + onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});}, + qValidateData: (data, customValidations) => ValidationHelper.qValidateData(dispatch, {data, customValidations: customValidations, + qName: COMPONENTS_QUESTIONNAIRE}) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx index 3bad147117..8c197f0d49 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx @@ -1,128 +1,71 @@ +/*! + * 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 ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx'; - +import Form from 'nfvo-components/input/validation/Form.jsx'; +import VmSizing from './computeComponents/VmSizing.jsx'; +import NumberOfVms from './computeComponents/NumberOfVms.jsx'; +import GuestOs from './computeComponents/GuestOs.jsx'; +import Validator from 'nfvo-utils/Validator.js'; class SoftwareProductComponentComputeView extends React.Component { static propTypes = { - qdata: React.PropTypes.object, - qschema: React.PropTypes.object, + dataMap: React.PropTypes.object, + qgenericFieldInfo: React.PropTypes.object, isReadOnlyMode: React.PropTypes.bool, - minNumberOfVMsSelectedByUser: React.PropTypes.number, onQDataChanged: React.PropTypes.func.isRequired, + qValidateData: React.PropTypes.func.isRequired, onSubmit: React.PropTypes.func.isRequired }; render() { - let {qdata, qschema, isReadOnlyMode, minNumberOfVMsSelectedByUser, onQDataChanged, onSubmit} = this.props; + let {qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData, onSubmit} = this.props; return ( <div className='vsp-component-questionnaire-view'> - <ValidationForm - ref='computeValidationForm' + { qgenericFieldInfo && <Form + ref={ (form) => { this.form = form; }} + formReady={null} + isValid={true} hasButtons={false} onSubmit={() => onSubmit({qdata})} className='component-questionnaire-validation-form' - isReadOnlyMode={isReadOnlyMode} - onDataChanged={onQDataChanged} - data={qdata} - schema={qschema}> - - <div className='section-title'>{i18n('VM Sizing')}</div> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Number of CPUs')} - pointer={'/compute/vmSizing/numOfCPUs'}/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('File System Size (GB)')} - pointer={'/compute/vmSizing/fileSystemSizeGB'}/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Persistent Storage/Volume Size (GB)')} - pointer={'/compute/vmSizing/persistentStorageVolumeSize'}/> - </div> - <ValidationInput - type='text' - label={i18n('I/O Operations (per second)')} - pointer={'/compute/vmSizing/IOOperationsPerSec'}/> - </div> - </div> - <div className='section-title'>{i18n('Number of VMs')}</div> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Minimum')} - pointer={'/compute/numOfVMs/minimum'}/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Maximum')} - pointer={'/compute/numOfVMs/maximum'} - validations={{minValue: minNumberOfVMsSelectedByUser}}/> - </div> - <div className='single-col'> - <ValidationInput - type='select' - label={i18n('CPU Oversubscription Ratio')} - pointer={'/compute/numOfVMs/CpuOverSubscriptionRatio'}/> - </div> - <ValidationInput - type='select' - label={i18n('Memory - RAM')} - pointer={'/compute/numOfVMs/MemoryRAM'}/> - </div> - </div> - - <div className='section-title'>{i18n('Guest OS')}</div> - <div className='rows-section'> - <div className='section-field row-flex-components input-row'> - <div className='two-col'> - <ValidationInput - label={i18n('Guest OS')} - type='text' - pointer={'/compute/guestOS/name'}/> - </div> - <div className='empty-two-col'/> - </div> - <div className='vertical-flex input-row'> - <label key='label' className='control-label'>{i18n('OS Bit Size')}</label> - <div className='radio-options-content-row input-row'> - <ValidationInput - type='radiogroup' - pointer={'/compute/guestOS/bitSize'} - className='radio-field'/> - </div> - </div> - <div className='section-field row-flex-components input-row'> - <div className='two-col'> - <ValidationInput - type='textarea' - label={i18n('Guest OS Tools:')} - pointer={'/compute/guestOS/tools'}/> - </div> - <div className='empty-two-col'/> - </div> - </div> - </ValidationForm> + isReadOnlyMode={isReadOnlyMode} > + <VmSizing onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} /> + <NumberOfVms onQDataChanged={onQDataChanged} dataMap={dataMap} + qgenericFieldInfo={qgenericFieldInfo} qValidateData={qValidateData} + customValidations={{'compute/numOfVMs/maximum' : this.validateMax, 'compute/numOfVMs/minimum': this.validateMin}} /> + <GuestOs onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} /> + </Form> } </div> ); } save(){ - return this.refs.computeValidationForm.handleFormSubmit(new Event('dummy')); + return this.form.handleFormSubmit(new Event('dummy')); + } + + validateMin(value, state) { + let maxVal = state.dataMap['compute/numOfVMs/maximum']; + return Validator.validateItem(value,maxVal,'maximum'); + } + + validateMax(value, state) { + let minVal = state.dataMap['compute/numOfVMs/minimum']; + return Validator.validateItem(value,minVal,'minimum'); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx new file mode 100644 index 0000000000..7a730d6f94 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx @@ -0,0 +1,76 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + + +const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { + return( + <div> + <GridSection title={i18n('Guest OS')} > + <GridItem colSpan={2}> + <Input + data-test-id='guestOS-name' + label={i18n('Guest OS')} + type='text' + onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})} + isValid={qgenericFieldInfo['compute/guestOS/name'].isValid} + errorText={qgenericFieldInfo['compute/guestOS/name'].errorText} + value={dataMap['compute/guestOS/name']} /> + </GridItem> + <GridItem colSpan={2}/> + <GridItem> + <div className='vertical-flex'> + <label key='label' className='control-label'>{i18n('OS Bit Size')}</label> + <div className='radio-options-content-row'> + {qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => ( + <Input + data-test-id='guestOS-bitSize' + type='radio' + key={bitSize.enum} + name={'compute/guestOS/bitSize'} + className='radio-field' + value={bitSize.enum} + label={bitSize.title} + onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' : Number(bit)})} + isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid} + errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText} + checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) } + </div> + </div> + </GridItem> + <GridItem colSpan={2}/> + <GridItem colSpan={2}> + <Input + data-test-id='guestOS-tools' + type='textarea' + label={i18n('Guest OS Tools:')} + onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})} + isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid} + errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText} + value={dataMap['compute/guestOS/tools']} /> + </GridItem> + </GridSection> + + + </div> + ); +}; + +export default GuestOs; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx new file mode 100644 index 0000000000..efeedc653e --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx @@ -0,0 +1,94 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + + +const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => { + return( + <GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}> + <GridItem> + <Input + data-test-id='numOfVMs-minimum' + type='number' + label={i18n('Minimum')} + onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations); + qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } } + isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid} + errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText} + value={dataMap['compute/numOfVMs/minimum']} /> + </GridItem> + <GridItem> + <Input + data-test-id='numOfVMs-maximum' + type='number' + label={i18n('Maximum')} + onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations); + qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } } + isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid} + errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText} + value={dataMap['compute/numOfVMs/maximum']} /> + </GridItem> + <GridItem> + <Input + data-test-id='numOfVMs-CpuOverSubscriptionRatio' + label={i18n('CPU Oversubscription Ratio')} + type='select' + groupClassName='bootstrap-input-options' + className='input-options-select' + isValid={qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].isValid} + errorText={qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].errorText} + value={dataMap['compute/numOfVMs/CpuOverSubscriptionRatio']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'compute/numOfVMs/CpuOverSubscriptionRatio' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)} + </Input> + </GridItem> + <GridItem> + <Input + data-test-id='numOfVMs-MemoryRAM' + type='select' + label={i18n('Memory - RAM')} + groupClassName='bootstrap-input-options' + className='input-options-select' + isValid={qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].isValid} + errorText={qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].errorText} + value={dataMap['compute/numOfVMs/MemoryRAM']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'compute/numOfVMs/MemoryRAM' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)} + </Input> + </GridItem> + </GridSection> + ); +}; + +NumberOfVms.propTypes = { + minNumberOfVMsSelectedByUser: React.PropTypes.number +}; + +export default NumberOfVms; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx new file mode 100644 index 0000000000..39f84807a2 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx @@ -0,0 +1,68 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { + return( + <GridSection title={i18n('VM Sizing')}> + <GridItem> + <Input + data-test-id='numOfCPUs' + type='number' + label={i18n('Number of CPUs')} + onChange={(tools) => onQDataChanged({'compute/vmSizing/numOfCPUs' : tools})} + isValid={qgenericFieldInfo['compute/vmSizing/numOfCPUs'].isValid} + errorText={qgenericFieldInfo['compute/vmSizing/numOfCPUs'].errorText} + value={dataMap['compute/vmSizing/numOfCPUs']} /> + </GridItem> + <GridItem> + <Input + data-test-id='fileSystemSizeGB' + type='number' + label={i18n('File System Size (GB)')} + onChange={(tools) => onQDataChanged({'compute/vmSizing/fileSystemSizeGB' : tools})} + isValid={qgenericFieldInfo['compute/vmSizing/fileSystemSizeGB'].isValid} + errorText={qgenericFieldInfo['compute/vmSizing/fileSystemSizeGB'].errorText} + value={dataMap['compute/vmSizing/fileSystemSizeGB']} /> + </GridItem> + <GridItem> + <Input + data-test-id='persistentStorageVolumeSize' + type='number' + label={i18n('Persistent Storage/Volume Size (GB)')} + onChange={(tools) => onQDataChanged({'compute/vmSizing/persistentStorageVolumeSize' : tools})} + isValid={qgenericFieldInfo['compute/vmSizing/persistentStorageVolumeSize'].isValid} + errorText={qgenericFieldInfo['compute/vmSizing/persistentStorageVolumeSize'].errorText} + value={dataMap['compute/vmSizing/persistentStorageVolumeSize']} /> + </GridItem> + <GridItem> + <Input + data-test-id='IOOperationsPerSec' + type='number' + label={i18n('I/O Operations (per second)')} + onChange={(tools) => onQDataChanged({'compute/vmSizing/IOOperationsPerSec' : tools})} + isValid={qgenericFieldInfo['compute/vmSizing/IOOperationsPerSec'].isValid} + errorText={qgenericFieldInfo['compute/vmSizing/IOOperationsPerSec'].errorText} + value={dataMap['compute/vmSizing/IOOperationsPerSec']} /> + </GridItem> + </GridSection> + ); +}; + +export default VmSizing; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js index e4c330bec8..34374aa7fb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js @@ -1,50 +1,55 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; +import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; + + +import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js'; + export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {data: componentData = {} , qdata, qschema}} = softwareProductComponents; - + let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); return { componentData, qdata, - qschema, - isReadOnlyMode + isReadOnlyMode, + genericFieldInfo, + qGenericFieldInfo, + dataMap, + isFormValid }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { - onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}), - onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}), + onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}), + onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, - {softwareProductId, vspComponentId: componentId, componentData, qdata}); - } + {softwareProductId, version, vspComponentId: componentId, componentData, qdata}); + }, + onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx index 5d11e42cd3..e4595f97d6 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx @@ -1,177 +1,285 @@ +/*! + * 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 ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +const GeneralSection = ({onDataChanged, displayName, vfcCode, description, isReadOnlyMode, genericFieldInfo}) => ( + <GridSection title={i18n('General')}> + {/* disabled until backend will be ready to implement it + <div className='validation-input-wrapper'> + <div className='form-group'> + <label className='control-label'>{i18n('Name')}</label> + <div>{name}</div> + </div> + </div> + + */} + <GridItem> + <Input + data-test-id='name' + label={i18n('Name')} + value={displayName} + disabled={true} + type='text'/> + <Input + data-test-id='vfcCode' + label={i18n('Naming Code')} + value={vfcCode} + isValid={genericFieldInfo.vfcCode.isValid} + errorText={genericFieldInfo.vfcCode.errorText} + onChange={vfcCode => onDataChanged({vfcCode})} + disabled={isReadOnlyMode} + type='text'/> + </GridItem> + <GridItem colSpan={2}> + <Input + label={i18n('Description')} + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + onChange={description => onDataChanged({description})} + disabled={isReadOnlyMode} + value={description} + groupClassName='multi-line-textarea' + data-test-id='description' + type='textarea'/> + </GridItem> + <GridItem /> + </GridSection> + ); + +const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Hypervisor')}> + <GridItem> + <Input + data-test-id='hypervisor' + label={i18n('Supported Hypervisors')} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid} + errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText} + value={dataMap['general/hypervisor/hypervisor']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'general/hypervisor/hypervisor' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)} + </Input> + </GridItem> + <GridItem colSpan={2}> + <Input + data-test-id='drivers' + onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})} + label={i18n('Hypervisor Drivers')} + type='text' + isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid} + errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText} + value={dataMap['general/hypervisor/drivers']}/> + </GridItem> + <GridItem colSpan={3}> + <Input + data-test-id='containerFeaturesDescription' + label={i18n('Describe Container Features')} + type='textarea' + onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})} + isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid} + errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText} + value={dataMap['general/hypervisor/containerFeaturesDescription']}/> + </GridItem> + </GridSection> +); + +const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Image')}> + <GridItem> + <Input + data-test-id='format' + label={i18n('Image format')} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + isValid={qgenericFieldInfo['general/image/format'].isValid} + errorText={qgenericFieldInfo['general/image/format'].errorText} + value={dataMap['general/image/format']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'general/image/format' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['general/image/format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)} + </Input> + </GridItem> + <GridItem> + <Input + data-test-id='providedBy' + label={i18n('Image provided by')} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + isValid={qgenericFieldInfo['general/image/providedBy'].isValid} + errorText={qgenericFieldInfo['general/image/providedBy'].errorText} + value={dataMap['general/image/providedBy']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'general/image/providedBy' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['general/image/providedBy'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)} + </Input> + </GridItem> + <GridItem> + <Input + data-test-id='bootDiskSizePerVM' + onChange={(bootDiskSizePerVM) => onQDataChanged({'general/image/bootDiskSizePerVM' : bootDiskSizePerVM})} + label={i18n('Size of boot disk per VM (GB)')} + type='number' + isValid={qgenericFieldInfo['general/image/bootDiskSizePerVM'].isValid} + errorText={qgenericFieldInfo['general/image/bootDiskSizePerVM'].errorText} + value={dataMap['general/image/bootDiskSizePerVM']}/> + </GridItem> + <GridItem> + <Input + data-test-id='ephemeralDiskSizePerVM' + onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/image/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})} + label={i18n('Size of ephemeral disk per VM (GB)')} + type='number' + isValid={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].isValid} + errorText={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].errorText} + value={dataMap['general/image/ephemeralDiskSizePerVM']}/> + </GridItem> + </GridSection> +); + +const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Recovery')}> + <GridItem> + <Input + data-test-id='pointObjective' + label={i18n('VM Recovery Point Objective (Minutes)')} + type='number' + onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})} + isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid} + errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText} + value={dataMap['general/recovery/pointObjective']}/> + </GridItem> + <GridItem> + <Input + data-test-id='timeObjective' + label={i18n('VM Recovery Time Objective (Minutes)')} + type='number' + onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})} + isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid} + errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText} + value={dataMap['general/recovery/timeObjective']}/> + <div className='empty-two-col' /> + </GridItem> + <GridItem colSpan={2} /> + <GridItem colSpan={2}> + <Input + data-test-id='vmProcessFailuresHandling' + className='textarea' + label={i18n('How are in VM process failures handled?')} + type='textarea' + onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})} + isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid} + errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText} + value={dataMap['general/recovery/vmProcessFailuresHandling']}/> + <div className='empty-two-col' /> + + </GridItem> + { + /** disabled until backend will be ready to implement it + <div className='row'> + <div className='col-md-3'> + <Input + label={i18n('VM Recovery Document')} + type='text' + pointer='/general/recovery/VMRecoveryDocument'/> + </div> + </div> + */ + } + </GridSection> +); + +const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('DNS Configuration')}> + <GridItem colSpan={2}> + <Input + data-test-id='dnsConfiguration' + label={i18n('Do you have a need for DNS as a Service? Please describe.')} + type='textarea' + onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})} + isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid} + errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText} + value={dataMap['general/dnsConfiguration']}/> + </GridItem> + </GridSection> +); + +const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Clone')}> + <GridItem colSpan={2}> + <Input + data-test-id='vmCloneUsage' + label={i18n('Describe VM Clone Use')} + type='textarea' + onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})} + isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid} + errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText} + value={dataMap['general/vmCloneUsage']}/> + </GridItem> + </GridSection> +); class SoftwareProductComponentsGeneralView extends React.Component { render() { - let {qdata, qschema, onQDataChanged, onDataChanged, componentData: {displayName, description}, isReadOnlyMode} = this.props; + let {onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, description}, isReadOnlyMode} = this.props; return( <div className='vsp-components-general'> <div className='general-data'> - <ValidationForm - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - <div className=''> - <h3 className='section-title'>{i18n('General')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - {/** disabled until backend will be ready to implement it - <div className='validation-input-wrapper'> - <div className='form-group'> - <label className='control-label'>{i18n('Name')}</label> - <div>{name}</div> - </div> - </div> - - */} - <div className='single-col'> - <ValidationInput label={i18n('Name')} value={displayName} disabled={true} type='text'/> - </div> - <div className='two-col'> - <ValidationInput - label={i18n('Description')} - onChange={description => onDataChanged({description})} - disabled={isReadOnlyMode} - value={description} - type='textarea'/> - </div> - <div className='empty-col' /> - </div> - </div> - </div> - </ValidationForm> - { - qschema && - <ValidationForm - onDataChanged={onQDataChanged} - data={qdata} - schema={qschema} + {genericFieldInfo && qGenericFieldInfo && <Form + isValid={this.props.isFormValid} + formReady={null} isReadOnlyMode={isReadOnlyMode} + onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)} hasButtons={false}> - <h3 className='section-title additional-validation-form'>{i18n('Hypervisor')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - label={i18n('Supported Hypervisors')} - type='select' - pointer='/general/hypervisor/hypervisor'/> - </div> - <div className='two-col'> - <ValidationInput - label={i18n('Hypervisor Drivers')} - type='text' - pointer='/general/hypervisor/drivers'/> - </div> - <div className='empty-col' /> - </div> - <div className='row-flex-components input-row'> - <div className='three-col'> - <ValidationInput - label={i18n('Describe Container Features')} - type='textarea' - pointer='/general/hypervisor/containerFeaturesDescription'/> - </div> - <div className='empty-col' /> - </div> - </div> - <h3 className='section-title'>{i18n('Image')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - label={i18n('Image format')} - type='select' - pointer='/general/image/format'/> - </div> - <div className='single-col'> - <ValidationInput - label={i18n('Image provided by')} - type='select' - pointer='/general/image/providedBy'/> - </div> - <div className='single-col'> - <ValidationInput - label={i18n('Size of boot disk per VM (GB)')} - type='text' - pointer='/general/image/bootDiskSizePerVM'/> - </div> - <ValidationInput - label={i18n('Size of ephemeral disk per VM (GB)')} - type='text' - pointer='/general/image/ephemeralDiskSizePerVM'/> - </div> - </div> - <h3 className='section-title'>{i18n('Recovery')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - label={i18n('VM Recovery Point Objective (Minutes)')} - type='text' - pointer='/general/recovery/pointObjective'/> - </div> - <ValidationInput - label={i18n('VM Recovery Time Objective (Minutes)')} - type='text' - pointer='/general/recovery/timeObjective'/> - <div className='empty-two-col' /> - </div> - - - <div className='row-flex-components input-row'> - <div className='two-col'> - <ValidationInput - className='textarea' - label={i18n('How are in VM process failures handled?')} - type='textarea' - pointer='/general/recovery/vmProcessFailuresHandling'/> - </div> - <div className='empty-two-col' /> - { - /** disabled until backend will be ready to implement it - <div className='row'> - <div className='col-md-3'> - <ValidationInput - label={i18n('VM Recovery Document')} - type='text' - pointer='/general/recovery/VMRecoveryDocument'/> - </div> - </div> - */ - } - </div> - </div> - <h3 className='section-title'>{i18n('DNS Configuration')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='two-col'> - <ValidationInput - label={i18n('Do you have a need for DNS as a Service? Please describe.')} - type='textarea' - pointer='/general/dnsConfiguration'/> - </div> - <div className='empty-two-col' /> - </div> - </div> - <h3 className='section-title'>{i18n('Clone')}</h3> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='two-col'> - <ValidationInput - label={i18n('Describe VM Clone Use')} - type='textarea' - pointer='/general/vmCloneUsage'/> - </div> - <div className='empty-two-col' /> - </div> - </div> - </ValidationForm> - } + <GeneralSection + onDataChanged={onDataChanged} + displayName={displayName} + vfcCode={vfcCode} + description={description} + isReadOnlyMode={isReadOnlyMode} + genericFieldInfo={genericFieldInfo}/> + <HypervisorSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <ImageSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <RecoverySection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <DNSConfigurationSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <CloneSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + </Form> } </div> </div> ); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js index 4d4034de5b..0634858219 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js @@ -1,45 +1,43 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {qdata, qschema}} = softwareProductComponents; + let {componentEditor: {qdata, qgenericFieldInfo : genericFieldInfo, dataMap}} = softwareProductComponents; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); return { qdata, - qschema, + genericFieldInfo, + dataMap, isReadOnlyMode }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { - onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}), - onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});} + onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), + onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});} }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx index 1aa2babc12..dc86771400 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx @@ -1,11 +1,29 @@ +/*! + * 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 FontAwesome from 'react-fontawesome'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import Input from'nfvo-components/input/validation/Input.jsx'; -const prefix = '/highAvailabilityAndLoadBalancing/'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const prefix = 'highAvailabilityAndLoadBalancing/'; const pointers = [ { @@ -33,6 +51,31 @@ const pointers = [ } ]; +const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => ( + <GridItem colSpan={3} key={item.key} > + <div className={expanded ? 'title' : 'title add-padding'} + data-test-id={`btn-${item.key}`} + onClick={() => toggle(item.key)}> + <SVGIcon name={expanded ? 'chevron-up' : 'chevron-down'}/> + <span className='title-text'>{i18n(item.description)}</span> + {item.added && <div className='new-line'>{i18n(item.added)}</div>} + </div> + <div className={expanded ? 'collapse in' : 'collapse'}> + <div> + <div> + <Input + data-test-id={`input-${item.key}`} + type='textarea' + isValid={genericFieldInfo[`${prefix}${item.key}`].isValid} + errorText={genericFieldInfo[`${prefix}${item.key}`].errorText} + value={dataMap[`${prefix}${item.key}`]} + onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} /> + </div> + </div> + </div> + </GridItem> +); + class SoftwareProductComponentLoadBalancingView extends React.Component { static propTypes = { componentId: React.PropTypes.string.isRequired, @@ -46,42 +89,65 @@ class SoftwareProductComponentLoadBalancingView extends React.Component { expanded: {} }; - renderTextAreaItem(item) { - return ( - <div className='question'> - <div className={this.state.expanded[item.key] ? 'title' : 'title add-padding'} - onClick={() => this.toggle(item.key)}> - <FontAwesome name={this.state.expanded[item.key] ? 'chevron-up' : 'chevron-down'}/> - {i18n(item.description)} - {item.added && <div className='new-line'>{i18n(item.added)}</div>} - </div> - <div className={this.state.expanded[item.key] ? 'collapse in' : 'collapse'}> - <div className='row'> - <div className='col-md-9'> - <ValidationInput - type='textarea' - pointer={`${prefix}${item.key}`} - maxLength='1000' /> - </div> - </div> - </div> - </div> - ); - } - render() { - let {qdata, qschema, onQDataChanged, isReadOnlyMode} = this.props; + let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props; return ( <div className='vsp-components-load-balancing'> <div className='halb-data'> - <div className='load-balancing-page-title'>{i18n('High Availability & Load Balancing')}</div> - <ValidationForm - onDataChanged={onQDataChanged} - data={qdata} schema={qschema} + { genericFieldInfo && <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} isReadOnlyMode={isReadOnlyMode} hasButtons={false}> - {pointers.map(pointer => this.renderTextAreaItem(pointer))} - </ValidationForm> + <GridSection title={i18n('High Availability & Load Balancing')}> + <GridItem colSpan={1}> + <Input + data-test-id='input-is-component-mandatory' + label={i18n('Is Component Mandatory')} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid} + errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText} + value={dataMap[`${prefix}isComponentMandatory`]} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({[`${prefix}isComponentMandatory`] : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) } + </Input> + </GridItem> + <GridItem colSpan={3}/> + <GridItem colSpan={1}> + <Input + data-test-id='input-high-availability-mode' + label={i18n('High Availability Mode')} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid} + errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText} + value={dataMap[`${prefix}highAvailabilityMode`]} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({[`${prefix}highAvailabilityMode`] : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)} + </Input> + </GridItem> + <GridItem colSpan={3}/> + </GridSection> + <GridSection> + {pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged} + genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'} + expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)} + </GridSection> + </Form> } </div> </div> ); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js index ed7c5a116a..293e252dca 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js @@ -1,27 +1,25 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx'; import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js'; +import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import i18n from 'nfvo-utils/i18n/i18n.js'; + export const mapStateToProps = ({softwareProduct}) => { @@ -37,11 +35,12 @@ export const mapStateToProps = ({softwareProduct}) => { }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { onDropMibFileToUpload: (formData, type) => SoftwareProductComponentsMonitoringAction.uploadSnmpFile(dispatch, { softwareProductId, + version, componentId, formData, type @@ -49,9 +48,18 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { onDeleteSnmpFile: type => SoftwareProductComponentsMonitoringAction.deleteSnmpFile(dispatch, { softwareProductId, + version, componentId, type - }) + }), + + onFileUploadError: () => dispatch({ + type: modalActionTypes.GLOBAL_MODAL_ERROR, + data: { + title: i18n('Upload Failed'), + msg: i18n('Expected "zip" file. Please check the provided file type.') + } + }), }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js index 3faf571c09..64403faa78 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js @@ -1,80 +1,76 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 i18n from 'nfvo-utils/i18n/i18n.js'; import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; -import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js'; import Configuration from 'sdc-app/config/Configuration.js'; import SoftwareProductComponentsMonitoringConstants, {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js'; +import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; const UPLOAD = true; -function baseUrl(vspId, componentId) { +function baseUrl(vspId, version, componentId) { + const versionId = version.id; const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${vspId}/components/${componentId}/monitors`; + return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/monitors`; } -function snmpTrapUrl(vspId, componentId, isUpload) { - return `${baseUrl(vspId, componentId)}/snmp-trap${isUpload ? '/upload' : ''}`; +function snmpTrapUrl(vspId, version, componentId, isUpload) { + return `${baseUrl(vspId, version, componentId)}/snmp-trap${isUpload ? '/upload' : ''}`; } -function snmpPollUrl(vspId, componentId, isUpload) { - return `${baseUrl(vspId, componentId)}/snmp${isUpload ? '/upload' : ''}`; +function snmpPollUrl(vspId, version, componentId, isUpload) { + return `${baseUrl(vspId, version, componentId)}/snmp${isUpload ? '/upload' : ''}`; } let onInvalidFileSizeUpload = (dispatch) => dispatch({ - type: NotificationConstants.NOTIFY_ERROR, + type: modalActionTypes.GLOBAL_MODAL_ERROR, data: { title: i18n('Upload Failed'), msg: i18n('no zip file was uploaded or zip file doesn\'t exist') } }); -let uploadSnmpTrapFile = (dispatch, {softwareProductId, componentId, formData}) => { - RestAPIUtil.create(snmpTrapUrl(softwareProductId, componentId, UPLOAD), formData).then(()=> dispatch({ +let uploadSnmpTrapFile = (dispatch, {softwareProductId, version, componentId, formData}) => { + RestAPIUtil.post(snmpTrapUrl(softwareProductId, version, componentId, UPLOAD), formData).then(()=> dispatch({ type: actionTypes.SNMP_TRAP_UPLOADED, data: {filename: formData.get('upload').name} })); }; -let uploadSnmpPollFile = (dispatch, {softwareProductId, componentId, formData}) => { - RestAPIUtil.create(snmpPollUrl(softwareProductId, componentId, UPLOAD), formData).then(()=> dispatch({ +let uploadSnmpPollFile = (dispatch, {softwareProductId, version, componentId, formData}) => { + RestAPIUtil.post(snmpPollUrl(softwareProductId, version, componentId, UPLOAD), formData).then(()=> dispatch({ type: actionTypes.SNMP_POLL_UPLOADED, data: {filename: formData.get('upload').name} })); }; -let deleteSnmpTrapFile = (dispatch, {softwareProductId, componentId}) => { - RestAPIUtil.destroy(snmpTrapUrl(softwareProductId, componentId, !UPLOAD)).then(()=> dispatch({ +let deleteSnmpTrapFile = (dispatch, {softwareProductId, version, componentId}) => { + RestAPIUtil.destroy(snmpTrapUrl(softwareProductId, version, componentId, !UPLOAD)).then(()=> dispatch({ type: actionTypes.SNMP_TRAP_DELETED })); }; -let deleteSnmpPollFile = (dispatch, {softwareProductId, componentId}) => { - RestAPIUtil.destroy(snmpPollUrl(softwareProductId, componentId, !UPLOAD)).then(()=> dispatch({ +let deleteSnmpPollFile = (dispatch, {softwareProductId, version, componentId}) => { + RestAPIUtil.destroy(snmpPollUrl(softwareProductId, version, componentId, !UPLOAD)).then(()=> dispatch({ type: actionTypes.SNMP_POLL_DELETED })); }; const SoftwareProductComponentsMonitoringAction = { - fetchExistingFiles(dispatch, {softwareProductId, componentId}){ - RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/snmp`).then(response => + fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){ + RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/snmp`).then(response => dispatch({ type: actionTypes.SNMP_FILES_DATA_CHANGE, data: {trapFilename: response.snmpTrap, pollFilename: response.snmpPoll} @@ -82,13 +78,13 @@ const SoftwareProductComponentsMonitoringAction = { ); }, - uploadSnmpFile(dispatch, {softwareProductId, componentId, formData, type}){ + uploadSnmpFile(dispatch, {softwareProductId, version, componentId, formData, type}){ if (formData.get('upload').size) { if (type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP) { - uploadSnmpTrapFile(dispatch, {softwareProductId, componentId, formData}); + uploadSnmpTrapFile(dispatch, {softwareProductId, version, componentId, formData}); } else { - uploadSnmpPollFile(dispatch, {softwareProductId, componentId, formData}); + uploadSnmpPollFile(dispatch, {softwareProductId, version, componentId, formData}); } } else { @@ -96,12 +92,12 @@ const SoftwareProductComponentsMonitoringAction = { } }, - deleteSnmpFile(dispatch, {softwareProductId, componentId, type}){ + deleteSnmpFile(dispatch, {softwareProductId, version, componentId, type}){ if (type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP) { - deleteSnmpTrapFile(dispatch, {softwareProductId, componentId}); + deleteSnmpTrapFile(dispatch, {softwareProductId, version, componentId}); } else { - deleteSnmpPollFile(dispatch, {softwareProductId, componentId}); + deleteSnmpPollFile(dispatch, {softwareProductId, version, componentId}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js index eeececb050..d908d36aaa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 actionTypes = keyMirror({ diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js index 72e0a85b10..54513b9634 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentsMonitoringConstants.js'; export default (state = {}, action) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx index ca090c5f2f..329cc70353 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx @@ -1,3 +1,18 @@ +/*! + * 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, PropTypes} from 'react'; import Dropzone from 'react-dropzone'; import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js'; @@ -46,7 +61,7 @@ class SoftwareProductComponentsMonitoringView extends Component { return ( <Dropzone className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`} - onDrop={files => this.handleImport(files, {isReadOnlyMode, type, refAndName})} + onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})} onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} onDragLeave={() => this.setState({dragging:false})} multiple={false} @@ -70,7 +85,7 @@ class SoftwareProductComponentsMonitoringView extends Component { className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}> <div className='drag-text'>{i18n('Drag & drop for upload')}</div> <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={() => this.refs[refAndName].open()}> + <div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}> <span className='primary-btn-text'>{i18n('Select file')}</span> </div> </div> @@ -95,17 +110,21 @@ class SoftwareProductComponentsMonitoringView extends Component { } } - handleImport(files, {isReadOnlyMode, type, refAndName}) { + handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) { if (isReadOnlyMode) { return; } - - this.setState({dragging: false}); - let file = files[0]; - let formData = new FormData(); - formData.append('upload', file); - this.refs[refAndName].value = ''; - this.props.onDropMibFileToUpload(formData, type); + if (files.length > 0) { + this.setState({dragging: false}); + let file = files[0]; + let formData = new FormData(); + formData.append('upload', file); + this.refs[refAndName].value = ''; + this.props.onDropMibFileToUpload(formData, type); + } else if (rejectedFiles.length > 0) { + this.setState({dragging: false}); + this.props.onFileUploadError(); + } } getFileTypeDisplayName(type) { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js index a412456e13..7cf1f0189e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js @@ -1,53 +1,66 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js'; import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx'; import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; +import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; let {network: {nicEditor = {}}} = softwareProductComponents; - let {data, qdata, qschema} = nicEditor; + let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); + let protocols = []; + if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){ + protocols = qdata.protocols.protocols; + } + let {version} = currentSoftwareProduct; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo); return { currentSoftwareProduct, isValidityData, + version, data, qdata, - qschema, - isReadOnlyMode + dataMap, + isFormValid, + formReady, + genericFieldInfo, + qgenericFieldInfo, + isReadOnlyMode, + protocols }; }; const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { return { - onDataChanged: deltaData => SoftwareProductComponentsNetworkActionHelper.updateNICData(dispatch, {deltaData}), - onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata}), + onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, + formName: forms.NIC_EDIT_FORM}), + onSubmit: ({data, qdata, version}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}), onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch), - onQDataChanged: ({data}) => SoftwareProductComponentsNetworkActionHelper.updateNICQuestionnaire(dispatch, {data}) + onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM), + onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, + qName: NIC_QUESTIONNAIRE}), }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js index d49f9ccb1e..b3c9fe5d98 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js @@ -1,48 +1,43 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentsNetworkConstants.js'; +import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; export default (state = {}, action) => { switch (action.type) { case actionTypes.NICEditor.OPEN: return { ...state, - data: action.nic + data: action.nic, + genericFieldInfo: { + 'description' : { + isValid: true, + errorText: '', + validations: [] + }, + 'name' : { + isValid: true, + errorText: '', + validations: [] + } + }, + formName: forms.NIC_EDIT_FORM }; case actionTypes.NICEditor.CLOSE: return {}; - case actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE: - return { - ...state, - qdata: action.payload.qdata || state.qdata, - qschema: action.payload.qschema || state.qschema - }; - case actionTypes.NICEditor.DATA_CHANGED: - return { - ...state, - data: { - ...state.data, - ...action.deltaData - } - }; default: return state; } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx index 7393a835dc..aad06c82f0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx @@ -1,321 +1,71 @@ +/*! + * 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 ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import Acceptable from './nicEditorComponents/Acceptable.jsx'; +import FlowLength from './nicEditorComponents/FlowLength.jsx'; +import OutFlowTraffic from './nicEditorComponents/OutFlowTraffic.jsx'; +import InFlowTraffic from './nicEditorComponents/InFlowTraffic.jsx'; +import Sizing from './nicEditorComponents/Sizing.jsx'; +import Network from './nicEditorComponents/Network.jsx'; +import IpConfig from './nicEditorComponents/IpConfig.jsx'; +import Protocols from './nicEditorComponents/Protocols.jsx'; +import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx'; class SoftwareProductComponentsNetworkEditorView extends React.Component { render() { - let {onCancel, isReadOnlyMode} = this.props; - return ( - <ValidationForm - ref='validationForm' - hasButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - className='vsp-components-network-editor'> - {this.renderEditorFields()} - </ValidationForm> - ); - } - - renderEditorFields() { - let {data = {}, qdata = {}, qschema = {}, onQDataChanged, onDataChanged, isReadOnlyMode} = this.props; + let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo, dataMap, onDataChanged, protocols, onQDataChanged} = this.props; let {name, description, networkName} = data; let netWorkValues = [{ enum: networkName, title: networkName }]; - return( - <div className='editor-data'> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Name')} - value={name} - disabled={true} - type='text'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Purpose of NIC')} - value={description} - onChange={description => onDataChanged({description})} - disabled={isReadOnlyMode} - type='textarea'/> - </div> - </div> - <ValidationForm - onDataChanged={onQDataChanged} - data={qdata} - schema={qschema} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - <div className='row'> - <div className='part-title'>{i18n('Protocols')}</div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Protocols')} - type='select' - pointer='/protocols/protocols'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Protocol with Highest Traffic Profile')} - type='select' - pointer='/protocols/protocolWithHighestTrafficProfile'/> - </div> - </div> - <div className='row'> - <div className='part-title'>{i18n('IP Configuration')}</div> - <div className='col-md-3'> - <ValidationInput - label={i18n('IPv4 Required')} - type='checkbox' - pointer='/ipConfiguration/ipv4Required'/> - </div> - <div className='col-md-9'> - <ValidationInput - label={i18n('IPv6 Required')} - type='checkbox' - pointer='/ipConfiguration/ipv6Required'/> - </div> - </div> - </ValidationForm> - <div className='row'> - <div className='part-title'>{i18n('Network')}</div> - <div className='col-md-2'> - <ValidationInput - label={i18n('Internal')} - disabled - checked={true} - className='network-radio disabled' - type='radio'/> - </div> - <div className='col-md-4'> - <ValidationInput - label={i18n('External')} - disabled - checked={false} - className='network-radio disabled' - type='radio'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Network')} - type='select' - disabled={true} - values={netWorkValues}/> - </div> + return ( + <div> + {qgenericFieldInfo && <Form + ref={(form) => { this.form = form; }} + hasButtons={true} + onSubmit={ () => this.submit() } + onReset={ () => onCancel() } + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={isFormValid} + formReady={formReady} + onValidateForm={() => onValidateForm() } + className='vsp-components-network-editor'> + <div className='editor-data'> + <NameAndPurpose name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode}/> + <Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <Network networkValues={netWorkValues} /> + <Sizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <InFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <OutFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <FlowLength qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> + <Acceptable qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> </div> - <ValidationForm - onDataChanged={onQDataChanged} - data={qdata} - schema={qschema} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - <div className='row'> - <div className='part-title'>{i18n('Sizing')}</div> - <div className='col-md-12'> - <ValidationInput - label={i18n('Describe Quality of Service')} - type='textarea' - pointer='/sizing/describeQualityOfService'/> - </div> - </div> - - <div className='row'> - <div className='part-title'>{i18n('Inflow Traffic per second')}</div> - </div> - - <div className='row'> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Packets')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/inflowTrafficPerSecond/packets/peak'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/inflowTrafficPerSecond/packets/avg'/> - </div> - </div> - </div> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Bytes')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/inflowTrafficPerSecond/bytes/peak'/> - - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/inflowTrafficPerSecond/bytes/avg'/> - </div> - </div> - </div> - </div> - - <div className='row'> - <div className='part-title'>{i18n('Outflow Traffic per second')}</div> - </div> - - <div className='row'> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Packets')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/outflowTrafficPerSecond/packets/peak'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/outflowTrafficPerSecond/packets/avg'/> - - </div> - </div> - </div> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Bytes')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/outflowTrafficPerSecond/bytes/peak'/> - - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/outflowTrafficPerSecond/bytes/avg'/> - - </div> - </div> - </div> - </div> - - <div className='row'> - <div className='part-title'>{i18n('Flow Length')}</div> - </div> - - <div className='row'> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Packets')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/flowLength/packets/peak'/> - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/flowLength/packets/avg'/> - </div> - </div> - </div> - <div className='col-md-6'> - <div className='row'> - <div className='part-title-small'>{i18n('Bytes')}</div> - </div> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - label={i18n('Peak')} - type='text' - pointer='/sizing/flowLength/bytes/peak'/> - - </div> - <div className='col-md-6'> - <ValidationInput - label={i18n('Avg')} - type='text' - pointer='/sizing/flowLength/bytes/avg'/> - </div> - </div> - </div> - </div> - - <div className='row'> - <div className='col-md-9'> - <div className='row'> - <div className='part-title-small'>{i18n('Acceptable Jitter')}</div> - </div> - <div className='row'> - <div className='col-md-4'> - <ValidationInput - label={i18n('Min')} - type='text' - pointer='/sizing/acceptableJitter/mean'/> - </div> - <div className='col-md-4'> - <ValidationInput - label={i18n('Max')} - type='text' - pointer='/sizing/acceptableJitter/max'/> - </div> - <div className='col-md-4'> - <ValidationInput - label={i18n('Var')} - type='text' - pointer='/sizing/acceptableJitter/variable'/> - </div> - </div> - </div> - <div className='col-md-3'> - <div className='row'> - <div className='part-title-small'>{i18n('Acceptable Packet Loss %')}</div> - </div> - <div className='row'> - <div className='col-md-12'> - <ValidationInput - label={i18n('In Percent')} - type='text' - pointer='/sizing/acceptablePacketLoss'/> - </div> - </div> - </div> - </div> - </ValidationForm> + </Form> } </div> - ); } + submit() { - let {data, qdata, onSubmit} = this.props; - onSubmit({data, qdata}); + let {data, qdata, onSubmit, version} = this.props; + onSubmit({data, qdata, version}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js index bc53e1a7af..5cfc88bdc9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentsNetworkConstants.js'; export default (state = [], action) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js index 8ff6b50189..bc061469b1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js @@ -1,65 +1,60 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; +import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; -function baseUrl(softwareProductId, componentId) { +function baseUrl(softwareProductId, version, componentId) { + const versionId = version.id; const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components/${componentId}/nics`; + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`; } -function fetchNICQuestionnaire({softwareProductId, componentId, nicId, version}) { - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/${nicId}/questionnaire${versionQuery}`); +function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) { + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`); } -function fetchNIC({softwareProductId, componentId, nicId, version}) { - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/${nicId}${versionQuery}`); +function fetchNIC({softwareProductId, version, componentId, nicId}) { + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`); } -function fetchNICsList({softwareProductId, componentId, version}) { - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}${versionQuery}`); +function fetchNICsList({softwareProductId, version, componentId}) { + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); } -function saveNIC({softwareProductId, componentId, nic: {id, name, description, networkId}}) { - return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${id}`,{ +function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId}}) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{ name, description, networkId }); } -function saveNICQuestionnaire({softwareProductId, componentId, nicId, qdata}) { - return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${nicId}/questionnaire`, qdata); +function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`, qdata); } const SoftwareProductComponentNetworkActionHelper = { - fetchNICsList(dispatch, {softwareProductId, componentId, version}) { - return fetchNICsList({softwareProductId, componentId, version}).then((response) => { + fetchNICsList(dispatch, {softwareProductId, version, componentId}) { + return fetchNICsList({softwareProductId, version, componentId}).then((response) => { dispatch({ type: actionTypes.NIC_LIST_UPDATE, response: response.results @@ -80,43 +75,24 @@ const SoftwareProductComponentNetworkActionHelper = { }); }, - loadNICData({softwareProductId, componentId, nicId, version}) { - return fetchNIC({softwareProductId, componentId, nicId, version}); - }, - - loadNICQuestionnaire(dispatch, {softwareProductId, componentId, nicId, version}) { - return fetchNICQuestionnaire({softwareProductId, componentId, nicId, version}).then((response) => { - dispatch({ - type: actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE, - payload: { - qdata: response.data ? JSON.parse(response.data) : {}, - qschema: JSON.parse(response.schema) - } - }); - }); + loadNICData({softwareProductId, version, componentId, nicId}) { + return fetchNIC({softwareProductId, version, componentId, nicId}); }, - updateNICData(dispatch, {deltaData}) { - dispatch({ - type: actionTypes.NICEditor.DATA_CHANGED, - deltaData - }); - }, - - updateNICQuestionnaire(dispatch, {data}) { - dispatch({ - type: actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE, - payload: { - qdata: data - } + loadNICQuestionnaire(dispatch, {softwareProductId, version, componentId, nicId}) { + return fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}).then((response) => { + ValidationHelper.qDataLoaded(dispatch, {qName: NIC_QUESTIONNAIRE ,response: { + qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema) + }}); }); }, - saveNICDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata}) { + saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}) { SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch); return Promise.all([ - saveNICQuestionnaire({softwareProductId, componentId, nicId: data.id, qdata}), - saveNIC({softwareProductId, componentId, nic: data}).then(() => { + saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}), + saveNIC({softwareProductId, version, componentId, nic: data}).then(() => { dispatch({ type: actionTypes.NIC_LIST_EDIT, nic: data diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js index 193f4b20b5..39c55d876c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 actionTypes = keyMirror({ @@ -26,8 +21,8 @@ export const actionTypes = keyMirror({ NICEditor: { OPEN: null, - CLOSE: null, - NIC_QUESTIONNAIRE_UPDATE: null, - DATA_CHANGED: null + CLOSE: null } }); + +export const NIC_QUESTIONNAIRE = 'nic'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js index 9172dc691a..c2bd8ce479 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js @@ -1,51 +1,47 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx'; import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js'; +import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {network: {nicEditor = {}, nicList = []}, componentEditor: {data: componentData, qdata, qschema}} = softwareProductComponents; + let {network: {nicEditor = {}, nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; let {data} = nicEditor; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); let {version} = currentSoftwareProduct; - let manualMode = nicList.length <= 0; let isModalInEditMode = true; return { version, componentData, qdata, - qschema, + dataMap, + qgenericFieldInfo, isValidityData, nicList, isDisplayModal: Boolean(data), isModalInEditMode, - manualMode, isReadOnlyMode }; @@ -53,28 +49,28 @@ export const mapStateToProps = ({softwareProduct}) => { const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { return { - onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}), - onAddNIC: () => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch), + onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, + qName: COMPONENTS_QUESTIONNAIRE}), onEditNicClick: (nic, version) => { Promise.all([ SoftwareProductComponentsNetworkActionHelper.loadNICData({ softwareProductId, + version, componentId, - nicId: nic.id, - version + nicId: nic.id }), SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, { softwareProductId, + version, componentId, - nicId: nic.id, - version + nicId: nic.id }) ]).then( ([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data}) ); }, - onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, - {softwareProductId, + onSubmit: ({qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, + {softwareProductId, version, vspComponentId: componentId, qdata}); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx index b3e17ff94b..f715016ba3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx @@ -1,10 +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'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; -import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx'; +import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; +import Input from'nfvo-components/input/validation/Input.jsx'; import Modal from 'nfvo-components/modal/Modal.jsx'; import SoftwareProductComponentsNICEditor from './SoftwareProductComponentsNICEditor.js'; @@ -16,38 +32,56 @@ class SoftwareProductComponentsNetworkView extends React.Component { }; render() { - let {qdata, qschema, onQDataChanged, isModalInEditMode, isDisplayModal, softwareProductId, componentId, isReadOnlyMode} = this.props; + let {dataMap, qgenericFieldInfo, onQDataChanged, isModalInEditMode, isDisplayModal, softwareProductId, componentId, isReadOnlyMode} = this.props; return( <div className='vsp-components-network'> <div className='network-data'> <div> - <ValidationForm - onDataChanged={onQDataChanged} - data={qdata} - isReadOnlyMode={isReadOnlyMode} - schema={qschema} - hasButtons={false}> +{ qgenericFieldInfo && <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> <h3 className='section-title'>{i18n('Network Capacity')}</h3> <div className='rows-section'> - <div className='row-flex-components input-row'> + <div className='row-flex-components'> <div className='single-col'> - <ValidationInput + <Input + data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs' label={i18n('Protocol with Highest Traffic Profile across all NICs')} type='select' - pointer='/network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'/> + groupClassName='bootstrap-input-options' + className='input-options-select' + isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid} + errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText} + value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + { qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto => + <option value={proto.enum} key={proto.enum}>{proto.title}</option>) } + </Input> </div> <div className='single-col add-line-break'> - <ValidationInput + <Input + data-test-id='networkTransactionsPerSecond' label={i18n('Network Transactions per Second')} - type='text' - pointer='/network/networkCapacity/networkTransactionsPerSecond'/> + type='number' + onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})} + isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid} + errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText} + value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} /> </div> <div className='empty-two-col' /> </div> </div> - </ValidationForm> + </Form> } </div> {this.renderNicList()} </div> @@ -70,18 +104,16 @@ class SoftwareProductComponentsNetworkView extends React.Component { renderNicList() { const {localFilter} = this.state; - let {onAddNIC, manualMode, isReadOnlyMode} = this.props; - let onAdd = manualMode ? onAddNIC : false; + let {isReadOnlyMode} = this.props; return ( <ListEditorView title={i18n('Interfaces')} - plusButtonTitle={i18n('Add NIC')} filterValue={localFilter} placeholder={i18n('Filter NICs by Name')} - onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} - onFilter={filter => this.setState({localFilter: filter})}> - {!manualMode && this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))} + onFilter={value => this.setState({localFilter: value})} + twoColumns> + {this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))} </ListEditorView> ); } @@ -92,22 +124,22 @@ class SoftwareProductComponentsNetworkView extends React.Component { return ( <ListEditorItemView key={id} - className='list-editor-item-view' isReadOnlyMode={isReadOnlyMode} onSelect={() => onEditNicClick(nic, version)}> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> + <ListEditorItemViewField> <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Purpose of NIC')}</div> - <div className='description'>{description}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Network')}</div> - <div className='artifact-name'>{networkName}</div> - </div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div className='details'> + <div className='title'>{i18n('Purpose of NIC')}</div> + <div className='description'>{description}</div> + </div> + <div className='details'> + <div className='title'>{i18n('Network')}</div> + <div className='artifact-name'>{networkName}</div> + </div> + </ListEditorItemViewField> </ListEditorItemView> ); @@ -128,8 +160,8 @@ class SoftwareProductComponentsNetworkView extends React.Component { } save() { - let {onSubmit, qdata} = this.props; - return onSubmit({qdata}); + let {onSubmit, qdata, version} = this.props; + return onSubmit({qdata, version}); } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx new file mode 100644 index 0000000000..524b95c3ad --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx @@ -0,0 +1,75 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { + return( + <GridSection> + <GridItem colSpan={3}> + <div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div> + </GridItem> + <GridItem> + <div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div> + </GridItem> + <GridItem> + <Input + label={i18n('Mean')} + type='number' + data-test-id='acceptableJitter-mean' + isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText} + value={dataMap['sizing/acceptableJitter/mean']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} /> + </GridItem> + <GridItem> + <Input + label={i18n('Max')} + type='number' + data-test-id='acceptableJitter-max' + isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText} + value={dataMap['sizing/acceptableJitter/max']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} /> + </GridItem> + <GridItem> + <Input + label={i18n('Var')} + type='number' + data-test-id='acceptableJitter-variable' + isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid} + errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText} + value={dataMap['sizing/acceptableJitter/variable']} + onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} /> + </GridItem> + <GridItem> + <Input + label={i18n('In Percent')} + type='number' + data-test-id='acceptableJitter-acceptablePacketLoss' + isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid} + errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText} + value={dataMap['sizing/acceptablePacketLoss']} + onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} /> + </GridItem> + </GridSection> + ); +}; + +export default Acceptable; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx new file mode 100644 index 0000000000..3745fc7c2e --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.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 i18n from 'nfvo-utils/i18n/i18n.js'; +import PacketsBytes from './PacketsBytes.jsx'; + +const pointers = [ + {label: 'Peak', value: 'sizing/flowLength/packets/peak'}, + {label: 'Avg', value: 'sizing/flowLength/packets/avg'}, + {label: 'Peak', value: 'sizing/flowLength/bytes/peak'}, + {label: 'Avg', value: 'sizing/flowLength/bytes/avg'}, +]; + +const FlowLength = (props) => { + return( + <PacketsBytes {...props} title={i18n('Flow Length')} pointers={pointers}/> + ); +}; + +export default FlowLength; + + diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx new file mode 100644 index 0000000000..5476ed90e6 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.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 i18n from 'nfvo-utils/i18n/i18n.js'; +import PacketsBytes from './PacketsBytes.jsx'; + +const pointers = [ + {label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak'}, + {label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg'}, + {label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak'}, + {label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg'}, +]; + +const InFlowTraffic = (props) => { + return( + <PacketsBytes {...props} title={i18n('Inflow Traffic per second')} pointers={pointers}/> + ); +}; + +export default InFlowTraffic; + + diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx new file mode 100644 index 0000000000..b3a5d21625 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx @@ -0,0 +1,45 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const IpConfig = ({dataMap, onQDataChanged}) => { + return ( + <GridSection title={i18n('IP Configuration')}> + <GridItem> + <Input + label={i18n('IPv4 Required')} + type='checkbox' + onChange={value => onQDataChanged({'ipConfiguration/ipv4Required' : value})} + data-test-id='ipConfiguration-ipv4Required' + value={dataMap['ipConfiguration/ipv4Required']} /> + </GridItem> + <GridItem> + <Input + label={i18n('IPv6 Required')} + type='checkbox' + data-test-id='ipConfiguration-ipv6Required' + onChange={value => onQDataChanged({'ipConfiguration/ipv6Required' : value})} + value={dataMap['ipConfiguration/ipv6Required']} /> + </GridItem> + </GridSection> + ); +}; + +export default IpConfig; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx new file mode 100644 index 0000000000..3dc153d27f --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx @@ -0,0 +1,54 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const NameAndPurpose = ({onDataChanged, isReadOnlyMode, name, description}) => { + + return ( + <GridSection> + <GridItem colSpan={2}> + <Input + label={i18n('Name')} + value={name} + data-test-id='nic-name' + disabled={true} + type='text' /> + </GridItem> + <GridItem colSpan={2}> + <Input + label={i18n('Purpose of NIC')} + value={description} + data-test-id='nic-description' + onChange={description => onDataChanged({description})} + disabled={isReadOnlyMode} + type='textarea'/> + </GridItem> + </GridSection> + ); +}; + +NameAndPurpose.PropTypes = { + name: React.PropTypes.string, + description: React.PropTypes.array, + onDataChanged: React.PropTypes.func, + isReadOnlyMode: React.PropTypes.bool, +}; + +export default NameAndPurpose; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx new file mode 100644 index 0000000000..43afdbed3a --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx @@ -0,0 +1,62 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const Network = ({networkValues}) => { + return ( + <GridSection title={i18n('Network')}> + <GridItem> + <Input + label={i18n('Internal')} + disabled + checked={true} + data-test-id='nic-internal' + className='network-radio disabled' + type='radio'/> + </GridItem> + <GridItem> + <Input + label={i18n('External')} + disabled + checked={false} + data-test-id='nic-external' + className='network-radio disabled' + type='radio'/> + </GridItem> + <GridItem colSpan={2}> + <Input + label={i18n('Network')} + data-test-id='nic-network' + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' + disabled={true} > + {networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)} + </Input> + </GridItem> + </GridSection> + ); +}; + +Network.PropTypes = { + networkValues: React.PropTypes.array +}; + +export default Network; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx new file mode 100644 index 0000000000..80a3d1579b --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.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 i18n from 'nfvo-utils/i18n/i18n.js'; +import PacketsBytes from './PacketsBytes.jsx'; + +const pointers = [ + {label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak'}, + {label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg'}, + {label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak'}, + {label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg'}, +]; + +const OutFlowTraffic = (props) => { + return( + <PacketsBytes {...props} title={i18n('Outflow Traffic per second')} pointers={pointers}/> + ); +}; + +export default OutFlowTraffic; + + diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx new file mode 100644 index 0000000000..d7ee91bd15 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx @@ -0,0 +1,65 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}) => { + return ( + <GridItem> + <Input + label={i18n(label)} + type='number' + data-test-id={`${value}`} + isValid={qgenericFieldInfo[value].isValid} + errorText={qgenericFieldInfo[value].errorText} + value={dataMap[value]} + onChange={val => onQDataChanged({[value]: val})} /> + </GridItem> + ); +}; + +PointerInput.PropTypes = { + label: React.PropTypes.string, + value: React.PropTypes.string +}; + +const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => { + return( + <GridSection title={title}> + <GridItem colSpan={2}> + <div className='part-title-small packets'>{i18n('Packets')}</div> + </GridItem> + <GridItem colSpan={2}> + <div className='part-title-small bytes'>{i18n('Bytes')}</div> + </GridItem> + {pointers.map(pointer => {return (<PointerInput key={pointer.value} label={pointer.label} value={pointer.value} + qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} />);})} + </GridSection> + ); +}; + +PacketsBytes.PropTypes = { + title: React.PropTypes.string, + pointers: React.PropTypes.array, + onQDataChanged: React.PropTypes.function, + dataMap: React.PropTypes.object, + qgenericFieldInfo: React.PropTypes.object +}; + +export default PacketsBytes; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx new file mode 100644 index 0000000000..3e8a9f4e77 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx @@ -0,0 +1,74 @@ +/*! + * 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 Input from 'nfvo-components/input/validation/Input.jsx'; +import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => { + return ( + <GridSection title={i18n('Protocols')}> + <GridItem colSpan={2}> + <InputOptions + data-test-id='nic-protocols' + label={i18n('Protocols')} + type='select' + isMultiSelect={true} + isValid={qgenericFieldInfo['protocols/protocols'].isValid} + errorText={qgenericFieldInfo['protocols/protocols'].errorText} + onInputChange={()=>{}} + onEnumChange={protocols => { + onQDataChanged({'protocols/protocols' : protocols});} + } + multiSelectedEnum={dataMap['protocols/protocols']} + clearable={false} + values={qgenericFieldInfo['protocols/protocols'].enum}/> + </GridItem> + <GridItem colSpan={2}> + <Input + data-test-id='nic-protocolWithHighestTrafficProfile' + label={i18n('Protocol with Highest Traffic Profile')} + type='select' + groupClassName='bootstrap-input-options' + className='input-options-select' + isValid={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].isValid} + errorText={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].errorText} + value={dataMap['protocols/protocolWithHighestTrafficProfile']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'protocols/protocolWithHighestTrafficProfile' : val});} + }> + {(protocols.length === 0) && + <option key={'You must select protocols first...'} value=''>{i18n('You must select protocols first...')}</option> + } + {protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)} + </Input> + </GridItem> + </GridSection> + ); +}; + +Protocols.PropTypes = { + protocols: React.PropTypes.array, + onQDataChanged: React.PropTypes.function, + dataMap: React.PropTypes.object, + qgenericFieldInfo: React.PropTypes.object +}; + +export default Protocols; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx new file mode 100644 index 0000000000..1dd0045f7b --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.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 i18n from 'nfvo-utils/i18n/i18n.js'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; + +const Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { + return( + <GridSection title={i18n('Sizing')}> + <GridItem colSpan={4}> + <Input + label={i18n('Describe Quality of Service')} + type='textarea' + data-test-id='sizing-describeQualityOfService' + isValid={qgenericFieldInfo['sizing/describeQualityOfService'].isValid} + errorText={qgenericFieldInfo['sizing/describeQualityOfService'].errorText} + value={dataMap['sizing/describeQualityOfService']} + onChange={val => onQDataChanged({'sizing/describeQualityOfService' : val}) }/> + </GridItem> + </GridSection> + ); +}; + +export default Sizing; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js index d535a34a82..b2133ad5d8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js @@ -1,69 +1,65 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; import {actionTypes} from './SoftwareProductComponentProcessesConstants.js'; -function baseUrl(softwareProductId, componentId) { +function baseUrl(softwareProductId, version, componentId) { const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components/${componentId}/processes`; + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`; } -function fetchProcessesList({softwareProductId, componentId, version}) { - let versionQuery = version ? `?version=${version}` : ''; - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}${versionQuery}`); +function fetchProcessesList({softwareProductId, version, componentId}) { + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); } -function deleteProcess({softwareProductId, componentId, processId}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId)}/${processId}`); +function deleteProcess({softwareProductId, version, componentId, processId}) { + return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`); } -function putProcess({softwareProductId, componentId, process}) { - return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${process.id}`, { +function putProcess({softwareProductId, version, componentId, process}) { + return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, { name: process.name, - description: process.description + description: process.description, + type: process.type === '' ? null : process.type }); } -function postProcess({softwareProductId,componentId, process}) { - return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}`, { +function postProcess({softwareProductId, version, componentId, process}) { + return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, { name: process.name, - description: process.description + description: process.description, + type: process.type === '' ? null : process.type }); } -function uploadFileToProcess({softwareProductId, processId, componentId, formData}) { - return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}/${processId}/upload`, formData); +function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) { + return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/${processId}/upload`, formData); } const SoftwareProductComponentProcessesActionHelper = { - fetchProcessesList(dispatch, {softwareProductId, componentId, version}) { + fetchProcessesList(dispatch, {softwareProductId, version, componentId}) { dispatch({ type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, processesList: [] }); - return fetchProcessesList({softwareProductId, componentId, version}).then(response => { + return fetchProcessesList({softwareProductId, version, componentId}).then(response => { dispatch({ type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, processesList: response.results @@ -71,8 +67,8 @@ const SoftwareProductComponentProcessesActionHelper = { }); }, - deleteProcess(dispatch, {process, softwareProductId, componentId}) { - return deleteProcess({softwareProductId, processId:process.id, componentId}).then(() => { + deleteProcess(dispatch, {process, softwareProductId, version, componentId}) { + return deleteProcess({softwareProductId, version, processId:process.id, componentId}).then(() => { dispatch({ type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, processId: process.id @@ -81,11 +77,11 @@ const SoftwareProductComponentProcessesActionHelper = { }, - saveProcess(dispatch, {softwareProductId, componentId, previousProcess, process}) { + saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) { if (previousProcess) { - return putProcess({softwareProductId,componentId, process}).then(() => { + return putProcess({softwareProductId, version, componentId, process}).then(() => { if (process.formData && process.formData.name !== previousProcess.artifactName){ - uploadFileToProcess({softwareProductId, processId: process.id, formData: process.formData, componentId}); + uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId}); } dispatch({ type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, @@ -94,9 +90,9 @@ const SoftwareProductComponentProcessesActionHelper = { }); } else { - return postProcess({softwareProductId, componentId, process}).then(response => { + return postProcess({softwareProductId, version, componentId, process}).then(response => { if (process.formData) { - uploadFileToProcess({softwareProductId, processId: response.value, formData: process.formData, componentId}); + uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId}); } dispatch({ type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, @@ -133,12 +129,6 @@ const SoftwareProductComponentProcessesActionHelper = { dispatch({ type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE }); - }, - processEditorDataChanged(dispatch, {deltaData}) { - dispatch({ - type: actionTypes.processEditor.DATA_CHANGED, - deltaData - }); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js index 78a111a426..d15432b3fb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 actionTypes = keyMirror({ @@ -27,8 +22,15 @@ export const actionTypes = keyMirror({ SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null, FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null, - SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null, - processEditor: { - DATA_CHANGED: null - } + SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null }); + +export const optionsInputValues = { + PROCESS_TYPE: [ + {title: 'Select...', enum: ''}, + {title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'}, + {title: 'Other', enum: 'Other'} + ] +}; + +export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js index 0138023c30..9502e24b1a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js @@ -1,31 +1,29 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper'; import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx'; +import {SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js'; -const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({softwareProduct}) => { let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct; let {processesList = [], processesEditor = {}} = componentProcesses; - let {data} = processesEditor; + let {data, genericFieldInfo, formReady} = processesEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); let previousData; const processId = data ? data.id : null; @@ -35,19 +33,23 @@ const mapStateToProps = ({softwareProduct}) => { return { data, - previousData + genericFieldInfo, + previousData, + isFormValid, + formReady }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { return { - onDataChanged: deltaData => SoftwareProductComponentProcessesActionHelper.processEditorDataChanged(dispatch, {deltaData}), + onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM}), onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch), onSubmit: ({previousProcess, process}) => { SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch); - SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, previousProcess, componentId, process}); - } + SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, componentId, process}); + }, + onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js index f859f690e8..9afaa6d5fd 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js @@ -1,43 +1,53 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentProcessesConstants.js'; +import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js'; export default (state = {}, action) => { switch (action.type) { case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: return { ...state, + formReady: null, + formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM, + genericFieldInfo: { + 'name' : { + isValid: true, + errorText: '', + validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] + }, + 'description' : { + isValid: true, + errorText: '', + validations: [{type: 'maxLength', data: 1000}] + }, + 'artifactName' : { + isValid: true, + errorText: '', + validations: [] + }, + 'type' : { + isValid: true, + errorText: '', + validations: [] + } + }, data: action.process }; case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: return {}; - - case actionTypes.processEditor.DATA_CHANGED: - return { - ...state, - data: { - ...state.data, - ...action.deltaData - } - }; default: return state; } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx index ca6d843af7..18f2ee129c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx @@ -1,18 +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 from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Dropzone from 'react-dropzone'; - -import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; +import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ id: React.PropTypes.string, name: React.PropTypes.string, description: React.PropTypes.string, - artifactName: React.PropTypes.string + artifactName: React.PropTypes.string, + type: React.PropTypes.string }); +const FileUploadBox = ({onClick}) => { + return ( + <div className='file-upload-box'> + <div className='drag-text'>{i18n('Drag & drop for upload')}</div> + <div className='or-text'>{i18n('or')}</div> + <div className='upload-btn primary-btn' onClick={onClick}> + <span className='primary-btn-text'>{i18n('Select file')}</span> + </div> + </div> + ); +}; + class SoftwareProductProcessesEditorView extends React.Component { state = { @@ -30,65 +60,91 @@ class SoftwareProductProcessesEditorView extends React.Component { }; render() { - let {isReadOnlyMode, onCancel, onDataChanged, data = {}} = this.props; - let {name, description, artifactName} = data; + let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props; + let {name, description, artifactName, type} = data; return ( <div> - <ValidationForm + { genericFieldInfo && <Form ref='validationForm' isReadOnlyMode={isReadOnlyMode} hasButtons={true} labledButtons={true} onSubmit={ () => this.submit() } onReset={ () => onCancel() } + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.props.onValidateForm() } className='vsp-processes-editor'> - <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}> - <Dropzone - className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`} - onDrop={files => this.handleImportSubmit(files)} - onDragEnter={() => this.setState({dragging:true})} - onDragLeave={() => this.setState({dragging:false})} - multiple={false} - disableClick={true} - ref='processEditorFileInput' - name='processEditorFileInput' - accept='*.*'> - <div className='row'> - <div className='col-md-6'> - <ValidationInput - onChange={name => onDataChanged({name})} - label={i18n('Name')} - value={name} - validations={{validateName: true, maxLength: 120, required: true}} - type='text'/> - <ValidationInput - label={i18n('Artifacts')} - value={artifactName} - type='text' - disabled/> - </div> - <div className='col-md-6'> - <div className='file-upload-box'> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={() => this.refs.processEditorFileInput.open()}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> - </div> - </div> - <ValidationInput - onChange={description => onDataChanged({description})} - label={i18n('Notes')} - value={description} - name='vsp-process-description' - className='vsp-process-description' - validations={{maxLength: 1000}} - type='textarea'/> - </Dropzone> - </div> - </ValidationForm> + <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}> + <Dropzone + className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`} + onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)} + onDragEnter={() => this.setState({dragging:true})} + onDragLeave={() => this.setState({dragging:false})} + multiple={false} + disableClick={true} + ref='processEditorFileInput' + name='processEditorFileInput'> + <GridSection> + <GridItem colSpan={2}> + <Input + onChange={name => onDataChanged({name})} + isValid={genericFieldInfo.name.isValid} + isRequired={true} + data-test-id='name' + errorText={genericFieldInfo.name.errorText} + label={i18n('Name')} + value={name} + type='text'/> + </GridItem> + <GridItem colSpan={2}> + <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} /> + </GridItem> + </GridSection> + <GridSection> + <GridItem colSpan={2}> + <Input + name='vsp-process-description' + groupClassName='vsp-process-description' + onChange={description => onDataChanged({description})} + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} + label={i18n('Notes')} + value={description} + data-test-id='vsp-process-description' + type='textarea'/> + </GridItem> + <GridItem colSpan={2}> + <Input + label={i18n('Artifacts')} + data-test-id='artifacts' + value={artifactName} + type='text' + disabled/> + <Input + onChange={e => { + // setting the unit to the correct value + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onDataChanged({type: val});} + } + value={type} + label={i18n('Process Type')} + data-test-id='process-type' + isValid={genericFieldInfo.type.isValid} + errorText={genericFieldInfo.type.errorText} + type='select' + className='input-options-select' + groupClassName='bootstrap-input-options' > + {ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype => + <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} + </Input> + </GridItem> + </GridSection> + </Dropzone> + </div> + </Form>} </div> ); } @@ -110,14 +166,25 @@ class SoftwareProductProcessesEditorView extends React.Component { } - handleImportSubmit(files) { - let {onDataChanged} = this.props; - this.setState({ - dragging: false, - complete: '0', - files - }); - onDataChanged({artifactName: files[0].name}); + handleImportSubmit(files, rejectedFiles) { + if (files.length > 0) { + let {onDataChanged} = this.props; + this.setState({ + dragging: false, + complete: '0', + files + }); + onDataChanged({artifactName: files[0].name}); + } + else if (rejectedFiles.length > 0) { + this.setState({ + dragging: false + }); + if (DEBUG) { + console.log('file was rejected ' + rejectedFiles[0].name); + } + } + } } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js index 5f6932897e..a8cb709194 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js @@ -1,30 +1,27 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 i18n from 'nfvo-utils/i18n/i18n.js'; +import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js'; import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx'; -const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct; let{processesList = [], processesEditor = {}} = componentProcesses; @@ -42,12 +39,19 @@ const mapStateToProps = ({softwareProduct}) => { }; -const mapActionsToProps = (dispatch, {softwareProductId}) => { +const mapActionsToProps = (dispatch, {componentId, softwareProductId}) => { return { onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch), onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openDeleteProcessesConfirm(dispatch, {process, softwareProductId}) + onDeleteProcessClick: (process, version) => dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data:{ + msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), + onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, + {process, softwareProductId, version, componentId}) + } + }) }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js index 4bb124d52f..98e24a9c21 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 './SoftwareProductComponentProcessesConstants.js'; export default (state = [], action) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx deleted file mode 100644 index 48fa862364..0000000000 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import {connect} from 'react-redux'; -import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx'; -import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js'; -import i18n from 'nfvo-utils/i18n/i18n.js'; - -function renderMsg(processToDelete) { - let name = processToDelete ? processToDelete.name : ''; - let msg = i18n('Are you sure you want to delete "{name}"?', {name}); - return ( - <div> - <p>{msg}</p> - </div> - ); -}; - -const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor, softwareProductComponents} = softwareProduct; - let {componentProcesses} = softwareProductComponents; - let {processToDelete} = componentProcesses; - let softwareProductId = softwareProductEditor.data.id; - const show = processToDelete !== false; - return { - show, - title: 'Warning!', - type: 'warning', - msg: renderMsg(processToDelete), - confirmationDetails: {processToDelete, softwareProductId} - }; -}; - -const mapActionsToProps = (dispatch,{componentId, softwareProductId}) => { - return { - onConfirmed: ({processToDelete}) => { - SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, {process: processToDelete, softwareProductId, componentId}); - SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch); - }, - onDeclined: () => { - SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch); - } - }; -}; - -export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView); - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx index a8b07e9194..650d6d5ebc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx @@ -1,3 +1,18 @@ +/*! + * 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'; @@ -6,7 +21,6 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js'; -import SoftwareProductComponentsProcessesConfirmationModal from './SoftwareProductComponentsProcessesConfirmationModal.jsx'; class SoftwareProductProcessesView extends React.Component { @@ -22,12 +36,11 @@ class SoftwareProductProcessesView extends React.Component { isModalInEditMode: React.PropTypes.bool, onStorageSelect: React.PropTypes.func, componentId: React.PropTypes.string, - softwareProductId: React.PropTypes.string + softwareProductId: React.PropTypes.string, + currentSoftwareProduct: React.PropTypes.object }; render() { - let { softwareProductId, componentId} = this.props; - return ( <div className='vsp-processes-page'> <div className='software-product-view'> @@ -35,18 +48,15 @@ class SoftwareProductProcessesView extends React.Component { {this.renderEditor()} {this.renderProcessList()} </div> - <SoftwareProductComponentsProcessesConfirmationModal - componentId={componentId} - softwareProductId={softwareProductId}/> </div> </div> ); } renderEditor() { - let {softwareProductId, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; + let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; return ( - <Modal show={isDisplayModal} bsSize='large' animation={true}> + <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'> <Modal.Header> <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title> </Modal.Header> @@ -54,6 +64,7 @@ class SoftwareProductProcessesView extends React.Component { <SoftwareProductProcessesEditor componentId={componentId} softwareProductId={softwareProductId} + version={version} isReadOnlyMode={isReadOnlyMode}/> </Modal.Body> </Modal> @@ -72,7 +83,8 @@ class SoftwareProductProcessesView extends React.Component { placeholder={i18n('Filter Process')} onAdd={onAddProcess} isReadOnlyMode={isReadOnlyMode} - onFilter={filter => this.setState({localFilter: filter})}> + title={i18n('Process Details')} + onFilter={value => this.setState({localFilter: value})}> {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} </ListEditorView> </div> @@ -81,14 +93,14 @@ class SoftwareProductProcessesView extends React.Component { renderProcessListItem(process, isReadOnlyMode) { let {id, name, description, artifactName = ''} = process; - let {onEditProcessClick, onDeleteProcessClick} = this.props; + let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} = this.props; return ( <ListEditorItemView key={id} className='list-editor-item-view' isReadOnlyMode={isReadOnlyMode} onSelect={() => onEditProcessClick(process)} - onDelete={() => onDeleteProcessClick(process)}> + onDelete={() => onDeleteProcessClick(process, version)}> <div className='list-editor-item-view-field'> <div className='title'>{i18n('Name')}</div> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js index fbd3f81ec2..18a3b1e8ff 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js @@ -1,47 +1,48 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * 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 - * + * + * 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. - * ============LICENSE_END========================================================= + * 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 VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; import SoftwareProductComponentStorageView from './SoftwareProductComponentStorageView.jsx'; +import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js'; + const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {data: componentData , qdata, qschema}} = softwareProductComponents; + let {componentEditor: {data: componentData , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents; let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP); return { componentData, qdata, - qschema, - isReadOnlyMode + isReadOnlyMode, + qGenericFieldInfo, + dataMap }; }; -const mapActionToProps = (dispatch, {softwareProductId, componentId}) => { +const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => { return { - onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}), - onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});} + onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), + onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, + {softwareProductId, version, vspComponentId: componentId, componentData, qdata}); + } }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx index 9c9600c376..28bdf8e5e5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx @@ -1,8 +1,156 @@ +/*! + * 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 ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; -import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import classnames from 'classnames'; +const BackupSection = ({isReadOnlyMode,dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Backup')}> + <GridItem> + <div className='vertical-flex'> + <label key='label' className={classnames('control-label',{'disabled': isReadOnlyMode})}>{i18n('Backup Type')}</label> + <div className='radio-options-content-row'> + {qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => ( + <Input + data-test-id='backupType' + type='radio' + key={onSite.enum} + name={'compute/guestOS/bitSize'} + className='radio-field' + value={onSite.enum} + label={onSite.title} + onChange={(site) => onQDataChanged({'storage/backup/backupType' : site})} + isValid={qgenericFieldInfo['storage/backup/backupType'].isValid} + errorText={qgenericFieldInfo['storage/backup/backupType'].errorText} + checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) } + </div> + </div> + </GridItem> + <GridItem> + <Input + className='section-field' + data-test-id='backupSolution' + onChange={(backupSolution) => onQDataChanged({'storage/backup/backupSolution' : backupSolution})} + label={i18n('Backup Solution')} + type='text' + isValid={qgenericFieldInfo['storage/backup/backupSolution'].isValid} + errorText={qgenericFieldInfo['storage/backup/backupSolution'].errorText} + value={dataMap['storage/backup/backupSolution']}/> + </GridItem> + <GridItem> + <Input + className='section-field' + data-test-id='backupStorageSize' + onChange={(backupStorageSize) => onQDataChanged({'storage/backup/backupStorageSize' : backupStorageSize})} + label={i18n('Backup Storage Size (GB)')} + type='number' + isValid={qgenericFieldInfo['storage/backup/backupStorageSize'].isValid} + errorText={qgenericFieldInfo['storage/backup/backupStorageSize'].errorText} + value={dataMap['storage/backup/backupStorageSize']}/> + </GridItem> + <GridItem> + <Input + data-test-id='backupNIC' + label={i18n('Backup NIC')} + type='select' + className='input-options-select section-field' + groupClassName='bootstrap-input-options' + isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid} + errorText={qgenericFieldInfo['storage/backup/backupNIC'].errorText} + value={dataMap['storage/backup/backupNIC']} + onChange={(e) => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({'storage/backup/backupNIC' : val});} + }> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)} + </Input> + </GridItem> + </GridSection> +); + +const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Snapshot Backup')}> + <GridItem> + <Input + className='section-field' + data-test-id='snapshotFrequency' + onChange={(snapshotFrequency) => onQDataChanged({'storage/snapshotBackup/snapshotFrequency' : snapshotFrequency})} + label={i18n('Backup Storage Size (GB)')} + type='number' + isValid={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].isValid} + errorText={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].errorText} + value={dataMap['storage/snapshotBackup/snapshotFrequency']}/> + </GridItem> + </GridSection> +); + +const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( + <GridSection title={i18n('Log Backup')}> + <GridItem> + <Input + className='section-field' + data-test-id='sizeOfLogFiles' + onChange={(sizeOfLogFiles) => onQDataChanged({'storage/logBackup/sizeOfLogFiles' : sizeOfLogFiles})} + label={i18n('Backup Storage Size (GB)')} + type='number' + isValid={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].isValid} + errorText={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].errorText} + value={dataMap['storage/logBackup/sizeOfLogFiles']}/> + </GridItem> + <GridItem> + <Input + className='section-field' + label={i18n('Log Retention Period (days)')} + data-test-id='logRetentionPeriod' + onChange={(logRetentionPeriod) => onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})} + type='number' + isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid} + errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText} + value={dataMap['storage/logBackup/logRetentionPeriod']}/> + </GridItem> + <GridItem> + <Input + className='section-field' + label={i18n('Log Backup Frequency (days)')} + data-test-id='logBackupFrequency' + onChange={(logBackupFrequency) => onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})} + type='number' + isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid} + errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText} + value={dataMap['storage/logBackup/logBackupFrequency']}/> + </GridItem> + <GridItem> + <Input + className='section-field' + label={i18n('Log File Location')} + data-test-id='logFileLocation' + onChange={(logFileLocation) => onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})} + type='text' + isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid} + errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText} + value={dataMap['storage/logBackup/logFileLocation']}/> + </GridItem> + </GridSection> +); class SoftwareProductComponentStorageView extends React.Component { @@ -14,110 +162,28 @@ class SoftwareProductComponentStorageView extends React.Component { }; render() { - let {qdata, qschema, onQDataChanged, onSubmit, isReadOnlyMode} = this.props; + let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} = this.props; return( <div className='vsp-component-questionnaire-view'> - <ValidationForm - ref='storageValidationForm' - hasButtons={false} + {qGenericFieldInfo && <Form + ref={form => this.form = form } + isValid={true} + formReady={null} onSubmit={() => onSubmit({qdata})} className='component-questionnaire-validation-form' isReadOnlyMode={isReadOnlyMode} - onDataChanged={onQDataChanged} - data={qdata} - schema={qschema}> - - <div className='section-title'>{i18n('Backup')}</div> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <div className='vertical-flex'> - <label key='label' className='control-label'>{i18n('Backup Type')}</label> - <div className='radio-options-content-row'> - <ValidationInput - label={i18n('On Site')} - type='radiogroup' - pointer={'/storage/backup/backupType'} - className='radio-field'/> - </div> - </div> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Backup Solution')} - pointer={'/storage/backup/backupSolution'} - className='section-field'/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Backup Storage Size (GB)')} - pointer={'/storage/backup/backupStorageSize'} - className='section-field'/> - </div> - <ValidationInput - type='select' - label={i18n('Backup NIC')} - pointer={'/storage/backup/backupNIC'} - className='section-field'/> - </div> - </div> - - <div className='section-title'>{i18n('Snapshot Backup')}</div> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Snapshot Frequency (hours)')} - pointer={'/storage/snapshotBackup/snapshotFrequency'} - className='section-field'/> - </div> - <div className='empty-two-col' /> - <div className='empty-col' /> - </div> - </div> - - <div className='section-title'>{i18n('Log Backup')}</div> - <div className='rows-section'> - <div className='row-flex-components input-row'> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Size of Log Files (GB)')} - pointer={'/storage/logBackup/sizeOfLogFiles'} - className='section-field'/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Log Retention Period (days)')} - pointer={'/storage/logBackup/logRetentionPeriod'} - className='section-field'/> - </div> - <div className='single-col'> - <ValidationInput - type='text' - label={i18n('Log Backup Frequency (days)')} - pointer={'/storage/logBackup/logBackupFrequency'} - className='section-field'/> - </div> - <ValidationInput - type='text' - label={i18n('Log File Location')} - pointer={'/storage/logBackup/logFileLocation'} - className='section-field'/> - </div> - </div> - </ValidationForm> + hasButtons={false}> + <BackupSection isReadOnlyMode={isReadOnlyMode} onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <SnapshotBackupSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + <LogBackupSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/> + </Form> } </div> ); } save(){ - return this.refs.storageValidationForm.handleFormSubmit(new Event('dummy')); + return this.form.handleFormSubmit(new Event('dummy')); } } |