Admin Trace UI (#86)

portal-ui/package.json

@@ -19,6 +19,7 @@
     "@types/recharts": "^1.8.9",
     "@types/superagent": "^4.1.4",
     "@types/webpack-env": "^1.14.1",
+    "@types/websocket": "^1.0.0",
     "codemirror": "^5.52.2",
     "history": "^4.10.1",
     "local-storage-fallback": "^4.1.1",
@@ -37,7 +38,8 @@
     "redux-thunk": "^2.3.0",
     "superagent": "^5.1.0",
     "typeface-roboto": "^0.0.75",
-    "typescript": "3.6.4"
+    "typescript": "3.6.4",
+    "websocket": "^1.0.31"
   },
   "scripts": {
     "start": "PORT=5000 react-scripts start",

portal-ui/src/screens/Console/Console.tsx

@@ -61,6 +61,7 @@ import ListNotificationEndpoints from "./NotificationEndopoints/ListNotification
 import ConfigurationsList from "./Configurations/ConfigurationPanels/ConfigurationsList";
 import { Button, LinearProgress } from "@material-ui/core";
 import WebhookPanel from "./Configurations/ConfigurationPanels/WebhookPanel";
+import Trace from "./Trace/Trace";
 
 function Copyright() {
   return (
@@ -302,6 +303,7 @@ class Console extends React.Component<
                 />
                 <Route exact path="/webhook/logger" component={WebhookPanel} />
                 <Route exact path="/webhook/audit" component={WebhookPanel} />
+                <Route exct path="/trace" component={Trace} />
                 <Route exact path="/">
                   <Redirect to="/dashboard" />
                 </Route>

portal-ui/src/screens/Console/Menu.tsx

@@ -39,6 +39,7 @@ import PersonIcon from "@material-ui/icons/Person";
 import api from "../../common/api";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import ListAltIcon from "@material-ui/icons/ListAlt";
+import LoopIcon from "@material-ui/icons/Loop";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -150,6 +151,12 @@ class Menu extends React.Component<MenuProps> {
             </ListItemIcon>
             <ListItemText primary="IAM Policies" />
           </ListItem>
+          <ListItem button component={NavLink} to="/trace">
+            <ListItemIcon>
+              <LoopIcon />
+            </ListItemIcon>
+            <ListItemText primary="Trace" />
+          </ListItem>
           <ListItem component={Typography}>Configuration</ListItem>
           <ListItem button component={NavLink} to="/notification-endpoints">
             <ListItemIcon>

portal-ui/src/screens/Console/Trace/Trace.tsx

@@ -0,0 +1,157 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program 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 Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+import React, { useEffect } from "react";
+import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
+import storage from "local-storage-fallback";
+import { AppState } from "../../../store";
+import { connect } from "react-redux";
+import { traceMessageReceived, traceResetMessages } from "./actions";
+import { TraceMessage } from "./types";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    logList: {
+      background: "white",
+      maxHeight: "400px",
+      overflow: "auto",
+      "& ul": {
+        margin: "4px",
+        padding: "0px"
+      },
+      "& ul li": {
+        listStyle: "none",
+        margin: "0px",
+        padding: "0px",
+        borderBottom: "1px solid #dedede"
+      }
+    }
+  });
+
+interface ITrace {
+  classes: any;
+  traceMessageReceived: typeof traceMessageReceived;
+  traceResetMessages: typeof traceResetMessages;
+  messages: TraceMessage[];
+}
+
+const Trace = ({
+  classes,
+  traceMessageReceived,
+  traceResetMessages,
+  messages
+}: ITrace) => {
+  useEffect(() => {
+    traceResetMessages();
+    const token: string = storage.getItem("token")!;
+    const url = new URL(window.location.toString());
+    const isDev = process.env.NODE_ENV === "development";
+    const port = isDev ? "9090" : url.port;
+
+    const setCookie = (name: string, val: string) => {
+      const date = new Date();
+      const value = val;
+
+      // Set it expire in 45 minutes
+      date.setTime(date.getTime() + 45 * 60 * 1000);
+
+      // Set it
+      document.cookie =
+        name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
+    };
+
+    setCookie("token", token);
+
+    const c = new W3CWebSocket(`ws://${url.hostname}:${port}/ws/trace`);
+
+    let interval: any | null = null;
+    if (c !== null) {
+      c.onopen = () => {
+        console.log("WebSocket Client Connected");
+        c.send("ok");
+        interval = setInterval(() => {
+          c.send("ok");
+        }, 10 * 1000);
+      };
+      c.onmessage = (message: IMessageEvent) => {
+        let m: TraceMessage = JSON.parse(message.data.toString());
+        m.time = new Date(m.time.toString());
+        m.key = Math.random();
+        traceMessageReceived(m);
+      };
+      c.onclose = () => {
+        clearInterval(interval);
+        console.log("connection closed by server");
+      };
+      return () => {
+        c.close(1000);
+        clearInterval(interval);
+        console.log("closing websockets");
+      };
+    }
+  }, [traceMessageReceived]);
+
+  const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const niceBytes = (x: string) => {
+    let l = 0,
+      n = parseInt(x, 10) || 0;
+
+    while (n >= 1024 && ++l) {
+      n = n / 1024;
+    }
+    //include a decimal point and a tenths-place digit if presenting
+    //less than ten of KB or greater units
+    return n.toFixed(n < 10 && l > 0 ? 1 : 0) + " " + units[l];
+  };
+  const timeFromdate = (d: Date) => {
+    let h = d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`;
+    let m = d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`;
+    let s = d.getSeconds() < 10 ? `0${d.getSeconds()}` : `${d.getSeconds()}`;
+
+    return `${h}:${m}:${s}:${d.getMilliseconds()}`;
+  };
+
+  return (
+    <div>
+      <h1>Trace</h1>
+      <div className={classes.logList}>
+        <ul>
+          {messages.map(m => {
+            return (
+              <li key={m.key}>
+                {timeFromdate(m.time)} - {m.api}[{m.statusCode} {m.statusMsg}]{" "}
+                {m.api} {m.host} {m.client} {m.callStats.duration} ↑{" "}
+                {niceBytes(m.callStats.rx + "")} ↓{" "}
+                {niceBytes(m.callStats.tx + "")}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const mapState = (state: AppState) => ({
+  messages: state.trace.messages
+});
+
+const connector = connect(mapState, {
+  traceMessageReceived: traceMessageReceived,
+  traceResetMessages: traceResetMessages
+});
+
+export default connector(withStyles(styles)(Trace));

portal-ui/src/screens/Console/Trace/actions.ts

@@ -0,0 +1,46 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program 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 Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TraceMessage } from "./types";
+
+export const TRACE_MESSAGE_RECEIVED = "TRACE_MESSAGE_RECEIVED";
+export const TRACE_RESET_MESSAGES = "TRACE_RESET_MESSAGES";
+
+interface TraceMessageReceivedAction {
+  type: typeof TRACE_MESSAGE_RECEIVED;
+  message: TraceMessage;
+}
+
+interface TraceResetMessagesAction {
+  type: typeof TRACE_RESET_MESSAGES;
+}
+
+export type TraceActionTypes =
+  | TraceMessageReceivedAction
+  | TraceResetMessagesAction;
+
+export function traceMessageReceived(message: TraceMessage) {
+  return {
+    type: TRACE_MESSAGE_RECEIVED,
+    message: message
+  };
+}
+
+export function traceResetMessages() {
+  return {
+    type: TRACE_RESET_MESSAGES
+  };
+}

portal-ui/src/screens/Console/Trace/reducers.ts

@@ -0,0 +1,50 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program 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 Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  TRACE_MESSAGE_RECEIVED,
+  TRACE_RESET_MESSAGES,
+  TraceActionTypes
+} from "./actions";
+import { TraceMessage } from "./types";
+
+export interface TraceState {
+  messages: TraceMessage[];
+}
+
+const initialState: TraceState = {
+  messages: []
+};
+
+export function traceReducer(
+  state = initialState,
+  action: TraceActionTypes
+): TraceState {
+  switch (action.type) {
+    case TRACE_MESSAGE_RECEIVED:
+      return {
+        ...state,
+        messages: [...state.messages, action.message]
+      };
+    case TRACE_RESET_MESSAGES:
+      return {
+        ...state,
+        messages: []
+      };
+    default:
+      return state;
+  }
+}

portal-ui/src/screens/Console/Trace/types.ts

@@ -0,0 +1,35 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program 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 Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+export interface CallStats {
+  timeToFirstByte: string;
+  rx: number;
+  tx: number;
+  duration: string;
+}
+
+export interface TraceMessage {
+  client: string;
+  time: Date;
+  statusCode: number;
+  api: string;
+  query: string;
+  host: string;
+  callStats: CallStats;
+  path: string;
+  statusMsg: string;
+  key: number;
+}

portal-ui/src/store.ts

@@ -17,9 +17,11 @@
 import { applyMiddleware, combineReducers, compose, createStore } from "redux";
 import thunk from "redux-thunk";
 import { systemReducer } from "./reducer";
+import { traceReducer } from "./screens/Console/Trace/reducers";
 
 const globalReducer = combineReducers({
-  system: systemReducer
+  system: systemReducer,
+  trace: traceReducer
 });
 
 declare global {

portal-ui/yarn.lock

@@ -1580,6 +1580,13 @@
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.1.tgz#c8e84705e08eed430b5e15b39c65b0944e4d1422"
   integrity sha512-eWN5ElDTeBc5lRDh95SqA8x18D0ll2pWudU3uWiyfsRmIZcmUXpEsxPU+7+BsdCrO2vfLRC629u/MmjbmF+2tA==
 
+"@types/websocket@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.0.tgz#828c794b0a50949ad061aa311af1009934197e4b"
+  integrity sha512-MLr8hDM8y7vvdAdnoDEP5LotRoYJj7wgT6mWzCUQH/gHqzS4qcnOT/K4dhC0WimWIUiA3Arj9QAJGGKNRiRZKA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -6347,7 +6354,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -7965,6 +7972,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nan@^2.14.0:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -12028,6 +12040,13 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
   integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -12498,6 +12517,17 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
+websocket@^1.0.31:
+  version "1.0.31"
+  resolved "https://registry.yarnpkg.com/websocket/-/websocket-1.0.31.tgz#e5d0f16c3340ed87670e489ecae6144c79358730"
+  integrity sha512-VAouplvGKPiKFDTeCCO65vYHsyay8DqoBSlzIO3fayrfOgU94lQN5a1uWVnFrMLceTJw/+fQXR5PGbUVRaHshQ==
+  dependencies:
+    debug "^2.2.0"
+    es5-ext "^0.10.50"
+    nan "^2.14.0"
+    typedarray-to-buffer "^3.1.5"
+    yaeti "^0.0.6"
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
@@ -12818,6 +12848,11 @@ y18n@^3.2.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
+yaeti@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/yaeti/-/yaeti-0.0.6.tgz#f26f484d72684cf42bedfb76970aa1608fbf9577"
+  integrity sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"