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';
import WBNameAndUuid from 'wb-name-and-uuid';

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;

    const typeName = arvadosTypeName(uuid);

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

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

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

export default WBCommonFields;