Make log time formats consistent (#4447)

* Fix inconsistent log time formats
* Remove unused query results logic

ui/src/logs/components/HistogramResults.tsx

@@ -0,0 +1,36 @@
+import React, {PureComponent} from 'react'
+import {SearchStatus} from 'src/types/logs'
+
+interface Props {
+  count: number
+  queryCount: number
+  searchStatus: SearchStatus
+}
+
+class HistogramResults extends PureComponent<Props> {
+  public render() {
+    return (
+      <label className="logs-viewer--results-text">
+        {this.isPending ? this.pendingContents : this.completedContents}
+      </label>
+    )
+  }
+
+  private get isPending(): boolean {
+    return this.props.searchStatus !== SearchStatus.Loaded
+  }
+
+  private get pendingContents(): JSX.Element {
+    return <>Updating Histogram...</>
+  }
+
+  private get completedContents(): JSX.Element {
+    return (
+      <>
+        Displaying <strong> {this.props.count} Events</strong> in Histogram
+      </>
+    )
+  }
+}
+
+export default HistogramResults

ui/src/logs/components/LogsTable.tsx

@@ -46,6 +46,7 @@ import {
   RowHeightHandler,
   SearchStatus,
   Filter,
+  TimeFormatOption,
 } from 'src/types/logs'
 import {INITIAL_LIMIT} from 'src/logs/actions'
 
@@ -541,6 +542,11 @@ class LogsTable extends Component<Props, State> {
     const highlightRow = rowIndex === this.state.currentRow
 
     if (column === 'timestamp') {
+      const formattedTime = moment(
+        formattedValue as string,
+        TimeFormatOption.SLASH_YMD_TIME
+      ).format(TimeFormatOption.DEFAULT)
+
       return (
         <div
           className={classnames('logs-viewer--cell', {
@@ -555,12 +561,12 @@ class LogsTable extends Component<Props, State> {
           <div
             data-tag-key={column}
             data-tag-value={value}
-            onClick={this.handleTimestampClick(`${formattedValue}`)}
+            onClick={this.handleTimestampClick(`${formattedTime}`)}
             data-index={rowIndex}
             onMouseOver={this.handleMouseOver}
             className="logs-viewer--clickable"
           >
-            {formattedValue}
+            {formattedTime}
           </div>
         </div>
       )
@@ -656,7 +662,7 @@ class LogsTable extends Component<Props, State> {
 
   private handleTimestampClick = (time: string) => () => {
     const {onChooseCustomTime} = this.props
-    const formattedTime = moment(time, 'YYYY/MM/DD HH:mm:ss').toISOString()
+    const formattedTime = moment(time, TimeFormatOption.DEFAULT).toISOString()
     onChooseCustomTime(formattedTime)
   }
 

ui/src/logs/components/QueryResults.tsx

@@ -1,99 +0,0 @@
-import React, {PureComponent} from 'react'
-import moment from 'moment'
-import {SearchStatus} from 'src/types/logs'
-
-const QUERY_RESULTS_TIME_FORMAT = 'MMM D, YYYY @HH:mm:ss'
-
-interface Props {
-  count: number
-  queryCount: number
-  isInsideHistogram?: boolean
-  searchStatus: SearchStatus
-  upper?: number | undefined
-  lower?: number | undefined
-}
-
-class QueryResults extends PureComponent<Props> {
-  public static defaultProps: Partial<Props> = {
-    isInsideHistogram: false,
-  }
-
-  public render() {
-    return (
-      <label className="logs-viewer--results-text">
-        {this.isPending ? this.pendingContents : this.completedContents}
-      </label>
-    )
-  }
-
-  private get isPending(): boolean {
-    return this.props.searchStatus !== SearchStatus.Loaded
-  }
-
-  private get pendingContents(): JSX.Element {
-    if (this.props.isInsideHistogram) {
-      return <>Updating Histogram...</>
-    }
-
-    return (
-      <>
-        Querying back to
-        <br />
-        {this.formattedUpperTime}...
-      </>
-    )
-  }
-
-  private get completedContents(): JSX.Element {
-    if (this.props.isInsideHistogram) {
-      return (
-        <>
-          Displaying <strong> {this.props.count} Events</strong> in Histogram
-        </>
-      )
-    }
-
-    return (
-      <>
-        {this.eventContents}
-        {this.rangeContents}
-      </>
-    )
-  }
-
-  private get eventContents(): JSX.Element {
-    return (
-      <>
-        Query returned <strong>{this.props.count} Events</strong> <br />
-      </>
-    )
-  }
-
-  private get rangeContents(): JSX.Element {
-    if (this.props.upper === undefined || this.props.lower === undefined) {
-      return null
-    }
-
-    return (
-      <>
-        <span>
-          Newest: <strong>{this.formattedUpperTime}</strong>
-        </span>
-        <br />
-        <span>
-          Oldest: <strong>{this.formattedLowerTime}</strong>
-        </span>
-      </>
-    )
-  }
-
-  private get formattedLowerTime(): string {
-    return moment(this.props.lower).format(QUERY_RESULTS_TIME_FORMAT)
-  }
-
-  private get formattedUpperTime(): string {
-    return moment(this.props.upper).format(QUERY_RESULTS_TIME_FORMAT)
-  }
-}
-
-export default QueryResults

ui/src/logs/containers/LogsPage.tsx

@@ -11,7 +11,7 @@ import {fetchChunk} from 'src/logs/utils/fetchChunk'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 import {Greys} from 'src/reusable_ui/types'
-import QueryResults from 'src/logs/components/QueryResults'
+import HistogramResults from 'src/logs/components/HistogramResults'
 
 import {
   NOW,
@@ -81,6 +81,7 @@ import {
   TimeBounds,
   SearchStatus,
   FetchLoop,
+  TimeFormatOption,
 } from 'src/types/logs'
 import {
   applyChangesToTableData,
@@ -692,9 +693,7 @@ class LogsPage extends Component<Props, State> {
                           height={textSize}
                           fill={Greys.Sidewalk}
                         >
-                          {moment(timeOption).format(
+                          {moment(timeOption).format(TimeFormatOption.DEFAULT)}
-                            'YYYY-MM-DD | HH:mm:ss.SSS'
-                          )}
                         </text>
                       </svg>
                     </>
@@ -751,10 +750,9 @@ class LogsPage extends Component<Props, State> {
 
     return (
       <div className="logs-viewer--graph-controls">
-        <QueryResults
+        <HistogramResults
           count={this.histogramTotal}
           queryCount={queryCount}
-          isInsideHistogram={true}
           searchStatus={searchStatus}
         />
         <TimeWindowDropdown

ui/src/types/logs.ts

@@ -10,6 +10,11 @@ import {FieldOption} from 'src/types/dashboards'
 import {TimeSeriesValue} from 'src/types/series'
 import {TimeRange} from 'src/types/logs'
 
+export enum TimeFormatOption {
+  DEFAULT = 'YYYY-MM-DD HH:mm:ss',
+  SLASH_YMD_TIME = 'YYYY/MM/DD HH:mm:ss',
+}
+
 export enum SearchStatus {
   None = 'None',
   Loading = 'Loading',