Add timestamp marker to histogram

ui/src/logs/containers/LogsPage.tsx

@@ -4,6 +4,7 @@ import _ from 'lodash'
 import moment from 'moment'
 import {connect} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
+import {Greys} from 'src/reusable_ui/types'
 
 import {
   setTableCustomTimeAsync,
@@ -333,7 +334,10 @@ class LogsPage extends Component<Props, State> {
   }
 
   private get chart(): JSX.Element {
-    const {histogramData} = this.props
+    const {
+      histogramData,
+      timeRange: {timeOption},
+    } = this.props
     const {histogramColors} = this.state
 
     return (
@@ -347,7 +351,81 @@ class LogsPage extends Component<Props, State> {
             colors={histogramColors}
             onBarClick={this.handleBarClick}
             sortBarGroups={this.handleSortHistogramBarGroups}
-          />
+          >
+            {({adjustedWidth, adjustedHeight, margins}) => {
+              const x = margins.left + adjustedWidth / 2
+              const y1 = margins.top
+              const y2 = margins.top + adjustedHeight
+              const textSize = 11
+              const markerSize = 5
+              const labelSize = 100
+
+              if (timeOption === 'now') {
+                return null
+              } else {
+                const lineContainerWidth = 3
+                const lineWidth = 1
+
+                return (
+                  <>
+                    <svg
+                      width={lineContainerWidth}
+                      height={height}
+                      style={{
+                        position: 'absolute',
+                        left: `${x}px`,
+                        top: '0px',
+                        transform: 'translateX(-50%)',
+                      }}
+                    >
+                      <line
+                        x1={(lineContainerWidth - lineWidth) / 2}
+                        x2={(lineContainerWidth - lineWidth) / 2}
+                        y1={y1 + markerSize / 2}
+                        y2={y2}
+                        stroke={Greys.White}
+                        strokeWidth={`${lineWidth}`}
+                      />
+                    </svg>
+                    <svg
+                      width={x}
+                      height={textSize + textSize / 2}
+                      style={{
+                        position: 'absolute',
+                        left: `${x - markerSize - labelSize}px`,
+                      }}
+                    >
+                      <text
+                        style={{fontSize: textSize, fontWeight: 600}}
+                        x={0}
+                        y={textSize}
+                        height={textSize}
+                        fill={Greys.Sidewalk}
+                      >
+                        Current Timestamp
+                      </text>
+                      <ellipse
+                        cx={labelSize + markerSize - 0.5}
+                        cy={textSize / 2 + markerSize / 2}
+                        rx={markerSize / 2}
+                        ry={markerSize / 2}
+                        fill={Greys.White}
+                      />
+                      <text
+                        style={{fontSize: textSize, fontWeight: 600}}
+                        x={labelSize + markerSize / 2 + textSize}
+                        y={textSize}
+                        height={textSize}
+                        fill={Greys.Sidewalk}
+                      >
+                        {moment(timeOption).format('YYYY-MM-DD | HH:mm:ss.SSS')}
+                      </text>
+                    </svg>
+                  </>
+                )
+              }
+            }}
+          </HistogramChart>
         )}
       </AutoSizer>
     )

ui/src/reusable_ui/types/index.ts

@@ -19,3 +19,27 @@ export enum ButtonShape {
   Square = 'square',
   StretchToFit = 'stretch',
 }
+
+export enum Greys {
+  Obsidian = '#0f0e15',
+  Raven = '#1c1c21',
+  Kevlar = '#202028',
+  Castle = '#292933',
+  Onyx = '#31313d',
+  Pepper = '#383846',
+  Smoke = '#434453',
+  Graphite = '#545667',
+  Storm = '#676978',
+  Mountain = '#757888',
+  Wolf = '#8e91a1',
+  Sidewalk = '#999dab',
+  Forge = '#a4a8b6',
+  Mist = '#bec2cc',
+  Chromium = '#c6cad3',
+  Platinum = '#d4d7dd',
+  Pearl = '#e7e8eb',
+  Whisper = '#eeeff2',
+  Cloud = '#f6f6f8',
+  Ghost = '#fafafc',
+  White = '#ffffff',
+}