fix banner merge conflicts

dashboard/package.json

@@ -49,6 +49,7 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "^16.13.1",
     "react-error-boundary": "^3.1.3",
+    "react-hot-toast": "^2.4.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",

dashboard/src/components/Banner.tsx

@@ -6,16 +6,17 @@ import warning from "assets/warning.png";
 
 interface Props {
   type?: string;
+  icon?: React.ReactNode;
   children: React.ReactNode;
   noMargin?: boolean;
 }
 
-const Banner: React.FC<Props> = ({ 
-  type, 
-  children,
-  noMargin,
-}) => {
+const Banner: React.FC<Props> = ({ type, icon, children, noMargin }) => {
   const renderIcon = () => {
+    if (icon) {
+      return icon;
+    }
+
     if (type === "error" || type === "warning") {
       return <i className="material-icons-round">warning</i>;
     }
@@ -35,19 +36,19 @@ const Banner: React.FC<Props> = ({
 
 export default Banner;
 
-const StyledBanner = styled.div<{ 
+const StyledBanner = styled.div<{
   color?: string;
   noMargin?: boolean;
 }>`
   height: 40px;
   width: 100%;
-  margin: ${props => props.noMargin ? "5px 0 10px" : ""};
+  margin: ${(props) => (props.noMargin ? "5px 0 10px" : "")};
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
   display: flex;
   border: 1px solid ${(props) => props.color || "#ffffff00"};
   border-radius: 8px;
-  padding-left: 14px;
+  padding: 14px;
   color: ${(props) => props.color || "#ffffff"};
   align-items: center;
   background: #ffffff11;

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

@@ -20,6 +20,7 @@ import dayjs from "dayjs";
 import Loading from "components/Loading";
 import _ from "lodash";
 import { ChartType } from "shared/types";
+import Banner from "components/Banner";
 
 export type InitLogData = Partial<{
   podName: string;
@@ -118,11 +119,21 @@ const LogsSection: React.FC<Props> = ({
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(
     initData.timestamp ? dayjs(initData.timestamp).toDate() : undefined
   );
+  const [notification, setNotification] = useState<string>();
+
+  const notify = (message: string) => {
+    setNotification(message);
+
+    setTimeout(() => {
+      setNotification(undefined);
+    }, 3000);
+  };
 
   const { loading, logs, refresh, moveCursor, paginationInfo } = useLogs(
     podFilter,
     currentChart.namespace,
     enteredSearchText,
+    notify,
     currentChart,
     selectedDate
   );
@@ -300,6 +311,9 @@ const LogsSection: React.FC<Props> = ({
             </>
           )}
           <div ref={scrollToBottomRef} />
+          <NotificationWrapper active={!!notification}>
+            <Banner>{notification}</Banner>
+          </NotificationWrapper>
         </StyledLogsSection>
       </>
     );
@@ -533,6 +547,7 @@ const StyledLogsSection = styled.div<{ isFullscreen: boolean }>`
   animation-fill-mode: forwards;
   overflow-y: auto;
   overflow-wrap: break-word;
+  position: relative;
   @keyframes floatIn {
     from {
       opacity: 0;
@@ -632,3 +647,28 @@ const TimeIcon = styled.img<{ selected?: boolean }>`
   z-index: 2;
   opacity: ${(props) => (props.selected ? "" : "50%")};
 `;
+
+const NotificationWrapper = styled.div<{ active?: boolean }>`
+  position: absolute;
+  bottom: 10px;
+  display: ${(props) => (props.active ? "flex" : "none")};
+  justify-content: center;
+  align-items: center;
+  left: 50%;
+  transform: translateX(-50%);
+  width: fit-content;
+  padding-inline: 10px;
+  background: #101420;
+  animation: bounceIn 0.3s ease-out;
+
+  @keyframes bounceIn {
+    0% {
+      transform: translateZ(-1400px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateZ(0);
+      opacity: 1;
+    }
+  }
+`;

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

@@ -58,6 +58,7 @@ export const useLogs = (
   currentPod: string,
   namespace: string,
   searchParam: string,
+  notify: (message: string) => void,
   currentChart: ChartType,
   // if setDate is set, results are not live
   setDate?: Date
@@ -336,8 +337,16 @@ export const useLogs = (
         Direction.forward
       );
 
+      const logsToUpdate = paginationInfo.nextCursor
+        ? newLogs.slice(1)
+        : newLogs;
+
       // If previously we had next cursor set, it is likely that the log might have a duplicate entry so we ignore the first line
-      updateLogs(paginationInfo.nextCursor ? newLogs.slice(1) : newLogs);
+      updateLogs(logsToUpdate);
+
+      if (!logsToUpdate.length) {
+        notify("You are already at the latest logs");
+      }
 
       setPaginationInfo((paginationInfo) => ({
         ...paginationInfo,