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

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
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";
};

// eslint-disable-next-line import/prefer-default-export
export class LogEntry extends React.Component {
  constructor(props) {
    super(props);
    this.state = { expanded: false };
  }
  render() {
    const started = moment(this.props.entry.started);
    const completed = moment(this.props.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${this.props.entry
              .error
              ? " log-error"
              : ""}`}
            onClick={() => {
              this.setState({ expanded: !this.state.expanded });
            }}
          >
            <span className="expand-control">
              {this.state.expanded ? "\u25bc" : "\u25b6"}
            </span>
            {this.props.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">
            {this.props.entry.user_id
              ? <Link to={`/admin/logs?user_id=${this.props.entry.user_id}`}>
                  {this.props.entry.user_id}
                </Link>
              : null}
          </div>
          <div className="logs-listing-entry-field col-desc">
            {getDescription(this.props.entry)}
          </div>
        </div>
        {!this.state.expanded
          ? null
          : <div className="logs-listing-entry-data">
              <div className="logs-listing-entry-data-container">
                <pre>
                  {" "}{toJSON(this.props.entry.messages)}{" "}
                </pre>
                {this.props.entry.error ? this.props.entry.error : ""}
                <pre>
                  {" "}{toJSON(this.props.entry.pipeline)}{" "}
                </pre>
              </div>
            </div>}
      </div>
    );
  }
}