Merge branch 'main' into issue/9362

frontend/src/components/ValueGraph/__tests__/ValueGraph.test.tsx

@@ -0,0 +1,218 @@
+import { render, screen } from '@testing-library/react';
+
+import ValueGraph from '../index';
+import { getBackgroundColorAndThresholdCheck } from '../utils';
+
+// Mock ResizeObserver
+class ResizeObserverMock {
+	// eslint-disable-next-line class-methods-use-this
+	observe(): void {}
+
+	// eslint-disable-next-line class-methods-use-this
+	unobserve(): void {}
+
+	// eslint-disable-next-line class-methods-use-this
+	disconnect(): void {}
+}
+
+global.ResizeObserver = (ResizeObserverMock as unknown) as typeof ResizeObserver;
+
+// Mock the utils module
+jest.mock('../utils', () => ({
+	getBackgroundColorAndThresholdCheck: jest.fn(() => ({
+		threshold: {} as any,
+		isConflictingThresholds: false,
+	})),
+}));
+
+const mockGetBackgroundColorAndThresholdCheck = getBackgroundColorAndThresholdCheck as jest.MockedFunction<
+	typeof getBackgroundColorAndThresholdCheck
+>;
+
+const TEST_ID_VALUE_GRAPH_TEXT = 'value-graph-text';
+const TEST_ID_VALUE_GRAPH_PREFIX_UNIT = 'value-graph-prefix-unit';
+const TEST_ID_VALUE_GRAPH_SUFFIX_UNIT = 'value-graph-suffix-unit';
+
+describe('ValueGraph', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the numeric value correctly', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
+	});
+
+	it('renders value with suffix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42ms" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('ms');
+	});
+
+	it('renders value with prefix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="$100" rawValue={100} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
+	});
+
+	it('renders value with both prefix and suffix units', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="$100USD" rawValue={100} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('USD');
+	});
+
+	it('renders value with K suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1.5K" rawValue={1500} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.5K');
+	});
+
+	it('applies text color when threshold format is Text', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'red',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveStyle({ color: 'red' });
+	});
+
+	it('applies background color when threshold format is Background', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Background',
+				thresholdColor: 'blue',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		const { container } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		const containerElement = container.querySelector('.value-graph-container');
+		expect(containerElement).toHaveStyle({ backgroundColor: 'blue' });
+	});
+
+	it('displays conflicting thresholds indicator when multiple thresholds match', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'red',
+			} as any,
+			isConflictingThresholds: true,
+		});
+
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId('conflicting-thresholds')).toBeInTheDocument();
+	});
+
+	it('does not display conflicting thresholds indicator when no conflict', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {} as any,
+			isConflictingThresholds: false,
+		});
+
+		render(<ValueGraph value="42" rawValue={42} thresholds={[]} />);
+
+		expect(
+			screen.queryByTestId('conflicting-thresholds'),
+		).not.toBeInTheDocument();
+	});
+
+	it('applies text color to units when threshold format is Text', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'green',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		render(<ValueGraph value="42ms" rawValue={42} thresholds={[]} />);
+
+		const unitElement = screen.getByText('ms');
+		expect(unitElement).toHaveStyle({ color: 'green' });
+	});
+
+	it('renders decimal values correctly', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42.5" rawValue={42.5} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42.5');
+	});
+
+	it('handles values with M suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1.2M" rawValue={1200000} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.2M');
+	});
+
+	it('handles values with B suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="2.3B" rawValue={2300000000} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('2.3B');
+	});
+
+	it('handles scientific notation values', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e-9" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
+	});
+
+	it('handles scientific notation with suffix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e-9%" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('%');
+	});
+
+	it('handles scientific notation with uppercase E', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1E-9" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1E-9');
+	});
+
+	it('handles scientific notation with positive exponent', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e+9" rawValue={1e9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e+9');
+	});
+});

frontend/src/components/ValueGraph/index.tsx

@@ -3,7 +3,7 @@ import './ValueGraph.styles.scss';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
@@ -17,10 +17,16 @@ function ValueGraph({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [fontSize, setFontSize] = useState('2.5vw');
 
-	// Parse value to separate number and unit (assuming unit is at the end)
-	const matches = value.match(/([\d.]+[KMB]?)(.*)$/);
-	const numericValue = matches?.[1] || value;
-	const unit = matches?.[2]?.trim() || '';
+	const { numericValue, prefixUnit, suffixUnit } = useMemo(() => {
+		const matches = value.match(
+			/^([^\d.]*)?([\d.]+(?:[eE][+-]?[\d]+)?[KMB]?)([^\d.]*)?$/,
+		);
+		return {
+			numericValue: matches?.[2] || value,
+			prefixUnit: matches?.[1]?.trim() || '',
+			suffixUnit: matches?.[3]?.trim() || '',
+		};
+	}, [value]);
 
 	// Adjust font size based on container size
 	useEffect(() => {
@@ -65,8 +71,24 @@ function ValueGraph({
 			}}
 		>
 			<div className="value-text-container">
+				{prefixUnit && (
+					<Typography.Text
+						className="value-graph-unit"
+						data-testid="value-graph-prefix-unit"
+						style={{
+							color:
+								threshold.thresholdFormat === 'Text'
+									? threshold.thresholdColor
+									: undefined,
+							fontSize: `calc(${fontSize} * 0.7)`,
+						}}
+					>
+						{prefixUnit}
+					</Typography.Text>
+				)}
 				<Typography.Text
 					className="value-graph-text"
+					data-testid="value-graph-text"
 					style={{
 						color:
 							threshold.thresholdFormat === 'Text'
@@ -77,9 +99,10 @@ function ValueGraph({
 				>
 					{numericValue}
 				</Typography.Text>
-				{unit && (
+				{suffixUnit && (
 					<Typography.Text
 						className="value-graph-unit"
+						data-testid="value-graph-suffix-unit"
 						style={{
 							color:
 								threshold.thresholdFormat === 'Text'
@@ -88,7 +111,7 @@ function ValueGraph({
 							fontSize: `calc(${fontSize} * 0.7)`,
 						}}
 					>
-						{unit}
+						{suffixUnit}
 					</Typography.Text>
 				)}
 			</div>

frontend/src/container/LogExplorerQuerySection/LogExplorerQuerySection.test.tsx

@@ -1,275 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import { render, waitFor } from 'tests/test-utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query, QueryState } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
-
-import LogExplorerQuerySection from './index';
-
-const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
-
-// Mock DOM APIs that CodeMirror needs
-beforeAll(() => {
-	// Mock getClientRects and getBoundingClientRect for Range objects
-	const mockRect: DOMRect = {
-		width: 100,
-		height: 20,
-		top: 0,
-		left: 0,
-		right: 100,
-		bottom: 20,
-		x: 0,
-		y: 0,
-		toJSON: (): DOMRect => mockRect,
-	} as DOMRect;
-
-	// Create a minimal Range mock with only what CodeMirror actually uses
-	const createMockRange = (): Range => {
-		let startContainer: Node = document.createTextNode('');
-		let endContainer: Node = document.createTextNode('');
-		let startOffset = 0;
-		let endOffset = 0;
-
-		const rectList = {
-			length: 1,
-			item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
-			0: mockRect,
-		};
-
-		const mockRange = {
-			// CodeMirror uses these for text measurement
-			getClientRects: (): DOMRectList => (rectList as unknown) as DOMRectList,
-			getBoundingClientRect: (): DOMRect => mockRect,
-			// CodeMirror calls these to set up text ranges
-			setStart: (node: Node, offset: number): void => {
-				startContainer = node;
-				startOffset = offset;
-			},
-			setEnd: (node: Node, offset: number): void => {
-				endContainer = node;
-				endOffset = offset;
-			},
-			// Minimal Range properties (TypeScript requires these)
-			get startContainer(): Node {
-				return startContainer;
-			},
-			get endContainer(): Node {
-				return endContainer;
-			},
-			get startOffset(): number {
-				return startOffset;
-			},
-			get endOffset(): number {
-				return endOffset;
-			},
-			get collapsed(): boolean {
-				return startContainer === endContainer && startOffset === endOffset;
-			},
-			commonAncestorContainer: document.body,
-		};
-		return (mockRange as unknown) as Range;
-	};
-
-	// Mock document.createRange to return a new Range instance each time
-	document.createRange = (): Range => createMockRange();
-
-	// Mock getBoundingClientRect for elements
-	Element.prototype.getBoundingClientRect = (): DOMRect => mockRect;
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): { selectedDashboard: undefined } => ({
-		selectedDashboard: undefined,
-	}),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn().mockResolvedValue({
-		data: {
-			data: { keys: {} },
-		},
-	}),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn().mockResolvedValue({
-		data: { data: { values: { stringValues: [], numberValues: [] } } },
-	}),
-}));
-
-// Mock the hooks
-jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam');
-jest.mock('hooks/queryBuilder/useShareBuilderUrl');
-
-const mockUseGetPanelTypesQueryParam = jest.mocked(useGetPanelTypesQueryParam);
-const mockUseShareBuilderUrl = jest.mocked(useShareBuilderUrl);
-
-const mockUpdateAllQueriesOperators = jest.fn() as jest.MockedFunction<
-	(query: Query, panelType: PANEL_TYPES, dataSource: DataSource) => Query
->;
-
-const mockResetQuery = jest.fn() as jest.MockedFunction<
-	(newCurrentQuery?: QueryState) => void
->;
-
-const mockRedirectWithQueryBuilderData = jest.fn() as jest.MockedFunction<
-	(query: Query) => void
->;
-
-// Create a mock query that we'll use to verify persistence
-const createMockQuery = (filterExpression?: string): Query => ({
-	id: 'test-query-id',
-	queryType: EQueryType.QUERY_BUILDER,
-	builder: {
-		queryData: [
-			{
-				aggregateAttribute: {
-					id: 'body--string----false',
-					dataType: DataTypes.String,
-					key: 'body',
-					type: '',
-				},
-				aggregateOperator: 'count',
-				dataSource: DataSource.LOGS,
-				disabled: false,
-				expression: 'A',
-				filters: {
-					items: [],
-					op: 'AND',
-				},
-				filter: filterExpression
-					? {
-							expression: filterExpression,
-					  }
-					: undefined,
-				functions: [],
-				groupBy: [],
-				having: [],
-				legend: '',
-				limit: null,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				pageSize: 0,
-				queryName: 'A',
-				reduceTo: 'avg',
-				stepInterval: 60,
-			},
-		],
-		queryFormulas: [],
-		queryTraceOperator: [],
-	},
-	clickhouse_sql: [],
-	promql: [],
-});
-
-// Helper function to verify CodeMirror content
-const verifyCodeMirrorContent = async (
-	expectedFilterExpression: string,
-): Promise<void> => {
-	await waitFor(
-		() => {
-			const editorContent = document.querySelector(
-				CM_EDITOR_SELECTOR,
-			) as HTMLElement;
-			expect(editorContent).toBeInTheDocument();
-			const textContent = editorContent.textContent || '';
-			expect(textContent).toBe(expectedFilterExpression);
-		},
-		{ timeout: 3000 },
-	);
-};
-
-const VIEWS_TO_TEST = [
-	ExplorerViews.LIST,
-	ExplorerViews.TIMESERIES,
-	ExplorerViews.TABLE,
-];
-
-describe('LogExplorerQuerySection', () => {
-	let mockQuery: Query;
-	let mockQueryBuilderContext: Partial<QueryBuilderContextType>;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		mockQuery = createMockQuery();
-
-		// Mock the return value of updateAllQueriesOperators to return the same query
-		mockUpdateAllQueriesOperators.mockReturnValue(mockQuery);
-
-		// Setup query builder context mock
-		mockQueryBuilderContext = {
-			currentQuery: mockQuery,
-			updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-			resetQuery: mockResetQuery,
-			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-			panelType: PANEL_TYPES.LIST,
-			initialDataSource: DataSource.LOGS,
-			addNewBuilderQuery: jest.fn() as jest.MockedFunction<() => void>,
-			addNewFormula: jest.fn() as jest.MockedFunction<() => void>,
-			handleSetConfig: jest.fn() as jest.MockedFunction<
-				(panelType: PANEL_TYPES, dataSource: DataSource | null) => void
-			>,
-			addTraceOperator: jest.fn() as jest.MockedFunction<() => void>,
-		};
-
-		// Mock useGetPanelTypesQueryParam
-		mockUseGetPanelTypesQueryParam.mockReturnValue(PANEL_TYPES.LIST);
-
-		// Mock useShareBuilderUrl
-		mockUseShareBuilderUrl.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should maintain query state across multiple view changes', () => {
-		const { rerender } = render(
-			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
-			undefined,
-			{
-				queryBuilderOverrides: mockQueryBuilderContext as QueryBuilderContextType,
-			},
-		);
-
-		const initialQuery = mockQueryBuilderContext.currentQuery;
-
-		VIEWS_TO_TEST.forEach((view) => {
-			rerender(<LogExplorerQuerySection selectedView={view} />);
-			expect(mockQueryBuilderContext.currentQuery).toEqual(initialQuery);
-		});
-	});
-
-	it('should persist filter expressions across view changes', async () => {
-		// Test with a more complex filter expression
-		const complexFilter =
-			"(service.name = 'api-gateway' OR service.name = 'backend') AND http.status_code IN [500, 502, 503] AND NOT error = 'timeout'";
-		const queryWithComplexFilter = createMockQuery(complexFilter);
-
-		const contextWithComplexFilter: Partial<QueryBuilderContextType> = {
-			...mockQueryBuilderContext,
-			currentQuery: queryWithComplexFilter,
-		};
-
-		const { rerender } = render(
-			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
-			undefined,
-			{
-				queryBuilderOverrides: contextWithComplexFilter as QueryBuilderContextType,
-			},
-		);
-
-		VIEWS_TO_TEST.forEach(async (view) => {
-			rerender(<LogExplorerQuerySection selectedView={view} />);
-			await verifyCodeMirrorContent(complexFilter);
-		});
-	});
-});

frontend/src/container/NewWidget/index.tsx

@@ -501,7 +501,7 @@ function NewWidget({
 								stackedBarChart: selectedWidget?.stackedBarChart || false,
 								yAxisUnit: selectedWidget?.yAxisUnit,
 								decimalPrecision:
-									selectedWidget?.decimalPrecision || PrecisionOptionsEnum.TWO,
+									selectedWidget?.decimalPrecision ?? PrecisionOptionsEnum.TWO,
 								panelTypes: graphType,
 								query: adjustedQueryForV5,
 								thresholds: selectedWidget?.thresholds,
@@ -532,7 +532,7 @@ function NewWidget({
 								stackedBarChart: selectedWidget?.stackedBarChart || false,
 								yAxisUnit: selectedWidget?.yAxisUnit,
 								decimalPrecision:
-									selectedWidget?.decimalPrecision || PrecisionOptionsEnum.TWO,
+									selectedWidget?.decimalPrecision ?? PrecisionOptionsEnum.TWO,
 								panelTypes: graphType,
 								query: adjustedQueryForV5,
 								thresholds: selectedWidget?.thresholds,

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -49,12 +49,14 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
       >
         <span
           class="ant-typography value-graph-text css-dev-only-do-not-override-2i2tap"
+          data-testid="value-graph-text"
           style="color: Blue; font-size: 16px;"
         >
           295.43
         </span>
         <span
           class="ant-typography value-graph-unit css-dev-only-do-not-override-2i2tap"
+          data-testid="value-graph-suffix-unit"
           style="color: Blue; font-size: calc(16px * 0.7);"
         >
           ms