summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx182
1 files changed, 182 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
new file mode 100644
index 0000000000..0bb496fc51
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import Button from 'react-bootstrap/lib/Button.js';
+import Dropzone from 'react-dropzone';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import ProgressBar from 'nfvo-components/progressBar/ProgressBar.jsx';
+import Modal from 'nfvo-components/modal/Modal.jsx';
+import UploadScreenActionHelper from './UploadScreenActionHelper.js';
+import Attachments from './attachments/Attachments.js';
+
+const mapStateToProps = ({uploadScreen}) => {
+ let {upload} = uploadScreen;
+ return {uploadScreen: upload};
+};
+
+
+const mapActionsToProps = dispatch => {
+ return {
+ onUpload: (formData) => UploadScreenActionHelper.uploadFile(dispatch, formData),
+ openMainScreen: () => UploadScreenActionHelper.openMainScreen(dispatch)
+ };
+};
+
+
+class UploadScreen extends React.Component {
+
+ state = {
+ complete: '10',
+ showModal: false,
+ fileName: '',
+ dragging: false,
+ files: []
+ };
+
+ interval = '';
+
+ render() {
+ let {uploadScreen} = this.props;
+ let {showAttachments} = uploadScreen;
+ return(
+ <div className='heat-validation-stand-alone'>
+ {showAttachments ? this.renderTree() : this.renderUploadScreen()}
+ </div>
+ );
+ }
+
+ renderUploadModal() {
+ let {complete, showModal, fileName} = this.state;
+ return (
+ <Modal show={showModal} animation={true}>
+ <Modal.Header>
+ <Modal.Title>{i18n('Uploading attachments')}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <div className='upload-modal-body-content'>
+ <div>
+ <span className='title'>{i18n('File:')}</span>
+ <span className='file-name'>{fileName}</span>
+ </div>
+ <ProgressBar now={complete} label={`${complete}%`}/>
+ <div>{i18n('Upload in progress')}</div>
+ </div>
+ <Modal.Footer>
+ <Button bsStyle='primary' onClick={() => this.onRunBackground()}>
+ {i18n('Run in Background')}
+ </Button>
+ <Button bsStyle='primary' onClick={() => this.onCancel()}>{i18n('Cancel')}</Button>
+ </Modal.Footer>
+ </Modal.Body>
+ </Modal>
+ );
+ }
+
+ renderUploadScreen() {
+ return(
+ <div className='upload-screen'>
+ <div className='row'>
+ <div className='title'>
+ <h1>HEAT VALIDATION APPLICATION</h1>
+ </div>
+ </div>
+ <div className='row'>
+ <div className='col-md-2 col-md-offset-5'>
+ <Dropzone
+ className={`upload-screen-drop-zone ${this.state.dragging ? 'active-dragging' : ''}`}
+ onDrop={files => this.handleImportSubmit(files)}
+ onDragEnter={() => this.setState({dragging:true})}
+ onDragLeave={() => this.setState({dragging:false})}
+ multiple={false}
+ disableClick={true}
+ ref='fileInput'
+ name='fileInput'
+ accept='.zip'>
+ <div
+ className='upload-screen-upload-block'>
+ <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
+ <div className='or-text'>{i18n('or')}</div>
+ <div className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
+ <span className='primary-btn-text'>{i18n('Select file')}</span>
+ </div>
+ </div>
+ </Dropzone>
+ </div>
+ {this.renderUploadModal()}
+ </div>
+ </div>
+ );
+ }
+
+ renderTree() {
+ let {openMainScreen} = this.props;
+ return(
+ <div className='attachments-screen'>
+ <Attachments/>
+ <div className='back-button'>
+ <div className='upload-btn primary-btn' onClick={() => openMainScreen()}>
+ <span className='primary-btn-text'>{i18n('Back')}</span>
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ handleImportSubmit(files) {
+ this.setState({
+ showModal: true,
+ fileName: files[0].name,
+ dragging: false,
+ complete: '0',
+ files
+ });
+
+
+ this.interval = setInterval(() => {
+ if (this.state.complete >= 90) {
+ clearInterval(this.interval);
+ this.setState({
+ showModal: false,
+ fileName: ''
+ });
+ this.startUploading(files);
+ } else {
+ this.setState({
+ complete: (parseInt(this.state.complete) + 10).toString()
+ });
+ }
+ }, 20);
+
+ }
+
+ onRunBackground() {
+ let {files} = this.state;
+ clearInterval(this.interval);
+ this.startUploading(files);
+ this.setState({showModal: false, files: []});
+ }
+
+ onCancel() {
+ clearInterval(this.interval);
+ this.setState({
+ showModal: false,
+ fileName: '',
+ files: []
+ });
+
+ }
+
+ startUploading(files) {
+ let {onUpload} = this.props;
+ if (!(files && files.length)) {
+ return;
+ }
+ let file = files[0];
+ let formData = new FormData();
+ formData.append('upload', file);
+ this.refs.fileInput.value = '';
+ onUpload(formData);
+ }
+
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(UploadScreen);