diff --git a/ui/src/localStorage.ts b/ui/src/localStorage.ts index dd36a5580f..22b1a33dc0 100644 --- a/ui/src/localStorage.ts +++ b/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) { diff --git a/ui/src/logs/actions/index.ts b/ui/src/logs/actions/index.ts index 09020de7d6..a805777e4f 100644 --- a/ui/src/logs/actions/index.ts +++ b/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(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(executeTableQueryAsync()) + dispatch(incrementQueryCount()) + await Promise.all([ + dispatch(executeHistogramQueryAsync()), + dispatch(executeTableQueryAsync()), + ]) + dispatch(decrementQueryCount()) } export const setSearchTermAsync = (searchTerm: string) => async dispatch => { diff --git a/ui/src/logs/components/LogsFilterBar.tsx b/ui/src/logs/components/LogsFilterBar.tsx index 244d4e0d45..20a384a915 100644 --- a/ui/src/logs/components/LogsFilterBar.tsx +++ b/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 { public render() { - const {numResults} = this.props + const {numResults, queryCount} = this.props return (
- +
    {this.renderFilters}
) diff --git a/ui/src/logs/components/QueryResults.tsx b/ui/src/logs/components/QueryResults.tsx new file mode 100644 index 0000000000..6cb775e532 --- /dev/null +++ b/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 { + public render() { + const {count} = this.props + if (this.isPending) { + return + } + + return ( + + ) + } + + private get isPending(): boolean { + const {queryCount} = this.props + return queryCount > 0 + } +} + +export default QueryResults diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index d3530f0666..a0c7f9a394 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/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 { 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 { filters={filters || []} onDelete={this.handleFilterDelete} onFilterChange={this.handleFilterChange} + queryCount={queryCount} /> ({ sources, @@ -271,6 +274,7 @@ const mapStateToProps = ({ tableData, searchTerm, filters, + queryCount, }) const mapDispatchToProps = { diff --git a/ui/src/logs/reducers/index.ts b/ui/src/logs/reducers/index.ts index 6ad7dffb12..74e88e8eec 100644 --- a/ui/src/logs/reducers/index.ts +++ b/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 } diff --git a/ui/src/types/logs.ts b/ui/src/types/logs.ts index ba4c9319d8..96a1cc66eb 100644 --- a/ui/src/types/logs.ts +++ b/ui/src/types/logs.ts @@ -18,4 +18,5 @@ export interface LogsState { tableData: object[] searchTerm: string | null filters: Filter[] + queryCount: number }