display list of logs on separate tab #8

frontend/js/Store.js

@@ -229,6 +229,18 @@ export default class Store {
 
 
 
+  @computed
+  get orderedLogs() {
+    const result = [];
+    const logs = Array.from(this.delta['lager-events'].values());
+    logs.sort(({ At: aAt }, { At: bAt }) => {
+      return aAt > bAt ? 1 : -1;
+    });
+    return logs;
+  }
+
+
+
   @action
   subscribeToInstance(id) {
     this.currentInstanceId = id;

frontend/js/pages/InstancePage.jsx

@@ -9,6 +9,7 @@ import SvgView from '../components/SvgView';
 import RequestsListPage from './RequestsListPage';
 import RequestPage from './RequestPage';
 import ShellPage from './ShellPage';
+import LogsPage from './LogsPage';
 import ProcessPage from './ProcessPage';
 
 
@@ -176,20 +177,27 @@ export default class InstancePage extends React.Component {
       requestsLink = <NavLink to={`${this.props.match.url}/requests`}>Requests</NavLink>;
     }
 
+    let logsLink = null;
+    if (logs.length != 0) {
+      logsLink = <NavLink to={`${this.props.match.url}/logs`}>Logs</NavLink>;
+    }
+
     // for some reason setting viewportHeight for div height creates scrollbar
     // make it disappear using overflow: hidden
     return <div className="InstancePage" style={{height: this.state.viewportHeight, overflow: 'hidden'}}>
       <div className="extra-info-container">
         <div className="Tabs">
           <NavLink to={`${this.props.match.url}/shell`}>Shell</NavLink>
           {requestsLink}
+          {logsLink}
           {selectedItemLink}
         </div>
 
         <div className="tab-container" ref={(ref) => { this.containerRef = ref }}>
           <Switch>
             <Route exact path={`${this.props.match.path}/requests`} component={RequestsListPage} />
             <Route exact path={`${this.props.match.path}/shell`} component={ShellPage} />
+            <Route exact path={`${this.props.match.path}/logs`} component={LogsPage} />
             <Route exact path={`${this.props.match.path}/process-info/:pid`} component={ProcessPage} />
             <Route exact path={`${this.props.match.path}/plug-request-info/:reqId`} component={RequestPage} />
             <Route exact path={`${this.props.match.path}/cowboy-request-info/:reqId`} component={RequestPage} />

frontend/js/pages/LogsPage.jsx

@@ -0,0 +1,41 @@
+import { observer, inject } from 'mobx-react';
+void(inject); void(observer); // just to silence eslint, which cannot detect decorators usage
+
+import React from 'react';
+import moment from 'moment';
+
+import MarkedOutput from '../components/MarkedOutput';
+
+
+
+const formatTimestamp = (mcs) => {
+  const m = moment(Math.floor(mcs/1000));
+  const ms = Math.floor((mcs % (1000*1000))/1000);
+  return `${m.format('HH:mm:ss')}.${ms}`;
+};
+
+
+
+@inject("store") @observer
+export default class LogsPage extends React.Component {
+  constructor() {
+    super();
+
+    this.renderItem = this.renderItem.bind(this);
+  }
+
+  renderItem({ Pid, At, text, module, line, 'function': fun }) {
+    const key = `${At} ${Pid}`;
+    const instanceId = this.props.match.params.id;
+    const text1 = `${formatTimestamp(At)} ${Pid} ${module}:${line} ${text}`;
+    return <MarkedOutput key={key} text={text1} instanceId={instanceId} store={this.props.store} />;
+  }
+
+  render() {
+    const logs = this.props.store.orderedLogs;
+
+    return <div className="LogsPage">
+      {logs.map(this.renderItem)}
+    </div>;
+  }
+}

frontend/package.json

@@ -13,6 +13,7 @@
     "d3-scale": "^2.0.0",
     "mobx": "^3.6.1",
     "mobx-react": "^4.4.2",
+    "moment": "^2.22.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "prop-types": "^15.6.1",