diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components')
74 files changed, 5562 insertions, 3449 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 b13bde03c8..e59337c122 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js @@ -13,79 +13,83 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, forms} from './SoftwareProductComponentsConstants.js'; +import { actionTypes, forms } from './SoftwareProductComponentsConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.COMPONENT_CREATE_OPEN: - return { - ...state, - formName: forms.CREATE_FORM, - formReady: null, - genericFieldInfo: { - 'displayName' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'validateName', data: true}, {type: 'maxLength', data: 25}] - }, - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - } - } - }; - case actionTypes.COMPONENT_LOAD: - return { - ...state, - data: action.component, - formReady: null, - formName: forms.ALL_SPC_FORMS, - genericFieldInfo: { - 'displayName' : { - isValid: true, - errorText: '', - validations: [] - }, - 'vfcCode' : { - isValid: true, - errorText: '', - validations: [] - }, - 'nfcFunction' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 30}] - }, - 'description' : { - isValid: true, - errorText: '', - validations: [] - } - } - }; - 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: - return { - ...state, - data: { - ...state.data, - ...action.deltaData - } - }; - case actionTypes.COMPONENT_DATA_CLEAR: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.COMPONENT_CREATE_OPEN: + return { + ...state, + formName: forms.CREATE_FORM, + formReady: null, + genericFieldInfo: { + displayName: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'validateName', data: true }, + { type: 'maxLength', data: 25 } + ] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + } + } + }; + case actionTypes.COMPONENT_LOAD: + return { + ...state, + data: action.component, + formReady: null, + formName: forms.ALL_SPC_FORMS, + genericFieldInfo: { + displayName: { + isValid: true, + errorText: '', + validations: [] + }, + vfcCode: { + isValid: true, + errorText: '', + validations: [] + }, + nfcFunction: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 30 }] + }, + description: { + isValid: true, + errorText: '', + validations: [] + } + } + }; + 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: + return { + ...state, + data: { + ...state.data, + ...action.deltaData + } + }; + case actionTypes.COMPONENT_DATA_CLEAR: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js index f74b2fe2fb..bffa9f7d25 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js @@ -1,50 +1,71 @@ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js'; -import {onboardingMethod as onboardingMethodTypes} from '../SoftwareProductConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../SoftwareProductConstants.js'; import ConfirmationModalConstants from 'nfvo-components/modal/GlobalModalConstants.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; -import {screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js'; import SoftwareProductComponentsView from './SoftwareProductComponentsListView.jsx'; import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; -const generateMessage = (name) => { - return i18n('Are you sure you want to delete {name}?', {name: name}); +const generateMessage = name => { + return i18n('Are you sure you want to delete {name}?', { name: name }); }; -const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => { - let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct; - let {componentsList} = softwareProductComponents; - let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct; - return { - currentSoftwareProduct, - componentsList, - isManual: onboardingMethod === onboardingMethodTypes.MANUAL, - version - }; +const mapStateToProps = ({ + softwareProduct, + currentScreen: { props: { version } } +}) => { + let { + softwareProductEditor: { data: currentSoftwareProduct = {} }, + softwareProductComponents + } = softwareProduct; + let { componentsList } = softwareProductComponents; + let { + onboardingMethod = onboardingMethodTypes.HEAT + } = currentSoftwareProduct; + return { + currentSoftwareProduct, + componentsList, + isManual: onboardingMethod === onboardingMethodTypes.MANUAL, + version + }; }; -const mapActionToProps = (dispatch) => { - return { - onComponentSelect: ({id: softwareProductId, componentId, version}) => - ScreensHelper.loadScreen(dispatch, { - screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, version, componentId} - }), - onAddComponent: (softwareProductId, version) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, version, modalClassName: 'create-vfc-modal'}), - onDeleteComponent: (component, softwareProductId, version) => dispatch({ - type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING, - data:{ - msg: generateMessage(component.displayName), - onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, { - softwareProductId, - componentId: component.id, - version - }) - } - }) - }; +const mapActionToProps = dispatch => { + return { + onComponentSelect: ({ id: softwareProductId, componentId, version }) => + ScreensHelper.loadScreen(dispatch, { + screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { softwareProductId, version, componentId } + }), + onAddComponent: (softwareProductId, version) => + SoftwareProductActionHelper.addComponent(dispatch, { + softwareProductId, + version, + modalClassName: 'create-vfc-modal' + }), + onDeleteComponent: (component, softwareProductId, version) => + dispatch({ + type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING, + data: { + msg: generateMessage(component.displayName), + onConfirmed: () => + SoftwareProductComponentsActionHelper.deleteComponent( + dispatch, + { + softwareProductId, + componentId: component.id, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsView); +export default connect(mapStateToProps, mapActionToProps, null, { + withRef: true +})(SoftwareProductComponentsView); 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 cf63ad79d0..73a971ccbb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js @@ -16,157 +16,265 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes, COMPONENTS_QUESTIONNAIRE} from './SoftwareProductComponentsConstants.js'; +import { + actionTypes, + COMPONENTS_QUESTIONNAIRE +} from './SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; function baseUrl(softwareProductId, version) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`; } function fetchSoftwareProductComponents(softwareProductId, version) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); } -function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent); +function putSoftwareProductComponentQuestionnaire( + softwareProductId, + version, + vspComponentId, + vspComponent +) { + return RestAPIUtil.put( + `${baseUrl( + softwareProductId, + version + )}/${vspComponentId}/questionnaire`, + vspComponent + ); } -function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){ - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`); +function fetchSoftwareProductComponentQuestionnaire( + softwareProductId, + version, + vspComponentId +) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire` + ); } -function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){ - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`); +function fetchSoftwareProductComponent( + softwareProductId, + version, + vspComponentId +) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version)}/${vspComponentId}` + ); } -function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, { - name: vspComponent.name, - displayName: vspComponent.displayName, - vfcCode: vspComponent.vfcCode, - nfcFunction: vspComponent.nfcFunction, - description: vspComponent.description - }); +function putSoftwareProductComponent( + softwareProductId, + version, + vspComponentId, + vspComponent +) { + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version)}/${vspComponentId}`, + { + name: vspComponent.name, + displayName: vspComponent.displayName, + vfcCode: vspComponent.vfcCode, + nfcFunction: vspComponent.nfcFunction, + description: vspComponent.description + } + ); } -function deleteSoftwareProductComponent(softwareProductId, componentId, version) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${componentId}`,); +function deleteSoftwareProductComponent( + softwareProductId, + componentId, + version +) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version)}/${componentId}` + ); } +function postSoftwareProductComponent( + softwareProductId, + vspComponent, + version +) { + return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { + name: vspComponent.displayName, + displayName: vspComponent.displayName, + description: vspComponent.description + }); +} -function postSoftwareProductComponent(softwareProductId, vspComponent, version) { +const SoftwareProductComponentsActionHelper = { + fetchSoftwareProductComponents(dispatch, { softwareProductId, version }) { + return fetchSoftwareProductComponents(softwareProductId, version).then( + response => { + dispatch({ + type: actionTypes.COMPONENTS_LIST_UPDATE, + componentsList: response.results + }); + return response; + } + ); + }, - return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { - name: vspComponent.displayName, - displayName: vspComponent.displayName, - description: vspComponent.description - }); -} + updateSoftwareProductComponent( + dispatch, + { softwareProductId, version, vspComponentId, componentData, qdata } + ) { + return Promise.all([ + SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { softwareProductId, version, vspComponentId, qdata } + ), + SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData( + dispatch, + { softwareProductId, version, vspComponentId, componentData } + ) + ]); + }, + updateSoftwareProductComponentQuestionnaire( + dispatch, + { softwareProductId, version, vspComponentId, qdata } + ) { + return putSoftwareProductComponentQuestionnaire( + softwareProductId, + version, + vspComponentId, + qdata + ); + }, -const SoftwareProductComponentsActionHelper = { - fetchSoftwareProductComponents(dispatch, {softwareProductId, version}) { - return fetchSoftwareProductComponents(softwareProductId, version).then(response => { - dispatch({ - type: actionTypes.COMPONENTS_LIST_UPDATE, - componentsList: response.results - }); - return response; - }); - }, - - updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) { - return Promise.all([ - SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}), - SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) - ]); - }, - - updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) { - return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata); - }, - - updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) { - return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({ - type: actionTypes.COMPONENTS_LIST_EDIT, - component: { - id: vspComponentId, - ...componentData - } - })); - }, - - 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, version, vspComponentId}) { - return Promise.all([ - fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => { - dispatch({ - type: actionTypes.COMPONENT_LOAD, - component: response.data - }); - 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)}}); - }) - ]); - }, - - - clearComponentsStore(dispatch) { - dispatch({ - type: actionTypes.COMPONENTS_LIST_UPDATE, - componentsList: [] - }); - }, - - createSoftwareProductComponent(dispatch,{softwareProductId, componentData, version}) { - SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch); - /* for mock only */ - - dispatch({ - type: actionTypes.COMPONENTS_LIST_UPDATE, - componentsList: [{id: '123', ...componentData}] - }); - - postSoftwareProductComponent(softwareProductId, componentData, version).then(() => { - SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version}); - }); - }, - - clearComponentCreationData(dispatch) { - dispatch({ - type: actionTypes.COMPONENT_DATA_CLEAR - }); - }, - - closeComponentCreationModal(dispatch) { - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch); - }, - - deleteComponent(dispatch, {softwareProductId, componentId, version}) { - deleteSoftwareProductComponent(softwareProductId, componentId, version); - dispatch({ - type: actionTypes.COMPONENT_DELETE, - componentId: componentId - }); - }, + updateSoftwareProductComponentData( + dispatch, + { softwareProductId, version, vspComponentId, componentData } + ) { + return putSoftwareProductComponent( + softwareProductId, + version, + vspComponentId, + componentData + ).then(() => + dispatch({ + type: actionTypes.COMPONENTS_LIST_EDIT, + component: { + id: vspComponentId, + ...componentData + } + }) + ); + }, + + 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, version, vspComponentId } + ) { + return Promise.all([ + fetchSoftwareProductComponent( + softwareProductId, + version, + vspComponentId + ).then(response => { + dispatch({ + type: actionTypes.COMPONENT_LOAD, + component: response.data + }); + 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) + } + }); + }) + ]); + }, + + clearComponentsStore(dispatch) { + dispatch({ + type: actionTypes.COMPONENTS_LIST_UPDATE, + componentsList: [] + }); + }, + + createSoftwareProductComponent( + dispatch, + { softwareProductId, componentData, version } + ) { + SoftwareProductComponentsActionHelper.closeComponentCreationModal( + dispatch + ); + /* for mock only */ + + dispatch({ + type: actionTypes.COMPONENTS_LIST_UPDATE, + componentsList: [{ id: '123', ...componentData }] + }); + + postSoftwareProductComponent( + softwareProductId, + componentData, + version + ).then(() => { + SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents( + dispatch, + { softwareProductId, version } + ); + }); + }, + clearComponentCreationData(dispatch) { + dispatch({ + type: actionTypes.COMPONENT_DATA_CLEAR + }); + }, + closeComponentCreationModal(dispatch) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + SoftwareProductComponentsActionHelper.clearComponentCreationData( + dispatch + ); + }, + deleteComponent(dispatch, { softwareProductId, componentId, version }) { + deleteSoftwareProductComponent(softwareProductId, componentId, version); + dispatch({ + type: actionTypes.COMPONENT_DELETE, + componentId: componentId + }); + } }; 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 35633b65cf..cc120d359a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js @@ -16,40 +16,40 @@ 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_DATA_CLEAR: null, - COMPONENT_QUESTIONNAIRE_UPDATE: null, - COMPONENT_DELETE: null, - COMPONENT_LOAD: null, - COMPONENT_CREATE_OPEN: null + COMPONENTS_LIST_UPDATE: null, + COMPONENTS_LIST_EDIT: null, + COMPONENT_UPDATE: null, + COMPONENT_DATA_CHANGED: null, + COMPONENT_DATA_CLEAR: null, + COMPONENT_QUESTIONNAIRE_UPDATE: null, + COMPONENT_DELETE: null, + COMPONENT_LOAD: null, + COMPONENT_CREATE_OPEN: null }); -export const storageConstants = keyMirror({ - backupType: { - ON_SITE: 'OnSite', - OFF_SITE: 'OffSite' - } +export const storageConstants = keyMirror({ + backupType: { + ON_SITE: 'OnSite', + OFF_SITE: 'OffSite' + } }); export const forms = keyMirror({ - ALL_SPC_FORMS: null, - NIC_EDIT_FORM: null, - CREATE_FORM: null, - IMAGE_EDIT_FORM: null + ALL_SPC_FORMS: null, + NIC_EDIT_FORM: null, + CREATE_FORM: null, + IMAGE_EDIT_FORM: null }); export const COMPONENTS_QUESTIONNAIRE = 'component'; export const COMPONENTS_COMPUTE_QUESTIONNAIRE = 'compute'; export const navigationItems = keyMirror({ - STORAGE: 'Storage', - PROCESS_DETAILS: 'Process Details', - MONITORING: 'Monitoring', - NETWORK: 'Network', - IMAGES: 'Images', - COMPUTE: 'Compute', - LOAD_BALANCING: 'High Availability & Load Balancing' + STORAGE: 'Storage', + PROCESS_DETAILS: 'Process Details', + MONITORING: 'Monitoring', + NETWORK: 'Network', + IMAGES: 'Images', + COMPUTE: 'Compute', + LOAD_BALANCING: 'High Availability & Load Balancing' }); 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 92211e0fd2..e1cf5f4fc3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js @@ -13,18 +13,26 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsConstants.js'; +import { actionTypes } from './SoftwareProductComponentsConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.COMPONENTS_LIST_UPDATE: - return [...action.componentsList]; - case actionTypes.COMPONENTS_LIST_EDIT: - const indexForEdit = state.findIndex(component => component.id === action.component.id); - return [...state.slice(0, indexForEdit), action.component, ...state.slice(indexForEdit + 1)]; - case actionTypes.COMPONENT_DELETE: - return state.filter(component => component.id !== action.componentId); - default: - return state; - } + switch (action.type) { + case actionTypes.COMPONENTS_LIST_UPDATE: + return [...action.componentsList]; + case actionTypes.COMPONENTS_LIST_EDIT: + const indexForEdit = state.findIndex( + component => component.id === action.component.id + ); + return [ + ...state.slice(0, indexForEdit), + action.component, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.COMPONENT_DELETE: + return state.filter( + component => component.id !== action.componentId + ); + default: + return state; + } }; 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 0bf32df1a3..fc8abf6ff6 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -22,85 +22,113 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; const ComponentPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - displayName: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + displayName: PropTypes.string, + description: PropTypes.string }); class SoftwareProductComponentsListView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; + static propTypes = { + isReadOnlyMode: PropTypes.bool, + componentsList: PropTypes.arrayOf(ComponentPropType), + onComponentSelect: PropTypes.func + }; - static propTypes = { - isReadOnlyMode: PropTypes.bool, - componentsList: PropTypes.arrayOf(ComponentPropType), - onComponentSelect: PropTypes.func - }; + render() { + let { componentsList = [], isManual } = this.props; + return ( + <div className=""> + {(componentsList.length > 0 || isManual) && + this.renderComponents()} + </div> + ); + } - render() { - let {componentsList = [], isManual} = this.props; - return ( - <div className=''> - { - (componentsList.length > 0 || isManual) && this.renderComponents() - } - </div> - ); - } + renderComponents() { + const { localFilter } = this.state; + const { + isManual, + onAddComponent, + isReadOnlyMode, + version, + currentSoftwareProduct: { id: softwareProductId }, + componentsList + } = this.props; + return ( + <ListEditorView + title={i18n('Virtual Function Components')} + filterValue={localFilter} + placeholder={i18n('Filter Components')} + onFilter={value => this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode || !!this.filterList().length} + plusButtonTitle={i18n('Add Component')} + onAdd={ + isManual && componentsList.length === 0 + ? () => onAddComponent(softwareProductId, version) + : false + } + twoColumns> + {this.filterList().map(component => + this.renderComponentsListItem(component) + )} + </ListEditorView> + ); + } - renderComponents() { - const {localFilter} = this.state; - const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props; - return ( - <ListEditorView - title={i18n('Virtual Function Components')} - filterValue={localFilter} - placeholder={i18n('Filter Components')} - onFilter={value => this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode || !!this.filterList().length} - plusButtonTitle={i18n('Add Component')} - onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false} - twoColumns> - {this.filterList().map(component => this.renderComponentsListItem(component))} - </ListEditorView> - ); - } + renderComponentsListItem(component) { + let { + id: componentId, + name, + displayName, + description = '' + } = component; + let { + currentSoftwareProduct: { id }, + onComponentSelect, + version + } = this.props; + return ( + <ListEditorItemView + key={ + name + Math.floor(Math.random() * (100 - 1) + 1).toString() + } + className="list-editor-item-view" + onSelect={() => + onComponentSelect({ id, componentId, version }) + }> + <ListEditorItemViewField> + <div className="name">{displayName}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div className="description">{description}</div> + </ListEditorItemViewField> + </ListEditorItemView> + ); + } - renderComponentsListItem(component) { - let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props; - return ( - <ListEditorItemView - key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} - className='list-editor-item-view' - onSelect={() => onComponentSelect({id, componentId, version})}> - <ListEditorItemViewField> - <div className='name'>{displayName}</div> - </ListEditorItemViewField> - <ListEditorItemViewField> - <div className='description'>{description}</div> - </ListEditorItemViewField> - </ListEditorItemView> - ); - } + filterList() { + let { componentsList = [] } = this.props; - filterList() { - let {componentsList = []} = this.props; - - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return componentsList.filter(({displayName = '', description = ''}) => { - return escape(displayName).match(filter) || escape(description).match(filter); - }); - } - else { - return componentsList; - } - } + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return componentsList.filter( + ({ displayName = '', description = '' }) => { + return ( + escape(displayName).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return componentsList; + } + } } export default SoftwareProductComponentsListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js index 02c09fbdf8..cd37c317af 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js @@ -16,154 +16,270 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes} from './computeComponents/computeFlavor/ComputeFlavorConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as globalModalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './computeComponents/computeFlavor/ComputeFlavorConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { + actionTypes as globalModalActionTypes, + modalSizes +} from 'nfvo-components/modal/GlobalModalConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; function baseUrl(softwareProductId, componentId, version) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`; } -function baseUrlVSPLevel(softwareProductId, version){ - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`; +function baseUrlVSPLevel(softwareProductId, version) { + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`; } -function fetchComputesList(softwareProductId, componentId, version){ - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}`); +function fetchComputesList(softwareProductId, componentId, version) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, componentId, version)}` + ); } -function fetchComputesListForVSP(softwareProductId, version){ - return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`); +function fetchComputesListForVSP(softwareProductId, version) { + return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`); } function fetchCompute(softwareProductId, componentId, computeId, version) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`); + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, componentId, version)}/${computeId}` + ); } -function fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`); +function fetchComputeQuestionnaire({ + softwareProductId, + componentId, + computeId, + version +}) { + return RestAPIUtil.fetch( + `${baseUrl( + softwareProductId, + componentId, + version + )}/${computeId}/questionnaire` + ); } -function postCompute({softwareProductId, componentId, compute, version}) { - return RestAPIUtil.post(baseUrl(softwareProductId, componentId, version), compute); +function postCompute({ softwareProductId, componentId, compute, version }) { + return RestAPIUtil.post( + baseUrl(softwareProductId, componentId, version), + compute + ); } -function putCompute({softwareProductId, componentId, compute, version}) { - const computeData = { - name: compute.name, - description: compute.description - }; - return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${compute.id}`, computeData); +function putCompute({ softwareProductId, componentId, compute, version }) { + const computeData = { + name: compute.name, + description: compute.description + }; + return RestAPIUtil.put( + `${baseUrl(softwareProductId, componentId, version)}/${compute.id}`, + computeData + ); } -function putComputeQuestionnaire({softwareProductId, componentId, computeId, qdata, version}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`, qdata); +function putComputeQuestionnaire({ + softwareProductId, + componentId, + computeId, + qdata, + version +}) { + return RestAPIUtil.put( + `${baseUrl( + softwareProductId, + componentId, + version + )}/${computeId}/questionnaire`, + qdata + ); } -function deleteCompute({softwareProductId, componentId, computeId, version}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`); +function deleteCompute({ softwareProductId, componentId, computeId, version }) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, componentId, version)}/${computeId}` + ); } - const ComputeFlavorActionHelper = { - openComputeEditor(dispatch, {props}) { - dispatch({ - type: actionTypes.computeEditor.LOAD_EDITOR_DATA, - compute: props.compute || {} - }); - dispatch({ - type: globalModalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR, - modalClassName: `compute-flavor-editor-modal-${props.compute ? 'edit' : 'create'}`, - modalComponentProps: {...props, size: props.compute ? modalSizes.LARGE : undefined, dialogClassName:'compute-flavor-editor-modal'}, - title: `${props.compute ? i18n('Edit Compute Flavor') : i18n('Create New Compute Flavor')}` - } - }); - }, - - closeComputeEditor(dispatch){ - dispatch({ - type: globalModalActionTypes.GLOBAL_MODAL_CLOSE - }); - dispatch({ - type: actionTypes.computeEditor.CLEAR_DATA - }); - }, - - fetchComputesList(dispatch, {softwareProductId, componentId, version}) { - return fetchComputesList(softwareProductId, componentId, version).then(response => dispatch({ - type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED, - response - })); - }, - - fetchComputesListForVSP(dispatch, {softwareProductId, version}) { - return fetchComputesListForVSP(softwareProductId, version).then(response => dispatch({ - type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED, - response - })); - }, - - loadComputeData({softwareProductId, componentId, computeId, version}) { - return fetchCompute(softwareProductId, componentId, computeId, version); - }, - - loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}) { - return fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}).then(response => - ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_COMPUTE_QUESTIONNAIRE ,response: { - qdata: response.data ? JSON.parse(response.data) : {}, - qschema: JSON.parse(response.schema) - }}) - ); - }, - - loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}){ - return ComputeFlavorActionHelper.loadComputeData({softwareProductId, componentId, computeId, version}).then(({data}) => - ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}).then(() => - ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, version, isReadOnlyMode, compute: {id: computeId, ...data}}}) - )); - }, - - saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data: compute, qdata, version}) { - ComputeFlavorActionHelper.closeComputeEditor(dispatch); - if(compute.id) { - return Promise.all([ - putComputeQuestionnaire({softwareProductId, componentId, computeId: compute.id, qdata, version}), - putCompute({softwareProductId, componentId, compute, version}).then(() => { - dispatch({ - type: actionTypes.COMPUTE_LIST_EDIT, - compute - }); - }) - ]); - } - else { - return postCompute({softwareProductId, componentId, compute, version}).then(response => - dispatch({ - type: actionTypes.ADD_COMPUTE, - compute: { - ...compute, - id: response.id, - componentId - } - }) - ); - } - }, - - deleteCompute(dispatch, {softwareProductId, componentId, computeId, version}) { - return deleteCompute({softwareProductId, componentId, computeId, version}).then(() => dispatch({ - type: actionTypes.DELETE_COMPUTE, - computeId - })); - } + openComputeEditor(dispatch, { props }) { + dispatch({ + type: actionTypes.computeEditor.LOAD_EDITOR_DATA, + compute: props.compute || {} + }); + dispatch({ + type: globalModalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: + modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR, + modalClassName: `compute-flavor-editor-modal-${ + props.compute ? 'edit' : 'create' + }`, + modalComponentProps: { + ...props, + size: props.compute ? modalSizes.LARGE : undefined, + dialogClassName: 'compute-flavor-editor-modal' + }, + title: `${ + props.compute + ? i18n('Edit Compute Flavor') + : i18n('Create New Compute Flavor') + }` + } + }); + }, + + closeComputeEditor(dispatch) { + dispatch({ + type: globalModalActionTypes.GLOBAL_MODAL_CLOSE + }); + dispatch({ + type: actionTypes.computeEditor.CLEAR_DATA + }); + }, + + fetchComputesList(dispatch, { softwareProductId, componentId, version }) { + return fetchComputesList(softwareProductId, componentId, version).then( + response => + dispatch({ + type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED, + response + }) + ); + }, + + fetchComputesListForVSP(dispatch, { softwareProductId, version }) { + return fetchComputesListForVSP(softwareProductId, version).then( + response => + dispatch({ + type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED, + response + }) + ); + }, + + loadComputeData({ softwareProductId, componentId, computeId, version }) { + return fetchCompute(softwareProductId, componentId, computeId, version); + }, + + loadComputeQuestionnaire( + dispatch, + { softwareProductId, componentId, computeId, version } + ) { + return fetchComputeQuestionnaire({ + softwareProductId, + componentId, + computeId, + version + }).then(response => + ValidationHelper.qDataLoaded(dispatch, { + qName: COMPONENTS_COMPUTE_QUESTIONNAIRE, + response: { + qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema) + } + }) + ); + }, + + loadCompute( + dispatch, + { softwareProductId, componentId, version, computeId, isReadOnlyMode } + ) { + return ComputeFlavorActionHelper.loadComputeData({ + softwareProductId, + componentId, + computeId, + version + }).then(({ data }) => + ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, { + softwareProductId, + componentId, + computeId, + version + }).then(() => + ComputeFlavorActionHelper.openComputeEditor(dispatch, { + props: { + softwareProductId, + componentId, + version, + isReadOnlyMode, + compute: { id: computeId, ...data } + } + }) + ) + ); + }, + + saveComputeDataAndQuestionnaire( + dispatch, + { softwareProductId, componentId, data: compute, qdata, version } + ) { + ComputeFlavorActionHelper.closeComputeEditor(dispatch); + if (compute.id) { + return Promise.all([ + putComputeQuestionnaire({ + softwareProductId, + componentId, + computeId: compute.id, + qdata, + version + }), + putCompute({ + softwareProductId, + componentId, + compute, + version + }).then(() => { + dispatch({ + type: actionTypes.COMPUTE_LIST_EDIT, + compute + }); + }) + ]); + } else { + return postCompute({ + softwareProductId, + componentId, + compute, + version + }).then(response => + dispatch({ + type: actionTypes.ADD_COMPUTE, + compute: { + ...compute, + id: response.id, + componentId + } + }) + ); + } + }, + + deleteCompute( + dispatch, + { softwareProductId, componentId, computeId, version } + ) { + return deleteCompute({ + softwareProductId, + componentId, + computeId, + version + }).then(() => + dispatch({ + type: actionTypes.DELETE_COMPUTE, + computeId + }) + ); + } }; export default ComputeFlavorActionHelper; 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 574828c9ef..d595a82e11 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 @@ -13,35 +13,63 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx'; import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js'; -import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { data: currentVSP }, + softwareProductComponents + } = softwareProduct; + let { + componentEditor: { qdata, dataMap, qgenericFieldInfo }, + computeFlavor: { computesList: computeFlavorsList } + } = softwareProductComponents; -const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents; - - return { - qdata, - dataMap, - qgenericFieldInfo, - computeFlavorsList, - isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL - }; + return { + qdata, + dataMap, + qgenericFieldInfo, + computeFlavorsList, + isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL + }; }; -const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => { - return { - 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}) - }; +const mapActionToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + 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 + }) + }; }; -export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentComputeView); +export default connect(mapStateToProps, mapActionToProps, null, { + withRef: true +})(SoftwareProductComponentComputeView); 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 55e5e2b30b..e6ce96666e 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 @@ -22,67 +22,99 @@ import ComputeFlavors from './computeComponents/ComputeFlavors.js'; import Validator from 'nfvo-utils/Validator.js'; class SoftwareProductComponentComputeView extends React.Component { + static propTypes = { + dataMap: PropTypes.object, + qgenericFieldInfo: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onQDataChanged: PropTypes.func.isRequired, + qValidateData: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired + }; - static propTypes = { - dataMap: PropTypes.object, - qgenericFieldInfo: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - isManual: PropTypes.bool, - onQDataChanged: PropTypes.func.isRequired, - qValidateData: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired - }; + render() { + let { + softwareProductId, + componentId, + version, + qdata, + dataMap, + qgenericFieldInfo, + isReadOnlyMode, + onQDataChanged, + qValidateData, + onSubmit, + computeFlavorsList, + isManual + } = this.props; - render() { - let {softwareProductId, componentId, version, qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData, - onSubmit, computeFlavorsList, isManual} = this.props; + return ( + <div className="vsp-component-questionnaire-view"> + {qgenericFieldInfo && ( + <Form + ref={form => { + this.form = form; + }} + formReady={null} + isValid={true} + hasButtons={false} + onSubmit={() => onSubmit({ qdata })} + className="component-questionnaire-validation-form" + isReadOnlyMode={isReadOnlyMode}> + <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} + /> + <ComputeFlavors + computeFlavorsList={computeFlavorsList} + softwareProductId={softwareProductId} + componentId={componentId} + version={version} + isReadOnlyMode={isReadOnlyMode} + isManual={isManual} + /> + </Form> + )} + </div> + ); + } - return ( - <div className='vsp-component-questionnaire-view'> - { qgenericFieldInfo && <Form - ref={ (form) => { this.form = form; }} - formReady={null} - isValid={true} - hasButtons={false} - onSubmit={() => onSubmit({qdata})} - className='component-questionnaire-validation-form' - isReadOnlyMode={isReadOnlyMode} > - <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} /> - <ComputeFlavors computeFlavorsList={computeFlavorsList} softwareProductId={softwareProductId} componentId={componentId} - version={version} isReadOnlyMode={isReadOnlyMode} isManual={isManual}/> - </Form> } - </div> - ); - } + save() { + return this.form.handleFormSubmit(new Event('dummy')); + } - save(){ - return this.form.handleFormSubmit(new Event('dummy')); - } + validateMin(value, state) { + let maxVal = state.dataMap['compute/numOfVMs/maximum']; + // we are allowed to have an empty maxval, that will allow all minvals. + // if we do not have a minval than there is no point to check it either. + if (value === undefined || maxVal === undefined) { + return { isValid: true, errorText: '' }; + } else { + return Validator.validateItem(value, maxVal, 'maximum'); + } + } - validateMin(value, state) { - let maxVal = state.dataMap['compute/numOfVMs/maximum']; - // we are allowed to have an empty maxval, that will allow all minvals. - // if we do not have a minval than there is no point to check it either. - if (value === undefined || maxVal === undefined) { - return { isValid: true, errorText: '' }; - } else { - return Validator.validateItem(value, maxVal,'maximum'); - } - } - - validateMax(value, state) { - let minVal = state.dataMap['compute/numOfVMs/minimum']; - if (minVal === undefined ) { - // having no minimum is the same as 0, maximum value doesn't need to be checked - // against it. - return { isValid: true, errorText: '' }; - } else { - return Validator.validateItem(value,minVal,'minimum'); - } - } + validateMax(value, state) { + let minVal = state.dataMap['compute/numOfVMs/minimum']; + if (minVal === undefined) { + // having no minimum is the same as 0, maximum value doesn't need to be checked + // against it. + return { isValid: true, errorText: '' }; + } else { + return Validator.validateItem(value, minVal, 'minimum'); + } + } } export default SoftwareProductComponentComputeView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js index 2b6d84f381..2004c94137 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js @@ -15,103 +15,159 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; 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 ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onAddComputeClick: (isReadOnlyMode) => ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, isReadOnlyMode, version}}), - onEditCompute: ({computeId, isReadOnlyMode}) => ComputeFlavorActionHelper.loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}), - onDeleteCompute: ({id, name}) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: name}), - onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version}) - } - }) - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onAddComputeClick: isReadOnlyMode => + ComputeFlavorActionHelper.openComputeEditor(dispatch, { + props: { + softwareProductId, + componentId, + isReadOnlyMode, + version + } + }), + onEditCompute: ({ computeId, isReadOnlyMode }) => + ComputeFlavorActionHelper.loadCompute(dispatch, { + softwareProductId, + componentId, + version, + computeId, + isReadOnlyMode + }), + onDeleteCompute: ({ id, name }) => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: name + }), + onConfirmed: () => + ComputeFlavorActionHelper.deleteCompute(dispatch, { + softwareProductId, + componentId, + computeId: id, + version + }) + } + }) + }; }; const computeItemPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string }); class ComputeFlavors extends React.Component { + static propTypes = { + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onAddComputeClick: PropTypes.func, + computeFlavorsList: PropTypes.arrayOf(computeItemPropType) + }; - static propTypes = { - isReadOnlyMode: PropTypes.bool, - isManual: PropTypes.bool, - onAddComputeClick: PropTypes.func, - computeFlavorsList: PropTypes.arrayOf(computeItemPropType) - }; + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; + render() { + const { localFilter } = this.state; + const { + isReadOnlyMode, + isManual, + onAddComputeClick, + onEditCompute, + onDeleteCompute + } = this.props; + return ( + <div className="computes-list"> + <ListEditorView + title={i18n('Computes')} + plusButtonTitle={i18n('Add Compute')} + onAdd={ + isManual + ? () => onAddComputeClick(isReadOnlyMode) + : null + } + isReadOnlyMode={isReadOnlyMode} + onFilter={ + isManual + ? value => this.setState({ localFilter: value }) + : null + } + filterValue={localFilter} + twoColumns> + {this.filterList().map(computeItem => ( + <ComputeItem + key={computeItem.id} + computeItem={computeItem} + isReadOnlyMode={isReadOnlyMode} + isManual={isManual} + onEditCompute={onEditCompute} + onDeleteCompute={onDeleteCompute} + /> + ))} + </ListEditorView> + </div> + ); + } - render() { - const {localFilter} = this.state; - const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props; - return ( - <div className='computes-list'> - <ListEditorView - title={i18n('Computes')} - plusButtonTitle={i18n('Add Compute')} - onAdd={isManual ? () => onAddComputeClick(isReadOnlyMode) : null} - isReadOnlyMode={isReadOnlyMode} - onFilter={isManual ? value => this.setState({localFilter: value}) : null} - filterValue={localFilter} - twoColumns> - {this.filterList().map(computeItem => - <ComputeItem key={computeItem.id} - computeItem={computeItem} isReadOnlyMode={isReadOnlyMode} isManual={isManual} - onEditCompute={onEditCompute} onDeleteCompute={onDeleteCompute}/>) - } - </ListEditorView> - </div> - ); - } + filterList() { + const { computeFlavorsList = [] } = this.props; - filterList() { - const {computeFlavorsList = []} = this.props; - - const {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return computeFlavorsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return computeFlavorsList; - } - } + const { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return computeFlavorsList.filter( + ({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return computeFlavorsList; + } + } } -const ComputeItem = ({computeItem, isReadOnlyMode, isManual, onEditCompute, onDeleteCompute}) => { - const {id, name, description} = computeItem; - return ( - <ListEditorItemView - key={'item_' + id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditCompute({computeId: id, isReadOnlyMode})} - onDelete={isManual ? () => onDeleteCompute({id, name}) : null}> - - <div className='list-editor-item-view-field'> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); +const ComputeItem = ({ + computeItem, + isReadOnlyMode, + isManual, + onEditCompute, + onDeleteCompute +}) => { + const { id, name, description } = computeItem; + return ( + <ListEditorItemView + key={'item_' + id} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditCompute({ computeId: id, isReadOnlyMode })} + onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}> + <div className="list-editor-item-view-field"> + <div className="name">{name}</div> + </div> + <div className="list-editor-item-view-field"> + <div className="description">{description}</div> + </div> + </ListEditorItemView> + ); }; -export default connect(null, mapActionsToProps, null, {withRef: true})(ComputeFlavors); +export default connect(null, mapActionsToProps, null, { withRef: true })( + ComputeFlavors +); 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 index 8ae9961859..c16ab5cdfe 100644 --- 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 @@ -19,57 +19,91 @@ 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')} hasLastColSet> - <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-name' - label={i18n('Guest OS')} - type='textarea' - 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} lastColInRow> - <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> - ); +const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <div> + <GridSection title={i18n('Guest OS')} hasLastColSet> + <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-name" + label={i18n('Guest OS')} + type="textarea" + 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} lastColInRow> + <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 index 967c6f7aef..5451354502 100644 --- 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 @@ -20,38 +20,77 @@ 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> - </GridSection> - ); +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> + </GridSection> + ); }; NumberOfVms.propTypes = { - minNumberOfVMsSelectedByUser: PropTypes.number + minNumberOfVMsSelectedByUser: PropTypes.number }; export default NumberOfVms; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js index 41728eefb0..58c27c6bba 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js @@ -19,14 +19,14 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const COMPUTE_FLAVOR_FORM = 'COMPUTE_FLAVOR_FORM'; export const actionTypes = keyMirror({ - ADD_COMPUTE: null, - COMPUTE_FLAVORS_LIST_LOADED: null, - COMPUTE_LIST_EDIT: null, - EDIT_COMPUTE_FLAVOR: null, - DELETE_COMPUTE: null, - CONFIRM_DELETE_COMPUTE: null, - computeEditor: { - LOAD_EDITOR_DATA: null, - CLEAR_DATA: null - } + ADD_COMPUTE: null, + COMPUTE_FLAVORS_LIST_LOADED: null, + COMPUTE_LIST_EDIT: null, + EDIT_COMPUTE_FLAVOR: null, + DELETE_COMPUTE: null, + CONFIRM_DELETE_COMPUTE: null, + computeEditor: { + LOAD_EDITOR_DATA: null, + CLEAR_DATA: null + } }); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js index a3ba5fbc4a..06f9e8fd19 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js @@ -13,49 +13,78 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx'; -import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js'; +import { COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js'; import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; export const mapStateToProps = ({ - softwareProduct: { - softwareProductEditor, - softwareProductComponents: {computeFlavor: {computeEditor = {}}} - }, - currentScreen: { - props: {isReadOnlyMode} - } + softwareProduct: { + softwareProductEditor, + softwareProductComponents: { computeFlavor: { computeEditor = {} } } + }, + currentScreen: { props: { isReadOnlyMode } } }) => { - const {data: currentSoftwareProduct = {}} = softwareProductEditor; - let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + const { data: currentSoftwareProduct = {} } = softwareProductEditor; + let { + data, + qdata, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + formReady + } = computeEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return { - data, - qdata, - qgenericFieldInfo, - dataMap, - genericFieldInfo, - isReadOnlyMode, - isFormValid, - formReady, - isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL - }; + return { + data, + qdata, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + isReadOnlyMode, + isFormValid, + formReady, + isManual: + currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL + }; }; - -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: COMPUTE_FLAVOR_FORM}), - onQDataChanged: deltaData => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_COMPUTE_QUESTIONNAIRE}), - onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch), - onSubmit: ({data, qdata}) => ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata, version}), - onValidateForm: () => ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM) - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: COMPUTE_FLAVOR_FORM + }), + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_COMPUTE_QUESTIONNAIRE + }), + onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch), + onSubmit: ({ data, qdata }) => + ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire( + dispatch, + { + softwareProductId, + componentId, + data, + qdata, + version + } + ), + onValidateForm: () => + ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(ComputeFlavorEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + ComputeFlavorEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx index e542ce1fd1..840f722bb2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx @@ -23,75 +23,112 @@ import VmSizing from './VmSizing.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; class ComputeEditorView extends React.Component { + static propTypes = { + data: PropTypes.object, + qdata: PropTypes.object, + qschema: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onQDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: PropTypes.object, - qdata: PropTypes.object, - qschema: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - isManual: PropTypes.bool, - onDataChanged: PropTypes.func.isRequired, - onQDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + render() { + let { + data = {}, + qdata = {}, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + isReadOnlyMode, + isManual, + isFormValid, + formReady, + onDataChanged, + onQDataChanged, + onSubmit, + onCancel, + onValidateForm + } = this.props; + const { id, name, description } = data; + const edittingComputeMode = Boolean(id); - render() { - let {data = {}, qdata = {}, qgenericFieldInfo, dataMap, genericFieldInfo, isReadOnlyMode, isManual, isFormValid, formReady, - onDataChanged, onQDataChanged, onSubmit, onCancel, onValidateForm} = this.props; - const {id, name, description} = data; - const edittingComputeMode = Boolean(id); + return ( + <div className="vsp-component-computeFlavor-view"> + {genericFieldInfo && ( + <Form + ref={form => { + this.form = form; + }} + hasButtons={true} + onSubmit={() => onSubmit({ data, qdata })} + onReset={() => onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={isFormValid} + formReady={formReady} + onValidateForm={() => onValidateForm()} + className="component-questionnaire-validation-form" + submitButtonText={ + edittingComputeMode ? i18n('Save') : i18n('Create') + }> + <GridSection hasLostColSet> + <GridItem + colSpan={edittingComputeMode ? 2 : 4} + lastColInRow={!edittingComputeMode}> + <Input + disabled={!isManual} + data-test-id="name" + type="text" + label={i18n('Flavor Name')} + value={name} + onChange={name => onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={ + genericFieldInfo['name'].errorText + } + isRequired + /> + </GridItem> + <GridItem + colSpan={edittingComputeMode ? 2 : 4} + lastColInRow> + <Input + data-test-id="description" + type="textarea" + label={i18n('Description')} + value={description} + onChange={description => + onDataChanged({ description }) + } + isValid={ + genericFieldInfo['description'].isValid + } + errorText={ + genericFieldInfo['description'] + .errorText + } + /> + </GridItem> + </GridSection> + {edittingComputeMode && ( + <VmSizing + qgenericFieldInfo={qgenericFieldInfo} + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + )} + </Form> + )} + </div> + ); + } - return ( - <div className='vsp-component-computeFlavor-view'> - {genericFieldInfo && <Form - ref={(form) => { - this.form = form; - }} - hasButtons={true} - onSubmit={ () => onSubmit({data, qdata}) } - onReset={ () => onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - isValid={isFormValid} - formReady={formReady} - onValidateForm={() => onValidateForm() } - className='component-questionnaire-validation-form' - submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}> - <GridSection hasLostColSet> - <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}> - <Input - disabled={!isManual} - data-test-id='name' - type='text' - label={i18n('Flavor Name')} - value={name} - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - isRequired/> - </GridItem> - <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow> - <Input - data-test-id='description' - type='textarea' - label={i18n('Description')} - value={description} - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo['description'].isValid} - errorText={genericFieldInfo['description'].errorText}/> - </GridItem> - </GridSection> - {edittingComputeMode && <VmSizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>} - </Form> - } - </div> - ); - } - - save(){ - return this.form.handleFormSubmit(new Event('dummy')); - } + save() { + return this.form.handleFormSubmit(new Event('dummy')); + } } export default ComputeEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js index 6c02f36c90..b691084cc3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js @@ -14,20 +14,26 @@ * permissions and limitations under the License. */ -import {actionTypes} from './ComputeFlavorConstants.js'; +import { actionTypes } from './ComputeFlavorConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.COMPUTE_FLAVORS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.ADD_COMPUTE: - return [...state, action.compute]; - case actionTypes.COMPUTE_LIST_EDIT: - const indexForEdit = state.findIndex(({id}) => id === action.compute.id); - return [...state.slice(0, indexForEdit), action.compute, ...state.slice(indexForEdit + 1)]; - case actionTypes.DELETE_COMPUTE: - return state.filter(({id}) => id !== action.computeId); - default: - return state; - } -};
\ No newline at end of file + switch (action.type) { + case actionTypes.COMPUTE_FLAVORS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.ADD_COMPUTE: + return [...state, action.compute]; + case actionTypes.COMPUTE_LIST_EDIT: + const indexForEdit = state.findIndex( + ({ id }) => id === action.compute.id + ); + return [ + ...state.slice(0, indexForEdit), + action.compute, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.DELETE_COMPUTE: + return state.filter(({ id }) => id !== action.computeId); + default: + return state; + } +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js index a476f85a19..00d76eff23 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js @@ -13,33 +13,32 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js'; +import { actionTypes, COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.computeEditor.LOAD_EDITOR_DATA: - return { - ...state, - formName: COMPUTE_FLAVOR_FORM, - data: action.compute, - formReady: null, - genericFieldInfo: { - name: { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true }] - }, - description: { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 300}] - } - } - }; - case actionTypes.computeEditor.CLEAR_DATA: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.computeEditor.LOAD_EDITOR_DATA: + return { + ...state, + formName: COMPUTE_FLAVOR_FORM, + data: action.compute, + formReady: null, + genericFieldInfo: { + name: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 300 }] + } + } + }; + case actionTypes.computeEditor.CLEAR_DATA: + return {}; + default: + return state; + } }; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx index 54f22e0760..2f40706736 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx @@ -18,89 +18,146 @@ 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')} hasLastColSet> - <GridItem> - <Input - data-test-id='numOfCPUs' - type='number' - label={i18n('Number of CPUs')} - onChange={(tools) => onQDataChanged({'vmSizing/numOfCPUs' : tools})} - isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} - errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText} - value={dataMap['vmSizing/numOfCPUs']} /> - </GridItem> - <GridItem> - <Input - data-test-id='fileSystemSizeGB' - type='number' - label={i18n('File System Size (GB)')} - onChange={(tools) => onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})} - isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid} - errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText} - value={dataMap['vmSizing/fileSystemSizeGB']} /> - </GridItem> - <GridItem> - <Input - data-test-id='persistentStorageVolumeSize' - type='number' - label={i18n('Persistent Storage/Volume Size (GB)')} - onChange={(tools) => onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})} - isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid} - errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText} - value={dataMap['vmSizing/persistentStorageVolumeSize']} /> - </GridItem> - <GridItem lastColInRow> - <Input - data-test-id='ioOperationsPerSec' - type='number' - label={i18n('I/O Operations (per second)')} - onChange={(tools) => onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})} - isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid} - errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText} - value={dataMap['vmSizing/ioOperationsPerSec']} /> - </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['vmSizing/cpuOverSubscriptionRatio'].isValid} - errorText={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].errorText} - value={dataMap['vmSizing/cpuOverSubscriptionRatio']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {qgenericFieldInfo['vmSizing/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['vmSizing/memoryRAM'].isValid} - errorText={qgenericFieldInfo['vmSizing/memoryRAM'].errorText} - value={dataMap['vmSizing/memoryRAM']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/memoryRAM' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)} - </Input> - </GridItem> - </GridSection> - ); +const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection title={i18n('VM Sizing')} hasLastColSet> + <GridItem> + <Input + data-test-id="numOfCPUs" + type="number" + label={i18n('Number of CPUs')} + onChange={tools => + onQDataChanged({ 'vmSizing/numOfCPUs': tools }) + } + isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} + errorText={ + qgenericFieldInfo['vmSizing/numOfCPUs'].errorText + } + value={dataMap['vmSizing/numOfCPUs']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="fileSystemSizeGB" + type="number" + label={i18n('File System Size (GB)')} + onChange={tools => + onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText + } + value={dataMap['vmSizing/fileSystemSizeGB']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="persistentStorageVolumeSize" + type="number" + label={i18n('Persistent Storage/Volume Size (GB)')} + onChange={tools => + onQDataChanged({ + 'vmSizing/persistentStorageVolumeSize': tools + }) + } + isValid={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].errorText + } + value={dataMap['vmSizing/persistentStorageVolumeSize']} + /> + </GridItem> + <GridItem lastColInRow> + <Input + data-test-id="ioOperationsPerSec" + type="number" + label={i18n('I/O Operations (per second)')} + onChange={tools => + onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'] + .errorText + } + value={dataMap['vmSizing/ioOperationsPerSec']} + /> + </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['vmSizing/cpuOverSubscriptionRatio'] + .isValid + } + errorText={ + qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'] + .errorText + } + value={dataMap['vmSizing/cpuOverSubscriptionRatio']} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ + 'vmSizing/cpuOverSubscriptionRatio': val + }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo[ + 'vmSizing/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['vmSizing/memoryRAM'].isValid} + errorText={ + qgenericFieldInfo['vmSizing/memoryRAM'].errorText + } + value={dataMap['vmSizing/memoryRAM']} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ 'vmSizing/memoryRAM': val }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => ( + <option value={mRAM.enum} key={mRAM.enum}> + {mRAM.title} + </option> + ))} + </Input> + </GridItem> + </GridSection> + ); }; export default VmSizing; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js index 9f59cd5b27..d831765674 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js @@ -14,36 +14,50 @@ * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import SoftwareProductComponentCreationView from './SoftwareProductComponentCreationView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {forms} from '../SoftwareProductComponentsConstants.js'; +import { forms } from '../SoftwareProductComponentsConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return { - data, - genericFieldInfo, - formReady, - isFormValid - }; +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductComponents: { + componentEditor: { data, genericFieldInfo, formReady } + } + } = softwareProduct; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + return { + data, + genericFieldInfo, + formReady, + isFormValid + }; }; - -const mapActionsToProps = (dispatch, {softwareProductId, version}) => { - return { - onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}), - //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}), - onSubmit: (componentData) => { - return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch, - {softwareProductId, componentData, version}); - }, - onCancel: () => SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch), - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; - +const mapActionsToProps = (dispatch, { softwareProductId, version }) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: forms.CREATE_FORM + }), + //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}), + onSubmit: componentData => { + return SoftwareProductComponentsActionHelper.createSoftwareProductComponent( + dispatch, + { softwareProductId, componentData, version } + ); + }, + onCancel: () => + SoftwareProductComponentsActionHelper.closeComponentCreationModal( + dispatch + ), + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentCreationView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductComponentCreationView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx index 42804ce5a6..0b33b4017f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx @@ -21,59 +21,80 @@ 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'; -import {forms} from '../SoftwareProductComponentsConstants.js'; +import { forms } from '../SoftwareProductComponentsConstants.js'; class ComponentCreationView extends React.Component { - render() { - let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props; - let {displayName, description} = data; - return( - <div> - { - genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - submitButtonText={i18n('Create')} - labledButtons={true} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) } - className='entitlement-pools-form'> - <GridSection hasLastColSet> - <GridItem colSpan={4} lastColInRow> - <Input - data-test-id='name' - onChange={displayName => onDataChanged({displayName})} - label={i18n('Name')} - isRequired={true} - isValid={genericFieldInfo.displayName.isValid} - errorText={genericFieldInfo.displayName.errorText} - value={displayName} - type='text'/> - </GridItem> - <GridItem colSpan={4} lastColInRow> - <Input - label={i18n('Description')} - onChange={description => onDataChanged({description})} - value={description} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - data-test-id='description' - type='textarea'/> - </GridItem> - </GridSection> - </Form> - } - </div> - ); - } + render() { + let { + data = {}, + onDataChanged, + onCancel, + genericFieldInfo + } = this.props; + let { displayName, description } = data; + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + onSubmit={() => this.submit()} + onReset={() => onCancel()} + submitButtonText={i18n('Create')} + labledButtons={true} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => + this.props.onValidateForm(forms.CREATE_FORM) + } + className="entitlement-pools-form"> + <GridSection hasLastColSet> + <GridItem colSpan={4} lastColInRow> + <Input + data-test-id="name" + onChange={displayName => + onDataChanged({ displayName }) + } + label={i18n('Name')} + isRequired={true} + isValid={ + genericFieldInfo.displayName.isValid + } + errorText={ + genericFieldInfo.displayName.errorText + } + value={displayName} + type="text" + /> + </GridItem> + <GridItem colSpan={4} lastColInRow> + <Input + label={i18n('Description')} + onChange={description => + onDataChanged({ description }) + } + value={description} + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + data-test-id="description" + type="textarea" + /> + </GridItem> + </GridSection> + </Form> + )} + </div> + ); + } - submit() { - const {onSubmit, data} = this.props; - onSubmit(data); - } + submit() { + const { onSubmit, data } = this.props; + onSubmit(data); + } } export default ComponentCreationView; 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 8c06fd0ab8..f3f64e4b20 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 @@ -13,41 +13,79 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.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'; -import {onboardingMethod} from '../../SoftwareProductConstants.js'; +import { + forms, + COMPONENTS_QUESTIONNAIRE +} from '../SoftwareProductComponentsConstants.js'; +import { onboardingMethod } from '../../SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct; - let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { data: currentVSP }, + softwareProductComponents + } = softwareProduct; + let { + componentEditor: { + data: componentData = {}, + qdata, + qgenericFieldInfo: qGenericFieldInfo, + dataMap, + genericFieldInfo + } + } = softwareProductComponents; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return { - componentData, - qdata, - isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL, - genericFieldInfo, - qGenericFieldInfo, - dataMap, - isFormValid - }; + return { + componentData, + qdata, + isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL, + genericFieldInfo, + qGenericFieldInfo, + dataMap, + isFormValid + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { - return { - 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, version, vspComponentId: componentId, componentData, qdata}); - }, - onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}) - }; - +const mapActionsToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + 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, + version, + vspComponentId: componentId, + componentData, + qdata + } + ); + }, + onValidityChanged: isValidityData => + SoftwareProductActionHelper.setIsValidityData(dispatch, { + isValidityData + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsGeneralView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsGeneralView); 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 6aa51d1609..ad1fcaacff 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 @@ -21,9 +21,18 @@ 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, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => ( - <GridSection title={i18n('General')}> - {/* disabled until backend will be ready to implement it +const GeneralSection = ({ + onDataChanged, + displayName, + vfcCode, + nfcFunction, + description, + isReadOnlyMode, + genericFieldInfo, + isManual +}) => ( + <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> @@ -32,156 +41,248 @@ const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, descr </div> */} - <GridItem> - <Input - data-test-id='name' - label={i18n('Name')} - value={displayName} - disabled={!isManual || isReadOnlyMode} - type='text'/> - {!isManual && <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'/> } - <Input - data-test-id='nfcFunction' - label={i18n('Function')} - value={nfcFunction} - isValid={genericFieldInfo.nfcFunction.isValid} - errorText={genericFieldInfo.nfcFunction.errorText} - onChange={nfcFunction => onDataChanged({nfcFunction})} - 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> + <GridItem> + <Input + data-test-id="name" + label={i18n('Name')} + value={displayName} + disabled={!isManual || isReadOnlyMode} + type="text" + /> + {!isManual && ( + <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" + /> + )} + <Input + data-test-id="nfcFunction" + label={i18n('Function')} + value={nfcFunction} + isValid={genericFieldInfo.nfcFunction.isValid} + errorText={genericFieldInfo.nfcFunction.errorText} + onChange={nfcFunction => onDataChanged({ nfcFunction })} + 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 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('Disk')}> - <GridItem> - <Input - data-test-id='bootDiskSizePerVM' - onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})} - label={i18n('Size of boot disk per VM (GB)')} - type='number' - isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid} - errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText} - value={dataMap['general/disk/bootDiskSizePerVM']}/> - </GridItem> - <GridItem> - <Input - data-test-id='ephemeralDiskSizePerVM' - onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})} - label={i18n('Size of ephemeral disk per VM (GB)')} - type='number' - isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid} - errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText} - value={dataMap['general/disk/ephemeralDiskSizePerVM']}/> - </GridItem> - </GridSection> +const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + <GridSection title={i18n('Disk')}> + <GridItem> + <Input + data-test-id="bootDiskSizePerVM" + onChange={bootDiskSizePerVM => + onQDataChanged({ + 'general/disk/bootDiskSizePerVM': bootDiskSizePerVM + }) + } + label={i18n('Size of boot disk per VM (GB)')} + type="number" + isValid={ + qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid + } + errorText={ + qgenericFieldInfo['general/disk/bootDiskSizePerVM'] + .errorText + } + value={dataMap['general/disk/bootDiskSizePerVM']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="ephemeralDiskSizePerVM" + onChange={ephemeralDiskSizePerVM => + onQDataChanged({ + 'general/disk/ephemeralDiskSizePerVM': ephemeralDiskSizePerVM + }) + } + label={i18n('Size of ephemeral disk per VM (GB)')} + type="number" + isValid={ + qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'] + .isValid + } + errorText={ + qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'] + .errorText + } + value={dataMap['general/disk/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 +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 @@ -190,78 +291,127 @@ const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( pointer='/general/recovery/VMRecoveryDocument'/> </div> </div> - */ - } - </GridSection> + */} + </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 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> +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 { + isManual, + onQDataChanged, + onDataChanged, + genericFieldInfo, + dataMap, + qGenericFieldInfo, + componentData: { displayName, vfcCode, nfcFunction, description }, + isReadOnlyMode + } = this.props; + return ( + <div className="vsp-components-general"> + <div className="general-data"> + {genericFieldInfo && + qGenericFieldInfo && ( + <Form + isValid={this.props.isFormValid} + formReady={null} + isReadOnlyMode={isReadOnlyMode} + onValidityChanged={isValidityData => + this.props.onValidityChanged(isValidityData) + } + hasButtons={false}> + <GeneralSection + onDataChanged={onDataChanged} + displayName={displayName} + vfcCode={vfcCode} + nfcFunction={nfcFunction} + description={description} + isManual={isManual} + 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> + ); + } - render() { - let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} = this.props; - return( - <div className='vsp-components-general'> - <div className='general-data'> - {genericFieldInfo && qGenericFieldInfo && <Form - isValid={this.props.isFormValid} - formReady={null} - isReadOnlyMode={isReadOnlyMode} - onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)} - hasButtons={false}> - <GeneralSection - onDataChanged={onDataChanged} - displayName={displayName} - vfcCode={vfcCode} - nfcFunction={nfcFunction} - description={description} - isManual={isManual} - 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> - ); - } - - save() { - let {onSubmit, componentData, qdata} = this.props; - return onSubmit({componentData, qdata}); - } + save() { + let { onSubmit, componentData, qdata } = this.props; + return onSubmit({ componentData, qdata }); + } } export default SoftwareProductComponentsGeneralView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js index 2483d0aaa2..900a9a1c46 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js @@ -1,6 +1,6 @@ - import Validator from 'nfvo-utils/Validator.js'; -export const imageCustomValidations = { - 'version': value => Validator.validate('version', value, [{type: 'required', data: true}]) +export const imageCustomValidations = { + version: value => + Validator.validate('version', value, [{ type: 'required', data: true }]) }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js index 8d70d6f14c..3f661b76fe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js @@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js'; -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; function baseUrl(softwareProductId, version, componentId) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`; } -function fetchImagesList({softwareProductId, componentId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); +function fetchImagesList({ softwareProductId, componentId, version }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}` + ); } -function fetchImage({softwareProductId, componentId, imageId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`); +function fetchImage({ softwareProductId, componentId, imageId, version }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}/${imageId}` + ); } -function destroyImage({softwareProductId, componentId, version, imageId}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`); +function destroyImage({ softwareProductId, componentId, version, imageId }) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version, componentId)}/${imageId}` + ); } -function createImage({softwareProductId, componentId, version, data}) { - return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), { - fileName: data.fileName - }); +function createImage({ softwareProductId, componentId, version, data }) { + return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), { + fileName: data.fileName + }); } -function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`); +function fetchImageQuestionnaire({ + softwareProductId, + componentId, + imageId, + version +}) { + return RestAPIUtil.fetch( + `${baseUrl( + softwareProductId, + version, + componentId + )}/${imageId}/questionnaire` + ); } -function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{ - fileName - }); - +function saveImage({ + softwareProductId, + version, + componentId, + image: { id, fileName } +}) { + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version, componentId)}/${id}`, + { + fileName + } + ); } -function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata); +function saveImageQuestionnaire({ + softwareProductId, + componentId, + version, + imageId, + qdata +}) { + return RestAPIUtil.put( + `${baseUrl( + softwareProductId, + version, + componentId + )}/${imageId}/questionnaire`, + qdata + ); } const SoftwareProductComponentImagesActionHelper = { - fetchImagesList(dispatch, {softwareProductId, componentId, version}) { - dispatch({ - type: actionTypes.IMAGES_LIST_UPDATE, - response: [] - }); - - return fetchImagesList({softwareProductId, componentId, version}).then((response) => { - dispatch({ - type: actionTypes.IMAGES_LIST_UPDATE, - response: response.results, - componentId : componentId - }); - }); - }, - - deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) { - return destroyImage({softwareProductId, componentId, version, imageId}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }); - }, - - loadImageData({softwareProductId, componentId, imageId, version}) { - return fetchImage({softwareProductId, componentId, imageId, version}); - }, - - openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) { - return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => { - SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, { - softwareProductId, - componentId, - imageId: image.id, - version - }).then(() => { - SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, { - softwareProductId, - componentId, - version, - isReadOnlyMode, - image, - data - }); - }); - }); - }, - - openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) { - - let {id} = image; - let title = id ? i18n('Edit Image') : i18n('Create New Image'); - let className = id ? 'image-modal-edit' : 'image-modal-new'; - - dispatch({ - type: actionTypes.ImageEditor.OPEN, - image: {...data, id} - }); - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR, - title: title, - modalClassName: className, - modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode} - } - }); - - }, - - closeImageEditor(dispatch) { - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - - dispatch({ - type: actionTypes.ImageEditor.CLOSE - }); - - }, - - loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) { - return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => { - ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: { - qdata: response.data ? JSON.parse(response.data) : {}, - qschema: JSON.parse(response.schema) - }}); - }); - }, - - saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) { - SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch); - if (data !== null && data.id) { - // editor in edit mode - return Promise.all([ - saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}), - saveImage({softwareProductId, version, componentId, image: data}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }) - ]); - } else { - // editor in create mode - createImage({softwareProductId, componentId, version, data}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }); - } - } + fetchImagesList(dispatch, { softwareProductId, componentId, version }) { + dispatch({ + type: actionTypes.IMAGES_LIST_UPDATE, + response: [] + }); + + return fetchImagesList({ + softwareProductId, + componentId, + version + }).then(response => { + dispatch({ + type: actionTypes.IMAGES_LIST_UPDATE, + response: response.results, + componentId: componentId + }); + }); + }, + + deleteImage( + dispatch, + { softwareProductId, componentId, version, imageId } + ) { + return destroyImage({ + softwareProductId, + componentId, + version, + imageId + }).then(() => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + }); + }, + + loadImageData({ softwareProductId, componentId, imageId, version }) { + return fetchImage({ softwareProductId, componentId, imageId, version }); + }, + + openEditImageEditor( + dispatch, + { image, softwareProductId, componentId, version, isReadOnlyMode } + ) { + return SoftwareProductComponentImagesActionHelper.loadImageData({ + softwareProductId, + componentId, + imageId: image.id, + version + }).then(({ data }) => { + SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire( + dispatch, + { + softwareProductId, + componentId, + imageId: image.id, + version + } + ).then(() => { + SoftwareProductComponentImagesActionHelper.openImageEditor( + dispatch, + { + softwareProductId, + componentId, + version, + isReadOnlyMode, + image, + data + } + ); + }); + }); + }, + + openImageEditor( + dispatch, + { + image = {}, + data = {}, + softwareProductId, + componentId, + version, + isReadOnlyMode + } + ) { + let { id } = image; + let title = id ? i18n('Edit Image') : i18n('Create New Image'); + let className = id ? 'image-modal-edit' : 'image-modal-new'; + + dispatch({ + type: actionTypes.ImageEditor.OPEN, + image: { ...data, id } + }); + + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: + modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR, + title: title, + modalClassName: className, + modalComponentProps: { + softwareProductId, + componentId, + version, + isReadOnlyMode + } + } + }); + }, + + closeImageEditor(dispatch) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + + dispatch({ + type: actionTypes.ImageEditor.CLOSE + }); + }, + + loadImageQuestionnaire( + dispatch, + { softwareProductId, componentId, imageId, version } + ) { + return fetchImageQuestionnaire({ + softwareProductId, + componentId, + imageId, + version + }).then(response => { + ValidationHelper.qDataLoaded(dispatch, { + qName: IMAGE_QUESTIONNAIRE, + response: { + qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema) + } + }); + }); + }, + + saveImageDataAndQuestionnaire( + dispatch, + { softwareProductId, componentId, version, data, qdata } + ) { + SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch); + if (data !== null && data.id) { + // editor in edit mode + return Promise.all([ + saveImageQuestionnaire({ + softwareProductId, + version, + componentId, + imageId: data.id, + qdata + }), + saveImage({ + softwareProductId, + version, + componentId, + image: data + }).then(() => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + }) + ]); + } else { + // editor in create mode + createImage({ softwareProductId, componentId, version, data }).then( + () => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + } + ); + } + } }; export default SoftwareProductComponentImagesActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js index 6b6c9a30e5..300b2898e1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js @@ -16,12 +16,12 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - IMAGES_LIST_UPDATE: null, + IMAGES_LIST_UPDATE: null, - ImageEditor: { - CLOSE: null, - OPEN: null - } + ImageEditor: { + CLOSE: null, + OPEN: null + } }); export const IMAGE_QUESTIONNAIRE = 'image'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js index c5f23e7681..0243a38f1b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js @@ -13,56 +13,93 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js'; export const mapStateToProps = ({ - softwareProduct, - currentScreen: {props: {isReadOnlyMode}} + softwareProduct, + currentScreen: { props: { isReadOnlyMode } } }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; - let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - - let {images: {imageEditor = {}}} = softwareProductComponents; - let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor; - let {version, onboardingMethod} = currentSoftwareProduct; - let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo); - - return { - version, - currentSoftwareProduct, - isValidityData, - data, - qdata, - dataMap, - isFormValid, - formReady, - genericFieldInfo, - qgenericFieldInfo, - isReadOnlyMode, - isManual: isManual - }; + let { images: { imageEditor = {} } } = softwareProductComponents; + let { + data, + qdata, + genericFieldInfo, + qgenericFieldInfo, + dataMap, + formReady + } = imageEditor; + let { version, onboardingMethod } = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; + let isFormValid = + ValidationHelper.checkFormValid(genericFieldInfo) && + ValidationHelper.checkFormValid(qgenericFieldInfo); + return { + version, + currentSoftwareProduct, + isValidityData, + data, + qdata, + dataMap, + isFormValid, + formReady, + genericFieldInfo, + qgenericFieldInfo, + isReadOnlyMode, + isManual: isManual + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}), - onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}), - onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch), - onValidateForm: customValidations => { - ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM); - ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations); - }, - onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: IMAGE_QUESTIONNAIRE, customValidations}), - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: forms.IMAGE_EDIT_FORM + }), + onSubmit: ({ data, qdata }) => + SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire( + dispatch, + { softwareProductId, componentId, version, data, qdata } + ), + onCancel: () => + SoftwareProductComponentsImageActionHelper.closeImageEditor( + dispatch + ), + onValidateForm: customValidations => { + ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM); + ValidationHelper.qValidateForm( + dispatch, + IMAGE_QUESTIONNAIRE, + customValidations + ); + }, + onQDataChanged: (deltaData, customValidations) => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: IMAGE_QUESTIONNAIRE, + customValidations + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductComponentsImageEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js index 7c357429e5..3846d45772 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js @@ -13,30 +13,29 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.ImageEditor.CLOSE: - return {}; - case actionTypes.ImageEditor.OPEN: - return { - ...state, - data: { - ...action.image - }, - genericFieldInfo: { - 'fileName' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - } - }, - formName: forms.IMAGE_EDIT_FORM - }; - default: - return state; - } + switch (action.type) { + case actionTypes.ImageEditor.CLOSE: + return {}; + case actionTypes.ImageEditor.OPEN: + return { + ...state, + data: { + ...action.image + }, + genericFieldInfo: { + fileName: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + } + }, + formName: forms.IMAGE_EDIT_FORM + }; + default: + return state; + } }; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx index a5ef152e01..3670ab910d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx @@ -21,53 +21,81 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import FileDetails from './imagesEditorComponents/FileDetails.jsx'; import ImageDetails from './imagesEditorComponents/ImageDetails.jsx'; -import {imageCustomValidations} from './ImageValidations.js'; +import { imageCustomValidations } from './ImageValidations.js'; class SoftwareProductComponentsImageEditorView extends React.Component { - static propTypes = { - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + static propTypes = { + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - render() { - let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props; - let {id, fileName} = data; - let editingMode = Boolean(id); - return ( - <div> - {genericFieldInfo && <Form - ref={(form) => { this.form = form; }} - hasButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - isValid={isFormValid} - formReady={formReady} - submitButtonText={editingMode ? i18n('Save') : i18n('Create')} - onValidateForm={() => onValidateForm(imageCustomValidations) } - className='vsp-components-image-editor'> - <div className='editor-data'> - <FileDetails - editingMode={editingMode} - genericFieldInfo={genericFieldInfo} - qgenericFieldInfo={qgenericFieldInfo} - fileName={fileName} - onDataChanged={onDataChanged} - isManual={isManual} - dataMap={dataMap} - onQDataChanged={onQDataChanged}/> - {editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} - </div> - </Form>} - </div> - ); - } - submit() { - let {data, qdata, onSubmit, version} = this.props; - onSubmit({data, qdata, version}); - } + render() { + let { + onCancel, + onValidateForm, + isReadOnlyMode, + isFormValid, + formReady, + data = {}, + genericFieldInfo, + qgenericFieldInfo, + dataMap, + onDataChanged, + isManual, + onQDataChanged + } = this.props; + let { id, fileName } = data; + let editingMode = Boolean(id); + return ( + <div> + {genericFieldInfo && ( + <Form + ref={form => { + this.form = form; + }} + hasButtons={true} + onSubmit={() => this.submit()} + onReset={() => onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={isFormValid} + formReady={formReady} + submitButtonText={ + editingMode ? i18n('Save') : i18n('Create') + } + onValidateForm={() => + onValidateForm(imageCustomValidations) + } + className="vsp-components-image-editor"> + <div className="editor-data"> + <FileDetails + editingMode={editingMode} + genericFieldInfo={genericFieldInfo} + qgenericFieldInfo={qgenericFieldInfo} + fileName={fileName} + onDataChanged={onDataChanged} + isManual={isManual} + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + {editingMode && ( + <ImageDetails + dataMap={dataMap} + qgenericFieldInfo={qgenericFieldInfo} + onQDataChanged={onQDataChanged} + /> + )} + </div> + </Form> + )} + </div> + ); + } + submit() { + let { data, qdata, onSubmit, version } = this.props; + onSubmit({ data, qdata, version }); + } } export default SoftwareProductComponentsImageEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js index d071647058..f3c39c3048 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js @@ -13,73 +13,122 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx'; import ImageHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; -import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; + let { + images: { imagesList = [] }, + componentEditor: { + data: componentData, + qdata, + dataMap, + qgenericFieldInfo + } + } = softwareProductComponents; + let { onboardingMethod } = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; - let {onboardingMethod} = currentSoftwareProduct; - let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - - return { - componentData, - qdata, - dataMap, - qgenericFieldInfo, - isValidityData, - imagesList, - isManual : isManual - }; + return { + componentData, + qdata, + dataMap, + qgenericFieldInfo, + isValidityData, + imagesList, + isManual: isManual + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: COMPONENTS_QUESTIONNAIRE}), - onAddImage: (isReadOnlyMode) => { - SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch, - {isReadOnlyMode, softwareProductId, - componentId, version} - );}, - onDeleteImage: (image) => { - let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName; - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}), - onConfirmed: () => ImageHelper.deleteImage(dispatch, { - softwareProductId, - componentId, - version, - imageId: image.id - }) - } - }); - }, - onEditImageClick: (image, isReadOnlyMode) => { - SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, { - image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'} - ); - }, - onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, - {softwareProductId, - vspComponentId: componentId, - version, - qdata}); - } - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_QUESTIONNAIRE + }), + onAddImage: isReadOnlyMode => { + SoftwareProductComponentsImagesActionHelper.openImageEditor( + dispatch, + { + isReadOnlyMode, + softwareProductId, + componentId, + version + } + ); + }, + onDeleteImage: image => { + let shortenedFileName = + image.fileName.length > 40 + ? image.fileName.substr(0, 40) + '...' + : image.fileName; + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n( + 'Are you sure you want to delete "{shortenedFileName}"?', + { + shortenedFileName: shortenedFileName + } + ), + onConfirmed: () => + ImageHelper.deleteImage(dispatch, { + softwareProductId, + componentId, + version, + imageId: image.id + }) + } + }); + }, + onEditImageClick: (image, isReadOnlyMode) => { + SoftwareProductComponentsImagesActionHelper.openEditImageEditor( + dispatch, + { + image, + isReadOnlyMode, + softwareProductId, + componentId, + version, + modalClassName: 'image-modal-edit' + } + ); + }, + onSubmit: qdata => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { + softwareProductId, + vspComponentId: componentId, + version, + qdata + } + ); + } + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsImageListView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js index 5dd2fb623b..a7c1bfafbe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js @@ -13,14 +13,13 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; export default (state = [], action) => { - switch (action.type) { - - case actionTypes.IMAGES_LIST_UPDATE: - return [...action.response]; - default: - return state; - } + switch (action.type) { + case actionTypes.IMAGES_LIST_UPDATE: + return [...action.response]; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx index 004cbebe5d..cb67856caa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx @@ -20,113 +20,152 @@ 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 ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -import Input from'nfvo-components/input/validation/Input.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; class SoftwareProductComponentsImageListView extends React.Component { - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props; - return( - <div className='vsp-components-image'> - <div className='image-data'> - <div> - { qgenericFieldInfo && <Form - formReady={null} - isValid={true} - onSubmit={() => this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - - <h3 className='section-title'>{i18n('Image')}</h3> - <div className='rows-section'> - <div className='row-flex-components'> - <div className='single-col'> - <Input - data-test-id='providedBy' - label={i18n('Image provided by')} - type='select' - 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(proto => - <option value={proto.enum} key={proto.enum}>{proto.title}</option>) } - </Input> - </div> - <div className='empty-two-col' /> - </div> - </div> - - </Form> } - </div> - </div> - {this.renderImagesList()} + render() { + let { + dataMap, + onQDataChanged, + isReadOnlyMode, + qgenericFieldInfo + } = this.props; + return ( + <div className="vsp-components-image"> + <div className="image-data"> + <div> + {qgenericFieldInfo && ( + <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + <h3 className="section-title"> + {i18n('Image')} + </h3> + <div className="rows-section"> + <div className="row-flex-components"> + <div className="single-col"> + <Input + data-test-id="providedBy" + label={i18n( + 'Image provided by' + )} + type="select" + 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(proto => ( + <option + value={proto.enum} + key={proto.enum}> + {proto.title} + </option> + ))} + </Input> + </div> + <div className="empty-two-col" /> + </div> + </div> + </Form> + )} + </div> + </div> + {this.renderImagesList()} </div> - ); - }; - - renderImagesList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddImage, isManual} = this.props; - - return ( - <ListEditorView - title={i18n('Images')} - filterValue={localFilter} - placeholder={i18n('Filter Images by Name')} - isReadOnlyMode={isReadOnlyMode} - onFilter={value => this.setState({localFilter: value})} - onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} - plusButtonTitle={i18n('Add Image')} - twoColumns> - {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))} - </ListEditorView> - ); - }; + ); + } + renderImagesList() { + const { localFilter } = this.state; + let { isReadOnlyMode, onAddImage, isManual } = this.props; - renderImagesListItem(image, isReadOnlyMode) { - let {id, fileName} = image; - let {onEditImageClick, isManual, onDeleteImage} = this.props; - return ( - <ListEditorItemView - key={id} - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditImageClick(image, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteImage(image) : null}> + return ( + <ListEditorView + title={i18n('Images')} + filterValue={localFilter} + placeholder={i18n('Filter Images by Name')} + isReadOnlyMode={isReadOnlyMode} + onFilter={value => this.setState({ localFilter: value })} + onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} + plusButtonTitle={i18n('Add Image')} + twoColumns> + {this.filterList().map(image => + this.renderImagesListItem(image, isReadOnlyMode) + )} + </ListEditorView> + ); + } - <ListEditorItemViewField> - <div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div> - </ListEditorItemViewField> - </ListEditorItemView> - ); - } + renderImagesListItem(image, isReadOnlyMode) { + let { id, fileName } = image; + let { onEditImageClick, isManual, onDeleteImage } = this.props; + return ( + <ListEditorItemView + key={id} + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditImageClick(image, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteImage(image) : null}> + <ListEditorItemViewField> + <div className="image-filename-cell"> + <span className="image-filename">{fileName}</span> + </div> + </ListEditorItemViewField> + </ListEditorItemView> + ); + } - filterList() { - let {imagesList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return imagesList.filter(({fileName = ''}) => { - return escape(fileName).match(filter); - }); - } - else { - return imagesList; - } - } + filterList() { + let { imagesList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return imagesList.filter(({ fileName = '' }) => { + return escape(fileName).match(filter); + }); + } else { + return imagesList; + } + } - save() { - let {onSubmit, qdata} = this.props; - return onSubmit(qdata); - } + save() { + let { onSubmit, qdata } = this.props; + return onSubmit(qdata); + } } export default SoftwareProductComponentsImageListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx index 64367c00f2..ec173cd988 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx @@ -18,32 +18,64 @@ 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'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import Format from './Format.jsx'; import Version from './Version.jsx'; -const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => { - let fileNameCols = (editingMode) ? 3 : 4; - return( - <GridSection hasLastColSset> - <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}> - <Input - disabled={!isManual} - onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)} - label={i18n('Image Name')} - data-test-id='image-filename' - value={fileName} - isValid={genericFieldInfo.fileName.isValid} - errorText={genericFieldInfo.fileName.errorText} - isRequired={true} - type='text' - className='image-filename'/> - </GridItem> - {!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>} - {editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} - {editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>} - </GridSection> - ); +const FileDetails = ({ + editingMode, + fileName, + onDataChanged, + isManual, + dataMap, + onQDataChanged, + genericFieldInfo, + qgenericFieldInfo +}) => { + let fileNameCols = editingMode ? 3 : 4; + return ( + <GridSection hasLastColSset> + <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}> + <Input + disabled={!isManual} + onChange={fileName => + onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM) + } + label={i18n('Image Name')} + data-test-id="image-filename" + value={fileName} + isValid={genericFieldInfo.fileName.isValid} + errorText={genericFieldInfo.fileName.errorText} + isRequired={true} + type="text" + className="image-filename" + /> + </GridItem> + {!editingMode && ( + <div className="note-text"> + {i18n( + 'After image creation you must go to Edit Image and add File Version' + )} + </div> + )} + {editingMode && ( + <Version + isManual={isManual} + dataMap={dataMap} + qgenericFieldInfo={qgenericFieldInfo} + onQDataChanged={onQDataChanged} + /> + )} + {editingMode && ( + <Format + isManual={isManual} + qgenericFieldInfo={qgenericFieldInfo} + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + )} + </GridSection> + ); }; export default FileDetails; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx index 1f71c6b277..0ee8fb76d0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx @@ -18,30 +18,34 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; - -const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - <GridItem colSpan={2}> - <Input - disabled={!isManual} - data-test-id='image-format' - type='select' - label={i18n('Format')} - className='input-options-select' - groupClassName='bootstrap-input-options' - isValid={qgenericFieldInfo['format'].isValid} - errorText={qgenericFieldInfo['format'].errorText} - value={dataMap['format']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'format' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {qgenericFieldInfo['format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)} - </Input> - </GridItem> - ); +const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + <GridItem colSpan={2}> + <Input + disabled={!isManual} + data-test-id="image-format" + type="select" + label={i18n('Format')} + className="input-options-select" + groupClassName="bootstrap-input-options" + isValid={qgenericFieldInfo['format'].isValid} + errorText={qgenericFieldInfo['format'].errorText} + value={dataMap['format']} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ format: val }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo['format'].enum.map(hv => ( + <option value={hv.enum} key={hv.enum}> + {hv.title} + </option> + ))} + </Input> + </GridItem> + ); }; export default Format; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx index 24e54bbbcb..ccf94bc860 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx @@ -19,21 +19,22 @@ 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 ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - <GridSection title={i18n('Image Details')}> - <GridItem colSpan={2}> - <Input - data-test-id='image-md5' - className='image-md5' - type='text' - label={i18n('md5')} - onChange={(md5) => onQDataChanged({'md5' : md5})} - isValid={qgenericFieldInfo['md5'].isValid} - errorText={qgenericFieldInfo['md5'].errorText} - value={dataMap['md5']}/> - </GridItem> - </GridSection> - ); +const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + <GridSection title={i18n('Image Details')}> + <GridItem colSpan={2}> + <Input + data-test-id="image-md5" + className="image-md5" + type="text" + label={i18n('md5')} + onChange={md5 => onQDataChanged({ md5: md5 })} + isValid={qgenericFieldInfo['md5'].isValid} + errorText={qgenericFieldInfo['md5'].errorText} + value={dataMap['md5']} + /> + </GridItem> + </GridSection> + ); }; export default ImageDetails; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx index bd55c5ba91..60454c52e7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx @@ -17,25 +17,29 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {imageCustomValidations} from '../ImageValidations.js'; +import { imageCustomValidations } from '../ImageValidations.js'; - -const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - <GridItem colSpan={1} lastColInRow> - <Input - disabled={!isManual} - data-test-id='image-version' - type='text' - className='image-version' - label={i18n('Version')} - isRequired={true} - onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})} - isValid={qgenericFieldInfo['version'].isValid} - errorText={qgenericFieldInfo['version'].errorText} - value={dataMap['version']}/> - </GridItem> - ); +const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + <GridItem colSpan={1} lastColInRow> + <Input + disabled={!isManual} + data-test-id="image-version" + type="text" + className="image-version" + label={i18n('Version')} + isRequired={true} + onChange={version => + onQDataChanged( + { version: version }, + { version: imageCustomValidations['version'] } + ) + } + isValid={qgenericFieldInfo['version'].isValid} + errorText={qgenericFieldInfo['version'].errorText} + value={dataMap['version']} + /> + </GridItem> + ); }; export default Version; - 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 350e80c0f8..da8b73fbe0 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 @@ -13,29 +13,50 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +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 {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => { - - let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents; - - return { - qdata, - genericFieldInfo, - dataMap - }; +export const mapStateToProps = ({ + softwareProduct: { softwareProductComponents } +}) => { + let { + componentEditor: { qdata, qgenericFieldInfo: genericFieldInfo, dataMap } + } = softwareProductComponents; + return { + qdata, + genericFieldInfo, + dataMap + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { - return { - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), - onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});} - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_QUESTIONNAIRE + }), + onSubmit: ({ qdata }) => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { + softwareProductId, + version, + vspComponentId: componentId, + qdata + } + ); + } + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentLoadBalancingView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentLoadBalancingView); 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 1cbb9afc5d..4c90fc0be2 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 @@ -19,7 +19,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; -import Input from'nfvo-components/input/validation/Input.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'; @@ -27,145 +27,244 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; const prefix = 'highAvailabilityAndLoadBalancing/'; const pointers = [ - { - key: 'failureLoadDistribution', - description: 'How is load distributed across live vms in the event of a vm/host failure? please describe' - }, - { - key: 'nkModelImplementation', - description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.' - }, - { - key: 'architectureChoice', - description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ', - added: 'Will the arrangement be 1-1 or N-M? Please describe.' - }, - {key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'}, - { - key: 'horizontalScaling', - description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.' - }, - { - key: 'loadDistributionMechanism', - description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?', - added: 'Please describe.' - } + { + key: 'failureLoadDistribution', + description: + 'How is load distributed across live vms in the event of a vm/host failure? please describe' + }, + { + key: 'nkModelImplementation', + description: + 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.' + }, + { + key: 'architectureChoice', + description: + 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ', + added: 'Will the arrangement be 1-1 or N-M? Please describe.' + }, + { + key: 'slaRequirements', + description: 'Specify application SLA requirements on Cloud platform.' + }, + { + key: 'horizontalScaling', + description: + 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.' + }, + { + key: 'loadDistributionMechanism', + description: + 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?', + added: 'Please describe.' + } ]; //TODO check for buttons -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 ? 'chevronUp' : 'chevronDown'}/> - <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> +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 ? 'chevronUp' : 'chevronDown'} /> + <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: PropTypes.string.isRequired, - softwareProductId: PropTypes.string.isRequired, - qdata: PropTypes.object, - qschema: PropTypes.object, - currentSoftwareProduct: PropTypes.object - }; + static propTypes = { + componentId: PropTypes.string.isRequired, + softwareProductId: PropTypes.string.isRequired, + qdata: PropTypes.object, + qschema: PropTypes.object, + currentSoftwareProduct: PropTypes.object + }; - state = { - expanded: {} - }; + state = { + expanded: {} + }; - render() { - let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props; - return ( - <div className='vsp-components-load-balancing'> - <div className='halb-data'> - { genericFieldInfo && <Form - formReady={null} - isValid={true} - onSubmit={() => this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - <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> - ); - } + render() { + let { + dataMap, + genericFieldInfo, + onQDataChanged, + isReadOnlyMode + } = this.props; + return ( + <div className="vsp-components-load-balancing"> + <div className="halb-data"> + {genericFieldInfo && ( + <Form + formReady={null} + isValid={true} + onSubmit={() => this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + <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> + ); + } - toggle(name) { - let st = this.state.expanded[name] ? true : false; - let newState = {...this.state}; - newState.expanded[name] = !st; - this.setState(newState); - } + toggle(name) { + let st = this.state.expanded[name] ? true : false; + let newState = { ...this.state }; + newState.expanded[name] = !st; + this.setState(newState); + } - save() { - let {onSubmit, qdata} = this.props; - return onSubmit({qdata}); - } + save() { + let { onSubmit, qdata } = this.props; + return onSubmit({ qdata }); + } } export default SoftwareProductComponentLoadBalancingView; 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 8871aabbb5..0b0b9ae2d9 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 @@ -13,51 +13,54 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx'; import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; - - -export const mapStateToProps = ({softwareProduct}) => { - - let {softwareProductComponents: {monitoring}} = softwareProduct; - return { - filenames: monitoring - }; - +export const mapStateToProps = ({ softwareProduct }) => { + let { softwareProductComponents: { monitoring } } = softwareProduct; + return { + filenames: monitoring + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { - - return { - onDropMibFileToUpload: (formData, type) => - SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, { - softwareProductId, - version, - componentId, - formData, - type - }), - - onDeleteFile: type => SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, { - softwareProductId, - version, - componentId, - type - }), +const mapActionsToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + onDropMibFileToUpload: (formData, type) => + SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, { + softwareProductId, + version, + componentId, + formData, + type + }), - onFileUploadError: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_ERROR, - data: { - title: i18n('Upload Failed'), - msg: i18n('Expected "zip" file. Please check the provided file type.') - } - }) - }; + onDeleteFile: type => + SoftwareProductComponentsMonitoringAction.deleteFile(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.' + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsMonitoringView); 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 3db708bc92..c60bc5f1be 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 @@ -16,61 +16,90 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './SoftwareProductComponentsMonitoringConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; function baseUrl(vspId, version, componentId) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`; } -let onInvalidFileSizeUpload = (dispatch) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_ERROR, - data: { - title: i18n('Upload Failed'), - msg: i18n('no zip file was uploaded or zip file doesn\'t exist') - } -}); +let onInvalidFileSizeUpload = dispatch => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_ERROR, + data: { + title: i18n('Upload Failed'), + msg: i18n("no zip file was uploaded or zip file doesn't exist") + } + }); -let uploadFile = (dispatch, {softwareProductId, version, componentId, formData, type}) => { - return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`, formData).then(()=> dispatch({ - type: actionTypes.MONITOR_UPLOADED, data: {filename: formData.get('upload').name, type : type} - })); +let uploadFile = ( + dispatch, + { softwareProductId, version, componentId, formData, type } +) => { + return RestAPIUtil.post( + `${baseUrl(softwareProductId, version, componentId)}/types/${type}`, + formData + ).then(() => + dispatch({ + type: actionTypes.MONITOR_UPLOADED, + data: { filename: formData.get('upload').name, type: type } + }) + ); }; -let deleteFile = (dispatch, {softwareProductId, version, componentId, type}) => { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`).then(()=> dispatch({ - type: actionTypes.MONITOR_DELETED, - data : { type: type} - })); +let deleteFile = ( + dispatch, + { softwareProductId, version, componentId, type } +) => { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version, componentId)}/types/${type}` + ).then(() => + dispatch({ + type: actionTypes.MONITOR_DELETED, + data: { type: type } + }) + ); }; - const SoftwareProductComponentsMonitoringAction = { + fetchExistingFiles(dispatch, { softwareProductId, version, componentId }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}` + ).then(response => + dispatch({ + type: actionTypes.MONITOR_FILES_DATA_CHANGE, + data: response + }) + ); + }, - fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){ - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`).then(response => - dispatch({ - type: actionTypes.MONITOR_FILES_DATA_CHANGE, - data: response - }) - ); - }, - - uploadFile(dispatch, {softwareProductId, version, componentId, formData, type}){ - if (formData.get('upload').size) { - return uploadFile(dispatch, {softwareProductId, version, componentId, formData, type}); - } - else { - onInvalidFileSizeUpload(dispatch); - } - }, - - deleteFile(dispatch, {softwareProductId, version, componentId, type}){ - return deleteFile(dispatch, {softwareProductId, version, componentId, type}); - } + uploadFile( + dispatch, + { softwareProductId, version, componentId, formData, type } + ) { + if (formData.get('upload').size) { + return uploadFile(dispatch, { + softwareProductId, + version, + componentId, + formData, + type + }); + } else { + onInvalidFileSizeUpload(dispatch); + } + }, + deleteFile(dispatch, { softwareProductId, version, componentId, type }) { + return deleteFile(dispatch, { + softwareProductId, + version, + componentId, + type + }); + } }; export default SoftwareProductComponentsMonitoringAction; 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 bf2cbd2a3f..10049d6b57 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 @@ -16,29 +16,26 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; - export const actionTypes = keyMirror({ - MONITOR_FILES_DATA_CHANGE: null, - MONITOR_UPLOADED: null, - MONITOR_DELETED: null + MONITOR_FILES_DATA_CHANGE: null, + MONITOR_UPLOADED: null, + MONITOR_DELETED: null }); export const fileTypes = { - SNMP_TRAP: 'SNMP_TRAP', - SNMP_POLL: 'SNMP_POLL', - VES_EVENT: 'VES_EVENTS' + SNMP_TRAP: 'SNMP_TRAP', + SNMP_POLL: 'SNMP_POLL', + VES_EVENT: 'VES_EVENTS' }; export const type2Name = { - SNMP_TRAP: 'snmpTrap', - SNMP_POLL: 'snmpPoll', - VES_EVENTS: 'vesEvent' + SNMP_TRAP: 'snmpTrap', + SNMP_POLL: 'snmpPoll', + VES_EVENTS: 'vesEvent' }; - export const type2Title = { - SNMP_TRAP : i18n('SNMP Trap'), - SNMP_POLL : i18n('SNMP Poll'), - VES_EVENTS: i18n('VES') + SNMP_TRAP: i18n('SNMP Trap'), + SNMP_POLL: i18n('SNMP Poll'), + VES_EVENTS: i18n('VES') }; - 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 f5cfe6f06d..61ad4ec2d9 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 @@ -13,23 +13,26 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, type2Name} from './SoftwareProductComponentsMonitoringConstants.js'; +import { + actionTypes, + type2Name +} from './SoftwareProductComponentsMonitoringConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.MONITOR_FILES_DATA_CHANGE: - return action.data; - case actionTypes.MONITOR_UPLOADED: - return { - ...state, - [type2Name[action.data.type]]: action.data.filename - }; - case actionTypes.MONITOR_DELETED: - return { - ...state, - [type2Name[action.data.type]]: undefined - }; - default: - return state; - } + switch (action.type) { + case actionTypes.MONITOR_FILES_DATA_CHANGE: + return action.data; + case actionTypes.MONITOR_UPLOADED: + return { + ...state, + [type2Name[action.data.type]]: action.data.filename + }; + case actionTypes.MONITOR_DELETED: + return { + ...state, + [type2Name[action.data.type]]: undefined + }; + default: + return state; + } }; 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 95d1e4e283..771bca161a 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 @@ -13,123 +13,133 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Dropzone from 'react-dropzone'; import Button from 'sdc-ui/lib/react/Button.js'; import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; -import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js'; - - +import { + fileTypes, + type2Title, + type2Name +} from './SoftwareProductComponentsMonitoringConstants.js'; class SoftwareProductComponentsMonitoringView extends Component { - - static propTypes = { - isReadOnlyMode: PropTypes.bool, - filenames: PropTypes.object, - softwareProductId: PropTypes.string, - - onDropMibFileToUpload: PropTypes.func, - onDeleteSnmpFile: PropTypes.func - }; - - state = { - dragging: false - }; - - - - - render() { - return ( - <div className='vsp-component-monitoring'> - {this.renderDropzoneWithType(fileTypes.VES_EVENT)} - {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)} - {this.renderDropzoneWithType(fileTypes.SNMP_POLL)} - </div> - ); - } - - renderDropzoneWithType(type) { - let {isReadOnlyMode, filenames} = this.props; - let fileByType = type2Name[type]; - let fileName = (filenames) ? filenames[fileByType] : undefined; - let refAndName = `fileInput${type.toString()}`; - let typeDisplayName = type2Title[type]; - return ( - <Dropzone - className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`} - onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})} - onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} - onDragLeave={() => this.setState({dragging:false})} - multiple={false} - disableClick={true} - ref={refAndName} - name={refAndName} - accept='.zip'> - <div className='draggable-wrapper'> - <div className='section-title'>{typeDisplayName}</div> - {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)} - </div> - </Dropzone> - ); - } - - renderUploadButton(refAndName) { - let {isReadOnlyMode} = this.props; - return ( - <DraggableUploadFileBox - dataTestId={`monitoring-upload-${refAndName}`} - className='software-product-landing-view-top-block-col-upl' - isReadOnlyMode={isReadOnlyMode} - onClick={() => this.refs[refAndName].open()}/> - ); - } - - renderUploadedFileName(filename, type, isReadOnlyMode) { - return ( - <div className='monitoring-file'> - <Button - color='white' - disabled={true} - className='filename'> - {filename} - </Button> - - <Button - color='gray' - data-test-id={`monitoring-delete-${type}`} - disabled={isReadOnlyMode} - onClick={()=>this.props.onDeleteFile(type)} - iconName='close' - className='delete'/> - </div> - ); - } - - - handleOnDragEnter(isReadOnlyMode) { - if (!isReadOnlyMode) { - this.setState({dragging: true}); - } - } - - handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) { - if (isReadOnlyMode) { - return; - } - 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(); - } - } + static propTypes = { + isReadOnlyMode: PropTypes.bool, + filenames: PropTypes.object, + softwareProductId: PropTypes.string, + + onDropMibFileToUpload: PropTypes.func, + onDeleteSnmpFile: PropTypes.func + }; + + state = { + dragging: false + }; + + render() { + return ( + <div className="vsp-component-monitoring"> + {this.renderDropzoneWithType(fileTypes.VES_EVENT)} + {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)} + {this.renderDropzoneWithType(fileTypes.SNMP_POLL)} + </div> + ); + } + + renderDropzoneWithType(type) { + let { isReadOnlyMode, filenames } = this.props; + let fileByType = type2Name[type]; + let fileName = filenames ? filenames[fileByType] : undefined; + let refAndName = `fileInput${type.toString()}`; + let typeDisplayName = type2Title[type]; + return ( + <Dropzone + className={`dropzone ${ + this.state.dragging ? 'active-dragging' : '' + }`} + onDrop={(acceptedFiles, rejectedFiles) => + this.handleImport(acceptedFiles, rejectedFiles, { + isReadOnlyMode, + type, + refAndName + }) + } + onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} + onDragLeave={() => this.setState({ dragging: false })} + multiple={false} + disableClick={true} + ref={refAndName} + name={refAndName} + accept=".zip"> + <div className="draggable-wrapper"> + <div className="section-title">{typeDisplayName}</div> + {fileName + ? this.renderUploadedFileName( + fileName, + type, + isReadOnlyMode + ) + : this.renderUploadButton(refAndName)} + </div> + </Dropzone> + ); + } + + renderUploadButton(refAndName) { + let { isReadOnlyMode } = this.props; + return ( + <DraggableUploadFileBox + dataTestId={`monitoring-upload-${refAndName}`} + className="software-product-landing-view-top-block-col-upl" + isReadOnlyMode={isReadOnlyMode} + onClick={() => this.refs[refAndName].open()} + /> + ); + } + + renderUploadedFileName(filename, type, isReadOnlyMode) { + return ( + <div className="monitoring-file"> + <Button color="white" disabled={true} className="filename"> + {filename} + </Button> + + <Button + color="gray" + data-test-id={`monitoring-delete-${type}`} + disabled={isReadOnlyMode} + onClick={() => this.props.onDeleteFile(type)} + iconName="close" + className="delete" + /> + </div> + ); + } + + handleOnDragEnter(isReadOnlyMode) { + if (!isReadOnlyMode) { + this.setState({ dragging: true }); + } + } + + handleImport(files, rejectedFiles, { isReadOnlyMode, type, refAndName }) { + if (isReadOnlyMode) { + return; + } + 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(); + } + } } export default SoftwareProductComponentsMonitoringView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js index d4aaf7cc7e..e705618a65 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js @@ -13,39 +13,55 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import NICCreationActionHelper from './NICCreationActionHelper.js'; import NICCreationView from './NICCreationView.jsx'; import SoftwareProductComponentsNetworkActionHelper from '../SoftwareProductComponentsNetworkActionHelper.js'; -import {networkTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js'; +import { + networkTypes, + NIC_CREATION_FORM_NAME +} from '../SoftwareProductComponentsNetworkConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct; - let {network: {nicCreation = {}}} = softwareProductComponents; - let {data, genericFieldInfo, formReady} = nicCreation; - data = {...data, networkType: networkTypes.EXTERNAL}; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { data: currentSoftwareProduct = {} }, + softwareProductComponents + } = softwareProduct; + let { network: { nicCreation = {} } } = softwareProductComponents; + let { data, genericFieldInfo, formReady } = nicCreation; + data = { ...data, networkType: networkTypes.EXTERNAL }; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return { - currentSoftwareProduct, - data, - genericFieldInfo, - isFormValid, - formReady - }; + return { + currentSoftwareProduct, + data, + genericFieldInfo, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version}) => { - return { - onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}), - onCancel: () => NICCreationActionHelper.close(dispatch), - onSubmit: ({nic, componentId}) => { - SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version}); - NICCreationActionHelper.close(dispatch); - }, - onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME) - }; +const mapActionsToProps = (dispatch, { softwareProductId, version }) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: NIC_CREATION_FORM_NAME + }), + onCancel: () => NICCreationActionHelper.close(dispatch), + onSubmit: ({ nic, componentId }) => { + SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, { + nic, + softwareProductId, + componentId, + version + }); + NICCreationActionHelper.close(dispatch); + }, + onValidateForm: () => + ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME) + }; }; export default connect(mapStateToProps, mapActionsToProps)(NICCreationView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js index a40b32d51a..4f200ce33f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js @@ -13,35 +13,37 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from '../SoftwareProductComponentsNetworkConstants'; +import { actionTypes } from '../SoftwareProductComponentsNetworkConstants'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; export default { + open( + dispatch, + { softwareProductId, componentId, modalClassName, version } + ) { + dispatch({ + type: actionTypes.NICCreation.OPEN + }); - open(dispatch, {softwareProductId, componentId, modalClassName, version}) { - dispatch({ - type: actionTypes.NICCreation.OPEN - }); + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.NIC_CREATION, + title: i18n('Create NEW NIC'), + modalClassName, + modalComponentProps: { softwareProductId, componentId, version } + } + }); + }, - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.NIC_CREATION, - title: i18n('Create NEW NIC'), - modalClassName, - modalComponentProps: {softwareProductId, componentId, version} - } - }); - }, - - close(dispatch){ - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - dispatch({ - type: actionTypes.NICCreation.CLEAR_DATA - }); - } + close(dispatch) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + dispatch({ + type: actionTypes.NICCreation.CLEAR_DATA + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js index c7e2495b3d..8309c40451 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js @@ -13,37 +13,40 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js'; +import { + actionTypes, + NIC_CREATION_FORM_NAME +} from '../SoftwareProductComponentsNetworkConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.NICCreation.OPEN: - return { - ...state, - data: {}, - formName: NIC_CREATION_FORM_NAME, - formReady: null, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data : true}] - }, - 'networkDescription' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 50}] - } - } - }; - case actionTypes.NICCreation.CLEAR_DATA: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.NICCreation.OPEN: + return { + ...state, + data: {}, + formName: NIC_CREATION_FORM_NAME, + formReady: null, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + name: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + networkDescription: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 50 }] + } + } + }; + case actionTypes.NICCreation.CLEAR_DATA: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx index 258876844a..88525c051d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx @@ -22,103 +22,136 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; const NICPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - networkId: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + networkId: PropTypes.string }); class NICCreationView extends React.Component { + static propTypes = { + data: NICPropType, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: NICPropType, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + render() { + let { + data = {}, + onDataChanged, + genericFieldInfo, + isFormValid, + onValidateForm, + formReady + } = this.props; + let { name, description, networkDescription } = data; + return ( + <div> + {genericFieldInfo && ( + <Form + ref={form => (this.form = form)} + hasButtons={true} + onSubmit={() => this.submit()} + submitButtonText={ + data.id ? i18n('Save') : i18n('Create') + } + onReset={() => this.props.onCancel()} + labledButtons={true} + isValid={isFormValid} + onValidateForm={() => onValidateForm()} + formReady={formReady}> + <GridSection hasLastColSet> + <GridItem colSpan={4} lastColInRow> + <Input + value={name} + label={i18n('Name')} + data-test-id="nic-name" + onChange={name => onDataChanged({ name })} + isRequired={true} + type="text" + isValid={genericFieldInfo['name'].isValid} + errorText={ + genericFieldInfo['name'].errorText + } + className="field-section" + /> + <Input + value={description} + label={i18n('Description')} + data-test-id="nic-description" + onChange={description => + onDataChanged({ description }) + } + isValid={ + genericFieldInfo['description'].isValid + } + errorText={ + genericFieldInfo['description'] + .errorText + } + type="textarea" + className="field-section" + /> + </GridItem> + </GridSection> + <GridSection title={i18n('Network')} hasLastColSet> + <GridItem colSpan={2}> + <div className="form-group"> + <label className="control-label"> + {i18n('Network Type')} + </label> + <div className="network-type-radio"> + <Input + label={i18n('Internal')} + disabled + checked={false} + data-test-id="nic-internal" + className="network-radio disabled" + type="radio" + /> + <Input + label={i18n('External')} + disabled + checked={true} + data-test-id="nic-external" + className="network-radio disabled" + type="radio" + /> + </div> + </div> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + value={networkDescription} + label={i18n('Network Description')} + data-test-id="nic-network-description" + onChange={networkDescription => + onDataChanged({ networkDescription }) + } + isValid={ + genericFieldInfo['networkDescription'] + .isValid + } + errorText={ + genericFieldInfo['networkDescription'] + .errorText + } + type="text" + className="field-section" + /> + </GridItem> + </GridSection> + </Form> + )} + </div> + ); + } - render() { - let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props; - let {name, description, networkDescription} = data; - return ( - <div> - {genericFieldInfo && <Form - ref={(form) => this.form = form} - hasButtons={true} - onSubmit={ () => this.submit() } - submitButtonText={data.id ? i18n('Save') : i18n('Create')} - onReset={ () => this.props.onCancel() } - labledButtons={true} - isValid={isFormValid} - onValidateForm={() => onValidateForm()} - formReady={formReady} > - <GridSection hasLastColSet> - <GridItem colSpan={4} lastColInRow> - <Input - value={name} - label={i18n('Name')} - data-test-id='nic-name' - onChange={name => onDataChanged({name})} - isRequired={true} - type='text' - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - className='field-section'/> - <Input - value={description} - label={i18n('Description')} - data-test-id='nic-description' - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo['description'].isValid} - errorText={genericFieldInfo['description'].errorText} - type='textarea' - className='field-section'/> - </GridItem> - </GridSection> - <GridSection title={i18n('Network')} hasLastColSet> - <GridItem colSpan={2}> - <div className='form-group'> - <label className='control-label'>{i18n('Network Type')}</label> - <div className='network-type-radio'> - <Input - label={i18n('Internal')} - disabled - checked={false} - data-test-id='nic-internal' - className='network-radio disabled' - type='radio'/> - <Input - label={i18n('External')} - disabled - checked={true} - data-test-id='nic-external' - className='network-radio disabled' - type='radio'/> - </div> - </div> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - value={networkDescription} - label={i18n('Network Description')} - data-test-id='nic-network-description' - onChange={networkDescription => onDataChanged({networkDescription})} - isValid={genericFieldInfo['networkDescription'].isValid} - errorText={genericFieldInfo['networkDescription'].errorText} - type='text' - className='field-section'/> - </GridItem> - </GridSection> - </Form>} - </div> - ); - } - - - submit() { - const {data: nic, componentId} = this.props; - this.props.onSubmit({nic, componentId}); - } + submit() { + const { data: nic, componentId } = this.props; + this.props.onSubmit({ nic, componentId }); + } } export default NICCreationView; 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 93bd0bd67e..d7205b46ed 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 @@ -13,56 +13,93 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js'; import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx'; 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'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct, currentScreen}) => { - - let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {network: {nicEditor = {}}} = softwareProductComponents; - let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor; - let {props: {isReadOnlyMode}} = currentScreen; - let {onboardingMethod} = 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, - dataMap, - isFormValid, - formReady, - genericFieldInfo, - qgenericFieldInfo, - isReadOnlyMode, - protocols, - isManual: onboardingMethod === onboardingMethodTypes.MANUAL - }; +export const mapStateToProps = ({ softwareProduct, currentScreen }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; + let { network: { nicEditor = {} } } = softwareProductComponents; + let { + data, + qdata, + genericFieldInfo, + qgenericFieldInfo, + dataMap, + formReady + } = nicEditor; + let { props: { isReadOnlyMode } } = currentScreen; + let { onboardingMethod } = 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, + dataMap, + isFormValid, + formReady, + genericFieldInfo, + qgenericFieldInfo, + isReadOnlyMode, + protocols, + isManual: onboardingMethod === onboardingMethodTypes.MANUAL + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, - formName: forms.NIC_EDIT_FORM}), - onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}), - onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch), - onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM), - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: NIC_QUESTIONNAIRE}), - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: forms.NIC_EDIT_FORM + }), + onSubmit: ({ data, qdata }) => + SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire( + dispatch, + { softwareProductId, version, componentId, data, qdata } + ), + onCancel: () => + SoftwareProductComponentsNetworkActionHelper.closeNICEditor( + dispatch + ), + onValidateForm: () => + ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM), + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: NIC_QUESTIONNAIRE + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsNICEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductComponentsNICEditorView +); 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 dd37135d77..2da9b4b76b 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 @@ -13,37 +13,37 @@ * 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'; +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.FILL_DATA: - return { - ...state, - data: action.nic, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [] - }, - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data : true}] - }, - 'networkDescription' : { - isValid: true, - errorText: '', - validations: [] - } - }, - formName: forms.NIC_EDIT_FORM - }; - case actionTypes.NICEditor.CLEAR_DATA: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.NICEditor.FILL_DATA: + return { + ...state, + data: action.nic, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [] + }, + name: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + networkDescription: { + isValid: true, + errorText: '', + validations: [] + } + }, + formName: forms.NIC_EDIT_FORM + }; + case actionTypes.NICEditor.CLEAR_DATA: + return {}; + 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 fbb3d53033..df2efbe39e 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 @@ -26,48 +26,113 @@ import Protocols from './nicEditorComponents/Protocols.jsx'; import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx'; class SoftwareProductComponentsNetworkEditorView extends React.Component { + render() { + let { + onCancel, + onValidateForm, + isReadOnlyMode, + isFormValid, + formReady, + data = {}, + qgenericFieldInfo, + dataMap, + onDataChanged, + protocols, + onQDataChanged, + isManual, + genericFieldInfo + } = this.props; + let { + name, + description, + networkName, + networkType, + networkDescription + } = data; + let netWorkValues = [ + { + enum: networkName, + title: networkName + } + ]; + 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 + isManual={isManual} + name={name} + description={description} + onDataChanged={onDataChanged} + isReadOnlyMode={isReadOnlyMode} + genericFieldInfo={genericFieldInfo} + /> + <Protocols + protocols={protocols} + qgenericFieldInfo={qgenericFieldInfo} + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + <IpConfig + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + <Network + networkDescription={networkDescription} + onDataChanged={onDataChanged} + networkValues={netWorkValues} + isReadOnlyMode={isReadOnlyMode} + networkType={networkType} + /> + <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> + </Form> + )} + </div> + ); + } - render() { - let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo, - dataMap, onDataChanged, protocols, onQDataChanged, isManual, genericFieldInfo} = this.props; - let {name, description, networkName, networkType, networkDescription} = data; - let netWorkValues = [{ - enum: networkName, - title: networkName - }]; - 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 isManual={isManual} name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode} genericFieldInfo={genericFieldInfo} /> - <Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} /> - <IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} /> - <Network networkDescription={networkDescription} onDataChanged={onDataChanged} networkValues={netWorkValues} isReadOnlyMode={isReadOnlyMode} networkType={networkType} /> - <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> - </Form> } - </div> - ); - } - - submit() { - let {data, qdata, onSubmit} = this.props; - onSubmit({data, qdata}); - } + submit() { + let { data, qdata, onSubmit } = this.props; + onSubmit({ data, qdata }); + } } export default SoftwareProductComponentsNetworkEditorView; 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 5cfc88bdc9..a2e65142a2 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 @@ -13,16 +13,22 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js'; +import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.NIC_LIST_UPDATE: - return [...action.response]; - case actionTypes.NIC_LIST_EDIT: - const indexForEdit = state.findIndex(nic => nic.id === action.nic.id); - return [...state.slice(0, indexForEdit), action.nic, ...state.slice(indexForEdit + 1)]; - default: - return state; - } + switch (action.type) { + case actionTypes.NIC_LIST_UPDATE: + return [...action.response]; + case actionTypes.NIC_LIST_EDIT: + const indexForEdit = state.findIndex( + nic => nic.id === action.nic.id + ); + return [ + ...state.slice(0, indexForEdit), + action.nic, + ...state.slice(indexForEdit + 1) + ]; + default: + return state; + } }; 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 1ffbc5919f..58c816134b 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 @@ -17,127 +17,223 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js'; -import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {modalContentMapper as modalPagesMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js'; +import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { modalContentMapper as modalPagesMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; +import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js'; function baseUrl(softwareProductId, version, componentId) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`; } -function createNIC({nic, vspId, componentId, version}) { - return RestAPIUtil.post(baseUrl(vspId, version, componentId), { - name: nic.name, - description: nic.description, - networkDescription: nic.networkDescription, - networkType: nic.networkType - }); +function createNIC({ nic, vspId, componentId, version }) { + return RestAPIUtil.post(baseUrl(vspId, version, componentId), { + name: nic.name, + description: nic.description, + networkDescription: nic.networkDescription, + networkType: nic.networkType + }); } -function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`); +function fetchNICQuestionnaire({ + softwareProductId, + version, + componentId, + nicId +}) { + return RestAPIUtil.fetch( + `${baseUrl( + softwareProductId, + version, + componentId + )}/${nicId}/questionnaire` + ); } -function fetchNIC({softwareProductId, version, componentId, nicId}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`); +function fetchNIC({ softwareProductId, version, componentId, nicId }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}/${nicId}` + ); } -function fetchNICsList({softwareProductId, version, componentId}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); +function fetchNICsList({ softwareProductId, version, componentId }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}` + ); } -function deleteNIC({softwareProductId, componentId, nicId, version}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`); +function deleteNIC({ softwareProductId, componentId, nicId, version }) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version, componentId)}/${nicId}` + ); } -function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId, networkType, networkDescription}}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{ - name, - description, - networkId, - networkDescription, - networkType - }); +function saveNIC({ + softwareProductId, + version, + componentId, + nic: { id, name, description, networkId, networkType, networkDescription } +}) { + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version, componentId)}/${id}`, + { + name, + description, + networkId, + networkDescription, + networkType + } + ); } -function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, 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, version, componentId}) { - return fetchNICsList({softwareProductId, version, componentId}).then((response) => { - dispatch({ - type: actionTypes.NIC_LIST_UPDATE, - response: response.results - }); - }); - }, - - openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) { - dispatch({ - type: actionTypes.NICEditor.FILL_DATA, - nic: {...data, id: nic.id} - }); - dispatch({ - type: GlobalModalActions.GLOBAL_MODAL_SHOW, - data: { - modalClassName, - modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version}, - modalComponentName: modalPagesMapper.NIC_EDITOR, - title: i18n('Edit NIC') - } - }); - }, - - closeNICEditor(dispatch) { - dispatch({ - type: GlobalModalActions.GLOBAL_MODAL_CLOSE - }); - dispatch({ - type: actionTypes.NICEditor.CLEAR_DATA - }); - }, - - createNIC(dispatch, {nic, softwareProductId, componentId, version}){ - return createNIC({nic, vspId: softwareProductId, componentId, version}).then(() => { - return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version}); - }); - }, - loadNICData({softwareProductId, version, componentId, nicId}) { - return fetchNIC({softwareProductId, version, componentId, nicId}); - }, - - deleteNIC(dispatch, {softwareProductId, componentId, nicId, version}) { - return deleteNIC({softwareProductId, componentId, nicId, version}).then(() => { - return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version}); - }); - }, - 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, version, componentId, data, qdata}) { - SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch); - return Promise.all([ - saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}), - saveNIC({softwareProductId, version, componentId, nic: data}).then(() => { - dispatch({ - type: actionTypes.NIC_LIST_EDIT, - nic: data - }); - }) - ]); - } + fetchNICsList(dispatch, { softwareProductId, version, componentId }) { + return fetchNICsList({ softwareProductId, version, componentId }).then( + response => { + dispatch({ + type: actionTypes.NIC_LIST_UPDATE, + response: response.results + }); + } + ); + }, + + openNICEditor( + dispatch, + { + nic = {}, + data = {}, + softwareProductId, + componentId, + isReadOnlyMode, + modalClassName, + version + } + ) { + dispatch({ + type: actionTypes.NICEditor.FILL_DATA, + nic: { ...data, id: nic.id } + }); + dispatch({ + type: GlobalModalActions.GLOBAL_MODAL_SHOW, + data: { + modalClassName, + modalComponentProps: { + softwareProductId, + componentId, + isReadOnlyMode, + version + }, + modalComponentName: modalPagesMapper.NIC_EDITOR, + title: i18n('Edit NIC') + } + }); + }, + + closeNICEditor(dispatch) { + dispatch({ + type: GlobalModalActions.GLOBAL_MODAL_CLOSE + }); + dispatch({ + type: actionTypes.NICEditor.CLEAR_DATA + }); + }, + + createNIC(dispatch, { nic, softwareProductId, componentId, version }) { + return createNIC({ + nic, + vspId: softwareProductId, + componentId, + version + }).then(() => { + return SoftwareProductComponentNetworkActionHelper.fetchNICsList( + dispatch, + { softwareProductId, componentId, version } + ); + }); + }, + loadNICData({ softwareProductId, version, componentId, nicId }) { + return fetchNIC({ softwareProductId, version, componentId, nicId }); + }, + + deleteNIC(dispatch, { softwareProductId, componentId, nicId, version }) { + return deleteNIC({ + softwareProductId, + componentId, + nicId, + version + }).then(() => { + return SoftwareProductComponentNetworkActionHelper.fetchNICsList( + dispatch, + { softwareProductId, componentId, version } + ); + }); + }, + 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, version, componentId, data, qdata } + ) { + SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch); + return Promise.all([ + saveNICQuestionnaire({ + softwareProductId, + version, + componentId, + nicId: data.id, + qdata + }), + saveNIC({ + softwareProductId, + version, + componentId, + nic: data + }).then(() => { + dispatch({ + type: actionTypes.NIC_LIST_EDIT, + nic: data + }); + }) + ]); + } }; export default SoftwareProductComponentNetworkActionHelper; 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 8ef8fe8c18..4e361bb1a9 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 @@ -16,23 +16,23 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - NIC_LIST_EDIT: null, - NIC_LIST_UPDATE: null, + NIC_LIST_EDIT: null, + NIC_LIST_UPDATE: null, - NICEditor: { - FILL_DATA: null, - CLEAR_DATA: null, - }, - NICCreation: { - OPEN: null, - CLEAR_DATA: null, - DATA_CHANGED: null - }, + NICEditor: { + FILL_DATA: null, + CLEAR_DATA: null + }, + NICCreation: { + OPEN: null, + CLEAR_DATA: null, + DATA_CHANGED: null + } }); export const networkTypes = { - EXTERNAL: 'External', - INTERNAL: 'Internal' + EXTERNAL: 'External', + INTERNAL: 'Internal' }; export const NIC_QUESTIONNAIRE = 'nic'; export const NIC_CREATION_FORM_NAME = 'nicCreation'; 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 bb256d5d41..ac708524cf 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 @@ -13,79 +13,132 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.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 { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js'; import NICCreationActionHelper from './NICCreation/NICCreationActionHelper.js'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; + let { + network: { nicList = [] }, + componentEditor: { + data: componentData, + qdata, + dataMap, + qgenericFieldInfo + } + } = softwareProductComponents; + let { version, onboardingMethod } = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; -export const mapStateToProps = ({softwareProduct}) => { - - let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; - let {version, onboardingMethod} = currentSoftwareProduct; - let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - - return { - version, - componentData, - qdata, - dataMap, - qgenericFieldInfo, - isValidityData, - nicList, - isManual - }; - + return { + version, + componentData, + qdata, + dataMap, + qgenericFieldInfo, + isValidityData, + nicList, + isManual + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: COMPONENTS_QUESTIONNAIRE}), - onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create', version}), - onDeleteNic: (nic) => dispatch({ - type: GlobalModalActions.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: nic.name}), - onConfirmed: () => SoftwareProductComponentsNetworkActionHelper.deleteNIC(dispatch, {softwareProductId, - componentId, nicId: nic.id, version}) - } - }), - onEditNicClick: (nic, isReadOnlyMode) => { - Promise.all([ - SoftwareProductComponentsNetworkActionHelper.loadNICData({ - softwareProductId, - version, - componentId, - nicId: nic.id - }), - SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, { - softwareProductId, - version, - componentId, - nicId: nic.id - }) - ]).then( - ([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data, - isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version}) - ); - }, - onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, - {softwareProductId, version, - vspComponentId: componentId, - qdata}); - } - - - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_QUESTIONNAIRE + }), + onAddNic: () => + NICCreationActionHelper.open(dispatch, { + softwareProductId, + componentId, + modalClassName: 'network-nic-modal-create', + version + }), + onDeleteNic: nic => + dispatch({ + type: GlobalModalActions.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: nic.name + }), + onConfirmed: () => + SoftwareProductComponentsNetworkActionHelper.deleteNIC( + dispatch, + { + softwareProductId, + componentId, + nicId: nic.id, + version + } + ) + } + }), + onEditNicClick: (nic, isReadOnlyMode) => { + Promise.all([ + SoftwareProductComponentsNetworkActionHelper.loadNICData({ + softwareProductId, + version, + componentId, + nicId: nic.id + }), + SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire( + dispatch, + { + softwareProductId, + version, + componentId, + nicId: nic.id + } + ) + ]).then(([{ data }]) => + SoftwareProductComponentsNetworkActionHelper.openNICEditor( + dispatch, + { + nic, + data, + isReadOnlyMode, + softwareProductId, + componentId, + modalClassName: 'network-nic-modal-edit', + version + } + ) + ); + }, + onSubmit: ({ qdata }) => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { + softwareProductId, + version, + vspComponentId: componentId, + qdata + } + ); + } + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsNetworkListView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsNetworkListView); 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 4d460c722d..c631fb24c3 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 @@ -20,138 +20,203 @@ 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 ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -import Input from'nfvo-components/input/validation/Input.jsx'; - +import Input from 'nfvo-components/input/validation/Input.jsx'; class SoftwareProductComponentsNetworkView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; - - render() { - let {dataMap, qgenericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props; - - return( - <div className='vsp-components-network'> - <div className='network-data'> - <div> -{ 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'> - <div className='single-col'> - <Input - data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs' - label={i18n('Protocol with Highest Traffic Profile across all NICs')} - type='select' - 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'> - <Input - data-test-id='networkTransactionsPerSecond' - label={i18n('Network Transactions per Second')} - 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> - - </Form> } - </div> - {this.renderNicList()} - </div> - - </div> - ); - } - - renderNicList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddNic, isManual} = this.props; - return ( - <ListEditorView - title={i18n('Interfaces')} - filterValue={localFilter} - placeholder={i18n('Filter NICs by Name')} - isReadOnlyMode={isReadOnlyMode} - onFilter={value => this.setState({localFilter: value})} - onAdd={isManual ? onAddNic : null} - plusButtonTitle={i18n('Add NIC')} - twoColumns> - {this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))} - </ListEditorView> - ); - } + render() { + let { + dataMap, + qgenericFieldInfo, + onQDataChanged, + isReadOnlyMode + } = this.props; - renderNicListItem(nic, isReadOnlyMode) { - let {id, name, description, networkName = ''} = nic; - let {onEditNicClick, version, isManual, onDeleteNic} = this.props; - return ( - <ListEditorItemView - key={id} - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteNic(nic, version) : null}> + return ( + <div className="vsp-components-network"> + <div className="network-data"> + <div> + {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"> + <div className="single-col"> + <Input + data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs" + label={i18n( + 'Protocol with Highest Traffic Profile across all NICs' + )} + type="select" + 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"> + <Input + data-test-id="networkTransactionsPerSecond" + label={i18n( + 'Network Transactions per Second' + )} + 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> + </Form> + )} + </div> + {this.renderNicList()} + </div> + </div> + ); + } - <ListEditorItemViewField> - <div className='name'>{name}</div> - </ListEditorItemViewField> - <ListEditorItemViewField> - <div className={isManual ? 'details-col' : 'details'}> - <div className={isManual ? 'manual-title' : 'title'}>{i18n('Purpose of NIC')}</div> - {description && <div className={isManual ? 'description' : ''}>{description}</div>} - </div> - {!isManual && <div className='details'> - <div className='title'>{i18n('Network')}</div> - <div className='artifact-name'>{networkName}</div> - </div>} - </ListEditorItemViewField> + renderNicList() { + const { localFilter } = this.state; + let { isReadOnlyMode, onAddNic, isManual } = this.props; + return ( + <ListEditorView + title={i18n('Interfaces')} + filterValue={localFilter} + placeholder={i18n('Filter NICs by Name')} + isReadOnlyMode={isReadOnlyMode} + onFilter={value => this.setState({ localFilter: value })} + onAdd={isManual ? onAddNic : null} + plusButtonTitle={i18n('Add NIC')} + twoColumns> + {this.filterList().map(nic => + this.renderNicListItem(nic, isReadOnlyMode) + )} + </ListEditorView> + ); + } - </ListEditorItemView> - ); - } + renderNicListItem(nic, isReadOnlyMode) { + let { id, name, description, networkName = '' } = nic; + let { onEditNicClick, version, isManual, onDeleteNic } = this.props; + return ( + <ListEditorItemView + key={id} + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteNic(nic, version) : null}> + <ListEditorItemViewField> + <div className="name">{name}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div className={isManual ? 'details-col' : 'details'}> + <div className={isManual ? 'manual-title' : 'title'}> + {i18n('Purpose of NIC')} + </div> + {description && ( + <div className={isManual ? 'description' : ''}> + {description} + </div> + )} + </div> + {!isManual && ( + <div className="details"> + <div className="title">{i18n('Network')}</div> + <div className="artifact-name">{networkName}</div> + </div> + )} + </ListEditorItemViewField> + </ListEditorItemView> + ); + } - filterList() { - let {nicList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return nicList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return nicList; - } - } + filterList() { + let { nicList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return nicList.filter(({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + }); + } else { + return nicList; + } + } - save() { - let {onSubmit, qdata, version} = this.props; - return onSubmit({qdata, version}); - } + save() { + let { onSubmit, qdata, version } = this.props; + return onSubmit({ qdata, version }); + } } export default SoftwareProductComponentsNetworkView; 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 index 0fc7404c56..0b2783ebe7 100644 --- 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 @@ -19,57 +19,97 @@ 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 hasLastColSet> - <GridItem colSpan={3}> - <div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div> - </GridItem> - <GridItem lastColInRow> - <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 lastColInRow> - <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> - ); +const Acceptable = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection hasLastColSet> + <GridItem colSpan={3}> + <div className="part-title-small packets"> + {i18n('Acceptable Jitter')} + </div> + </GridItem> + <GridItem lastColInRow> + <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 lastColInRow> + <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 index 3745fc7c2e..32a5516eb4 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index 5476ed90e6..150e58af52 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index b3a5d21625..695835606b 100644 --- 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 @@ -19,27 +19,37 @@ 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> - ); +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 index 06a2bb445c..5a89239dc6 100644 --- 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 @@ -20,40 +20,48 @@ 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, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => { - - return ( - <GridSection hastLastColSet> - <GridItem colSpan={2}> - <Input - label={i18n('Name')} - value={name} - data-test-id='nic-name' - disabled={!isManual} - isRequired={true} - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - type='text' /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - label={i18n('Purpose of NIC')} - value={description} - data-test-id='nic-description' - onChange={description => onDataChanged({description})} - disabled={isReadOnlyMode} - type='textarea' /> - </GridItem> - </GridSection> - ); +const NameAndPurpose = ({ + onDataChanged, + genericFieldInfo, + isReadOnlyMode, + name, + description, + isManual +}) => { + return ( + <GridSection hastLastColSet> + <GridItem colSpan={2}> + <Input + label={i18n('Name')} + value={name} + data-test-id="nic-name" + disabled={!isManual} + isRequired={true} + onChange={name => onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={genericFieldInfo['name'].errorText} + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <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: PropTypes.string, - description: PropTypes.array, - onDataChanged: PropTypes.func, - isReadOnlyMode: PropTypes.bool, + name: PropTypes.string, + description: PropTypes.array, + onDataChanged: PropTypes.func, + isReadOnlyMode: 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 index 7e6712cb5e..c440d2fbd3 100644 --- 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 @@ -21,56 +21,70 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js'; -const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => { - const isExternal = networkType === networkTypes.EXTERNAL; - return ( - <GridSection title={i18n('Network')} hasLastColSet> - <GridItem> - <Input - label={i18n('Internal')} - disabled - checked={!isExternal} - data-test-id='nic-internal' - className='network-radio disabled' - type='radio' /> - </GridItem> - <GridItem> - <Input - label={i18n('External')} - disabled - checked={isExternal} - data-test-id='nic-external' - className='network-radio disabled' - type='radio' /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - { - isExternal ? - <Input - label={i18n('Network Description')} - value={networkDescription} - data-test-id='nic-network-description' - onChange={networkDescription => onDataChanged({networkDescription})} - disabled={isReadOnlyMode} - type='text' /> - : - <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> - ); +const Network = ({ + networkValues, + networkType, + networkDescription, + onDataChanged, + isReadOnlyMode +}) => { + const isExternal = networkType === networkTypes.EXTERNAL; + return ( + <GridSection title={i18n('Network')} hasLastColSet> + <GridItem> + <Input + label={i18n('Internal')} + disabled + checked={!isExternal} + data-test-id="nic-internal" + className="network-radio disabled" + type="radio" + /> + </GridItem> + <GridItem> + <Input + label={i18n('External')} + disabled + checked={isExternal} + data-test-id="nic-external" + className="network-radio disabled" + type="radio" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + {isExternal ? ( + <Input + label={i18n('Network Description')} + value={networkDescription} + data-test-id="nic-network-description" + onChange={networkDescription => + onDataChanged({ networkDescription }) + } + disabled={isReadOnlyMode} + type="text" + /> + ) : ( + <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: PropTypes.array + networkValues: PropTypes.array }; -export default Network; +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 index 80a3d1579b..7173294536 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index f5f28aea59..070ac816ad 100644 --- 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 @@ -20,47 +20,74 @@ 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, lastColInRow}) => { - return ( - <GridItem lastColInRow={lastColInRow}> - <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> - ); +const PointerInput = ({ + label, + value, + onQDataChanged, + qgenericFieldInfo, + dataMap, + lastColInRow +}) => { + return ( + <GridItem lastColInRow={lastColInRow}> + <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: PropTypes.string, - value: PropTypes.string + label: PropTypes.string, + value: PropTypes.string }; -const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => { - return( - <GridSection title={title} hasLastColSet> - <GridItem colSpan={2}> - <div className='part-title-small packets'>{i18n('Packets')}</div> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <div className='part-title-small bytes'>{i18n('Bytes')}</div> - </GridItem> - {pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value} - qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})} - </GridSection> - ); +const PacketsBytes = ({ + title, + pointers = [], + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + <GridSection title={title} hasLastColSet> + <GridItem colSpan={2}> + <div className="part-title-small packets"> + {i18n('Packets')} + </div> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <div className="part-title-small bytes">{i18n('Bytes')}</div> + </GridItem> + {pointers.map((pointer, i) => { + return ( + <PointerInput + key={i} + label={pointer.label} + value={pointer.value} + qgenericFieldInfo={qgenericFieldInfo} + onQDataChanged={onQDataChanged} + dataMap={dataMap} + lastColInRow={i === 3} + /> + ); + })} + </GridSection> + ); }; PacketsBytes.PropTypes = { - title: PropTypes.string, - pointers: PropTypes.array, - onQDataChanged: PropTypes.function, - dataMap: PropTypes.object, - qgenericFieldInfo: PropTypes.object + title: PropTypes.string, + pointers: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: 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 index be4093da59..eb762b11b2 100644 --- 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 @@ -21,55 +21,83 @@ 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')} hasLastColSet> - <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} lastColInRow> - <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> - ); +const Protocols = ({ + protocols, + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + <GridSection title={i18n('Protocols')} hasLastColSet> + <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} lastColInRow> + <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: PropTypes.array, - onQDataChanged: PropTypes.function, - dataMap: PropTypes.object, - qgenericFieldInfo: PropTypes.object + protocols: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: 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 index 202d458f25..f9ec7261ac 100644 --- 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 @@ -19,21 +19,32 @@ 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')} hasLastColSet> - <GridItem colSpan={4} lastColInRow> - <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> - ); +const Sizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection title={i18n('Sizing')} hasLastColSet> + <GridItem colSpan={4} lastColInRow> + <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 b2133ad5d8..52c5cdde3d 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 @@ -15,121 +15,184 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './SoftwareProductComponentProcessesConstants.js'; +import { actionTypes } from './SoftwareProductComponentProcessesConstants.js'; function baseUrl(softwareProductId, version, componentId) { - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${ + version.id + }/components/${componentId}/processes`; } -function fetchProcessesList({softwareProductId, version, componentId}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); +function fetchProcessesList({ softwareProductId, version, componentId }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}` + ); } -function deleteProcess({softwareProductId, version, componentId, processId}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`); +function deleteProcess({ softwareProductId, version, componentId, processId }) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version, componentId)}/${processId}` + ); } -function putProcess({softwareProductId, version, componentId, process}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, { - name: process.name, - description: process.description, - type: process.type === '' ? null : process.type - }); +function putProcess({ softwareProductId, version, componentId, process }) { + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version, componentId)}/${process.id}`, + { + name: process.name, + description: process.description, + type: process.type === '' ? null : process.type + } + ); } -function postProcess({softwareProductId, version, componentId, process}) { - return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, { - name: process.name, - description: process.description, - type: process.type === '' ? null : process.type - }); +function postProcess({ softwareProductId, version, componentId, process }) { + return RestAPIUtil.post( + `${baseUrl(softwareProductId, version, componentId)}`, + { + name: process.name, + description: process.description, + type: process.type === '' ? null : process.type + } + ); } -function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) { - return RestAPIUtil.post(`${baseUrl(softwareProductId, version, 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, version, componentId}) { - dispatch({ - type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, - processesList: [] - }); - - return fetchProcessesList({softwareProductId, version, componentId}).then(response => { - dispatch({ - type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, - processesList: response.results - }); - }); - }, - - 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 - }); - }); - - }, - - saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) { - if (previousProcess) { - return putProcess({softwareProductId, version, componentId, process}).then(() => { - if (process.formData && process.formData.name !== previousProcess.artifactName){ - uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId}); - } - dispatch({ - type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, - process - }); - }); - } - else { - return postProcess({softwareProductId, version, componentId, process}).then(response => { - if (process.formData) { - uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId}); - } - dispatch({ - type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, - process: { - ...process, - id: response.value - } - }); - }); - } - }, - - hideDeleteConfirm(dispatch) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM, - processToDelete: false - }); - }, - - openDeleteProcessesConfirm(dispatch, {process} ) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM, - processToDelete: process - }); - }, - - openEditor(dispatch, process = {}) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN, - process - }); - }, - closeEditor(dispatch) { - dispatch({ - type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE - }); - } + fetchProcessesList(dispatch, { softwareProductId, version, componentId }) { + dispatch({ + type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, + processesList: [] + }); + + return fetchProcessesList({ + softwareProductId, + version, + componentId + }).then(response => { + dispatch({ + type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES, + processesList: response.results + }); + }); + }, + + 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 + }); + }); + }, + + saveProcess( + dispatch, + { softwareProductId, version, componentId, previousProcess, process } + ) { + if (previousProcess) { + return putProcess({ + softwareProductId, + version, + componentId, + process + }).then(() => { + if ( + process.formData && + process.formData.name !== previousProcess.artifactName + ) { + uploadFileToProcess({ + softwareProductId, + version, + processId: process.id, + formData: process.formData, + componentId + }); + } + dispatch({ + type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, + process + }); + }); + } else { + return postProcess({ + softwareProductId, + version, + componentId, + process + }).then(response => { + if (process.formData) { + uploadFileToProcess({ + softwareProductId, + version, + processId: response.value, + formData: process.formData, + componentId + }); + } + dispatch({ + type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS, + process: { + ...process, + id: response.value + } + }); + }); + } + }, + + hideDeleteConfirm(dispatch) { + dispatch({ + type: + actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM, + processToDelete: false + }); + }, + + openDeleteProcessesConfirm(dispatch, { process }) { + dispatch({ + type: + actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM, + processToDelete: process + }); + }, + + openEditor(dispatch, process = {}) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN, + process + }); + }, + closeEditor(dispatch) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE + }); + } }; export default SoftwareProductComponentProcessesActionHelper; 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 d15432b3fb..e3ce4f8007 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 @@ -16,21 +16,22 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, - EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, - DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, - 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 + ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, + EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, + DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null, + 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 }); export const optionsInputValues = { - PROCESS_TYPE: [ - {title: 'Select...', enum: ''}, - {title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'}, - {title: 'Other', enum: 'Other'} - ] + PROCESS_TYPE: [ + { title: 'Select...', enum: '' }, + { title: 'Lifecycle Operations', enum: 'Lifecycle_Operations' }, + { title: 'Other', enum: 'Other' } + ] }; -export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM'; +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 9502e24b1a..9d2bf34b78 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 @@ -13,44 +13,68 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +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'; +import { SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM } from './SoftwareProductComponentProcessesConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct; - let {processesList = [], processesEditor = {}} = componentProcesses; - let {data, genericFieldInfo, formReady} = processesEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductComponents: { componentProcesses = {} } + } = softwareProduct; + let { processesList = [], processesEditor = {} } = componentProcesses; + let { data, genericFieldInfo, formReady } = processesEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let previousData; - const processId = data ? data.id : null; - if(processId) { - previousData = processesList.find(process => process.id === processId); - } + let previousData; + const processId = data ? data.id : null; + if (processId) { + previousData = processesList.find(process => process.id === processId); + } - return { - data, - genericFieldInfo, - previousData, - isFormValid, - formReady - }; + return { + data, + genericFieldInfo, + previousData, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => { - - return { - 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, version, previousProcess, componentId, process}); - }, - onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM) - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + 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, + version, + previousProcess, + componentId, + process + } + ); + }, + onValidateForm: () => + ValidationHelper.validateForm( + dispatch, + SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM + ) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentProcessesEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductComponentProcessesEditorView +); 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 9afaa6d5fd..fd211734df 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 @@ -13,42 +13,48 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} 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 {}; - default: - return state; - } + 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 {}; + 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 9841ecbae7..132ebe86fb 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 @@ -14,17 +14,18 @@ * permissions and limitations under the License. */ import React from 'react'; -import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; +import { optionsInputValues as ComponentProcessesOptionsInputValues } from './SoftwareProductComponentProcessesConstants.js'; import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx'; - class SoftwareProductProcessesEditorView extends React.Component { - - render() { - return ( - <SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/> - ); - } + render() { + return ( + <SoftwareProductProcessesEditorForm + optionsInputValues={ComponentProcessesOptionsInputValues} + {...this.props} + /> + ); + } } export default SoftwareProductProcessesEditorView; 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 2a7152ef8b..cb6d25a6ac 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 @@ -13,45 +13,64 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js'; import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx'; -export const mapStateToProps = ({softwareProduct}) => { - - let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct; - let{processesList = [], processesEditor = {}} = componentProcesses; - let {data} = processesEditor; - - return { - currentSoftwareProduct, - isValidityData, - processesList, - isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id) - }; +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents: { componentProcesses = {} } + } = softwareProduct; + let { processesList = [], processesEditor = {} } = componentProcesses; + let { data } = processesEditor; + return { + currentSoftwareProduct, + isValidityData, + processesList, + isDisplayModal: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => { - - return { - onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch), - onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcess: (process) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, - {process, softwareProductId, version, componentId}) - } - }) - }; +const mapActionsToProps = ( + dispatch, + { componentId, softwareProductId, version } +) => { + return { + onAddProcess: () => + SoftwareProductComponentProcessesActionHelper.openEditor(dispatch), + onEditProcess: process => + SoftwareProductComponentProcessesActionHelper.openEditor( + dispatch, + process + ), + onDeleteProcess: process => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: process.name + }), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + SoftwareProductComponentProcessesActionHelper.deleteProcess( + dispatch, + { process, softwareProductId, version, componentId } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsProcessesListView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsProcessesListView); 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 98e24a9c21..d406f02c19 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 @@ -13,20 +13,26 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentProcessesConstants.js'; +import { actionTypes } from './SoftwareProductComponentProcessesConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: - return [...action.processesList]; - case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: - const indexForEdit = state.findIndex(process => process.id === action.process.id); - return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)]; - case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: - return [...state, action.process]; - case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: - return state.filter(process => process.id !== action.processId); - default: - return state; - } + switch (action.type) { + case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: + return [...action.processesList]; + case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: + const indexForEdit = state.findIndex( + process => process.id === action.process.id + ); + return [ + ...state.slice(0, indexForEdit), + action.process, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: + return [...state, action.process]; + case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: + return state.filter(process => process.id !== action.processId); + default: + return state; + } }; 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 27c4b9f429..8fa2bffb27 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 @@ -21,55 +21,73 @@ import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesE import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx'; class SoftwareProductProcessesView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; + static propTypes = { + onAddProcess: PropTypes.func, + onEditProcess: PropTypes.func, + onDeleteProcess: PropTypes.func, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onStorageSelect: PropTypes.func, + componentId: PropTypes.string, + softwareProductId: PropTypes.string, + currentSoftwareProduct: PropTypes.object + }; - static propTypes = { - onAddProcess: PropTypes.func, - onEditProcess: PropTypes.func, - onDeleteProcess: PropTypes.func, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - onStorageSelect: PropTypes.func, - componentId: PropTypes.string, - softwareProductId: PropTypes.string, - currentSoftwareProduct: PropTypes.object - }; - - render() { - return ( - <div className='vsp-processes-page'> - <div className='software-product-view'> - <div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'> - {this.renderEditor()} - <SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/> - </div> - </div> - </div> - ); - } - - renderEditor() { - let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; - return ( - <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> - <Modal.Body className='edit-process-modal'> - <SoftwareProductProcessesEditor - componentId={componentId} - softwareProductId={softwareProductId} - version={version} - isReadOnlyMode={isReadOnlyMode}/> - </Modal.Body> - </Modal> - - ); - } + render() { + return ( + <div className="vsp-processes-page"> + <div className="software-product-view"> + <div className="software-product-landing-view-right-side vsp-components-processes-page flex-column"> + {this.renderEditor()} + <SoftwareProductProcessListView + addButtonTitle={i18n( + 'Add Component Process Details' + )} + {...this.props} + /> + </div> + </div> + </div> + ); + } + renderEditor() { + let { + softwareProductId, + version, + componentId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode + } = this.props; + return ( + <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> + <Modal.Body className="edit-process-modal"> + <SoftwareProductProcessesEditor + componentId={componentId} + softwareProductId={softwareProductId} + version={version} + isReadOnlyMode={isReadOnlyMode} + /> + </Modal.Body> + </Modal> + ); + } } export default SoftwareProductProcessesView; 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 ca27a76a18..8da9b99a33 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 @@ -13,32 +13,57 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; 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'; +import { COMPONENTS_QUESTIONNAIRE } from '../SoftwareProductComponentsConstants.js'; -const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => { - let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents; +const mapStateToProps = ({ + softwareProduct: { softwareProductComponents } +}) => { + let { + componentEditor: { + qdata, + qgenericFieldInfo: qGenericFieldInfo, + dataMap + } + } = softwareProductComponents; - return { - qdata, - qGenericFieldInfo, - dataMap - }; + return { + qdata, + qGenericFieldInfo, + dataMap + }; }; -const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => { - return { - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}), - onSubmit: ({qdata}) => { - return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata}); - } - }; +const mapActionToProps = ( + dispatch, + { softwareProductId, version, componentId } +) => { + return { + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_QUESTIONNAIRE + }), + onSubmit: ({ qdata }) => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { + softwareProductId, + version, + vspComponentId: componentId, + qdata + } + ); + } + }; }; -export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentStorageView); +export default connect(mapStateToProps, mapActionToProps, null, { + withRef: true +})(SoftwareProductComponentStorageView); 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 8538dab6bc..ac7e4a8053 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 @@ -22,171 +22,311 @@ 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 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 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> +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 { + static propTypes = { + componentId: PropTypes.string, + onQDataChanged: PropTypes.func, + onSubmit: PropTypes.func, + isReadOnlyMode: PropTypes.bool + }; - static propTypes = { - componentId: PropTypes.string, - onQDataChanged: PropTypes.func, - onSubmit: PropTypes.func, - isReadOnlyMode: PropTypes.bool - }; + render() { + let { + onQDataChanged, + dataMap, + qGenericFieldInfo, + isReadOnlyMode, + onSubmit, + qdata + } = this.props; - render() { - let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} = this.props; + return ( + <div className="vsp-component-questionnaire-view"> + {qGenericFieldInfo && ( + <Form + ref={form => (this.form = form)} + isValid={true} + formReady={null} + onSubmit={() => onSubmit({ qdata })} + className="component-questionnaire-validation-form" + isReadOnlyMode={isReadOnlyMode} + 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> + ); + } - return( - <div className='vsp-component-questionnaire-view'> - {qGenericFieldInfo && <Form - ref={form => this.form = form } - isValid={true} - formReady={null} - onSubmit={() => onSubmit({qdata})} - className='component-questionnaire-validation-form' - isReadOnlyMode={isReadOnlyMode} - 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(){ - const {qdata, onSubmit} = this.props; - return onSubmit({qdata}); - } + save() { + const { qdata, onSubmit } = this.props; + return onSubmit({ qdata }); + } } export default SoftwareProductComponentStorageView; |