gerrit.onap Code Review - sdc.git/blob

   1 /*
   2  * Copyright © 2016-2017 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React, { Component } from 'react';
  17 import PropTypes from 'prop-types';
  18 import Dropzone from 'react-dropzone';
  19 import Button from 'sdc-ui/lib/react/Button.js';
  20 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
  21 import {
  22     fileTypes,
  23     type2Title,
  24     type2Name
  25 } from './SoftwareProductComponentsMonitoringConstants.js';
  26
  27 class SoftwareProductComponentsMonitoringView extends Component {
  28     static propTypes = {
  29         isReadOnlyMode: PropTypes.bool,
  30         filenames: PropTypes.object,
  31         softwareProductId: PropTypes.string,
  32
  33         onDropMibFileToUpload: PropTypes.func,
  34         onDeleteSnmpFile: PropTypes.func
  35     };
  36
  37     state = {
  38         dragging: false
  39     };
  40
  41     render() {
  42         return (
  43             <div className="vsp-component-monitoring">
  44                 {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
  45                 {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
  46                 {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
  47             </div>
  48         );
  49     }
  50
  51     renderDropzoneWithType(type) {
  52         let { isReadOnlyMode, filenames } = this.props;
  53         let fileByType = type2Name[type];
  54         let fileName = filenames ? filenames[fileByType] : undefined;
  55         let refAndName = `fileInput${type.toString()}`;
  56         let typeDisplayName = type2Title[type];
  57         return (
  58             <Dropzone
  59                 className={`dropzone ${
  60                     this.state.dragging ? 'active-dragging' : ''
  61                 }`}
  62                 onDrop={(acceptedFiles, rejectedFiles) =>
  63                     this.handleImport(acceptedFiles, rejectedFiles, {
  64                         isReadOnlyMode,
  65                         type,
  66                         refAndName
  67                     })
  68                 }
  69                 onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
  70                 onDragLeave={() => this.setState({ dragging: false })}
  71                 multiple={false}
  72                 disableClick={true}
  73                 ref={refAndName}
  74                 name={refAndName}
  75                 accept=".zip">
  76                 <div className="draggable-wrapper">
  77                     <div className="section-title">{typeDisplayName}</div>
  78                     {fileName
  79                         ? this.renderUploadedFileName(
  80                               fileName,
  81                               type,
  82                               isReadOnlyMode
  83                           )
  84                         : this.renderUploadButton(refAndName)}
  85                 </div>
  86             </Dropzone>
  87         );
  88     }
  89
  90     renderUploadButton(refAndName) {
  91         let { isReadOnlyMode } = this.props;
  92         return (
  93             <DraggableUploadFileBox
  94                 dataTestId={`monitoring-upload-${refAndName}`}
  95                 className="software-product-landing-view-top-block-col-upl"
  96                 isReadOnlyMode={isReadOnlyMode}
  97                 onClick={() => this.refs[refAndName].open()}
  98             />
  99         );
 100     }
 101
 102     renderUploadedFileName(filename, type, isReadOnlyMode) {
 103         return (
 104             <div className="monitoring-file">
 105                 <Button color="white" disabled={true} className="filename">
 106                     {filename}
 107                 </Button>
 108
 109                 <Button
 110                     color="gray"
 111                     data-test-id={`monitoring-delete-${type}`}
 112                     disabled={isReadOnlyMode}
 113                     onClick={() => this.props.onDeleteFile(type)}
 114                     iconName="close"
 115                     className="delete"
 116                 />
 117             </div>
 118         );
 119     }
 120
 121     handleOnDragEnter(isReadOnlyMode) {
 122         if (!isReadOnlyMode) {
 123             this.setState({ dragging: true });
 124         }
 125     }
 126
 127     handleImport(files, rejectedFiles, { isReadOnlyMode, type, refAndName }) {
 128         if (isReadOnlyMode) {
 129             return;
 130         }
 131         if (files.length > 0) {
 132             this.setState({ dragging: false });
 133             let file = files[0];
 134             let formData = new FormData();
 135             formData.append('upload', file);
 136             this.refs[refAndName].value = '';
 137             this.props.onDropMibFileToUpload(formData, type);
 138         } else if (rejectedFiles.length > 0) {
 139             this.setState({ dragging: false });
 140             this.props.onFileUploadError();
 141         }
 142     }
 143 }
 144
 145 export default SoftwareProductComponentsMonitoringView;