diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring')
5 files changed, 266 insertions, 224 deletions
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; |