GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 18:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: solved re-render issue when input fields were edited (#2149)

Browse Source 
Co-authored-by: mindhash <mindhash@mindhashs-MacBook-Pro.local>
This commit is contained in:
Amol Umbark 2023-01-31 14:46:03 +05:30 committed by GitHub
parent 3115b32dcd
commit faaf0a6e73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx
View File

@ -175,6 +175,7 @@ export interface QueryBuilderProps {
onDropDownToggleHandler: (value: boolean) => VoidFunction; onDropDownToggleHandler: (value: boolean) => VoidFunction;
fieldsQuery: QueryFields[][]; fieldsQuery: QueryFields[][];
setFieldsQuery: (q: QueryFields[][]) => void; setFieldsQuery: (q: QueryFields[][]) => void;
syncKeyPrefix: () => void;
} }
function QueryBuilder({ function QueryBuilder({
@ -182,6 +183,7 @@ function QueryBuilder({
fieldsQuery, fieldsQuery,
setFieldsQuery, setFieldsQuery,
onDropDownToggleHandler, onDropDownToggleHandler,
syncKeyPrefix,
}: QueryBuilderProps): JSX.Element { }: QueryBuilderProps): JSX.Element {
const handleUpdate = (query: Query, queryIndex: number): void => { const handleUpdate = (query: Query, queryIndex: number): void => {
const updated = [...fieldsQuery]; const updated = [...fieldsQuery];
@ -195,6 +197,9 @@ function QueryBuilder({
else updated.splice(queryIndex, 2); else updated.splice(queryIndex, 2);
setFieldsQuery(updated); setFieldsQuery(updated);
// initiate re-render query panel
syncKeyPrefix();
}; };
const QueryUI = ( const QueryUI = (

12
frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
View File

@ -47,9 +47,12 @@ function SearchFields({
} }
}, [parsedQuery]); }, [parsedQuery]);
const updateFieldsQuery = (updated: QueryFields[][]): void => { // syncKeyPrefix initiates re-render. useful in situations like
setFieldsQuery(updated); // delete field (in search panel). this method allows condiitonally
keyPrefixRef.current = hashCode(JSON.stringify(updated)); // setting keyPrefix as doing it on every update of query initiates
// a re-render. this is a problem for text fields where input focus goes away.
const syncKeyPrefix = (): void => {
keyPrefixRef.current = hashCode(JSON.stringify(fieldsQuery));
}; };
const addSuggestedField = useCallback( const addSuggestedField = useCallback(
@ -102,7 +105,8 @@ function SearchFields({
keyPrefix={keyPrefixRef.current} keyPrefix={keyPrefixRef.current}
onDropDownToggleHandler={onDropDownToggleHandler} onDropDownToggleHandler={onDropDownToggleHandler}
fieldsQuery={fieldsQuery} fieldsQuery={fieldsQuery}
setFieldsQuery={updateFieldsQuery} setFieldsQuery={setFieldsQuery}
syncKeyPrefix={syncKeyPrefix}
/> />
<SearchFieldsActionBar <SearchFieldsActionBar
applyUpdate={applyUpdate} applyUpdate={applyUpdate}