stitch-ui/src/logs/components/LogEntry.js

/* global window */
// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import moment from "moment";
import { toJSON } from "../../util";

const getDescription = entry => {
  if (entry.pipeline) {
    return "pipeline";
  }

  if (entry.auth_event) {
    const authType = entry.auth_event.type;
    if (authType === "login") {
      const loginStatus = entry.auth_event.failed ? "failed" : "success";
      return `Login from ${entry.auth_event.provider} (${loginStatus})`;
    } else if (authType === "logout") {
      return "Logout";
    }
    return `Auth: ${authType || "unknown"}`;
  }

  if (entry.requestURL) {
    return `${entry.requestMethod}: ${entry.requestURL}`;
  }

  return "unknown";
};

class LogEntry extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { expanded: false };
    this.loadDebugConsole = this.loadDebugConsole.bind(this);
  }

  loadDebugConsole() {
    // TODO use generic storage
    if (typeof window === "undefined") {
      return;
    }

    window.localStorage.setItem(
      "log_pipeline",
      toJSON(this.props.entry.pipeline)
    );

    this.context.router.history.push(
      `/groups/${this.props.app.groupId}/apps/${this.props.app
        ._id}/debug?pipelineKey=log_pipeline&user_id=${this.props.entry
        .user_id}`
    );
  }

  render() {
    const { entry, app } = this.props;
    const started = moment(entry.started);
    const completed = moment(entry.completed);
    return (
      <div
        className={`logs-listing-entry${this.state.expanded
          ? " expanded"
          : ""}`}
      >
        <div className="logs-listing-entry-row">
          <div
            className={`logs-listing-entry-field col-status${entry.error
              ? " log-error"
              : ""}`}
            onClick={() => {
              this.setState({ expanded: !this.state.expanded });
            }}
          >
            <span className="expand-control">
              {this.state.expanded ? "\u25bc" : "\u25b6"}
            </span>
            {entry.error ? "Error" : "OK"}
          </div>
          <div className="logs-listing-entry-field col-at">
            {started.format() /* ISO 8601, for now */}
          </div>
          <div className="logs-listing-entry-field col-timetaken">
            {completed >= started ? `${completed.diff(started)}ms` : ""}
          </div>
          <div className="logs-listing-entry-field col-user">
            {entry.user_id
              ? <Link
                  to={`/groups/${app.groupId}/apps/${app._id}/logs?user_id=${entry.user_id}`}
                >
                  {entry.user_id}
                </Link>
              : null}
          </div>
          <div className="logs-listing-entry-field col-desc">
            {getDescription(entry)}
          </div>
        </div>
        {!this.state.expanded
          ? null
          : <div className="logs-listing-entry-data">
              <div className="logs-listing-entry-data-container">
                <pre>
                  {toJSON(entry.messages)}
                </pre>
                <pre>
                  {toJSON(entry.incomingWebhook)}
                </pre>
                {entry.error ? entry.error : ""}
                <pre>
                  {toJSON(entry.pipeline)}
                </pre>
              </div>
            </div>}
        {this.state.expanded && entry.pipeline
          ? <div className="logs-listing-entry-simulate">
              <button
                className="button button-is-small"
                onClick={this.loadDebugConsole}
              >
                Try in debug console...
              </button>
            </div>
          : null}
      </div>
    );
  }
}

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

export default LogEntry;