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

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
import WBNameAndUuid from 'wb-name-and-uuid';
import wbFetchObjects from 'wb-fetch-objects';
import wbFormatDate from 'wb-format-date';
import urlForObject from 'url-for-object';
import arvadosObjectName from 'arvados-object-name';

class WBWorkflowListing extends Component {

  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.numPages = 0;
  }

  componentDidMount() {
    this.fetchItems();
  }

  prepareRows(items, ownerLookup) {
    const { renderRenameLink, renderDeleteButton } = this.props;
    return items.map(item => [
      (
        <div>
          <div>
            <a href={ urlForObject(item) }>
              { arvadosObjectName(item) }
            </a> { renderRenameLink(item, () => this.fetchItems()) }
          </div>
          <div>{ item.uuid }</div>
        </div>
      ),
      item.description,
      ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
      wbFormatDate(item.created_at),
      (<div>
        <a class="btn btn-outline-success mx-1 my-1" title="Launch"
          href={ urlForObject(item, 'launch') }><i class="fas fa-running"></i></a>
        <button class="btn btn-outline-primary mx-1 my-1" title="View"><i class="far fa-eye"></i></button>
        { renderDeleteButton(item, () => this.fetchItems()) }
      </div>)
    ]);
  }

  fetchItems() {
    const { arvHost, arvToken } = this.props.app.state;
    const { page, itemsPerPage, ownerUuid } = this.props;
    const filters = [];
    if (ownerUuid)
      filters.push([ 'owner_uuid', '=', ownerUuid ]);
    const select = ['uuid', 'name', 'description', 'owner_uuid', 'created_at'];
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/workflows?filters=' + encodeURIComponent(JSON.stringify(filters)) +
      '&select=' + encodeURIComponent(JSON.stringify(select)) +
      '&limit=' + encodeURIComponent(itemsPerPage) +
      '&offset=' + encodeURIComponent(itemsPerPage * page));
    let workflowResp;
    prom = prom.then(xhr => (workflowResp = xhr.response));
    prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
      workflowResp.items.map(it => it.owner_uuid)));
    let ownerLookup;
    prom = prom.then(lookup => (ownerLookup = lookup));
    prom = prom.then(() =>
      this.setState({
        'numPages': Math.ceil(workflowResp['items_available'] / workflowResp['limit']),
        'rows': this.prepareRows(workflowResp.items, ownerLookup)
      }));
  }

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

  render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
    return (
      <div>
        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
          rows={ rows } />

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

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

export default WBWorkflowListing;