Merge branch 'main' into feat/infra_disk_usage

frontend/__mocks__/uplotMock.ts

@@ -12,8 +12,6 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
-	linear: jest.Mock;
-	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -25,23 +23,10 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Path builder: (self, seriesIdx, idx0, idx1) => paths or null
-const createMockPathBuilder = (name: string): jest.Mock =>
-	jest.fn(() => ({
-		name, // To test if the correct pathBuilder is used
-		stroke: jest.fn(),
-		fill: jest.fn(),
-		clip: jest.fn(),
-	}));
-
-// Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
-const mockPaths = {
-	spline: jest.fn(() => createMockPathBuilder('spline')),
-	bars: jest.fn(() => createMockPathBuilder('bars')),
-	linear: jest.fn(() => createMockPathBuilder('linear')),
-	stepped: jest.fn((opts?: { align?: number }) =>
-		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
-	),
+// Create mock paths
+const mockPaths: MockUPlotPaths = {
+	spline: jest.fn(),
+	bars: jest.fn(),
 };
 
 // Mock static methods

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -11,7 +11,6 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
-	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -33,7 +32,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload, { signal });
+		const response = await axios.post(`/variables/query`, payload);
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -19,7 +19,6 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
-	abortSignal?: AbortSignal,
 ): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};
 
@@ -48,10 +47,7 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await axios.get('/fields/values', {
-			params,
-			signal: abortSignal,
-		});
+		const response = await axios.get('/fields/values', { params });
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -39,6 +39,7 @@ export interface HostData {
 	waitTimeSeries: TimeSeries;
 	load15: number;
 	load15TimeSeries: TimeSeries;
+	filesystem: number;
 }
 
 export interface HostListResponse {

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -48,7 +48,7 @@
 			.labels-row,
 			.values-row {
 				display: grid;
-				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
 				gap: 30px;
 				align-items: center;
 			}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -426,6 +426,12 @@ function HostMetricsDetails({
 								>
 									MEMORY USAGE
 								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									DISK USAGE
+								</Typography.Text>
 							</div>
 
 							<div className="values-row">
@@ -478,6 +484,23 @@ function HostMetricsDetails({
 										className="progress-bar"
 									/>
 								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.filesystem * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+											if (filesystemPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (filesystemPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
 							</div>
 						</div>
 					</div>

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -73,7 +73,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -1682,7 +1681,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -1700,17 +1698,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
-					{errorMessage && !loading && !waitingMessage && (
+					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
@@ -1732,7 +1720,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -1775,7 +1762,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDarkMode,
 		isDynamicVariable,
 		showRetryButton,
-		waitingMessage,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -63,7 +63,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showRetryButton = true,
 	isDynamicVariable = false,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -569,7 +568,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -585,16 +583,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
 					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
@@ -617,7 +605,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -654,7 +641,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		showRetryButton,
 		isDarkMode,
 		isDynamicVariable,
-		waitingMessage,
 	]);
 
 	// Handle dropdown visibility changes

frontend/src/components/NewSelect/types.ts

@@ -30,7 +30,6 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	showIncompleteDataMessage?: boolean;
 	showRetryButton?: boolean;
 	isDynamicVariable?: boolean;
-	waitingMessage?: string;
 }
 
 export interface CustomTagProps {
@@ -67,5 +66,4 @@ export interface CustomMultiSelectProps
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;
-	waitingMessage?: string;
 }

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
-import { BarChartProps } from '../types';
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toEqual([1, 10]); // total
-			expect(result[2]).toEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toEqual([]);
-			expect(getInitialStackedBands(1)).toEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return (c as unknown) as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return ({
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown) as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toEqual([0, 1]);
-		expect(result.current[1]).toEqual([5, 7]); // stacked
-		expect(result.current[2]).toEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toEqual([0, 1, 2]);
-		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stack } from '../charts/utils/stackUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstacked: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstacked &&
-		!!plot.data &&
-		unstacked[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stack(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stack(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={(plot: uPlot | null): void => {
-						uPlotRef.current = plot;
-					}}
-					onDestroy={(): void => {
-						uPlotRef.current = null;
-					}}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,108 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	builder.setCursor({
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -83,7 +83,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: false,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -1,271 +0,0 @@
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { GraphVisibilityState } from '../../types';
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from '../legendVisibilityUtils';
-
-describe('legendVisibilityUtils', () => {
-	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
-
-	beforeEach(() => {
-		localStorage.clear();
-		jest.spyOn(window.localStorage.__proto__, 'getItem');
-		jest.spyOn(window.localStorage.__proto__, 'setItem');
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getStoredSeriesVisibility', () => {
-		it('returns null when there is no stored visibility state', () => {
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
-		});
-
-		it('returns null when widget has no stored dataIndex', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns visibility array by index when widget state exists', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: false },
-					],
-				},
-				{
-					name: 'widget-2',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
-		});
-
-		it('returns visibility by index including duplicate labels', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'CPU', show: false },
-						{ label: 'Memory', show: false },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
-		});
-
-		it('returns null on malformed JSON in localStorage', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns null when widget id is not found', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'another-widget',
-					dataIndex: [{ label: 'CPU', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-	});
-
-	describe('updateSeriesVisibilityToLocalStorage', () => {
-		it('creates new visibility state when none exists', () => {
-			const seriesVisibility = [
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
-		});
-
-		it('adds a new widget entry when other widgets already exist', () => {
-			const existing: GraphVisibilityState[] = [
-				{
-					name: 'widget-existing',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			const newVisibility = [{ label: 'CPU', show: false }];
-
-			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-new');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
-		});
-
-		it('updates existing widget visibility when entry already exists', () => {
-			const initialVisibility: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: true },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
-
-			const updatedVisibility = [
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
-		});
-
-		it('silently handles malformed existing JSON without throwing', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			expect(() =>
-				updateSeriesVisibilityToLocalStorage('widget-1', [
-					{ label: 'CPU', show: true },
-				]),
-			).not.toThrow();
-		});
-
-		it('when existing JSON is malformed, overwrites with valid data for the widget', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
-			const expected = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'x-axis', show: true },
-						{ label: 'CPU', show: false },
-					],
-				},
-			];
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				JSON.stringify(expected),
-			);
-		});
-
-		it('preserves other widgets when updating one widget', () => {
-			const existing: GraphVisibilityState[] = [
-				{ name: 'widget-a', dataIndex: [{ label: 'A', show: true }] },
-				{ name: 'widget-b', dataIndex: [{ label: 'B', show: false }] },
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			updateSeriesVisibilityToLocalStorage('widget-b', [
-				{ label: 'B', show: true },
-			]);
-
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [true],
-			});
-		});
-
-		it('calls setItem with storage key and stringified visibility states', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'CPU', show: true },
-			]);
-
-			expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				expect.any(String),
-			);
-			const [_, value] = (localStorage.setItem as jest.Mock).mock.calls[0];
-			expect((): void => JSON.parse(value)).not.toThrow();
-			expect(JSON.parse(value)).toEqual([
-				{ name: 'widget-1', dataIndex: [{ label: 'CPU', show: true }] },
-			]);
-		});
-
-		it('stores empty dataIndex when seriesVisibility is empty', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', []);
-
-			const raw = localStorage.getItem(storageKey);
-			expect(raw).not.toBeNull();
-			const parsed = JSON.parse(raw ?? '[]');
-			expect(parsed).toEqual([{ name: 'widget-1', dataIndex: [] }]);
-			expect(getStoredSeriesVisibility('widget-1')).toBeNull();
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -88,7 +88,7 @@ export function buildBaseConfig({
 		max: undefined,
 		softMin: widget.softMin ?? undefined,
 		softMax: widget.softMax ?? undefined,
-		thresholds: thresholdOptions,
+		// thresholds,
 		logBase: widget.isLogScale ? 10 : undefined,
 		distribution: widget.isLogScale
 			? DistributionType.Logarithmic

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,20 +1,15 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
- * Retrieves the stored series visibility for a specific widget from localStorage by index.
- * Index 0 is the x-axis (time); indices 1, 2, ... are data series (same order as uPlot plot.series).
+ * Retrieves the visibility map for a specific widget from localStorage
  * @param widgetId - The unique identifier of the widget
- * @returns visibility[i] = show state for series at index i, or null if not found
+ * @returns A Map of series labels to their visibility state, or null if not found
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): Map<string, boolean> | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,15 +24,8 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			// If the stored data is malformed, remove it
-			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		}
+		return new Map(widgetState.dataIndex.map((item) => [item.label, item.show]));
+	} catch {
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
 	}
@@ -47,31 +35,40 @@ export function updateSeriesVisibilityToLocalStorage(
 	widgetId: string,
 	seriesVisibility: SeriesVisibilityItem[],
 ): void {
-	let visibilityStates: GraphVisibilityState[] = [];
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		visibilityStates = JSON.parse(storedData || '[]');
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			visibilityStates = [];
+
+		let visibilityStates: GraphVisibilityState[];
+
+		if (!storedData) {
+			visibilityStates = [
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			visibilityStates = JSON.parse(storedData);
 		}
-	}
-	const widgetState = visibilityStates.find((state) => state.name === widgetId);
+		const widgetState = visibilityStates.find((state) => state.name === widgetId);
 
-	if (widgetState) {
-		widgetState.dataIndex = seriesVisibility;
-	} else {
-		visibilityStates = [
-			...visibilityStates,
-			{
-				name: widgetId,
-				dataIndex: seriesVisibility,
-			},
-		];
-	}
+		if (!widgetState) {
+			visibilityStates = [
+				...visibilityStates,
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			widgetState.dataIndex = seriesVisibility;
+		}
 
-	localStorage.setItem(
-		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
-		JSON.stringify(visibilityStates),
-	);
+		localStorage.setItem(
+			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+			JSON.stringify(visibilityStates),
+		);
+	} catch {
+		// Silently handle parsing errors - fall back to default visibility
+	}
 }

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -27,6 +27,7 @@ export interface HostRowData {
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
+	filesystem: React.ReactNode;
 	wait: string;
 	load15: number;
 	active: React.ReactNode;
@@ -108,6 +109,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		sorter: true,
 		align: 'right',
 	},
+	{
+		title: <div className="column-header-right">Disk Usage</div>,
+		dataIndex: 'filesystem',
+		key: 'filesystem',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
 	{
 		title: <div className="column-header-right">IOWait</div>,
 		dataIndex: 'wait',
@@ -178,6 +187,26 @@ export const formatDataForTable = (data: HostData[]): HostRowData[] =>
 				/>
 			</div>
 		),
+		filesystem: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.filesystem * 100).toFixed(1))}
+					strokeLinecap="butt"
+					size="small"
+					strokeColor={((): string => {
+						const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+						if (filesystemPercent >= 90) {
+							return Color.BG_CHERRY_500;
+						}
+						if (filesystemPercent >= 60) {
+							return Color.BG_AMBER_500;
+						}
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
 		wait: `${Number((host.wait * 100).toFixed(1))}%`,
 		load15: host.load15,
 	}));

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1623,6 +1623,9 @@ export const getHostQueryPayload = (
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
+	const fsUsageKey = dotMetricsEnabled
+		? 'system.filesystem.usage'
+		: 'system_filesystem_usage';
 
 	return [
 		{
@@ -2483,6 +2486,143 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'fs_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+									{
+										id: 'fs_f2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'state--string--tag--false',
+
+											key: 'state',
+											type: 'tag',
+										},
+										op: '=',
+										value: 'used',
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'fs_f3',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [
+						{
+							disabled: false,
+							expression: 'A/B',
+							legend: '{{mountpoint}}',
+							queryName: 'F1',
+						},
+					],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 		{
 			selectedTime: 'GLOBAL_TIME',
 			graphType: PANEL_TYPES.TIME_SERIES,
@@ -2631,6 +2771,6 @@ export const hostWidgetInfo = [
 	{ title: 'Network connections', yAxisUnit: 'short' },
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
+	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'Disk operations time', yAxisUnit: 's' },
 ];

frontend/src/container/PanelWrapper/constants.ts

@@ -1,6 +1,5 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 
-import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
 import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
@@ -9,7 +8,7 @@ import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
-	[PANEL_TYPES.TIME_SERIES]: TimeSeriesPanel,
+	[PANEL_TYPES.TIME_SERIES]: UplotPanelWrapper,
 	[PANEL_TYPES.TABLE]: TablePanelWrapper,
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,

frontend/src/lib/dashboardVariables/variableReference.test.ts

@@ -1,445 +0,0 @@
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import {
-	buildVariableReferencePattern,
-	extractQueryTextStrings,
-	getVariableReferencesInQuery,
-	textContainsVariableReference,
-} from './variableReference';
-
-describe('buildVariableReferencePattern', () => {
-	const varName = 'deployment_environment';
-
-	it.each([
-		['{{.deployment_environment}}', '{{.var}} syntax'],
-		['{{ .deployment_environment }}', '{{.var}} with spaces'],
-		['{{deployment_environment}}', '{{var}} syntax'],
-		['{{ deployment_environment }}', '{{var}} with spaces'],
-		['$deployment_environment', '$var syntax'],
-		['[[deployment_environment]]', '[[var]] syntax'],
-		['[[ deployment_environment ]]', '[[var]] with spaces'],
-	])('matches %s (%s)', (text) => {
-		expect(buildVariableReferencePattern(varName).test(text)).toBe(true);
-	});
-
-	it('does not match partial variable names', () => {
-		const pattern = buildVariableReferencePattern('env');
-		// $env should match at word boundary, but $environment should not match $env
-		expect(pattern.test('$environment')).toBe(false);
-	});
-
-	it('matches $var at word boundary within larger text', () => {
-		const pattern = buildVariableReferencePattern('env');
-		expect(pattern.test('SELECT * WHERE x = $env')).toBe(true);
-		expect(pattern.test('$env AND y = 1')).toBe(true);
-	});
-});
-
-describe('textContainsVariableReference', () => {
-	describe('guard clauses', () => {
-		it('returns false for empty text', () => {
-			expect(textContainsVariableReference('', 'var')).toBe(false);
-		});
-
-		it('returns false for empty variable name', () => {
-			expect(textContainsVariableReference('some text', '')).toBe(false);
-		});
-	});
-
-	describe('all syntax formats', () => {
-		const varName = 'service_name';
-
-		it('detects {{.var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{.service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects {{var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects $var format', () => {
-			const query = "SELECT * FROM table WHERE service = '$service_name'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects [[var]] format', () => {
-			const query = "SELECT * FROM table WHERE service = '[[service_name]]'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-	});
-
-	describe('embedded in larger text', () => {
-		it('finds variable in a multi-line query', () => {
-			const query = `SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name
-FROM signoz_metrics.distributed_time_series_v4_1day
-WHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}
-GROUP BY k8s_node_name`;
-			expect(textContainsVariableReference(query, 'k8s_cluster_name')).toBe(true);
-			expect(textContainsVariableReference(query, 'k8s_node_name')).toBe(false); // plain text, not a variable reference
-		});
-	});
-
-	describe('no false positives', () => {
-		it('does not match substring of a longer variable name', () => {
-			expect(
-				textContainsVariableReference('$service_name_v2', 'service_name'),
-			).toBe(false);
-		});
-
-		it('does not match plain text that happens to contain the name', () => {
-			expect(
-				textContainsVariableReference(
-					'the service_name column is important',
-					'service_name',
-				),
-			).toBe(false);
-		});
-	});
-});
-
-// ---- Query text extraction & variable reference detection ----
-
-const baseQuery: Query = {
-	id: 'test-query',
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
-	clickhouse_sql: [],
-};
-
-describe('extractQueryTextStrings', () => {
-	it('returns empty array for query builder with no data', () => {
-		expect(extractQueryTextStrings(baseQuery)).toEqual([]);
-	});
-
-	it('extracts string values from query builder filter items', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: ['$service_name', 'hardcoded'] },
-								{ id: '2', op: '=', value: '$env' },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['$service_name', 'hardcoded', '$env']);
-	});
-
-	it('extracts filter expression from query builder', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: { items: [], op: 'AND' },
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['env = $deployment_environment']);
-	});
-
-	it('skips non-string filter values', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: [42, true] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-
-	it('extracts promql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: 'up{env="$env"}', legend: '', disabled: false },
-				{ name: 'B', query: 'cpu{ns="$namespace"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'up{env="$env"}',
-			'cpu{ns="$namespace"}',
-		]);
-	});
-
-	it('extracts clickhouse sql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * WHERE env = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE env = {{.env}}',
-		]);
-	});
-
-	it('accumulates texts across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$env' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filters: {
-							items: [{ id: '2', op: '=', value: ['$service_name'] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['$env', '$service_name']);
-	});
-
-	it('collects both filter items and filter expression from the same queryData', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'$service_name',
-			'env = $deployment_environment',
-		]);
-	});
-
-	it('skips promql entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{ name: 'B', query: 'up{env="$env"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['up{env="$env"}']);
-	});
-
-	it('skips clickhouse entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{
-					name: 'B',
-					query: 'SELECT * WHERE x = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE x = {{.env}}',
-		]);
-	});
-
-	it('returns empty array for unknown query type', () => {
-		const query = {
-			...baseQuery,
-			queryType: ('unknown' as unknown) as EQueryType,
-		};
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-});
-
-describe('getVariableReferencesInQuery', () => {
-	const variableNames = [
-		'deployment_environment',
-		'service_name',
-		'endpoint',
-		'unused_var',
-	];
-
-	it('returns empty array when query has no text', () => {
-		expect(getVariableReferencesInQuery(baseQuery, variableNames)).toEqual([]);
-	});
-
-	it('detects variables referenced in query builder filters', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: '$service_name' },
-								{ id: '2', op: 'IN', value: ['$deployment_environment'] },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('detects variables in promql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query:
-						'http_requests{env="{{.deployment_environment}}", endpoint="$endpoint"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'endpoint']);
-	});
-
-	it('detects variables in clickhouse sql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * FROM table WHERE service = [[service_name]]',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['service_name']);
-	});
-
-	it('detects variables spread across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('returns empty array when no variables are referenced', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{job="api"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, variableNames)).toEqual([]);
-	});
-
-	it('returns empty array when variableNames list is empty', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{env="$deployment_environment"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, [])).toEqual([]);
-	});
-});

frontend/src/lib/dashboardVariables/variableReference.ts

@@ -1,136 +0,0 @@
-import { isArray } from 'lodash-es';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-/**
- * Builds a RegExp that matches any recognized variable reference syntax:
- *   {{.variableName}}  — dot prefix, optional whitespace
- *   {{variableName}}   — no dot, optional whitespace
- *   $variableName      — dollar prefix, word-boundary terminated
- *   [[variableName]]   — square brackets, optional whitespace
- */
-export function buildVariableReferencePattern(variableName: string): RegExp {
-	const patterns = [
-		`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`,
-		`\\{\\{\\s*${variableName}\\s*\\}\\}`,
-		`\\$${variableName}\\b`,
-		`\\[\\[\\s*${variableName}\\s*\\]\\]`,
-	];
-	return new RegExp(patterns.join('|'));
-}
-
-/**
- * Returns true if `text` contains a reference to `variableName` in any of the
- * recognized variable syntaxes.
- */
-export function textContainsVariableReference(
-	text: string,
-	variableName: string,
-): boolean {
-	if (!text || !variableName) {
-		return false;
-	}
-	return buildVariableReferencePattern(variableName).test(text);
-}
-
-/**
- * Extracts all text strings from a widget Query that could contain variable
- * references. Covers:
- * - QUERY_BUILDER: filter items' string values + filter.expression
- * - PROM: each promql[].query
- * - CLICKHOUSE: each clickhouse_sql[].query
- */
-function extractQueryBuilderTexts(query: Query): string[] {
-	const texts: string[] = [];
-	const queryDataList = query.builder?.queryData;
-	if (isArray(queryDataList)) {
-		queryDataList.forEach((queryData) => {
-			// Collect string values from filter items
-			queryData.filters?.items?.forEach((filter: TagFilterItem) => {
-				if (isArray(filter.value)) {
-					filter.value.forEach((v) => {
-						if (typeof v === 'string') {
-							texts.push(v);
-						}
-					});
-				} else if (typeof filter.value === 'string') {
-					texts.push(filter.value);
-				}
-			});
-
-			// Collect filter expression
-			if (queryData.filter?.expression) {
-				texts.push(queryData.filter.expression);
-			}
-		});
-	}
-	return texts;
-}
-
-function extractPromQLTexts(query: Query): string[] {
-	const texts: string[] = [];
-	if (isArray(query.promql)) {
-		query.promql.forEach((promqlQuery) => {
-			if (promqlQuery.query) {
-				texts.push(promqlQuery.query);
-			}
-		});
-	}
-	return texts;
-}
-
-function extractClickhouseSQLTexts(query: Query): string[] {
-	const texts: string[] = [];
-	if (isArray(query.clickhouse_sql)) {
-		query.clickhouse_sql.forEach((clickhouseQuery) => {
-			if (clickhouseQuery.query) {
-				texts.push(clickhouseQuery.query);
-			}
-		});
-	}
-	return texts;
-}
-
-/**
- * Extracts all text strings from a widget Query that could contain variable
- * references. Covers:
- * - QUERY_BUILDER: filter items' string values + filter.expression
- * - PROM: each promql[].query
- * - CLICKHOUSE: each clickhouse_sql[].query
- */
-export function extractQueryTextStrings(query: Query): string[] {
-	if (query.queryType === EQueryType.QUERY_BUILDER) {
-		return extractQueryBuilderTexts(query);
-	}
-
-	if (query.queryType === EQueryType.PROM) {
-		return extractPromQLTexts(query);
-	}
-
-	if (query.queryType === EQueryType.CLICKHOUSE) {
-		return extractClickhouseSQLTexts(query);
-	}
-
-	return [];
-}
-
-/**
- * Given a widget Query and an array of variable names, returns the subset of
- * variable names that are referenced in the query text.
- *
- * This performs text-based detection only. Structural checks (like
- * filter.key.key matching a variable attribute) are NOT included.
- */
-export function getVariableReferencesInQuery(
-	query: Query,
-	variableNames: string[],
-): string[] {
-	const texts = extractQueryTextStrings(query);
-	if (texts.length === 0) {
-		return [];
-	}
-
-	return variableNames.filter((name) =>
-		texts.some((text) => textContainsVariableReference(text, name)),
-	);
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -5,8 +5,8 @@ import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 
-import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
+import { useLegendActions } from './useLegendActions';
 
 import './Legend.styles.scss';
 
@@ -106,7 +106,6 @@ export default function Legend({
 						placeholder="Search..."
 						value={legendSearchQuery}
 						onChange={(e): void => setLegendSearchQuery(e.target.value)}
-						data-testid="legend-search-input"
 						className="legend-search-input"
 					/>
 				</div>

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { BarTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-				isStackedBarChart: props.isStackedBarChart,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-			props.isStackedBarChart,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -25,28 +25,16 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
-	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
-	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
-	// When series are hidden, we must use the next *visible* series, not index+1,
-	// since hidden series keep raw values and would produce negative/wrong results.
-	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleIdx = -1;
-		for (let j = index + 1; j < series.length; j++) {
-			if (series[j]?.show) {
-				nextVisibleIdx = j;
-				break;
-			}
-		}
-		if (nextVisibleIdx >= 1) {
-			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
+	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
+		const nextValue = data[index + 1][dataIndex] ?? null;
+		if (nextValue !== null) {
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -92,7 +80,6 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
-			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

frontend/src/lib/uPlotV2/components/__tests__/Legend.test.tsx

@@ -1,213 +0,0 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../hooks/useLegendActions';
-import Legend from '../Legend/Legend';
-import { LegendPosition } from '../types';
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-describe('Legend', () => {
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onLegendClick: jest.Mock;
-	let onLegendMouseMove: jest.Mock;
-	let onLegendMouseLeave: jest.Mock;
-	let onFocusSeries: jest.Mock;
-
-	beforeEach(() => {
-		onLegendClick = jest.fn();
-		onLegendMouseMove = jest.fn();
-		onLegendMouseLeave = jest.fn();
-		onFocusSeries = jest.fn();
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue({
-			onLegendClick,
-			onLegendMouseMove,
-			onLegendMouseLeave,
-			onFocusSeries,
-		});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<Legend
-				position={position}
-				// config is not used directly in the component, it's consumed by the mocked hook
-				config={{} as any}
-			/>,
-		);
-
-	describe('layout and position', () => {
-		it('renders search input when legend position is RIGHT', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('does not render search input when legend position is BOTTOM (default)', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-		});
-
-		it('renders the marker with the correct border color', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendMarker = document.querySelector(
-				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-			) as HTMLElement;
-
-			expect(legendMarker).toHaveStyle({
-				'border-color': '#ff0000',
-			});
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('search behavior (RIGHT position)', () => {
-		it('filters legend items based on search query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'A');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows empty state when no legend items match the search query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('legend actions', () => {
-		it('calls onLegendClick when a legend item is clicked', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(onLegendClick).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls mouseMove when the mouse moves over a legend item', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-
-			await user.hover(legendItem);
-
-			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const container = document.querySelector('.legend-container') as HTMLElement;
-
-			await user.hover(container);
-			await user.unhover(container);
-
-			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
-		});
-	});
-});

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -4,12 +4,12 @@ import uPlot, { Axis } from 'uplot';
 
 import { uPlotXAxisValuesFormat } from '../../uPlotLib/utils/constants';
 import getGridColor from '../../uPlotLib/utils/getGridColor';
-import { buildYAxisSizeCalculator } from '../utils/axis';
 import { AxisProps, ConfigBuilder } from './types';
 
 const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
 	PANEL_TYPES.TIME_SERIES,
 	PANEL_TYPES.BAR,
+	PANEL_TYPES.PIE,
 ];
 
 /**
@@ -114,6 +114,81 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			: undefined;
 	}
 
+	/**
+	 * Calculate axis size from existing size property
+	 */
+	private getExistingAxisSize(
+		self: uPlot,
+		axis: Axis,
+		values: string[] | undefined,
+		axisIdx: number,
+		cycleNum: number,
+	): number {
+		const internalSize = (axis as { _size?: number })._size;
+		if (internalSize !== undefined) {
+			return internalSize;
+		}
+
+		const existingSize = axis.size;
+		if (typeof existingSize === 'function') {
+			return existingSize(self, values ?? [], axisIdx, cycleNum);
+		}
+
+		return existingSize ?? 0;
+	}
+
+	/**
+	 * Calculate text width for longest value
+	 */
+	private calculateTextWidth(
+		self: uPlot,
+		axis: Axis,
+		values: string[] | undefined,
+	): number {
+		if (!values || values.length === 0) {
+			return 0;
+		}
+
+		// Find longest value
+		const longestVal = values.reduce(
+			(acc, val) => (val.length > acc.length ? val : acc),
+			'',
+		);
+
+		if (longestVal === '' || !axis.font?.[0]) {
+			return 0;
+		}
+
+		// eslint-disable-next-line prefer-destructuring, no-param-reassign
+		self.ctx.font = axis.font[0];
+		return self.ctx.measureText(longestVal).width / devicePixelRatio;
+	}
+
+	/**
+	 * Build Y-axis dynamic size calculator
+	 */
+	private buildYAxisSizeCalculator(): uPlot.Axis.Size {
+		return (
+			self: uPlot,
+			values: string[] | undefined,
+			axisIdx: number,
+			cycleNum: number,
+		): number => {
+			const axis = self.axes[axisIdx];
+
+			// Bail out, force convergence
+			if (cycleNum > 1) {
+				return this.getExistingAxisSize(self, axis, values, axisIdx, cycleNum);
+			}
+
+			const gap = this.props.gap ?? 5;
+			let axisSize = (axis.ticks?.size ?? 0) + gap;
+			axisSize += this.calculateTextWidth(self, axis, values);
+
+			return Math.ceil(axisSize);
+		};
+	}
+
 	/**
 	 * Build dynamic size calculator for Y-axis
 	 */
@@ -127,7 +202,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 		// Y-axis needs dynamic sizing based on text width
 		if (scaleKey === 'y') {
-			return buildYAxisSizeCalculator(this.props.gap ?? 5);
+			return this.buildYAxisSizeCalculator();
 		}
 
 		return undefined;

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -1,4 +1,3 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
@@ -236,9 +235,9 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	}
 
 	/**
-	 * Returns stored series visibility by index from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
+	 * Returns stored series visibility map from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
 	 */
-	private getStoredVisibility(): SeriesVisibilityState | null {
+	private getStoredVisibilityMap(): Map<string, boolean> | null {
 		if (
 			this.widgetId &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
@@ -252,23 +251,22 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
+		const visibilityMap = this.getStoredVisibilityMap();
+		const isAnySeriesHidden = !!(
+			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
 		);
 
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
 			const label = seriesConfig.label ?? '';
-			// +1 because uPlot series 0 is x-axis/time; data series are at 1, 2, ... (also matches stored visibility[0]=time, visibility[1]=first data, ...)
-			const seriesIndex = index + 1;
-			const show = resolveSeriesVisibility({
-				seriesIndex,
-				seriesShow: seriesConfig.show,
-				seriesLabel: label,
-				seriesVisibilityState,
+			const seriesIndex = index + 1; // +1 because the first series is the timestamp
+
+			const show = resolveSeriesVisibility(
+				label,
+				seriesConfig.show,
+				visibilityMap,
 				isAnySeriesHidden,
-			});
+			);
 
 			acc[seriesIndex] = {
 				seriesIndex,
@@ -296,23 +294,22 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};
 
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
+		const visibilityMap = this.getStoredVisibilityMap();
+		const isAnySeriesHidden = !!(
+			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
 		);
 
 		config.series = [
 			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s, index) => {
+			...this.series.map((s) => {
 				const series = s.getConfig();
-				// Stored visibility[0] is x-axis/time; data series start at visibility[1]
-				const visible = resolveSeriesVisibility({
-					seriesIndex: index + 1,
-					seriesShow: series.show,
-					seriesLabel: series.label ?? '',
-					seriesVisibilityState,
+				const label = series.label ?? '';
+				const visible = resolveSeriesVisibility(
+					label,
+					series.show,
+					visibilityMap,
 					isAnySeriesHidden,
-				});
+				);
 				return {
 					...series,
 					show: visible,

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,10 +1,8 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
-	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -17,39 +15,18 @@ import {
  * Builder for uPlot series configuration
  * Handles creation of series settings
  */
-
-/**
- * Path builders are static and shared across all instances of UPlotSeriesBuilder
- */
-let builders: PathBuilders | null = null;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
-	constructor(props: SeriesProps) {
-		super(props);
-		const pathBuilders = uPlot.paths;
-
-		if (!builders) {
-			const linearBuilder = pathBuilders.linear;
-			const splineBuilder = pathBuilders.spline;
-			const steppedBuilder = pathBuilders.stepped;
-
-			if (!linearBuilder || !splineBuilder || !steppedBuilder) {
-				throw new Error('Required uPlot path builders are not available');
-			}
-			builders = {
-				linear: linearBuilder(),
-				spline: splineBuilder(),
-				stepBefore: steppedBuilder({ align: -1 }),
-				stepAfter: steppedBuilder({ align: 1 }),
-			};
-		}
-	}
-
 	private buildLineConfig({
 		lineColor,
+		lineWidth,
+		lineStyle,
+		lineCap,
 	}: {
 		lineColor: string;
+		lineWidth?: number;
+		lineStyle?: LineStyle;
+		lineCap?: Series.Cap;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: lineColor,
 			width: lineWidth ?? 2,
@@ -62,26 +39,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
-
-		if (this.props.panelType === PANEL_TYPES.BAR) {
-			lineConfig.fill = lineColor;
-		}
-
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig(): Partial<Series> {
-		const {
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
-			barAlignment,
-			barMaxWidth,
-			barWidthFactor,
-		} = this.props;
+	private buildPathConfig({
+		pathBuilder,
+		drawStyle,
+		lineInterpolation,
+	}: {
+		pathBuilder?: Series.PathBuilder | null;
+		drawStyle: DrawStyle;
+		lineInterpolation?: LineInterpolation;
+	}): Partial<Series> {
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -98,13 +70,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder({
-						drawStyle,
-						lineInterpolation,
-						barAlignment,
-						barMaxWidth,
-						barWidthFactor,
-					});
+					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -119,17 +85,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 */
 	private buildPointsConfig({
 		lineColor,
+		lineWidth,
+		pointSize,
+		pointsBuilder,
+		pointsFilter,
+		drawStyle,
+		showPoints,
 	}: {
 		lineColor: string;
+		lineWidth?: number;
+		pointSize?: number;
+		pointsBuilder: Series.Points.Show | null;
+		pointsFilter: Series.Points.Filter | null;
+		drawStyle: DrawStyle;
+		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
-		const {
-			lineWidth,
-			pointSize,
-			pointsBuilder,
-			pointsFilter,
-			drawStyle,
-			showPoints,
-		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: lineColor,
 			fill: lineColor,
@@ -166,16 +136,44 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+		const {
+			drawStyle,
+			pathBuilder,
+			pointsBuilder,
+			pointsFilter,
+			lineInterpolation,
+			lineWidth,
+			lineStyle,
+			lineCap,
+			showPoints,
+			pointSize,
+			scaleKey,
+			label,
+			spanGaps,
+			show = true,
+		} = this.props;
 
 		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
 			lineColor,
+			lineWidth,
+			lineStyle,
+			lineCap,
+		});
+		const pathConfig = this.buildPathConfig({
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
 		});
-		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
 			lineColor,
+			lineWidth,
+			pointSize,
+			pointsBuilder: pointsBuilder ?? null,
+			pointsFilter: pointsFilter ?? null,
+			drawStyle,
+			showPoints,
 		});
 
 		return {
@@ -200,40 +198,35 @@ interface PathBuilders {
 	[key: string]: Series.PathBuilder;
 }
 
+let builders: PathBuilders | null = null;
+
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder({
-	drawStyle,
-	lineInterpolation,
-	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.6,
-	barMaxWidth = 200,
-}: {
-	drawStyle: DrawStyle;
-	lineInterpolation?: LineInterpolation;
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}): Series.PathBuilder {
+function getPathBuilder(
+	style: DrawStyle,
+	lineInterpolation?: LineInterpolation,
+): Series.PathBuilder {
 	const pathBuilders = uPlot.paths;
 
 	if (!builders) {
-		throw new Error('Required uPlot path builders are not available');
-	}
+		const linearBuilder = pathBuilders.linear;
+		const splineBuilder = pathBuilders.spline;
+		const steppedBuilder = pathBuilders.stepped;
 
-	if (drawStyle === DrawStyle.Bar) {
-		const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
-		if (!builders[barsCfgKey] && pathBuilders.bars) {
-			builders[barsCfgKey] = pathBuilders.bars({
-				size: [barWidthFactor, barMaxWidth],
-				align: barAlignment,
-			});
+		if (!linearBuilder || !splineBuilder || !steppedBuilder) {
+			throw new Error('Required uPlot path builders are not available');
 		}
-		return builders[barsCfgKey];
+
+		builders = {
+			linear: linearBuilder(),
+			spline: splineBuilder(),
+			stepBefore: steppedBuilder({ align: -1 }),
+			stepAfter: steppedBuilder({ align: 1 }),
+		};
 	}
 
-	if (drawStyle === DrawStyle.Line) {
+	if (style === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -1,393 +0,0 @@
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
-import type uPlot from 'uplot';
-
-import type { AxisProps } from '../types';
-import { UPlotAxisBuilder } from '../UPlotAxisBuilder';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getToolTipValue: jest.fn(),
-}));
-
-const createAxisProps = (overrides: Partial<AxisProps> = {}): AxisProps => ({
-	scaleKey: 'x',
-	label: 'Time',
-	isDarkMode: false,
-	show: true,
-	...overrides,
-});
-
-describe('UPlotAxisBuilder', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('builds basic axis config with defaults', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				label: 'Time',
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.scale).toBe('x');
-		expect(config.label).toBe('Time');
-		expect(config.show).toBe(true);
-		expect(config.side).toBe(2);
-		expect(config.gap).toBe(5);
-
-		// Default grid and ticks are created
-		expect(config.grid).toEqual({
-			stroke: 'rgba(0,0,0,0.5)',
-			width: 0.2,
-			show: true,
-		});
-		expect(config.ticks).toEqual({
-			width: 0.3,
-			show: true,
-		});
-	});
-
-	it('sets config values when provided', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				label: 'Time',
-				show: false,
-				side: 0,
-				gap: 10,
-				grid: {
-					stroke: '#ff0000',
-					width: 1,
-					show: false,
-				},
-				ticks: {
-					stroke: '#00ff00',
-					width: 1,
-					show: false,
-					size: 10,
-				},
-				values: ['1', '2', '3'],
-				space: 20,
-				size: 100,
-				stroke: '#0000ff',
-			}),
-		);
-		const config = builder.getConfig();
-		expect(config.scale).toBe('x');
-		expect(config.label).toBe('Time');
-		expect(config.show).toBe(false);
-		expect(config.gap).toBe(10);
-		expect(config.grid).toEqual({
-			stroke: '#ff0000',
-			width: 1,
-			show: false,
-		});
-		expect(config.ticks).toEqual({
-			stroke: '#00ff00',
-			width: 1,
-			show: false,
-			size: 10,
-		});
-		expect(config.values).toEqual(['1', '2', '3']);
-		expect(config.space).toBe(20);
-		expect(config.size).toBe(100);
-		expect(config.stroke).toBe('#0000ff');
-	});
-
-	it('merges custom grid config over defaults and respects isDarkMode and isLogScale', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				isDarkMode: true,
-				isLogScale: true,
-				grid: {
-					width: 1,
-				},
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.grid).toEqual({
-			// stroke falls back to theme-based default when not provided
-			stroke: 'rgba(231,233,237,0.3)',
-			// provided width overrides default
-			width: 1,
-			// show falls back to default when not provided
-			show: true,
-		});
-	});
-
-	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
-		const customTicks = { width: 1, show: false };
-		const withTicks = new UPlotAxisBuilder(
-			createAxisProps({
-				ticks: customTicks,
-			}),
-		);
-		const withoutTicks = new UPlotAxisBuilder(createAxisProps());
-
-		expect(withTicks.getConfig().ticks).toBe(customTicks);
-		expect(withoutTicks.getConfig().ticks).toEqual({
-			width: 0.3,
-			show: true,
-		});
-	});
-
-	it('uses time-based X-axis values formatter for time-series like panels', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.values).toBe(uPlotXAxisValuesFormat);
-	});
-
-	it('does not attach X-axis datetime formatter when panel type is not supported', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				panelType: PANEL_TYPES.LIST, // not in PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-
-	it('builds Y-axis values formatter that delegates to getToolTipValue', () => {
-		const yBuilder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'y',
-				yAxisUnit: 'ms',
-				decimalPrecision: 3,
-			}),
-		);
-
-		const config = yBuilder.getConfig();
-		expect(typeof config.values).toBe('function');
-
-		(getToolTipValue as jest.Mock).mockImplementation(
-			(value: string, unit?: string, precision?: unknown) =>
-				`formatted:${value}:${unit}:${precision}`,
-		);
-
-		// Simulate uPlot calling the values formatter
-		const valuesFn = (config.values as unknown) as (
-			self: uPlot,
-			vals: unknown[],
-		) => string[];
-		const result = valuesFn({} as uPlot, [1, null, 2, Number.NaN]);
-
-		expect(getToolTipValue).toHaveBeenCalledTimes(2);
-		expect(getToolTipValue).toHaveBeenNthCalledWith(1, '1', 'ms', 3);
-		expect(getToolTipValue).toHaveBeenNthCalledWith(2, '2', 'ms', 3);
-
-		// Null/NaN values should map to empty strings
-		expect(result).toEqual(['formatted:1:ms:3', '', 'formatted:2:ms:3', '']);
-	});
-
-	it('adds dynamic size calculator only for Y-axis when size is not provided', () => {
-		const yBuilder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'y',
-			}),
-		);
-		const xBuilder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-			}),
-		);
-
-		const yConfig = yBuilder.getConfig();
-		const xConfig = xBuilder.getConfig();
-
-		expect(typeof yConfig.size).toBe('function');
-		expect(xConfig.size).toBeUndefined();
-	});
-
-	it('uses explicit size function when provided', () => {
-		const sizeFn: uPlot.Axis.Size = jest.fn(() => 100) as uPlot.Axis.Size;
-
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'y',
-				size: sizeFn,
-			}),
-		);
-
-		const config = builder.getConfig();
-		expect(config.size).toBe(sizeFn);
-	});
-
-	it('builds stroke color based on stroke and isDarkMode', () => {
-		const explicitStroke = new UPlotAxisBuilder(
-			createAxisProps({
-				stroke: '#ff0000',
-			}),
-		);
-		const darkStroke = new UPlotAxisBuilder(
-			createAxisProps({
-				stroke: undefined,
-				isDarkMode: true,
-			}),
-		);
-		const lightStroke = new UPlotAxisBuilder(
-			createAxisProps({
-				stroke: undefined,
-				isDarkMode: false,
-			}),
-		);
-
-		expect(explicitStroke.getConfig().stroke).toBe('#ff0000');
-		expect(darkStroke.getConfig().stroke).toBe('white');
-		expect(lightStroke.getConfig().stroke).toBe('black');
-	});
-
-	it('uses explicit values formatter when provided', () => {
-		const customValues: uPlot.Axis.Values = jest.fn(() => ['a', 'b', 'c']);
-
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'y',
-				values: customValues,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.values).toBe(customValues);
-	});
-
-	it('returns undefined values for scaleKey neither x nor y', () => {
-		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'custom' }));
-
-		const config = builder.getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-
-	it('includes space in config when provided', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', space: 50 }),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.space).toBe(50);
-	});
-
-	it('includes PANEL_TYPES.BAR and PANEL_TYPES.TIME_SERIES in X-axis datetime formatter', () => {
-		const barBuilder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				panelType: PANEL_TYPES.BAR,
-			}),
-		);
-		expect(barBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
-
-		const timeSeriesBuilder = new UPlotAxisBuilder(
-			createAxisProps({
-				scaleKey: 'x',
-				panelType: PANEL_TYPES.TIME_SERIES,
-			}),
-		);
-		expect(timeSeriesBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
-	});
-
-	it('should return the existing size when cycleNum > 1', () => {
-		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'y' }));
-
-		const config = builder.getConfig();
-		const sizeFn = config.size;
-		expect(typeof sizeFn).toBe('function');
-
-		const mockAxis = {
-			_size: 80,
-			ticks: { size: 10 },
-			font: ['12px sans-serif'],
-		};
-		const mockSelf = ({
-			axes: [mockAxis],
-			ctx: { measureText: jest.fn(() => ({ width: 60 })), font: '' },
-		} as unknown) as uPlot;
-
-		const result = (sizeFn as (
-			s: uPlot,
-			v: string[],
-			a: number,
-			c: number,
-		) => number)(
-			mockSelf,
-			['100', '200'],
-			0,
-			2, // cycleNum > 1
-		);
-
-		expect(result).toBe(80);
-	});
-
-	it('should invoke the size calculator and compute from text width when cycleNum <= 1', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', gap: 8 }),
-		);
-
-		const config = builder.getConfig();
-		const sizeFn = config.size;
-		expect(typeof sizeFn).toBe('function');
-
-		const mockAxis = {
-			ticks: { size: 12 },
-			font: ['12px sans-serif'],
-		};
-		const measureText = jest.fn(() => ({ width: 48 }));
-		const mockSelf = ({
-			axes: [mockAxis],
-			ctx: {
-				measureText,
-				get font() {
-					return '';
-				},
-				set font(_v: string) {
-					/* noop */
-				},
-			},
-		} as unknown) as uPlot;
-
-		const result = (sizeFn as (
-			s: uPlot,
-			v: string[],
-			a: number,
-			c: number,
-		) => number)(
-			mockSelf,
-			['10', '2000ms'],
-			0,
-			0, // cycleNum <= 1
-		);
-
-		expect(measureText).toHaveBeenCalledWith('2000ms');
-		expect(result).toBeGreaterThanOrEqual(12 + 8);
-	});
-
-	it('merge updates axis props', () => {
-		const builder = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', label: 'Original' }),
-		);
-
-		builder.merge({ label: 'Merged', yAxisUnit: 'bytes' });
-
-		const config = builder.getConfig();
-
-		expect(config.label).toBe('Merged');
-		expect(config.values).toBeDefined();
-	});
-});

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -1,337 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import uPlot from 'uplot';
-
-import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource } from '../types';
-import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
-
-// Mock only the real boundary that hits localStorage
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-const getStoredSeriesVisibilityMock = jest.requireMock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-) as {
-	getStoredSeriesVisibility: jest.Mock;
-};
-
-describe('UPlotConfigBuilder', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const createSeriesProps = (
-		overrides: Partial<SeriesProps> = {},
-	): SeriesProps => ({
-		scaleKey: 'y',
-		label: 'Requests',
-		colorMapping: {},
-		drawStyle: DrawStyle.Line,
-		panelType: PANEL_TYPES.TIME_SERIES,
-		...overrides,
-	});
-
-	it('returns correct save selection preference flag from constructor args', () => {
-		const builder = new UPlotConfigBuilder({
-			shouldSaveSelectionPreference: true,
-		});
-
-		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
-	});
-
-	it('returns widgetId from constructor args', () => {
-		const builder = new UPlotConfigBuilder({ widgetId: 'widget-123' });
-
-		expect(builder.getWidgetId()).toBe('widget-123');
-	});
-
-	it('sets tzDate from constructor and includes it in config', () => {
-		const tzDate = (ts: number): Date => new Date(ts);
-		const builder = new UPlotConfigBuilder({ tzDate });
-
-		const config = builder.getConfig();
-
-		expect(config.tzDate).toBe(tzDate);
-	});
-
-	it('does not call onDragSelect for click without drag (width === 0)', () => {
-		const onDragSelect = jest.fn();
-		const builder = new UPlotConfigBuilder({ onDragSelect });
-
-		const config = builder.getConfig();
-		const setSelectHooks = config.hooks?.setSelect ?? [];
-		expect(setSelectHooks.length).toBe(1);
-
-		const uplotInstance = ({
-			select: { left: 10, width: 0 },
-			posToVal: jest.fn(),
-		} as unknown) as uPlot;
-
-		// Simulate uPlot calling the hook
-		const setSelectHook = setSelectHooks[0];
-		setSelectHook!(uplotInstance);
-
-		expect(onDragSelect).not.toHaveBeenCalled();
-	});
-
-	it('calls onDragSelect with start and end times in milliseconds for a drag selection', () => {
-		const onDragSelect = jest.fn();
-		const builder = new UPlotConfigBuilder({ onDragSelect });
-
-		const config = builder.getConfig();
-		const setSelectHooks = config.hooks?.setSelect ?? [];
-		expect(setSelectHooks.length).toBe(1);
-
-		const posToVal = jest
-			.fn()
-			// left position
-			.mockReturnValueOnce(100)
-			// left + width
-			.mockReturnValueOnce(110);
-
-		const uplotInstance = ({
-			select: { left: 50, width: 20 },
-			posToVal,
-		} as unknown) as uPlot;
-
-		const setSelectHook = setSelectHooks[0];
-		setSelectHook!(uplotInstance);
-
-		expect(onDragSelect).toHaveBeenCalledTimes(1);
-		// 100 and 110 seconds converted to milliseconds
-		expect(onDragSelect).toHaveBeenCalledWith(100_000, 110_000);
-	});
-
-	it('adds and removes hooks via addHook, and exposes them through getConfig', () => {
-		const builder = new UPlotConfigBuilder();
-		const drawHook = jest.fn();
-
-		const remove = builder.addHook('draw', drawHook as uPlot.Hooks.Defs['draw']);
-
-		let config = builder.getConfig();
-		expect(config.hooks?.draw).toContain(drawHook);
-
-		// Remove and ensure it no longer appears in config
-		remove();
-		config = builder.getConfig();
-		expect(config.hooks?.draw ?? []).not.toContain(drawHook);
-	});
-
-	it('adds axes, scales, and series and wires them into the final config', () => {
-		const builder = new UPlotConfigBuilder();
-
-		// Add axis and scale
-		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
-		builder.addScale({ scaleKey: 'y' });
-
-		// Add two series – legend indices should start from 1 (0 is the timestamp series)
-		builder.addSeries(createSeriesProps({ label: 'Requests' }));
-		builder.addSeries(createSeriesProps({ label: 'Errors' }));
-
-		const config = builder.getConfig();
-
-		// Axes
-		expect(config.axes).toHaveLength(1);
-		expect(config.axes?.[0].scale).toBe('y');
-
-		// Scales are returned as an object keyed by scaleKey
-		expect(config.scales).toBeDefined();
-		expect(Object.keys(config.scales ?? {})).toContain('y');
-
-		// Series: base timestamp + 2 data series
-		expect(config.series).toHaveLength(3);
-		// Base series (index 0) has a value formatter that returns empty string
-		const baseSeries = config.series?.[0] as { value?: () => string };
-		expect(typeof baseSeries?.value).toBe('function');
-		expect(baseSeries?.value?.()).toBe('');
-
-		// Legend items align with series and carry label and color from series config
-		const legendItems = builder.getLegendItems();
-		expect(Object.keys(legendItems)).toEqual(['1', '2']);
-		expect(legendItems[1].seriesIndex).toBe(1);
-		expect(legendItems[1].label).toBe('Requests');
-		expect(legendItems[2].label).toBe('Errors');
-	});
-
-	it('merges axis when addAxis is called twice with same scaleKey', () => {
-		const builder = new UPlotConfigBuilder();
-
-		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
-		builder.addAxis({ scaleKey: 'y', label: 'Updated Label', show: false });
-
-		const config = builder.getConfig();
-
-		expect(config.axes).toHaveLength(1);
-		expect(config.axes?.[0].label).toBe('Updated Label');
-		expect(config.axes?.[0].show).toBe(false);
-	});
-
-	it('merges scale when addScale is called twice with same scaleKey', () => {
-		const builder = new UPlotConfigBuilder();
-
-		builder.addScale({ scaleKey: 'y', min: 0 });
-		builder.addScale({ scaleKey: 'y', max: 100 });
-
-		const config = builder.getConfig();
-
-		// Only one scale entry for 'y' (merge path used, no duplicate added)
-		expect(config.scales).toBeDefined();
-		const scales = config.scales ?? {};
-		expect(Object.keys(scales)).toEqual(['y']);
-		expect(scales.y?.range).toBeDefined();
-	});
-
-	it('restores visibility state from localStorage when selectionPreferencesSource is LOCAL_STORAGE', () => {
-		// Index 0 = x-axis/time; indices 1,2 = data series (Requests, Errors). resolveSeriesVisibility matches by seriesIndex + seriesLabel.
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue({
-			labels: ['x-axis', 'Requests', 'Errors'],
-			visibility: [true, true, false],
-		});
-
-		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
-			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
-		});
-
-		builder.addSeries(createSeriesProps({ label: 'Requests' }));
-		builder.addSeries(createSeriesProps({ label: 'Errors' }));
-
-		const legendItems = builder.getLegendItems();
-
-		// When any series is hidden, legend visibility is driven by the stored map
-		expect(legendItems[1].show).toBe(true);
-		expect(legendItems[2].show).toBe(false);
-
-		const config = builder.getConfig();
-		const [, firstSeries, secondSeries] = config.series ?? [];
-
-		expect(firstSeries?.show).toBe(true);
-		expect(secondSeries?.show).toBe(false);
-	});
-
-	it('does not attempt to read stored visibility when using in-memory preferences', () => {
-		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
-			selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
-		});
-
-		builder.addSeries(createSeriesProps({ label: 'Requests' }));
-
-		builder.getLegendItems();
-		builder.getConfig();
-
-		expect(
-			getStoredSeriesVisibilityMock.getStoredSeriesVisibility,
-		).not.toHaveBeenCalled();
-	});
-
-	it('adds thresholds only once per scale key', () => {
-		const builder = new UPlotConfigBuilder();
-
-		const thresholdsOptions = {
-			scaleKey: 'y',
-			thresholds: [{ thresholdValue: 100 }],
-		};
-
-		builder.addThresholds(thresholdsOptions);
-		builder.addThresholds(thresholdsOptions);
-
-		const config = builder.getConfig();
-		const drawHooks = config.hooks?.draw ?? [];
-
-		// Only a single draw hook should be registered for the same scaleKey
-		expect(drawHooks.length).toBe(1);
-	});
-
-	it('adds multiple thresholds when scale key is different', () => {
-		const builder = new UPlotConfigBuilder();
-
-		const thresholdsOptions = {
-			scaleKey: 'y',
-			thresholds: [{ thresholdValue: 100 }],
-		};
-		builder.addThresholds(thresholdsOptions);
-		const thresholdsOptions2 = {
-			scaleKey: 'y2',
-			thresholds: [{ thresholdValue: 200 }],
-		};
-		builder.addThresholds(thresholdsOptions2);
-
-		const config = builder.getConfig();
-		const drawHooks = config.hooks?.draw ?? [];
-
-		// Two draw hooks should be registered for different scaleKeys
-		expect(drawHooks.length).toBe(2);
-	});
-
-	it('merges cursor configuration with defaults instead of replacing them', () => {
-		const builder = new UPlotConfigBuilder();
-
-		builder.setCursor({
-			drag: { setScale: false },
-		});
-
-		const config = builder.getConfig();
-
-		expect(config.cursor?.drag?.setScale).toBe(false);
-		// Points configuration from DEFAULT_CURSOR_CONFIG should still be present
-		expect(config.cursor?.points).toBeDefined();
-	});
-
-	it('adds plugins and includes them in config', () => {
-		const builder = new UPlotConfigBuilder();
-		const plugin: uPlot.Plugin = {
-			opts: (): void => {},
-			hooks: {},
-		};
-
-		builder.addPlugin(plugin);
-
-		const config = builder.getConfig();
-
-		expect(config.plugins).toContain(plugin);
-	});
-
-	it('sets padding, legend, focus, select, tzDate, bands and includes them in config', () => {
-		const tzDate = (ts: number): Date => new Date(ts);
-		const builder = new UPlotConfigBuilder();
-
-		const bands: uPlot.Band[] = [{ series: [1, 2], fill: (): string => '#000' }];
-
-		builder.setBands(bands);
-		builder.setPadding([10, 20, 30, 40]);
-		builder.setLegend({ show: true, live: true });
-		builder.setFocus({ alpha: 0.5 });
-		builder.setSelect({ left: 0, width: 0, top: 0, height: 0 });
-		builder.setTzDate(tzDate);
-
-		const config = builder.getConfig();
-
-		expect(config.bands).toEqual(bands);
-		expect(config.padding).toEqual([10, 20, 30, 40]);
-		expect(config.legend).toEqual({ show: true, live: true });
-		expect(config.focus).toEqual({ alpha: 0.5 });
-		expect(config.select).toEqual({ left: 0, width: 0, top: 0, height: 0 });
-		expect(config.tzDate).toBe(tzDate);
-	});
-
-	it('does not include plugins when none added', () => {
-		const builder = new UPlotConfigBuilder();
-
-		const config = builder.getConfig();
-
-		expect(config.plugins).toBeUndefined();
-	});
-
-	it('does not include bands when empty', () => {
-		const builder = new UPlotConfigBuilder();
-
-		const config = builder.getConfig();
-
-		expect(config.bands).toBeUndefined();
-	});
-});

frontend/src/lib/uPlotV2/config/__tests__/UPlotScaleBuilder.test.ts

@@ -1,236 +0,0 @@
-import type uPlot from 'uplot';
-
-import * as scaleUtils from '../../utils/scale';
-import type { ScaleProps } from '../types';
-import { DistributionType } from '../types';
-import { UPlotScaleBuilder } from '../UPlotScaleBuilder';
-
-const createScaleProps = (overrides: Partial<ScaleProps> = {}): ScaleProps => ({
-	scaleKey: 'y',
-	time: false,
-	auto: undefined,
-	min: undefined,
-	max: undefined,
-	softMin: undefined,
-	softMax: undefined,
-	distribution: DistributionType.Linear,
-	...overrides,
-});
-
-describe('UPlotScaleBuilder', () => {
-	const getFallbackMinMaxSpy = jest.spyOn(
-		scaleUtils,
-		'getFallbackMinMaxTimeStamp',
-	);
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('initializes softMin/softMax correctly when both are 0 (treated as unset)', () => {
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				softMin: 0,
-				softMax: 0,
-			}),
-		);
-
-		// Non-time scale so config path uses thresholds pipeline; we just care that
-		// adjustSoftLimitsWithThresholds receives null soft limits instead of 0/0.
-		const adjustSpy = jest.spyOn(scaleUtils, 'adjustSoftLimitsWithThresholds');
-
-		builder.getConfig();
-
-		expect(adjustSpy).toHaveBeenCalledWith(null, null, undefined, undefined);
-	});
-
-	it('handles time scales using explicit min/max and rounds max down to the previous minute', () => {
-		const min = 1_700_000_000; // seconds
-		const max = 1_700_000_600; // seconds
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				scaleKey: 'x',
-				time: true,
-				min,
-				max,
-			}),
-		);
-
-		const config = builder.getConfig();
-		const xScale = config.x;
-
-		expect(xScale.time).toBe(true);
-		expect(xScale.auto).toBe(false);
-		expect(Array.isArray(xScale.range)).toBe(true);
-
-		const [resolvedMin, resolvedMax] = xScale.range as [number, number];
-
-		// min is passed through
-		expect(resolvedMin).toBe(min);
-
-		// max is coerced to "endTime - 1 minute" and rounded down to minute precision
-		const oneMinuteAgoTimestamp = (max - 60) * 1000;
-		const currentDate = new Date(oneMinuteAgoTimestamp);
-		currentDate.setSeconds(0);
-		currentDate.setMilliseconds(0);
-		const expectedMax = Math.floor(currentDate.getTime() / 1000);
-
-		expect(resolvedMax).toBe(expectedMax);
-	});
-
-	it('falls back to getFallbackMinMaxTimeStamp when time scale has no min/max', () => {
-		getFallbackMinMaxSpy.mockReturnValue({
-			fallbackMin: 100,
-			fallbackMax: 200,
-		});
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				scaleKey: 'x',
-				time: true,
-				min: undefined,
-				max: undefined,
-			}),
-		);
-
-		const config = builder.getConfig();
-		const [resolvedMin, resolvedMax] = config.x.range as [number, number];
-
-		expect(getFallbackMinMaxSpy).toHaveBeenCalled();
-		expect(resolvedMin).toBe(100);
-		// max is aligned to "fallbackMax - 60 seconds" minute boundary
-		expect(resolvedMax).toBeLessThanOrEqual(200);
-		expect(resolvedMax).toBeGreaterThan(100);
-	});
-
-	it('pipes limits through soft-limit adjustment and log-scale normalization before range config', () => {
-		const adjustSpy = jest.spyOn(scaleUtils, 'adjustSoftLimitsWithThresholds');
-		const normalizeSpy = jest.spyOn(scaleUtils, 'normalizeLogScaleLimits');
-		const getRangeConfigSpy = jest.spyOn(scaleUtils, 'getRangeConfig');
-
-		const thresholds = {
-			scaleKey: 'y',
-			thresholds: [{ thresholdValue: 10 }],
-			yAxisUnit: 'ms',
-		};
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				softMin: 1,
-				softMax: 5,
-				min: 0,
-				max: 100,
-				distribution: DistributionType.Logarithmic,
-				thresholds,
-				logBase: 2,
-				padMinBy: 0.1,
-				padMaxBy: 0.2,
-			}),
-		);
-
-		builder.getConfig();
-
-		expect(adjustSpy).toHaveBeenCalledWith(1, 5, thresholds.thresholds, 'ms');
-		expect(normalizeSpy).toHaveBeenCalledWith({
-			distr: DistributionType.Logarithmic,
-			logBase: 2,
-			limits: {
-				min: 0,
-				max: 100,
-				softMin: expect.anything(),
-				softMax: expect.anything(),
-			},
-		});
-		expect(getRangeConfigSpy).toHaveBeenCalled();
-	});
-
-	it('computes distribution config for non-time scales and wires range function when range is not provided', () => {
-		const createRangeFnSpy = jest.spyOn(scaleUtils, 'createRangeFunction');
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				scaleKey: 'y',
-				time: false,
-				distribution: DistributionType.Linear,
-			}),
-		);
-
-		const config = builder.getConfig();
-		const yScale = config.y;
-
-		expect(createRangeFnSpy).toHaveBeenCalled();
-
-		// range should be a function when not provided explicitly
-		expect(typeof yScale.range).toBe('function');
-
-		// distribution config should be applied
-		expect(yScale.distr).toBeDefined();
-		expect(yScale.log).toBeDefined();
-	});
-
-	it('respects explicit range function when provided on props', () => {
-		const explicitRange: uPlot.Scale.Range = jest.fn(() => [
-			0,
-			10,
-		]) as uPlot.Scale.Range;
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				scaleKey: 'y',
-				range: explicitRange,
-			}),
-		);
-
-		const config = builder.getConfig();
-		const yScale = config.y;
-
-		expect(yScale.range).toBe(explicitRange);
-	});
-
-	it('derives auto flag when not explicitly provided, based on hasFixedRange and time', () => {
-		const getRangeConfigSpy = jest.spyOn(scaleUtils, 'getRangeConfig');
-
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				min: 0,
-				max: 100,
-				time: false,
-			}),
-		);
-
-		const config = builder.getConfig();
-		const yScale = config.y;
-
-		expect(getRangeConfigSpy).toHaveBeenCalled();
-		// For non-time scale with fixed min/max, hasFixedRange is true → auto should remain false
-		expect(yScale.auto).toBe(false);
-	});
-
-	it('merge updates internal min/max/soft limits while preserving other props', () => {
-		const builder = new UPlotScaleBuilder(
-			createScaleProps({
-				scaleKey: 'y',
-				min: 0,
-				max: 10,
-				softMin: 1,
-				softMax: 9,
-				time: false,
-			}),
-		);
-
-		builder.merge({
-			min: 2,
-			softMax: undefined,
-		});
-
-		expect(builder.props.min).toBe(2);
-		expect(builder.props.softMax).toBe(undefined);
-		expect(builder.props.max).toBe(10);
-		expect(builder.props.softMin).toBe(1);
-		expect(builder.props.time).toBe(false);
-		expect(builder.props.scaleKey).toBe('y');
-		expect(builder.props.distribution).toBe(DistributionType.Linear);
-		expect(builder.props.thresholds).toBe(undefined);
-	});
-});

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -1,295 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { themeColors } from 'constants/theme';
-import uPlot from 'uplot';
-
-import type { SeriesProps } from '../types';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from '../types';
-import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
-
-const createBaseProps = (
-	overrides: Partial<SeriesProps> = {},
-): SeriesProps => ({
-	scaleKey: 'y',
-	label: 'Requests',
-	colorMapping: {},
-	drawStyle: DrawStyle.Line,
-	isDarkMode: false,
-	panelType: PANEL_TYPES.TIME_SERIES,
-	...overrides,
-});
-
-interface MockPath extends uPlot.Series.Paths {
-	name?: string;
-}
-
-describe('UPlotSeriesBuilder', () => {
-	it('maps basic props into uPlot series config', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				label: 'Latency',
-				spanGaps: true,
-				show: false,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.scale).toBe('y');
-		expect(config.label).toBe('Latency');
-		expect(config.spanGaps).toBe(true);
-		expect(config.show).toBe(false);
-		expect(config.pxAlign).toBe(true);
-		expect(typeof config.value).toBe('function');
-	});
-
-	it('uses explicit lineColor when provided, regardless of mapping', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				lineColor: '#ff00ff',
-				colorMapping: { Requests: '#00ff00' },
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.stroke).toBe('#ff00ff');
-	});
-
-	it('falls back to theme colors when no label is provided', () => {
-		const darkBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				label: undefined,
-				isDarkMode: true,
-				lineColor: undefined,
-			}),
-		);
-		const lightBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				label: undefined,
-				isDarkMode: false,
-				lineColor: undefined,
-			}),
-		);
-
-		const darkConfig = darkBuilder.getConfig();
-		const lightConfig = lightBuilder.getConfig();
-
-		expect(darkConfig.stroke).toBe(themeColors.white);
-		expect(lightConfig.stroke).toBe(themeColors.black);
-	});
-
-	it('uses colorMapping when available and no explicit lineColor is provided', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				label: 'Requests',
-				colorMapping: { Requests: '#123456' },
-				lineColor: undefined,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.stroke).toBe('#123456');
-	});
-
-	it('passes through a custom pathBuilder when provided', () => {
-		const customPaths = (jest.fn() as unknown) as uPlot.Series.PathBuilder;
-
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				pathBuilder: customPaths,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.paths).toBe(customPaths);
-	});
-
-	it('does not build line paths when drawStyle is Points, but still renders points', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Points,
-				pointSize: 4,
-				lineWidth: 2,
-				lineColor: '#aa00aa',
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(typeof config.paths).toBe('function');
-		expect(config.paths && config.paths({} as uPlot, 1, 0, 10)).toBeNull();
-
-		expect(config.points).toBeDefined();
-		expect(config.points?.stroke).toBe('#aa00aa');
-		expect(config.points?.fill).toBe('#aa00aa');
-		expect(config.points?.show).toBe(true);
-		expect(config.points?.size).toBe(4);
-	});
-
-	it('derives point size based on lineWidth and pointSize', () => {
-		const smallPointsBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				lineWidth: 4,
-				pointSize: 2,
-			}),
-		);
-		const largePointsBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				lineWidth: 2,
-				pointSize: 4,
-			}),
-		);
-
-		const smallConfig = smallPointsBuilder.getConfig();
-		const largeConfig = largePointsBuilder.getConfig();
-
-		expect(smallConfig.points?.size).toBeUndefined();
-		expect(largeConfig.points?.size).toBe(4);
-	});
-
-	it('uses pointsBuilder when provided instead of default visibility logic', () => {
-		const pointsBuilder: uPlot.Series.Points.Show = jest.fn(
-			() => true,
-		) as uPlot.Series.Points.Show;
-
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				pointsBuilder,
-				drawStyle: DrawStyle.Line,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.points?.show).toBe(pointsBuilder);
-	});
-
-	it('respects VisibilityMode for point visibility when no custom pointsBuilder is given', () => {
-		const neverPointsBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				showPoints: VisibilityMode.Never,
-			}),
-		);
-		const alwaysPointsBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				showPoints: VisibilityMode.Always,
-			}),
-		);
-
-		const neverConfig = neverPointsBuilder.getConfig();
-		const alwaysConfig = alwaysPointsBuilder.getConfig();
-
-		expect(neverConfig.points?.show).toBe(false);
-		expect(alwaysConfig.points?.show).toBe(true);
-	});
-
-	it('applies LineStyle.Dashed and lineCap to line config', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				lineStyle: LineStyle.Dashed,
-				lineCap: 'round' as CanvasLineCap,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.dash).toEqual([10, 10]);
-		expect(config.cap).toBe('round');
-	});
-
-	it('builds default paths for Line drawStyle and invokes the path builder', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				lineInterpolation: LineInterpolation.Linear,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		const result = config.paths?.({} as uPlot, 1, 0, 10);
-		expect((result as MockPath).name).toBe('linear');
-	});
-
-	it('uses StepBefore and StepAfter interpolation for line paths', () => {
-		const stepBeforeBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				lineInterpolation: LineInterpolation.StepBefore,
-			}),
-		);
-		const stepAfterBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				lineInterpolation: LineInterpolation.StepAfter,
-			}),
-		);
-
-		const stepBeforeConfig = stepBeforeBuilder.getConfig();
-		const stepAfterConfig = stepAfterBuilder.getConfig();
-		const stepBeforePath = stepBeforeConfig.paths?.({} as uPlot, 1, 0, 5);
-		const stepAfterPath = stepAfterConfig.paths?.({} as uPlot, 1, 0, 5);
-		expect((stepBeforePath as MockPath).name).toBe('stepped-(-1)');
-		expect((stepAfterPath as MockPath).name).toBe('stepped-(1)');
-	});
-
-	it('defaults to spline interpolation when lineInterpolation is Spline or undefined', () => {
-		const splineBuilder = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Line,
-				lineInterpolation: LineInterpolation.Spline,
-			}),
-		);
-		const defaultBuilder = new UPlotSeriesBuilder(
-			createBaseProps({ drawStyle: DrawStyle.Line }),
-		);
-
-		const splineConfig = splineBuilder.getConfig();
-		const defaultConfig = defaultBuilder.getConfig();
-
-		const splinePath = splineConfig.paths?.({} as uPlot, 1, 0, 10);
-		const defaultPath = defaultConfig.paths?.({} as uPlot, 1, 0, 10);
-
-		expect((splinePath as MockPath).name).toBe('spline');
-		expect((defaultPath as MockPath).name).toBe('spline');
-	});
-
-	it('uses generateColor when label has no colorMapping and no lineColor', () => {
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				label: 'CustomSeries',
-				colorMapping: {},
-				lineColor: undefined,
-			}),
-		);
-
-		const config = builder.getConfig();
-		expect(config.stroke).toBe('#E64A3C');
-	});
-
-	it('passes through pointsFilter when provided', () => {
-		const pointsFilter: uPlot.Series.Points.Filter = jest.fn(
-			(_self, _seriesIdx, _show) => null,
-		);
-
-		const builder = new UPlotSeriesBuilder(
-			createBaseProps({
-				pointsFilter,
-				drawStyle: DrawStyle.Line,
-			}),
-		);
-
-		const config = builder.getConfig();
-
-		expect(config.points?.filter).toBe(pointsFilter);
-	});
-});

frontend/src/lib/uPlotV2/config/types.ts

@@ -126,45 +126,7 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-/**
- * Props for configuring lines
- */
-export interface LineConfig {
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-}
-
-/**
- * Alignment of bars
- */
-export enum BarAlignment {
-	After = 1,
-	Before = -1,
-	Center = 0,
-}
-
-/**
- * Props for configuring bars
- */
-export interface BarConfig {
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}
-
-/**
- * Props for configuring points
- */
-export interface PointsConfig {
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
-}
-
-export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
+export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -175,7 +137,20 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+
 	isDarkMode?: boolean;
+
+	// Line config
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+
+	// Points config
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -1,395 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { updateSeriesVisibilityToLocalStorage } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
-import {
-	PlotContextProvider,
-	usePlotContext,
-} from 'lib/uPlotV2/context/PlotContext';
-import type uPlot from 'uplot';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		updateSeriesVisibilityToLocalStorage: jest.fn(),
-	}),
-);
-
-const mockUpdateSeriesVisibilityToLocalStorage = updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
-	typeof updateSeriesVisibilityToLocalStorage
->;
-
-interface MockSeries extends Partial<uPlot.Series> {
-	label?: string;
-	show?: boolean;
-}
-
-const createMockPlot = (series: MockSeries[] = []): uPlot =>
-	(({
-		series,
-		batch: jest.fn((fn: () => void) => fn()),
-		setSeries: jest.fn(),
-	} as unknown) as uPlot);
-
-interface TestComponentProps {
-	plot?: uPlot;
-	widgetId?: string;
-	shouldSaveSelectionPreference?: boolean;
-}
-
-const TestComponent = ({
-	plot,
-	widgetId,
-	shouldSaveSelectionPreference,
-}: TestComponentProps): JSX.Element => {
-	const {
-		setPlotContextInitialState,
-		syncSeriesVisibilityToLocalStorage,
-		onToggleSeriesVisibility,
-		onToggleSeriesOnOff,
-		onFocusSeries,
-	} = usePlotContext();
-	const handleInit = (): void => {
-		if (
-			!plot ||
-			!widgetId ||
-			typeof shouldSaveSelectionPreference !== 'boolean'
-		) {
-			return;
-		}
-
-		setPlotContextInitialState({
-			uPlotInstance: plot,
-			widgetId,
-			shouldSaveSelectionPreference,
-		});
-	};
-
-	return (
-		<div>
-			<button type="button" data-testid="init" onClick={handleInit}>
-				Init
-			</button>
-			<button
-				type="button"
-				data-testid="sync-visibility"
-				onClick={(): void => syncSeriesVisibilityToLocalStorage()}
-			>
-				Sync visibility
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-visibility"
-				onClick={(): void => onToggleSeriesVisibility(1)}
-			>
-				Toggle visibility
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-1"
-				onClick={(): void => onToggleSeriesOnOff(1)}
-			>
-				Toggle on/off 1
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-5"
-				onClick={(): void => onToggleSeriesOnOff(5)}
-			>
-				Toggle on/off 5
-			</button>
-			<button
-				type="button"
-				data-testid="focus-series"
-				onClick={(): void => onFocusSeries(1)}
-			>
-				Focus series
-			</button>
-		</div>
-	);
-};
-
-describe('PlotContext', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('throws when usePlotContext is used outside provider', () => {
-		const Consumer = (): JSX.Element => {
-			// eslint-disable-next-line react-hooks/rules-of-hooks
-			usePlotContext();
-			return <div />;
-		};
-
-		expect(() => render(<Consumer />)).toThrow(
-			'Should be used inside the context',
-		);
-	});
-
-	it('syncSeriesVisibilityToLocalStorage does nothing without plot or widgetId', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<PlotContextProvider>
-				<TestComponent />
-			</PlotContextProvider>,
-		);
-
-		await user.click(screen.getByTestId('sync-visibility'));
-
-		expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-	});
-
-	it('syncSeriesVisibilityToLocalStorage serializes series visibility to localStorage helper', async () => {
-		const user = userEvent.setup();
-		const plot = createMockPlot([
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true },
-			{ label: 'Memory', show: false },
-		]);
-
-		render(
-			<PlotContextProvider>
-				<TestComponent
-					plot={plot}
-					widgetId="widget-123"
-					shouldSaveSelectionPreference
-				/>
-			</PlotContextProvider>,
-		);
-
-		await user.click(screen.getByTestId('init'));
-		await user.click(screen.getByTestId('sync-visibility'));
-
-		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-			'widget-123',
-			[
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			],
-		);
-	});
-
-	describe('onToggleSeriesVisibility', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			// No errors and no calls to localStorage helper
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('highlights a single series and saves visibility when preferences are enabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-visibility"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
-
-			// index 0 is skipped, so we expect calls for 1 and 2
-			expect(setSeries).toEqual([
-				[1, { show: true }],
-				[2, { show: false }],
-			]);
-
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-				'widget-visibility',
-				[
-					{ label: 'x-axis', show: true },
-					{ label: 'CPU', show: true },
-					{ label: 'Memory', show: true },
-				],
-			);
-		});
-
-		it('resets visibility for all series when toggling the same index again', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-reset"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			(plot.setSeries as jest.Mock).mockClear();
-
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
-
-			// After reset, all non-zero series should be shown
-			expect(setSeries).toEqual([
-				[1, { show: true }],
-				[2, { show: true }],
-			]);
-		});
-	});
-
-	describe('onToggleSeriesOnOff', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('toggles series show flag and saves visibility when preferences are enabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-toggle"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-				'widget-toggle',
-				expect.any(Array),
-			);
-		});
-
-		it('does not toggle when target series does not exist', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [{ label: 'x-axis', show: true }];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-missing-series"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-5'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('does not persist visibility when preferences flag is disabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-no-persist"
-						shouldSaveSelectionPreference={false}
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onFocusSeries', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('focus-series'));
-		});
-
-		it('sets focus on the given series index', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-focus"
-						shouldSaveSelectionPreference={false}
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('focus-series'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
-		});
-	});
-});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -1,201 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
-import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
-
-jest.mock('lib/uPlotV2/context/PlotContext');
-
-const mockUsePlotContext = usePlotContext as jest.MockedFunction<
-	typeof usePlotContext
->;
-
-describe('useLegendActions', () => {
-	let onToggleSeriesVisibility: jest.Mock;
-	let onToggleSeriesOnOff: jest.Mock;
-	let onFocusSeriesPlot: jest.Mock;
-	let setPlotContextInitialState: jest.Mock;
-	let syncSeriesVisibilityToLocalStorage: jest.Mock;
-	let setFocusedSeriesIndexMock: jest.Mock;
-	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
-
-	beforeAll(() => {
-		jest
-			.spyOn(global, 'requestAnimationFrame')
-			.mockImplementation((cb: FrameRequestCallback): number => {
-				cb(0);
-				return 1;
-			});
-
-		cancelAnimationFrameSpy = jest
-			.spyOn(global, 'cancelAnimationFrame')
-			.mockImplementation(() => {});
-	});
-
-	afterAll(() => {
-		jest.restoreAllMocks();
-	});
-
-	beforeEach(() => {
-		onToggleSeriesVisibility = jest.fn();
-		onToggleSeriesOnOff = jest.fn();
-		onFocusSeriesPlot = jest.fn();
-		setPlotContextInitialState = jest.fn();
-		syncSeriesVisibilityToLocalStorage = jest.fn();
-		setFocusedSeriesIndexMock = jest.fn();
-
-		mockUsePlotContext.mockReturnValue({
-			onToggleSeriesVisibility,
-			onToggleSeriesOnOff,
-			onFocusSeries: onFocusSeriesPlot,
-			setPlotContextInitialState,
-			syncSeriesVisibilityToLocalStorage,
-		});
-
-		cancelAnimationFrameSpy.mockClear();
-	});
-
-	const createMouseEvent = (options: {
-		legendItemId?: number;
-		isMarker?: boolean;
-	}): any => {
-		const { legendItemId, isMarker = false } = options;
-
-		return {
-			target: {
-				dataset: {
-					...(isMarker ? { isLegendMarker: 'true' } : {}),
-				},
-				closest: jest.fn(() =>
-					legendItemId !== undefined
-						? { dataset: { legendItemId: String(legendItemId) } }
-						: null,
-				),
-			},
-		};
-	};
-
-	describe('onLegendClick', () => {
-		it('toggles series visibility when clicking on legend label', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
-
-			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
-			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
-			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
-		});
-
-		it('toggles series on/off when clicking on marker', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(
-				createMouseEvent({ legendItemId: 0, isMarker: true }),
-			);
-
-			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
-			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
-		});
-
-		it('does nothing when click target is not inside a legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(createMouseEvent({}));
-
-			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
-			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onFocusSeries', () => {
-		it('schedules focus update and calls plot focus handler via mouse move', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
-		});
-
-		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
-		});
-	});
-
-	describe('onLegendMouseMove', () => {
-		it('focuses new series when hovering over different legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: 0,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
-		});
-
-		it('does nothing when hovering over already focused series', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: 1,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
-			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onLegendMouseLeave', () => {
-		it('cancels pending animation frame and clears focus state', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-			result.current.onLegendMouseLeave();
-
-			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
-		});
-	});
-});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendsSync.test.ts

@@ -1,192 +0,0 @@
-import { act, cleanup, renderHook } from '@testing-library/react';
-import type { LegendItem } from 'lib/uPlotV2/config/types';
-import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-describe('useLegendsSync', () => {
-	let requestAnimationFrameSpy: jest.SpyInstance<
-		number,
-		[callback: FrameRequestCallback]
-	>;
-	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
-
-	beforeAll(() => {
-		requestAnimationFrameSpy = jest
-			.spyOn(global, 'requestAnimationFrame')
-			.mockImplementation((cb: FrameRequestCallback): number => {
-				cb(0);
-				return 1;
-			});
-
-		cancelAnimationFrameSpy = jest
-			.spyOn(global, 'cancelAnimationFrame')
-			.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-		cleanup();
-	});
-
-	afterAll(() => {
-		jest.restoreAllMocks();
-	});
-
-	const createMockConfig = (
-		legendItems: Record<number, LegendItem>,
-	): {
-		config: UPlotConfigBuilder;
-		invokeSetSeries: (
-			seriesIndex: number | null,
-			opts: { show?: boolean; focus?: boolean },
-			fireHook?: boolean,
-		) => void;
-	} => {
-		let setSeriesHandler:
-			| ((u: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-			| null = null;
-
-		const config = ({
-			getLegendItems: jest.fn(() => legendItems),
-			addHook: jest.fn(
-				(
-					hookName: string,
-					handler: (
-						u: uPlot,
-						seriesIndex: number | null,
-						opts: uPlot.Series,
-					) => void,
-				) => {
-					if (hookName === 'setSeries') {
-						setSeriesHandler = handler;
-					}
-
-					return (): void => {
-						setSeriesHandler = null;
-					};
-				},
-			),
-		} as unknown) as UPlotConfigBuilder;
-
-		const invokeSetSeries = (
-			seriesIndex: number | null,
-			opts: { show?: boolean; focus?: boolean },
-		): void => {
-			if (setSeriesHandler) {
-				setSeriesHandler({} as uPlot, seriesIndex, { ...opts });
-			}
-		};
-
-		return { config, invokeSetSeries };
-	};
-
-	it('initializes legend items from config', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-			2: { seriesIndex: 2, label: 'Memory', show: false, color: '#0f0' },
-		};
-
-		const { config } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		expect(config.getLegendItems).toHaveBeenCalledTimes(1);
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-
-		expect(result.current.legendItemsMap).toEqual(initialItems);
-	});
-
-	it('updates focusedSeriesIndex when a series gains focus via setSeries by default', async () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		expect(result.current.focusedSeriesIndex).toBeNull();
-
-		await act(async () => {
-			invokeSetSeries(1, { focus: true });
-		});
-
-		expect(result.current.focusedSeriesIndex).toBe(1);
-	});
-
-	it('does not update focusedSeriesIndex when subscribeToFocusChange is false', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() =>
-			useLegendsSync({ config, subscribeToFocusChange: false }),
-		);
-
-		invokeSetSeries(1, { focus: true });
-
-		expect(result.current.focusedSeriesIndex).toBeNull();
-	});
-
-	it('updates legendItemsMap visibility when show changes for a series', async () => {
-		const initialItems: Record<number, LegendItem> = {
-			0: { seriesIndex: 0, label: 'x-axis', show: true, color: '#000' },
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		// Toggle visibility of series 1
-		await act(async () => {
-			invokeSetSeries(1, { show: false });
-		});
-
-		expect(result.current.legendItemsMap[1].show).toBe(false);
-	});
-
-	it('ignores visibility updates for unknown legend items or unchanged show values', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		const before = result.current.legendItemsMap;
-
-		// Unknown series index
-		invokeSetSeries(5, { show: false });
-		// Unchanged visibility for existing item
-		invokeSetSeries(1, { show: true });
-
-		const after = result.current.legendItemsMap;
-		expect(after).toEqual(before);
-	});
-
-	it('cancels pending visibility RAF on unmount', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		// Override RAF to not immediately invoke callback so we can assert cancellation
-		requestAnimationFrameSpy.mockImplementationOnce(() => 42);
-
-		const { unmount } = renderHook(() => useLegendsSync({ config }));
-
-		invokeSetSeries(1, { show: false });
-
-		unmount();
-
-		expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(42);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/axis.test.ts

@@ -1,218 +0,0 @@
-import type uPlot from 'uplot';
-import { Axis } from 'uplot';
-
-import {
-	buildYAxisSizeCalculator,
-	calculateTextWidth,
-	getExistingAxisSize,
-} from '../axis';
-
-describe('axis utils', () => {
-	describe('calculateTextWidth', () => {
-		it('returns 0 when values are undefined or empty', () => {
-			const mockSelf = ({
-				ctx: {
-					measureText: jest.fn(),
-					font: '',
-				},
-			} as unknown) as uPlot;
-
-			// internally the type is string but it is an array of strings
-			const mockAxis: Axis = { font: (['12px sans-serif'] as unknown) as string };
-
-			expect(calculateTextWidth(mockSelf, mockAxis, undefined)).toBe(0);
-			expect(calculateTextWidth(mockSelf, mockAxis, [])).toBe(0);
-		});
-
-		it('returns 0 when longest value is empty string or axis has no usable font', () => {
-			const mockSelf = ({
-				ctx: {
-					measureText: jest.fn(),
-					font: '',
-				},
-			} as unknown) as uPlot;
-
-			const axisWithoutFont: Axis = { font: '' };
-			const axisWithEmptyFontArray: Axis = { font: '' };
-
-			expect(calculateTextWidth(mockSelf, axisWithoutFont, [''])).toBe(0);
-			expect(
-				calculateTextWidth(mockSelf, axisWithEmptyFontArray, ['a', 'bb']),
-			).toBe(0);
-		});
-
-		it('measures longest value using canvas context and axis font', () => {
-			const measureText = jest.fn(() => ({ width: 100 }));
-			const mockSelf = ({
-				ctx: {
-					font: '',
-					measureText,
-				},
-			} as unknown) as uPlot;
-
-			const mockAxis: Axis = { font: (['14px Arial'] as unknown) as string };
-			const values = ['1', '1234', '12'];
-			const dpr =
-				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
-				1;
-
-			const result = calculateTextWidth(mockSelf, mockAxis, values);
-
-			expect(measureText).toHaveBeenCalledWith('1234');
-			expect(mockSelf.ctx.font).toBe('14px Arial');
-			expect(result).toBe(100 / dpr);
-		});
-	});
-
-	describe('getExistingAxisSize', () => {
-		it('returns internal _size when present', () => {
-			const axis: any = {
-				_size: 42,
-				size: 10,
-			};
-
-			const result = getExistingAxisSize({
-				uplotInstance: ({} as unknown) as uPlot,
-				axis,
-				axisIdx: 0,
-				cycleNum: 0,
-			});
-
-			expect(result).toBe(42);
-		});
-
-		it('invokes size function when _size is not set', () => {
-			const sizeFn = jest.fn(() => 24);
-			const axis: Axis = { size: sizeFn };
-			const instance = ({} as unknown) as uPlot;
-
-			const result = getExistingAxisSize({
-				uplotInstance: instance,
-				axis,
-				values: ['10', '20'],
-				axisIdx: 1,
-				cycleNum: 2,
-			});
-
-			expect(sizeFn).toHaveBeenCalledWith(instance, ['10', '20'], 1, 2);
-			expect(result).toBe(24);
-		});
-
-		it('returns numeric size or 0 when neither _size nor size are provided', () => {
-			const axisWithSize: Axis = { size: 16 };
-			const axisWithoutSize: Axis = {};
-			const instance = ({} as unknown) as uPlot;
-
-			expect(
-				getExistingAxisSize({
-					uplotInstance: instance,
-					axis: axisWithSize,
-					axisIdx: 0,
-					cycleNum: 0,
-				}),
-			).toBe(16);
-
-			expect(
-				getExistingAxisSize({
-					uplotInstance: instance,
-					axis: axisWithoutSize,
-					axisIdx: 0,
-					cycleNum: 0,
-				}),
-			).toBe(0);
-		});
-	});
-
-	describe('buildYAxisSizeCalculator', () => {
-		it('delegates to getExistingAxisSize when cycleNum > 1', () => {
-			const sizeCalculator = buildYAxisSizeCalculator(5);
-
-			const axis: any = {
-				_size: 80,
-				ticks: { size: 10 },
-				font: ['12px sans-serif'],
-			};
-
-			const measureText = jest.fn(() => ({ width: 60 }));
-			const self = ({
-				axes: [axis],
-				ctx: {
-					font: '',
-					measureText,
-				},
-			} as unknown) as uPlot;
-
-			if (typeof sizeCalculator === 'number') {
-				throw new Error('Size calculator is a number');
-			}
-
-			const result = sizeCalculator(self, ['10', '20'], 0, 2);
-
-			expect(result).toBe(80);
-			expect(measureText).not.toHaveBeenCalled();
-		});
-
-		it('computes size from ticks, gap and text width when cycleNum <= 1', () => {
-			const gap = 7;
-			const sizeCalculator = buildYAxisSizeCalculator(gap);
-
-			const axis: Axis = {
-				ticks: { size: 12 },
-				font: (['12px sans-serif'] as unknown) as string,
-			};
-
-			const measureText = jest.fn(() => ({ width: 50 }));
-			const self = ({
-				axes: [axis],
-				ctx: {
-					font: '',
-					measureText,
-				},
-			} as unknown) as uPlot;
-
-			const dpr =
-				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
-				1;
-			const expected = Math.ceil(12 + gap + 50 / dpr);
-
-			if (typeof sizeCalculator === 'number') {
-				throw new Error('Size calculator is a number');
-			}
-
-			const result = sizeCalculator(self, ['short', 'the-longest'], 0, 0);
-			expect(measureText).toHaveBeenCalledWith('the-longest');
-			expect(result).toBe(expected);
-		});
-
-		it('uses 0 ticks size when ticks are not defined', () => {
-			const gap = 4;
-			const sizeCalculator = buildYAxisSizeCalculator(gap);
-
-			const axis: Axis = {
-				font: (['12px sans-serif'] as unknown) as string,
-			};
-
-			const measureText = jest.fn(() => ({ width: 40 }));
-			const self = ({
-				axes: [axis],
-				ctx: {
-					font: '',
-					measureText,
-				},
-			} as unknown) as uPlot;
-
-			const dpr =
-				((global as unknown) as { devicePixelRatio?: number }).devicePixelRatio ??
-				1;
-			const expected = Math.ceil(gap + 40 / dpr);
-
-			if (typeof sizeCalculator === 'number') {
-				throw new Error('Size calculator is a number');
-			}
-
-			const result = sizeCalculator(self, ['1', '123'], 0, 1);
-
-			expect(result).toBe(expected);
-		});
-	});
-});

frontend/src/lib/uPlotV2/utils/axis.ts

@@ -1,80 +0,0 @@
-import { Axis } from 'uplot';
-
-/**
- * Calculate text width for longest value
- */
-export function calculateTextWidth(
-	self: uPlot,
-	axis: Axis,
-	values: string[] | undefined,
-): number {
-	if (!values || values.length === 0) {
-		return 0;
-	}
-
-	// Find longest value
-	const longestVal = values.reduce(
-		(acc, val) => (val.length > acc.length ? val : acc),
-		'',
-	);
-
-	if (longestVal === '' || !axis.font?.[0]) {
-		return 0;
-	}
-
-	self.ctx.font = axis.font[0];
-	return self.ctx.measureText(longestVal).width / devicePixelRatio;
-}
-
-export function getExistingAxisSize({
-	uplotInstance,
-	axis,
-	values,
-	axisIdx,
-	cycleNum,
-}: {
-	uplotInstance: uPlot;
-	axis: Axis;
-	values?: string[];
-	axisIdx: number;
-	cycleNum: number;
-}): number {
-	const internalSize = (axis as { _size?: number })._size;
-	if (internalSize !== undefined) {
-		return internalSize;
-	}
-
-	const existingSize = axis.size;
-	if (typeof existingSize === 'function') {
-		return existingSize(uplotInstance, values ?? [], axisIdx, cycleNum);
-	}
-
-	return existingSize ?? 0;
-}
-
-export function buildYAxisSizeCalculator(gap: number): uPlot.Axis.Size {
-	return (
-		self: uPlot,
-		values: string[] | undefined,
-		axisIdx: number,
-		cycleNum: number,
-	): number => {
-		const axis = self.axes[axisIdx];
-
-		// Bail out, force convergence
-		if (cycleNum > 1) {
-			return getExistingAxisSize({
-				uplotInstance: self,
-				axis,
-				values,
-				axisIdx,
-				cycleNum,
-			});
-		}
-
-		let axisSize = (axis.ticks?.size ?? 0) + gap;
-		axisSize += calculateTextWidth(self, axis, values);
-
-		return Math.ceil(axisSize);
-	};
-}

frontend/src/lib/uPlotV2/utils/seriesVisibility.ts

@@ -1,25 +1,11 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
-
-export function resolveSeriesVisibility({
-	seriesIndex,
-	seriesShow,
-	seriesLabel,
-	seriesVisibilityState,
-	isAnySeriesHidden,
-}: {
-	seriesIndex: number;
-	seriesShow: boolean | undefined | null;
-	seriesLabel: string;
-	seriesVisibilityState: SeriesVisibilityState | null;
-	isAnySeriesHidden: boolean;
-}): boolean {
-	if (
-		isAnySeriesHidden &&
-		seriesVisibilityState?.visibility &&
-		seriesVisibilityState.labels.length > seriesIndex &&
-		seriesVisibilityState.labels[seriesIndex] === seriesLabel
-	) {
-		return seriesVisibilityState.visibility[seriesIndex] ?? false;
+export function resolveSeriesVisibility(
+	label: string,
+	seriesShow: boolean | undefined | null,
+	visibilityMap: Map<string, boolean> | null,
+	isAnySeriesHidden: boolean,
+): boolean {
+	if (isAnySeriesHidden) {
+		return visibilityMap?.get(label) ?? false;
 	}
 	return seriesShow ?? true;
 }

pkg/query-service/app/inframetrics/common.go

@@ -10,6 +10,7 @@ import (
 )
 
 var dotMetricMap = map[string]string{
+	"system_filesystem_usage":               "system.filesystem.usage",
 	"system_cpu_time":                       "system.cpu.time",
 	"system_memory_usage":                   "system.memory.usage",
 	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",

pkg/query-service/app/inframetrics/hosts.go

@@ -53,10 +53,11 @@ var (
 	}
 
 	queryNamesForTopHosts = map[string][]string{
-		"cpu":    {"A", "B", "F1"},
-		"memory": {"C", "D", "F2"},
-		"wait":   {"E", "F", "F3"},
-		"load15": {"G"},
+		"cpu":        {"A", "B", "F1"},
+		"memory":     {"C", "D", "F2"},
+		"wait":       {"E", "F", "F3"},
+		"load15":     {"G"},
+		"filesystem": {"H", "I", "F4"},
 	}
 
 	// TODO(srikanthccv): remove hardcoded metric name and support keys from any system metric
@@ -67,10 +68,11 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"cpu":    GetDotMetrics("system_cpu_time"),
-		"memory": GetDotMetrics("system_memory_usage"),
-		"load15": GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":   GetDotMetrics("system_cpu_time"),
+		"cpu":        GetDotMetrics("system_cpu_time"),
+		"memory":     GetDotMetrics("system_memory_usage"),
+		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":       GetDotMetrics("system_cpu_time"),
+		"filesystem": GetDotMetrics("system_filesystem_usage"),
 	}
 )
 
@@ -494,10 +496,11 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 	for _, result := range formattedResponse {
 		for _, row := range result.Table.Rows {
 			record := model.HostListRecord{
-				CPU:    -1,
-				Memory: -1,
-				Wait:   -1,
-				Load15: -1,
+				CPU:        -1,
+				Memory:     -1,
+				Wait:       -1,
+				Load15:     -1,
+				Filesystem: -1,
 			}
 
 			if hostName, ok := row.Data[hostNameAttrKey].(string); ok {
@@ -516,6 +519,9 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 			if load15, ok := row.Data["G"].(float64); ok {
 				record.Load15 = load15
 			}
+			if filesystem, ok := row.Data["F4"].(float64); ok {
+				record.Filesystem = filesystem
+			}
 			record.Meta = map[string]string{}
 			if _, ok := hostAttrs[record.HostName]; ok {
 				record.Meta = hostAttrs[record.HostName]

pkg/query-service/app/inframetrics/hosts_query.go

@@ -269,42 +269,130 @@ var HostsTableListQuery = v3.QueryRangeParamsV3{
 					Items:    []v3.FilterItem{},
 				},
 			},
-			"G": {
-				QueryName:  "G",
-				DataSource: v3.DataSourceMetrics,
-				AggregateAttribute: v3.AttributeKey{
-					Key:      metricNamesForHosts["load15"],
-					DataType: v3.AttributeKeyDataTypeFloat64,
-				},
-				Temporality: v3.Unspecified,
-				Filters: &v3.FilterSet{
-					Operator: "AND",
-					Items: []v3.FilterItem{
-						{
-							Key: v3.AttributeKey{
-								Key:      hostNameAttrKey,
-								DataType: v3.AttributeKeyDataTypeString,
-								Type:     v3.AttributeKeyTypeResource,
-							},
-							Operator: v3.FilterOperatorNotContains,
-							Value:    agentNameToIgnore,
-						},
-					},
-				},
-				GroupBy: []v3.AttributeKey{
-					{
-						Key:      hostNameAttrKey,
-						DataType: v3.AttributeKeyDataTypeString,
-						Type:     v3.AttributeKeyTypeResource,
-					},
-				},
-				Expression:       "G",
-				ReduceTo:         v3.ReduceToOperatorAvg,
-				TimeAggregation:  v3.TimeAggregationAvg,
-				SpaceAggregation: v3.SpaceAggregationSum,
-				Disabled:         false,
-				Legend:           "CPU Load Average (15m)",
+		"G": {
+			QueryName:  "G",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["load15"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
 			},
+			Temporality: v3.Unspecified,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "G",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         false,
+			Legend:           "CPU Load Average (15m)",
+		},
+		"H": {
+			QueryName:  "H",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      "state",
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeTag,
+						},
+						Operator: v3.FilterOperatorEqual,
+						Value:    "used",
+					},
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "H",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"I": {
+			QueryName:  "I",
+			DataSource: v3.DataSourceMetrics,
+			AggregateAttribute: v3.AttributeKey{
+				Key:      metricNamesForHosts["filesystem"],
+				DataType: v3.AttributeKeyDataTypeFloat64,
+			},
+			Temporality: v3.Cumulative,
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      hostNameAttrKey,
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeResource,
+						},
+						Operator: v3.FilterOperatorNotContains,
+						Value:    agentNameToIgnore,
+					},
+				},
+			},
+			GroupBy: []v3.AttributeKey{
+				{
+					Key:      hostNameAttrKey,
+					DataType: v3.AttributeKeyDataTypeString,
+					Type:     v3.AttributeKeyTypeResource,
+				},
+			},
+			Expression:       "I",
+			ReduceTo:         v3.ReduceToOperatorAvg,
+			TimeAggregation:  v3.TimeAggregationAvg,
+			SpaceAggregation: v3.SpaceAggregationSum,
+			Disabled:         true,
+		},
+		"F4": {
+			QueryName:  "F4",
+			Expression: "H/I",
+			Legend:     "Disk Usage (%)",
+			Filters: &v3.FilterSet{
+				Operator: "AND",
+				Items:    []v3.FilterItem{},
+			},
+		},
 		},
 		PanelType: v3.PanelTypeTable,
 		QueryType: v3.QueryTypeBuilder,

pkg/query-service/model/infra.go

@@ -26,14 +26,15 @@ type HostListRequest struct {
 }
 
 type HostListRecord struct {
-	HostName string            `json:"hostName"`
-	Active   bool              `json:"active"`
-	OS       string            `json:"os"`
-	CPU      float64           `json:"cpu"`
-	Memory   float64           `json:"memory"`
-	Wait     float64           `json:"wait"`
-	Load15   float64           `json:"load15"`
-	Meta     map[string]string `json:"meta"`
+	HostName   string            `json:"hostName"`
+	Active     bool              `json:"active"`
+	OS         string            `json:"os"`
+	CPU        float64           `json:"cpu"`
+	Memory     float64           `json:"memory"`
+	Wait       float64           `json:"wait"`
+	Load15     float64           `json:"load15"`
+	Filesystem float64           `json:"filesystem"`
+	Meta       map[string]string `json:"meta"`
 }
 
 type HostListResponse struct {
@@ -64,6 +65,10 @@ func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {
 		sort.Slice(r.Records, func(i, j int) bool {
 			return r.Records[i].Wait > r.Records[j].Wait
 		})
+	case "filesystem":
+		sort.Slice(r.Records, func(i, j int) bool {
+			return r.Records[i].Filesystem > r.Records[j].Filesystem
+		})
 	}
 	// the default is descending
 	if orderBy.Order == v3.DirectionAsc {

pkg/types/integration.go

@@ -151,8 +151,7 @@ func (c *AccountConfig) Value() (driver.Value, error) {
 	if err != nil {
 		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize cloud account config to JSON")
 	}
-	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
-	return string(serialized), nil
+	return serialized, nil
 }
 
 type AgentReport struct {
@@ -187,8 +186,7 @@ func (r *AgentReport) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize agent report to JSON",
 		)
 	}
-	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
-	return string(serialized), nil
+	return serialized, nil
 }
 
 type CloudIntegrationService struct {
@@ -242,6 +240,5 @@ func (c *CloudServiceConfig) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize cloud service config to JSON",
 		)
 	}
-	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
-	return string(serialized), nil
+	return serialized, nil
 }

tests/integration/conftest.py

@@ -20,7 +20,6 @@ pytest_plugins = [
     "fixtures.idputils",
     "fixtures.notification_channel",
     "fixtures.alerts",
-    "fixtures.cloudintegrations",
 ]
 
 

tests/integration/fixtures/cloudintegrations.py

@@ -1,88 +0,0 @@
-"""Fixtures for cloud integration tests."""
-from typing import Callable, Optional
-from http import HTTPStatus
-
-import pytest
-import requests
-
-from fixtures import types
-from fixtures.logger import setup_logger
-from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-
-logger = setup_logger(__name__)
-
-@pytest.fixture(scope="function")
-def create_cloud_integration_account(
-    request: pytest.FixtureRequest,
-    signoz: types.SigNoz,
-) -> Callable[[str, str], dict]:
-    created_account_id: Optional[str] = None
-    cloud_provider_used: Optional[str] = None
-
-    def _create(
-        admin_token: str,
-        cloud_provider: str = "aws",
-    ) -> dict:
-        nonlocal created_account_id, cloud_provider_used
-        endpoint = (
-            f"/api/v1/cloud-integrations/{cloud_provider}/accounts/generate-connection-url"
-        )
-
-        request_payload = {
-            "account_config": {"regions": ["us-east-1"]},
-            "agent_config": {
-                "region": "us-east-1",
-                "ingestion_url": "https://ingest.test.signoz.cloud",
-                "ingestion_key": "test-ingestion-key-123456",
-                "signoz_api_url": "https://test-deployment.test.signoz.cloud",
-                "signoz_api_key": "test-api-key-789",
-                "version": "v0.0.8",
-            },
-        }
-
-        response = requests.post(
-            signoz.self.host_configs["8080"].get(endpoint),
-            headers={"Authorization": f"Bearer {admin_token}"},
-            json=request_payload,
-            timeout=10,
-        )
-
-        assert (
-            response.status_code == HTTPStatus.OK
-        ), f"Failed to create test account: {response.status_code}"
-
-        data = response.json().get("data", response.json())
-        created_account_id = data.get("account_id")
-        cloud_provider_used = cloud_provider
-
-        return data
-
-    def _disconnect(admin_token: str, cloud_provider: str) -> requests.Response:
-        assert created_account_id
-        disconnect_endpoint = (
-            f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{created_account_id}/disconnect"
-        )
-        return requests.post(
-            signoz.self.host_configs["8080"].get(disconnect_endpoint),
-            headers={"Authorization": f"Bearer {admin_token}"},
-            timeout=10,
-        )
-
-    # Yield factory to the test
-    yield _create
-
-    # Post-test cleanup: generate admin token and disconnect the created account
-    if created_account_id and cloud_provider_used:
-        get_token = request.getfixturevalue("get_token")
-        try:
-            admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-            r = _disconnect(admin_token, cloud_provider_used)
-            if r.status_code != HTTPStatus.OK:
-                logger.info(
-                    "Disconnect cleanup returned %s for account %s",
-                    r.status_code,
-                    created_account_id,
-                )
-            logger.info("Cleaned up test account: %s", created_account_id)
-        except Exception as exc:  # pylint: disable=broad-except
-            logger.info("Post-test disconnect cleanup failed: %s", exc)

tests/integration/fixtures/cloudintegrationsutils.py

@@ -1,46 +0,0 @@
-"""Fixtures for cloud integration tests."""
-from http import HTTPStatus
-
-import requests
-
-from fixtures import types
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-
-def simulate_agent_checkin(
-    signoz: types.SigNoz,
-    admin_token: str,
-    cloud_provider: str,
-    account_id: str,
-    cloud_account_id: str,
-) -> dict:
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/agent-check-in"
-
-    checkin_payload = {
-        "account_id": account_id,
-        "cloud_account_id": cloud_account_id,
-        "data": {},
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=checkin_payload,
-        timeout=10,
-    )
-
-    if response.status_code != HTTPStatus.OK:
-        logger.error(
-            "Agent check-in failed: %s, response: %s",
-            response.status_code,
-            response.text,
-        )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Agent check-in failed: {response.status_code}"
-
-    response_data = response.json()
-    return response_data.get("data", response_data)

tests/integration/src/cloudintegrations/02_generate_connection_url.py

@@ -1,143 +0,0 @@
-from http import HTTPStatus
-from typing import Callable
-
-import pytest
-import requests
-
-from fixtures import types
-from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-
-def test_generate_connection_url(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test to generate connection URL for AWS CloudFormation stack deployment."""
-
-    # Get authentication token for admin user
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-    cloud_provider = "aws"
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts/generate-connection-url"
-
-    # Prepare request payload
-    request_payload = {
-        "account_config": {"regions": ["us-east-1", "us-west-2"]},
-        "agent_config": {
-            "region": "us-east-1",
-            "ingestion_url": "https://ingest.test.signoz.cloud",
-            "ingestion_key": "test-ingestion-key-123456",
-            "signoz_api_url": "https://test-deployment.test.signoz.cloud",
-            "signoz_api_key": "test-api-key-789",
-            "version": "v0.0.8",
-        },
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=request_payload,
-        timeout=10,
-    )
-
-    # Assert successful response
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}: {response.text}"
-
-    # Parse response JSON
-    response_data = response.json()
-
-    # Assert response structure contains expected data
-    assert "data" in response_data, "Response should contain 'data' field"
-
-    # Assert required fields in the response data
-    expected_fields = ["account_id", "connection_url"]
-
-    for field in expected_fields:
-        assert (
-            field in response_data["data"]
-        ), f"Response data should contain '{field}' field"
-
-    data = response_data["data"]
-
-    # Assert account_id is a valid UUID format
-    assert (
-        len(data["account_id"]) > 0
-    ), "account_id should be a non-empty string (UUID)"
-
-    # Assert connection_url contains expected CloudFormation parameters
-    connection_url = data["connection_url"]
-
-    # Verify it's an AWS CloudFormation URL
-    assert (
-        "console.aws.amazon.com/cloudformation" in connection_url
-    ), "connection_url should be an AWS CloudFormation URL"
-
-    # Verify region is included
-    assert (
-        "region=us-east-1" in connection_url
-    ), "connection_url should contain the specified region"
-
-    # Verify required parameters are in the URL
-    required_params = [
-        "param_SigNozIntegrationAgentVersion=v0.0.8",
-        "param_SigNozApiUrl=https%3A%2F%2Ftest-deployment.test.signoz.cloud",
-        "param_SigNozApiKey=test-api-key-789",
-        "param_SigNozAccountId=",  # Will be a UUID
-        "param_IngestionUrl=https%3A%2F%2Fingest.test.signoz.cloud",
-        "param_IngestionKey=test-ingestion-key-123456",
-        "stackName=signoz-integration",
-        "templateURL=https%3A%2F%2Fsignoz-integrations.s3.us-east-1.amazonaws.com%2Faws-quickcreate-template-v0.0.8.json",
-    ]
-
-    for param in required_params:
-        assert (
-            param in connection_url
-        ), f"connection_url should contain parameter: {param}"
-
-
-def test_generate_connection_url_unsupported_provider(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test that unsupported cloud providers return an error."""
-    # Get authentication token for admin user
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-    # Try with GCP (unsupported)
-    cloud_provider = "gcp"
-
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts/generate-connection-url"
-
-    request_payload = {
-        "account_config": {"regions": ["us-central1"]},
-        "agent_config": {
-            "region": "us-central1",
-            "ingestion_url": "https://ingest.test.signoz.cloud",
-            "ingestion_key": "test-ingestion-key-123456",
-            "signoz_api_url": "https://test-deployment.test.signoz.cloud",
-            "signoz_api_key": "test-api-key-789",
-        },
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=request_payload,
-        timeout=10,
-    )
-
-    # Should return Bad Request for unsupported provider
-    assert (
-        response.status_code == HTTPStatus.BAD_REQUEST
-    ), f"Expected 400 for unsupported provider, got {response.status_code}"
-
-    response_data = response.json()
-    assert "error" in response_data, "Response should contain 'error' field"
-    assert (
-        "unsupported cloud provider" in response_data["error"].lower()
-    ), "Error message should indicate unsupported provider"

tests/integration/src/cloudintegrations/03_accounts.py

@@ -1,316 +0,0 @@
-from http import HTTPStatus
-from typing import Callable
-import uuid
-
-import pytest
-import requests
-
-from fixtures import types
-from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.logger import setup_logger
-from fixtures.cloudintegrations import (
-    create_cloud_integration_account,
-)
-from fixtures.cloudintegrationsutils import simulate_agent_checkin
-
-logger = setup_logger(__name__)
-
-
-def test_list_connected_accounts_empty(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test listing connected accounts when there are none."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-    cloud_provider = "aws"
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "accounts" in data, "Response should contain 'accounts' field"
-    assert isinstance(data["accounts"], list), "Accounts should be a list"
-    assert len(data["accounts"]) == 0, "Accounts list should be empty when no accounts are connected"
-
-
-
-def test_list_connected_accounts_with_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test listing connected accounts after creating one."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    # Simulate agent check-in to mark as connected
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # List accounts
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts"
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "accounts" in data, "Response should contain 'accounts' field"
-    assert isinstance(data["accounts"], list), "Accounts should be a list"
-
-    # Find our account in the list (there may be leftover accounts from previous test runs)
-    account = next((a for a in data["accounts"] if a["id"] == account_id), None)
-    assert account is not None, f"Account {account_id} should be found in list"
-    assert account["id"] == account_id, "Account ID should match"
-    assert "config" in account, "Account should have config field"
-    assert "status" in account, "Account should have status field"
-
-
-
-def test_get_account_status(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test getting the status of a specific account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-    # Create a test account (no check-in needed for status check)
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    # Get account status
-    endpoint = (
-        f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{account_id}/status"
-    )
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "id" in data, "Response should contain 'id' field"
-    assert data["id"] == account_id, "Account ID should match"
-    assert "status" in data, "Response should contain 'status' field"
-    assert "integration" in data["status"], "Status should contain 'integration' field"
-
-
-def test_get_account_status_not_found(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test getting status for a non-existent account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-    cloud_provider = "aws"
-    fake_account_id = "00000000-0000-0000-0000-000000000000"
-
-    endpoint = (
-        f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{fake_account_id}/status"
-    )
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.NOT_FOUND
-    ), f"Expected 404, got {response.status_code}"
-
-
-def test_update_account_config(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test updating account configuration."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    # Simulate agent check-in to mark as connected
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Update account configuration
-    endpoint = (
-        f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{account_id}/config"
-    )
-
-    updated_config = {
-        "config": {"regions": ["us-east-1", "us-west-2", "eu-west-1"]}
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=updated_config,
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "id" in data, "Response should contain 'id' field"
-    assert data["id"] == account_id, "Account ID should match"
-
-    # Verify the update by listing accounts
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-
-    list_response_data = list_response.json()
-    list_data = list_response_data.get("data", list_response_data)
-    account = next((a for a in list_data["accounts"] if a["id"] == account_id), None)
-    assert account is not None, "Account should be found in list"
-    assert "config" in account, "Account should have config"
-    assert "regions" in account["config"], "Config should have regions"
-    assert len(account["config"]["regions"]) == 3, "Should have 3 regions"
-    assert set(account["config"]["regions"]) == {
-        "us-east-1",
-        "us-west-2",
-        "eu-west-1",
-    }, "Regions should match updated config"
-
-
-
-def test_disconnect_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test disconnecting an account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    # Simulate agent check-in to mark as connected
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Disconnect the account
-    endpoint = (
-        f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{account_id}/disconnect"
-    )
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    # Verify our specific account is no longer in the connected list
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_response_data = list_response.json()
-    list_data = list_response_data.get("data", list_response_data)
-
-    # Check that our specific account is not in the list
-    disconnected_account = next(
-        (a for a in list_data["accounts"] if a["id"] == account_id), None
-    )
-    assert disconnected_account is None, f"Account {account_id} should be removed from connected accounts"
-
-
-
-def test_disconnect_account_not_found(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test disconnecting a non-existent account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "aws"
-    fake_account_id = "00000000-0000-0000-0000-000000000000"
-
-    endpoint = (
-        f"/api/v1/cloud-integrations/{cloud_provider}/accounts/{fake_account_id}/disconnect"
-    )
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.NOT_FOUND
-    ), f"Expected 404, got {response.status_code}"
-
-
-
-def test_list_accounts_unsupported_provider(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test listing accounts for an unsupported cloud provider."""
-
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "gcp"  # Unsupported provider
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/accounts"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.BAD_REQUEST
-    ), f"Expected 400, got {response.status_code}"

tests/integration/src/cloudintegrations/04_services.py

@@ -1,468 +0,0 @@
-from http import HTTPStatus
-from typing import Callable
-import uuid
-
-import pytest
-import requests
-
-from fixtures import types
-from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.logger import setup_logger
-from fixtures.cloudintegrations import (
-    create_cloud_integration_account,
-)
-from fixtures.cloudintegrationsutils import simulate_agent_checkin
-
-logger = setup_logger(__name__)
-
-
-def test_list_services_without_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test listing available services without specifying an account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "aws"
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "services" in data, "Response should contain 'services' field"
-    assert isinstance(data["services"], list), "Services should be a list"
-    assert len(data["services"]) > 0, "Should have at least one service available"
-
-    # Verify service structure
-    service = data["services"][0]
-    assert "id" in service, "Service should have 'id' field"
-    assert "title" in service, "Service should have 'title' field"
-    assert "icon" in service, "Service should have 'icon' field"
-
-
-
-def test_list_services_with_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test listing services for a specific connected account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account and do check-in
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # List services for the account
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services?cloud_account_id={cloud_account_id}"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-    assert "services" in data, "Response should contain 'services' field"
-    assert isinstance(data["services"], list), "Services should be a list"
-    assert len(data["services"]) > 0, "Should have at least one service available"
-
-    # Services should include config field (may be null if not configured)
-    service = data["services"][0]
-    assert "id" in service, "Service should have 'id' field"
-    assert "title" in service, "Service should have 'title' field"
-    assert "icon" in service, "Service should have 'icon' field"
-
-
-
-def test_get_service_details_without_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test getting service details without specifying an account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "aws"
-    # First get the list of services to get a valid service ID
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_data = list_response.json().get("data", list_response.json())
-    assert len(list_data["services"]) > 0, "Should have at least one service"
-    service_id = list_data["services"][0]["id"]
-
-    # Get service details
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{service_id}"
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-
-    # Verify service details structure
-    assert "id" in data, "Service details should have 'id' field"
-    assert data["id"] == service_id, "Service ID should match requested ID"
-    assert "title" in data, "Service details should have 'title' field"
-    assert "overview" in data, "Service details should have 'overview' field"
-    # assert assets to had list of dashboards
-    assert "assets" in data, "Service details should have 'assets' field"
-    assert isinstance(data["assets"], dict), "Assets should be a dictionary"
-
-
-
-def test_get_service_details_with_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test getting service details for a specific connected account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account and do check-in
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Get list of services first
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_data = list_response.json().get("data", list_response.json())
-    assert len(list_data["services"]) > 0, "Should have at least one service"
-    service_id = list_data["services"][0]["id"]
-
-    # Get service details with account
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{service_id}?cloud_account_id={cloud_account_id}"
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-
-    # Verify service details structure
-    assert "id" in data, "Service details should have 'id' field"
-    assert data["id"] == service_id, "Service ID should match requested ID"
-    assert "title" in data, "Service details should have 'title' field"
-    assert "overview" in data, "Service details should have 'overview' field"
-    assert "assets" in data, "Service details should have 'assets' field"
-    assert "config" in data, "Service details should have 'config' field"
-    assert "status" in data, "Config should have 'status' field"
-
-
-
-def test_get_service_details_invalid_service(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test getting details for a non-existent service."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "aws"
-    fake_service_id = "non-existent-service"
-
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{fake_service_id}"
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.NOT_FOUND
-    ), f"Expected 404, got {response.status_code}"
-
-
-
-def test_list_services_unsupported_provider(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test listing services for an unsupported cloud provider."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "gcp"  # Unsupported provider
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.BAD_REQUEST
-    ), f"Expected 400, got {response.status_code}"
-
-
-
-def test_update_service_config(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test updating service configuration for a connected account."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account and do check-in
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Get list of services to pick a valid service ID
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_data = list_response.json().get("data", list_response.json())
-    assert len(list_data["services"]) > 0, "Should have at least one service"
-    service_id = list_data["services"][0]["id"]
-
-    # Update service configuration
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{service_id}/config"
-
-    config_payload = {
-        "cloud_account_id": cloud_account_id,
-        "config": {
-            "metrics": {"enabled": True},
-            "logs": {"enabled": True},
-        },
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=config_payload,
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {response.status_code}"
-
-    response_data = response.json()
-    data = response_data.get("data", response_data)
-
-    # Verify response structure
-    assert "id" in data, "Response should contain 'id' field"
-    assert data["id"] == service_id, "Service ID should match"
-    assert "config" in data, "Response should contain 'config' field"
-    assert "metrics" in data["config"], "Config should contain 'metrics' field"
-    assert "logs" in data["config"], "Config should contain 'logs' field"
-
-
-
-def test_update_service_config_without_account(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-) -> None:
-    """Test updating service config without a connected account should fail."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    cloud_provider = "aws"
-
-    # Get a valid service ID
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_data = list_response.json().get("data", list_response.json())
-    service_id = list_data["services"][0]["id"]
-
-    # Try to update config with non-existent account
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{service_id}/config"
-
-    fake_cloud_account_id = str(uuid.uuid4())
-    config_payload = {
-        "cloud_account_id": fake_cloud_account_id,
-        "config": {
-            "metrics": {"enabled": True},
-        },
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=config_payload,
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.INTERNAL_SERVER_ERROR
-    ), f"Expected 500 for non-existent account, got {response.status_code}"
-
-
-
-def test_update_service_config_invalid_service(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test updating config for a non-existent service should fail."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account and do check-in
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Try to update config for invalid service
-    fake_service_id = "non-existent-service"
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{fake_service_id}/config"
-
-    config_payload = {
-        "cloud_account_id": cloud_account_id,
-        "config": {
-            "metrics": {"enabled": True},
-        },
-    }
-
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=config_payload,
-        timeout=10,
-    )
-
-    assert (
-        response.status_code == HTTPStatus.NOT_FOUND
-    ), f"Expected 404 for invalid service, got {response.status_code}"
-
-
-
-def test_update_service_config_disable_service(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Test disabling a service by updating config with enabled=false."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    # Create a test account and do check-in
-    cloud_provider = "aws"
-    account_data = create_cloud_integration_account(admin_token, cloud_provider)
-    account_id = account_data["account_id"]
-
-    cloud_account_id = str(uuid.uuid4())
-    simulate_agent_checkin(signoz, admin_token, cloud_provider, account_id, cloud_account_id)
-
-    # Get a valid service
-    list_endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services"
-    list_response = requests.get(
-        signoz.self.host_configs["8080"].get(list_endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    list_data = list_response.json().get("data", list_response.json())
-    service_id = list_data["services"][0]["id"]
-
-    # First enable the service
-    endpoint = f"/api/v1/cloud-integrations/{cloud_provider}/services/{service_id}/config"
-
-    enable_payload = {
-        "cloud_account_id": cloud_account_id,
-        "config": {
-            "metrics": {"enabled": True},
-        },
-    }
-
-    enable_response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=enable_payload,
-        timeout=10,
-    )
-
-    assert enable_response.status_code == HTTPStatus.OK, "Failed to enable service"
-
-    # Now disable the service
-    disable_payload = {
-        "cloud_account_id": cloud_account_id,
-        "config": {
-            "metrics": {"enabled": False},
-            "logs": {"enabled": False},
-        },
-    }
-
-    disable_response = requests.post(
-        signoz.self.host_configs["8080"].get(endpoint),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        json=disable_payload,
-        timeout=10,
-    )
-
-    assert (
-        disable_response.status_code == HTTPStatus.OK
-    ), f"Expected 200, got {disable_response.status_code}"
-
-    response_data = disable_response.json()
-    data = response_data.get("data", response_data)
-
-    # Verify service is disabled
-    assert data["config"]["metrics"]["enabled"] is False, "Metrics should be disabled"
-    assert data["config"]["logs"]["enabled"] is False, "Logs should be disabled"