chore: add loader

dashboard/src/components/Loading.tsx

@@ -6,6 +6,7 @@ type PropsType = {
   offset?: string;
   width?: string;
   height?: string;
+  message?: string;
 };
 
 type StateType = {};
@@ -21,6 +22,9 @@ export default class Loading extends Component<PropsType, StateType> {
         height={this.props.height || "100%"}
       >
         <Spinner src={loading} />
+        {this.props.message ? (
+          <StyledMessage>{this.props.message}</StyledMessage>
+        ) : null}
       </StyledLoading>
     );
   }
@@ -38,5 +42,11 @@ const StyledLoading = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   margin-top: ${(props: StyleLoadingProps) => props.offset};
 `;
+
+const StyledMessage = styled.div`
+  margin-block: 15px;
+  color: #aaaabb;
+`;

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

@@ -17,6 +17,8 @@ import { Direction, useLogs } from "./useAgentLogs";
 import Anser from "anser";
 import DateTimePicker from "components/date-time-picker/DateTimePicker";
 import dayjs from "dayjs";
+import Loading from "components/Loading";
+import _ from "lodash";
 
 type Props = {
   currentChart?: any;
@@ -96,7 +98,7 @@ const LogsSection: React.FC<Props> = ({
   const [enteredSearchText, setEnteredSearchText] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
 
-  const { logs, refresh, moveCursor, paginationInfo } = useLogs(
+  const { loading, logs, refresh, moveCursor, paginationInfo } = useLogs(
     podFilter,
     currentChart.namespace,
     enteredSearchText,
@@ -116,7 +118,7 @@ const LogsSection: React.FC<Props> = ({
         }
       )
       .then((res) => {
-        setPodFilterOpts(res.data);
+        setPodFilterOpts(_.uniq(res.data ?? []));
         setPodFilter(res.data[0]);
       });
   }, []);
@@ -225,18 +227,22 @@ const LogsSection: React.FC<Props> = ({
           </Flex>
         </FlexRow>
         <StyledLogsSection isFullscreen={isFullscreen}>
-          <LoadMoreButton
-            active={
-              logs.length !== 0 &&
-              (!selectedDate || paginationInfo.previousCursor !== null)
-            }
-            role="button"
-            onClick={onLoadPrevious}
-          >
-            Load Previous
-          </LoadMoreButton>
-          {renderLogs()}
-          {/* <Message>
+          {loading || !logs.length ? (
+            <Loading message="Waiting for logs..." />
+          ) : (
+            <>
+              <LoadMoreButton
+                active={
+                  logs.length !== 0 &&
+                  (!selectedDate || paginationInfo.previousCursor !== null)
+                }
+                role="button"
+                onClick={onLoadPrevious}
+              >
+                Load Previous
+              </LoadMoreButton>
+              {renderLogs()}
+              {/* <Message>
             
             No matching logs found.
             <Highlight onClick={() => {}}>
@@ -244,14 +250,16 @@ const LogsSection: React.FC<Props> = ({
               Refresh
             </Highlight>
           </Message> */}
-          <LoadMoreButton
-            active={selectedDate && logs.length !== 0}
-            role="button"
-            onClick={() => moveCursor(Direction.forward)}
-          >
-            Load more
-          </LoadMoreButton>
-          <div ref={scrollToBottomRef} />
+              <LoadMoreButton
+                active={selectedDate && logs.length !== 0}
+                role="button"
+                onClick={() => moveCursor(Direction.forward)}
+              >
+                Load more
+              </LoadMoreButton>
+              <div ref={scrollToBottomRef} />
+            </>
+          )}
         </StyledLogsSection>
       </>
     );

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

@@ -68,6 +68,7 @@ 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
@@ -230,6 +231,7 @@ export const useLogs = (
       return;
     }
 
+    setLoading(true);
     setLogs([]);
     flushLogsBuffer(true);
     const websocketKey = `${currentPod}-${namespace}-websocket`;
@@ -251,6 +253,8 @@ export const useLogs = (
 
     closeWebsocket(websocketKey);
 
+    setLoading(false);
+
     if (isLive) {
       setupWebsocket(websocketKey);
     }
@@ -347,5 +351,6 @@ export const useLogs = (
     refresh,
     moveCursor,
     paginationInfo,
+    loading,
   };
 };