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

[Fix]: threshold dashboard fixes (#3980)

Browse Source
This commit is contained in:
Rajat Dabade 2023-11-16 15:27:48 +05:30 committed by GitHub
parent 5b419cb668
commit 75526c6de5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.styles.scss
View File

@ -1,3 +1,7 @@
.color-selector-button { .color-selector-button {
border: none; border: none;
} }
.color-selector-light {
border: 1px solid #d9d9d9;
}

7
frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx
View File

@ -4,6 +4,7 @@ import { DownOutlined } from '@ant-design/icons';
import { Button, ColorPicker, Dropdown, Space } from 'antd'; import { Button, ColorPicker, Dropdown, Space } from 'antd';
import { Color } from 'antd/es/color-picker'; import { Color } from 'antd/es/color-picker';
import { MenuProps } from 'antd/lib'; import { MenuProps } from 'antd/lib';
import { useIsDarkMode } from 'hooks/useDarkMode';
import useDebounce from 'hooks/useDebounce'; import useDebounce from 'hooks/useDebounce';
import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { Dispatch, SetStateAction, useEffect, useState } from 'react';
@ -17,6 +18,8 @@ function ColorSelector({
const debounceColor = useDebounce(colorFromPicker); const debounceColor = useDebounce(colorFromPicker);
const isDarkMode = useIsDarkMode();
useEffect(() => { useEffect(() => {
if (debounceColor) { if (debounceColor) {
setColor(debounceColor); setColor(debounceColor);
@ -66,7 +69,9 @@ function ColorSelector({
<Dropdown menu={{ items }} trigger={['click']}> <Dropdown menu={{ items }} trigger={['click']}>
<Button <Button
onClick={(e): void => e.preventDefault()} onClick={(e): void => e.preventDefault()}
className="color-selector-button" className={
isDarkMode ? 'color-selector-button' : 'color-selector-button-light'
}
> >
<Space> <Space>
<CustomColor color={thresholdColor} /> <CustomColor color={thresholdColor} />

60
frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
View File

@ -15,7 +15,12 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useDrag, useDrop, XYCoord } from 'react-dnd'; import { useDrag, useDrop, XYCoord } from 'react-dnd';
import { operatorOptions, showAsOptions, unitOptions } from '../constants'; import {
operatorOptions,
panelTypeVsDragAndDrop,
showAsOptions,
unitOptions,
} from '../constants';
import ColorSelector from './ColorSelector'; import ColorSelector from './ColorSelector';
import CustomColor from './CustomColor'; import CustomColor from './CustomColor';
import ShowCaseValue from './ShowCaseValue'; import ShowCaseValue from './ShowCaseValue';
@ -167,9 +172,12 @@ function Threshold({
setLabel(event.target.value); setLabel(event.target.value);
}; };
const backgroundColor = !isDarkMode ? '#ffffff' : '#141414';
const allowDragAndDrop = panelTypeVsDragAndDrop[selectedGraph];
return ( return (
<div <div
ref={ref} ref={allowDragAndDrop ? ref : null}
style={{ opacity }} style={{ opacity }}
data-handler-id={handlerId} data-handler-id={handlerId}
className="threshold-container" className="threshold-container"
@ -200,9 +208,14 @@ function Threshold({
<> <>
<Typography.Text>Label</Typography.Text> <Typography.Text>Label</Typography.Text>
{isEditMode ? ( {isEditMode ? (
<Input defaultValue={label} onChange={handleLabelChange} /> <Input
defaultValue={label}
onChange={handleLabelChange}
bordered={!isDarkMode}
style={{ backgroundColor }}
/>
) : ( ) : (
<ShowCaseValue width="180px" value={label} /> <ShowCaseValue width="180px" value={label || 'none'} />
)} )}
</> </>
)} )}
@ -211,10 +224,11 @@ function Threshold({
<Typography.Text>If value is</Typography.Text> <Typography.Text>If value is</Typography.Text>
{isEditMode ? ( {isEditMode ? (
<Select <Select
style={{ minWidth: '73px' }} style={{ minWidth: '73px', backgroundColor }}
defaultValue={operator} defaultValue={operator}
options={operatorOptions} options={operatorOptions}
onChange={handleOperatorChange} onChange={handleOperatorChange}
bordered={!isDarkMode}
/> />
) : ( ) : (
<ShowCaseValue width="49px" value={operator} /> <ShowCaseValue width="49px" value={operator} />
@ -227,18 +241,18 @@ function Threshold({
<Space> <Space>
{isEditMode ? ( {isEditMode ? (
<InputNumber <InputNumber
style={{ backgroundColor: '#141414' }} style={{ backgroundColor }}
defaultValue={value} defaultValue={value}
onChange={handleValueChange} onChange={handleValueChange}
bordered={false} bordered={!isDarkMode}
/> />
) : ( ) : (
<ShowCaseValue width="60px" value={value} /> <ShowCaseValue width="60px" value={value} />
)} )}
{isEditMode ? ( {isEditMode ? (
<Select <Select
style={{ minWidth: '200px', backgroundColor: '#141414' }} style={{ minWidth: '200px', backgroundColor }}
bordered={false} bordered={!isDarkMode}
defaultValue={unit} defaultValue={unit}
options={unitOptions} options={unitOptions}
onChange={handleUnitChange} onChange={handleUnitChange}
@ -253,20 +267,22 @@ function Threshold({
<Space direction="vertical"> <Space direction="vertical">
<Typography.Text>Show with</Typography.Text> <Typography.Text>Show with</Typography.Text>
<Space> <Space>
{isEditMode && selectedGraph === PANEL_TYPES.TIME_SERIES ? ( {isEditMode ? (
<ColorSelector setColor={setColor} thresholdColor={color} /> <>
<ColorSelector setColor={setColor} thresholdColor={color} />
<Select
style={{ minWidth: '100px', backgroundColor }}
defaultValue={format}
options={showAsOptions}
onChange={handlerFormatChange}
bordered={!isDarkMode}
/>
</>
) : ( ) : (
<ShowCaseValue width="100px" value={<CustomColor color={color} />} /> <>
)} <ShowCaseValue width="100px" value={<CustomColor color={color} />} />
{isEditMode && selectedGraph === PANEL_TYPES.VALUE ? ( <ShowCaseValue width="100px" value={format} />
<Select </>
style={{ minWidth: '100px' }}
defaultValue={format}
options={showAsOptions}
onChange={handlerFormatChange}
/>
) : (
<ShowCaseValue width="100px" value={format} />
)} )}
</Space> </Space>
</Space> </Space>

19
frontend/src/container/NewWidget/RightContainer/constants.ts
View File

@ -1,4 +1,5 @@
import { DefaultOptionType } from 'antd/es/select'; import { DefaultOptionType } from 'antd/es/select';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { categoryToSupport } from 'container/QueryBuilder/filters/BuilderUnitsFilter/config'; import { categoryToSupport } from 'container/QueryBuilder/filters/BuilderUnitsFilter/config';
import { getCategorySelectOptionByName } from './alertFomatCategories'; import { getCategorySelectOptionByName } from './alertFomatCategories';
@ -19,3 +20,21 @@ export const showAsOptions: DefaultOptionType[] = [
{ value: 'Text', label: 'Text' }, { value: 'Text', label: 'Text' },
{ value: 'Background', label: 'Background' }, { value: 'Background', label: 'Background' },
]; ];
export const panelTypeVsThreshold: { [key in PANEL_TYPES]: boolean } = {
[PANEL_TYPES.TIME_SERIES]: true,
[PANEL_TYPES.VALUE]: true,
[PANEL_TYPES.TABLE]: false,
[PANEL_TYPES.LIST]: false,
[PANEL_TYPES.TRACE]: false,
[PANEL_TYPES.EMPTY_WIDGET]: false,
} as const;
export const panelTypeVsDragAndDrop: { [key in PANEL_TYPES]: boolean } = {
[PANEL_TYPES.TIME_SERIES]: false,
[PANEL_TYPES.VALUE]: true,
[PANEL_TYPES.TABLE]: true,
[PANEL_TYPES.LIST]: false,
[PANEL_TYPES.TRACE]: false,
[PANEL_TYPES.EMPTY_WIDGET]: false,
} as const;

22
frontend/src/container/NewWidget/RightContainer/index.tsx
View File

@ -18,6 +18,7 @@ import history from 'lib/history';
import { Dispatch, SetStateAction, useCallback } from 'react'; import { Dispatch, SetStateAction, useCallback } from 'react';
import { Widgets } from 'types/api/dashboard/getAll'; import { Widgets } from 'types/api/dashboard/getAll';
import { panelTypeVsThreshold } from './constants';
import { Container, Title } from './styles'; import { Container, Title } from './styles';
import ThresholdSelector from './Threshold/ThresholdSelector'; import ThresholdSelector from './Threshold/ThresholdSelector';
import { ThresholdProps } from './Threshold/types'; import { ThresholdProps } from './Threshold/types';
@ -64,6 +65,8 @@ function RightContainer({
); );
}, [selectedWidget]); }, [selectedWidget]);
const allowThreshold = panelTypeVsThreshold[selectedGraph];
return ( return (
<Container> <Container>
<Title>Panel Type</Title> <Title>Panel Type</Title>
@ -176,14 +179,17 @@ function RightContainer({
)} )}
</Space> </Space>
<Divider /> {allowThreshold && (
<>
<ThresholdSelector <Divider />
thresholds={thresholds} <ThresholdSelector
setThresholds={setThresholds} thresholds={thresholds}
yAxisUnit={yAxisUnit} setThresholds={setThresholds}
selectedGraph={selectedGraph} yAxisUnit={yAxisUnit}
/> selectedGraph={selectedGraph}
/>
</>
)}
</Container> </Container>
); );
} }