Added pagination to WBLiveLogs.

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

@@ -1,7 +1,13 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
+import WBPagination from 'wb-pagination';
 
 class WBLiveLogs extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.page = 0;
+  }
+
   componentDidMount() {
     this.fetchData();
   }
@@ -10,32 +16,41 @@ class WBLiveLogs extends Component {
     if (nextProps.uuid === this.props.uuid);
       return;
     this.props = nextProps;
+    this.state.page = 0;
     this.fetchData();
   }
 
   fetchData() {
-    const { uuid, app } = this.props;
+    const { uuid, app, itemsPerPage } = this.props;
+    const { page } = this.state;
     const { arvHost, arvToken } = app.state;
     const filters = [
       [ 'object_uuid', '=', uuid ]
     ];
     let prom = makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)));
+      '/arvados/v1/logs?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&offset=' + (itemsPerPage * page) +
+      '&limit=' + itemsPerPage);
     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')
+        content: items
+          .filter(a => ('text' in a.properties))
+          .map(a => a.properties.text.trim()).join('\n'),
+        numPages: Math.ceil(xhr.response.items_available / itemsPerPage)
       });
     });
   }
 
-  render({}, { content }) {
+  render({}, { content, page, numPages }) {
     return (
       <div>
         <a href="#" onclick={ e => {
           e.preventDefault();
           this.fetchData();
         } }>Refresh</a>
+        <WBPagination activePage={ page } numPages={ numPages }
+          onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
         <pre class="word-warp terminal">
           { content }
         </pre>
@@ -44,4 +59,8 @@ class WBLiveLogs extends Component {
   }
 }
 
+WBLiveLogs.defaultProps = {
+  itemsPerPage: 100
+};
+
 export default WBLiveLogs;