Merge branch 'belanger/agent-v3-integration' into dev

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

@@ -13,7 +13,6 @@ type Props = {
 const DateTimePicker: React.FC<Props> = ({ startDate, setStartDate }) => {
   return (
     <DateTimePickerWrapper>
-      <TimeIcon src={time} />
       <link
         rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css"
@@ -53,13 +52,7 @@ const DateTimePickerWrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding-right: 42px;
-  margin-right: 10px;
-  padding-left: 8px;
-  height: 30px;
-  border-radius: 5px;
-  border: 1px solid #494b4f;
-  height: 30px;
-  background: #26292e;
+  margin-left: 2px;
 `;
 
 const StyledDatePicker = styled(DatePicker)`
@@ -67,7 +60,6 @@ const StyledDatePicker = styled(DatePicker)`
   width: calc(100% + 42px);
   position: relative;
   border: none;
-  margin-bottom: 3px;
   outline-width: 0;
   background: transparent;
   text-align: center;

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -323,7 +323,7 @@ export default class JobResource extends Component<PropsType, StateType> {
     return (
       <>
         <StyledJob>
-          <MainRow onClick={this.expandJob}>
+          <MainRow onClick={() => this.props.expandJob(this.props.job)}>
             <Flex>
               <Icon src={icon && icon} />
               <Description>
@@ -360,12 +360,12 @@ export default class JobResource extends Component<PropsType, StateType> {
                     delete
                   </i>
                 )}
-                <i
+                {/* <i
                   className="material-icons"
                   onClick={() => this.props.expandJob(this.props.job)}
                 >
                   open_in_new
-                </i>
+                </i> */}
               </MaterialIconTray>
             </EndWrapper>
           </MainRow>

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

@@ -32,7 +32,7 @@ type Props = {
   isFullscreen: boolean;
   setIsFullscreen: (x: boolean) => void;
   initData?: InitLogData;
-  setInitData: (initData: InitLogData) => void;
+  setInitData?: (initData: InitLogData) => void;
   overridingPodName?: string;
 };
 
@@ -59,21 +59,7 @@ const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
           onClick={() => props.setSelectedDate(undefined)}
           selected={!props.selectedDate}
         >
-          <span
-            style={{
-              display: "inline-black",
-              width: "0.5rem",
-              height: "0.5rem",
-              marginRight: "5px",
-              borderRadius: "20px",
-              backgroundColor: "#ed5f85",
-              border: "0px",
-              outline: "none",
-              boxShadow: props.selectedDate
-                ? "none"
-                : "0px 0px 5px 1px #ed5f85",
-            }}
-          ></span>
+          <Dot selected={!props.selectedDate} />
           Live
         </ToggleOption>
         <ToggleOption
@@ -81,19 +67,34 @@ const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
           onClick={() => props.setSelectedDate(dayjs().toDate())}
           selected={!!props.selectedDate}
         >
-          <TimeIcon src={time} />
+          <TimeIcon 
+            src={time} 
+            selected={!!props.selectedDate}
+          />
+          {props.selectedDate && (
+            <DateTimePicker
+              startDate={props.selectedDate}
+              setStartDate={props.setSelectedDate}
+            />
+          )}
         </ToggleOption>
       </ToggleButton>
-      {props.selectedDate && (
-        <DateTimePicker
-          startDate={props.selectedDate}
-          setStartDate={props.setSelectedDate}
-        />
-      )}
     </div>
   );
 };
 
+const Dot = styled.div<{ selected?: boolean }>`
+  display: inline-black;
+  width: 8px;
+  height: 8px;
+  margin-right: 9px;
+  border-radius: 20px;
+  background: ${props => props.selected ? "#ed5f85" : "#ffffff22"};
+  border: 0px;
+  outline: none;
+  box-shadow: ${props => props.selected ? "0px 0px 5px 1px #ed5f85" : ""};
+`;
+
 const LogsSection: React.FC<Props> = ({
   currentChart,
   isFullscreen,
@@ -146,7 +147,7 @@ const LogsSection: React.FC<Props> = ({
           cluster_id: currentCluster.id,
         }
       )
-      .then((res) => {
+      .then((res: any) => {
         setPodFilterOpts(_.uniq(res.data ?? []));
 
         // only set pod filter if the current pod is not found in the resulting data
@@ -618,8 +619,9 @@ const ToggleButton = styled.div`
   cursor: pointer;
 `;
 
-const TimeIcon = styled.img`
+const TimeIcon = styled.img<{ selected?: boolean }>`
   width: 16px;
   height: 16px;
   z-index: 999;
+  opacity: ${props => props.selected ? "" : "50%"}
 `;