openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx

   1 import React, {Component, PropTypes} from 'react';
   2 import Dropzone from 'react-dropzone';
   3 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
   4 import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js';
   5 import Button from 'react-bootstrap/lib/Button.js';
   6 import i18n from 'nfvo-utils/i18n/i18n.js';
   7 import SoftwareProductComponentsMonitoringConstants from './SoftwareProductComponentsMonitoringConstants.js';
   8
   9 class SoftwareProductComponentsMonitoringView extends Component {
  10
  11         static propTypes = {
  12                 isReadOnlyMode: PropTypes.bool,
  13                 trapFilename: PropTypes.string,
  14                 pollFilename: PropTypes.string,
  15                 softwareProductId: PropTypes.string,
  16
  17                 onDropMibFileToUpload: PropTypes.func,
  18                 onDeleteSnmpFile: PropTypes.func
  19         };
  20
  21         state = {
  22                 dragging: false
  23         };
  24
  25
  26         render() {
  27                 return (
  28                         <div className='vsp-component-monitoring'>
  29                                 {this.renderDropzoneWithType(SoftwareProductComponentsMonitoringConstants.SNMP_TRAP)}
  30                                 {this.renderDropzoneWithType(SoftwareProductComponentsMonitoringConstants.SNMP_POLL)}
  31                         </div>
  32                 );
  33         }
  34
  35         renderDropzoneWithType(type) {
  36                 let {isReadOnlyMode, trapFilename, pollFilename} = this.props;
  37                 let fileName;
  38                 if (type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP) {
  39                         fileName = trapFilename;
  40                 }
  41                 else {
  42                         fileName = pollFilename;
  43                 }
  44                 let refAndName = `fileInput${type.toString()}`;
  45                 let typeDisplayName = this.getFileTypeDisplayName(type);
  46                 return (
  47                         <Dropzone
  48                                 className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
  49                                 onDrop={files => this.handleImport(files, {isReadOnlyMode, type, refAndName})}
  50                                 onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
  51                                 onDragLeave={() => this.setState({dragging:false})}
  52                                 multiple={false}
  53                                 disableClick={true}
  54                                 ref={refAndName}
  55                                 name={refAndName}
  56                                 accept='.zip'
  57                                 disabled>
  58                                 <div className='draggable-wrapper'>
  59                                         <div className='section-title'>{typeDisplayName}</div>
  60                                         {fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)}
  61                                 </div>
  62                         </Dropzone>
  63                 );
  64         }
  65
  66         renderUploadButton(refAndName) {
  67                 let {isReadOnlyMode} = this.props;
  68                 return (
  69                         <div
  70                                 className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}>
  71                                 <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
  72                                 <div className='or-text'>{i18n('or')}</div>
  73                                 <div className='upload-btn primary-btn' onClick={() => this.refs[refAndName].open()}>
  74                                         <span className='primary-btn-text'>{i18n('Select file')}</span>
  75                                 </div>
  76                         </div>
  77                 );
  78         }
  79
  80         renderUploadedFileName(filename, type) {
  81                 return (
  82                         <ButtonToolbar>
  83                                 <ButtonGroup>
  84                                         <Button disabled>{filename}</Button>
  85                                         <Button className='delete-button' onClick={()=>this.props.onDeleteSnmpFile(type)}>X</Button>
  86                                 </ButtonGroup>
  87                         </ButtonToolbar>
  88                 );
  89         }
  90
  91
  92         handleOnDragEnter(isReadOnlyMode) {
  93                 if (!isReadOnlyMode) {
  94                         this.setState({dragging: true});
  95                 }
  96         }
  97
  98         handleImport(files, {isReadOnlyMode, type, refAndName}) {
  99                 if (isReadOnlyMode) {
 100                         return;
 101                 }
 102
 103                 this.setState({dragging: false});
 104                 let file = files[0];
 105                 let formData = new FormData();
 106                 formData.append('upload', file);
 107                 this.refs[refAndName].value = '';
 108                 this.props.onDropMibFileToUpload(formData, type);
 109         }
 110
 111         getFileTypeDisplayName(type) {
 112                 return type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP ? 'SNMP Trap' : 'SNMP Poll';
 113         }
 114
 115 }
 116
 117 export default SoftwareProductComponentsMonitoringView;