wba/frontend/src/js/page/wb-launch-workflow-page.js

import { h, Component, createRef } from 'preact';
import WBNavbarCommon from 'wb-navbar-common';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import WBBrowseDialog from 'wb-browse-dialog';
import WBTable from 'wb-table';
import makeArvadosRequest from 'make-arvados-request';
import linkState from 'linkstate';

function parseDefinition(text) {
  let definition;
  try {
    definition = JSON.parse(text);
  } catch (_) {
    definition = jsyaml.load(text);
  }
  return definition;
}

class WBLaunchWorkflowPage extends Component {
  constructor(...args) {
    super(...args);
    this.browseDialogRef = createRef();
    this.state.inputs = {};
  }

  componentDidMount() {
    let { app, workflowUuid } = this.props;
    let { arvHost, arvToken } = app.state;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/workflows/' + workflowUuid);
    prom = prom.then(xhr => this.setState({
      'workflow': xhr.response,
      'workflowDefinition': parseDefinition(xhr.response.definition),
      'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
      'defaultProcessDescription': xhr.response.description
    }));
  }

  renderInput(inputSpec) {
    const isFile = (inputSpec.type === 'File' || inputSpec.type === 'File[]' ||
      (inputSpec.type.type === 'array' && inputSpec.type.items === 'File'));

    const isDirectory = (inputSpec.type === 'Directory' || inputSpec.type === 'Directory[]' ||
      (inputSpec.type.type === 'array' && inputSpec.type.items === 'Directory'));

    const isArray = (inputSpec.type === 'File[]' || inputSpec.type === 'Directory[]' ||
      inputSpec.type.type === 'array');

    if (!isFile && !isDirectory)
      return (
        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
          value={ this.state.inputs[inputSpec.id] }
          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
      );

    const button = (
      <button class="btn btn-outline-primary"
        onclick={ e => {
          e.preventDefault();
          this.browseDialogRef.current.show(isFile ? 'file' : 'directory', isArray,
            v => {
              this.state.inputs[inputSpec.id] = v.toString();
              this.setState({});
            });
        } }>
        Browse...
      </button>
    );

    return (
      <div class="input-group">
        <input class="form-control w-100" type="text" placeholder={ inputSpec.doc }
          value={ this.state.inputs[inputSpec.id] }
          onchange={ e => (this.state.inputs[inputSpec.id] = e.target.value) }></input>
        <div class="input-group-append">
          { button }
        </div>
      </div>
    );
  }

  render({ app, workflowUuid },
    { workflow, workflowDefinition, projectUuid, processName, processDescription,
    defaultProcessName, defaultProcessDescription }) {

    return (
      <div>
        <WBNavbarCommon app={ app } />

        <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />

        { workflow ?
          (<form class="container-fluid">
            <h1>Launch Workflow</h1>

            <div class="form-group">
              <label>Workflow</label>
              <WBArvadosCrumbs app={ app } uuid={ workflowUuid } />
            </div>

            <div class="form-group">
              <label for="projectUuid">Project UUID</label>

              <div>
                { projectUuid ? (
                  <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
                ) : null }

                <div class="input-group mb-3">
                  <input type="text" class="form-control" id="projectUuid"
                    placeholder="Enter Project UUID" aria-label="Project UUID"
                    aria-describedby="button-addon2" value={ projectUuid }
                    onChange={ linkState(this, 'projectUuid') } />
                  <div class="input-group-append">
                    <button class="btn btn-primary" type="button"
                      id="button-addon2" onclick={ e => { e.preventDefault();
                        this.browseDialogRef.current.show('owner', false,
                          projectUuid => this.setState({ projectUuid })); } }>Browse</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="processName">Process Name</label>
              <input type="text" class="form-control" id="processName"
                placeholder={ defaultProcessName } value={ processName }
                onChange={ linkState(this, 'processName') }/>
            </div>

            <div class="form-group">
              <label for="processDescription">Process Description</label>
              <input type="text" class="form-control" id="processDescription"
                placeholder={ defaultProcessDescription } value={ processDescription }
                onChange={ linkState(this, 'processDescription') } />
            </div>

            <div class="form-group">
              <label for="inputs">Inputs</label>
              <WBTable columns={ [ 'Name', 'Value'] }
                rows={ workflowDefinition.$graph.find(a => (a.id === '#main')).inputs.map(it => [
                  it.label || it.id,
                  this.renderInput(it)
                ]) } />
            </div>
          </form>) : <div>Loading...</div> }
      </div>
    );
  }
}

export default WBLaunchWorkflowPage;