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

@@ -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"

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
 

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

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()
     }