GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 04:35:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: onBlur for groupBy (#2728)

Browse Source
This commit is contained in:
Yevhen Shevchenko 2023-05-18 19:19:11 +03:00 committed by GitHub
parent d67f709b8a
commit fb10d7d81f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
View File

@ -7,10 +7,10 @@ import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue';
// ** Components // ** Components
// ** Helpers // ** Helpers
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix'; import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { memo, useState } from 'react'; import React, { memo, useEffect, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { ExtendedSelectOption } from 'types/common/select'; import { SelectOption } from 'types/common/select';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { selectStyle } from '../QueryBuilderSearch/config'; import { selectStyle } from '../QueryBuilderSearch/config';
@ -22,7 +22,12 @@ export const GroupByFilter = memo(function GroupByFilter({
disabled, disabled,
}: GroupByFilterProps): JSX.Element { }: GroupByFilterProps): JSX.Element {
const [searchText, setSearchText] = useState<string>(''); const [searchText, setSearchText] = useState<string>('');
const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]); const [optionsData, setOptionsData] = useState<SelectOption<string, string>[]>(
[],
);
const [localValues, setLocalValues] = useState<SelectOption<string, string>[]>(
[],
);
const [isFocused, setIsFocused] = useState<boolean>(false); const [isFocused, setIsFocused] = useState<boolean>(false);
const debouncedValue = useDebounce(searchText, 300); const debouncedValue = useDebounce(searchText, 300);
@ -49,7 +54,7 @@ export const GroupByFilter = memo(function GroupByFilter({
(attrKey) => !keys.includes(attrKey.key), (attrKey) => !keys.includes(attrKey.key),
) || []; ) || [];
const options: ExtendedSelectOption[] = const options: SelectOption<string, string>[] =
filteredOptions.map((item) => ({ filteredOptions.map((item) => ({
label: transformStringWithPrefix({ label: transformStringWithPrefix({
str: item.key, str: item.key,
@ -61,8 +66,6 @@ export const GroupByFilter = memo(function GroupByFilter({
prefix: item.type || '', prefix: item.type || '',
condition: !item.isColumn, condition: !item.isColumn,
})}${selectValueDivider}${item.id || uuid()}`, })}${selectValueDivider}${item.id || uuid()}`,
key: item.id || uuid(),
title: item.key,
})) || []; })) || [];
setOptionsData(options); setOptionsData(options);
@ -74,59 +77,64 @@ export const GroupByFilter = memo(function GroupByFilter({
setSearchText(searchText); setSearchText(searchText);
}; };
const onBlur = (): void => { const handleBlur = (): void => {
setIsFocused(false); setIsFocused(false);
setSearchText(''); setSearchText('');
}; };
const onFocus = (): void => { const handleFocus = (): void => {
setIsFocused(true); setIsFocused(true);
}; };
const handleChange = (values: ExtendedSelectOption[]): void => { const handleChange = (values: SelectOption<string, string>[]): void => {
const responseKeys = data?.payload?.attributeKeys || [];
const groupByValues: BaseAutocompleteData[] = values.map((item) => { const groupByValues: BaseAutocompleteData[] = values.map((item) => {
const responseKeys = data?.payload?.attributeKeys || []; const [currentValue, id] = item.value.split(selectValueDivider);
const { key } = getFilterObjectValue(item.value); const { key, type, isColumn } = getFilterObjectValue(currentValue);
const existGroupResponse = responseKeys.find( const existGroupQuery = query.groupBy.find((group) => group.id === id);
(group) => group.id === item.key,
);
if (existGroupResponse) {
return existGroupResponse;
}
const existGroupQuery = query.groupBy.find((group) => group.id === item.key);
if (existGroupQuery) { if (existGroupQuery) {
return existGroupQuery; return existGroupQuery;
} }
const existGroupResponse = responseKeys.find((group) => group.id === id);
if (existGroupResponse) {
return existGroupResponse;
}
return { return {
id: uuid(), id: uuid(),
isColumn: null, isColumn,
key, key,
dataType: null, dataType: null,
type: null, type,
}; };
}); });
onChange(groupByValues); onChange(groupByValues);
}; };
const values: ExtendedSelectOption[] = query.groupBy.map((item) => ({ useEffect(() => {
label: transformStringWithPrefix({ const currentValues: SelectOption<string, string>[] = query.groupBy.map(
str: item.key, (item) => ({
prefix: item.type || '', label: `${transformStringWithPrefix({
condition: !item.isColumn, str: item.key,
}), prefix: item.type || '',
key: item.id || uuid(), condition: !item.isColumn,
value: `${transformStringWithPrefix({ })}`,
str: item.key, value: `${transformStringWithPrefix({
prefix: item.type || '', str: item.key,
condition: !item.isColumn, prefix: item.type || '',
})}${selectValueDivider}${item.id || uuid()}`, condition: !item.isColumn,
})); })}${selectValueDivider}${item.id || uuid()}`,
}),
);
setLocalValues(currentValues);
}, [query]);
return ( return (
<Select <Select
@ -136,12 +144,12 @@ export const GroupByFilter = memo(function GroupByFilter({
showSearch showSearch
disabled={disabled} disabled={disabled}
showArrow={false} showArrow={false}
onBlur={onBlur}
onFocus={onFocus}
options={optionsData}
filterOption={false} filterOption={false}
onBlur={handleBlur}
onFocus={handleFocus}
options={optionsData}
value={localValues}
labelInValue labelInValue
value={values}
notFoundContent={isFetching ? <Spin size="small" /> : null} notFoundContent={isFetching ? <Spin size="small" /> : null}
onChange={handleChange} onChange={handleChange}
/> />