wba/frontend/src/js/component/wb-container-request-fields.js

import { h, Component } from 'preact';
import WBTable from 'wb-table';
import makeArvadosRequest from 'make-arvados-request';
import arvadosTypeName from 'arvados-type-name';
import arvadosObjectName from 'arvados-object-name';
import urlForObject from 'url-for-object';
import wbFormatDate from 'wb-format-date';
import WBNameAndUuid from 'wb-name-and-uuid';
import WBAccordion from 'wb-accordion';
import WBJsonViewer from 'wb-json-viewer';
import wbUpdateField from 'wb-update-field';
import WBJsonEditor from 'wb-json-editor';

class WBContainerRequestFields extends Component {
  componentDidMount() {
    this.fetchData();
  }

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

  prepareRows(item) {
    const { app } = this.props;
    const { arvHost, arvToken } = app.state;

    let rows = [
      [ 'Name', item.name ],
      [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
      [ 'Properties', (
        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
            .then(() => { item.properties = value; this.prepareRows(item); }) } />
      ) ],
      [ 'State', item.state ],
      [ 'Requesting Container', (
        <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
      ) ],
      [ 'Container', (
        <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
      ) ],
      [ 'Container Count Max', item.container_count_max ],
      [ 'Mounts', (
        <WBAccordion names={ Object.keys(item.mounts) }
          cardHeaderClass="card-header-sm">
          { Object.keys(item.mounts).map(k => (
            <WBJsonViewer app={ app } value={ item.mounts[k] } />
          )) }
        </WBAccordion>
      ) ],
      [ 'Runtime Constraints', (
        <WBAccordion names={ ['Runtime Constraints'] }
          cardHeaderClass="card-header-sm">
          <WBJsonViewer app={ app } value={ item.runtime_constraints } />
        </WBAccordion>
      ) ],
      [ 'Scheduling Parameters', (
        <WBAccordion names={ ['Scheduling Parameters'] }
          cardHeaderClass="card-header-sm">
          <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
        </WBAccordion>
      ) ],
      [ 'Container Image', (
        <WBNameAndUuid app={ app } uuid={ item.container_image } />
      ) ],
      [ 'Environment', (
        <WBAccordion names={ ['Environment'] }
          cardHeaderClass="card-header-sm">
          <WBJsonViewer app={ app } value={ item.environment } />
        </WBAccordion>
      ) ],
      [ 'Working Directory', item.cwd ],
      [ 'Command', (
        <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
      ) ],
      [ 'Output Path', item.output_path ],
      [ 'Output Name', item.output_name ],
      [ 'Output TTL', item.output_ttl ],
      [ 'Priority', item.priority ],
      [ 'Expires At', wbFormatDate(item.expires_at) ],
      [ 'Use Existing', String(item.use_existing) ],
      [ 'Log', (
        <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
      ) ],
      [ 'Output', (
        <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
      ) ],
      [ 'Filters', (
        item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
      ) ],
      [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
      [ 'Runtime User', (
        <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
      ) ],
      [ 'Runtime Auth Scopes', (
        item.runtime_auth_scopes ? (
          <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
        ) : (
          <i>{ String(item.runtime_auth_scopes) }</i>
        )
      ) ]
    ];
    rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
    this.setState({ rows });
  }

  fetchData() {
    let { uuid, app } = this.props;
    let { arvHost, arvToken } = app.state;

    let item;
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/container_requests/' + uuid);
    prom = prom.then(xhr => this.prepareRows(xhr.response));
  }

  render({}, { rows }) {
    return (
      rows ? (
        <WBTable columns={ [ "Name", "Value" ] }
          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
          rows={ rows }
          verticalHeader={ true } />
      ) : (
        <div>Loading...</div>
      )
    );
  }
}

export default WBContainerRequestFields;