openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx

   1 import React from 'react';
   2 import {connect} from 'react-redux';
   3 import Button from 'react-bootstrap/lib/Button.js';
   4 import Dropzone from 'react-dropzone';
   5 import i18n from 'nfvo-utils/i18n/i18n.js';
   6 import ProgressBar from 'nfvo-components/progressBar/ProgressBar.jsx';
   7 import Modal from 'nfvo-components/modal/Modal.jsx';
   8 import UploadScreenActionHelper from './UploadScreenActionHelper.js';
   9 import Attachments from  './attachments/Attachments.js';
  10
  11 const mapStateToProps = ({uploadScreen}) => {
  12         let {upload} = uploadScreen;
  13         return {uploadScreen: upload};
  14 };
  15
  16
  17 const mapActionsToProps = dispatch => {
  18         return {
  19                 onUpload: (formData) => UploadScreenActionHelper.uploadFile(dispatch, formData),
  20                 openMainScreen: () => UploadScreenActionHelper.openMainScreen(dispatch)
  21         };
  22 };
  23
  24
  25 class UploadScreen extends React.Component {
  26
  27         state = {
  28                 complete: '10',
  29                 showModal: false,
  30                 fileName: '',
  31                 dragging: false,
  32                 files: []
  33         };
  34
  35         interval = '';
  36
  37         render() {
  38                 let {uploadScreen} = this.props;
  39                 let {showAttachments} = uploadScreen;
  40                 return(
  41                         <div className='heat-validation-stand-alone'>
  42                                 {showAttachments ? this.renderTree() : this.renderUploadScreen()}
  43                         </div>
  44                 );
  45         }
  46
  47         renderUploadModal() {
  48                 let {complete, showModal, fileName} = this.state;
  49                 return (
  50                         <Modal show={showModal} animation={true}>
  51                                 <Modal.Header>
  52                                         <Modal.Title>{i18n('Uploading attachments')}</Modal.Title>
  53                                 </Modal.Header>
  54                                 <Modal.Body>
  55                                         <div className='upload-modal-body-content'>
  56                                                 <div>
  57                                                         <span className='title'>{i18n('File:')}</span>
  58                                                         <span className='file-name'>{fileName}</span>
  59                                                 </div>
  60                                                 <ProgressBar now={complete} label={`${complete}%`}/>
  61                                                 <div>{i18n('Upload in progress')}</div>
  62                                         </div>
  63                                         <Modal.Footer>
  64                                                 <Button bsStyle='primary' onClick={() => this.onRunBackground()}>
  65                                                         {i18n('Run in Background')}
  66                                                 </Button>
  67                                                 <Button bsStyle='primary' onClick={() => this.onCancel()}>{i18n('Cancel')}</Button>
  68                                         </Modal.Footer>
  69                                 </Modal.Body>
  70                         </Modal>
  71                 );
  72         }
  73
  74         renderUploadScreen() {
  75                 return(
  76                         <div className='upload-screen'>
  77                                 <div className='row'>
  78                                         <div className='title'>
  79                                                 <h1>HEAT VALIDATION APPLICATION</h1>
  80                                         </div>
  81                                 </div>
  82                                 <div className='row'>
  83                                         <div className='col-md-2 col-md-offset-5'>
  84                                                 <Dropzone
  85                                                         className={`upload-screen-drop-zone ${this.state.dragging ? 'active-dragging' : ''}`}
  86                                                         onDrop={files => this.handleImportSubmit(files)}
  87                                                         onDragEnter={() => this.setState({dragging:true})}
  88                                                         onDragLeave={() => this.setState({dragging:false})}
  89                                                         multiple={false}
  90                                                         disableClick={true}
  91                                                         ref='fileInput'
  92                                                         name='fileInput'
  93                                                         accept='.zip'>
  94                                                         <div
  95                                                                 className='upload-screen-upload-block'>
  96                                                                 <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
  97                                                                 <div className='or-text'>{i18n('or')}</div>
  98                                                                 <div className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
  99                                                                         <span className='primary-btn-text'>{i18n('Select file')}</span>
 100                                                                 </div>
 101                                                         </div>
 102                                                 </Dropzone>
 103                                         </div>
 104                                         {this.renderUploadModal()}
 105                                 </div>
 106                         </div>
 107                 );
 108         }
 109
 110         renderTree() {
 111                 let {openMainScreen} = this.props;
 112                 return(
 113                         <div className='attachments-screen'>
 114                                 <Attachments/>
 115                                 <div className='back-button'>
 116                                         <div className='upload-btn primary-btn' onClick={() => openMainScreen()}>
 117                                                 <span className='primary-btn-text'>{i18n('Back')}</span>
 118                                         </div>
 119                                 </div>
 120                         </div>
 121                 );
 122         }
 123
 124         handleImportSubmit(files) {
 125                 this.setState({
 126                         showModal: true,
 127                         fileName: files[0].name,
 128                         dragging: false,
 129                         complete: '0',
 130                         files
 131                 });
 132
 133
 134                 this.interval = setInterval(() => {
 135                         if (this.state.complete >= 90) {
 136                                 clearInterval(this.interval);
 137                                 this.setState({
 138                                         showModal: false,
 139                                         fileName: ''
 140                                 });
 141                                 this.startUploading(files);
 142                         } else {
 143                                 this.setState({
 144                                         complete: (parseInt(this.state.complete) + 10).toString()
 145                                 });
 146                         }
 147                 }, 20);
 148
 149         }
 150
 151         onRunBackground() {
 152                 let {files} = this.state;
 153                 clearInterval(this.interval);
 154                 this.startUploading(files);
 155                 this.setState({showModal: false, files: []});
 156         }
 157
 158         onCancel() {
 159                 clearInterval(this.interval);
 160                 this.setState({
 161                         showModal: false,
 162                         fileName: '',
 163                         files: []
 164                 });
 165
 166         }
 167
 168         startUploading(files) {
 169                 let {onUpload} = this.props;
 170                 if (!(files && files.length)) {
 171                         return;
 172                 }
 173                 let file = files[0];
 174                 let formData = new FormData();
 175                 formData.append('upload', file);
 176                 this.refs.fileInput.value = '';
 177                 onUpload(formData);
 178         }
 179
 180 }
 181
 182 export default  connect(mapStateToProps, mapActionsToProps)(UploadScreen);