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

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.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, 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)) +
      '&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 }) {
    return (
      <div>
        <WBPagination activePage={ page } numPages={ numPages }
          onPageChanged={ page => { this.state.page = page; this.fetchData(); } } />
        <pre class="word-warp terminal" ref={ this.terminalRef }>
          { content }
        </pre>
      </div>
    );
  }
}

WBLiveLogs.defaultProps = {
  itemsPerPage: 1000
};

export default WBLiveLogs;