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

Scopes: Fix debounce for nodes search (#90042)

Browse Source
This commit is contained in:
Bogdan Matei 2024-07-04 15:26:17 +03:00 committed by GitHub
parent 09d833fef9
commit ab1ad8ed7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
View File

@ -108,10 +108,8 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
currentNode.isExpanded = isExpanded;
currentNode.query = query;
this.setState({ nodes, loadingNodeName: undefined });
if (isExpanded || isDifferentQuery) {
this.setState({ loadingNodeName: name });
this.setState({ nodes, loadingNodeName: name });
this.nodesFetchingSub = from(fetchNodes(name, query))
.pipe(
@ -138,6 +136,8 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
this.nodesFetchingSub?.unsubscribe();
});
} else {
this.setState({ nodes, loadingNodeName: undefined });
}
}

27
public/app/features/dashboard-scene/scene/Scopes/ScopesTreeSearch.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { debounce } from 'lodash';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { useDebounce } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { FilterInput, useStyles2 } from '@grafana/ui';
@ -18,13 +18,23 @@ export interface ScopesTreeSearchProps {
export function ScopesTreeSearch({ anyChildExpanded, nodePath, query, onNodeUpdate }: ScopesTreeSearchProps) {
const styles = useStyles2(getStyles);
const [queryValue, setQueryValue] = useState(query);
const [inputState, setInputState] = useState<{ value: string; isDirty: boolean }>({ value: query, isDirty: false });
useEffect(() => {
setQueryValue(query);
}, [query]);
if (!inputState.isDirty && inputState.value !== query) {
setInputState({ value: query, isDirty: false });
}
}, [inputState, query]);
const onQueryUpdate = useMemo(() => debounce(onNodeUpdate, 500), [onNodeUpdate]);
useDebounce(
() => {
if (inputState.isDirty) {
onNodeUpdate(nodePath, true, inputState.value);
}
},
500,
[inputState.isDirty, inputState.value]
);
if (anyChildExpanded) {
return null;
@ -33,12 +43,11 @@ export function ScopesTreeSearch({ anyChildExpanded, nodePath, query, onNodeUpda
return (
<FilterInput
placeholder={t('scopes.tree.search', 'Search')}
value={queryValue}
value={inputState.value}
className={styles.input}
data-testid="scopes-tree-search"
onChange={(value) => {
setQueryValue(value);
onQueryUpdate(nodePath, true, value);
setInputState({ value, isDirty: true });
}}
/>
);