wba/frontend/src/js/component/wb-process-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 WBCheckboxes from 'wb-checkboxes';
import wbFormatDate from 'wb-format-date';
import wbFetchObjects from 'wb-fetch-objects';
import WBNameAndUuid from 'wb-name-and-uuid';

class WBProcessListing extends Component {

  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.numPages = 0;
    this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
    this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
    this.state.reqStateMask = [ true, true, true ];
    this.state.contStateMask = [ true, true, true, true, true ];
  }

  componentDidMount() {
    this.fetchItems();
  }

  prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
    const { renderRenameLink, renderDeleteButton } = this.props;
    return requests.map(item => [
      (<div>
        <div>
          <a href={ '/process/' + item['uuid'] }>
            { item['name'] }
          </a> { renderRenameLink(item, () => this.fetchItems()) }
        </div>
        <div>{ item['uuid'] }</div>
      </div>),
      ( <div>
          <div>{ item['state'] } /</div>
          <div>{ item.container_uuid ?
            item.container_uuid in containerLookup ?
            containerLookup[item.container_uuid].state :
            "Container Not Found" :
            <i>{ String(item.container_uuid) }</i> }</div>
        </div> ),
      ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
      wbFormatDate(item['created_at']),
      ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
      (<div>
        { renderDeleteButton(item, () => this.fetchItems()) }
      </div>)
    ]);
  }

  fetchItems() {
    const { arvHost, arvToken } = this.props.appState;
    const { requestStates, reqStateMask } = this.state;
    const { activePage, itemsPerPage, ownerUuid,
      requestingContainerUuid } = this.props;

    const filters = [
      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]
    ];
    if (ownerUuid)
      filters.push([ 'owner_uuid', '=', ownerUuid ]);
    //if (requestingContainerUuid)
      //filters.push([ 'requesting_container_uuid', '=', requestingContainerUuid ]);

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

    let requests;
    let numPages;
    prom = prom.then(xhr => {
      requests = xhr.response.items;
      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);
      /* container_uuids = requests.map(r => r.container_uuid);
      container_uuids = container_uuids.filter(uuid => uuid);
      const filters_1 = [
        [ 'uuid', 'in', container_uuids ]
      ];
      return makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/containers?filters=' +
        encodeURIComponent(JSON.stringify(filters_1)));*/
      return wbFetchObjects(arvHost, arvToken,
        requests.map(r => r.container_uuid).filter(uuid => uuid));
    });

    let containerLookup;
    prom = prom.then(lookup => {
      containerLookup = lookup;
      // const containers = xhr.response.items;
      // containers.map(c => (containerLookup[c.uuid] = c));
      return wbFetchObjects(arvHost, arvToken,
        requests.map(r => r.owner_uuid).filter(uuid => uuid));
    });

    let ownerLookup;
    prom = prom.then(lookup => {
      ownerLookup = lookup;
      return wbFetchObjects(arvHost, arvToken,
        requests.map(r => r.output_uuid).filter(uuid => uuid));
    });

    let outputLookup;
    prom = prom.then(lookup => (outputLookup = lookup));

    // prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
    //  '/arvados/v1/'))

    prom = prom.then(() =>
      this.setState({
        'numPages': numPages,
        'rows': this.prepareRows(requests, containerLookup,
          ownerLookup, outputLookup)
      }));
  }

  componentWillReceiveProps(nextProps, nextState) {
    // this.setState({ 'rows': [] }); // .rows = [];
    this.props = nextProps;
    this.fetchItems();
  }

  render({ appState, ownerUuid, activePage, onPageChanged },
    { rows, numPages, requestStates, containerStates,
      reqStateMask, contStateMask }) {

    return (
      <div>
        <WBCheckboxes items={ requestStates } checked={ reqStateMask }
          cssClass="float-left mx-2 my-2" title="Request State: "
          onChange={ () => this.fetchItems() } />
        <WBCheckboxes items={ containerStates } checked={ contStateMask }
          cssClass="float-left mx-2 my-2" title="Container State: "
          onChange={ () => this.fetchItems() } />

        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
          rows={ rows } />

        <WBPagination numPages={ numPages }
          activePage={ activePage }
          onPageChanged={ i => onPageChanged(i) } />
      </div>
    );
  }
}

WBProcessListing.defaultProps = {
  'itemsPerPage': 100,
  'ownerUuid': null
};

export default WBProcessListing;