[Fix]: threshold dashboard fixes (#3980)

SigNoz · Nov 16, 2023 · 75526c6 · 75526c6
1 parent 5b419cb
commit 75526c6
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 31 deletions.
diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.styles.scss b/frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.styles.scss
@@ -1,3 +1,7 @@
 .color-selector-button {
     border: none;
 }
+
+.color-selector-light {
+    border: 1px solid #d9d9d9;
+}
diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx
@@ -4,6 +4,7 @@ import { DownOutlined } from '@ant-design/icons';
 import { Button, ColorPicker, Dropdown, Space } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MenuProps } from 'antd/lib';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
@@ -17,6 +18,8 @@ function ColorSelector({
 
 	const debounceColor = useDebounce(colorFromPicker);
 
+	const isDarkMode = useIsDarkMode();
+
 	useEffect(() => {
 		if (debounceColor) {
 			setColor(debounceColor);
@@ -66,7 +69,9 @@ function ColorSelector({
 		<Dropdown menu={{ items }} trigger={['click']}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
-				className="color-selector-button"
+				className={
+					isDarkMode ? 'color-selector-button' : 'color-selector-button-light'
+				}
 			>
 				<Space>
 					<CustomColor color={thresholdColor} />

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

diff --git a/frontend/src/container/NewWidget/RightContainer/constants.ts b/frontend/src/container/NewWidget/RightContainer/constants.ts
@@ -1,4 +1,5 @@
 import { DefaultOptionType } from 'antd/es/select';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { categoryToSupport } from 'container/QueryBuilder/filters/BuilderUnitsFilter/config';
 
 import { getCategorySelectOptionByName } from './alertFomatCategories';
@@ -19,3 +20,21 @@ export const showAsOptions: DefaultOptionType[] = [
 	{ value: 'Text', label: 'Text' },
 	{ 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;
diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -18,6 +18,7 @@ import history from 'lib/history';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 
+import { panelTypeVsThreshold } from './constants';
 import { Container, Title } from './styles';
 import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
@@ -64,6 +65,8 @@ function RightContainer({
 		);
 	}, [selectedWidget]);
 
+	const allowThreshold = panelTypeVsThreshold[selectedGraph];
+
 	return (
 		<Container>
 			<Title>Panel Type</Title>
@@ -176,14 +179,17 @@ function RightContainer({
 				)}
 			</Space>
 
-			<Divider />
-
-			<ThresholdSelector
-				thresholds={thresholds}
-				setThresholds={setThresholds}
-				yAxisUnit={yAxisUnit}
-				selectedGraph={selectedGraph}
-			/>
+			{allowThreshold && (
+				<>
+					<Divider />
+					<ThresholdSelector
+						thresholds={thresholds}
+						setThresholds={setThresholds}
+						yAxisUnit={yAxisUnit}
+						selectedGraph={selectedGraph}
+					/>
+				</>
+			)}
 		</Container>
 	);
 }