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

feat: remove disabled in case of dashboard locked (#4709)

Browse Source
This commit is contained in:
Vikrant Gupta 2024-03-15 12:28:03 +05:30 committed by GitHub
parent 0365fa5421
commit 60946b5e9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,13 @@ import './DashboardVariableSelection.styles.scss';
import { orange } from '@ant-design/colors'; import { orange } from '@ant-design/colors';
import { WarningOutlined } from '@ant-design/icons'; import { WarningOutlined } from '@ant-design/icons';
import { Input, Popover, Select, Tooltip, Typography } from 'antd'; import { Input, Popover, Select, 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 { 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 { debounce } from 'lodash-es';
import map from 'lodash-es/map'; import map from 'lodash-es/map';
import { useDashboard } from 'providers/Dashboard/Dashboard';
import { memo, useEffect, useMemo, useState } from 'react'; 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';
@ -52,7 +51,6 @@ function VariableItem({
onValueUpdate, onValueUpdate,
lastUpdatedVar, lastUpdatedVar,
}: VariableItemProps): JSX.Element { }: VariableItemProps): JSX.Element {
const { isDashboardLocked } = useDashboard();
const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>( const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
[], [],
); );
@ -222,84 +220,77 @@ function VariableItem({
}, [variableData.type, variableData.customValue]); }, [variableData.type, variableData.customValue]);
return ( return (
<Tooltip <VariableContainer className="variable-item">
placement="top" <Typography.Text className="variable-name" ellipsis>
title={isDashboardLocked ? 'Dashboard is locked' : ''} ${variableData.name}
> </Typography.Text>
<VariableContainer className="variable-item"> <VariableValue>
<Typography.Text className="variable-name" ellipsis> {variableData.type === 'TEXTBOX' ? (
${variableData.name} <Input
</Typography.Text> placeholder="Enter value"
<VariableValue> bordered={false}
{variableData.type === 'TEXTBOX' ? ( key={variableData.selectedValue?.toString()}
<Input defaultValue={variableData.selectedValue?.toString()}
placeholder="Enter value" onChange={(e): void => {
disabled={isDashboardLocked} debouncedHandleChange(e.target.value || '');
}}
style={{
width:
50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50),
}}
/>
) : (
!errorMessage &&
optionsData && (
<Select
key={
selectValue && Array.isArray(selectValue)
? selectValue.join(' ')
: selectValue || variableData.id
}
defaultValue={selectValue}
onChange={handleChange}
bordered={false} bordered={false}
key={variableData.selectedValue?.toString()} placeholder="Select value"
defaultValue={variableData.selectedValue?.toString()} placement="bottomRight"
onChange={(e): void => { mode={mode}
debouncedHandleChange(e.target.value || ''); dropdownMatchSelectWidth={false}
}} style={SelectItemStyle}
style={{ loading={isLoading}
width: showSearch
50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50), data-testid="variable-select"
}} className="variable-select"
/> getPopupContainer={popupContainer}
) : ( >
!errorMessage && {enableSelectAll && (
optionsData && ( <Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
<Select ALL
key={ </Select.Option>
selectValue && Array.isArray(selectValue) )}
? selectValue.join(' ') {map(optionsData, (option) => (
: selectValue || variableData.id <Select.Option
} data-testid={`option-${option}`}
defaultValue={selectValue} key={option.toString()}
onChange={handleChange} value={option}
bordered={false} >
placeholder="Select value" {option.toString()}
placement="bottomRight" </Select.Option>
mode={mode} ))}
dropdownMatchSelectWidth={false} </Select>
style={SelectItemStyle} )
loading={isLoading} )}
showSearch {variableData.type !== 'TEXTBOX' && errorMessage && (
data-testid="variable-select" <span style={{ margin: '0 0.5rem' }}>
className="variable-select" <Popover
disabled={isDashboardLocked} placement="top"
getPopupContainer={popupContainer} content={<Typography>{errorMessage}</Typography>}
> >
{enableSelectAll && ( <WarningOutlined style={{ color: orange[5] }} />
<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}> </Popover>
ALL </span>
</Select.Option> )}
)} </VariableValue>
{map(optionsData, (option) => ( </VariableContainer>
<Select.Option
data-testid={`option-${option}`}
key={option.toString()}
value={option}
>
{option.toString()}
</Select.Option>
))}
</Select>
)
)}
{variableData.type !== 'TEXTBOX' && errorMessage && (
<span style={{ margin: '0 0.5rem' }}>
<Popover
placement="top"
content={<Typography>{errorMessage}</Typography>}
>
<WarningOutlined style={{ color: orange[5] }} />
</Popover>
</span>
)}
</VariableValue>
</VariableContainer>
</Tooltip>
); );
} }