OSiDashboard/Luzzu Dashboard/src/views/Dashboard/ConnectDataSet/DatasetConnectConfigModelWindow.js

//© 2019 Dublin City University, Trinity College Dublin. All rights reserved. This material may not be reproduced, displayed, modified or distributed without the express prior written permission of the copyright holder.
import React, { Component } from 'react';
import {
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Button,
    FormGroup,
    Form,
    Label,
    Input,
    FormFeedback,
    Progress
} from 'reactstrap';

import axios from 'axios';
import properties from '../../../config/dashboardProperties';
import FileTooLarge from './fileLargeError';

const host = properties.luzzuFramework.host;
const port = properties.luzzuFramework.port;
const supportedFileFormats = properties.supportedFileFormats;

const initialState = {
  datasetName: "",
  isSparqlEndPoint: false,
  sparqlEndPointURL: "",
  datasetPLD: "",
  fileToUpload: null,
  historyFileToUpload: null,
  datasetNameValid: true,
  datasetNameDisabled : false,
  datasetPLDValid: true,
  datasetPLDDisabled : false,
  datasetPLDMandatoryValid: true,
  datasetPLDPrefixValid: true,
  sparqlEndPointURLValid: true,
  fileUploadValid: true,
  fileUploadMandatory: true,
  fileFormatValid: true,
  fileUploadProgress: 0,
  showFileUploadProgress: false,
  fileUploadCompleted : false,
  historyFileUploadCompleted : false,
  fileUploadSuccessfull: false,
  historyFileUploadSuccessfull: false,
  fileUploadedName : "",
  fileUploadedPath : "",
  dimensionsToAssess : [],
  assessmentDetails : [],
  prevAssessmentDetails : [],
  datasetID : "",
  displayUseExistingFileCheckBox : false,
  useExistingFile : false,
  qualityMetrics : [],
  lastAssessmentRequestID:"",
  fileToolarge: false
}

class DatasetConnectConfigModelWindow extends Component {

    state = {

    };

    componentDidMount() {
      //console.log(supportedFileFormats);
        this.setState(
          {
            ...initialState,
            ...this.props.currentState
          }
        );

    }

    triggerSubmitValidation = () => {

        let datasetNameValid = false;
        let datasetPLDValid = false;
        let datasetPLDMandatoryValid = false;
        let datasetPLDPrefixValid = false;
        let sparqlEndPointURLValid = false;
        let fileUploadValid = false;
        let fileUploadMandatory = false;
        let fileFormatValid = false;
        let fileToUpload = null;
        let fileUploadCompleted = false;
        //Dataset Name is mandatory
        if (this.state.datasetName === "") {
            datasetNameValid = false;
        }
        else {
            datasetNameValid = true;
        }

        //Dataset PLD is mandatory
        if (this.state.datasetPLD === "") {
            datasetPLDValid = false;
            datasetPLDMandatoryValid = false;
            datasetPLDPrefixValid = true;

        }
        else {
            if (this.state.datasetPLD.startsWith("uri:") || this.state.datasetPLD.startsWith("http://") || this.state.datasetPLD.startsWith("https://")) {
                datasetPLDValid = true;
                datasetPLDMandatoryValid = true;
                datasetPLDPrefixValid = true;

            }
            else {

                datasetPLDValid = false;
                datasetPLDMandatoryValid = true;
                datasetPLDPrefixValid = false;

            }

        }
        //SPARQL End-Point is mandatory if Is SPARQL is selected as Yes
        if (this.state.isSparqlEndPoint && this.state.sparqlEndPointURL === "") {
            sparqlEndPointURLValid = false;

        }
        else {
            sparqlEndPointURLValid = true;
        }
        //File Upload
        if (!this.state.isSparqlEndPoint && this.state.fileToUpload === null) {

            fileUploadValid = false;
            fileUploadMandatory = false;
            fileFormatValid = true;

        }
        else {
            if (this.state.isSparqlEndPoint) {
                //No need to validate file if it is a SPARQL End-Point. So set state of fileUploadMandatory and fileFormatValid TRUE so that no validation is called.

                fileToUpload = null;
                fileUploadValid = true;
                fileUploadMandatory = true;
                fileFormatValid = true;

            }
            else {
                fileToUpload = this.state.fileToUpload;
                let fileName = this.state.fileToUpload.name;
                let period = fileName.lastIndexOf(".");
                let fileExtension = fileName.substring(period + 1);
                let fileFormatSupported = false;
                fileFormatSupported=supportedFileFormats.findIndex((fileFormats)=>{return fileFormats.extension===fileExtension});
                if (fileFormatSupported>=0) {
                    fileUploadValid = true;
                    fileUploadMandatory = true;
                    fileFormatValid = true;

                }
                else {

                    fileUploadValid = false;
                    fileUploadMandatory = true;
                    fileFormatValid = false;

                }
            }
        }

        if(this.state.useExistingFile)
        {
          fileUploadMandatory=true;
        }
        if (this.state.fileUploadCompleted && !this.state.fileUploadSuccessfull) {
            fileUploadCompleted = false;
        }
        else if (this.state.fileUploadCompleted && this.state.fileUploadSuccessfull) {
            fileUploadCompleted = true;
        }

        this.setState(
            {
                datasetNameValid: datasetNameValid,
                datasetPLDValid: datasetPLDValid,
                datasetPLDMandatoryValid: datasetPLDMandatoryValid,
                datasetPLDPrefixValid: datasetPLDPrefixValid,
                sparqlEndPointURLValid: sparqlEndPointURLValid,
                fileUploadValid: fileUploadValid,
                fileUploadMandatory: fileUploadMandatory,
                fileFormatValid: fileFormatValid,
                fileToUpload: fileToUpload,
                fileUploadCompleted: fileUploadCompleted

            }, () => { this.triggerSubmitAction(); }
        );


    }

    triggerSubmitAction = () => {
      if(this.state.datasetNameValid && this.state.datasetPLDValid && !this.state.isSparqlEndPoint && this.state.useExistingFile){
        this.props.onNext(this.state);
      }
      else {
        if (this.state.datasetNameValid && this.state.datasetPLDValid && !this.state.isSparqlEndPoint && this.state.fileUploadValid) {
            if (!this.state.fileUploadCompleted && !this.state.fileUploadSuccessfull) {


                if(this.state.fileToUpload.size<=52428800)
                {
                  this.fileUploadHandler();
                }
                else {
                  this.setState({
                    fileToolarge:true
                  });
                }

            }
            else {
                  this.props.onNext(this.state);
            }
        }
        else if (this.state.datasetNameValid && this.state.datasetPLDValid && this.state.isSparqlEndPoint && this.state.sparqlEndPointURLValid) {
              this.props.onNext(this.state);
        }
      }


    }

    fileUploadHandler = () => {
        const formData = new FormData();
        formData.append('file', this.state.fileToUpload, this.state.fileToUpload.name);
        axios.post('http://'+host+':'+port+'/Luzzu/v4/import', formData, {
            onUploadProgress: (progressEvent) => {
                this.setState({
                    showFileUploadProgress: true,
                    fileUploadProgress: Math.round((progressEvent.loaded / progressEvent.total) * 100),
                });
            }, headers: {'Accept': 'application/json','Content-Type':'multipart/form-data'}
        })
            .then((res) => {
                if (res.status === 200) {
                    this.setState({

                        fileUploadCompleted: true,
                        historyFileUploadCompleted : true,
                        fileUploadSuccessfull: true,
                        historyFileUploadSuccessfull: true,
                        fileUploadedName: res.data.fileName,
                        fileUploadedPath: res.data.filePath,
                        historyFileToUpload : this.state.fileToUpload,
                        displayUseExistingFileCheckBox : false
                    });
                    const sleep = (milliseconds) => {
                      return new Promise(resolve => setTimeout(resolve, milliseconds))
                    }
                    sleep(1000).then(() => {
                      this.props.onNext(this.state);
                    });

                }
                else {
                    this.setState({
                        showFileUploadProgress: false,
                        fileUploadProgress: 0,
                        fileUploadCompleted: true,
                        fileUploadSuccessfull: false,
                        fileUploadedName: "",
                        fileUploadedPath: ""
                    });
                }

            })
            .catch((err) => {
                if (!err.response) {
                    // network error
                    //console.log('Error: Network Error. Unable to connect to Server');
                } else {
                    //console.log(err.response.data.message);
                }
                this.setState({
                    showFileUploadProgress: false,
                    fileUploadProgress: 0,
                    fileUploadCompleted: true,
                    fileUploadSuccessfull: false,
                    fileUploadedName: "",
                    fileUploadedPath: ""
                });

            });
    }


    datasetNameChange = (event) => {
      let regExpr = /[^a-zA-Z0-9-_ ]/g;
        this.setState(
            { datasetName: event.target.value.replace(regExpr, "") }
        );
    }

    sparqlEndPointURLChange = (event) => {
        this.setState(
            { sparqlEndPointURL: event.target.value }
        );
    }

    useExistingFileChange = (event) => {
      if(this.state.useExistingFile)
      {
        this.setState({
          useExistingFile : false,
          fileToUpload: this.state.historyFileToUpload,
          fileUploadSuccessfull:this.state.historyFileUploadSuccessfull,
          fileUploadCompleted:this.state.historyFileUploadCompleted
        });
      }
      else {
        this.setState({
          useExistingFile : true,
          fileToUpload: null
        });
      }

    }

    isSparqlEndPointChange = (event) => {
        let isSparqlEndPoint = false;
        if (event.target.checked) {
            if (event.target.value === "true") {
                if (document.getElementById("uploadFileSelector")) {
                    document.getElementById("uploadFileSelector").value = "";
                }

                isSparqlEndPoint = true;
                this.setState(
                    {
                        isSparqlEndPoint: isSparqlEndPoint,
                        fileToUpload: null,
                        fileUploadValid: true,
                        fileUploadMandatory: true,
                        fileFormatValid: true
                    }
                );
            }
            else {
                this.setState(
                    {
                        isSparqlEndPoint: isSparqlEndPoint,
                        sparqlEndPointURL: "",
                        sparqlEndPointURLValid: true,
                        fileToUpload : this.state.historyFileToUpload,
                        fileUploadSuccessfull:this.state.historyFileUploadSuccessfull,
                        fileUploadCompleted:this.state.historyFileUploadCompleted
                    }
                );
            }
        }
    }

    is1SpatialChange = (event) => {
        let is1Spatial = false;
        if (event.target.checked) {
            if (event.target.value === "true") {
                if (document.getElementById("uploadFileSelector")) {
                    document.getElementById("uploadFileSelector").value = "";
                }

                is1Spatial = true;
                this.setState(
                    {
                        is1Spatial: is1Spatial
                    }
                );
            }
            else {
                this.setState(
                    {
                        is1Spatial: is1Spatial
                    }
                );
            }
        }
    }

    datasetPLDChange = (event) => {
        this.setState(
            { datasetPLD: event.target.value }
        );
    }

    closeFileLargeError = () =>{
      this.setState({
        fileToolarge:false
      });
    }

    fileSelectionOnChange = (event) => {
        if (event.target.files.length > 0) {
            this.setState(
                {
                    fileToUpload: event.target.files[0],
                    fileUploadValid: true,
                    fileUploadMandatory: true,
                    fileFormatValid: true,
                    fileUploadCompleted : false,
                    fileUploadSuccessfull : false
                }
            );

        } else {
            this.setState(
                {
                    fileToUpload: this.state.historyFileToUpload,
                    fileUploadValid: true,
                    fileUploadMandatory: true,
                    fileFormatValid: true,
                    fileUploadSuccessfull:this.state.historyFileUploadSuccessfull,
                    fileUploadCompleted:this.state.historyFileUploadCompleted
                }
            );
        }

        if (this.state.fileUploadCompleted && !this.state.fileUploadSuccessfull) {
            this.setState(
                {

                    fileUploadCompleted: false
                }
            );
        }
    }


    render() {
      //console.log(this.state);
      let formats = supportedFileFormats.reduce((prev,next)=>{
        if(prev.fileFormat!==undefined)
        {
          return (prev.fileFormat + " " + next.fileFormat);
        }
        else
        {
          return (prev + " " + next.fileFormat);
        }
       });
        return (

            <Modal isOpen={true} className="modal-dialog-centered">
                <ModalHeader style={{ margin: 'auto' }}>Connect a Dataset</ModalHeader>
                <ModalBody>
                    <Form>
                        <FormGroup>
                            <Label >Dataset Name:</Label>
                            {this.state.datasetNameValid ? <Input type="text" name="datasetName" id="datasetName" placeholder="Type dataset name here" onChange={this.datasetNameChange} value={this.state.datasetName} disabled={this.state.datasetNameDisabled}/> : <Input invalid type="text" name="datasetName" id="datasetName" placeholder="Type dataset name here" onChange={this.datasetNameChange} value={this.state.datasetName} />}
                            <FormFeedback invalid>Dataset Name is Mandatory!!!</FormFeedback>
                        </FormGroup>
                        <FormGroup tag="onespatial">
                            <Label>Is it a 1Spatial dataset?</Label>
                            <FormGroup check>
                                <Label check>
                                    <Input type="radio" name="is1Spatial" value="true" checked={this.state.is1Spatial} onChange={this.is1SpatialChange} />{' '}
                                    Yes
                                    </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="radio" name="is1Spatial" value="false" checked={!this.state.is1Spatial} onChange={this.is1SpatialChange} />{' '}
                                    No
                                </Label>
                            </FormGroup>
                        </FormGroup>
                        <FormGroup tag="fieldset">
                            <Label>Is it a SPARQL end-point?</Label>
                            <FormGroup check>
                                <Label check>
                                    <Input type="radio" name="sparqlendpoint" value="true" checked={this.state.isSparqlEndPoint} onChange={this.isSparqlEndPointChange} />{' '}
                                    Yes
                                    </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="radio" name="sparqlendpoint" value="false" checked={!this.state.isSparqlEndPoint} onChange={this.isSparqlEndPointChange} />{' '}
                                    No
                                </Label>
                            </FormGroup>
                        </FormGroup>
                        <FormGroup>
                            <Label >SPARQL End-Point:</Label>
                            {this.state.sparqlEndPointURLValid ? <Input type="text" name="sparqlEndPoint" id="sparqlEndPoint" placeholder="Type SPARQL URL here" disabled={!this.state.isSparqlEndPoint} onChange={this.sparqlEndPointURLChange} value={this.state.sparqlEndPointURL} /> : <Input invalid type="text" name="sparqlEndPoint" id="sparqlEndPoint" placeholder="Type SPARQL URL here" disabled={!this.state.isSparqlEndPoint} onChange={this.sparqlEndPointURLChange} value={this.state.sparqlEndPointURL} />}
                            {this.state.isSparqlEndPoint ? <FormFeedback invalid>SPARQL End-Point is Mandatory!!!</FormFeedback> : null}
                        </FormGroup>
                        <FormGroup>
                            <Label >Dataset PLD:</Label>
                            {this.state.datasetPLDValid ? <Input type="text" name="datasetPLD" id="datasetPLD" placeholder="Type Dataset PLD here" onChange={this.datasetPLDChange} value={this.state.datasetPLD} disabled={this.state.datasetPLDDisabled}/> : <Input invalid type="text" name="datasetPLD" id="datasetPLD" placeholder="Type Dataset PLD here" onChange={this.datasetPLDChange} value={this.state.datasetPLD} />}
                            {this.state.datasetPLDMandatoryValid ? null : <FormFeedback invalid>Dataset PLD is Mandatory!!!</FormFeedback>}
                            {this.state.datasetPLDPrefixValid ? null : <FormFeedback invalid>Dataset PLD should be prefixed with either 'uri:' or 'http://' or 'https://'</FormFeedback>}
                        </FormGroup>

                        <FormGroup>
                            <Label >Upload Assessment File:</Label>
                            {this.state.displayUseExistingFileCheckBox & !this.state.isSparqlEndPoint ? <div><FormGroup check><Label check><Input id="useexistingfile" type="checkbox" name="useexistingfile" checked={this.state.useExistingFile} onClick={this.useExistingFileChange} /> Use existing dump file</Label></FormGroup><br/></div>: null}
                            {this.state.fileUploadValid ? <Input id="uploadFileSelector" type="file" disabled={this.state.isSparqlEndPoint | this.state.useExistingFile} onChange={this.fileSelectionOnChange} /> : <Input invalid id="uploadFileSelector" type="file" disabled={this.state.isSparqlEndPoint | this.state.useExistingFile} onChange={this.fileSelectionOnChange} />}
                            {this.state.fileUploadMandatory ? null : <FormFeedback invalid>Please select a file!!!</FormFeedback>}
                            {this.state.fileFormatValid ? null : <FormFeedback invalid>Only following file formats are allowed.<div>({formats})</div></FormFeedback>}
                        </FormGroup>
                        <FormGroup>
                            {this.state.showFileUploadProgress ? <Progress value={this.state.fileUploadProgress}><small class="justify-content-center d-flex position-absolute w-100"><font size="2" color="black">{this.state.fileUploadProgress}%</font></small></Progress> : null}
                            {this.state.fileUploadCompleted && !this.state.fileUploadSuccessfull ? <div className="text-danger">File Upload Failed. Server did not respond!!!</div> : null}
                            {this.state.fileUploadCompleted && this.state.fileUploadSuccessfull ? <div className="text-success">File Upload Successfull.</div> : null}
                        </FormGroup>
                    </Form>
                </ModalBody>
                <ModalFooter>
                    <Button color="secondary" onClick={this.props.onClose}>Discard</Button>
                    <Button color="primary" onClick={this.triggerSubmitValidation}>Next</Button>{' '}
                </ModalFooter>
                {this.state.fileToolarge?<FileTooLarge clickHandler={this.closeFileLargeError}/>:null}
            </Modal>
        );
    }
}


export default DatasetConnectConfigModelWindow;