fix: cleanup and multiple threshold and state change handling

SigNoz · Oct 3, 2024 · 088aeb4 · 088aeb4
1 parent a7cea12
commit 088aeb4
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/frontend/src/container/GridTableComponent/utils.ts b/frontend/src/container/GridTableComponent/utils.ts
@@ -65,11 +65,6 @@ export function findMatchingThreshold(
 		if (
 			threshold.thresholdValue !== undefined &&
 			threshold.thresholdTableOptions === label &&
-			// evaluateCondition(
-			// 	threshold.thresholdOperator,
-			// 	value,
-			// 	threshold.thresholdValue,
-			// )
 			evaluateThresholdWithConvertedValue(
 				value,
 				threshold?.thresholdValue,

diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
@@ -5,7 +5,7 @@ import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Check, Pencil, Trash2, X } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 
 import {
@@ -194,6 +194,13 @@ function Threshold({
 
 	const allowDragAndDrop = panelTypeVsDragAndDrop[selectedGraph];
 
+	const isInvalidUnitComparison = useMemo(
+		() =>
+			unit !== 'none' &&
+			convertUnit(value, unit, columnUnits?.[tableSelectedOption]) === null,
+		[unit, value, columnUnits, tableSelectedOption],
+	);
+
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -341,10 +348,10 @@ function Threshold({
 						</>
 					)}
 				</div>
-				{unit !== 'none' && convertUnit(value, unit, columnUnits) === null && (
+				{isInvalidUnitComparison && (
 					<Typography.Text className="invalid-unit">
 						Threshold unit ({unit}) is not valid in comparison with the column unit (
-						{columnUnits || 'none'})
+						{columnUnits?.[tableSelectedOption] || 'none'})
 					</Typography.Text>
 				)}
 				{isEditMode && (

diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx
@@ -108,7 +108,7 @@ function ThresholdSelector({
 						thresholdLabel={threshold.thresholdLabel}
 						tableOptions={tableOptions}
 						thresholdTableOptions={threshold.thresholdTableOptions}
-						columnUnits={columnUnits[threshold.thresholdTableOptions || '']}
+						columnUnits={columnUnits}
 					/>
 				))}
 			</div>

diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts b/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts
@@ -20,7 +20,7 @@ export type ThresholdProps = {
 	moveThreshold: (dragIndex: number, hoverIndex: number) => void;
 	selectedGraph: PANEL_TYPES;
 	tableOptions?: Array<{ value: string; label: string }>;
-	columnUnits?: string;
+	columnUnits?: ColumnUnit;
 };
 
 export type ShowCaseValueProps = {

diff --git a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
@@ -578,8 +578,6 @@ export function convertUnit(
 		?.id;
 	const toUnit = category.formats.find((format) => format.id === toUnitId)?.id;
 
-	console.log(fromUnit, toUnit);
-
 	if (!fromUnit || !toUnit) return null;
 
 	const conversionFactor = getConversionFactor(