From dfdf29de068672d0354cf383583b40fcd88a4c14 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 11 Jul 2018 17:57:55 -0700
Subject: [PATCH] Fine tune placement and text of time selection dropdowns

Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>
Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>
---
 ui/src/logs/components/LogViewerHeader.tsx    |  8 +++----
 ui/src/logs/components/TimeWindowDropdown.tsx | 24 +++++++++++++------
 ui/src/logs/constants/index.ts                |  2 ++
 ui/src/logs/containers/LogsPage.tsx           |  4 ++--
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx
index ed589e5402..299ef9e4df 100644
--- a/ui/src/logs/components/LogViewerHeader.tsx
+++ b/ui/src/logs/components/LogViewerHeader.tsx
@@ -78,14 +78,14 @@ class LogViewerHeader extends PureComponent<Props> {
           selected={this.selectedNamespace}
           onChoose={this.handleChooseNamespace}
         />
-        <TimeWindowDropdown
-          selectedTimeWindow={timeRange.windowOption}
-          onSetTimeWindow={onSetTimeWindow}
-        />
         <TimeMarkerDropdown
           onSetTimeMarker={onSetTimeMarker}
           selectedTimeMarker={timeRange.timeOption}
         />
+        <TimeWindowDropdown
+          selectedTimeWindow={timeRange}
+          onSetTimeWindow={onSetTimeWindow}
+        />
         <Authorized requiredRole={EDITOR_ROLE}>
           <button
             className="btn btn-sm btn-square btn-default"
diff --git a/ui/src/logs/components/TimeWindowDropdown.tsx b/ui/src/logs/components/TimeWindowDropdown.tsx
index ec100a9a17..e155f0c477 100644
--- a/ui/src/logs/components/TimeWindowDropdown.tsx
+++ b/ui/src/logs/components/TimeWindowDropdown.tsx
@@ -1,21 +1,19 @@
 import React, {Component} from 'react'
 import Dropdown from 'src/shared/components/Dropdown'
 import {TIME_RANGE_VALUES} from 'src/logs/constants'
-import {TimeWindow} from 'src/types/logs'
+import {TimeWindow, TimeRange} from 'src/types/logs'
 
 interface Props {
   onSetTimeWindow: (timeWindow: TimeWindow) => void
-  selectedTimeWindow: string
+  selectedTimeWindow: TimeRange
 }
 
 class TimeWindowDropdown extends Component<Props> {
   public render() {
-    const {selectedTimeWindow} = this.props
-
     return (
       <Dropdown
-        className="dropdown-80"
-        selected={selectedTimeWindow}
+        className="dropdown-90"
+        selected={this.selected}
         onChoose={this.handleChoose}
         buttonSize="btn-sm"
         buttonColor="btn-default"
@@ -24,7 +22,19 @@ class TimeWindowDropdown extends Component<Props> {
     )
   }
 
-  public handleChoose = dropdownItem => {
+  private get selected(): string {
+    const {
+      selectedTimeWindow: {timeOption, windowOption},
+    } = this.props
+
+    if (timeOption === 'now') {
+      return `- ${windowOption}`
+    }
+
+    return `+/- ${windowOption}`
+  }
+
+  private handleChoose = (dropdownItem): void => {
     const {onSetTimeWindow} = this.props
     const {text, seconds} = dropdownItem
 
diff --git a/ui/src/logs/constants/index.ts b/ui/src/logs/constants/index.ts
index 43f5d59c7e..99e06ea8dd 100644
--- a/ui/src/logs/constants/index.ts
+++ b/ui/src/logs/constants/index.ts
@@ -152,3 +152,5 @@ export const TIME_RANGE_VALUES = [
   {text: '10m', seconds: 600},
   {text: '15m', seconds: 900},
 ]
+
+export const SECONDS_TO_MS = 1000
diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx
index ae509a2b09..112dcff010 100644
--- a/ui/src/logs/containers/LogsPage.tsx
+++ b/ui/src/logs/containers/LogsPage.tsx
@@ -38,7 +38,7 @@ import {
   filterTableColumns,
 } from 'src/dashboards/utils/tableGraph'
 
-import {SeverityFormatOptions} from 'src/logs/constants'
+import {SeverityFormatOptions, SECONDS_TO_MS} from 'src/logs/constants'
 import {Source, Namespace} from 'src/types'
 
 import {HistogramData, TimePeriod} from 'src/types/histogram'
@@ -326,7 +326,7 @@ class LogsPage extends PureComponent<Props, State> {
 
     if (timeOption !== 'now') {
       const numberTimeOption = new Date(timeOption).valueOf()
-      const milliseconds = seconds * 10 / 2
+      const milliseconds = seconds * SECONDS_TO_MS
       lower = moment(numberTimeOption - milliseconds).toISOString()
       upper = moment(numberTimeOption + milliseconds).toISOString()
     }