chore: styles improvement

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

@@ -10,12 +10,14 @@ import styled from "styled-components";
 import RadioFilter from "components/RadioFilter";
 
 import filterOutline from "assets/filter-outline.svg";
+import time from "assets/time.svg";
 import { Context } from "shared/Context";
 import api from "shared/api";
 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;
@@ -27,6 +29,53 @@ const escapeRegExp = (str: string) => {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
+const QueryModeSelectionToggle = (props: any) => {
+  return (
+    <div
+      style={{
+        marginRight: "10px",
+        display: "flex",
+        gap: "10px",
+      }}
+    >
+      <ToggleButton>
+        <ToggleOption
+          onClick={() => props.setSelectedDate(undefined)}
+          selected={!props.selectedDate}
+        >
+          <span
+            style={{
+              display: "inline-black",
+              width: "0.5rem",
+              height: "0.5rem",
+              marginRight: "5px",
+              borderRadius: "20px",
+              backgroundColor: "rgb(185, 0, 0)",
+              border: "0px",
+              outline: "none",
+              boxShadow: "0px 0px 5px 3px rgba(173,0,0,.3)",
+            }}
+          ></span>
+          Live
+        </ToggleOption>
+        <ToggleOption
+          nudgeLeft
+          onClick={() => props.setSelectedDate(dayjs().toDate())}
+          selected={props.selectedDate}
+        >
+          <TimeIcon src={time} />
+        </ToggleOption>
+      </ToggleButton>
+      {props.selectedDate && (
+        <DateTimePicker
+          startDate={props.selectedDate}
+          setStartDate={props.setSelectedDate}
+        />
+      )}
+    </div>
+  );
+};
+
 const LogsSection: React.FC<Props> = ({
   currentChart,
   isFullscreen,
@@ -121,9 +170,9 @@ const LogsSection: React.FC<Props> = ({
                 />
               </SearchBarWrapper>
             </SearchRowWrapper>
-            <DateTimePicker
-              startDate={selectedDate}
-              setStartDate={setSelectedDate}
+            <QueryModeSelectionToggle
+              selectedDate={selectedDate}
+              setSelectedDate={setSelectedDate}
             />
             <RadioFilter
               icon={filterOutline}
@@ -169,7 +218,6 @@ const LogsSection: React.FC<Props> = ({
             }
             role="button"
             onClick={() => moveCursor(Direction.backward)}
-            ref={scrollToBottomRef}
           >
             Load Previous
           </LoadMoreButton>
@@ -186,10 +234,10 @@ const LogsSection: React.FC<Props> = ({
             active={selectedDate && logs.length !== 0}
             role="button"
             onClick={() => moveCursor(Direction.forward)}
-            ref={scrollToBottomRef}
           >
             Load more
           </LoadMoreButton>
+          <div ref={scrollToBottomRef} />
         </StyledLogsSection>
       </>
     );
@@ -398,6 +446,7 @@ const SearchRow = styled.div`
   background: #26292e;
   border-radius: 5px;
   border: 1px solid #aaaabb33;
+  display: none;
 `;
 
 const SearchRowWrapper = styled(SearchRow)`
@@ -449,7 +498,7 @@ const Log = styled.div`
     color: #949effff;
     opacity: 0.5;
     font-family: monospace;
-    min-width: 45px;
+    min-width: fit-content;
     padding-inline-end: 5px;
   }
   & > .line-number {
@@ -488,3 +537,35 @@ const LoadMoreButton = styled.div<{ active: boolean }>`
   cursor: pointer;
   font-family: monospace;
 `;
+
+const ToggleOption = styled.div<{ selected: boolean; nudgeLeft?: boolean }>`
+  padding: 0 10px;
+  color: ${(props) => (props.selected ? "" : "#494b4f")};
+  border: 1px solid #494b4f;
+  height: 100%;
+  display: flex;
+  margin-left: ${(props) => (props.nudgeLeft ? "-1px" : "")};
+  align-items: center;
+  border-radius: ${(props) =>
+    props.nudgeLeft ? "0 5px 5px 0" : "5px 0 0 5px"};
+  :hover {
+    border: 1px solid #7a7b80;
+    z-index: 999;
+  }
+`;
+
+const ToggleButton = styled.div`
+  background: #26292e;
+  border-radius: 5px;
+  font-size: 13px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const TimeIcon = styled.img`
+  width: 16px;
+  height: 16px;
+  z-index: 999;
+`;