Added WBWorkflowView.

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

@@ -0,0 +1,99 @@
+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;
+      const definition = JSON.parse(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;

frontend/src/js/misc/url-for-object.js

@@ -9,7 +9,7 @@ function urlForObject(item, mode='primary') {
   else if (objectType === 'container_request')
     return ('/process/' + item.uuid);
   else if (objectType === 'workflow')
-    return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
+    return ('/workflow/' + item.uuid);
   else if (objectType === 'collection') {
     if (mode === 'primary' || mode === 'browse')
       return ('/collection-browse/' + item.uuid);

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

@@ -8,6 +8,7 @@ import WBProcessView from 'wb-process-view';
 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 arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -61,6 +62,8 @@ class WBApp extends Component {
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
 
         <WBUsersPage path='/users/:page?' app={ this } />
+
+        <WBWorkflowView path="/workflow/:uuid" app={ this } />
       </Router>
     );
   }

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

@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBWorkflowFields from 'wb-workflow-fields';
+
+class WBWorkflowView extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the workflow view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Workflow Fields</h2>
+        <WBWorkflowFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBWorkflowView;