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

import { h, Component, createRef } from 'preact';
import { route } from 'preact-router';
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 { wbDisableControls, wbEnableControls } from 'wb-disable-controls';
import linkState from 'linkstate';
import wbParseWorkflowDef from 'wb-parse-workflow-def';
import { wbParseWorkflowInputs, wbSubmitContainerRequest } from 'wb-submit-container-request';
import WBWorkflowInput from 'wb-workflow-input';

class WBLaunchWorkflowPage extends Component {
  constructor(...args) {
    super(...args);
    this.browseDialogRef = createRef();
    this.state.inputs = {};
    this.state.errors = [];
    this.state.placeInSubProject = true;
  }

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

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/workflows/' + workflowUuid);
    prom = prom.then(xhr => {
        const def = wbParseWorkflowDef(xhr.response.definition);
        const inputs = {};
        const main = def['$graph'].find(a => (a.id === '#main'));
        main.inputs.map(a => (inputs[a.id] = JSON.stringify(a.default)));
        this.setState({
        'workflow': xhr.response,
        'workflowDefinition': def,
        'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
        'defaultProcessDescription': xhr.response.description,
        inputs
      });
    });
  }

  submit() {
    // first see if all inputs are parseable
    const { app, workflowUuid } = this.props;
    const { arvHost, arvToken, currentUser } = app.state;
    const { workflowDefinition, projectUuid,
      processName, processDescription,
      defaultProcessName, defaultProcessDescription,
      placeInSubProject } = this.state;

    const errors = [];
    const inputs = wbParseWorkflowInputs(workflowDefinition,
      this.state.inputs, errors);
    if (errors.length > 0) {
      this.setState({ errors });
      return;
    }

    const params = {
      arvHost, arvToken, inputs,
      processName: processName || defaultProcessName,
      processDescription: processDescription || defaultProcessDescription,
      projectUuid: projectUuid || currentUser.uuid,
      workflowUuid, workflowDefinition, placeInSubProject
    }

    wbDisableControls();
    let prom = wbSubmitContainerRequest(params);
    prom = prom.then(xhr => {
      wbEnableControls();
      route('/process/' + xhr.response.uuid);
    });
    prom = prom.catch(exc => {
      wbEnableControls();
      this.setState({ errors: [ exc.message ] });
    });
  }

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

    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 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>

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

            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox"
                checked={ placeInSubProject ? 'checked' : null }
                onchange={ e => (this.state.placeInSubProject = e.target.checked) }
                id="placeInSubProject" />
              <label class="form-check-label" for="placeInSubProject">
                Place in a daily sub-project
              </label>
            </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,
                  ( <WBWorkflowInput app={ app } inputSpec={ it }
                    inputsDict={ this.state.inputs }
                    browseDialogRef={ this.browseDialogRef } /> )
                ]) } />
            </div>

            { errors.length > 0 ? (
              <div class="form-group">
                { errors.map(err => (
                  <div class="alert alert-danger" role="alert">
                    { err }
                  </div>
                ))}
              </div>
            ) : null }

            <div class="form-group">
              <button class="btn btn-success" onclick={ e => { e.preventDefault(); this.submit(); } }>
                Submit
              </button>
            </div>
          </form>) : <div>Loading...</div> }
      </div>
    );
  }
}

export default WBLaunchWorkflowPage;