2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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
13 * or implied. See the License for the specific language governing
14 * permissions and limitations under the License.
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 {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
25 class SoftwareProductComponentsMonitoringView extends Component {
28 isReadOnlyMode: PropTypes.bool,
29 filenames: PropTypes.object,
30 softwareProductId: PropTypes.string,
32 onDropMibFileToUpload: PropTypes.func,
33 onDeleteSnmpFile: PropTypes.func
45 <div className='vsp-component-monitoring'>
46 {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
47 {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
48 {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
53 renderDropzoneWithType(type) {
54 let {isReadOnlyMode, filenames} = this.props;
55 let fileByType = type2Name[type];
56 let fileName = (filenames) ? filenames[fileByType] : undefined;
57 let refAndName = `fileInput${type.toString()}`;
58 let typeDisplayName = type2Title[type];
61 className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
62 onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
63 onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
64 onDragLeave={() => this.setState({dragging:false})}
71 <div className='draggable-wrapper'>
72 <div className='section-title'>{typeDisplayName}</div>
73 {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
79 renderUploadButton(refAndName) {
80 let {isReadOnlyMode} = this.props;
82 <DraggableUploadFileBox
83 dataTestId={`monitoring-upload-${refAndName}`}
84 className='software-product-landing-view-top-block-col-upl'
85 isReadOnlyMode={isReadOnlyMode}
86 onClick={() => this.refs[refAndName].open()}/>
90 renderUploadedFileName(filename, type, isReadOnlyMode) {
92 <div className='monitoring-file'>
102 data-test-id={`monitoring-delete-${type}`}
103 disabled={isReadOnlyMode}
104 onClick={()=>this.props.onDeleteFile(type)}
112 handleOnDragEnter(isReadOnlyMode) {
113 if (!isReadOnlyMode) {
114 this.setState({dragging: true});
118 handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) {
119 if (isReadOnlyMode) {
122 if (files.length > 0) {
123 this.setState({dragging: false});
125 let formData = new FormData();
126 formData.append('upload', file);
127 this.refs[refAndName].value = '';
128 this.props.onDropMibFileToUpload(formData, type);
129 } else if (rejectedFiles.length > 0) {
130 this.setState({dragging: false});
131 this.props.onFileUploadError();
136 export default SoftwareProductComponentsMonitoringView;