UX Improvements

Zipstack · Jan 24, 2025 · 051ffe4 · 051ffe4
1 parent 7666cb6
commit 051ffe4
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 22 deletions.
diff --git a/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.jsx b/frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.jsx
@@ -10,6 +10,7 @@ import { useExceptionHandler } from "../../hooks/useExceptionHandler";
 
 export function DisplayLogsAndNotifications() {
   const [contentHeight, setContentHeight] = useState(0);
+  const [errorCount, setErrorCount] = useState(0);
   const axiosPrivate = useAxiosPrivate();
   const { sessionDetails } = useSessionStore();
   const { pushLogMessages } = useSocketLogsStore();
@@ -108,15 +109,21 @@ export function DisplayLogsAndNotifications() {
       className="logs-container"
       style={{ height: contentHeight + 40 }}
     >
-      <div role="button" className="logs-handle" onMouseDown={onMouseDown}>
+      <div className="logs-handle" onMouseDown={onMouseDown}>
         <LogsHeader
+          isMinimized={contentHeight === 0}
+          errorCount={errorCount}
           onSemiExpand={semiExpand}
           onFullExpand={fullExpand}
           onMinimize={minimize}
         />
       </div>
       <div className="logs-content">
-        <LogsAndNotificationsTable />
+        <LogsAndNotificationsTable
+          errorCount={errorCount}
+          setErrorCount={setErrorCount}
+          isMinimized={contentHeight === 0}
+        />
       </div>
     </div>
   );

diff --git a/frontend/src/components/logs-and-notifications/LogsAndNotificationsTable.jsx b/frontend/src/components/logs-and-notifications/LogsAndNotificationsTable.jsx
@@ -1,29 +1,45 @@
 import { useMemo, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
 import { Table } from "antd";
 import { uniqueId } from "lodash";
 import { useSocketLogsStore } from "../../store/socket-logs-store";
 import "./DisplayLogsAndNotifications.css";
 import CustomMarkdown from "../helpers/custom-markdown/CustomMarkdown";
 
-export function LogsAndNotificationsTable() {
+function LogsAndNotificationsTable({ errorCount, setErrorCount, isMinimized }) {
   const tableRef = useRef(null);
   const { logs } = useSocketLogsStore();
 
+  useEffect(() => {
+    if (!isMinimized && errorCount !== 0) {
+      setErrorCount(0);
+    }
+  }, [isMinimized]);
+
   const dataSource = useMemo(() => {
-    return logs.map((log) => ({
-      key: `${log.timestamp}-${uniqueId()}`,
-      time: log?.timestamp,
-      level: log?.level,
-      type: log?.type,
-      stage: log?.stage,
-      step: log?.step,
-      state: log?.state,
-      promptKey: log?.component?.prompt_key,
-      docName: log?.component?.doc_name,
-      message: (
-        <CustomMarkdown text={log?.message} styleClassName="display-logs-md" />
-      ),
-    }));
+    const logMessages = logs.map((log) => {
+      if (log?.level === "ERROR" && log?.type === "LOG" && isMinimized) {
+        setErrorCount((prev) => prev + 1);
+      }
+      return {
+        key: `${log.timestamp}-${uniqueId()}`,
+        time: log?.timestamp,
+        level: log?.level,
+        type: log?.type,
+        stage: log?.stage,
+        step: log?.step,
+        state: log?.state,
+        promptKey: log?.component?.prompt_key,
+        docName: log?.component?.doc_name,
+        message: (
+          <CustomMarkdown
+            text={log?.message}
+            styleClassName="display-logs-md"
+          />
+        ),
+      };
+    });
+    return logMessages;
   }, [logs]);
 
   const columns = useMemo(
@@ -113,3 +129,11 @@ export function LogsAndNotificationsTable() {
     </div>
   );
 }
+
+LogsAndNotificationsTable.propTypes = {
+  errorCount: PropTypes.number.isRequired,
+  setErrorCount: PropTypes.func.isRequired,
+  isMinimized: PropTypes.bool.isRequired,
+};
+
+export { LogsAndNotificationsTable };
diff --git a/frontend/src/components/logs-and-notifications/LogsHeader.jsx b/frontend/src/components/logs-and-notifications/LogsHeader.jsx
@@ -5,9 +5,11 @@ import {
   FullscreenOutlined,
   ShrinkOutlined,
 } from "@ant-design/icons";
-import { Button, Space, Typography } from "antd";
+import { Button, Space, Tag, Typography } from "antd";
 
 export const LogsHeader = memo(function LogsHeader({
+  isMinimized,
+  errorCount,
   onSemiExpand,
   onFullExpand,
   onMinimize,
@@ -18,7 +20,10 @@ export const LogsHeader = memo(function LogsHeader({
 
   return (
     <div className="logs-header-container">
-      <Typography.Text>Logs</Typography.Text>
+      <Space>
+        <Typography.Text>Logs</Typography.Text>
+        {isMinimized && errorCount > 0 && <Tag color="red">{errorCount}</Tag>}
+      </Space>
       <Space>
         <Button
           type="text"
@@ -44,6 +49,8 @@ export const LogsHeader = memo(function LogsHeader({
 });
 
 LogsHeader.propTypes = {
+  isMinimized: PropTypes.bool.isRequired,
+  errorCount: PropTypes.number.isRequired,
   onSemiExpand: PropTypes.func.isRequired,
   onFullExpand: PropTypes.func.isRequired,
   onMinimize: PropTypes.func.isRequired,

diff --git a/frontend/src/helpers/GetStaticData.js b/frontend/src/helpers/GetStaticData.js
@@ -266,13 +266,19 @@ const getTimeForLogs = () => {
 };
 
 const getDateTimeString = (timestamp) => {
-  // Convert to milliseconds
+  // Check if the timestamp is a valid number
+  if (typeof timestamp !== "number" || isNaN(timestamp) || timestamp <= 0) {
+    return timestamp;
+  }
+
   const timestampInMilliseconds = timestamp * 1000;
 
-  // Create a new Date object
   const date = new Date(timestampInMilliseconds);
 
-  // Extract date components
+  if (isNaN(date.getTime())) {
+    return timestamp;
+  }
+
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-indexed
   const day = date.getDate().toString().padStart(2, "0");