Make histogram zoom interaction optional

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

ui/src/logs/actions/index.ts

@@ -63,7 +63,6 @@ export enum ActionTypes {
   SetHistogramData = 'LOGS_SET_HISTOGRAM_DATA',
   SetTableQueryConfig = 'LOGS_SET_TABLE_QUERY_CONFIG',
   SetTableData = 'LOGS_SET_TABLE_DATA',
-  ChangeZoom = 'LOGS_CHANGE_ZOOM',
   SetSearchTerm = 'LOGS_SET_SEARCH_TERM',
   AddFilter = 'LOGS_ADD_FILTER',
   RemoveFilter = 'LOGS_REMOVE_FILTER',
@@ -188,13 +187,6 @@ interface SetSearchTerm {
   }
 }
 
-interface ChangeZoomAction {
-  type: ActionTypes.ChangeZoom
-  payload: {
-    timeRange: TimeRange
-  }
-}
-
 export interface SetConfigsAction {
   type: ActionTypes.SetConfig
   payload: {
@@ -211,7 +203,6 @@ export type Action =
   | SetNamespaceAction
   | SetHistogramQueryConfig
   | SetHistogramData
-  | ChangeZoomAction
   | SetTableData
   | SetTableQueryConfig
   | SetSearchTerm
@@ -541,19 +532,6 @@ export const getSourceAndPopulateNamespacesAsync = (sourceID: string) => async (
   }
 }
 
-export const changeZoomAsync = (timeRange: TimeRange) => async (
-  dispatch,
-  getState: GetState
-): Promise<void> => {
-  const state = getState()
-  const namespace = getNamespace(state)
-  const proxyLink = getProxyLink(state)
-
-  if (namespace && proxyLink) {
-    await dispatch(setTimeRangeAsync(timeRange))
-  }
-}
-
 const serverLogData = {
   columns: [
     {

ui/src/logs/containers/LogsPage.tsx

@@ -13,7 +13,6 @@ import {
   setTimeMarker,
   setNamespaceAsync,
   executeQueriesAsync,
-  changeZoomAsync,
   setSearchTermAsync,
   addFilter,
   removeFilter,
@@ -41,7 +40,7 @@ import {
 import {SeverityFormatOptions, SECONDS_TO_MS} from 'src/logs/constants'
 import {Source, Namespace} from 'src/types'
 
-import {HistogramData, TimePeriod} from 'src/types/histogram'
+import {HistogramData} from 'src/types/histogram'
 import {
   Filter,
   SeverityLevel,
@@ -70,7 +69,6 @@ interface Props {
   setTimeWindow: (timeWindow: TimeWindow) => void
   setTimeMarker: (timeMarker: TimeMarker) => void
   setNamespaceAsync: (namespace: Namespace) => void
-  changeZoomAsync: (timeRange: TimeRange) => void
   executeQueriesAsync: () => void
   setSearchTermAsync: (searchTerm: string) => void
   fetchMoreAsync: (queryTimeEnd: string, lastTime: number) => Promise<void>
@@ -252,7 +250,6 @@ class LogsPage extends PureComponent<Props, State> {
             width={width}
             height={height}
             colorScale={colorForSeverity}
-            onZoom={this.handleChartZoom}
           />
         )}
       </AutoSizer>
@@ -360,17 +357,6 @@ class LogsPage extends PureComponent<Props, State> {
     this.props.setNamespaceAsync(namespace)
   }
 
-  private handleChartZoom = (t: TimePeriod) => {
-    const {start, end} = t
-    const timeRange = {
-      lower: new Date(start).toISOString(),
-      upper: new Date(end).toISOString(),
-    }
-
-    this.props.changeZoomAsync(timeRange)
-    this.setState({liveUpdating: true})
-  }
-
   private fetchNewDataset() {
     this.props.executeQueriesAsync()
     this.setState({liveUpdating: true})
@@ -471,7 +457,6 @@ const mapDispatchToProps = {
   setTimeMarker,
   setNamespaceAsync,
   executeQueriesAsync,
-  changeZoomAsync,
   setSearchTermAsync,
   addFilter,
   removeFilter,

ui/src/logs/reducers/index.ts

@@ -142,8 +142,6 @@ export default (state: LogsState = defaultState, action: Action) => {
       return {...state, tableQueryConfig: action.payload.queryConfig}
     case ActionTypes.SetTableData:
       return {...state, tableData: action.payload.data}
-    case ActionTypes.ChangeZoom:
-      return {...state, timeRange: action.payload.timeRange}
     case ActionTypes.SetSearchTerm:
       const {searchTerm} = action.payload
       return {...state, searchTerm}

ui/src/shared/components/HistogramChart.tsx

@@ -31,7 +31,7 @@ interface Props {
   width: number
   height: number
   colorScale: ColorScale
-  onZoom: (TimePeriod) => void
+  onZoom?: (TimePeriod) => void
 }
 
 interface State {
@@ -83,14 +83,7 @@ class HistogramChart extends PureComponent<Props, State> {
               yScale={yScale}
             />
           </g>
-          <g className="histogram-chart--brush" transform={bodyTransform}>
+          {this.xBrush}
-            <XBrush
-              xScale={xScale}
-              width={adjustedWidth}
-              height={adjustedHeight}
-              onBrush={this.handleBrush}
-            />
-          </g>
           <g
             transform={bodyTransform}
             className="histogram-chart--bars"
@@ -115,6 +108,24 @@ class HistogramChart extends PureComponent<Props, State> {
     )
   }
 
+  private get xBrush(): JSX.Element {
+    const {onZoom} = this.props
+    const {xScale, adjustedWidth, adjustedHeight, bodyTransform} = this
+
+    if (onZoom) {
+      return (
+        <g className="histogram-chart--brush" transform={bodyTransform}>
+          <XBrush
+            xScale={xScale}
+            width={adjustedWidth}
+            height={adjustedHeight}
+            onBrush={this.handleBrush}
+          />
+        </g>
+      )
+    }
+  }
+
   private get xScale(): ScaleTime<number, number> {
     const {adjustedWidth} = this
     const {data} = this.props