Added WBLiveLogs to container view.

frontend/src/css/index.css

@@ -6,6 +6,13 @@ pre.word-wrap {
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
 
+pre.terminal {
+  background: black;
+  color: #aaa;
+  height: 600px;
+  width: 100%;
+}
+
 .w-1 {
   width: 1px !important;
 }

frontend/src/js/component/wb-live-logs.js

@@ -0,0 +1,47 @@
+import { h, Component } from 'preact';
+import makeArvadosRequest from 'make-arvados-request';
+
+class WBLiveLogs extends Component {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.uuid === this.props.uuid);
+      return;
+    this.props = nextProps;
+    this.fetchData();
+  }
+
+  fetchData() {
+    const { uuid, app } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const filters = [
+      [ 'object_uuid', '=', uuid ]
+    ];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)));
+    prom = prom.then(xhr => {
+      const { items } = xhr.response;
+      this.setState({
+        content: items.filter(a => ('text' in a.properties)).map(a => a.properties.text.trim()).join('\n')
+      });
+    });
+  }
+
+  render({}, { content }) {
+    return (
+      <div>
+        <a href="#" onclick={ e => {
+          e.preventDefault();
+          this.fetchData();
+        } }>Refresh</a>
+        <pre class="word-warp terminal">
+          { content }
+        </pre>
+      </div>
+    );
+  }
+}
+
+export default WBLiveLogs;

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

@@ -3,6 +3,7 @@ import WBNavbarCommon from 'wb-navbar-common';
 import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerFields from 'wb-container-fields';
+import WBLiveLogs from 'wb-live-logs';
 
 class WBContainerView extends Component {
   render({ app, uuid }) {
@@ -21,6 +22,9 @@ class WBContainerView extends Component {
 
         <h2>Container Fields</h2>
         <WBContainerFields app={ app } uuid={ uuid } />
+
+        <h2>Live Logs</h2>
+        <WBLiveLogs app={ app } uuid={ uuid } />
       </div>
     );
   }