Set custom time when clicking a timestamp in a log message

ui/src/logs/components/LogsTable.tsx

@@ -59,6 +59,7 @@ interface Props {
     forward: TableData
     backward: TableData
   }
+  onChooseCustomTime: (time: string) => void
 }
 
 interface State {
@@ -528,6 +529,32 @@ class LogsTable extends Component<Props, State> {
 
     const highlightRow = rowIndex === this.state.currentRow
 
+    if (column === 'timestamp') {
+      return (
+        <div
+          className={classnames('logs-viewer--cell', {
+            highlight: highlightRow,
+          })}
+          title={`Jump to '${title}'`}
+          key={key}
+          style={style}
+          data-index={rowIndex}
+          onMouseOver={this.handleMouseOver}
+        >
+          <div
+            data-tag-key={column}
+            data-tag-value={value}
+            onClick={this.handleTimestampClick(`${formattedValue}`)}
+            data-index={rowIndex}
+            onMouseOver={this.handleMouseOver}
+            className="logs-viewer--clickable"
+          >
+            {formattedValue}
+          </div>
+        </div>
+      )
+    }
+
     if (isClickable(column)) {
       return (
         <div
@@ -589,6 +616,12 @@ class LogsTable extends Component<Props, State> {
     this.setState({currentRow: +index})
   }
 
+  private handleTimestampClick = (time: string) => () => {
+    const {onChooseCustomTime} = this.props
+    const formattedTime = moment(time, 'YYYY/MM/DD HH:mm:ss').toISOString()
+    onChooseCustomTime(formattedTime)
+  }
+
   private handleTagClick = (e: MouseEvent<HTMLElement>) => {
     const {onTagSelection} = this.props
     const target = e.target as HTMLElement

ui/src/logs/containers/LogsPage.tsx

@@ -199,6 +199,7 @@ class LogsPage extends Component<Props, State> {
               severityLevelColors={this.severityLevelColors}
               hasScrolled={this.state.hasScrolled}
               tableInfiniteData={this.props.tableInfiniteData}
+              onChooseCustomTime={this.handleChooseCustomTime}
             />
           </div>
         </div>