GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 01:59:04 +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;
fieldsQuery: QueryFields[][];
setFieldsQuery: (q: QueryFields[][]) => void;
syncKeyPrefix: () => void;
}
function QueryBuilder({
@ -182,6 +183,7 @@ function QueryBuilder({
fieldsQuery,
setFieldsQuery,
onDropDownToggleHandler,
syncKeyPrefix,
}: QueryBuilderProps): JSX.Element {
const handleUpdate = (query: Query, queryIndex: number): void => {
const updated = [...fieldsQuery];
@ -195,6 +197,9 @@ function QueryBuilder({
else updated.splice(queryIndex, 2);
setFieldsQuery(updated);
// initiate re-render query panel
syncKeyPrefix();
};
const QueryUI = (

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

@ -47,9 +47,12 @@ function SearchFields({
}
}, [parsedQuery]);
const updateFieldsQuery = (updated: QueryFields[][]): void => {
setFieldsQuery(updated);
keyPrefixRef.current = hashCode(JSON.stringify(updated));
// syncKeyPrefix initiates re-render. useful in situations like
// delete field (in search panel). this method allows condiitonally
// 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(
@ -102,7 +105,8 @@ function SearchFields({
keyPrefix={keyPrefixRef.current}
onDropDownToggleHandler={onDropDownToggleHandler}
fieldsQuery={fieldsQuery}
setFieldsQuery={updateFieldsQuery}
setFieldsQuery={setFieldsQuery}
syncKeyPrefix={syncKeyPrefix}
/>
<SearchFieldsActionBar
applyUpdate={applyUpdate}