github.com/alexdevranger/node-1.8.27@v0.0.0-20221128213301-aa5841e41d2d/dashboard/assets/components/Logs.jsx

// @flow

// Copyright 2018 The go-ethereum Authors
// This file is part of the go-dubxcoin library.
//
// The go-dubxcoin library is free software: you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// The go-dubxcoin library is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
//
// You should have received a copy of the GNU Lesser General Public License
// along with the go-dubxcoin library. If not, see <http://www.gnu.org/licenses/>.

import React, { Component } from "react";

import List, { ListItem } from "material-ui/List";
import escapeHtml from "escape-html";
import type {
  Record,
  Content,
  LogsMessage,
  Logs as LogsType,
} from "../types/content";

// requestBand says how wide is the top/bottom zone, eg. 0.1 means 10% of the container height.
const requestBand = 0.05;

// fieldPadding is a global map with maximum field value lengths seen until now
// to allow padding log contexts in a bit smarter way.
const fieldPadding = new Map();

// createChunk creates an HTML formatted object, which displays the given array similarly to
// the server side terminal.
const createChunk = (records: Array<Record>) => {
  let content = "";
  records.forEach((record) => {
    const { t, ctx } = record;
    let { lvl, msg } = record;
    let color = "#ce3c23";
    switch (lvl) {
      case "trace":
      case "trce":
        lvl = "TRACE";
        color = "#3465a4";
        break;
      case "debug":
      case "dbug":
        lvl = "DEBUG";
        color = "#3d989b";
        break;
      case "info":
        lvl = "INFO&nbsp;";
        color = "#4c8f0f";
        break;
      case "warn":
        lvl = "WARN&nbsp;";
        color = "#b79a22";
        break;
      case "error":
      case "eror":
        lvl = "ERROR";
        color = "#754b70";
        break;
      case "crit":
        lvl = "CRIT&nbsp;";
        color = "#ce3c23";
        break;
      default:
        lvl = "";
    }
    const time = new Date(t);
    if (
      lvl === "" ||
      !(time instanceof Date) ||
      isNaN(time) ||
      typeof msg !== "string" ||
      !Array.isArray(ctx)
    ) {
      content += '<span style="color:#ce3c23">Invalid log record</span><br />';
      return;
    }
    if (ctx.length > 0) {
      msg += "&nbsp;".repeat(Math.max(40 - msg.length, 0));
    }
    const month = `0${time.getMonth() + 1}`.slice(-2);
    const date = `0${time.getDate()}`.slice(-2);
    const hours = `0${time.getHours()}`.slice(-2);
    const minutes = `0${time.getMinutes()}`.slice(-2);
    const seconds = `0${time.getSeconds()}`.slice(-2);
    content += `<span style="color:${color}">${lvl}</span>[${month}-${date}|${hours}:${minutes}:${seconds}] ${msg}`;

    for (let i = 0; i < ctx.length; i += 2) {
      const key = escapeHtml(ctx[i]);
      const val = escapeHtml(ctx[i + 1]);
      let padding = fieldPadding.get(key);
      if (typeof padding !== "number" || padding < val.length) {
        padding = val.length;
        fieldPadding.set(key, padding);
      }
      let p = "";
      if (i < ctx.length - 2) {
        p = "&nbsp;".repeat(padding - val.length);
      }
      content += ` <span style="color:${color}">${key}</span>=${val}${p}`;
    }
    content += "<br />";
  });
  return content;
};

// ADDED, SAME and REMOVED are used to track the change of the log chunk array.
// The scroll position is set using these values.
const ADDED = 1;
const SAME = 0;
const REMOVED = -1;

// inserter is a state updater function for the main component, which inserts the new log chunk into the chunk array.
// limit is the maximum length of the chunk array, used in order to prevent the browser from OOM.
export const inserter =
  (limit: number) => (update: LogsMessage, prev: LogsType) => {
    prev.topChanged = SAME;
    prev.bottomChanged = SAME;
    if (!Array.isArray(update.chunk) || update.chunk.length < 1) {
      return prev;
    }
    if (!Array.isArray(prev.chunks)) {
      prev.chunks = [];
    }
    const content = createChunk(update.chunk);
    if (!update.source) {
      // In case of stream chunk.
      if (!prev.endBottom) {
        return prev;
      }
      if (prev.chunks.length < 1) {
        // This should never happen, because the first chunk is always a non-stream chunk.
        return [{ content, name: "00000000000000.log" }];
      }
      prev.chunks[prev.chunks.length - 1].content += content;
      prev.bottomChanged = ADDED;
      return prev;
    }
    const chunk = {
      content,
      name: update.source.name,
    };
    if (prev.chunks.length > 0 && update.source.name < prev.chunks[0].name) {
      if (update.source.last) {
        prev.endTop = true;
      }
      if (prev.chunks.length >= limit) {
        prev.endBottom = false;
        prev.chunks.splice(limit - 1, prev.chunks.length - limit + 1);
        prev.bottomChanged = REMOVED;
      }
      prev.chunks = [chunk, ...prev.chunks];
      prev.topChanged = ADDED;
      return prev;
    }
    if (update.source.last) {
      prev.endBottom = true;
    }
    if (prev.chunks.length >= limit) {
      prev.endTop = false;
      prev.chunks.splice(0, prev.chunks.length - limit + 1);
      prev.topChanged = REMOVED;
    }
    prev.chunks = [...prev.chunks, chunk];
    prev.bottomChanged = ADDED;
    return prev;
  };

// styles contains the constant styles of the component.
const styles = {
  logListItem: {
    padding: 0,
    lineHeight: 1.231,
  },
  logChunk: {
    color: "white",
    fontFamily: "monospace",
    whiteSpace: "nowrap",
    width: 0,
  },
  waitMsg: {
    textAlign: "center",
    color: "white",
    fontFamily: "monospace",
  },
};

export type Props = {
  container: Object,
  content: Content,
  shouldUpdate: Object,
  send: (string) => void,
};

type State = {
  requestAllowed: boolean,
};

// Logs renders the log page.
class Logs extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.content = React.createRef();
    this.state = {
      requestAllowed: true,
    };
  }

  componentDidMount() {
    const { container } = this.props;
    if (typeof container === "undefined") {
      return;
    }
    container.scrollTop = container.scrollHeight - container.clientHeight;
    const { logs } = this.props.content;
    if (typeof this.content === "undefined" || logs.chunks.length < 1) {
      return;
    }
    if (this.content.clientHeight < container.clientHeight && !logs.endTop) {
      this.sendRequest(logs.chunks[0].name, true);
    }
  }

  // onScroll is triggered by the parent component's scroll event, and sends requests if the scroll position is
  // at the top or at the bottom.
  onScroll = () => {
    if (!this.state.requestAllowed || typeof this.content === "undefined") {
      return;
    }
    const { logs } = this.props.content;
    if (logs.chunks.length < 1) {
      return;
    }
    if (this.atTop() && !logs.endTop) {
      this.sendRequest(logs.chunks[0].name, true);
    } else if (this.atBottom() && !logs.endBottom) {
      this.sendRequest(logs.chunks[logs.chunks.length - 1].name, false);
    }
  };

  sendRequest = (name: string, past: boolean) => {
    this.setState({ requestAllowed: false });
    this.props.send(
      JSON.stringify({
        Logs: {
          Name: name,
          Past: past,
        },
      })
    );
  };

  // atTop checks if the scroll position it at the top of the container.
  atTop = () =>
    this.props.container.scrollTop <=
    this.props.container.scrollHeight * requestBand;

  // atBottom checks if the scroll position it at the bottom of the container.
  atBottom = () => {
    const { container } = this.props;
    return (
      container.scrollHeight - container.scrollTop <=
      container.clientHeight + container.scrollHeight * requestBand
    );
  };

  // beforeUpdate is called by the parent component, saves the previous scroll position
  // and the height of the first log chunk, which can be deleted during the insertion.
  beforeUpdate = () => {
    let firstHeight = 0;
    let chunkList = this.content.children[1];
    if (chunkList && chunkList.children[0]) {
      firstHeight = chunkList.children[0].clientHeight;
    }
    return {
      scrollTop: this.props.container.scrollTop,
      firstHeight,
    };
  };

  // didUpdate is called by the parent component, which provides the container. Sends the first request if the
  // visible part of the container isn't full, and resets the scroll position in order to avoid jumping when a
  // chunk is inserted or removed.
  didUpdate = (prevProps, prevState, snapshot) => {
    if (
      typeof this.props.shouldUpdate.logs === "undefined" ||
      typeof this.content === "undefined" ||
      snapshot === null
    ) {
      return;
    }
    const { logs } = this.props.content;
    const { container } = this.props;
    if (typeof container === "undefined" || logs.chunks.length < 1) {
      return;
    }
    if (this.content.clientHeight < container.clientHeight) {
      // Only enters here at the beginning, when there aren't enough logs to fill the container
      // and the scroll bar doesn't appear.
      if (!logs.endTop) {
        this.sendRequest(logs.chunks[0].name, true);
      }
      return;
    }
    let { scrollTop } = snapshot;
    if (logs.topChanged === ADDED) {
      // It would be safer to use a ref to the list, but ref doesn't work well with HOCs.
      scrollTop += this.content.children[1].children[0].clientHeight;
    } else if (logs.bottomChanged === ADDED) {
      if (logs.topChanged === REMOVED) {
        scrollTop -= snapshot.firstHeight;
      } else if (this.atBottom() && logs.endBottom) {
        scrollTop = container.scrollHeight - container.clientHeight;
      }
    }
    container.scrollTop = scrollTop;
    this.setState({ requestAllowed: true });
  };

  render() {
    return (
      <div
        ref={(ref) => {
          this.content = ref;
        }}
      >
        <div style={styles.waitMsg}>
          {this.props.content.logs.endTop
            ? "No more logs."
            : "Waiting for server..."}
        </div>
        <List>
          {this.props.content.logs.chunks.map((c, index) => (
            <ListItem style={styles.logListItem} key={index}>
              <div
                style={styles.logChunk}
                dangerouslySetInnerHTML={{ __html: c.content }}
              />
            </ListItem>
          ))}
        </List>
        {this.props.content.logs.endBottom || (
          <div style={styles.waitMsg}>Waiting for server...</div>
        )}
      </div>
    );
  }
}

export default Logs;