wba/frontend/src/js/component/wb-workflow-fields.js

import { h, Component } from 'preact';
import WBTable from 'wb-table';
import makeArvadosRequest from 'make-arvados-request';
import WBAccordion from 'wb-accordion';

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

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

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

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

    prom = prom.then(xhr => {
      const item = xhr.response;
      let definition;
      try {
        definition = JSON.parse(item.definition);
      } catch (_) {
        definition = jsyaml.load(item.definition);
      }
      const graph = definition['$graph'];

      let rows = [
        [ 'Name', item.name ],
        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
        [ 'CWL Version', definition.cwlVersion ],
      ];

      let keys = graph.map(it => it.id);
      keys.sort();
      keys = keys.splice(keys.indexOf('#main'), 1).concat(keys);

      keys.map(k => {
        const it = graph.find(it => (it.id === k));
        rows.push([
          it.id, (
            <div>
              <div>Class: { it['class'] }</div>
              { it.label ? <div>Label: { it.label }</div> : null }
              { it.doc ? <div>Doc: { it.doc }</div> : null }
              <WBAccordion names={ [ 'Inputs', 'Outputs', 'Rest' ] }
                cardHeaderClass="card-header-sm">

                <pre class="word-wrap">{ JSON.stringify(it.inputs, null, 2) }</pre>

                <pre class="word-wrap">{ JSON.stringify(it.outputs, null, 2) }</pre>

                { (() => {
                  delete it['inputs'];
                  delete it['outputs'];
                  delete it['class'];
                  delete it['label'];
                  delete it['doc'];
                  delete it['id'];
                  return (
                    <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
                  );
                })() }

              </WBAccordion>
            </div>
          )]);
      });

      /*  [ 'Graph', (
          <WBAccordion names={ graph.map(it => it.id) }
            cardHeaderClass="card-header-sm">

            { graph.map(it => (
              <pre class="word-wrap">{ JSON.stringify(it, null, 2) }</pre>
            )) }

          </WBAccordion>
        ) ]
      ];*/
      this.setState({ 'rows': rows });
    });
  }

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

export default WBWorkflowFields;