From 95fab010da24da1edede2209d62abdedb328436a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 12 Jul 2018 17:16:33 -0700
Subject: [PATCH] Tie together both time dropdowns

---
 ui/src/logs/components/LogViewerHeader.tsx    |  9 +----
 .../logs/components/PointInTimeDropDown.tsx   |  2 +-
 ui/src/logs/containers/LogsPage.tsx           | 33 +++++++++++++------
 ui/src/logs/data/timePoints.ts                |  4 +++
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index c1df44c24..a304bbfc3 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -8,10 +8,9 @@ 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'
 import TimeWindowDropdown from 'src/logs/components/TimeWindowDropdown'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
-import {TimeRange, TimeWindow, TimeMarker, LiveUpdating} from 'src/types/logs'
+import {TimeRange, TimeWindow, LiveUpdating} from 'src/types/logs'
 
 interface SourceItem {
   id: string
@@ -29,7 +28,6 @@ interface Props {
   onChangeLiveUpdatingStatus: () => void
   onShowOptionsOverlay: () => void
   timeRange: TimeRange
-  onSetTimeMarker: (timeMarker: TimeMarker) => void
   onSetTimeWindow: (timeWindow: TimeWindow) => void
   customTime?: string
   relativeTime?: number
@@ -61,7 +59,6 @@ class LogViewerHeader extends PureComponent<Props> {
     const {
       onShowOptionsOverlay,
       onSetTimeWindow,
-      onSetTimeMarker,
       customTime,
       relativeTime,
       onChooseCustomTime,
@@ -98,10 +95,6 @@ class LogViewerHeader extends PureComponent<Props> {
           onChooseCustomTime={onChooseCustomTime}
           onChooseRelativeTime={onChooseRelativeTime}
         />
-        <TimeMarkerDropdown
-          onSetTimeMarker={onSetTimeMarker}
-          selectedTimeMarker={timeRange.timeOption}
-        />
         <TimeWindowDropdown
           selectedTimeWindow={timeRange}
           onSetTimeWindow={onSetTimeWindow}
diff --git a/ui/src/logs/components/PointInTimeDropDown.tsx b/ui/src/logs/components/PointInTimeDropDown.tsx
index 0eae9feec..f08d6fb87 100644
--- a/ui/src/logs/components/PointInTimeDropDown.tsx
+++ b/ui/src/logs/components/PointInTimeDropDown.tsx
@@ -133,7 +133,7 @@ class TimeRangeDropdown extends Component<Props, State> {
         return point.text
       }
 
-      return 'None'
+      return 'now'
     }
 
     return format(this.props.customTime)
diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx
index 06d18b792..6f63074be 100644
--- a/ui/src/logs/containers/LogsPage.tsx
+++ b/ui/src/logs/containers/LogsPage.tsx
@@ -228,14 +228,33 @@ class LogsPage extends Component<Props, State> {
     )
   }
 
-  private handleChooseCustomTime = (time: string) => {
+  private handleChooseCustomTime = async (time: string) => {
     this.props.setTableCustomTime(time)
     this.setState({hasScrolled: false})
+
+    await this.props.setTimeMarker({
+      timeOption: time,
+    })
+
+    this.handleSetTimeBounds()
   }
 
-  private handleChooseRelativeTime = (time: number) => {
+  private handleChooseRelativeTime = async (time: number) => {
     this.props.setTableRelativeTime(time)
     this.setState({hasScrolled: false})
+
+    let timeOption = {
+      timeOption: moment()
+        .subtract(time, 'seconds')
+        .toISOString(),
+    }
+
+    if (time === 0) {
+      timeOption = {timeOption: 'now'}
+    }
+
+    await this.props.setTimeMarker(timeOption)
+    this.handleSetTimeBounds()
   }
 
   private get tableData(): TableData {
@@ -353,7 +372,6 @@ class LogsPage extends Component<Props, State> {
     return (
       <LogViewerHeader
         timeRange={timeRange}
-        onSetTimeMarker={this.handleSetTimeMarker}
         onSetTimeWindow={this.handleSetTimeWindow}
         liveUpdating={this.liveUpdatingStatus}
         availableSources={sources}
@@ -418,9 +436,9 @@ class LogsPage extends Component<Props, State> {
   }
 
   private handleBarClick = (time: string): void => {
-    const timeOption = moment(time).toISOString()
+    const formattedTime = moment(time).toISOString()
 
-    this.handleSetTimeMarker({timeOption})
+    this.handleChooseCustomTime(formattedTime)
   }
 
   private handleSetTimeBounds = async () => {
@@ -451,11 +469,6 @@ class LogsPage extends Component<Props, State> {
     this.handleSetTimeBounds()
   }
 
-  private handleSetTimeMarker = async (timeMarker: TimeMarker) => {
-    await this.props.setTimeMarker(timeMarker)
-    this.handleSetTimeBounds()
-  }
-
   private handleChooseSource = (sourceID: string) => {
     this.props.getSource(sourceID)
   }
diff --git a/ui/src/logs/data/timePoints.ts b/ui/src/logs/data/timePoints.ts
index 805d740b5..03cd8d575 100644
--- a/ui/src/logs/data/timePoints.ts
+++ b/ui/src/logs/data/timePoints.ts
@@ -1,4 +1,8 @@
 export default [
+  {
+    text: 'now',
+    value: 0,
+  },
   {
     text: '1m ago',
     value: 60,