wba/frontend/src/js/page/wb-process-view.js

import { h, Component } from 'preact';
import WBNavbarCommon from 'wb-navbar-common';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import makeArvadosRequest from 'make-arvados-request';
import detectUuids from 'detect-uuids';
import arvadosTypeName from 'arvados-type-name';
import urlForObject from 'url-for-object';
import detectHashes from 'detect-hashes';
import WBCommonFields from 'wb-common-fields';
import WBContainerRequestFields from 'wb-container-request-fields';
import WBProcessListing from 'wb-process-listing';
import WBProcessDashboard from 'wb-process-dashboard';
import wbFetchObjects from 'wb-fetch-objects';

class WBProcessView extends Component {
  constructor(...args) {
    super(...args);
    this.state.objectUrls = [];
  }

  getUrl(props) {
    const page = ('page' in props ? props.page : this.props.page);
    return ('/process/' + this.props.uuid +
      (page ? '/' + page : ''));
  }

  fetchData() {
    let { arvHost, arvToken } = this.props.app.state;
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/container_requests/' + this.props.uuid);
    let req;
    let cont;
    prom = prom.then(xhr => {
      req = xhr.response;
      if (req.container_uuid) {
        let prom_1 = makeArvadosRequest(arvHost, arvToken,
          '/arvados/v1/containers/' + req.container_uuid);
        prom_1 = prom_1.then(xhr => (cont = xhr.response));
        return prom_1;
      }
    });
    //prom = prom.then(xhr => (cont = xhr.response));
    prom = prom.then(() => {
      let hashes = detectHashes([ req, cont ]);
      let filters = [
        [ 'portable_data_hash', 'in', hashes ]
      ];
      return makeArvadosRequest(arvHost, arvToken,
        '/arvados/v1/collections?filters=' +
        encodeURIComponent(JSON.stringify(filters)));
    });
    prom = prom.then(xhr => {
      let colUuids = xhr.response['items'].map(item => item.uuid);
      let uuids = detectUuids([ req, cont ]);
      let dict = {};
      colUuids.map(u => (dict[u] = true));
      uuids.map(u => (dict[u] = true));
      return Object.keys(dict);
    });
    prom = prom.then(uuids => wbFetchObjects(arvHost, arvToken, uuids));
    /* prom = prom.then(() => {
      // let uuids = detectUuids([ req, cont ]);
      let objectTypes = uuids.map(u => arvadosTypeName(u) + 's');
      //objectTypes = objectTypes.filter(ot => ot);
      //objectTypes = objectTypes.map(ot => ot + 's');
      let objQueries = {};
      objectTypes.map(t => (objQueries[t] = []));
      uuids.map((u, idx) => (objQueries[objectTypes[idx]].push(u)));
      let prom_1 = new Promise(accept => accept());
      let objects = [];
      // delete objQueries['users'];
      delete objQueries['api_clients'];
      for (let k in objQueries) {
        let filters = [
          ['uuid', 'in', objQueries[k]]
        ];
        prom_1 = prom_1.then(() => makeArvadosRequest(arvHost, arvToken,
          '/arvados/v1/' + k + '?filters=' +
          encodeURIComponent(JSON.stringify(filters))));
        prom_1 = prom_1.then(xhr => (objects = objects.concat(xhr.response['items'])));
      }
      prom_1 = prom_1.then(() => objects);
      return prom_1;
    }); */
    prom = prom.then(objects => {
      // let objDict = {};
      // objects.map(o => (objDict[o['uuid']] = o));
      let urls = Object.values(objects).map(o => urlForObject(o));
      this.setState({
        'objectUrls': urls,
        'request': req,
        'container': cont
      });
    });
  }

  componentDidMount() {
    this.fetchData();
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    this.setState({ 'objectUrls': [], 'request': null, 'container': null });
    this.fetchData();
  }

  render({ app, uuid, page }, { objectUrls, container }) {
    return (
      <div>
        <WBNavbarCommon app={ app } />

        <WBArvadosCrumbs app={ app } uuid={ uuid } />

        <div class="my-2">
          This is the process view for { uuid }
        </div>

        <h2>Children Dashboard</h2>
        <WBProcessDashboard app={ app } parentProcessUuid={ uuid } />

        <h2>Common Fields</h2>
        <WBCommonFields app={ app } uuid={ uuid } />

        <h2>Container Request Fields</h2>
        <WBContainerRequestFields app={ app } uuid={ uuid } />

        <h2>Children</h2>
        <WBProcessListing app={ app }
          appState={ app.state }
          requestingContainerUuid={ container ? container.uuid : null }
          waitForNextProps={ !container }
          itemsPerPage="20"
          activePage={ Number(page || 0) }
          getPageUrl={ page => this.getUrl({ page }) } />

        <div>
          <a href="/browse">Click here</a>
        </div>
        <ul>
          { objectUrls.map(url => (
            <li><a href={ url }>{ url }</a></li>
          )) }
        </ul>
      </div>
    );
  }
}

export default WBProcessView;