GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 05:36:03 +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;
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 { IDashboardVariable } from 'types/api/dashboard/getAll';
import { VariableResponseProps } from 'types/api/dashboard/variables/query';
import { popupContainer } from 'utils/selectPopupContainer';
import { variablePropsToPayloadVariables } from '../utils';
import { SelectItemStyle, VariableContainer, VariableValue } from './styles';
@ -44,6 +45,7 @@ const getSelectValue = (
return selectedValue?.toString() || '';
};
// eslint-disable-next-line sonarjs/cognitive-complexity
function VariableItem({
variableData,
existingVariables,
@ -76,7 +78,12 @@ function VariableItem({
const variableName = variableData.name || '';
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, '');
@ -219,7 +226,7 @@ function VariableItem({
placement="top"
title={isDashboardLocked ? 'Dashboard is locked' : ''}
>
<VariableContainer>
<VariableContainer className="variable-item">
<Typography.Text className="variable-name" ellipsis>
${variableData.name}
</Typography.Text>
@ -229,6 +236,7 @@ function VariableItem({
placeholder="Enter value"
disabled={isDashboardLocked}
bordered={false}
key={variableData.selectedValue?.toString()}
defaultValue={variableData.selectedValue?.toString()}
onChange={(e): void => {
debouncedHandleChange(e.target.value || '');
@ -242,17 +250,25 @@ function VariableItem({
!errorMessage &&
optionsData && (
<Select
key={
selectValue && Array.isArray(selectValue)
? selectValue.join(' ')
: selectValue || variableData.id
}
defaultValue={selectValue}
onChange={handleChange}
bordered={false}
placeholder="Select value"
placement="bottomRight"
mode={mode}
dropdownMatchSelectWidth={false}
style={SelectItemStyle}
loading={isLoading}
showSearch
data-testid="variable-select"
className="variable-select"
disabled={isDashboardLocked}
getPopupContainer={popupContainer}
>
{enableSelectAll && (
<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>