Add indication if query is running

ui/src/localStorage.ts

@@ -63,7 +63,11 @@ export const saveToLocalStorage = ({
     const appPersisted = {app: {persisted}}
     const dashTimeV1 = {ranges: normalizer(ranges)}
 
-    const minimalLogs = _.omit(logs, ['tableData', 'histogramData'])
+    const minimalLogs = _.omit(logs, [
+      'tableData',
+      'histogramData',
+      'queryCount',
+    ])
 
     window.localStorage.setItem(
       'state',
@@ -75,7 +79,7 @@ export const saveToLocalStorage = ({
         dataExplorer,
         dataExplorerQueryConfigs,
         script,
-        logs: {...minimalLogs, histogramData: [], tableData: {}},
+        logs: {...minimalLogs, histogramData: [], tableData: {}, queryCount: 0},
       })
     )
   } catch (err) {

ui/src/logs/actions/index.ts

@@ -52,6 +52,16 @@ export enum ActionTypes {
   AddFilter = 'LOGS_ADD_FILTER',
   RemoveFilter = 'LOGS_REMOVE_FILTER',
   ChangeFilter = 'LOGS_CHANGE_FILTER',
+  IncrementQueryCount = 'LOGS_INCREMENT_QUERY_COUNT',
+  DecrementQueryCount = 'LOGS_DECREMENT_QUERY_COUNT',
+}
+
+export interface IncrementQueryCountAction {
+  type: ActionTypes.IncrementQueryCount
+}
+
+export interface DecrementQueryCountAction {
+  type: ActionTypes.DecrementQueryCount
 }
 
 export interface AddFilterAction {
@@ -161,6 +171,8 @@ export type Action =
   | AddFilterAction
   | RemoveFilterAction
   | ChangeFilterAction
+  | DecrementQueryCountAction
+  | IncrementQueryCountAction
 
 const getTimeRange = (state: State): TimeRange | null =>
   getDeep<TimeRange | null>(state, 'logs.timeRange', null)
@@ -257,9 +269,21 @@ export const executeTableQueryAsync = () => async (
   }
 }
 
+export const decrementQueryCount = () => ({
+  type: ActionTypes.DecrementQueryCount,
+})
+
+export const incrementQueryCount = () => ({
+  type: ActionTypes.IncrementQueryCount,
+})
+
 export const executeQueriesAsync = () => async dispatch => {
-  dispatch(executeHistogramQueryAsync())
+  dispatch(incrementQueryCount())
-  dispatch(executeTableQueryAsync())
+  await Promise.all([
+    dispatch(executeHistogramQueryAsync()),
+    dispatch(executeTableQueryAsync()),
+  ])
+  dispatch(decrementQueryCount())
 }
 
 export const setSearchTermAsync = (searchTerm: string) => async dispatch => {

ui/src/logs/components/LogsFilterBar.tsx

@@ -1,23 +1,23 @@
 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} = this.props
+    const {numResults, queryCount} = this.props
 
     return (
       <div className="logs-viewer--filter-bar">
-        <label className="logs-viewer--results-text">
+        <QueryResults count={numResults} queryCount={queryCount} />
-          Query returned <strong>{numResults} Events</strong>
-        </label>
         <ul className="logs-viewer--filters">{this.renderFilters}</ul>
       </div>
     )

ui/src/logs/components/QueryResults.tsx

@@ -0,0 +1,28 @@
+import React, {PureComponent} from 'react'
+
+interface Props {
+  count: number
+  queryCount: number
+}
+
+class QueryResults extends PureComponent<Props> {
+  public render() {
+    const {count} = this.props
+    if (this.isPending) {
+      return <label className="logs-viewer--results-text">Querying ...</label>
+    }
+
+    return (
+      <label className="logs-viewer--results-text">
+        Query returned <strong>{count} Events</strong>
+      </label>
+    )
+  }
+
+  private get isPending(): boolean {
+    const {queryCount} = this.props
+    return queryCount > 0
+  }
+}
+
+export default QueryResults

ui/src/logs/containers/LogsPage.tsx

@@ -47,6 +47,7 @@ interface Props {
   }
   searchTerm: string
   filters: Filter[]
+  queryCount: number
 }
 
 interface State {
@@ -88,7 +89,7 @@ class LogsPage extends PureComponent<Props, State> {
 
   public render() {
     const {liveUpdating} = this.state
-    const {searchTerm, filters} = this.props
+    const {searchTerm, filters, queryCount} = this.props
 
     const count = getDeep(this.props, 'tableData.values.length', 0)
 
@@ -106,6 +107,7 @@ class LogsPage extends PureComponent<Props, State> {
             filters={filters || []}
             onDelete={this.handleFilterDelete}
             onFilterChange={this.handleFilterChange}
+            queryCount={queryCount}
           />
           <LogsTable
             data={this.props.tableData}
@@ -260,6 +262,7 @@ const mapStateToProps = ({
     tableData,
     searchTerm,
     filters,
+    queryCount,
   },
 }) => ({
   sources,
@@ -271,6 +274,7 @@ const mapStateToProps = ({
   tableData,
   searchTerm,
   filters,
+  queryCount,
 })
 
 const mapDispatchToProps = {

ui/src/logs/reducers/index.ts

@@ -5,6 +5,8 @@ import {
   RemoveFilterAction,
   AddFilterAction,
   ChangeFilterAction,
+  DecrementQueryCountAction,
+  IncrementQueryCountAction,
 } from 'src/logs/actions'
 import {LogsState} from 'src/types/logs'
 
@@ -19,6 +21,7 @@ const defaultState: LogsState = {
   histogramData: [],
   searchTerm: null,
   filters: [],
+  queryCount: 0,
 }
 
 const removeFilter = (
@@ -56,6 +59,22 @@ const changeFilter = (
   return {...state, filters: mappedFilters}
 }
 
+const decrementQueryCount = (
+  state: LogsState,
+  __: DecrementQueryCountAction
+) => {
+  const {queryCount} = state
+  return {...state, queryCount: Math.max(queryCount - 1, 0)}
+}
+
+const incrementQueryCount = (
+  state: LogsState,
+  __: IncrementQueryCountAction
+) => {
+  const {queryCount} = state
+  return {...state, queryCount: queryCount + 1}
+}
+
 export default (state: LogsState = defaultState, action: Action) => {
   switch (action.type) {
     case ActionTypes.SetSource:
@@ -86,6 +105,10 @@ export default (state: LogsState = defaultState, action: Action) => {
       return removeFilter(state, action)
     case ActionTypes.ChangeFilter:
       return changeFilter(state, action)
+    case ActionTypes.IncrementQueryCount:
+      return incrementQueryCount(state, action)
+    case ActionTypes.DecrementQueryCount:
+      return decrementQueryCount(state, action)
     default:
       return state
   }

ui/src/types/logs.ts

@@ -18,4 +18,5 @@ export interface LogsState {
   tableData: object[]
   searchTerm: string | null
   filters: Filter[]
+  queryCount: number
 }