stitch-ui/src/admin/components/RootAdminLogBrowser.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable import/prefer-default-export */
/* eslint-disable react/prefer-es6-class */
/* eslint-disable react/no-string-refs */
/* eslint-disable jsx-a11y/label-has-for */

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import qs from "query-string";

import { Banner, Button } from "../../core";
import { handleError } from "../../util";
import { LogsTable } from "./LogsTable";

class RootAdminLogBrowser extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = this.getInitialState();
    this.setFilter = this.setFilter.bind(this);
  }

  getInitialState() {
    return {
      entries: [],
      errors_only: false,
      before: "",
      after: "",
      user_id: "",
      co_id: "",
      error: null
    };
  }

  componentDidMount() {
    const { location } = this.context.router.history;
    this.applyUrl(qs.parse(location.search));
  }

  componentWillReceiveProps(/* nextProps */) {
    const { location } = this.context.router.history;
    this.applyUrl(qs.parse(location.search));
  }

  setFilter() {
    const obj = {};
    ["user_id", "co_id", "before", "after"].forEach(field => {
      if (this.refs[field].value) {
        obj[field] = this.refs[field].value;
      }
    });

    if (this.refs.errors_only.checked) {
      obj.errors_only = "true";
    }

    this.context.router.history.replace(`/admin/logs?${qs.stringify(obj)}`);
  }

  applyUrl(queryObj) {
    if (queryObj === undefined || queryObj === null) {
      return;
    }

    const newState = this.getInitialState();
    delete newState.entries; // Hold onto entries to avoid blipping
    ["user_id", "co_id", "before", "after"].forEach(field => {
      if (queryObj[field] && this.refs[field]) {
        this.refs[field].value = queryObj[field];
        newState[field] = queryObj[field];
      }
    });

    if (queryObj.errors_only && this.refs.errors_only) {
      this.refs.errors_only.checked = true;
      newState.errors_only = true;
    } else {
      newState.errors_only = false;
    }

    this.setState(newState, () => {
      this.load(this.makeFilterObj());
    });
  }

  makeFilterObj() {
    const filter = {};
    ["user_id", "co_id", "before", "after"].forEach(field => {
      if (this.state[field]) {
        filter[field] = this.state[field];
      }
    });

    if (this.state.errors_only) {
      filter.errors_only = true;
    }

    return filter;
  }

  load(filter) {
    this.props.client
      ._admin()
      .logs()
      .get(filter)
      .then(entries => this.setState({ entries }))
      .catch(e => handleError(e, this));
  }

  render() {
    return (
      <div>
        <div className="section-header section-header-has-tabs">
          <div className="section-header-title">
            <div className="section-header-title-text">Logs</div>
          </div>
        </div>
        <div className="tabs-content">
          <div>
            <Banner
              message={this.state.error}
              error
              onClear={() => {
                this.setState({ error: null });
              }}
            />
            <div>
              <label>
                Only show errors<input type="checkbox" ref="errors_only" />
              </label>
            </div>
            <div>
              <label>
                Filter by user<input type="text" ref="user_id" />
              </label>
            </div>
            <div>
              <label>
                Filter by correlation ID<input type="text" ref="co_id" />
              </label>
            </div>
            <div>
              <label>
                Show logs from before<input type="text" ref="before" />
              </label>
            </div>
            <div>
              <label>
                Show logs from after<input type="text" ref="after" />
              </label>
            </div>
            <Button primary small onClick={this.setFilter}>
              load
            </Button>
          </div>
          <LogsTable entries={this.state.entries} app={this.props.app} />
        </div>
      </div>
    );
  }
}

RootAdminLogBrowser.contextTypes = {
  router: PropTypes.object
};

const mapStateToProps = state => ({
  client: state.base.client
});

export default connect(mapStateToProps)(RootAdminLogBrowser);