change context window to one day, massage search text/live (#3099)

* change context window to one day, massage search text/live

* fix date bug

* remove console logs

---------

Co-authored-by: David Townley <davidtownley@Davids-MacBook-Air.local>
Co-authored-by: jusrhee <justin@porter.run>

dashboard/src/components/LogQueryModeSelectionToggle.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 interface LogQueryModeSelectionToggleProps {
   selectedDate?: Date;
   setSelectedDate: React.Dispatch<React.SetStateAction<Date>>;
+  resetSearch: () => void;
 }
 
 const LogQueryModeSelectionToggle = (
@@ -22,7 +23,10 @@ const LogQueryModeSelectionToggle = (
     >
       <ToggleButton>
         <ToggleOption
-          onClick={() => props.setSelectedDate(undefined)}
+          onClick={() => {
+            props.setSelectedDate(undefined);
+            props.resetSearch();
+          }}
           selected={!props.selectedDate}
         >
           <Dot selected={!props.selectedDate} />

dashboard/src/components/LogSearchBar.tsx

@@ -1,18 +1,25 @@
 import React, { useState } from "react";
 import Button from "./Button";
 import styled from "styled-components";
+import dayjs from "dayjs";
 
 interface Props {
+  searchText: string;
+  setSearchText: (x: string) => void;
   setEnteredSearchText: (x: string) => void;
+  setSelectedDate: () => void;
 }
 
 const escapeRegExp = (str: string) => {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
-const LogSearchBar: React.FC<Props> = ({ setEnteredSearchText }) => {
-  const [searchText, setSearchText] = useState("");
-
+const LogSearchBar: React.FC<Props> = ({
+  searchText,
+  setSearchText,
+  setEnteredSearchText,
+  setSelectedDate,
+}) => {
   return (
     <SearchRowWrapper>
       <SearchBarWrapper>
@@ -25,6 +32,7 @@ const LogSearchBar: React.FC<Props> = ({ setEnteredSearchText }) => {
           onKeyPress={(event) => {
             if (event.key === "Enter") {
               setEnteredSearchText(escapeRegExp(searchText));
+              setSelectedDate();
             }
           }}
           placeholder="Search logs..."

dashboard/src/components/date-time-picker/DateTimePicker.tsx

@@ -27,25 +27,12 @@ const DateTimePicker: React.FC<Props> = ({ startDate, setStartDate }) => {
     currentDate.setTime(currentDate.getTime() + 24 * 60 * 60 * 1000);
   }
 
-  console.log(availableDates);
-
-  console.log(startDate);
-
-  console.log("startDateString", startDate.toDateString());
-  console.log("minDateString", minDate.toDateString());
-
   const isMinDay = startDate.toDateString() === minDate.toDateString();
   const isMaxDay = startDate.toDateString() === maxDate.toDateString();
 
-  console.log("isMinDay", isMinDay);
-  console.log("isMaxDay", isMaxDay);
-
   const minTime = isMinDay ? minDate : isMaxDay ? minTimeMaxDay : null;
   const maxTime = isMaxDay ? maxDate : isMinDay ? maxTimeMinDay : null;
 
-  console.log("minTime", minTime);
-  console.log("maxTime", maxTime);
-
   return (
     <DateTimePickerWrapper
       onClick={(e) => {

dashboard/src/main/home/app-dashboard/expanded-app/LogSection.tsx

@@ -49,6 +49,7 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
   const [podFilterOpts, setPodFilterOpts] = useState<PodFilter[]>([]);
   const [scrollToBottomEnabled, setScrollToBottomEnabled] = useState(true);
   const [enteredSearchText, setEnteredSearchText] = useState("");
+  const [searchText, setSearchText] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
   const [notification, setNotification] = useState<string>();
 
@@ -194,19 +195,32 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
     moveCursor(Direction.backward);
   }, [logs, selectedDate]);
 
+  const resetSearch = () => {
+    setSearchText("");
+    setEnteredSearchText("");
+  };
+
+  const setSelectedDateIfUndefined = () => {
+    if (selectedDate == null) {
+      setSelectedDate(dayjs().toDate());
+    }
+  };
+
   const renderContents = () => {
-    const searchBarProps = {
-      // make sure all required component's inputs/Props keys&types match
-      setEnteredSearchText: setEnteredSearchText,
-    };
     return (
       <>
         <FlexRow>
           <Flex>
-            {/* <LogSearchBar setEnteredSearchText={setEnteredSearchText} /> */}
+            <LogSearchBar
+              searchText={searchText}
+              setSearchText={setSearchText}
+              setEnteredSearchText={setEnteredSearchText}
+              setSelectedDate={setSelectedDateIfUndefined}
+            />
             <LogQueryModeSelectionToggle
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
+              resetSearch={resetSearch}
             />
             <RadioFilter
               icon={filterOutline}
@@ -379,10 +393,6 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
         <Text color="helper">The Porter agent is being installed . . .</Text>
       </Container>
     </Fieldset>
-  ) : isLoading ? (
-    <Fieldset>
-      <Loading />
-    </Fieldset>
   ) : !hasPorterAgent ? (
     <Fieldset>
       <Text size={16}>We couldn't detect the Porter agent on your cluster</Text>

dashboard/src/main/home/app-dashboard/expanded-app/useAgentLogs.ts

@@ -290,10 +290,10 @@ export const useLogs = (
     flushLogsBuffer(true);
     const websocketKey = `${currentPod}-${namespace}-websocket`;
     const endDate = dayjs(setDate);
-    const twoWeeksAgo = endDate.subtract(14, "days");
+    const oneDayAgo = endDate.subtract(1, "day");
 
     const { logs: initialLogs, previousCursor, nextCursor } = await queryLogs(
-      twoWeeksAgo.toISOString(),
+      oneDayAgo.toISOString(),
       endDate.toISOString(),
       Direction.backward
     );
@@ -327,10 +327,10 @@ export const useLogs = (
       // we query by setting the endDate equal to the previous startDate, and setting the direction
       // to "backward"
       const refDate = paginationInfo.previousCursor ?? dayjs().toISOString();
-      const twoWeeksAgo = dayjs(refDate).subtract(14, "days");
+      const oneDayAgo = dayjs(refDate).subtract(1, "day");
 
       const { logs: newLogs, previousCursor } = await queryLogs(
-        twoWeeksAgo.toISOString(),
+        oneDayAgo.toISOString(),
         refDate,
         Direction.backward
       );

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

@@ -44,6 +44,7 @@ const escapeRegExp = (str: string) => {
 interface QueryModeSelectionToggleProps {
   selectedDate?: Date;
   setSelectedDate: React.Dispatch<React.SetStateAction<Date>>;
+  resetSearch: () => void;
 }
 
 const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
@@ -57,7 +58,10 @@ const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
     >
       <ToggleButton>
         <ToggleOption
-          onClick={() => props.setSelectedDate(undefined)}
+          onClick={() => {
+            props.setSelectedDate(undefined);
+            props.resetSearch();
+          }}
           selected={!props.selectedDate}
         >
           <Dot selected={!props.selectedDate} />
@@ -267,31 +271,40 @@ const LogsSection: React.FC<Props> = ({
     moveCursor(Direction.backward);
   }, [logs, selectedDate]);
 
+  const resetSearch = () => {
+    setSearchText("");
+    setEnteredSearchText("");
+  };
+
   const renderContents = () => {
     return (
       <>
         <FlexRow isFullscreen={isFullscreen}>
           <Flex>
-            {/*<SearchRowWrapper>*/}
-            {/*  <SearchBarWrapper>*/}
-            {/*    <i className="material-icons">search</i>*/}
-            {/*    <SearchInput*/}
-            {/*      value={searchText}*/}
-            {/*      onChange={(e: any) => {*/}
-            {/*        setSearchText(e.target.value);*/}
-            {/*      }}*/}
-            {/*      onKeyPress={(event) => {*/}
-            {/*        if (event.key === "Enter") {*/}
-            {/*          setEnteredSearchText(escapeRegExp(searchText));*/}
-            {/*        }*/}
-            {/*      }}*/}
-            {/*      placeholder="Search logs..."*/}
-            {/*    />*/}
-            {/*  </SearchBarWrapper>*/}
-            {/*</SearchRowWrapper>*/}
+            <SearchRowWrapper>
+              <SearchBarWrapper>
+                <i className="material-icons">search</i>
+                <SearchInput
+                  value={searchText}
+                  onChange={(e: any) => {
+                    setSearchText(e.target.value);
+                  }}
+                  onKeyPress={(event) => {
+                    if (event.key === "Enter") {
+                      setEnteredSearchText(escapeRegExp(searchText));
+                      if (selectedDate == null) {
+                        setSelectedDate(dayjs().toDate());
+                      }
+                    }
+                  }}
+                  placeholder="Search logs..."
+                />
+              </SearchBarWrapper>
+            </SearchRowWrapper>
             <QueryModeSelectionToggle
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
+              resetSearch={resetSearch}
             />
             <RadioFilter
               icon={filterOutline}

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

@@ -289,10 +289,10 @@ export const useLogs = (
     flushLogsBuffer(true);
     const websocketKey = `${currentPod}-${namespace}-websocket`;
     const endDate = dayjs(setDate);
-    const twoWeeksAgo = endDate.subtract(14, "days");
+    const oneDayAgo = endDate.subtract(1, "day");
 
     const { logs: initialLogs, previousCursor, nextCursor } = await queryLogs(
-      twoWeeksAgo.toISOString(),
+      oneDayAgo.toISOString(),
       endDate.toISOString(),
       Direction.backward
     );
@@ -326,10 +326,10 @@ export const useLogs = (
       // we query by setting the endDate equal to the previous startDate, and setting the direction
       // to "backward"
       const refDate = paginationInfo.previousCursor ?? dayjs().toISOString();
-      const twoWeeksAgo = dayjs(refDate).subtract(14, "days");
+      const oneDayAgo = dayjs(refDate).subtract(1, "day");
 
       const { logs: newLogs, previousCursor } = await queryLogs(
-        twoWeeksAgo.toISOString(),
+        oneDayAgo.toISOString(),
         refDate,
         Direction.backward
       );