Merge pull request #4042 from influxdata/log-viewer/move-query-count

Move histogram count to make it more clear

ui/src/logs/components/LogsFilterBar.tsx

@@ -1,23 +1,17 @@
 import React, {PureComponent} from 'react'
 import {Filter} from 'src/types/logs'
 import FilterBlock from 'src/logs/components/LogsFilter'
-import QueryResults from 'src/logs/components/QueryResults'
 
 interface Props {
-  numResults: number
   filters: Filter[]
-  queryCount: number
   onDelete: (id: string) => void
   onFilterChange: (id: string, operator: string, value: string) => void
 }
 
 class LogsFilters extends PureComponent<Props> {
   public render() {
-    const {numResults, queryCount} = this.props
-
     return (
       <div className="logs-viewer--filter-bar">
-        <QueryResults count={numResults} queryCount={queryCount} />
         <div className="logs-viewer--filters">{this.renderFilters}</div>
       </div>
     )

ui/src/logs/containers/LogsPage.tsx

@@ -5,6 +5,7 @@ import moment from 'moment'
 import {connect} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
 import {Greys} from 'src/reusable_ui/types'
+import QueryResults from 'src/logs/components/QueryResults'
 
 const NOW = 0
 
@@ -180,17 +181,16 @@ class LogsPage extends Component<Props, State> {
         <div className="page">
           {this.header}
           <div className="page-contents logs-viewer">
+            <QueryResults count={this.histogramTotal} queryCount={queryCount} />
             <LogsGraphContainer>{this.chart}</LogsGraphContainer>
             <SearchBar
               searchString={searchTerm}
               onSearch={this.handleSubmitSearch}
             />
             <FilterBar
-              numResults={this.histogramTotal}
               filters={filters || []}
               onDelete={this.handleFilterDelete}
               onFilterChange={this.handleFilterChange}
-              queryCount={queryCount}
             />
             <LogsTable
               count={this.histogramTotal}

ui/src/logs/utils/index.ts

@@ -17,7 +17,7 @@ import {HistogramData} from 'src/types/histogram'
 import {executeQueryAsync} from 'src/logs/api'
 
 const BIN_COUNT = 30
-const SECONDS_AWAY_LIMIT = 2592000
+const SECONDS_AWAY_LIMIT = 1296000
 
 const histogramFields = [
   {
@@ -197,7 +197,7 @@ export async function getQueryCountForBounds(
   let condition = `WHERE time >= '${lower}' AND time <='${upper}'`
 
   if (!_.isEmpty(searchTerm)) {
-    condition = `${condition} AND message =~ ${new RegExp(searchTerm)}`
+    condition = `${condition} AND "message" =~ ${new RegExp(searchTerm)}`
   }
 
   if (!_.isEmpty(filters)) {
@@ -219,11 +219,11 @@ export async function findOlderLowerTimeBounds(
 ): Promise<string> {
   const parsedUpper = moment(upper)
 
-  let secondsBack = 30
+  let secondsBack = 5
   let currentLower = parsedUpper.subtract(secondsBack, 'seconds')
 
   while (true) {
-    if (secondsBack > SECONDS_AWAY_LIMIT) {
+    if (secondsBack >= SECONDS_AWAY_LIMIT) {
       break
     }
 
@@ -241,7 +241,7 @@ export async function findOlderLowerTimeBounds(
       break
     }
 
-    secondsBack *= secondsBack // exponential backoff
+    secondsBack += 2 * secondsBack
     currentLower = parsedUpper.subtract(secondsBack, 'seconds')
   }
 
@@ -258,7 +258,7 @@ export async function findNewerUpperTimeBounds(
 ): Promise<string> {
   const parsedLower = moment(lower)
 
-  let secondsForward = 30
+  let secondsForward = 5
   let currentUpper = parsedLower.add(secondsForward, 'seconds')
 
   while (true) {
@@ -280,7 +280,7 @@ export async function findNewerUpperTimeBounds(
       break
     }
 
-    secondsForward *= secondsForward // exponential backoff
+    secondsForward += 2 * secondsForward
     currentUpper = parsedLower.add(secondsForward, 'seconds')
   }
 

ui/src/logs/utils/table.ts

@@ -28,7 +28,10 @@ export const getColumnFromData = (data: TableData, index: number): string =>
   getDeep(data, `columns.${index}`, '')
 
 export const isClickable = (column: string): boolean =>
-  _.includes(['appname', 'facility', 'host', 'hostname', 'severity'], column)
+  _.includes(
+    ['appname', 'facility', 'host', 'hostname', 'severity', 'procid'],
+    column
+  )
 
 export const formatColumnValue = (
   column: string,

ui/src/style/pages/logs-viewer.scss

@@ -78,7 +78,10 @@ $logs-viewer-gutter: 60px;
 }
 
 .logs-viewer--results-text {
-  margin: 0 12px 0 $logs-viewer-results-text-indent;
+  margin: 0;
+  margin-top: 12px;
+  margin-right: $logs-viewer-results-text-indent;
+  text-align: right;
   padding: 0;
   font-size: 13px;
   line-height: 13px;