diff --git a/frontend/src/js/component/wb-live-logs.js b/frontend/src/js/component/wb-live-logs.js index 26f0b79..e4e92e2 100644 --- a/frontend/src/js/component/wb-live-logs.js +++ b/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 (
{ e.preventDefault(); this.fetchData(); } }>Refresh + { this.state.page = page; this.fetchData(); } } />
           { content }
         
@@ -44,4 +59,8 @@ class WBLiveLogs extends Component { } } +WBLiveLogs.defaultProps = { + itemsPerPage: 100 +}; + export default WBLiveLogs;