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.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-warp terminal" ref={ this.terminalRef }>
          { content }
        </pre>
      </div>
    );
  }
}

WBLiveLogs.defaultProps = {
  itemsPerPage: 100
};

export default WBLiveLogs;