Added WBContainerView.

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

@@ -0,0 +1,106 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBAccordion from 'wb-accordion';
+
+class WBContainerFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/containers/' + uuid);
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'State', item.state ],
+        [ 'Started At', wbFormatDate(item.started_at) ],
+        [ 'Finished At', wbFormatDate(item.started_at) ],
+        [ 'Log', item.uuid ? (
+          <WBNameAndUuid app={ app } uuid={ item.uuid } />
+        ) : ( <i>{ String(item.uuid) }</i> ) ],
+        [ 'Environment', (
+          <WBAccordion names={ ['Environment'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Working Directory', item.cwd ],
+        [ 'Command', (
+          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+        ) ],
+        [ 'Output Path', item.output_path ],
+        [ 'Mounts', (
+          <WBAccordion names={ Object.keys(item.mounts) }
+            cardHeaderClass="card-header-sm">
+            { Object.keys(item.mounts).map(k => (
+              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+            )) }
+          </WBAccordion>
+        ) ],
+        [ 'Runtime Constraints', (
+          <WBAccordion names={ ['Runtime Constraints'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Runtime Status', (
+          <WBAccordion names={ ['Runtime Status'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.runtime_status, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Scheduling Parameters', (
+          <WBAccordion names={ ['Scheduling Parameters'] }
+            cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Output', item.output ? (
+          <WBNameAndUuid app={ app } uuid={ item.output } />
+        ) : ( <i>{ String(item.output) }</i> )],
+        [ 'Container Image', (
+          <WBNameAndUuid app={ app } uuid={ item.container_image } />
+        ) ],
+        [ 'Progress', item.progress ],
+        [ 'Priority', item.priority ],
+        [ 'Exit Code', item.exit_code === null ? ( <i>null</i> ) : item.exit_code ],
+        [ 'Auth UUID', item.auth_uuid === null ? ( <i>null</i> ) : item.auth_uuid ],
+        [ 'Locked by UUID', item.locked_by_uuid === null ? ( <i>null</i> ) : item.locked_by_uuid ]
+      ];
+      rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
+      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 WBContainerFields;

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

@@ -19,7 +19,7 @@ function urlForObject(item, mode='primary') {
     else
       return ('/collection/' + item.uuid);
   } else if (objectType === 'container')
-    return ('https://wb.arkau.roche.com/containers/' + item.uuid);
+    return ('/container/' + item.uuid);
 }
 
 export default urlForObject;

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

@@ -5,6 +5,7 @@ import WBSignIn from 'wb-sign-in';
 import WBSignOut from 'wb-sign-out';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
+import WBContainerView from 'wb-container-view';
 import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
 import WBUsersPage from 'wb-users-page';
@@ -79,6 +80,8 @@ class WBApp extends Component {
 
         <WBProcessView path="/process/:uuid" app={ this } />
 
+        <WBContainerView path="/container/:uuid" app={ this } />
+
         <WBCollectionView path="/collection/:uuid" app={ this } />
 
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />

frontend/src/js/page/wb-container-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 WBContainerFields from 'wb-container-fields';
+
+class WBContainerView extends Component {
+  render({ app, uuid }) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the container view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Container Fields</h2>
+        <WBContainerFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBContainerView;