wba/frontend/src/js/component/wb-common-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';

class WBCommonFields extends Component {
  componentDidMount() {
    this.prepareRows();
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    // this.setState({ 'rows': null });
    this.prepareRows();
  }

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

    let item;
    let owner;
    let modifiedByUser;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/' + arvadosTypeName(uuid) +
      's/' + uuid);

    prom = prom.then(xhr => (item = xhr.response));

    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/' + arvadosTypeName(item.owner_uuid) +
      's/' + item.owner_uuid));

    prom = prom.then(xhr => (owner = xhr.response));

    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/users/' + item.modified_by_user_uuid));

    prom = prom.then(xhr => (modifiedByUser = xhr.response));

    prom = prom.then(() => {
      let rows = [
        [ 'UUID', item.uuid ],
        [ 'Kind', item.kind ],
        [ 'Owner', (
          <div>
            <div>
              <a href={ urlForObject(owner) }>{ arvadosObjectName(owner) }</a>
            </div>
            <div>
              { item.owner_uuid }
            </div>
          </div>
        ) ],
        [ 'Created at', wbFormatDate(item.created_at) ],
        [ 'Modified at', wbFormatDate(item.modified_at) ],
        [ 'Modified by User', (
          <div>
            <div>
              <a href={ urlForObject(modifiedByUser) }>{ arvadosObjectName(modifiedByUser) }</a>
            </div>
            <div>
              { item.modified_by_user_uuid }
            </div>
          </div>
        ) ],
        [ 'Modified by Client', item.modified_by_client_uuid ],
        [ 'API Url', 'https://' + app.state.arvHost + '/arvados/v1' + item.href ],
        [ 'ETag', item.etag ]
      ];
      this.setState({ 'rows': rows });
    });
  }

  render({}, { rows }) {
    return (
      <div>
        <h1>Common Fields</h1>
        { rows ? (
          <WBTable columns={ [ "Name", "Value" ] }
            rows={ rows } />
        ) : <div>Loading...</div> }
      </div>
    );
  }
}

export default WBCommonFields;