IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Debounce location update (#35033)

Browse Source
This commit is contained in:
Alex Khomenko 2021-06-01 17:20:00 +03:00 committed by GitHub
parent d2649821d1
commit 486ab7c639
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/features/search/hooks/useSearchQuery.ts
View File

@ -1,5 +1,7 @@
import { FormEvent, useReducer } from 'react'; import { FormEvent, useReducer } from 'react';
import { debounce } from 'lodash';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import { defaultQuery, defaultQueryParams, queryReducer } from '../reducers/searchQueryReducer'; import { defaultQuery, defaultQueryParams, queryReducer } from '../reducers/searchQueryReducer';
import { import {
ADD_TAG, ADD_TAG,
@ -12,7 +14,8 @@ import {
} from '../reducers/actionTypes'; } from '../reducers/actionTypes';
import { DashboardQuery, SearchLayout } from '../types'; import { DashboardQuery, SearchLayout } from '../types';
import { hasFilters, parseRouteParams } from '../utils'; import { hasFilters, parseRouteParams } from '../utils';
import { locationService } from '@grafana/runtime';
const updateLocation = debounce((query) => locationService.partial(query), 300);
export const useSearchQuery = (defaults: Partial<DashboardQuery>) => { export const useSearchQuery = (defaults: Partial<DashboardQuery>) => {
const queryParams = parseRouteParams(locationService.getSearchObject()); const queryParams = parseRouteParams(locationService.getSearchObject());
@ -21,42 +24,42 @@ export const useSearchQuery = (defaults: Partial<DashboardQuery>) => {
const onQueryChange = (query: string) => { const onQueryChange = (query: string) => {
dispatch({ type: QUERY_CHANGE, payload: query }); dispatch({ type: QUERY_CHANGE, payload: query });
locationService.partial({ query }); updateLocation({ query });
}; };
const onTagFilterChange = (tags: string[]) => { const onTagFilterChange = (tags: string[]) => {
dispatch({ type: SET_TAGS, payload: tags }); dispatch({ type: SET_TAGS, payload: tags });
locationService.partial({ tag: tags }); updateLocation({ tag: tags });
}; };
const onTagAdd = (tag: string) => { const onTagAdd = (tag: string) => {
dispatch({ type: ADD_TAG, payload: tag }); dispatch({ type: ADD_TAG, payload: tag });
locationService.partial({ tag: [...query.tag, tag] }); updateLocation({ tag: [...query.tag, tag] });
}; };
const onClearFilters = () => { const onClearFilters = () => {
dispatch({ type: CLEAR_FILTERS }); dispatch({ type: CLEAR_FILTERS });
locationService.partial(defaultQueryParams); updateLocation(defaultQueryParams);
}; };
const onStarredFilterChange = (e: FormEvent<HTMLInputElement>) => { const onStarredFilterChange = (e: FormEvent<HTMLInputElement>) => {
const starred = (e.target as HTMLInputElement).checked; const starred = (e.target as HTMLInputElement).checked;
dispatch({ type: TOGGLE_STARRED, payload: starred }); dispatch({ type: TOGGLE_STARRED, payload: starred });
locationService.partial({ starred: starred || null }); updateLocation({ starred: starred || null });
}; };
const onSortChange = (sort: SelectableValue | null) => { const onSortChange = (sort: SelectableValue | null) => {
dispatch({ type: TOGGLE_SORT, payload: sort }); dispatch({ type: TOGGLE_SORT, payload: sort });
locationService.partial({ sort: sort?.value, layout: SearchLayout.List }); updateLocation({ sort: sort?.value, layout: SearchLayout.List });
}; };
const onLayoutChange = (layout: SearchLayout) => { const onLayoutChange = (layout: SearchLayout) => {
dispatch({ type: LAYOUT_CHANGE, payload: layout }); dispatch({ type: LAYOUT_CHANGE, payload: layout });
if (layout === SearchLayout.Folders) { if (layout === SearchLayout.Folders) {
locationService.partial({ layout, sort: null }); updateLocation({ layout, sort: null });
return; return;
} }
locationService.partial({ layout }); updateLocation({ layout });
}; };
return { return {