Pass time up instead of entire bar group on click

ui/src/logs/containers/LogsPage.tsx

@@ -39,7 +39,7 @@ import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechno
 import {SeverityFormatOptions, SECONDS_TO_MS} from 'src/logs/constants'
 import {Source, Namespace} from 'src/types'
 
-import {HistogramData, HistogramColor, BarGroup} from 'src/types/histogram'
+import {HistogramData, HistogramColor} from 'src/types/histogram'
 import {
   Filter,
   SeverityLevelColor,
@@ -397,15 +397,8 @@ class LogsPage extends Component<Props, State> {
     this.props.executeQueriesAsync()
   }
 
-  private handleBarClick = (group: BarGroup): void => {
-    const {data} = group
-
-    if (!data.length) {
-      return
-    }
-
-    const unixTimestamp = data[0].time
-    const timeOption = moment(unixTimestamp).toISOString()
+  private handleBarClick = (time: string): void => {
+    const timeOption = moment(time).toISOString()
 
     this.handleSetTimeMarker({timeOption})
   }

ui/src/shared/components/HistogramChart.tsx

@@ -17,7 +17,6 @@ import {
   HoverData,
   ColorScale,
   HistogramColor,
-  BarGroup,
 } from 'src/types/histogram'
 
 const PADDING_TOP = 0.2
@@ -35,7 +34,7 @@ interface Props {
   colors: HistogramColor[]
   colorScale: ColorScale
   onZoom?: (TimePeriod) => void
-  onBarClick?: (group: BarGroup) => void
+  onBarClick?: (time: string) => void
 }
 
 interface State {

ui/src/shared/components/HistogramChartBars.tsx

@@ -12,7 +12,6 @@ import {
   TooltipAnchor,
   ColorScale,
   HistogramColor,
-  BarGroup,
 } from 'src/types/histogram'
 
 const BAR_BORDER_RADIUS = 3
@@ -114,6 +113,25 @@ const getBarGroups = ({
   })
 }
 
+interface BarGroup {
+  key: string
+  clip: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
+  bars: Array<{
+    key: string
+    group: string
+    x: number
+    y: number
+    width: number
+    height: number
+    fill: string
+  }>
+  data: HistogramData
+}
 interface Props {
   width: number
   height: number
@@ -124,7 +142,7 @@ interface Props {
   hoverData?: HoverData
   colors: HistogramColor[]
   onHover: (h: HoverData) => void
-  onBarClick?: (group: BarGroup) => void
+  onBarClick?: (time: string) => void
 }
 
 interface State {
@@ -155,7 +173,7 @@ class HistogramChartBars extends PureComponent<Props, State> {
           data-key={key}
           onMouseOver={this.handleMouseOver}
           onMouseOut={this.handleMouseOut}
-          onClick={this.handleBarClick(group)}
+          onClick={this.handleBarClick(group.data)}
         >
           <defs>
             <clipPath id={`histogram-chart-bars--clip-${key}`}>
@@ -188,11 +206,12 @@ class HistogramChartBars extends PureComponent<Props, State> {
     })
   }
 
-  private handleBarClick = (group: BarGroup) => (): void => {
+  private handleBarClick = data => (): void => {
     const {onBarClick} = this.props
 
     if (onBarClick) {
-      onBarClick(group)
+      const time = data[0].time
+      onBarClick(time)
     }
   }
 

ui/src/types/histogram.ts

@@ -36,23 +36,3 @@ export interface HistogramColor {
   group: string
   color: string
 }
-
-export interface BarGroup {
-  key: string
-  clip: {
-    x: number
-    y: number
-    width: number
-    height: number
-  }
-  bars: Array<{
-    key: string
-    group: string
-    x: number
-    y: number
-    width: number
-    height: number
-    fill: string
-  }>
-  data: HistogramData
-}