Working on workflow launcher

frontend/src/js/page/wb-app.js

@@ -9,6 +9,7 @@ import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
 import WBWorkflowView from 'wb-workflow-view';
+import WBLaunchWorkflowPage from 'wb-launch-workflow-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -64,6 +65,8 @@ class WBApp extends Component {
         <WBUsersPage path='/users/:page?' app={ this } />
 
         <WBWorkflowView path="/workflow/:uuid" app={ this } />
+
+        <WBLaunchWorkflowPage path="/workflow-launch/:workflowUuid/:projectUuid?" app={ this } />
       </Router>
     );
   }

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

@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import makeArvadosRequest from 'make-arvados-request';
+import linkState from 'linkstate';
+
+function createInputsTemplate(workflow) {
+  const g = JSON.parse(workflow.definition)['$graph'];
+  const main = g.find(it => (it.id === '#main'));
+  /* let res = '';
+  main.inputs.map(it => {
+    let id = it.id.split('/');
+    id = id[id.length - 1];
+    if (it.label) res += '  // ' + it.label + '\n';
+    if (it.doc) res += ' //' + it.doc + '\n';
+    res += '  ' + it.type
+    res += '\'' + it.id + '\': null'
+  }); */
+  let res = main.inputs.map(it => { it.value = null; return it; });
+  res = JSON.stringify(res, null, 2);
+  res = res.split('\n');
+  res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
+  res = res.join('\n');
+  return res;
+}
+
+class WBLaunchWorkflowPage extends Component {
+  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,
+      'processName': xhr.response.name,
+      'processDescription': xhr.response.description,
+      'inputsFunctionText': '(() => {\n  return ' +
+        createInputsTemplate(xhr.response) +
+        ';\n})()'
+    }));
+  }
+
+  render({ app, projectUuid, workflowUuid },
+    { workflow, processName, processDescription,
+    inputsFunctionText }) {
+
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        { 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>
+              <input type="email" class="form-control" id="projectUuid" placeholder="Enter project uuid" />
+            </div>
+
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="createSubproject" />
+              <label class="form-check-label" for="createSubproject">Create subproject</label>
+            </div>
+
+            <div class="form-group">
+              <label for="processName">Process Name</label>
+              <input type="text" class="form-control" id="processName"
+                placeholder="Enter process name" 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="Enter process name" value={ processDescription }
+                onChange={ linkState(this, 'processDescription') } />
+            </div>
+
+            <div class="form-group">
+              <label for="inputs">Inputs</label>
+              <textarea class="form-control" id="inputs"
+                style="font-family: monospace;" rows="20"
+                value={ inputsFunctionText }></textarea>
+            </div>
+          </form>) : <div>Loading...</div> }
+      </div>
+    );
+  }
+}
+
+export default WBLaunchWorkflowPage;