<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - src/components/Dataset/DatasetTable.js</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link href="../../assets/css/vendor/morris.css" rel="stylesheet">
  <link href="../../assets/css/vendor/bootstrap.css" rel="stylesheet">
  <link href="../../assets/css/vendor/font-awesome.css" rel="stylesheet">
  <link href="../../assets/css/vendor/codemirror.css" rel="stylesheet">
  <link href="../../assets/css/plato.css" rel="stylesheet">
  <link href="../../assets/css/plato-file.css" rel="stylesheet">

</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="http://github.com/es-analysis/plato">Plato on Github</a>
    <ul class="nav navbar-nav">
      <li>
        <a href="../../index.html">Report Home</a>
      </li>
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>src/components/Dataset/DatasetTable.js</h1>
  </div>
</div>

<div class="container aggregate-stats">
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Maintainability <a href="http://blogs.msdn.com/b/codeanalysis/archive/2007/11/20/maintainability-index-range-and-meaning.aspx"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="A value between 0 and 100 that represents the relative ease of maintaining the code. A high value means better maintainability." data-original-title="Maintainability Index"  data-container="body"></i></a></h2>
      <p class="stat">67.76</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Lines of code <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h2>
      <p class="stat">389</p>
    </div>
  </div>
  <div class="row historical">
    <div class="col-md-6">
      <p id="chart_historical_maint" class="chart"></p>
    </div>
    <div class="col-md-6">
      <p id="chart_historical_sloc" class="chart"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Difficulty  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="The difficulty measure is related to the difficulty of the program to write or understand." data-original-title="Difficulty" data-container="body"></i></a></h2>
      <p class="stat">40.40</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Estimated Errors  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Halstead's delivered bugs is an estimate for the number of errors in the implementation." data-original-title="Delivered Bugs" data-container="body"></i></a></h2>
      <p class="stat">3.04</p>
    </div>
  </div>
</div>

<div class="container charts">
  <div class="row">
    <h2 class="header">Function weight</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3 class="chart-header">By Complexity <a href="http://en.wikipedia.org/wiki/Cyclomatic_complexity"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="This metric counts the number of distinct paths through a block of code. Lower values are better." data-original-title="Cyclomatic Complexity" data-container="body"></i></a></h3>
      <div id="fn-by-complexity" class="stat"></div>
    </div>
    <div class="col-md-6">
      <h3 class="chart-header">By SLOC  <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h3>
      <div id="fn-by-sloc" class="stat"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <textarea id="file-source" class="col-md-12">import React from &#039;react&#039;;
import PropTypes from &#039;prop-types&#039;;
import { Button, Glyphicon } from &#039;react-bootstrap&#039;;
import &#039;./DatasetTable.css&#039;;
import axios from &quot;axios&quot;;
import Moment from &#039;react-moment&#039;;
import TECHNIQUES from &#039;../../config/techniques/techniques.js&#039;;
import Loading from &#039;../../components/Loading.js&#039;;
import { BootstrapTable, TableHeaderColumn } from &#039;react-bootstrap-table&#039;;
import { getDownloadURLByDatasetId } from &quot;../../api/icat/icatPlus.js&quot;
import { stringifyBytesSize } from &quot;../Helpers.js&quot;
import { VOLUME, FILE_COUNT } from &#039;../../constants/ParameterTypes.js&#039;;
import ResponsiveTable from &quot;../Table/ResponsiveTable.js&quot;;
import DatasetWidget from &quot;./DatasetWidget.js&quot;;
import { getDatasetStatus } from &#039;../../api/icat/icatPlus.js&#039;;
import { getDatasetParameterByName } from &#039;../../helpers/DatasetHelper.js&#039;;
import _ from &#039;lodash&#039;;

class DatasetTable extends React.Component {
    constructor(props) {
        super(props);
        this.techniques = TECHNIQUES;
    }


   dateFormatter(cell, row) {
        if (cell != null) {
            return &lt;DateWidget date={cell}&gt;&lt;/DateWidget&gt;;
        }
    }

   /**
   * This looks into the parameters of the dataset
   */
  getParameter(dataset, parameterName) {
    var parameter = _.find(dataset.parameters, function (o) { return o.name === parameterName });
    if (parameter) {
      if (parameter.value) {
        return parameter.value;
      }
    }
  }

   
  fileCountFormatter(cell, dataset, rowIndex, extraData) {    
    return getDatasetParameterByName(dataset, FILE_COUNT);
  }

  volumeFormatter(cell, dataset, rowIndex, extraData) {
    return stringifyBytesSize(getDatasetParameterByName(dataset, VOLUME));
  }

  downloadFormatter(cell, dataset, rowIndex,  extraData){  
     let dataArchived =  extraData.getParameter(dataset, &quot;__dataArchived&quot;);   
     if (dataArchived == &quot;False&quot;){
        return &quot;N/A&quot;;
     }
     return &lt;DownloadButton sessionId={extraData.props.sessionId} id={dataset.id} &gt;&lt;/DownloadButton&gt;;
  }

  techniquesFormatter(cell, row) { 
    if (row != null) {          
        var definition = row.parameters.filter(function(o){ return o.name === &quot;definition&quot;});
        if (definition){
          if (definition.length &gt; 0){
            return definition[0].value;
          }
        }
    }
  }

    getColumns() {
        return [
            {
                text: &quot;id&quot;,
                dataField: &quot;id&quot;,
                hidden: true
            },
            {
                text: &quot;Date&quot;,
                dataField: &quot;startDate&quot;,
                sort: true,
                hidden: false,
                formatter: this.dateFormatter,
                formatExtraData: this,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { width: &quot;150px&quot; },
                    lg: { width: &quot;150px&quot; }
                }
            },
            {
                text: &quot;Name&quot;,
                dataField: &quot;name&quot;,
                sort: true,
                hidden: false,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: false },
                    sm: { hidden: true },
                    md: { hidden: false },
                    lg: { hidden: false },
                }
            },
            {
                text: &quot;Definition&quot;,
                dataField: &quot;definition&quot;,
                formatter: this.techniquesFormatter,
                sort: true,
                hidden: false,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { width: &quot;130px&quot; },
                    lg: { width: &quot;130px&quot; }
                }
            },
            {
                text: &quot;Location&quot;,
                dataField: &quot;location&quot;,
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { hidden: true },
                    lg: { hidden: true }
                }
            },
            {
                text: &quot;Files&quot;,
                dataField: &quot;__fileCount&quot;,
                sort: true,
                hidden: false,
                formatter: this.fileCountFormatter,
                formatExtraData: this,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { width: &quot;80px&quot; },
                    lg: { width: &quot;80px&quot; }
                }
            },
            {
                text: &quot;Size&quot;,
                dataField: VOLUME,
                sort: true,
                hidden: false,
                formatter: this.volumeFormatter,
                formatExtraData: this,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { width: &quot;80px&quot; },
                    lg: { width: &quot;80px&quot; }
                }
            },

            {
                text: &quot;Download&quot;,
                dataField: &quot;download&quot;,
                sort: true,
                hidden: false,
                formatter: this.downloadFormatter,
                formatExtraData: this,
                headerStyle: (column, colIndex) =&gt; {
                    return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
                },
                responsiveHeaderStyle: {
                    xs: { hidden: true },
                    sm: { hidden: true },
                    md: { width: &quot;110px&quot; },
                    lg: { width: &quot;110px&quot; }
                }
            }
        ];
    }

    handleOnSelect = (row, isSelect) =&gt; {
        if (isSelect) {
            this.props.addDatasetById(row.id);
        }
        else {
            this.props.removeDatasetById(row.id);
        }
        return true;
    }

    handleOnSelectAll = (isSelect, rows) =&gt; {
        if (isSelect) {
            return rows.filter(r =&gt; r.id &gt;= 3).map(r =&gt; r.id);
        }
    }


    render() {

        if (this.props.fetching) {
            return &lt;Loading message=&quot;Loading datasets&quot;&gt;&lt;/Loading&gt;;
        }

        const options = {
            paginationSize: 10,
            sizePerPage: 200,
            paginationShowsTotal: true,
            hidePageListOnlyOnePage: true
        };


        const selectRow = {
            mode: &#039;checkbox&#039;,
            clickToSelect: false,
            selected: this.props.selection.datasetIds,
            onSelectAll: this.handleOnSelectAll,
            onSelect: this.handleOnSelect,
            classes: &#039;selection-row&#039;
        };

        const expandRow = {
            showExpandColumn: true,
            //expandByColumnOnly: true,
            expanded: this.props.expanded,
            expandColumnPosition: &#039;right&#039;,
            expandHeaderColumnRenderer: ({ isAnyExpands }) =&gt; {
                if (isAnyExpands) {
                    return &lt;span style={{ fontSize: &#039;18px&#039; }}&gt;&lt;Glyphicon glyph=&quot;zoom-out&quot; /&gt;&lt;/span&gt;;
                }
                return &lt;span style={{ fontSize: &#039;18px&#039; }}&gt;&lt;Glyphicon glyph=&quot;zoom-in&quot; /&gt;&lt;/span&gt;;
            },
            expandColumnRenderer: ({ expanded }) =&gt; {
                if (expanded) {
                    return (
                        &lt;Glyphicon glyph=&quot;zoom-out&quot; /&gt;
                    );
                }
                return (
                    &lt;Glyphicon glyph=&quot;zoom-in&quot; /&gt;
                );
            },
            renderer: dataset =&gt; {
                return (
                    &lt;DatasetWidget
                        dataset={dataset}
                        sessionId={this.props.sessionId}
                        selection={this.props.selection} &gt;&lt;/DatasetWidget&gt;
                );
            }
        };

        return &lt;div style={{ &#039;margin&#039;: &#039;20px&#039; }}&gt;
            &lt;ResponsiveTable
                keyField=&quot;id&quot;
                data={this.props.datasets}
                columns={this.getColumns()}
                expandRow={expandRow}
                selectRow={selectRow}
            /&gt;
        &lt;/div&gt;
    }
}

DatasetTable.propTypes = {
    datasets: PropTypes.array
};

export default DatasetTable;


class DateWidget extends React.Component {

    render() {
        return &lt;div style={{ &#039;margin&#039;: &#039;2px&#039;, height: &#039;20px&#039;, fontSize: &#039;11px&#039; }}&gt;
            &lt;Glyphicon glyph=&#039;glyphicon glyphicon-time&#039;&gt;&lt;/Glyphicon&gt;
            &lt;span style={{ &#039;marginLeft&#039;: &#039;12px&#039; }}&gt;
                &lt;Moment parse=&quot;YYYY-MM-DD HH:mm&quot; format=&quot;HH:mm&quot;&gt;{this.props.date}&lt;/Moment&gt;
            &lt;/span&gt;
            &lt;br /&gt;
            &lt;span style={{ &#039;marginLeft&#039;: &#039;12px&#039;, color: &#039;gray&#039; }}&gt;
                &lt;Moment parse=&quot;YYYY-MM-DD HH:mm&quot; format=&quot;ll&quot;&gt;{this.props.date}&lt;/Moment&gt;
            &lt;/span&gt;
        &lt;/div&gt;;

    }
};


class DownloadButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            status: &quot;FETCHING&quot;,
            fetching: false,
            fetched: false
        }
    }

    getStatus(){
        axios.get(getDatasetStatus(this.props.sessionId, this.props.id))
        .then(response =&gt; {        
            this.setState({
            status : response.data,
            fetching: false,
            fetched: true
            });

        })
        .catch((error) =&gt; {                
            this.setState({
            status : error.response.data.message + &quot; &quot; + this.props.id,
            fetching: false,
            fetched: true
            });
        });
    }

    restore(e){
         
          axios.get(getDownloadURLByDatasetId(this.props.sessionId, this.props.id))
            .then(response =&gt; {                 
                this.getStatus();
            })
            .catch((error) =&gt; {                
                this.getStatus();
            });
        
    }

    componentDidMount() {      
       if (!this.state.fetching) {
        this.setState({
          fetching: true
        });
      }

      this.getStatus();

    }

    render(){
      var downloadURL = getDownloadURLByDatasetId(this.props.sessionId, this.props.id);      
      if (this.state.status == &#039;ONLINE&#039;){
          return &lt;a style={{color:&#039;black&#039;}} href={downloadURL}&gt;
                &lt;Button bsStyle=&quot;primary&quot; bsSize=&quot;xsmall&quot;&gt;
                    &lt;span className=&quot;glyphicon glyphicon-download-alt&quot;&gt;&lt;/span&gt;
                    &lt;span style={{ marginLeft: &#039;10px&#039; }} &gt;&lt;/span&gt;
                    Download&lt;/Button&gt;
            &lt;/a&gt;;
      }

      if (this.state.status == &#039;RESTORING&#039;){             
          return &lt;a style={{color:&#039;black&#039;}} href={downloadURL}&gt;
              &lt;Button variant=&quot;dark&quot; bsSize=&quot;xsmall&quot; &gt;
                    &lt;span bsSize=&quot;xsmall&quot; className=&quot;glyphicon glyphicon-repeat fast-right-spinner&quot;&gt;&lt;/span&gt;
                    &lt;span style={{ color:&#039;black&#039;, marginLeft: &#039;10px&#039; }} &gt;Restoring&lt;/span&gt;
              &lt;/Button&gt;
            &lt;/a&gt;;
      }

      if (this.state.status == &#039;ARCHIVED&#039;){           
          return &lt;Button variant=&quot;light&quot; bsSize=&quot;xsmall&quot; onClick={(e) =&gt; { this.restore(e)}}&gt;
                &lt;span style={{color:&#039;black&#039;}} className=&quot;glyphicon glyphicon-tasks&quot;&gt;&lt;/span&gt;
                &lt;span style={{ color:&#039;black&#039;, marginLeft: &#039;10px&#039; }} &gt;Restore&lt;/span&gt;
              &lt;/Button&gt;;
      }

      if (this.state.status == &#039;FETCHING&#039;){
          return  &lt;span&gt;&lt;span style={{ marginLeft: &#039;10px&#039; }} className=&quot;glyphicon glyphicon-repeat fast-right-spinner&quot;&gt;&lt;/span&gt;&lt;/span&gt;;
      }

      return  &lt;span&gt;{this.state.status}&lt;/span&gt;;
      

    }

};</textarea>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <p>.</p>
  </div>
</footer>

<script type="text/html" id="complexity-popover-template">
  <div class="complexity-notice">
    Complexity : {{ cyclomatic }} <br>
    Length : {{ halstead.length }} <br>
    Difficulty : {{ halstead.difficulty.toFixed(2) }} <br>
    Est # bugs : {{ halstead.bugs.toFixed(2) }}<br>
  </div>
</script>

<script type="text/javascript" src="../../assets/scripts/bundles/core-bundle.js"></script>
<script type="text/javascript" src="../../assets/scripts/bundles/codemirror.js"></script>
<script type="text/javascript" src="../../assets/scripts/codemirror.markpopovertext.js"></script>
<script type="text/javascript" src="report.js"></script>
<script type="text/javascript" src="report.history.js"></script>
<script type="text/javascript" src="../../assets/scripts/plato-file.js"></script>
</body>
</html>
