fix: line number, add previous log functionality to tail

dashboard/src/main/home/cluster-dashboard/expanded-chart/logs-section/LogsSection.tsx

@@ -17,7 +17,6 @@ import { Direction, useLogs } from "./useAgentLogs";
 import Anser from "anser";
 import DateTimePicker from "components/date-time-picker/DateTimePicker";
 import dayjs from "dayjs";
-import { useKubeEvents } from "components/events/useEvents";
 
 type Props = {
   currentChart?: any;
@@ -29,7 +28,12 @@ const escapeRegExp = (str: string) => {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
-const QueryModeSelectionToggle = (props: any) => {
+interface QueryModeSelectionToggleProps {
+  selectedDate?: Date;
+  setSelectedDate: React.Dispatch<React.SetStateAction<Date>>;
+}
+
+const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
   return (
     <div
       style={{
@@ -50,10 +54,12 @@ const QueryModeSelectionToggle = (props: any) => {
               height: "0.5rem",
               marginRight: "5px",
               borderRadius: "20px",
-              backgroundColor: "rgb(185, 0, 0)",
+              backgroundColor: "#ed5f85",
               border: "0px",
               outline: "none",
-              boxShadow: "0px 0px 5px 3px rgba(173,0,0,.3)",
+              boxShadow: props.selectedDate
+                ? "none"
+                : "0px 0px 5px 1px #ed5f85",
             }}
           ></span>
           Live
@@ -61,7 +67,7 @@ const QueryModeSelectionToggle = (props: any) => {
         <ToggleOption
           nudgeLeft
           onClick={() => props.setSelectedDate(dayjs().toDate())}
-          selected={props.selectedDate}
+          selected={!!props.selectedDate}
         >
           <TimeIcon src={time} />
         </ToggleOption>
@@ -148,6 +154,15 @@ const LogsSection: React.FC<Props> = ({
     });
   };
 
+  const onLoadPrevious = useCallback(() => {
+    if (!selectedDate) {
+      setSelectedDate(dayjs(logs[0].timestamp).toDate());
+      return;
+    }
+
+    moveCursor(Direction.backward);
+  }, [logs, selectedDate]);
+
   const renderContents = () => {
     return (
       <>
@@ -212,12 +227,11 @@ const LogsSection: React.FC<Props> = ({
         <StyledLogsSection isFullscreen={isFullscreen}>
           <LoadMoreButton
             active={
-              selectedDate &&
               logs.length !== 0 &&
-              paginationInfo.previousCursor !== null
+              (!selectedDate || paginationInfo.previousCursor !== null)
             }
             role="button"
-            onClick={() => moveCursor(Direction.backward)}
+            onClick={onLoadPrevious}
           >
             Load Previous
           </LoadMoreButton>

dashboard/src/main/home/cluster-dashboard/expanded-chart/logs-section/useAgentLogs.ts

@@ -108,9 +108,9 @@ export const useLogs = (
         const lastLineNumber = updatedLogs.at(-1)?.lineNumber ?? 0;
 
         updatedLogs.push(
-          ...newLogs.map((log) => ({
+          ...newLogs.map((log, idx) => ({
             ...log,
-            lineNumber: lastLineNumber + log.lineNumber,
+            lineNumber: lastLineNumber + idx + 1,
           }))
         );
 
@@ -157,7 +157,7 @@ export const useLogs = (
   const pushLogs = (newLogs: Log[]) => {
     logsBufferRef.current.push(...newLogs);
 
-    if (logsBufferRef.current.length > MAX_BUFFER_LOGS) {
+    if (logsBufferRef.current.length >= MAX_BUFFER_LOGS) {
       flushLogsBuffer();
     }
   };