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

fix: dashboard variable - ux and usability fixes (#6038)

Browse Source 
* fix: dashboard variable - ux and usability fixes

* fix: separarted all option, fixed tooltip handling, added clear option etc
This commit is contained in:
SagarRajput-7 2024-09-25 11:32:19 +05:30 committed by GitHub
parent 58d6487f77
commit 35f8e133a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,15 @@
.ant-select-item {
display: flex;
align-items: center;
gap: 8px;
}
.rc-virtual-list-holder {
[data-testid='option-ALL'] {
border-bottom: 1px solid var(--bg-slate-400);
padding-bottom: 12px;
margin-bottom: 8px;
}
}
.all-label {
@ -56,28 +65,25 @@
}
.dropdown-value {
display: flex;
justify-content: space-between;
align-items: center;
display: grid;
grid-template-columns: 1fr max-content;
.option-text {
max-width: 180px;
padding: 0 8px;
}
.toggle-tag-label {
padding-left: 8px;
right: 40px;
font-weight: normal;
position: absolute;
font-weight: 500;
}
}
}
}
.dropdown-styles {
min-width: 300px;
max-width: 350px;
min-width: 400px;
max-width: 500px;
}
.lightMode {

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

@ -62,14 +62,14 @@ interface VariableItemProps {
const getSelectValue = (
selectedValue: IDashboardVariable['selectedValue'],
variableData: IDashboardVariable,
): string | string[] => {
): string | string[] | undefined => {
if (Array.isArray(selectedValue)) {
if (!variableData.multiSelect && selectedValue.length === 1) {
return selectedValue[0]?.toString() || '';
return selectedValue[0]?.toString();
}
return selectedValue.map((item) => item.toString());
}
return selectedValue?.toString() || '';
return selectedValue?.toString();
};
// eslint-disable-next-line sonarjs/cognitive-complexity
@ -300,7 +300,7 @@ function VariableItem({
e.stopPropagation();
e.preventDefault();
const isChecked =
variableData.allSelected || selectValue.includes(ALL_SELECT_VALUE);
variableData.allSelected || selectValue?.includes(ALL_SELECT_VALUE);
if (isChecked) {
handleChange([]);
@ -462,6 +462,7 @@ function VariableItem({
<span>+ {omittedValues.length} </span>
</Tooltip>
)}
allowClear
>
{enableSelectAll && (
<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
@ -500,11 +501,17 @@ function VariableItem({
{...retProps(option as string)}
onClick={(e): void => handleToggle(e as any, option as string)}
>
<Tooltip title={option.toString()} placement="bottomRight">
<Typography.Text ellipsis className="option-text">
{option.toString()}
</Typography.Text>
</Tooltip>
<Typography.Text
ellipsis={{
tooltip: {
placement: variableData.multiSelect ? 'top' : 'right',
autoAdjustOverflow: true,
},
}}
className="option-text"
>
{option.toString()}
</Typography.Text>
{variableData.multiSelect &&
optionState.tag === option.toString() &&