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

import { h, Component } from 'preact';
import { route } from 'preact-router';
import makeArvadosRequest from 'make-arvados-request';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
import urlForObject from 'url-for-object';
import arvadosTypeName from 'arvados-type-name';
import arvadosObjectName from 'arvados-object-name';
import WBCheckboxes from 'wb-checkboxes';

class WBCollectionListing extends Component {

  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.numPages = 0;
    this.state.orderStream = uuid.v4();
    this.state.collectionTypes = [ 'Intermediate', 'Output', 'Log', 'Other' ];
    this.state.collectionTypeMask = [ true, true, true, true ];
  }

  componentDidMount() {
    this.fetchItems();
  }

  prepareRows(items, ownerLookup) {
    let { app, renderRenameLink, renderDeleteButton,
      renderSelectionCell, renderSharingButton,
      renderEditDescription } = this.props;

    return items.map(item => [
      renderSelectionCell(item),
      (<div>
        <div>
          <a href={ urlForObject(item) }>
            { item['name'] }
          </a> { renderRenameLink(item, () => this.fetchItems()) }
        </div>
        <div>{ item['uuid'] }</div>
      </div>),
      (<div>
        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
      </div>),
      (<div>
        <div>
          { ownerLookup[item.owner_uuid] ? (
            <a href={ urlForObject(ownerLookup[item.owner_uuid]) }>
              { arvadosObjectName(ownerLookup[item.owner_uuid]) }
            </a>
          ) : 'Not Found' }
        </div>
        <div>{ item.owner_uuid }</div>
      </div>),
      item['file_count'],
      filesize(item['file_size_total']),
      (<div>
        <a class="btn btn-outline-primary m-1" title="Properties"
          href={ urlForObject(item, 'properties') }>
          <i class="fas fa-list-ul"></i>
        </a>

        { renderDeleteButton(item, () => this.fetchItems()) }

        { renderSharingButton(item) }
      </div>)
    ]);
  }

  fetchItems() {
    const { arvHost, arvToken } = this.props.app.state;
    const { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
    const { collectionTypes, collectionTypeMask } = this.state;

    let filters = [];

    if (ownerUuid)
      filters.push([ 'owner_uuid', '=', ownerUuid ]);

    if (textSearch)
      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);

    if (collectionTypeMask.filter(a => (!a)).length != 0) {
      if (collectionTypeMask[3]) {
        for (let i = 0; i < 3; i++)
          if (!collectionTypeMask[i])
            filters.push([ 'properties.type', '!=', collectionTypes[i].toLowerCase() ]);
      } else {
        filters.push([ 'properties.type', 'in',
          collectionTypes.filter((_, k) => collectionTypeMask[k]).map(a => a.toLowerCase()) ]);
      }
    }

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
      '&limit=' + encodeURIComponent(itemsPerPage) +
      '&offset=' + encodeURIComponent(itemsPerPage * activePage));

    let collections;
    let numPages

    prom = prom.then(xhr => {
      collections = xhr.response['items'];
      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);

      let owners = {};
      collections.map(c => {
        let typeName = arvadosTypeName(c.owner_uuid);
        if (!(typeName in owners))
          owners[typeName] = [];
        owners[typeName].push(c.owner_uuid);
      });

      let lookup = {};
      let prom_1 = new Promise(accept => accept());
      for (let typeName in owners) {
        let filters_1 = [
          ['uuid', 'in', owners[typeName]]
        ];
        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
          '/arvados/v1/' + typeName + 's?filters=' +
          encodeURIComponent(JSON.stringify(filters_1))));
        prom_1 = prom_1.then(xhr => xhr.response.items.map(item => (
          lookup[item.uuid] = item)));
      }

      prom_1 = prom_1.then(() => lookup);

      return prom_1;
    });

    //let ownerLookup = {};
    //prom = prom.then(lookup => (ownerLookup = lookup));

    prom = prom.then(ownerLookup =>
      this.setState({
        'numPages': numPages,
        'rows': this.prepareRows(collections, ownerLookup),
        'error': null
      }));

    prom = prom.catch(() => this.setState({
      'error': 'An error occured querying the Arvados API',
      'rows': []
    }));
  }

  componentWillReceiveProps(nextProps, nextState) {
    this.props = nextProps;
    this.fetchItems();
  }

  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error,
    collectionTypes, collectionTypeMask }) {

    return (
      <div>
        { error ? (<div class="alert alert-danger" role="alert">
          { error }
        </div>) : null }

        <WBCheckboxes items={ collectionTypes } checked={ collectionTypeMask }
          cssClass="float-left mx-2 my-2" title="Collection Type: "
          onChange={ () => route(getPageUrl(0)) } />

        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
          headerClasses={ [ 'w-1'] }
          rows={ rows } />

        <WBPagination numPages={ numPages }
          activePage={ activePage }
          getPageUrl={ getPageUrl } />
      </div>
    );
  }
}

WBCollectionListing.defaultProps = {
  'itemsPerPage': 100,
  'ownerUuid': null,
  'renderSharingButton': () => null,
  'renderEditDescription': () => null
};

export default WBCollectionListing;