Set time marker when user clicks bar in histogram

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

ui/src/logs/containers/LogsPage.tsx

@@ -326,6 +326,7 @@ class LogsPage extends Component<Props, State> {
             height={height}
             colorScale={colorForSeverity}
             colors={histogramColors}
+            onBarClick={this.handleBarClick}
           />
         )}
       </AutoSizer>
@@ -396,6 +397,19 @@ 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()
+
+    this.handleSetTimeMarker({timeOption})
+  }
+
   private handleSetTimeBounds = async () => {
     const {seconds, windowOption, timeOption} = this.props.timeRange
     let lower = `now() - ${windowOption}`