wba/frontend/src/js/component/wb-collection-content.js

import { h, Component } from 'preact';
import WBTable from 'wb-table';
import WBBreadcrumbs from 'wb-breadcrumbs';
import { WBManifestReader } from 'wb-collection-manifest';
import WBPagination from 'wb-pagination';
import makeArvadosRequest from 'make-arvados-request';
import wbDownloadFile from 'wb-download-file';

class WBCollectionContent extends Component {
  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.manifestReader = null;
    this.state.loaded = 0;
    this.state.total = 0;
  }

  getUrl(params) {
    let res = '/collection-browse/' +
      ('uuid' in params ? params.uuid : this.props.uuid) + '/' +
      encodeURIComponent('collectionPath' in params ? params.collectionPath : this.props.collectionPath) + '/' +
      ('page' in params ? params.page : this.props.page);
    return res;
  }

  componentDidMount() {
    let { arvHost, arvToken } = this.props.app.state;
    let { uuid } = this.props;

    let select = [ 'manifest_text' ];
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/collections/' + uuid +
      '?select=' + encodeURIComponent(JSON.stringify(select)),
      { 'onProgress': e => {
        this.setState({ 'loaded': e.loaded, 'total': e.total });
      } });
    prom = prom.then(xhr => {
      this.state.manifestReader = new WBManifestReader(xhr.response.manifest_text);
      this.prepareRows();
    });
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    this.prepareRows();
  }

  prepareRows() {
    let { manifestReader } = this.state;
    let { collectionPath, page, itemsPerPage } = this.props;
    let { arvHost, arvToken } = this.props.app.state;

    //path = path.split('/');
    //path = [ '.' ].concat(path);

    let listing = manifestReader.listDirectory('.' + collectionPath)
    const numPages = Math.ceil(listing.length / itemsPerPage);
    listing = listing.slice(page * itemsPerPage,
      page * itemsPerPage + itemsPerPage);

    this.setState({
      'numPages': numPages,
      'rows': listing.map(item => (
        (item[0] === 'd') ? [
          (<a href={ this.getUrl({ 'collectionPath': collectionPath + '/' + item[1], 'page': 0 }) }>{ item[1] }/</a>),
          'Directory',
          null,
          (<div></div>)
        ] : [
          item[1],
          'File',
          filesize(item[2]),
          (<div>
            <button class="btn btn-outline-primary mx-1" title="Download"
              onclick={ () => {
                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
                  '.' + collectionPath + '/' + item[1]);
                prom = prom.then(blocks => {
                  const blob = new Blob(blocks);
                  const a = document.createElement('a');
                  a.name = item[1];
                  a.href = window.URL.createObjectURL(blob);
                  a.click();
                });
              } }><i class="fas fa-download"></i></button>

            <button class="btn btn-outline-primary mx-1" title="View"
              onclick={ () => {
                let prom = wbDownloadFile(arvHost, arvToken, manifestReader,
                  '.' + collectionPath + '/' + item[1]);
                prom = prom.then(blocks => {
                  const blob = new Blob(blocks);
                  window.open(window.URL.createObjectURL(blob));
                });
              } }><i class="far fa-eye"></i></button>
          </div>)
        ]
      ))
    });
  }

  render({ collectionPath, page }, { manifestReader, rows, numPages, loaded, total }) {
    return (
      <div>
        <WBBreadcrumbs items={ ('.' + collectionPath).split('/') } />

        { manifestReader ? (
          <div>
            <WBTable columns={ [ 'Name', 'Type', 'Size', 'Actions' ] }
              rows={ rows } />

            <WBPagination activePage={ page } numPages={ numPages }
              getPageUrl={ page => this.getUrl({ 'page': page }) } />
          </div>
        ) : (
          <div>Downloading manifest: { filesize(loaded) }</div>
        ) }

      </div>
    );
  }
}

WBCollectionContent.defaultProps = {
  'collectionPath': '',
  'page': 0,
  'itemsPerPage': 20
};

export default WBCollectionContent;