GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-01 03:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: [GH-4434]: dashboard variables performance issues (#4437)

Browse Source
This commit is contained in:
Vikrant Gupta 2024-01-25 23:12:19 +05:30 committed by GitHub
parent bb7417ffbd
commit 7e5cf65ea3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
View File

@ -5,9 +5,9 @@ import { WarningOutlined } from '@ant-design/icons';
import { Input, Popover, Select, Tooltip, Typography } from 'antd'; import { Input, Popover, Select, Tooltip, Typography } from 'antd';
import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery'; import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import useDebounce from 'hooks/useDebounce';
import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser'; import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
import sortValues from 'lib/dashbaordVariables/sortVariableValues'; import sortValues from 'lib/dashbaordVariables/sortVariableValues';
import { debounce } from 'lodash-es';
import map from 'lodash-es/map'; import map from 'lodash-es/map';
import { useDashboard } from 'providers/Dashboard/Dashboard'; import { useDashboard } from 'providers/Dashboard/Dashboard';
import { memo, useEffect, useMemo, useState } from 'react'; import { memo, useEffect, useMemo, useState } from 'react';
@ -55,24 +55,8 @@ function VariableItem({
[], [],
); );
const [variableValue, setVaribleValue] = useState(
variableData?.selectedValue?.toString() || '',
);
const debouncedVariableValue = useDebounce(variableValue, 500);
const [errorMessage, setErrorMessage] = useState<null | string>(null); const [errorMessage, setErrorMessage] = useState<null | string>(null);
useEffect(() => {
const { selectedValue } = variableData;
if (selectedValue) {
setVaribleValue(selectedValue?.toString());
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [variableData]);
const getDependentVariables = (queryValue: string): string[] => { const getDependentVariables = (queryValue: string): string[] => {
const matches = queryValue.match(variableRegexPattern); const matches = queryValue.match(variableRegexPattern);
@ -204,6 +188,9 @@ function VariableItem({
} }
}; };
// do not debounce the above function as we do not need debounce in select variables
const debouncedHandleChange = debounce(handleChange, 500);
const { selectedValue } = variableData; const { selectedValue } = variableData;
const selectedValueStringified = useMemo(() => getSelectValue(selectedValue), [ const selectedValueStringified = useMemo(() => getSelectValue(selectedValue), [
selectedValue, selectedValue,
@ -219,14 +206,6 @@ function VariableItem({
: undefined; : undefined;
const enableSelectAll = variableData.multiSelect && variableData.showALLOption; const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
useEffect(() => {
if (debouncedVariableValue !== variableData?.selectedValue?.toString()) {
handleChange(debouncedVariableValue);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedVariableValue]);
useEffect(() => { useEffect(() => {
// Fetch options for CUSTOM Type // Fetch options for CUSTOM Type
if (variableData.type === 'CUSTOM') { if (variableData.type === 'CUSTOM') {
@ -250,9 +229,9 @@ function VariableItem({
placeholder="Enter value" placeholder="Enter value"
disabled={isDashboardLocked} disabled={isDashboardLocked}
bordered={false} bordered={false}
value={variableValue} defaultValue={variableData.selectedValue?.toString()}
onChange={(e): void => { onChange={(e): void => {
setVaribleValue(e.target.value || ''); debouncedHandleChange(e.target.value || '');
}} }}
style={{ style={{
width: width:
@ -263,7 +242,7 @@ function VariableItem({
!errorMessage && !errorMessage &&
optionsData && ( optionsData && (
<Select <Select
value={selectValue} defaultValue={selectValue}
onChange={handleChange} onChange={handleChange}
bordered={false} bordered={false}
placeholder="Select value" placeholder="Select value"
@ -271,7 +250,6 @@ function VariableItem({
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
style={SelectItemStyle} style={SelectItemStyle}
loading={isLoading} loading={isLoading}
showArrow
showSearch showSearch
data-testid="variable-select" data-testid="variable-select"
disabled={isDashboardLocked} disabled={isDashboardLocked}