GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 05:55:59 +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 { .ant-select-item {
display: flex; display: flex;
align-items: center; 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 { .all-label {
@ -56,28 +65,25 @@
} }
.dropdown-value { .dropdown-value {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: 1fr max-content;
align-items: center;
.option-text { .option-text {
max-width: 180px;
padding: 0 8px; padding: 0 8px;
} }
.toggle-tag-label { .toggle-tag-label {
padding-left: 8px; padding-left: 8px;
right: 40px; right: 40px;
font-weight: normal; font-weight: 500;
position: absolute;
} }
} }
} }
} }
.dropdown-styles { .dropdown-styles {
min-width: 300px; min-width: 400px;
max-width: 350px; max-width: 500px;
} }
.lightMode { .lightMode {

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

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