Add logs

web/pages/components/chart.tsx

@@ -9,13 +9,14 @@ interface ToolTipProps {
 const defaultProps = {
   active: false,
   payload: {},
+  unit: ""
 };
 
 interface ChartProps {
-  data: number,
+  data: [{}],
   color: string,
   unit: string,
-  dataCollections?: [],
+  dataCollections?: {},
 }
 
 function CustomizedTooltip(props: ToolTipProps) {
@@ -40,7 +41,7 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
   };
 
   if (dataCollections) {
-    var ticks = dataCollections[0]?.data.map(function (collection) {
+    var ticks = dataCollections?[0].data.map(function (collection) {
       return collection?.time;
     })
   } else {

web/pages/components/log-table.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { timeFormat } from "d3-time-format";
+import { Table, } from "antd";
+import Linkify from "react-linkify";
+
+export default function LogTable({ logs, pageSize }) {
+  const columns = [
+    {
+      title: "Level",
+      dataIndex: "level",
+      key: "level",
+      filters: [
+        {
+          text: "Info",
+          value: "info",
+        },
+        {
+          text: "Warning",
+          value: "warning",
+        },
+        {
+          text: "Error",
+          value: "Error",
+        },
+      ],
+      onFilter: (level, row) => row.level.indexOf(level) === 0,
+      render: renderColumnLevel,
+    },
+    {
+      title: "Timestamp",
+      dataIndex: "time",
+      key: "time",
+      render: (timestamp) =>
+        timeFormat("%H:%M:%S %m/%d/%Y")(new Date(timestamp)),
+      sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+      sortDirections: ["descend", "ascend"],
+      defaultSortOrder: "descend",
+    },
+    {
+      title: "Message",
+      dataIndex: "message",
+      key: "message",
+      render: renderMessage,
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        dataSource={logs}
+        columns={columns}
+        rowKey={(row) => row.time}
+        pagination={{ pageSize: pageSize || 20 }}
+      />
+      ;
+    </div>
+  );
+}
+
+function renderColumnLevel(text, entry) {
+  let color = 'black';
+
+  if (entry.level === "warning") {
+    color = "orange";
+  } else if (entry.level === 'error') {
+    color = "red";
+  }
+
+  const style = {
+    color,
+  };
+  return <div style={style}>{text}</div>;
+}
+
+function renderMessage(text, entry) {
+  return (
+    <Linkify>{text}</Linkify>
+  )
+}

web/pages/components/main-layout.tsx

@@ -98,8 +98,8 @@ export default function MainLayout(props) {
             <Menu.Item key="storage">
               <Link href="/storage">Storage</Link>
             </Menu.Item>
-            <Menu.Item key="update-stream-key">
-              <Link href="/update-stream-key">Change Stream Key</Link>
+            <Menu.Item key="logs">
+              <Link href="/logs">Logs</Link>
             </Menu.Item>
           </SubMenu>
         </Menu>