Reorganize actions to be async

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

ui/src/logs/actions/index.ts

@@ -32,6 +32,7 @@ import {
   TableData,
   LogConfig,
   TimeRange,
+  TimeBounds,
   TimeWindow,
   TimeMarker,
 } from 'src/types/logs'
@@ -61,7 +62,7 @@ type GetState = () => State
 export enum ActionTypes {
   SetSource = 'LOGS_SET_SOURCE',
   SetNamespaces = 'LOGS_SET_NAMESPACES',
-  SetTimeRange = 'LOGS_SET_TIMERANGE',
+  SetTimeBounds = 'LOGS_SET_TIMEBOUNDS',
   SetTimeWindow = 'LOGS_SET_TIMEWINDOW',
   SetTimeMarker = 'LOGS_SET_TIMEMARKER',
   SetNamespace = 'LOGS_SET_NAMESPACE',
@@ -183,10 +184,10 @@ interface SetNamespaceAction {
   }
 }
 
-interface SetTimeRangeAction {
+interface SetTimeBoundsAction {
-  type: ActionTypes.SetTimeRange
+  type: ActionTypes.SetTimeBounds
   payload: {
-    timeRange: TimeRange
+    timeBounds: TimeBounds
   }
 }
 
@@ -256,7 +257,7 @@ export interface SetConfigsAction {
 export type Action =
   | SetSourceAction
   | SetNamespacesAction
-  | SetTimeRangeAction
+  | SetTimeBoundsAction
   | SetTimeWindowAction
   | SetTimeMarkerAction
   | SetNamespaceAction
@@ -355,6 +356,11 @@ export const setTimeMarker = (timeMarker: TimeMarker): SetTimeMarkerAction => ({
   payload: {timeMarker},
 })
 
+export const setTimeBounds = (timeBounds: TimeBounds): SetTimeBoundsAction => ({
+  type: ActionTypes.SetTimeBounds,
+  payload: {timeBounds},
+})
+
 export const executeTableForwardQueryAsync = () => async (
   dispatch,
   getState: GetState
@@ -415,7 +421,17 @@ export const executeTableBackwardQueryAsync = () => async (
   try {
     dispatch(incrementQueryCount())
 
-    const query = buildBackwardLogQuery(time, queryConfig, filters, searchTerm)
+    const queryTimeRange = {
+      upper: timeRange.upper,
+      lower: timeRange.lower,
+      seconds: timeRange.seconds,
+    }
+    const query = buildLogQuery(
+      queryTimeRange,
+      queryConfig,
+      filters,
+      searchTerm
+    )
     const response = await executeQueryAsync(
       proxyLink,
       namespace,
@@ -543,7 +559,13 @@ export const setHistogramQueryConfigAsync = () => async (
   const timeRange = getDeep<TimeRange | null>(state, 'logs.timeRange', null)
 
   if (timeRange && namespace) {
-    const queryConfig = buildHistogramQueryConfig(namespace, timeRange)
+    const queryTimeRange = {
+      upper: timeRange.upper,
+      lower: timeRange.lower,
+      seconds: timeRange.seconds,
+    }
+
+    const queryConfig = buildHistogramQueryConfig(namespace, queryTimeRange)
 
     dispatch({
       type: ActionTypes.SetHistogramQueryConfig,
@@ -687,17 +709,7 @@ export const setNamespaces = (
   },
 })
 
-export const setTimeRange = timeRange => ({
+export const setTimeRangeAsync = () => async (dispatch): Promise<void> => {
-  type: ActionTypes.SetTimeRange,
-  payload: {
-    timeRange,
-  },
-})
-
-export const setTimeRangeAsync = (timeRange: TimeRange) => async (
-  dispatch
-): Promise<void> => {
-  dispatch(setTimeRange(timeRange))
   dispatch(setHistogramQueryConfigAsync())
   dispatch(setTableQueryConfigAsync())
 }

ui/src/logs/containers/LogsPage.tsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import uuid from 'uuid'
 import _ from 'lodash'
+import moment from 'moment'
 import {connect} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
 
@@ -9,6 +10,7 @@ import {
   setTableRelativeTimeAsync,
   getSourceAndPopulateNamespacesAsync,
   setTimeRangeAsync,
+  setTimeBounds,
   setTimeWindow,
   setTimeMarker,
   setNamespaceAsync,
@@ -49,6 +51,7 @@ import {
   TimeRange,
   TimeWindow,
   TimeMarker,
+  TimeBounds,
 } from 'src/types/logs'
 import {applyChangesToTableData} from 'src/logs/utils/table'
 
@@ -60,6 +63,7 @@ interface Props {
   getSource: (sourceID: string) => void
   getSources: () => void
   setTimeRangeAsync: (timeRange: TimeRange) => void
+  setTimeBounds: (timeBounds: TimeBounds) => void
   setTimeWindow: (timeWindow: TimeWindow) => void
   setTimeMarker: (timeMarker: TimeMarker) => void
   setNamespaceAsync: (namespace: Namespace) => void
@@ -395,45 +399,37 @@ class LogsPage extends Component<Props, State> {
     this.props.executeQueriesAsync()
   }
 
-  // HANDLE CHOOSE TIMERANGE
+  private handleSetTimeBounds = async () => {
-  // private handleChooseTimerange = (timeWindow: TimeWindow) => {
+    const {seconds, windowOption, timeOption} = this.props.timeRange
-  //   const {seconds, windowOption, timeOption} = timeWindow
+    let lower = `now() - ${windowOption}`
-  //   let lower = `now() - ${windowOption}`
+    let upper = null
-  //   let upper = null
 
-  //   if (timeOption !== 'now') {
+    if (timeOption !== 'now') {
-  //     const numberTimeOption = moment(timeOption).valueOf()
+      const numberTimeOption = moment(timeOption).valueOf()
-  //     const milliseconds = seconds * 10 / 2
+      const milliseconds = seconds * 10 / 2
-  //     console.log('MS', milliseconds)
+      lower = moment(numberTimeOption - milliseconds).toISOString()
-  //     lower =
+      upper = moment(numberTimeOption + milliseconds).toISOString()
-  //       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 timeRange: TimeRange = {
-  //     lower,
-  //     upper,
-  //     seconds,
-  //   }
-
-  //   console.log('TIME RANGE', timeRange)
-  //   this.props.setTimeRangeAsync(timeRange)
-  //   this.fetchNewDataset()
-  // }
-
-  private handleSetTimeWindow = (timeWindow: TimeWindow) => {
-    // console.log('TIME WINDOW', timeWindow)
-    this.props.setTimeWindow(timeWindow)
     }
 
-  private handleSetTimeMarker = (timeMarker: TimeMarker) => {
+    const timeBounds: TimeBounds = {
-    // console.log('TIME MARKER', timeMarker)
+      lower,
-    this.props.setTimeMarker(timeMarker)
+      upper,
+    }
+
+    await this.props.setTimeBounds(timeBounds)
+
+    this.props.setTimeRangeAsync(this.props.timeRange)
+    this.fetchNewDataset()
+  }
+
+  private handleSetTimeWindow = async (timeWindow: TimeWindow) => {
+    await this.props.setTimeWindow(timeWindow)
+    this.handleSetTimeBounds()
+  }
+
+  private handleSetTimeMarker = async (timeMarker: TimeMarker) => {
+    await this.props.setTimeMarker(timeMarker)
+    this.handleSetTimeBounds()
   }
 
   private handleChooseSource = (sourceID: string) => {
@@ -561,6 +557,7 @@ const mapDispatchToProps = {
   getSource: getSourceAndPopulateNamespacesAsync,
   getSources: getSourcesAsync,
   setTimeRangeAsync,
+  setTimeBounds,
   setTimeWindow,
   setTimeMarker,
   setNamespaceAsync,

ui/src/logs/reducers/index.ts

@@ -182,8 +182,9 @@ export default (state: LogsState = defaultState, action: Action) => {
       return {...state, currentSource: action.payload.source}
     case ActionTypes.SetNamespaces:
       return {...state, currentNamespaces: action.payload.namespaces}
-    case ActionTypes.SetTimeRange:
+    case ActionTypes.SetTimeBounds:
-      return {...state, timeRange: action.payload.timeRange}
+      const {upper, lower} = action.payload.timeBounds
+      return {...state, timeRange: {...state.timeRange, upper, lower}}
     case ActionTypes.SetTimeWindow:
       const {windowOption, seconds} = action.payload.timeWindow
       return {...state, timeRange: {...state.timeRange, windowOption, seconds}}

ui/src/types/logs.ts

@@ -87,6 +87,11 @@ export interface TimeRange {
   timeOption: string
 }
 
+export interface TimeBounds {
+  upper: string | null
+  lower: string
+}
+
 export interface TimeWindow {
   seconds: number
   windowOption: string