improve log ui (#3094)

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

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

@@ -12,6 +12,40 @@ type Props = {
 };
 
 const DateTimePicker: React.FC<Props> = ({ startDate, setStartDate }) => {
+  const maxDate = new Date();
+  const minDate = new Date(maxDate.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  const minTimeMaxDay = new Date(maxDate);
+  minTimeMaxDay.setHours(0, 0, 0, 0);
+  const maxTimeMinDay = new Date(minDate);
+  maxTimeMinDay.setHours(23, 59, 0, 0);
+
+  const availableDates = [];
+  let currentDate = new Date(minDate);
+  while (currentDate <= maxDate) {
+    availableDates.push(new Date(currentDate));
+    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) => {
@@ -25,6 +59,9 @@ const DateTimePicker: React.FC<Props> = ({ startDate, setStartDate }) => {
         onChange={(date: any) => setStartDate(date)}
         showTimeSelect
         dateFormat="MMMM d, yyyy h:mm aa"
+        includeDates={availableDates}
+        maxTime={maxTime}
+        minTime={minTime}
       />
     </DateTimePickerWrapper>
   );

dashboard/src/components/date-time-picker/react-datepicker.css

@@ -1,3 +1,15 @@
+.react-datepicker__aria-live {
+  position: absolute;
+  clip-path: circle(0);
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  width: 1px;
+  white-space: nowrap;
+}
+
 .react-datepicker__triangle {
   display: none;
 }
@@ -358,7 +370,8 @@
   ul.react-datepicker__time-list
   li.react-datepicker__time-list-item:hover {
   cursor: pointer;
-  background-color: #26292e;
+  background-color: #525882;
+  border-radius: 0.3rem
 }
 .react-datepicker__time-container
   .react-datepicker__time
@@ -368,6 +381,7 @@
   background-color: #949eff;
   color: white;
   font-weight: bold;
+  border-radius: 0.3rem
 }
 .react-datepicker__time-container
   .react-datepicker__time
@@ -452,12 +466,13 @@
 .react-datepicker__month-text,
 .react-datepicker__quarter-text {
   cursor: pointer;
+  background-color: #232527;
 }
 .react-datepicker__day:hover,
 .react-datepicker__month-text:hover,
 .react-datepicker__quarter-text:hover {
   border-radius: 0.3rem;
-  background-color: #26292e;
+  background-color: #525882;
 }
 .react-datepicker__day--today,
 .react-datepicker__month-text--today,
@@ -539,7 +554,8 @@
 .react-datepicker__month-text--disabled,
 .react-datepicker__quarter-text--disabled {
   cursor: default;
-  color: #ccc;
+  color: #999;
+  background-color: transparent;
 }
 .react-datepicker__day--disabled:hover,
 .react-datepicker__month-text--disabled:hover,

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

@@ -65,12 +65,13 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
     }, 5000);
   };
 
-  const { loading, logs, refresh, moveCursor, paginationInfo } = useLogs(
+  const { logs, refresh, moveCursor, paginationInfo } = useLogs(
     podFilter.podName,
     podFilter.podNamespace,
     enteredSearchText,
     notify,
     currentChart,
+    setIsLoading,
     selectedDate
   );
 
@@ -136,13 +137,13 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
   };
 
   useEffect(() => {
-    if (!loading && scrollToBottomRef.current && scrollToBottomEnabled) {
+    if (!isLoading && scrollToBottomRef.current && scrollToBottomEnabled) {
       scrollToBottomRef.current.scrollIntoView({
         behavior: "smooth",
         block: "end",
       });
     }
-  }, [loading, logs, scrollToBottomRef, scrollToBottomEnabled]);
+  }, [isLoading, logs, scrollToBottomRef, scrollToBottomEnabled]);
 
   const renderLogs = () => {
     return logs?.map((log, i) => {
@@ -241,8 +242,18 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
         </FlexRow>
         <LogsSectionWrapper>
           <StyledLogsSection>
-            {loading || !logs.length ? (
+            {isLoading || (logs.length == 0 && selectedDate == null) ? (
               <Loading message="Waiting for logs..." />
+            ) : logs.length == 0 ? (
+              <>
+                <Message>
+                  No logs found.
+                  <Highlight onClick={refresh}>
+                    <i className="material-icons">autorenew</i>
+                    Refresh
+                  </Highlight>
+                </Message>
+              </>
             ) : (
               <>
                 <LoadMoreButton
@@ -255,14 +266,6 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
                   Load Previous
                 </LoadMoreButton>
                 {renderLogs()}
-                {/* <Message>
-            
-            No matching logs found.
-            <Highlight onClick={() => {}}>
-              <i className="material-icons">autorenew</i>
-              Refresh
-            </Highlight>
-          </Message> */}
                 <LoadMoreButton
                   active={selectedDate && logs.length !== 0}
                   role="button"
@@ -290,7 +293,6 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
     checkForAgent();
   }, []);
 
-
   useEffect(() => {
     if (!isPorterAgentInstalling) {
       return;
@@ -369,39 +371,41 @@ const LogSection: React.FC<Props> = ({ currentChart }) => {
     };
   };
 
-  return (
-    isPorterAgentInstalling ? (
-      <Fieldset>
-        <Container row>
-          <Spinner src={spinner} />
-          <Spacer inline x={1} />
-          <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>
-        <Spacer y={0.5} />
-        <Text color="helper">In order to use the Logs tab, you need to install the Porter agent.</Text>
-        <Spacer y={1} />
-        <Button onClick={() => triggerInstall()}>
-          <I className="material-icons">add</I> Install Porter agent
-        </Button>
-      </Fieldset>
-    ) : logsError ? (
-      <Fieldset>
-        <Container row>
-          <WarnI className="material-icons">warning</WarnI>
-          <Text color="helper">Porter encountered an error retrieving logs for this application.</Text>
-        </Container>
-      </Fieldset>
-    ) : (
-      renderContents()
-    )
+  return isPorterAgentInstalling ? (
+    <Fieldset>
+      <Container row>
+        <Spinner src={spinner} />
+        <Spacer inline x={1} />
+        <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>
+      <Spacer y={0.5} />
+      <Text color="helper">
+        In order to use the Logs tab, you need to install the Porter agent.
+      </Text>
+      <Spacer y={1} />
+      <Button onClick={() => triggerInstall()}>
+        <I className="material-icons">add</I> Install Porter agent
+      </Button>
+    </Fieldset>
+  ) : logsError ? (
+    <Fieldset>
+      <Container row>
+        <WarnI className="material-icons">warning</WarnI>
+        <Text color="helper">
+          Porter encountered an error retrieving logs for this application.
+        </Text>
+      </Container>
+    </Fieldset>
+  ) : (
+    renderContents()
   );
 };
 

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

@@ -76,6 +76,7 @@ export const useLogs = (
   searchParam: string,
   notify: (message: string) => void,
   currentChart: ChartType,
+  setLoading: (isLoading: boolean) => void,
   // if setDate is set, results are not live
   setDate?: Date
 ) => {
@@ -89,7 +90,6 @@ export const useLogs = (
     previousCursor: null,
     nextCursor: null,
   });
-  const [loading, setLoading] = useState(true);
 
   // if we are live:
   // - start date is initially set to 2 weeks ago
@@ -424,6 +424,5 @@ export const useLogs = (
     refresh,
     moveCursor,
     paginationInfo,
-    loading,
   };
 };

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

@@ -120,6 +120,7 @@ const LogsSection: React.FC<Props> = ({
     initData.timestamp ? dayjs(initData.timestamp).toDate() : undefined
   );
   const [notification, setNotification] = useState<string>();
+  const [loading, setLoading] = useState(true);
 
   const notify = (message: string) => {
     setNotification(message);
@@ -129,12 +130,13 @@ const LogsSection: React.FC<Props> = ({
     }, 5000);
   };
 
-  const { loading, logs, refresh, moveCursor, paginationInfo } = useLogs(
+  const { logs, refresh, moveCursor, paginationInfo } = useLogs(
     podFilter,
     currentChart.namespace,
     enteredSearchText,
     notify,
     currentChart,
+    setLoading,
     selectedDate
   );
 
@@ -231,7 +233,9 @@ const LogsSection: React.FC<Props> = ({
         <Log key={[log.lineNumber, i].join(".")}>
           <span className="line-number">{log.lineNumber}.</span>
           <span className="line-timestamp">
-            {log.timestamp ? dayjs(log.timestamp).format("MMM D, YYYY HH:mm:ss") : "-"}
+            {log.timestamp
+              ? dayjs(log.timestamp).format("MMM D, YYYY HH:mm:ss")
+              : "-"}
           </span>
           <LogOuter key={[log.lineNumber, i].join(".")}>
             {log.line?.map((ansi, j) => {
@@ -310,7 +314,7 @@ const LogsSection: React.FC<Props> = ({
               Scroll to bottom
             </Button>
             <Spacer />
-            <Button onClick={() => refresh()}>
+            <Button onClick={refresh}>
               <i className="material-icons">autorenew</i>
               Refresh
             </Button>
@@ -326,8 +330,18 @@ const LogsSection: React.FC<Props> = ({
         </FlexRow>
         <LogsSectionWrapper>
           <StyledLogsSection isFullscreen={isFullscreen}>
-            {loading || !logs.length ? (
+            {loading || (logs.length == 0 && selectedDate == null) ? (
               <Loading message="Waiting for logs..." />
+            ) : logs.length == 0 ? (
+              <>
+                <Message>
+                  No logs found.
+                  <Highlight onClick={refresh}>
+                    <i className="material-icons">autorenew</i>
+                    Refresh
+                  </Highlight>
+                </Message>
+              </>
             ) : (
               <>
                 <LoadMoreButton
@@ -340,14 +354,6 @@ const LogsSection: React.FC<Props> = ({
                   Load Previous
                 </LoadMoreButton>
                 {renderLogs()}
-                {/* <Message>
-            
-            No matching logs found.
-            <Highlight onClick={() => {}}>
-              <i className="material-icons">autorenew</i>
-              Refresh
-            </Highlight>
-          </Message> */}
                 <LoadMoreButton
                   active={selectedDate && logs.length !== 0}
                   role="button"

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

@@ -76,6 +76,7 @@ export const useLogs = (
   searchParam: string,
   notify: (message: string) => void,
   currentChart: ChartType,
+  setLoading: (loading: boolean) => void,
   // if setDate is set, results are not live
   setDate?: Date
 ) => {
@@ -89,7 +90,6 @@ export const useLogs = (
     previousCursor: null,
     nextCursor: null,
   });
-  const [loading, setLoading] = useState(true);
 
   // if we are live:
   // - start date is initially set to 2 weeks ago
@@ -423,6 +423,5 @@ export const useLogs = (
     refresh,
     moveCursor,
     paginationInfo,
-    loading,
   };
 };