IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Browse Source

Added pagination to WBLiveLogs.

pull/1/head
parent
commit
ace10afce7
1 changed files with 23 additions and 4 deletions
  1. +23
    -4
      frontend/src/js/component/wb-live-logs.js

+ 23
- 4
frontend/src/js/component/wb-live-logs.js View File

@@ -1,7 +1,13 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request'; import makeArvadosRequest from 'make-arvados-request';
import WBPagination from 'wb-pagination';
class WBLiveLogs extends Component { class WBLiveLogs extends Component {
constructor(...args) {
super(...args);
this.state.page = 0;
}
componentDidMount() { componentDidMount() {
this.fetchData(); this.fetchData();
} }
@@ -10,32 +16,41 @@ class WBLiveLogs extends Component {
if (nextProps.uuid === this.props.uuid); if (nextProps.uuid === this.props.uuid);
return; return;
this.props = nextProps; this.props = nextProps;
this.state.page = 0;
this.fetchData(); this.fetchData();
} }
fetchData() { fetchData() {
const { uuid, app } = this.props;
const { uuid, app, itemsPerPage } = this.props;
const { page } = this.state;
const { arvHost, arvToken } = app.state; const { arvHost, arvToken } = app.state;
const filters = [ const filters = [
[ 'object_uuid', '=', uuid ] [ 'object_uuid', '=', uuid ]
]; ];
let prom = makeArvadosRequest(arvHost, arvToken, 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 => { prom = prom.then(xhr => {
const { items } = xhr.response; const { items } = xhr.response;
this.setState({ 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 ( return (
<div> <div>
<a href="#" onclick={ e => { <a href="#" onclick={ e => {
e.preventDefault(); e.preventDefault();
this.fetchData(); this.fetchData();
} }>Refresh</a> } }>Refresh</a>
<WBPagination activePage={ page } numPages={ numPages }
onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
<pre class="word-warp terminal"> <pre class="word-warp terminal">
{ content } { content }
</pre> </pre>
@@ -44,4 +59,8 @@ class WBLiveLogs extends Component {
} }
} }
WBLiveLogs.defaultProps = {
itemsPerPage: 100
};
export default WBLiveLogs; export default WBLiveLogs;

Loading…
Cancel
Save