Move PointInTimeDropdown to page header

ui/src/logs/components/LogViewerHeader.tsx

@@ -5,6 +5,7 @@ import {Source, Namespace} from 'src/types'
 import RadioButtons from 'src/reusable_ui/components/radio_buttons/RadioButtons'
 import {ButtonShape, ComponentColor} from 'src/reusable_ui/types'
 import Dropdown from 'src/shared/components/Dropdown'
+import PointInTimeDropDown from 'src/logs/components/PointInTimeDropDown'
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
 import PageHeaderTitle from 'src/reusable_ui/components/page_layout/PageHeaderTitle'
 import TimeMarkerDropdown from 'src/logs/components/TimeMarkerDropdown'
@@ -30,6 +31,10 @@ interface Props {
   timeRange: TimeRange
   onSetTimeMarker: (timeMarker: TimeMarker) => void
   onSetTimeWindow: (timeWindow: TimeWindow) => void
+  customTime?: string
+  relativeTime?: number
+  onChooseCustomTime: (time: string) => void
+  onChooseRelativeTime: (time: number) => void
 }
 
 class LogViewerHeader extends PureComponent<Props> {
@@ -53,7 +58,15 @@ class LogViewerHeader extends PureComponent<Props> {
   }
 
   private get optionsComponents(): JSX.Element {
-    const {onShowOptionsOverlay, onSetTimeWindow, onSetTimeMarker} = this.props
+    const {
+      onShowOptionsOverlay,
+      onSetTimeWindow,
+      onSetTimeMarker,
+      customTime,
+      relativeTime,
+      onChooseCustomTime,
+      onChooseRelativeTime,
+    } = this.props
 
     // Todo: Replace w/ getDeep
     const timeRange = _.get(this.props, 'timeRange', {
@@ -79,6 +92,12 @@ class LogViewerHeader extends PureComponent<Props> {
           selected={this.selectedNamespace}
           onChoose={this.handleChooseNamespace}
         />
+        <PointInTimeDropDown
+          customTime={customTime}
+          relativeTime={relativeTime}
+          onChooseCustomTime={onChooseCustomTime}
+          onChooseRelativeTime={onChooseRelativeTime}
+        />
         <TimeMarkerDropdown
           onSetTimeMarker={onSetTimeMarker}
           selectedTimeMarker={timeRange.timeOption}

ui/src/logs/containers/LogsPage.tsx

@@ -32,7 +32,6 @@ import OptionsOverlay from 'src/logs/components/OptionsOverlay'
 import SearchBar from 'src/logs/components/LogsSearchBar'
 import FilterBar from 'src/logs/components/LogsFilterBar'
 import LogsTable from 'src/logs/components/LogsTable'
-import PointInTimeDropDown from 'src/logs/components/PointInTimeDropDown'
 import {getDeep} from 'src/utils/wrappers'
 import {colorForSeverity} from 'src/logs/utils/colors'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
@@ -164,7 +163,7 @@ class LogsPage extends Component<Props, State> {
   }
 
   public render() {
-    const {searchTerm, filters, queryCount, timeRange, tableTime} = this.props
+    const {searchTerm, filters, queryCount, timeRange} = this.props
 
     return (
       <>
@@ -172,17 +171,6 @@ class LogsPage extends Component<Props, State> {
           {this.header}
           <div className="page-contents logs-viewer">
             <LogsGraphContainer>{this.chart}</LogsGraphContainer>
-            <div style={{height: '50px', position: 'relative'}}>
-              <div style={{position: 'absolute', right: '10px', top: '10px'}}>
-                <span style={{marginRight: '10px'}}>Go to </span>
-                <PointInTimeDropDown
-                  customTime={tableTime.custom}
-                  relativeTime={tableTime.relative}
-                  onChooseCustomTime={this.handleChooseCustomTime}
-                  onChooseRelativeTime={this.handleChooseRelativeTime}
-                />
-              </div>
-            </div>
             <SearchBar
               searchString={searchTerm}
               onSearch={this.handleSubmitSearch}
@@ -359,6 +347,7 @@ class LogsPage extends Component<Props, State> {
       currentNamespaces,
       currentNamespace,
       timeRange,
+      tableTime,
     } = this.props
 
     return (
@@ -375,6 +364,10 @@ class LogsPage extends Component<Props, State> {
         currentNamespace={currentNamespace}
         onChangeLiveUpdatingStatus={this.handleChangeLiveUpdatingStatus}
         onShowOptionsOverlay={this.handleToggleOverlay}
+        customTime={tableTime.custom}
+        relativeTime={tableTime.relative}
+        onChooseCustomTime={this.handleChooseCustomTime}
+        onChooseRelativeTime={this.handleChooseRelativeTime}
       />
     )
   }