Update time range in proper format when either window or time are changed

Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>
Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>

ui/src/logs/components/LogViewerHeader.tsx

@@ -52,12 +52,16 @@ class LogViewerHeader extends PureComponent<Props> {
   }
 
   private get optionsComponents(): JSX.Element {
-    const {
-      onShowOptionsOverlay,
-      timeWindow,
-      onChangeTimeWindow,
-      onChooseTime,
-    } = this.props
+    const {onShowOptionsOverlay, onChangeTimeWindow, onChooseTime} = this.props
+
+    // Todo: Replace w/ getDeep
+    const timeWindow = _.get(this.props, 'timeWindow', {
+      upper: null,
+      lower: 'now() - 1m',
+      seconds: 60,
+      windowOption: '1m',
+      timeOption: 'now',
+    })
 
     return (
       <>

ui/src/logs/containers/LogsPage.tsx

@@ -394,37 +394,49 @@ class LogsPage extends Component<Props, State> {
     this.props.executeQueriesAsync()
   }
 
-  // private handleChooseTimerange = (timeRange: TimeRange) => {
-  //   console.log('TIME RANGE', timeRange)
-  //   this.props.setTimeRangeAsync(timeRange)
-  //   this.fetchNewDataset()
-  // }
-
-  private transformTimeToRange = (timeOption: string) => {
-    const {seconds, windowOption} = this.props.timeWindow
+  private handleChooseTimerange = (timeWindow: TimeWindow) => {
+    const {seconds, windowOption, timeOption} = timeWindow
     let lower = `now() - ${windowOption}`
     let upper = null
 
     if (timeOption !== 'now') {
       const numberTimeOption = moment(timeOption).valueOf()
       const milliseconds = seconds * 10 / 2
-
-      lower = moment(numberTimeOption - milliseconds).format()
-      upper = moment(numberTimeOption + milliseconds).format()
+      console.log('MS', milliseconds)
+      lower =
+        moment
+          .utc(numberTimeOption - milliseconds)
+          .format('YYYY-MM-DDTHH:mm:ss.SSS') + 'Z'
+      upper =
+        moment
+          .utc(numberTimeOption + milliseconds)
+          .format('YYYY-MM-DDTHH:mm:ss.SSS') + 'Z'
     }
 
-    const timeWindow = {
-      ...this.props.timeWindow,
+    const timeRange = {
       lower,
       upper,
+      seconds,
+    }
+
+    console.log('TIME RANGE', timeRange)
+    this.props.setTimeRangeAsync(timeRange)
+    this.fetchNewDataset()
+  }
+
+  private transformTimeToRange = (timeOption: string) => {
+    const timeWindow = {
+      ...this.props.timeWindow,
       timeOption,
     }
 
     this.props.setTimeWindowAsync(timeWindow)
+    this.handleChooseTimerange(timeWindow)
   }
 
   private transformWindowToRange = (timeWindowOption: TimeWindowOption) => {
     const {text, seconds} = timeWindowOption
+
     const timeWindow = {
       ...this.props.timeWindow,
       seconds,
@@ -432,6 +444,7 @@ class LogsPage extends Component<Props, State> {
     }
 
     this.props.setTimeWindowAsync(timeWindow)
+    this.handleChooseTimerange(timeWindow)
   }
 
   private handleChooseSource = (sourceID: string) => {

ui/test/logs/reducers/logs.test.ts

@@ -3,7 +3,14 @@ import {setTimeWindow} from 'src/logs/actions'
 
 describe('Logs.Reducers', () => {
   it('can set a time window', () => {
-    const expected = '1h'
+    const expected = {
+      timeOption: 'now',
+      windowOption: '1h',
+      upper: null,
+      lower: 'now() - 1h',
+      seconds: 3600,
+    }
+
     const actual = reducer(defaultState, setTimeWindow(expected))
     expect(actual.timeWindow).toBe(expected)
   })