|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- import { h, Component, createRef } 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;
- this.state.moreItemsPerPage = false;
- this.terminalRef = createRef();
- }
-
- componentDidMount() {
- this.fetchData();
- }
-
- componentWillReceiveProps(nextProps) {
- if (nextProps.uuid === this.props.uuid);
- return;
- this.props = nextProps;
- this.state.page = 0;
- this.fetchData();
- }
-
- fetchData() {
- const { uuid, app } = this.props;
- let { itemsPerPage } = this.props;
- const { page, moreItemsPerPage } = this.state;
- if (moreItemsPerPage)
- itemsPerPage *= 10;
- const { arvHost, arvToken } = app.state;
- const filters = [
- [ 'object_uuid', '=', uuid ]
- ];
- let prom = makeArvadosRequest(arvHost, arvToken,
- '/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'),
- numPages: Math.ceil(xhr.response.items_available / itemsPerPage)
- });
- this.terminalRef.current.scrollTo(0, 0);
- });
- }
-
- render({}, { content, page, numPages, moreItemsPerPage }) {
- return (
- <div>
- <div class="custom-control custom-switch">
- <input type="checkbox" class="custom-control-input" id="morePerPageSwitch"
- checked = { moreItemsPerPage ? 'checked' : null }
- onchange={ e => { this.state.moreItemsPerPage = e.target.checked;
- this.state.page = 0; this.fetchData(); } } />
- <label class="custom-control-label" for="morePerPageSwitch">More log entries per page</label>
- </div>
- <WBPagination activePage={ page } numPages={ numPages }
- onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
- <pre class="word-wrap terminal" ref={ this.terminalRef }>
- { content }
- </pre>
- </div>
- );
- }
- }
-
- WBLiveLogs.defaultProps = {
- itemsPerPage: 100
- };
-
- export default WBLiveLogs;
|