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

datatrails: debounce search and prefix filter (#81842)

Browse Source 
fix: debounce search and prefix filter
This commit is contained in:
Darren Janeczek 2024-02-08 10:35:09 -05:00 committed by GitHub
parent 3756234de6
commit 312f8f0f69
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/trails/MetricSelectScene.tsx
View File

@ -1,5 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import leven from 'leven'; import leven from 'leven';
import { debounce } from 'lodash';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { GrafanaTheme2, VariableRefresh } from '@grafana/data'; import { GrafanaTheme2, VariableRefresh } from '@grafana/data';
@ -288,18 +289,26 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
} }
}; };
public onSearchChange = (evt: React.SyntheticEvent<HTMLInputElement>) => { public onSearchQueryChange = (evt: React.SyntheticEvent<HTMLInputElement>) => {
this.setState({ searchQuery: evt.currentTarget.value }); this.setState({ searchQuery: evt.currentTarget.value });
this.searchQueryChangedDebounced();
};
private searchQueryChangedDebounced = debounce(() => {
this.updateMetrics(); // Need to repeat entire pipeline this.updateMetrics(); // Need to repeat entire pipeline
this.buildLayout(); this.buildLayout();
}; }, 500);
public onPrefixFilterChange = (prefixFilter: string | undefined) => { public onPrefixFilterChange = (prefixFilter: string | undefined) => {
this.setState({ prefixFilter }); this.setState({ prefixFilter });
this.prefixFilterChangedDebounced();
};
private prefixFilterChangedDebounced = debounce(() => {
this.applyMetricPrefixFilter(); this.applyMetricPrefixFilter();
this.updateMetrics(false); // Only needed to applyMetricPrefixFilter this.updateMetrics(false); // Only needed to applyMetricPrefixFilter
this.buildLayout(); this.buildLayout();
}; }, 1000);
public onTogglePreviews = () => { public onTogglePreviews = () => {
this.setState({ showPreviews: !this.state.showPreviews }); this.setState({ showPreviews: !this.state.showPreviews });
@ -339,7 +348,7 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
placeholder="Search metrics" placeholder="Search metrics"
prefix={<Icon name={'search'} />} prefix={<Icon name={'search'} />}
value={searchQuery} value={searchQuery}
onChange={model.onSearchChange} onChange={model.onSearchQueryChange}
disabled={disableSearch} disabled={disableSearch}
/> />
</Field> </Field>