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';
import WBProcessState from 'wb-process-state';

function maskRows(rows) {
  return rows.map(r => r.map(c => '-'));
}

class WBProcessListing extends Component {

  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.numPages = 0;
    this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
    this.state.reqStateMask = [ true, true, true ];
  }

  componentDidMount() {
    this.fetchItems();
  }

  cancelProcess(uuid) {
    const { app } = this.props;
    const { arvHost, arvToken } = app.state;
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/container_requests/' + encodeURIComponent(uuid),
      { method: 'PUT', data: JSON.stringify({ priority: 0 }) });
    prom = prom.then(() => {
      this.setState({ rows: maskRows(this.state.rows) });
      this.fetchItems();
    });
  }

  prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
    const { app, renderRenameLink, renderDeleteButton,
      renderSelectionCell, renderSharingButton,
      renderEditDescription } = this.props;

    return requests.map(item => {
      return ( [
        renderSelectionCell(item),
        (<div>
          <div>
            <a href={ '/process/' + item['uuid'] }>
              { item['name'] }
            </a> { renderRenameLink(item, () => this.fetchItems()) }
          </div>
          <div>{ item['uuid'] }</div>
          <div class="mt-2">
            { item.description } { renderEditDescription(item, () => this.fetchItems()) }
          </div>
        </div>),
        ( <WBProcessState app={ app } process={ item } lazy={ true } /> ),
        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
        wbFormatDate(item['created_at']),
        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } lazy={ true } /> ),
        (<div>
          <button class="btn btn-outline-warning m-1" onclick={ () => this.cancelProcess(item.uuid) }>
            <i class="fas fa-stop-circle"></i>
          </button>
          { renderDeleteButton(item, () => this.fetchItems()) }
          { renderSharingButton(item) }
        </div>)
      ] );
    });
  }

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

    if (waitForNextProps)
      return;

    const filters = [
      [ 'requesting_container_uuid', '=', requestingContainerUuid ]
    ];
    if (!reqStateMask.reduce((a, b) => a & b))
      filters.push([ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]);
    if (ownerUuid)
      filters.push([ 'owner_uuid', '=', ownerUuid ]);
    if (textSearch)
      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ])

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

    prom = prom.then(xhr =>
      this.setState({
        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
        'rows': this.prepareRows(xhr.response.items)
      }));
  }

  componentWillReceiveProps(nextProps, nextState) {
    this.props = nextProps;
    this.setState({ 'rows': maskRows(this.state.rows) });
    this.fetchItems();
  }

  render({ appState, ownerUuid, activePage, onPageChanged, getPageUrl },
    { 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() } />

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

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

WBProcessListing.defaultProps = {
  itemsPerPage: 100,
  ownerUuid: null,
  requestingContainerUuid: null,
  renderRenameLink: () => null,
  renderDeleteButton: () => null,
  renderSelectionCell: () => null,
  renderSharingButton: () => null,
  renderEditDescription: () => null
};

export default WBProcessListing;