wba/frontend/src/js/component/wb-process-state.js

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import wbProcessStateName from 'wb-process-state-name';

class WBProcessState extends Component {
  componentDidMount() {
    if (!this.props.lazy)
      this.fetchData();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.lazy) {
      this.setState({ container: null, apiError: null });

    } else {
      this.props = nextProps;
      this.fetchData();
    }
  }

  fetchData() {
    const { app, process } = this.props;
    const { arvHost, arvToken } = app.state;

    if (!process.container_uuid)
      return;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/containers/' + process.container_uuid);
    prom = prom.then(xhr => this.setState({ 'container': xhr.response }));
    prom = prom.catch(() => this.setState({ 'apiError': 'Failed to fetch container' }));
  }

  render({ process, lazy }, { container, apiError }) {
    const runtimeStatus = container ? container.runtime_status : null;
    const error = runtimeStatus ? runtimeStatus.error : null;
    const warning = runtimeStatus ? runtimeStatus.warning : null;

    return (
      <div>
        { wbProcessStateName(process, container) }
        { apiError ? <i>{ [ ' / ', apiError ] }</i> : null }
        { error ? [" / ", <a href={ '/container/' + container.uuid }
          title={ error }>E</a> ] : null }
        { warning ? [ " / ", <a href={ '/container/' + container.uuid }
          title={ warning }>W</a> ] : null } {}
        { lazy && !container && !apiError ? (
          <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
            <i class="fas fa-search"></i>
          </a>
        ) : null }
      </div>
    );
  }
}

export default WBProcessState;