small ts fixes

web/pages/components/chart.tsx

@@ -5,7 +5,8 @@ interface ToolTipProps {
   active?: boolean,
   payload?: object,
   unit?: string
-};
+}
+
 const defaultProps = {
   active: false,
   payload: {},
@@ -13,12 +14,16 @@ const defaultProps = {
 };
 
 interface ChartProps {
-  data: [{}],
+  data: [{
+    time: string,
+  }],
   color: string,
   unit: string,
-  dataCollections?: {},
+  dataCollections?: any,
 }
 
+
+
 function CustomizedTooltip(props: ToolTipProps) {
   const { active, payload, unit } = props;
   if (active && payload && payload[0]) {
@@ -40,15 +45,11 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
     return timeFormat("%I:%M")(new Date(tick));
   };
 
+  let ticks = data.map((item) => item?.time);
   if (dataCollections) {
-    var ticks = dataCollections[0].data?.map(function (collection) {
-      return collection?.time;
-    })
-  } else {
-    var ticks = data.map(function (item) {
-      return item?.time;
-    });
+    ticks = dataCollections[0].data?.map((collection) => collection?.time);
   }
+
   return (
     <LineChart width={1200} height={400} data={data}>
       <XAxis
@@ -90,3 +91,7 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
     </LineChart>
   );
 }
+
+Chart.defaultProps = {
+  dataCollections: [],
+};

web/pages/components/log-table.tsx

@@ -2,6 +2,28 @@ import React from "react";
 import { timeFormat } from "d3-time-format";
 import { Table, } from "antd";
 import Linkify from "react-linkify";
+import { SortOrder } from "antd/lib/table/interface";
+
+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>
+  )
+}
 
 export default function LogTable({ logs, pageSize }) {
   const columns = [
@@ -33,8 +55,8 @@ export default function LogTable({ logs, pageSize }) {
       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",
+      sortDirections: ["descend", "ascend"] as SortOrder[],
+      defaultSortOrder: "descend" as SortOrder,
     },
     {
       title: "Message",
@@ -57,23 +79,3 @@ export default function LogTable({ logs, pageSize }) {
   );
 }
 
-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>
-  )
-}