wba/frontend/src/js/component/wb-collection-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 wbFormatSpecialValue from 'wb-format-special-value';
import WBJsonViewer from 'wb-json-viewer';
import WBJsonEditor from 'wb-json-editor';
import wbUpdateField from 'wb-update-field';

class WBCollectionFields 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', wbFormatSpecialValue(item.description) ],
      [ '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); }) } />
      ) ],
      [ 'Portable Data Hash', item.portable_data_hash ],
      [ 'Replication Desired', item.replication_desired ? item.replication_desired : (
        <i>{ String(item.replication_desired) }</i>
      ) ],
      [ 'Replication Confirmed', item.replication_confirmed ? item.replication_confirmed : (
        <i>{ String(item.replication_confirmed) }</i>
      ) ],
      [ 'Replication Confirmed At', wbFormatDate(item.replication_confirmed_at) ],
      [ 'Trash At', wbFormatDate(item.trash_at) ],
      [ 'Delete At', wbFormatDate(item.delete_at) ],
      [ 'Is Trashed', String(item.is_trashed) ],
      [ 'Current Version UUID', (
        <WBNameAndUuid app={ app } uuid={ item.current_version_uuid } />
      ) ],
      [ 'Version', item.version ],
      [ 'Preserve Version', String(item.preserve_version) ],
      [ 'File Count', item.file_count ],
      [ 'Total Size', filesize(item.file_size_total) ]
    ];
    this.setState({ 'rows': rows });
  }

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

    const filters = [
      ['uuid', '=', uuid]
    ];

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)));

    prom = prom.then(xhr => {
      const item = xhr.response.items[0];
      if (!item)
        throw Error('Item not found');
      this.prepareRows(item);
    });
  }

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

export default WBCollectionFields;