OSiDashboard/Luzzu Dashboard/src/views/Dashboard/DataSetLarge/DataSetLarge.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 {
  Col,
  Container,
  Button,
  ButtonDropdown,
  ButtonGroup,
  Card,
  CardBody,
  CardText,
  CardTitle,
  CardSubtitle,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Media
} from 'reactstrap';
import { withRouter, Link } from 'react-router-dom';
import CircularProgressbar from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
import { getRecentAssessmentQuality } from '../../../services/tripleStoreAPIs/sparql/getRecentAssessmentQuality';
import { read } from '../../../services/tripleStoreAPIs/readFromTripleStore';
import { triggerAssessment } from '../../../services/luzzuFrameWorkAPIs/triggerAssessment';
import { cancelAssessment } from '../../../services/luzzuFrameWorkAPIs/cancelAssessment';
import LoadingSpinner from '../loading';
import LoadingFailed from '../loadingFailed';
import { updateDataset, getStatus } from '../../../services/datasetConfigDetails/datasetConfigDetails';
import { getStatusUpdate } from '../../../services/luzzuFrameWorkAPIs/getStatusUpdate';

const noteReadyToPublish = "rgba(255,0,0,0.6)";
const readyToPublish = "rgba(34,139,34,0.8)";

class DataSetLarge extends Component {

  state = {
    dropdownOpen: false,
    dataSetLastAssessed: "Not Assessed Yet",
    canAssess: true,
    lastAssessmentQuality: 0.0,
    isloading: false,
    loadFailed: false,
    lastAssessmentMetrics: [],
    datasetID:this.props.dataSetDetails.datasetID
  };

  recall = 0;

  toggle = () => {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen,
    });
  }


  componentDidMount() {
    if (this.props.dataSetDetails.lastAssessmentRequestID !== "") {
      getStatusUpdate(this.props.dataSetDetails.lastAssessmentRequestID).then((response) => {

        if (typeof response !== 'undefined') {
          if (response.Status === "INPROGRESS") {
            this.setState(
              {
                canAssess: false
              }, () => { this.statusUpdate(); }
            );
          }
        }
      });
    }
    this.getLatestAssessmentQuality();
  }

  componentWillUnmount() {
    //console.log("Component Will  Unmount");
    //console.log(this.recall);
    clearInterval(this.recall);
    //console.log(this.recall);
  }


  checkWrapperServiceIsReachable =()=>
  {
    let isReachable = false;

  return new Promise((resolve)=>
    {
      this.setState({isloading:true},()=>{
        getStatus().then((response)=>{
          this.setState({isloading:false},()=>{
            if(response.status===200)
            {
              if(response.data.status==="OK")
              {
                isReachable=true;
                resolve(isReachable);
              }
              else
              {
                isReachable=false;
                resolve(isReachable);
              }
            }
            else
            {
              isReachable=false;
              resolve(isReachable);
            }
          });
        });
      });
    }
  );
  }

  handleAssessClick = async () => {
    let wrapperServiceIsReachable=false;
    wrapperServiceIsReachable = await this.checkWrapperServiceIsReachable();

    if(wrapperServiceIsReachable)
    {
      this.setState({ isloading: true }, () => {
        triggerAssessment(this.props.dataSetDetails).then((response) => {
          console.log(this.props.dataSetDetails)
          console.log(response)
          if (response.status === 200) {
            this.setState(prevState => ({
              isloading: false,
              loadFailed: false,
              canAssess: false
            }), () => {
              let knowledgeBaseCache = JSON.parse(sessionStorage.getItem(this.props.dataSetDetails.knowledgeBaseID));
              if(knowledgeBaseCache!==null)
              {
                sessionStorage.removeItem(this.props.dataSetDetails.knowledgeBaseI);
              }

              this.statusUpdate();
              this.setState({ isloading: true }, () => {
                updateDataset({"lastAssessmentRequestID":response.data['Request-ID'], "knowledgeBaseID":""}, this.props.dataSetDetails.datasetID).then((response) => {
                  console.log(response)
                  if (response.status === 200) {
                    this.setState({
                      isloading: false,
                      //loadFailed: false
                    });
                  }
                  else {
                    this.setState({
                      isloading: false,
                      //loadFailed: true
                    });
                  }
                });
              });
            });
            this.props.whenUpdated({...this.props.dataSetDetails, lastAssessmentRequestID:response.data['Request-ID'],knowledgeBaseID:"" });
          }
          else {
            this.setState({
              isloading: false,
              loadFailed: true
            });
          }
        })
      }
      );
    }
    else
    {
      this.setState({
        loadFailed: true
      });
    }


  }

  getLatestAssessmentQuality = () => {
    read(getRecentAssessmentQuality(this.props.dataSetDetails.datasetPLD)).then((response) => {
      let assessmentValues = [];
      let assessmentDate = "Not Assessed Yet";
      let calculateValue = [];
      let actualValue = 0.0;
      if (response) {
        if (response.results.bindings.length > 0) {
            calculateValue = response.results.bindings.map((metricDetails) => {
            let metricValueType = (metricDetails.Value.datatype).split("#")[1]
            let metricValue = 0.0;
            assessmentDate = metricDetails.TimePeriod.value;
            if (metricValueType === "boolean") {
              let metricValueTemp = metricDetails.Value.value
              if (metricValueTemp === "true") {
                metricValue = 1.0;
              }
            }
            else {
              metricValue = Number.parseFloat(metricDetails.Value.value).toFixed(2)
            }

            assessmentValues.push(
              metricDetails
            );

            return (this.props.dataSetDetails.assessmentMetrics.filter((metric) => { if (metric.assess === true & metric.metric === metricDetails.Metric.value) { return true; } return false }).map((metric) => {if (metricValueType === "boolean") { if(metricValue===metric.target){return parseFloat(1.0, 10);}else{return parseFloat(0.0, 10);}}else{return parseFloat(metricValue, 10);}}));
          });
        }
      }
      let filteredArray = calculateValue.flat();
      if (filteredArray.length >0) {

        actualValue = filteredArray.reduce((previous, current) => current += previous) / filteredArray.length;
      }

      this.setState(
        {
          dataSetLastAssessed: (assessmentDate).split(".")[0],
          lastAssessmentQuality: Number(parseFloat(actualValue).toFixed(4)),
          lastAssessmentMetrics: [...assessmentValues]
        }, ()=> {   //console.log(this.state.lastAssessmentQuality);
          this.props.whenUpdated({...this.props.dataSetDetails, dataSetLastAssessed:assessmentDate, lastAssessmentQuality:this.state.lastAssessmentQuality,lastAssessmentMetrics:[...this.state.lastAssessmentMetrics] });}
      );
    });
  }

  statusUpdate = async () => {
    this.recall = setInterval(async () => {
          //console.log("Status Update");
      await getStatusUpdate(this.props.dataSetDetails.lastAssessmentRequestID).then((response) => {
        if (typeof response === 'undefined') {
          this.setState(
            {
              canAssess: true
            });
          clearInterval(this.recall);
        }
        else {
          if (response.Status !== "INPROGRESS") {
            this.setState(
              {
                canAssess: true
              }
            );
            clearInterval(this.recall);
            this.getLatestAssessmentQuality();
          }
        }
      });
    }, 5000);
  }

  toggleAlertModel = () => {
    this.setState({
      loadFailed: false
    });
  }

  cancelAssessment =()=>
  {
      this.setState({ isloading: true }, () => {
        cancelAssessment(this.props.dataSetDetails.lastAssessmentRequestID).then((response)=>{
          //console.log(response);
          if (response.status === 200  ) {
            if(response.data.Status==="CANCELLED")
          {
            this.setState({
              isloading: false,
              loadFailed: false,
              canAssess: true}, ()=>{
                clearInterval(this.recall);
              });
          }
          else {
            this.setState({
              isloading: false,
              loadFailed: true});
          }
          }
            else {
              this.setState({
                isloading: false,
                loadFailed: true});
            }

        });
      });
  }

  openConfig = () => {
    this.props.onConfigClick(this.props.dataSetDetails);
  }


  render() {
    let camelize = (str) => {
      return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
        return index === 0 ? word.toLowerCase() : word.toUpperCase();
      }).replace(/\s+/g, '');
    }

    let percentageValue = 0;
    percentageValue = Number.parseFloat(this.state.lastAssessmentQuality * 100).toFixed(2);
    //console.log(percentageValue);
    let canPublish = "Not Ready to Publish";
    let displayColour = noteReadyToPublish;
    let canPublishClass = "text-left font-weight-bold";

    if (this.state.lastAssessmentQuality >= this.props.dataSetDetails.expectedProgress) {
      canPublish = "Ready to Publish";
      displayColour = readyToPublish;
      canPublishClass = "text-left font-weight-bold";
    }

    return (
      <Col xs="12" sm="6" lg="4">
        <Container style={{ margin: 'auto' }} className=" w-100 h-90 dataSetTiles" >
          <Card className="text-white bg-info text-center w-100 h-90 " >
            <CardBody className="pb-0">
              <ButtonGroup className="float-right">
                <ButtonDropdown id='card1' isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                  <DropdownToggle caret className="p-0" color="transparent">
                    <Media className="icon-settings"></Media>
                  </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem onClick={this.props.onRemoveClick}>Remove</DropdownItem>
                    <DropdownItem onClick={this.openConfig}>Config</DropdownItem>
                    {!this.state.canAssess?<DropdownItem onClick={this.cancelAssessment}>Cancel Assessment</DropdownItem>:null}
                  </DropdownMenu>
                </ButtonDropdown>
              </ButtonGroup>
              <Link to={{ pathname: this.props.location.pathname + "/" + (this.props.dataSetDetails.datasetID) }}>
                <CardTitle className="text-value font-weight-bold text-dark text-left text-truncate">{this.props.dataSetDetails.datasetName}</CardTitle>
                <CardSubtitle className={canPublishClass} style={{ color: displayColour }}>{canPublish}</CardSubtitle>
                <div style={{ width: '150px', margin: 'auto' }}>
                  <CircularProgressbar percentage={percentageValue} text={`${percentageValue}%`} background backgroundPadding={6} styles={{ background: { fill: '#3e98c7' }, text: { fill: displayColour }, path: { stroke: displayColour }, trail: { stroke: 'transparent' } }} />
                </div>
                <br />
              </Link>
              {this.state.canAssess ? <Button block color="secondary" aria-pressed="true" onClick={this.handleAssessClick} >Run Assessment</Button> : <Button disabled block color="secondary" aria-pressed="true" onClick={this.handleAssessClick} >Run Assessment</Button>}
              <CardText className="text-dark">Last Assessed : {this.state.dataSetLastAssessed}</CardText>
            </CardBody>
          </Card>
        </Container>
        {this.state.isloading ? <LoadingSpinner /> : null}
        {this.state.loadFailed ? <LoadingFailed clickHandler={this.toggleAlertModel} /> : null}
      </Col>
    );
  }
}

export default withRouter(DataSetLarge);