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

fix: variable selection flow - dependent variable option not updated … (#4438)

Browse Source 
* fix: variable selection flow - dependent variable option not updated on change

* fix: dropdown width and parent element update

* fix: add key to variable item inputs
This commit is contained in:
Yunus M 2024-01-27 12:59:28 +05:30 committed by GitHub
parent 4a4f48cec8
commit a8b293a510
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
View File

@ -6,3 +6,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
color: gray; color: gray;
} }
.variable-item {
.variable-select {
.ant-select-dropdown {
max-width: 300px;
}
}
}

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

@ -14,6 +14,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { IDashboardVariable } from 'types/api/dashboard/getAll'; import { IDashboardVariable } from 'types/api/dashboard/getAll';
import { VariableResponseProps } from 'types/api/dashboard/variables/query'; import { VariableResponseProps } from 'types/api/dashboard/variables/query';
import { popupContainer } from 'utils/selectPopupContainer';
import { variablePropsToPayloadVariables } from '../utils'; import { variablePropsToPayloadVariables } from '../utils';
import { SelectItemStyle, VariableContainer, VariableValue } from './styles'; import { SelectItemStyle, VariableContainer, VariableValue } from './styles';
@ -44,6 +45,7 @@ const getSelectValue = (
return selectedValue?.toString() || ''; return selectedValue?.toString() || '';
}; };
// eslint-disable-next-line sonarjs/cognitive-complexity
function VariableItem({ function VariableItem({
variableData, variableData,
existingVariables, existingVariables,
@ -76,7 +78,12 @@ function VariableItem({
const variableName = variableData.name || ''; const variableName = variableData.name || '';
dependentVariables?.forEach((element) => { dependentVariables?.forEach((element) => {
dependentVariablesStr += `${element}${existingVariables[element]?.selectedValue}`; const [, variable] =
Object.entries(existingVariables).find(
([, value]) => value.name === element,
) || [];
dependentVariablesStr += `${element}${variable?.selectedValue}`;
}); });
const variableKey = dependentVariablesStr.replace(/\s/g, ''); const variableKey = dependentVariablesStr.replace(/\s/g, '');
@ -219,7 +226,7 @@ function VariableItem({
placement="top" placement="top"
title={isDashboardLocked ? 'Dashboard is locked' : ''} title={isDashboardLocked ? 'Dashboard is locked' : ''}
> >
<VariableContainer> <VariableContainer className="variable-item">
<Typography.Text className="variable-name" ellipsis> <Typography.Text className="variable-name" ellipsis>
${variableData.name} ${variableData.name}
</Typography.Text> </Typography.Text>
@ -229,6 +236,7 @@ function VariableItem({
placeholder="Enter value" placeholder="Enter value"
disabled={isDashboardLocked} disabled={isDashboardLocked}
bordered={false} bordered={false}
key={variableData.selectedValue?.toString()}
defaultValue={variableData.selectedValue?.toString()} defaultValue={variableData.selectedValue?.toString()}
onChange={(e): void => { onChange={(e): void => {
debouncedHandleChange(e.target.value || ''); debouncedHandleChange(e.target.value || '');
@ -242,17 +250,25 @@ function VariableItem({
!errorMessage && !errorMessage &&
optionsData && ( optionsData && (
<Select <Select
key={
selectValue && Array.isArray(selectValue)
? selectValue.join(' ')
: selectValue || variableData.id
}
defaultValue={selectValue} defaultValue={selectValue}
onChange={handleChange} onChange={handleChange}
bordered={false} bordered={false}
placeholder="Select value" placeholder="Select value"
placement="bottomRight"
mode={mode} mode={mode}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
style={SelectItemStyle} style={SelectItemStyle}
loading={isLoading} loading={isLoading}
showSearch showSearch
data-testid="variable-select" data-testid="variable-select"
className="variable-select"
disabled={isDashboardLocked} disabled={isDashboardLocked}
getPopupContainer={popupContainer}
> >
{enableSelectAll && ( {enableSelectAll && (
<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}> <Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>