refactor(planned-maintenance): remove time bounds from recurrence (#11500)

* feat(alertmanager): migrate recurrence bounds to schedule level

Promote startTime/endTime from a planned maintenance's nested recurrence
up to the schedule level. For recurring maintenances the recurrence
bounds were the source of truth; the recurrence struct loses these
fields in the next step, so the values are moved while they can still be
read. The migration operates on raw JSON for that reason.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* refactor(alertmanager): drop start/end bounds from Recurrence

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* refactor: code cleanup

* fix: upcoming check for recurring maintenances

* fix: remove recurrence.startTime/endTime usages

* fix: use embedded timezone in start/end times

Accept times in any timezone, but always convert them to the selected
timezone. The conversion is required to correctly handle the recurring
maintenances for timezones where DST is involved.

* refactor: remove redundant code

* fix: make startTime a required field

* test: cover fixed schedule active window in IsActive

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* test: cover recurring schedule active window in IsActive

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* chore: add justification for unreachable code

* fix: don't let one corrupt maintenance abort the migration

* fix: don't let one corrupt maintenance break the list

ListPlannedMaintenance now reads the schedule as raw text and parses each
row individually, skipping and logging the bad ones so the rest survive.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix: tests to use UTC instead of utc

* fix: return proper errors from schedule.Unmarshal

* fix: copy schedule type to migration

* chore: move tz conversion to checkX methods

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

docs/api/openapi.yml

@@ -409,10 +409,6 @@ components:
       properties:
         duration:
           type: string
-        endTime:
-          format: date-time
-          nullable: true
-          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -420,11 +416,7 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
-        startTime:
-          format: date-time
-          type: string
       required:
-      - startTime
       - duration
       - repeatType
       type: object
@@ -458,6 +450,7 @@ components:
           type: string
       required:
       - timezone
+      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -413,21 +413,11 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -441,7 +431,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime?: string;
+	startTime: string;
 	/**
 	 * @type string
 	 */

frontend/src/constants/query.ts

@@ -1,6 +1,5 @@
 export enum QueryParams {
 	interval = 'interval',
-	editPanelId = 'editPanelId',
 	startTime = 'startTime',
 	endTime = 'endTime',
 	service = 'service',

frontend/src/constants/reactQueryKeys.ts

@@ -36,6 +36,7 @@ export const REACT_QUERY_KEY = {
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
+	GET_TRACE_V3_FLAMEGRAPH: 'GET_TRACE_V3_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
 	GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -1,8 +1,7 @@
 .billingContainer {
-	margin-bottom: var(--spacing-20);
 	padding-top: 36px;
 	width: 90%;
-	margin: 0 auto;
+	margin: 0 auto var(--spacing-20);
 
 	.pageHeader {
 		margin-bottom: var(--spacing-8);

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -1,6 +1,6 @@
 .license-key-callout {
 	margin: var(--spacing-4) var(--spacing-6);
-	width: auto;
+	width: auto !important;
 
 	.license-key-callout__description {
 		display: flex;

frontend/src/container/GeneralSettings/__tests__/index.test.tsx

@@ -0,0 +1,41 @@
+import { useQueries } from 'react-query';
+import { render, screen } from 'tests/test-utils';
+
+import GeneralSettings from '../index';
+
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQueries: jest.fn(),
+}));
+
+const baseQueryResult = {
+	isError: false,
+	isLoading: false,
+	isFetching: false,
+	isSuccess: true,
+	data: undefined,
+	error: null,
+	refetch: jest.fn(),
+};
+
+describe('GeneralSettings index', () => {
+	it('renders fallback message when logs query fails with a non-APIError', () => {
+		(useQueries as jest.Mock).mockReturnValue([
+			{ ...baseQueryResult },
+			{ ...baseQueryResult },
+			{
+				...baseQueryResult,
+				isError: true,
+				isSuccess: false,
+				error: new TypeError(
+					"Cannot read properties of undefined (reading 'code')",
+				),
+			},
+			{ ...baseQueryResult },
+		]);
+
+		render(<GeneralSettings />);
+
+		expect(screen.getByText('something_went_wrong')).toBeInTheDocument();
+	});
+});

frontend/src/container/GeneralSettings/index.tsx

@@ -76,7 +76,9 @@ function GeneralSettings(): JSX.Element {
 	if (getRetentionPeriodLogsApiResponse.isError || getDisksResponse.isError) {
 		return (
 			<Typography>
-				{(getRetentionPeriodLogsApiResponse.error as APIError).getErrorMessage() ||
+				{(getRetentionPeriodLogsApiResponse.error instanceof APIError
+					? getRetentionPeriodLogsApiResponse.error.getErrorMessage()
+					: undefined) ||
 					getDisksResponse.data?.error ||
 					t('something_went_wrong')}
 			</Typography>

frontend/src/container/GridTableComponent/__tests__/utils.test.tsx

@@ -2,7 +2,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
 	createColumnsAndDataSource,
-	evaluateThresholdWithConvertedValue,
 	getQueryLegend,
 	sortFunction,
 } from '../utils';
@@ -226,30 +225,3 @@ describe('Table Panel utils with QB v5 aggregations', () => {
 		).toBe(0);
 	});
 });
-
-// No units passed, so `convertUnit` is a no-op and the comparison runs against
-// the raw value — exercising `evaluateCondition`'s operator switch directly.
-describe('evaluateThresholdWithConvertedValue operators', () => {
-	it('handles ordering operators', () => {
-		expect(evaluateThresholdWithConvertedValue(5, 3, '>')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(2, 3, '>')).toBe(false);
-		expect(evaluateThresholdWithConvertedValue(2, 3, '<')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(3, 3, '>=')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(3, 3, '<=')).toBe(true);
-	});
-
-	it('treats = and == as equality', () => {
-		expect(evaluateThresholdWithConvertedValue(3, 3, '=')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(3, 3, '==')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(4, 3, '=')).toBe(false);
-	});
-
-	it('handles != as inequality', () => {
-		expect(evaluateThresholdWithConvertedValue(4, 3, '!=')).toBe(true);
-		expect(evaluateThresholdWithConvertedValue(3, 3, '!=')).toBe(false);
-	});
-
-	it('returns false for an unknown operator', () => {
-		expect(evaluateThresholdWithConvertedValue(3, 3, '~')).toBe(false);
-	});
-});

frontend/src/container/GridTableComponent/utils.ts

@@ -29,11 +29,8 @@ function evaluateCondition(
 			return value >= thresholdValue;
 		case '<=':
 			return value <= thresholdValue;
-		case '=':
 		case '==':
 			return value === thresholdValue;
-		case '!=':
-			return value !== thresholdValue;
 		default:
 			return false;
 	}

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -796,7 +796,7 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
@@ -839,7 +839,7 @@ export const getClusterMetricsQueryPayload = (
 							reduceTo: ReduceOperators.LAST,
 							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [],

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -40,6 +40,7 @@ import { K8S_ENTITY_EVENTS_EXPRESSION_KEY, useEntityEvents } from './hooks';
 import { getEntityEventsQueryPayload, isEventsKeyNotFoundError } from './utils';
 
 import styles from './EntityEvents.module.scss';
+import { useTimezone } from 'providers/Timezone';
 
 interface EventDataType {
 	key: string;
@@ -167,17 +168,25 @@ function EntityEventsContent({
 		[events],
 	);
 
-	const columns: TableColumnsType<EventDataType> = [
-		{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
-		{
-			title: 'Timestamp',
-			dataIndex: 'timestamp',
-			width: 240,
-			ellipsis: true,
-			key: 'timestamp',
-		},
-		{ title: 'Body', dataIndex: 'body', key: 'body' },
-	];
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const columns: TableColumnsType<EventDataType> = useMemo(
+		() => [
+			{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
+			{
+				title: 'Timestamp',
+				dataIndex: 'timestamp',
+				width: 240,
+				ellipsis: true,
+				key: 'timestamp',
+				render: (value: string | number): string =>
+					formatTimezoneAdjustedTimestamp(
+						typeof value === 'string' ? value : value / 1e6,
+					),
+			},
+			{ title: 'Body', dataIndex: 'body', key: 'body' },
+		],
+		[formatTimezoneAdjustedTimestamp],
+	);
 
 	const handleExpandRowIcon = ({
 		expanded,

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -41,6 +41,7 @@ import { getTraceListColumns } from './traceListColumns';
 import { getEntityTracesQueryPayload } from './utils';
 
 import styles from './EntityTraces.module.scss';
+import { useTimezone } from 'providers/Timezone';
 
 interface Props {
 	timeRange: {
@@ -136,7 +137,11 @@ function EntityTracesContent({
 		[timeRange.startTime, timeRange.endTime, userExpression],
 	);
 
-	const traceListColumns = getTraceListColumns(selectedEntityTracesColumns);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const traceListColumns = getTraceListColumns(
+		selectedEntityTracesColumns,
+		formatTimezoneAdjustedTimestamp,
+	);
 
 	const isKeyNotFound = isKeyNotFoundError(error);
 	const isDataEmpty =

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,15 +1,14 @@
 import { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
 	BlockLink,
 	getTraceLink,
 } from 'container/TracesExplorer/ListView/utils';
-import dayjs from 'dayjs';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { FormatTimezoneAdjustedTimestamp } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 
 const keyToLabelMap: Record<string, string> = {
 	timestamp: 'Timestamp',
@@ -59,6 +58,7 @@ const getValueForKey = (data: Record<string, any>, key: string): any => {
 
 export const getTraceListColumns = (
 	selectedColumns: BaseAutocompleteData[],
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp,
 ): ColumnsType<RowData> => {
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map(({ dataType, key, type }) => ({
@@ -73,8 +73,8 @@ export const getTraceListColumns = (
 				if (primaryKey === 'timestamp') {
 					const date =
 						typeof value === 'string'
-							? dayjs(value).format(DATE_TIME_FORMATS.ISO_DATETIME_MS)
-							: dayjs(value / 1e6).format(DATE_TIME_FORMATS.ISO_DATETIME_MS);
+							? formatTimezoneAdjustedTimestamp(value)
+							: formatTimezoneAdjustedTimestamp(value / 1e6);
 
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>

frontend/src/container/InfraMonitoringK8s/Pods/constants.ts

@@ -1366,7 +1366,7 @@ export const getPodMetricsQueryPayload = (
 							orderBy: [],
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'avg',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
 							timeAggregation: 'avg',
 						},

frontend/src/container/InfraMonitoringK8s/Volumes/table.config.tsx

@@ -86,9 +86,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'capacity',
-		header: 'Volume Capacity',
+		header: 'Capacity',
 		accessorFn: (row): number => row.volumeCapacity,
-		width: { min: 220 },
+		width: { min: 140 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const capacity = value as number;
@@ -105,9 +105,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'usage',
-		header: 'Volume Utilization',
+		header: 'Used',
 		accessorFn: (row): number => row.volumeUsage,
-		width: { min: 220 },
+		width: { min: 140 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const usage = value as number;
@@ -124,9 +124,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'available',
-		header: 'Volume Available',
+		header: 'Available',
 		accessorFn: (row): number => row.volumeAvailable,
-		width: { min: 220 },
+		width: { min: 140 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const available = value as number;
@@ -141,4 +141,61 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 			);
 		},
 	},
+	{
+		id: 'inodes',
+		header: 'Inodes',
+		accessorFn: (row): number => row.volumeInodes,
+		width: { min: 140 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const inodes = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={inodes}
+					entity={InfraMonitoringEntity.VOLUMES}
+					attribute="inodes metric"
+				>
+					<TanStackTable.Text>{inodes}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'inodesUsed',
+		header: 'Inodes Used',
+		accessorFn: (row): number => row.volumeInodesUsed,
+		width: { min: 160 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const inodesUsed = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={inodesUsed}
+					entity={InfraMonitoringEntity.VOLUMES}
+					attribute="inodes used metric"
+				>
+					<TanStackTable.Text>{inodesUsed}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'inodesFree',
+		header: 'Inodes Free',
+		accessorFn: (row): number => row.volumeInodesFree,
+		width: { min: 160 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const inodesFree = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={inodesFree}
+					entity={InfraMonitoringEntity.VOLUMES}
+					attribute="inodes free metric"
+				>
+					<TanStackTable.Text>{inodesFree}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
 ];

frontend/src/container/NewWidget/RightContainer/Threshold/types.ts

@@ -2,7 +2,7 @@ import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ColumnUnit } from 'types/api/dashboard/getAll';
 
-export type ThresholdOperators = '>' | '<' | '>=' | '<=' | '=' | '!=';
+export type ThresholdOperators = '>' | '<' | '>=' | '<=' | '=';
 
 export type ThresholdProps = {
 	index: string;

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -6,8 +6,6 @@ export const operatorOptions: DefaultOptionType[] = [
 	{ value: '>=', label: '>=' },
 	{ value: '<', label: '<' },
 	{ value: '<=', label: '<=' },
-	{ value: '=', label: '=' },
-	{ value: '!=', label: '≠' },
 ];
 
 export const showAsOptions: DefaultOptionType[] = [

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -151,6 +151,11 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
+			const { startTime, timezone } = values;
+			if (!startTime || !timezone) {
+				// unreachable: required fields should always be present on submitting.
+				return;
+			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -161,9 +166,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: values.startTime?.format(),
+					startTime: startTime.format(),
 					endTime: values.endTime?.format(),
-					timezone: values.timezone!,
+					timezone,
 					recurrence: values.recurrence,
 				},
 			};
@@ -200,25 +205,17 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const { recurrence } = values;
-		const recurrenceData =
-			!recurrence ||
-			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
-				? undefined
-				: {
-						duration: recurrence.duration
-							? `${recurrence.duration}${durationUnit}`
-							: '',
-						startTime: values.startTime!.format(),
-						endTime: values.endTime?.format(),
-						repeatOn: recurrence.repeatOn,
-						repeatType: recurrence.repeatType,
-					};
+		const rec = values.recurrence;
+		const recurrence =
+			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
+				? {
+						duration: `${rec.duration}${durationUnit}`,
+						repeatOn: rec.repeatOn,
+						repeatType: rec.repeatType,
+					}
+				: undefined;
 
-		await saveHandler({
-			...values,
-			recurrence: recurrenceData,
-		});
+		await saveHandler({ ...values, recurrence });
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -275,9 +272,6 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
-		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
-		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
-
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -285,8 +279,12 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
-			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
+			startTime: schedule?.startTime
+				? dayjs(schedule.startTime).tz(schedule.timezone)
+				: null,
+			endTime: schedule?.endTime
+				? dayjs(schedule.endTime).tz(schedule.timezone)
+				: null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)
@@ -297,7 +295,7 @@ export function PlannedDowntimeForm(
 			timezone: schedule?.timezone as string,
 			scope: initialValues.scope || '',
 		};
-	}, [initialValues, alertOptions]);
+	}, [initialValues, isEditMode, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
@@ -341,7 +339,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType]);
+	}, [formData]);
 
 	return (
 		<Modal

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,7 +142,6 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
-	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -193,10 +192,7 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems(
-				'Repeats',
-				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
-			)}
+			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	AlertmanagertypesScheduleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,14 +66,17 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	recurrence?: AlertmanagertypesRecurrenceDTO | null,
-	timezone?: string,
+	schedule?: AlertmanagertypesScheduleDTO | null,
 ): string => {
+	if (!schedule) {
+		return 'No';
+	}
+	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
+	const { duration, repeatOn, repeatType } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -95,7 +98,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: undefined,
+			startTime: '',
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime,
+	startTime: schedule?.startTime ?? '',
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/container/SideNav/SideNav.styles.scss

@@ -1135,17 +1135,9 @@
 
 .settings-dropdown,
 .help-support-dropdown {
-	.ant-dropdown-menu-item {
-		min-height: 32px;
-
-		.ant-dropdown-menu-title-content {
-			color: var(--l1-foreground) !important;
-		}
-
-		.user-settings-dropdown-logout-section {
-			color: var(--danger-background);
-			pointer-events: auto;
-		}
+	.user-settings-dropdown-logout-section {
+		color: var(--danger-background);
+		pointer-events: auto;
 	}
 }
 

frontend/src/hooks/trace/useGetTraceFlamegraphV3.tsx

@@ -0,0 +1,42 @@
+import { getFlamegraph } from 'api/generated/services/tracedetail';
+import {
+	SpantypesGettableFlamegraphTraceDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export interface GetTraceFlamegraphV3Props {
+	traceId: string;
+	selectedSpanId?: string;
+	selectFields?: TelemetryFieldKey[];
+	enabled?: boolean;
+}
+
+const useGetTraceFlamegraphV3 = (
+	props: GetTraceFlamegraphV3Props,
+): UseQueryResult<SpantypesGettableFlamegraphTraceDTO, unknown> =>
+	useQuery({
+		queryFn: () =>
+			getFlamegraph(
+				{ traceID: props.traceId },
+				{
+					selectedSpanId: props.selectedSpanId,
+					// v5 TelemetryFieldKey and the generated DTO are runtime-identical; only
+					// the literal-union vs enum nominal types differ
+					selectFields: props.selectFields as TelemetrytypesTelemetryFieldKeyDTO[],
+				},
+			).then((res) => res.data),
+		queryKey: [
+			REACT_QUERY_KEY.GET_TRACE_V3_FLAMEGRAPH,
+			props.traceId,
+			props.selectedSpanId,
+			props.selectFields,
+		],
+		enabled: props.enabled,
+		keepPreviousData: true,
+		refetchOnWindowFocus: false,
+	});
+
+export default useGetTraceFlamegraphV3;

frontend/src/hooks/useTimezoneFormatter/useTimezoneFormatter.ts

@@ -22,11 +22,13 @@ interface CacheEntry {
 const CACHE_SIZE_LIMIT = 1000;
 const CACHE_CLEANUP_PERCENTAGE = 0.5; // Remove 50% when limit is reached
 
+export type FormatTimezoneAdjustedTimestamp = (
+	input: TimestampInput,
+	format?: string,
+) => string;
+
 function useTimezoneFormatter({ userTimezone }: { userTimezone: Timezone }): {
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string;
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp;
 } {
 	// Initialize cache using useMemo to persist between renders
 	const cache = useMemo(() => new Map<string, CacheEntry>(), []);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/DynamicVariableFields.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- searchable async select: no @signozhq/ui equivalent
+import { Select } from 'antd';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
+import useDebounce from 'hooks/useDebounce';
+
+import { TELEMETRY_SIGNALS, type TelemetrySignal } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface DynamicVariableFieldsProps {
+	attribute: string;
+	signal: TelemetrySignal;
+	onChange: (patch: {
+		dynamicAttribute?: string;
+		dynamicSignal?: TelemetrySignal;
+	}) => void;
+	onPreview: (values: (string | number)[]) => void;
+}
+
+/** Dynamic-variable body: telemetry signal + field, whose live values preview. */
+function DynamicVariableFields({
+	attribute,
+	signal,
+	onChange,
+	onPreview,
+}: DynamicVariableFieldsProps): JSX.Element {
+	const [search, setSearch] = useState('');
+	const debouncedSearch = useDebounce(search, 300);
+
+	const { data: keyData, isLoading } = useGetFieldKeys({
+		signal,
+		name: debouncedSearch || undefined,
+	});
+
+	// `keys` is a Record keyed BY field name; the field names are the map keys.
+	// When the API reports the list is `complete`, search filters locally.
+	const isComplete = keyData?.data?.complete === true;
+	const options = useMemo(
+		() =>
+			Object.keys(keyData?.data?.keys ?? {}).map((name) => ({
+				label: name,
+				value: name,
+			})),
+		[keyData],
+	);
+
+	const { data: valueData } = useGetFieldValues({
+		signal,
+		name: attribute,
+		enabled: !!attribute,
+	});
+
+	useEffect(() => {
+		const payload = valueData?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		onPreview(values);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [valueData]);
+
+	return (
+		<>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Source</Typography.Text>
+				</div>
+				<SelectSimple
+					className={styles.sortSelect}
+					value={signal}
+					items={TELEMETRY_SIGNALS.map((s) => ({ label: s, value: s }))}
+					onChange={(value): void =>
+						onChange({ dynamicSignal: value as TelemetrySignal })
+					}
+					testId="variable-signal-select"
+				/>
+			</div>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Attribute</Typography.Text>
+				</div>
+				<Select
+					className={styles.searchSelect}
+					showSearch
+					value={attribute || undefined}
+					placeholder="Select a telemetry field"
+					loading={isLoading}
+					filterOption={isComplete}
+					onSearch={setSearch}
+					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
+					options={options}
+					notFoundContent={isLoading ? 'Loading…' : 'No fields found'}
+					data-testid="variable-field-select"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default DynamicVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/QueryVariableFields.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import Editor from 'components/Editor';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import type { VariableSort } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface QueryVariableFieldsProps {
+	queryValue: string;
+	sort: VariableSort;
+	onChange: (queryValue: string) => void;
+	onPreview: (values: (string | number)[]) => void;
+	onError: (message: string | null) => void;
+}
+
+/** Query-variable body: SQL editor + "Test Run Query" that previews the values. */
+function QueryVariableFields({
+	queryValue,
+	sort,
+	onChange,
+	onPreview,
+	onError,
+}: QueryVariableFieldsProps): JSX.Element {
+	const [isRunning, setIsRunning] = useState(false);
+
+	const runTest = async (): Promise<void> => {
+		setIsRunning(true);
+		onError(null);
+		try {
+			const res = await dashboardVariablesQuery({
+				query: queryValue,
+				variables: {},
+			});
+			if (res.statusCode === 200 && res.payload) {
+				onPreview(
+					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
+				);
+			} else {
+				onError(res.error || 'Failed to run query');
+				onPreview([]);
+			}
+		} catch (err) {
+			onError((err as Error).message || 'Failed to run query');
+			onPreview([]);
+		} finally {
+			setIsRunning(false);
+		}
+	};
+
+	return (
+		<div className={styles.queryContainer}>
+			<div className={styles.labelContainer}>
+				<Typography.Text className={styles.label}>Query</Typography.Text>
+			</div>
+			<div className={styles.editorWrap}>
+				<Editor
+					language="sql"
+					value={queryValue}
+					onChange={(value): void => onChange(value)}
+					height="240px"
+					options={{
+						fontSize: 13,
+						wordWrap: 'on',
+						lineNumbers: 'off',
+						glyphMargin: false,
+						folding: false,
+						lineDecorationsWidth: 0,
+						lineNumbersMinChars: 0,
+						minimap: { enabled: false },
+					}}
+				/>
+			</div>
+			<div className={styles.testRow}>
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					loading={isRunning}
+					disabled={!queryValue}
+					onClick={runTest}
+					testId="variable-test-run"
+				>
+					Test Run Query
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default QueryVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -0,0 +1,310 @@
+/* Faithful reproduction of the V1 VariableItem layout, scoped as a module and
+   built on @signozhq components where possible. antd is retained only for the
+   monaco Editor, multiline TextArea, Collapse, and searchable Selects. */
+
+.container {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.allVariables {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.allVariablesBtn {
+	--button-height: 24px;
+	--button-padding: 0;
+	color: var(--muted-foreground);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 12px 16px 20px;
+}
+
+/* VariableItemRow */
+.row {
+	display: flex;
+	gap: 1rem;
+	margin-bottom: 0;
+}
+
+/* LabelContainer */
+.labelContainer {
+	width: 200px;
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.column {
+	flex-direction: column;
+	gap: 8px;
+}
+
+.input,
+.textarea,
+.defaultInput {
+	padding: 6px 6px 6px 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l3-background);
+}
+
+.input,
+.textarea {
+	width: 100%;
+}
+
+.defaultInput {
+	width: 342px;
+}
+
+.errorText {
+	font-size: 12px;
+	color: var(--bg-amber-500);
+}
+
+/* Variable type segmented group */
+.typeSection {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.typeLabelContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.typeBtnGroup {
+	display: grid;
+	grid-template-columns: repeat(4, max-content);
+	height: 32px;
+	flex-shrink: 0;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l2-background);
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.typeBtn {
+	--button-height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	min-width: 114px;
+	border-radius: 0;
+	color: var(--l2-foreground);
+
+	& + & {
+		border-left: 1px solid var(--l1-border);
+	}
+}
+
+.typeBtnSelected {
+	background: var(--l1-border);
+	color: var(--l1-foreground);
+}
+
+.betaTag {
+	margin-left: 4px;
+}
+
+/* Query */
+.queryContainer {
+	display: flex;
+	flex-flow: column wrap;
+	gap: 1rem;
+	min-width: 0;
+	margin-bottom: 0;
+}
+
+.editorWrap {
+	height: 240px;
+	overflow: hidden;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.testRow {
+	display: flex;
+	margin-top: 8px;
+}
+
+/* Custom — antd Collapse */
+.customSection {
+	margin-bottom: 0;
+}
+
+.customSection :global(.custom-collapse) {
+	width: 100%;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px 3px 0 0;
+
+	:global(.ant-collapse-item) {
+		border-bottom: none;
+	}
+
+	:global(.ant-collapse-header) {
+		align-items: center;
+		gap: 8px;
+		height: 38px;
+		padding: 12px;
+		background: var(--l3-background);
+		border-radius: 3px 3px 0 0;
+	}
+
+	:global(.ant-collapse-header-text) {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 1px 2px;
+		color: var(--bg-robin-400);
+		font-family: 'Space Mono';
+		font-size: 14px;
+		line-height: 18px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0;
+	}
+
+	:global(.comma-input) {
+		height: 109px;
+		border: none;
+	}
+}
+
+/* Textbox */
+.textboxSection {
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+/* Preview strip */
+.previewSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-height: 88px;
+	margin-bottom: 0;
+	padding-bottom: 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.previewLabel {
+	align-self: flex-start;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 8px;
+	color: var(--bg-robin-400);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	line-height: 18px;
+	border-radius: 3px 0 2px;
+	background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+}
+
+.previewValues {
+	display: flex;
+	flex-flow: wrap;
+	gap: 8px;
+	padding: 4.5px 11px;
+	overflow-y: auto;
+}
+
+.previewValues [data-slot='badge'] {
+	height: 30px;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.previewError {
+	color: var(--bg-amber-500);
+}
+
+/* Sort / multi / all / default rows */
+.sortSection,
+.multiSection,
+.allOptionSection,
+.dynamicSection {
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+.sortSection {
+	align-items: center;
+}
+
+.rowLabel {
+	width: 339px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.sortSelect {
+	width: 192px;
+}
+
+.defaultValueSection {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 1rem;
+	align-items: center;
+	margin-bottom: 0;
+}
+
+.defaultValueSection .label {
+	display: block;
+	margin-bottom: 2px;
+}
+
+.defaultValueDesc {
+	display: block;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.searchSelect {
+	width: 100%;
+}
+
+/* Footer */
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
+	margin-top: 12px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -0,0 +1,351 @@
+import { useEffect, useState } from 'react';
+import { ArrowLeft, Check, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse/searchable Select: no @signozhq/ui equivalent
+import { Collapse, Input as AntdInput, Select } from 'antd';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import {
+	VARIABLE_SORTS,
+	type VariableFormModel,
+	type VariableSort,
+	type VariableType,
+} from '../variableModel';
+import DynamicVariableFields from './DynamicVariableFields';
+import QueryVariableFields from './QueryVariableFields';
+import VariableTypeSelector from './VariableTypeSelector';
+import styles from './VariableForm.module.scss';
+
+const SORT_LABEL: Record<VariableSort, string> = {
+	DISABLED: 'Disabled',
+	ASC: 'Ascending',
+	DESC: 'Descending',
+};
+
+function getNameError(name: string, existingNames: string[]): string | null {
+	if (name === '') {
+		return 'Variable name is required';
+	}
+	if (/\s/.test(name)) {
+		return 'Variable name cannot contain whitespaces';
+	}
+	if (existingNames.includes(name)) {
+		return 'Variable name already exists';
+	}
+	return null;
+}
+
+interface VariableFormProps {
+	initial: VariableFormModel;
+	/** Names of the other variables, for uniqueness validation. */
+	existingNames: string[];
+	isSaving: boolean;
+	onClose: () => void;
+	onSave: (model: VariableFormModel) => void;
+}
+
+/**
+ * In-drawer variable editor reproducing the V1 VariableItem layout, built on
+ * @signozhq components (antd kept only for the monaco editor, TextArea, Collapse
+ * and searchable selects). Master→detail: renders in place of the list.
+ */
+function VariableForm({
+	initial,
+	existingNames,
+	isSaving,
+	onClose,
+	onSave,
+}: VariableFormProps): JSX.Element {
+	const [model, setModel] = useState<VariableFormModel>(initial);
+	const [previewValues, setPreviewValues] = useState<(string | number)[]>([]);
+	const [previewError, setPreviewError] = useState<string | null>(null);
+	const [defaultValue, setDefaultValue] = useState<string>(
+		((initial.defaultValue as { value?: string })?.value ?? '') as string,
+	);
+
+	useEffect(() => {
+		setModel(initial);
+		setPreviewValues([]);
+		setPreviewError(null);
+		setDefaultValue(
+			((initial.defaultValue as { value?: string })?.value ?? '') as string,
+		);
+	}, [initial]);
+
+	const set = (patch: Partial<VariableFormModel>): void =>
+		setModel((prev) => ({ ...prev, ...patch }));
+
+	const selectType = (type: VariableType): void => {
+		set({ type });
+		setPreviewValues([]);
+		setPreviewError(null);
+	};
+
+	const onCustomChange = (value: string): void => {
+		set({ customValue: value });
+		setPreviewValues(
+			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
+		);
+	};
+
+	const trimmedName = model.name.trim();
+	const nameError = getNameError(trimmedName, existingNames);
+
+	const isListType =
+		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
+	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
+
+	const handleSave = (): void => {
+		onSave({
+			...model,
+			name: trimmedName,
+			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+		});
+	};
+
+	return (
+		<>
+			<div className={styles.container}>
+				<div className={styles.allVariables}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className={styles.allVariablesBtn}
+						prefix={<ArrowLeft size={14} />}
+						onClick={onClose}
+						testId="variable-form-back"
+					>
+						All variables
+					</Button>
+				</div>
+
+				<div className={styles.content}>
+					{/* Name */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Name</Typography.Text>
+						<Input
+							className={styles.input}
+							value={model.name}
+							placeholder="Unique name of the variable"
+							onChange={(e): void => set({ name: e.target.value })}
+							testId="variable-name-input"
+						/>
+						{nameError ? (
+							<Typography.Text className={styles.errorText}>
+								{nameError}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{/* Description */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Description</Typography.Text>
+						<AntdInput.TextArea
+							className={styles.textarea}
+							value={model.description}
+							placeholder="Enter a description for the variable"
+							rows={3}
+							onChange={(e): void => set({ description: e.target.value })}
+							data-testid="variable-description-input"
+						/>
+					</div>
+
+					{/* Variable Type */}
+					<VariableTypeSelector value={model.type} onChange={selectType} />
+
+					{/* Type-specific body */}
+					{model.type === 'DYNAMIC' ? (
+						<DynamicVariableFields
+							attribute={model.dynamicAttribute}
+							signal={model.dynamicSignal}
+							onChange={(patch): void => set(patch)}
+							onPreview={setPreviewValues}
+						/>
+					) : null}
+
+					{model.type === 'QUERY' ? (
+						<QueryVariableFields
+							queryValue={model.queryValue}
+							sort={model.sort}
+							onChange={(queryValue): void => set({ queryValue })}
+							onPreview={setPreviewValues}
+							onError={setPreviewError}
+						/>
+					) : null}
+
+					{model.type === 'CUSTOM' ? (
+						<div className={cx(styles.row, styles.customSection)}>
+							<Collapse
+								collapsible="header"
+								rootClassName="custom-collapse"
+								defaultActiveKey={['1']}
+								items={[
+									{
+										key: '1',
+										label: 'Options',
+										children: (
+											<AntdInput.TextArea
+												value={model.customValue}
+												placeholder="Enter options separated by commas."
+												rootClassName="comma-input"
+												onChange={(e): void => onCustomChange(e.target.value)}
+												data-testid="variable-custom-input"
+											/>
+										),
+									},
+								]}
+							/>
+						</div>
+					) : null}
+
+					{model.type === 'TEXT' ? (
+						<div className={cx(styles.row, styles.textboxSection)}>
+							<div className={styles.labelContainer}>
+								<Typography.Text className={styles.label}>
+									Default Value
+								</Typography.Text>
+							</div>
+							<Input
+								className={styles.defaultInput}
+								value={model.textValue}
+								placeholder="Enter a default value (if any)..."
+								onChange={(e): void => set({ textValue: e.target.value })}
+								testId="variable-text-input"
+							/>
+						</div>
+					) : null}
+
+					{/* Shared rows for list-type variables */}
+					{isListType ? (
+						<>
+							<div className={cx(styles.row, styles.previewSection)}>
+								<Typography.Text className={styles.previewLabel}>
+									Preview of Values
+								</Typography.Text>
+								<div className={styles.previewValues}>
+									{previewError ? (
+										<Typography.Text className={styles.previewError}>
+											{previewError}
+										</Typography.Text>
+									) : (
+										previewValues.map((value, idx) => (
+											<Badge
+												// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
+												key={`${value}-${idx}`}
+												color="vanilla"
+											>
+												{value.toString()}
+											</Badge>
+										))
+									)}
+								</div>
+							</div>
+
+							<div className={cx(styles.row, styles.sortSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>Sort Values</Typography.Text>
+								</div>
+								<SelectSimple
+									className={styles.sortSelect}
+									value={model.sort}
+									items={VARIABLE_SORTS.map((sort) => ({
+										label: SORT_LABEL[sort],
+										value: sort,
+									}))}
+									onChange={(value): void => set({ sort: value as VariableSort })}
+									testId="variable-sort-select"
+								/>
+							</div>
+
+							<div className={cx(styles.row, styles.multiSection)}>
+								<Typography.Text className={styles.rowLabel}>
+									Enable multiple values to be checked
+								</Typography.Text>
+								<Switch
+									value={model.multiSelect}
+									onChange={(checked): void => {
+										set({
+											multiSelect: checked,
+											showAllOption: checked ? model.showAllOption : false,
+										});
+									}}
+									testId="variable-multi-switch"
+								/>
+							</div>
+
+							{model.multiSelect && showAllOptionField ? (
+								<div className={cx(styles.row, styles.allOptionSection)}>
+									<Typography.Text className={styles.rowLabel}>
+										Include an option for ALL values
+									</Typography.Text>
+									<Switch
+										value={model.showAllOption}
+										onChange={(checked): void => set({ showAllOption: checked })}
+										testId="variable-all-switch"
+									/>
+								</div>
+							) : null}
+
+							<div className={cx(styles.row, styles.defaultValueSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Default Value
+									</Typography.Text>
+									<Typography.Text className={styles.defaultValueDesc}>
+										{model.type === 'QUERY'
+											? 'Click Test Run Query to see the values or add custom value'
+											: 'Select a value from the preview values or add custom value'}
+									</Typography.Text>
+								</div>
+								<Select
+									className={styles.searchSelect}
+									showSearch
+									allowClear
+									placeholder="Select a default value"
+									value={defaultValue || undefined}
+									onChange={(value): void => setDefaultValue(value ?? '')}
+									options={previewValues.map((value) => ({
+										label: value.toString(),
+										value: value.toString(),
+									}))}
+									data-testid="variable-default-select"
+								/>
+							</div>
+						</>
+					) : null}
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<Button
+					variant="solid"
+					color="secondary"
+					prefix={<X size={14} />}
+					onClick={onClose}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<Check size={14} />}
+					disabled={!!nameError}
+					loading={isSaving}
+					onClick={handleSave}
+					testId="variable-save"
+				>
+					Save Variable
+				</Button>
+			</div>
+		</>
+	);
+}
+
+export default VariableForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableTypeSelector.tsx

@@ -0,0 +1,99 @@
+import {
+	ClipboardType,
+	DatabaseZap,
+	Info,
+	LayoutList,
+	Pyramid,
+} from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip';
+
+import type { VariableType } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface VariableTypeSelectorProps {
+	value: VariableType;
+	onChange: (type: VariableType) => void;
+}
+
+/** The segmented Dynamic / Textbox / Custom / Query type picker. */
+function VariableTypeSelector({
+	value,
+	onChange,
+}: VariableTypeSelectorProps): JSX.Element {
+	return (
+		<div className={cx(styles.row, styles.typeSection)}>
+			<div className={styles.typeLabelContainer}>
+				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
+				<TextToolTip
+					text="Learn more about supported variable types"
+					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
+					urlText="here"
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+			</div>
+			<div className={styles.typeBtnGroup}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<Pyramid size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'DYNAMIC',
+					})}
+					onClick={(): void => onChange('DYNAMIC')}
+					testId="variable-type-dynamic"
+				>
+					Dynamic
+					<Badge color="robin" className={styles.betaTag}>
+						Beta
+					</Badge>
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<ClipboardType size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'TEXT',
+					})}
+					onClick={(): void => onChange('TEXT')}
+					testId="variable-type-textbox"
+				>
+					Textbox
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<LayoutList size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'CUSTOM',
+					})}
+					onClick={(): void => onChange('CUSTOM')}
+					testId="variable-type-custom"
+				>
+					Custom
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<DatabaseZap size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'QUERY',
+					})}
+					onClick={(): void => onChange('QUERY')}
+					testId="variable-type-query"
+				>
+					Query
+					<Badge color="amber" className={styles.betaTag}>
+						Not Recommended
+					</Badge>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default VariableTypeSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -0,0 +1,101 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 20px 16px;
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.titleRow {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.subtitle {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.empty {
+	padding: 32px;
+	text-align: center;
+	border: 1px dashed var(--l1-border);
+	border-radius: 4px;
+	color: var(--l2-foreground);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l1-background);
+}
+
+.rowMain {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.varName {
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.varDesc {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.typeTag {
+	flex-shrink: 0;
+	padding: 1px 8px;
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	color: var(--l2-foreground);
+	text-transform: uppercase;
+	background: var(--l2-background);
+	border-radius: 10px;
+}
+
+.rowActions {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 2px;
+}
+
+.confirmText {
+	margin-right: 4px;
+	font-size: 12px;
+	color: var(--l2-foreground);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -0,0 +1,139 @@
+import {
+	Check,
+	ChevronDown,
+	ChevronUp,
+	PenLine,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableFormModel } from './variableModel';
+import styles from './Variables.module.scss';
+
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
+interface VariablesListProps {
+	variables: VariableFormModel[];
+	canEdit: boolean;
+	/** Index whose delete is awaiting inline confirmation, if any. */
+	confirmingIndex: number | null;
+	onEdit: (index: number) => void;
+	onRequestDelete: (index: number) => void;
+	onConfirmDelete: (index: number) => void;
+	onCancelDelete: () => void;
+	onMove: (from: number, to: number) => void;
+}
+
+function VariablesList({
+	variables,
+	canEdit,
+	confirmingIndex,
+	onEdit,
+	onRequestDelete,
+	onConfirmDelete,
+	onCancelDelete,
+	onMove,
+}: VariablesListProps): JSX.Element {
+	return (
+		<div className={styles.list} data-testid="variables-list">
+			{variables.map((variable, index) => (
+				<div
+					className={styles.row}
+					key={variable.name || `variable-${index}`}
+					data-testid={`variable-row-${variable.name}`}
+				>
+					<div className={styles.rowMain}>
+						<Typography.Text className={styles.varName}>
+							${variable.name}
+						</Typography.Text>
+						<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+						{variable.description ? (
+							<Typography.Text className={styles.varDesc}>
+								{variable.description}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{canEdit && confirmingIndex === index ? (
+						<div className={styles.rowActions}>
+							<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
+							<Button
+								variant="ghost"
+								color="destructive"
+								size="icon"
+								onClick={(): void => onConfirmDelete(index)}
+								aria-label="Confirm delete"
+								testId={`variable-delete-confirm-${variable.name}`}
+							>
+								<Check size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={onCancelDelete}
+								aria-label="Cancel delete"
+							>
+								<X size={14} />
+							</Button>
+						</div>
+					) : null}
+
+					{canEdit && confirmingIndex !== index ? (
+						<div className={styles.rowActions}>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === 0}
+								onClick={(): void => onMove(index, index - 1)}
+								aria-label="Move up"
+							>
+								<ChevronUp size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === variables.length - 1}
+								onClick={(): void => onMove(index, index + 1)}
+								aria-label="Move down"
+							>
+								<ChevronDown size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onEdit(index)}
+								aria-label="Edit variable"
+								testId={`variable-edit-${variable.name}`}
+							>
+								<PenLine size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onRequestDelete(index)}
+								aria-label="Delete variable"
+								testId={`variable-delete-${variable.name}`}
+							>
+								<Trash2 size={14} />
+							</Button>
+						</div>
+					) : null}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default VariablesList;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/index.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSaveVariables } from './useSaveVariables';
+import { dtoToFormModel } from './variableAdapters';
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from './variableModel';
+import VariableForm from './VariableForm/VariableForm';
+import VariablesList from './VariablesList';
+import styles from './Variables.module.scss';
+
+interface VariablesSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+/** `null` index = adding a new variable; a number = editing that row. */
+type EditingState = { index: number | null } | null;
+
+function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const { save, isSaving } = useSaveVariables();
+
+	const initialModels = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+	const [variables, setVariables] = useState<VariableFormModel[]>(initialModels);
+
+	// Resync from the dashboard after a save round-trips (refetch bumps updatedAt).
+	useEffect(() => {
+		setVariables(initialModels);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const [editing, setEditing] = useState<EditingState>(null);
+	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
+		null,
+	);
+
+	const editingModel: VariableFormModel | null = useMemo(() => {
+		if (!editing) {
+			return null;
+		}
+		return editing.index === null
+			? emptyVariableFormModel()
+			: variables[editing.index];
+	}, [editing, variables]);
+
+	const existingNames = useMemo(() => {
+		const self = editing?.index ?? null;
+		return variables.filter((_, i) => i !== self).map((v) => v.name);
+	}, [variables, editing]);
+
+	const persist = (next: VariableFormModel[]): void => {
+		setVariables(next);
+		void save(next);
+	};
+
+	const handleFormSave = (model: VariableFormModel): void => {
+		const next = [...variables];
+		if (editing?.index == null) {
+			next.push(model);
+		} else {
+			next[editing.index] = model;
+		}
+		setEditing(null);
+		persist(next);
+	};
+
+	const handleMove = (from: number, to: number): void => {
+		if (to < 0 || to >= variables.length) {
+			return;
+		}
+		const next = [...variables];
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		persist(next);
+	};
+
+	const handleConfirmDelete = (index: number): void => {
+		persist(variables.filter((_, i) => i !== index));
+		setConfirmDeleteIndex(null);
+	};
+
+	// Detail view — edit/new form replaces the list in place (no modal).
+	if (editingModel) {
+		return (
+			<VariableForm
+				initial={editingModel}
+				existingNames={existingNames}
+				isSaving={isSaving}
+				onClose={(): void => setEditing(null)}
+				onSave={handleFormSave}
+			/>
+		);
+	}
+
+	// Master view — the variables list.
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<div className={styles.titleRow}>
+					<Typography.Text className={styles.title}>Variables</Typography.Text>
+					<Typography.Text className={styles.subtitle}>
+						Define variables to parameterize panel queries.
+					</Typography.Text>
+				</div>
+				{isEditable ? (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => setEditing({ index: null })}
+						testId="add-variable"
+					>
+						New variable
+					</Button>
+				) : null}
+			</div>
+
+			{variables.length === 0 ? (
+				<div className={styles.empty}>
+					<Typography.Text>No variables defined yet.</Typography.Text>
+				</div>
+			) : (
+				<VariablesList
+					variables={variables}
+					canEdit={isEditable}
+					confirmingIndex={confirmDeleteIndex}
+					onEdit={(index): void => setEditing({ index })}
+					onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
+					onConfirmDelete={handleConfirmDelete}
+					onCancelDelete={(): void => setConfirmDeleteIndex(null)}
+					onMove={handleMove}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default VariablesSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/useSaveVariables.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { toast } from '@signozhq/ui/sonner';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { formModelToDto } from './variableAdapters';
+import type { VariableFormModel } from './variableModel';
+import { buildVariablesPatch } from './variablePatchOps';
+
+interface UseSaveVariables {
+	save: (variables: VariableFormModel[]) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/**
+ * Persists the dashboard's variable list via a single `/spec/variables` patch,
+ * then refetches. Mirrors the General-settings save flow (patch → toast →
+ * refetch → surface errors).
+ */
+export function useSaveVariables(): UseSaveVariables {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+	const [isSaving, setIsSaving] = useState(false);
+
+	const save = useCallback(
+		async (variables: VariableFormModel[]): Promise<boolean> => {
+			if (!dashboardId) {
+				return false;
+			}
+			const dtos = variables.map(formModelToDto);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				toast.success('Variables updated');
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, refetch, showErrorModal],
+	);
+
+	return { save, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -0,0 +1,153 @@
+import {
+	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListVariableSpecDTO,
+	DashboardtypesVariableDTO,
+	DashboardtypesVariablePluginDTO,
+	DashboardTextVariableSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	PLUGIN_KIND,
+	type TelemetrySignal,
+	type VariableFormModel,
+	type VariableSort,
+} from './variableModel';
+
+/** DTO envelope → flat form model (for display / editing). */
+export function dtoToFormModel(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel {
+	const base = emptyVariableFormModel();
+	const display = dto.spec?.display;
+	const common: VariableFormModel = {
+		...base,
+		name: dto.spec?.name ?? display?.name ?? '',
+		description: display?.description ?? '',
+	};
+
+	// Text variable — a distinct envelope (no list plugin).
+	if (dto.kind === TextEnvelopeKind.TextVariable) {
+		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		return {
+			...common,
+			type: 'TEXT',
+			textValue: spec.value ?? '',
+			textConstant: spec.constant ?? false,
+		};
+	}
+
+	// List variable — Query / Custom / Dynamic, distinguished by plugin.kind.
+	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
+	const listCommon: VariableFormModel = {
+		...common,
+		multiSelect: spec.allowMultiple ?? false,
+		showAllOption: spec.allowAllValue ?? false,
+		sort: (spec.sort as VariableSort) ?? 'DISABLED',
+		defaultValue: spec.defaultValue,
+	};
+	const plugin = spec.plugin;
+
+	if (plugin?.kind === CustomPluginKind['signoz/CustomVariable']) {
+		return {
+			...listCommon,
+			type: 'CUSTOM',
+			customValue: plugin.spec.customValue ?? '',
+		};
+	}
+	if (plugin?.kind === DynamicPluginKind['signoz/DynamicVariable']) {
+		return {
+			...listCommon,
+			type: 'DYNAMIC',
+			dynamicAttribute: plugin.spec.name ?? '',
+			dynamicSignal: (plugin.spec.signal as TelemetrySignal) ?? 'traces',
+		};
+	}
+	// Default to Query (also covers a query plugin or a missing/unknown plugin).
+	return {
+		...listCommon,
+		type: 'QUERY',
+		queryValue:
+			plugin?.kind === QueryPluginKind['signoz/QueryVariable']
+				? (plugin.spec.queryValue ?? '')
+				: '',
+	};
+}
+
+function buildPlugin(
+	model: VariableFormModel,
+): DashboardtypesVariablePluginDTO {
+	switch (model.type) {
+		case 'CUSTOM':
+			return {
+				kind: CustomPluginKind['signoz/CustomVariable'],
+				spec: { customValue: model.customValue },
+			};
+		case 'DYNAMIC':
+			return {
+				kind: DynamicPluginKind['signoz/DynamicVariable'],
+				spec: {
+					name: model.dynamicAttribute,
+					signal: model.dynamicSignal as TelemetrytypesSignalDTO,
+				},
+			};
+		case 'QUERY':
+		default:
+			return {
+				kind: QueryPluginKind['signoz/QueryVariable'],
+				spec: { queryValue: model.queryValue },
+			};
+	}
+}
+
+/** Flat form model → DTO envelope (for persistence). */
+export function formModelToDto(
+	model: VariableFormModel,
+): DashboardtypesVariableDTO {
+	const display = {
+		name: model.name,
+		description: model.description,
+		hidden: model.hidden,
+	};
+
+	if (model.type === 'TEXT') {
+		return {
+			kind: TextEnvelopeKind.TextVariable,
+			spec: {
+				name: model.name,
+				display,
+				value: model.textValue,
+				constant: model.textConstant,
+			},
+		};
+	}
+
+	return {
+		kind: ListEnvelopeKind.ListVariable,
+		spec: {
+			name: model.name,
+			display,
+			allowMultiple: model.multiSelect,
+			allowAllValue: model.showAllOption,
+			sort: model.sort,
+			defaultValue: model.defaultValue,
+			plugin: buildPlugin(model),
+		},
+	};
+}
+
+/** Maps the V2 plugin/envelope to the four UI-facing variable types. */
+export function variableTypeOf(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel['type'] {
+	return dtoToFormModel(dto).type;
+}
+
+export { PLUGIN_KIND };

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableModel.ts

@@ -0,0 +1,78 @@
+import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
+ * (`DashboardtypesVariableDTO`) is a nested envelope/plugin union that is awkward
+ * to bind a form to; `variableAdapters` converts between this model and the DTO.
+ */
+
+export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
+
+export type VariableSort = 'DISABLED' | 'ASC' | 'DESC';
+
+export type TelemetrySignal = 'traces' | 'logs' | 'metrics';
+
+/** Wire `kind` discriminators (string values of the generated enums). */
+export const ENVELOPE_KIND = {
+	LIST: 'ListVariable',
+	TEXT: 'TextVariable',
+} as const;
+
+export const PLUGIN_KIND = {
+	QUERY: 'signoz/QueryVariable',
+	CUSTOM: 'signoz/CustomVariable',
+	DYNAMIC: 'signoz/DynamicVariable',
+} as const;
+
+export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
+
+export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
+	'traces',
+	'logs',
+	'metrics',
+];
+
+export interface VariableFormModel {
+	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
+	name: string;
+	description: string;
+	hidden: boolean;
+	type: VariableType;
+
+	// List-variable common fields (Query / Custom / Dynamic).
+	multiSelect: boolean;
+	showAllOption: boolean;
+	sort: VariableSort;
+
+	// Type-specific.
+	queryValue: string; // QUERY
+	customValue: string; // CUSTOM
+	textValue: string; // TEXT
+	textConstant: boolean; // TEXT
+	dynamicAttribute: string; // DYNAMIC — the telemetry field name
+	dynamicSignal: TelemetrySignal; // DYNAMIC — the telemetry signal
+
+	/**
+	 * Runtime-selected default, not editable in the management tab yet; carried
+	 * through edits so saving a definition doesn't clobber it.
+	 */
+	defaultValue?: VariableDefaultValueDTO;
+}
+
+export function emptyVariableFormModel(): VariableFormModel {
+	return {
+		name: '',
+		description: '',
+		hidden: false,
+		type: 'QUERY',
+		multiSelect: false,
+		showAllOption: false,
+		sort: 'DISABLED',
+		queryValue: '',
+		customValue: '',
+		textValue: '',
+		textConstant: false,
+		dynamicAttribute: '',
+		dynamicSignal: 'traces',
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variablePatchOps.ts

@@ -0,0 +1,22 @@
+import type {
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Builds the JSON-Patch to persist the dashboard's variable list. Add/edit/
+ * delete/reorder all replace the whole `/spec/variables` array in one atomic op
+ * — simpler and race-free vs per-index patches. RFC-6902 `add` on an object
+ * member sets-or-replaces, so it works whether or not `variables` already exists.
+ */
+export function buildVariablesPatch(
+	variables: DashboardtypesVariableDTO[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{
+			op: 'add' as DashboardtypesJSONPatchOperationDTO['op'],
+			path: '/spec/variables',
+			value: variables,
+		},
+	];
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/index.tsx

@@ -1,48 +1,39 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
+import { TabItemProps, Tabs } from '@signozhq/ui/tabs';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
 import GeneralSettings from './General';
 import { SettingsTabPlaceholder } from './utils';
-
-import styles from './DashboardSettings.module.scss';
+import VariablesSettings from './Variables';
 
 interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
-}
-
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
+	const items: TabItemProps[] = useMemo(
 		() => [
 			{
 				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
+				label: 'General',
 				children: <GeneralSettings dashboard={dashboard} />,
+				prefixIcon: <Table size={14} />,
 			},
 			{
 				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
+				label: 'Variables',
+				children: <VariablesSettings dashboard={dashboard} />,
+				prefixIcon: <Braces size={14} />,
 			},
 			{
 				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
+				label: 'Publish',
 				children: (
 					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
 				),
+				prefixIcon: <Globe size={14} />,
 			},
 		],
 		[dashboard],

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.module.scss

@@ -1,22 +0,0 @@
-.config {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	padding: 16px;
-	gap: 16px;
-	background-color: var(--l2-background);
-	border-left: 1px solid var(--l2-border);
-	overflow-y: auto;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -1,53 +0,0 @@
-import { Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import type { PanelDisplayDraft } from '../types';
-
-import styles from './ConfigPane.module.scss';
-
-interface ConfigPaneProps {
-	display: PanelDisplayDraft;
-	onChangeDisplay: (next: Partial<PanelDisplayDraft>) => void;
-}
-
-/**
- * Right-hand configuration pane. Milestone 1 exposes only the panel title and
- * description; later milestones render the data-driven section framework
- * (Formatting, Axes, Legend, …) below these general fields, keyed off the
- * panel kind's `SectionConfig[]`.
- */
-function ConfigPane({
-	display,
-	onChangeDisplay,
-}: ConfigPaneProps): JSX.Element {
-	return (
-		<div className={styles.config}>
-			<div className={styles.section}>
-				<Typography.Text>Panel settings</Typography.Text>
-
-				<div className={styles.field}>
-					<Typography.Text>Title</Typography.Text>
-					<Input
-						data-testid="panel-editor-v2-title"
-						value={display.name}
-						placeholder="Panel title"
-						onChange={(e): void => onChangeDisplay({ name: e.target.value })}
-					/>
-				</div>
-
-				<div className={styles.field}>
-					<Typography.Text>Description</Typography.Text>
-					<Input.TextArea
-						data-testid="panel-editor-v2-description"
-						value={display.description}
-						placeholder="Add a description"
-						rows={3}
-						onChange={(e): void => onChangeDisplay({ description: e.target.value })}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default ConfigPane;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/Header/Header.module.scss

@@ -1,22 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 12px 16px;
-	background-color: var(--l2-background);
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-}
-
-.actions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/Header/Header.tsx

@@ -1,51 +0,0 @@
-import { X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Divider } from '@signozhq/ui/divider';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './Header.module.scss';
-
-interface HeaderProps {
-	isDirty: boolean;
-	isSaving: boolean;
-	onSave: () => void;
-	onClose: () => void;
-}
-
-function Header({
-	isDirty,
-	isSaving,
-	onSave,
-	onClose,
-}: HeaderProps): JSX.Element {
-	return (
-		<div className={styles.header}>
-			<div className={styles.title}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					suffix={<X size={14} />}
-					data-testid="panel-editor-v2-close"
-					onClick={onClose}
-				/>
-				<Divider type="vertical" />
-				<Typography.Text>Configure panel</Typography.Text>
-			</div>
-			<div className={styles.actions}>
-				<Button
-					variant="solid"
-					color="primary"
-					data-testid="panel-editor-v2-save"
-					disabled={!isDirty || isSaving}
-					loading={isSaving}
-					onClick={onSave}
-				>
-					Save changes
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default Header;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditor.module.scss

@@ -1,17 +0,0 @@
-.root {
-	position: fixed;
-	inset: 0;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	background: var(--l1-background);
-}
-
-.left {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -1,61 +0,0 @@
-.preview {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	gap: 8px;
-	background-image: radial-gradient(var(--l2-border) 1px, transparent 0);
-	background-size: 20px 20px;
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.header {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.queryType {
-	display: inline-flex;
-	padding: 4px 8px 4px 6px;
-	align-items: center;
-	gap: 6px;
-	border-radius: 4px;
-	background: var(--l3-background);
-	backdrop-filter: blur(6px);
-	width: fit-content;
-}
-
-.container {
-	display: flex;
-	flex: 1;
-	padding: 2% 5% 5% 5%;
-	min-width: 0;
-	min-height: 0;
-}
-
-.surface {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	display: flex;
-	background: var(--l2-background);
-	padding: 8px;
-}
-
-.state {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 24px;
-	color: var(--bg-vanilla-400, #8993ae);
-	font-size: 13px;
-	text-align: center;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -1,129 +0,0 @@
-import { useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports -- seed initial time from global store; never written back
-import { useSelector } from 'react-redux';
-import { Spin } from 'antd';
-import { Loader, Spline } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels';
-import {
-	type PanelQueryTimeOverride,
-	usePanelQuery,
-} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-import { AppState } from 'store/reducers';
-import { EQueryType } from 'types/common/dashboard';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import PreviewTimePicker, {
-	type PreviewTime,
-} from '../PreviewTimePicker/PreviewTimePicker';
-
-import styles from './PreviewPane.module.scss';
-
-const NS_TO_SEC = 1e9;
-const SEC_TO_MS = 1e3;
-
-interface PreviewPaneProps {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-}
-
-/**
- * Live preview for the panel editor. Renders the draft panel through the same
- * registry + query path the dashboard grid uses (`getPanelDefinition` +
- * `usePanelQuery`), so the preview is byte-for-byte the production renderer —
- * only the `panelMode` differs (DASHBOARD_EDIT).
- *
- * Time is editor-local (`PreviewTimePicker` never touches global Redux time or
- * the URL), so changing it here neither modifies nor re-runs the dashboard
- * behind the overlay. Seeded once from the current global selection so the
- * preview opens matching the dashboard. The local window is resolved to an
- * absolute `[startMs, endMs]` and handed to `usePanelQuery` as a time override
- * (the V5 request takes epoch ms; a relative selection is pinned at the moment
- * it's picked).
- */
-function PreviewPane({ panelId, panel }: PreviewPaneProps): JSX.Element {
-	const fullKind = panel.spec?.plugin?.kind;
-	const panelDef = getPanelDefinition(fullKind);
-
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const [previewTime, setPreviewTime] = useState<PreviewTime>(() =>
-		globalTime.selectedTime === 'custom'
-			? {
-					interval: 'custom',
-					range: [
-						Math.floor(globalTime.minTime / NS_TO_SEC),
-						Math.floor(globalTime.maxTime / NS_TO_SEC),
-					],
-				}
-			: { interval: globalTime.selectedTime, range: null },
-	);
-
-	// Resolve the editor-local selection to an absolute epoch-ms window. Custom
-	// uses the picked range; relative is computed now-based (Redux-independent)
-	// and pinned until the user changes the picker — recomputing "now" each
-	// render would churn the query key into an endless refetch loop.
-	const time = useMemo<PanelQueryTimeOverride>(() => {
-		if (previewTime.range) {
-			return {
-				startMs: previewTime.range[0] * SEC_TO_MS,
-				endMs: previewTime.range[1] * SEC_TO_MS,
-			};
-		}
-		const { start, end } = getStartEndRangeTime({
-			type: 'GLOBAL_TIME',
-			interval: previewTime.interval,
-		});
-		return { startMs: Number(start) * SEC_TO_MS, endMs: Number(end) * SEC_TO_MS };
-	}, [previewTime]);
-
-	const { data, isLoading, error } = usePanelQuery({
-		panel,
-		panelId,
-		enabled: !!panelDef,
-		time,
-	});
-
-	return (
-		<div className={styles.preview}>
-			<div className={styles.header}>
-				<div className={styles.queryType}>
-					<Spline size={14} />
-					Plotted with <QueryTypeTag queryType={EQueryType.QUERY_BUILDER} />
-				</div>
-				<PreviewTimePicker value={previewTime} onChange={setPreviewTime} />
-			</div>
-			<div className={styles.container}>
-				<div className={styles.surface}>
-					{/* eslint-disable-next-line no-nested-ternary -- 3-way branch on render state */}
-					{!panelDef ? (
-						<div className={styles.state} data-testid="panel-editor-v2-unknown-kind">
-							This panel type is not yet supported in V2.
-						</div>
-					) : isLoading && !data.response ? (
-						<div className={styles.state} data-testid="panel-editor-v2-loading">
-							<Spin indicator={<Loader size={14} className="animate-spin" />} />
-						</div>
-					) : (
-						<panelDef.Renderer
-							panelId={panelId}
-							panel={panel}
-							data={data}
-							isLoading={isLoading}
-							error={error}
-							panelMode={PanelMode.DASHBOARD_EDIT}
-							enableDrillDown={false}
-						/>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default PreviewPane;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewTimePicker/PreviewTimePicker.tsx

@@ -1,127 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import CustomTimePicker from 'components/CustomTimePicker/CustomTimePicker';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import type { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import { getOptions } from 'container/TopNav/DateTimeSelectionV2/constants';
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import dayjs from 'dayjs';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { useTimezone } from 'providers/Timezone';
-
-const MS_TO_NS = 1e6;
-
-export interface PreviewTime {
-	/** Relative shorthand (e.g. `30m`) or `custom`. */
-	interval: Time | CustomTimeType;
-	/** Custom range `[startSec, endSec]`; null for relative. */
-	range: [number, number] | null;
-}
-
-interface PreviewTimePickerProps {
-	value: PreviewTime;
-	onChange: (next: PreviewTime) => void;
-}
-
-/**
- * Time picker for the panel editor preview. Wraps the shared `CustomTimePicker`
- * with fully-local state — it never reads or writes global Redux time or the
- * URL, so changing the preview window doesn't touch (or re-run) the dashboard
- * behind the editor overlay. Selections are emitted via `onChange`; the parent
- * feeds them to the preview fetch.
- */
-function PreviewTimePicker({
-	value,
-	onChange,
-}: PreviewTimePickerProps): JSX.Element {
-	const { pathname } = useLocation();
-	const { timezone } = useTimezone();
-	const [open, setOpen] = useState<boolean>(false);
-	const [customVisible, setCustomVisible] = useState<boolean>(false);
-
-	const { interval, range } = value;
-	const options = useMemo(() => getOptions(pathname), [pathname]);
-
-	// Active window in ms — custom uses the picked range; relative is computed
-	// now-based (Redux-independent). Drives the relative-duration pill.
-	const [startMs, endMs] = useMemo<[number, number]>(() => {
-		if (range) {
-			return [range[0] * 1000, range[1] * 1000];
-		}
-		const { start, end } = getStartEndRangeTime({
-			type: 'GLOBAL_TIME',
-			interval,
-		});
-		return [Number(start) * 1000, Number(end) * 1000];
-	}, [interval, range]);
-
-	// Label shown for a custom range; relative selections render their own
-	// "Last …" label from `selectedTime` inside CustomTimePicker.
-	const selectedValue = useMemo(() => {
-		if (!range) {
-			return '';
-		}
-		const fmt = DATE_TIME_FORMATS.UK_DATETIME_SECONDS;
-		const start = dayjs(startMs).tz(timezone.value).format(fmt);
-		const end = dayjs(endMs).tz(timezone.value).format(fmt);
-		return `${start} - ${end}`;
-	}, [range, startMs, endMs, timezone.value]);
-
-	const onSelect = (next: string): void => {
-		if (next === 'custom') {
-			setCustomVisible(true);
-			return;
-		}
-		setOpen(false);
-		onChange({ interval: next as Time, range: null });
-	};
-
-	const onCustomDateHandler = (dateTimeRange: DateTimeRangeType): void => {
-		if (!dateTimeRange) {
-			return;
-		}
-		const [startMoment, endMoment] = dateTimeRange;
-		if (!startMoment || !endMoment) {
-			return;
-		}
-		setCustomVisible(false);
-		setOpen(false);
-		onChange({
-			interval: 'custom',
-			range: [
-				Math.floor(startMoment.toDate().getTime() / 1000),
-				Math.floor(endMoment.toDate().getTime() / 1000),
-			],
-		});
-	};
-
-	return (
-		<CustomTimePicker
-			newPopover
-			open={open}
-			setOpen={setOpen}
-			items={options}
-			selectedTime={interval}
-			selectedValue={selectedValue}
-			minTime={startMs * MS_TO_NS}
-			maxTime={endMs * MS_TO_NS}
-			// Hides the zoom-out button — it mutates global time, which the editor
-			// must not do.
-			isModalTimeSelection
-			onSelect={onSelect}
-			onError={(): void => {}}
-			onCustomDateHandler={onCustomDateHandler}
-			customDateTimeVisible={customVisible}
-			setCustomDTPickerVisible={setCustomVisible}
-			onValidCustomDateChange={({ timeStr }): void => {
-				setOpen(false);
-				onChange({ interval: timeStr as Time, range: null });
-			}}
-		/>
-	);
-}
-
-export default PreviewTimePicker;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/QueryBuilderPlaceholder/QueryBuilderPlaceholder.module.scss

@@ -1,12 +0,0 @@
-.placeholder {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	min-height: 30%;
-	margin: 0 16px 16px;
-	border: 1px dashed var(--l2-border);
-	border-radius: 4px;
-	color: var(--l2-foreground);
-	font-size: 13px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/QueryBuilderPlaceholder/QueryBuilderPlaceholder.tsx

@@ -1,23 +0,0 @@
-import { Terminal } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './QueryBuilderPlaceholder.module.scss';
-
-/**
- * Placeholder for the query builder in the panel editor's left pane. Milestone 2
- * replaces this with the shared `QueryBuilderV2`, wired through `fromPerses` /
- * `toPerses` so query edits flow into the draft and re-fetch the preview.
- */
-function QueryBuilderPlaceholder(): JSX.Element {
-	return (
-		<div
-			className={styles.placeholder}
-			data-testid="panel-editor-v2-query-placeholder"
-		>
-			<Terminal size={16} />
-			<Typography.Text>Query builder coming soon</Typography.Text>
-		</div>
-	);
-}
-
-export default QueryBuilderPlaceholder;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/ConfigPane.test.tsx

@@ -1,35 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import ConfigPane from '../ConfigPane/ConfigPane';
-
-describe('ConfigPane', () => {
-	it('renders the seeded title and description', () => {
-		render(
-			<ConfigPane
-				display={{ name: 'CPU', description: 'usage' }}
-				onChangeDisplay={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('panel-editor-v2-title')).toHaveValue('CPU');
-		expect(screen.getByTestId('panel-editor-v2-description')).toHaveValue(
-			'usage',
-		);
-	});
-
-	it('reports title edits via onChangeDisplay', () => {
-		const onChangeDisplay = jest.fn();
-		render(
-			<ConfigPane
-				display={{ name: 'CPU', description: 'usage' }}
-				onChangeDisplay={onChangeDisplay}
-			/>,
-		);
-
-		fireEvent.change(screen.getByTestId('panel-editor-v2-title'), {
-			target: { value: 'Memory' },
-		});
-
-		expect(onChangeDisplay).toHaveBeenCalledWith({ name: 'Memory' });
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/usePanelEditorDraft.test.ts

@@ -1,62 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { usePanelEditorDraft } from '../usePanelEditorDraft';
-
-function panel(name = 'CPU', description = 'usage'): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name, description },
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-describe('usePanelEditorDraft', () => {
-	it('seeds display from the initial panel and starts clean', () => {
-		const { result } = renderHook(() => usePanelEditorDraft(panel()));
-
-		expect(result.current.display).toStrictEqual({
-			name: 'CPU',
-			description: 'usage',
-		});
-		expect(result.current.isDirty).toBe(false);
-	});
-
-	it('updates display and flags the draft dirty', () => {
-		const { result } = renderHook(() => usePanelEditorDraft(panel()));
-
-		act(() => result.current.setDisplay({ name: 'Memory' }));
-
-		expect(result.current.display.name).toBe('Memory');
-		expect(result.current.display.description).toBe('usage');
-		expect(result.current.isDirty).toBe(true);
-		// draft stays in perses shape so preview + save consume it directly
-		expect(result.current.draft.spec?.display?.name).toBe('Memory');
-	});
-
-	it('reset restores the originally-loaded display', () => {
-		const { result } = renderHook(() => usePanelEditorDraft(panel()));
-
-		act(() => result.current.setDisplay({ name: 'Memory', description: 'new' }));
-		act(() => result.current.reset());
-
-		expect(result.current.display).toStrictEqual({
-			name: 'CPU',
-			description: 'usage',
-		});
-		expect(result.current.isDirty).toBe(false);
-	});
-
-	it('treats a panel without display as empty strings', () => {
-		const bare = {
-			kind: 'Panel',
-			spec: { plugin: { kind: 'signoz/PieChartPanel' } },
-		} as unknown as DashboardtypesPanelDTO;
-		const { result } = renderHook(() => usePanelEditorDraft(bare));
-
-		expect(result.current.display).toStrictEqual({ name: '', description: '' });
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/usePanelEditorSave.test.ts

@@ -1,72 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import {
-	getGetDashboardV2QueryKey,
-	usePatchDashboardV2,
-} from 'api/generated/services/dashboard';
-
-import { usePanelEditorSave } from '../usePanelEditorSave';
-
-const mockInvalidateQueries = jest.fn();
-jest.mock('react-query', () => ({
-	useQueryClient: (): { invalidateQueries: jest.Mock } => ({
-		invalidateQueries: mockInvalidateQueries,
-	}),
-}));
-
-jest.mock('api/generated/services/dashboard', () => ({
-	usePatchDashboardV2: jest.fn(),
-	getGetDashboardV2QueryKey: jest.fn(() => ['/api/v2/dashboards/dash-1']),
-}));
-
-const mockUsePatch = usePatchDashboardV2 as unknown as jest.Mock;
-const mockGetQueryKey = getGetDashboardV2QueryKey as unknown as jest.Mock;
-
-describe('usePanelEditorSave', () => {
-	const mutateAsync = jest.fn().mockResolvedValue(undefined);
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: false,
-			error: null,
-		});
-	});
-
-	it('emits an add patch for the panel display and invalidates the dashboard query', async () => {
-		const { result } = renderHook(() =>
-			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),
-		);
-
-		await result.current.save({ name: 'New title', description: 'desc' });
-
-		expect(mutateAsync).toHaveBeenCalledWith({
-			pathParams: { id: 'dash-1' },
-			data: [
-				{
-					op: 'add',
-					path: '/spec/panels/panel-9/spec/display',
-					value: { name: 'New title', description: 'desc' },
-				},
-			],
-		});
-		expect(mockGetQueryKey).toHaveBeenCalledWith({ id: 'dash-1' });
-		expect(mockInvalidateQueries).toHaveBeenCalledWith([
-			'/api/v2/dashboards/dash-1',
-		]);
-	});
-
-	it('surfaces the mutation loading state as isSaving', () => {
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: true,
-			error: null,
-		});
-
-		const { result } = renderHook(() =>
-			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),
-		);
-
-		expect(result.current.isSaving).toBe(true);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -1,96 +0,0 @@
-import { useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-	useDefaultLayout,
-} from '@signozhq/ui/resizable';
-import { toast } from '@signozhq/ui/sonner';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import ConfigPane from './ConfigPane/ConfigPane';
-import Header from './Header/Header';
-import layoutStorage from './layoutStorage';
-import PreviewPane from './PreviewPane/PreviewPane';
-import QueryBuilderPlaceholder from './QueryBuilderPlaceholder/QueryBuilderPlaceholder';
-import { usePanelEditorDraft } from './usePanelEditorDraft';
-import { usePanelEditorSave } from './usePanelEditorSave';
-
-import styles from './PanelEditor.module.scss';
-
-interface PanelEditorContainerProps {
-	dashboardId: string;
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	/** Dismiss the editor overlay (clears the `editPanelId` query param). */
-	onClose: () => void;
-	/** Called after a successful save so the dashboard can refetch. */
-	onSaved: () => void;
-}
-
-/**
- * V2 panel editor rendered as a full-screen overlay on top of the dashboard
- * view (the dashboard stays mounted underneath). A resizable split holds the
- * live preview + query builder on the left and the configuration pane on the
- * right. Owns the draft state and the save round-trip.
- */
-function PanelEditorContainer({
-	dashboardId,
-	panelId,
-	panel,
-	onClose,
-	onSaved,
-}: PanelEditorContainerProps): JSX.Element {
-	const { draft, display, setDisplay, isDirty } = usePanelEditorDraft(panel);
-	const { save, isSaving } = usePanelEditorSave({ dashboardId, panelId });
-	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
-		id: 'panel-editor-v2',
-		storage: layoutStorage,
-	});
-
-	const onSave = useCallback(async (): Promise<void> => {
-		try {
-			await save(display);
-			toast.success('Panel saved');
-			onSaved();
-			onClose();
-		} catch {
-			toast.error('Failed to save panel');
-		}
-	}, [save, display, onSaved, onClose]);
-
-	// Portal to <body> so the fixed overlay escapes the dashboard content's
-	// stacking context (AppLayout pins `.app-content` at `z-index: 0`, which
-	// would otherwise trap the overlay below the side nav).
-	return createPortal(
-		<div className={styles.root} data-testid="panel-editor-v2">
-			<Header
-				isDirty={isDirty}
-				isSaving={isSaving}
-				onSave={onSave}
-				onClose={onClose}
-			/>
-			<ResizablePanelGroup
-				id="panel-editor-v2"
-				orientation="horizontal"
-				defaultLayout={defaultLayout}
-				onLayoutChanged={onLayoutChanged}
-			>
-				<ResizablePanel minSize="70%" maxSize="80%" defaultSize="75%">
-					<div className={styles.left}>
-						<PreviewPane panelId={panelId} panel={draft} />
-						<QueryBuilderPlaceholder />
-					</div>
-				</ResizablePanel>
-				<ResizableHandle withHandle />
-				<ResizablePanel minSize="20%" maxSize="30%" defaultSize="25%">
-					<ConfigPane display={display} onChangeDisplay={setDisplay} />
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>,
-		document.body,
-	);
-}
-
-export default PanelEditorContainer;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/layoutStorage.ts

@@ -1,17 +0,0 @@
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import setLocalStorageApi from 'api/browser/localstorage/set';
-
-/**
- * `Storage`-shaped adapter (just `getItem`/`setItem`, which is all
- * `useDefaultLayout` consumes) backed by the scoped localStorage wrappers. The
- * wrappers prefix keys with the URL base path, so the persisted resizable
- * layout stays isolated per deployment instead of touching the raw global.
- */
-const layoutStorage: Pick<Storage, 'getItem' | 'setItem'> = {
-	getItem: (key: string): string | null => getLocalStorageApi(key),
-	setItem: (key: string, value: string): void => {
-		setLocalStorageApi(key, value);
-	},
-};
-
-export default layoutStorage;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/types.ts

@@ -1,25 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-/** The panel display fields editable in milestone 1 of the V2 panel editor. */
-export interface PanelDisplayDraft {
-	name: string;
-	description: string;
-}
-
-/**
- * Local draft state for the panel being edited. The draft is kept as a perses
- * `DashboardtypesPanelDTO` so the live preview (which feeds the panel renderer)
- * and the save patch share a single shape — no intermediate translation.
- */
-export interface PanelEditorDraftApi {
-	/** The current (possibly edited) panel. Always a defined object once seeded. */
-	draft: DashboardtypesPanelDTO;
-	/** Read the current display values (name/description) for the config pane. */
-	display: PanelDisplayDraft;
-	/** Patch the panel's display (title/description). */
-	setDisplay: (next: Partial<PanelDisplayDraft>) => void;
-	/** True when the draft diverges from the originally-loaded panel. */
-	isDirty: boolean;
-	/** Restore the draft to the originally-loaded panel. */
-	reset: () => void;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/usePanelEditorDraft.ts

@@ -1,52 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { PanelDisplayDraft, PanelEditorDraftApi } from './types';
-
-function readDisplay(panel: DashboardtypesPanelDTO): PanelDisplayDraft {
-	return {
-		name: panel.spec?.display?.name ?? '',
-		description: panel.spec?.display?.description ?? '',
-	};
-}
-
-/**
- * Owns the editable draft of a single panel. Seeded once from the loaded panel
- * (`useState` initializer), then mutated locally until the user saves. Keeping
- * the draft in the perses `DashboardtypesPanelDTO` shape lets the preview pane
- * render it through the same renderer registry the dashboard uses, and lets the
- * save hook diff/patch it without any conversion.
- */
-export function usePanelEditorDraft(
-	initialPanel: DashboardtypesPanelDTO,
-): PanelEditorDraftApi {
-	const [draft, setDraft] = useState<DashboardtypesPanelDTO>(initialPanel);
-
-	const setDisplay = useCallback((next: Partial<PanelDisplayDraft>): void => {
-		setDraft((prev) => ({
-			...prev,
-			spec: {
-				...prev.spec,
-				display: {
-					...prev.spec?.display,
-					...next,
-				},
-			},
-		}));
-	}, []);
-
-	const reset = useCallback((): void => {
-		setDraft(initialPanel);
-	}, [initialPanel]);
-
-	const display = useMemo(() => readDisplay(draft), [draft]);
-
-	const isDirty = useMemo(() => {
-		const initial = readDisplay(initialPanel);
-		return (
-			initial.name !== display.name || initial.description !== display.description
-		);
-	}, [initialPanel, display]);
-
-	return { draft, display, setDisplay, isDirty, reset };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/usePanelEditorSave.ts

@@ -1,60 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import {
-	getGetDashboardV2QueryKey,
-	usePatchDashboardV2,
-} from 'api/generated/services/dashboard';
-import {
-	type DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesPatchOpDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type { PanelDisplayDraft } from './types';
-
-interface UsePanelEditorSaveArgs {
-	dashboardId: string;
-	panelId: string;
-}
-
-interface UsePanelEditorSaveApi {
-	save: (display: PanelDisplayDraft) => Promise<void>;
-	isSaving: boolean;
-	error: Error | null;
-}
-
-/**
- * Persists panel edits for the V2 editor via RFC-6902 JSON Patch.
- *
- * Milestone 1 only touches the panel's display (title/description), so it emits
- * a single `add` op against `/spec/panels/{panelId}/spec/display`. `add` doubles
- * as create-or-replace for the display object, so panels that loaded without a
- * display are handled without a separate existence check. Later milestones add
- * ops for queries and the per-kind plugin spec.
- */
-export function usePanelEditorSave({
-	dashboardId,
-	panelId,
-}: UsePanelEditorSaveArgs): UsePanelEditorSaveApi {
-	const queryClient = useQueryClient();
-	const { mutateAsync, isLoading, error } = usePatchDashboardV2();
-
-	const save = useCallback(
-		async (display: PanelDisplayDraft): Promise<void> => {
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: DashboardtypesPatchOpDTO.add,
-					path: `/spec/panels/${panelId}/spec/display`,
-					value: { name: display.name, description: display.description },
-				},
-			];
-
-			await mutateAsync({ pathParams: { id: dashboardId }, data: ops });
-			await queryClient.invalidateQueries(
-				getGetDashboardV2QueryKey({ id: dashboardId }),
-			);
-		},
-		[dashboardId, panelId, mutateAsync, queryClient],
-	);
-
-	return { save, isSaving: isLoading, error: (error as Error) ?? null };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useGroupByPerQuery.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import type { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-/**
- * Builds a record keyed by builder-query name to that query's groupBy keys
- * in the V1 `BaseAutocompleteData` shape — the shape `TimeSeries` and the
- * tooltip plugin consume. Conversion from v5 `GroupByKey` lives at this one
- * call site that needs the V1 shape; the rest of V2 panel code stays on
- * v5 types.
- */
-export function useGroupByPerQuery(
-	builderQueries: BuilderQuery[],
-): Record<string, BaseAutocompleteData[]> {
-	return useMemo(() => {
-		const result: Record<string, BaseAutocompleteData[]> = {};
-		builderQueries.forEach((q) => {
-			if (!q.name) {
-				return;
-			}
-			result[q.name] = (q.groupBy ?? []).map((g) => ({
-				key: g.name,
-				dataType: g.fieldDataType as BaseAutocompleteData['dataType'],
-				type: (g.fieldContext as BaseAutocompleteData['type']) ?? '',
-				id: '',
-			}));
-		});
-		return result;
-	}, [builderQueries]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useResponsiveFontSize.ts

@@ -1,48 +0,0 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
-
-const MIN_FONT_PX = 16;
-const MAX_FONT_PX = 60;
-// The value font is sized to a fraction of the container's smaller dimension so
-// it scales with the panel without overflowing.
-const FONT_SCALE_DIVISOR = 5;
-
-/**
- * Sizes a single large value to its container, recomputing on resize via a
- * ResizeObserver. Returns the ref to attach to the container and the current
- * font size (px) to apply to the value text.
- */
-export function useResponsiveFontSize(): {
-	containerRef: RefObject<HTMLDivElement>;
-	fontSize: string;
-} {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const [fontSize, setFontSize] = useState('2.5vw');
-
-	useEffect(() => {
-		const updateFontSize = (): void => {
-			if (!containerRef.current) {
-				return;
-			}
-			const { width, height } = containerRef.current.getBoundingClientRect();
-			const minDimension = Math.min(width, height);
-			const newSize = Math.max(
-				Math.min(minDimension / FONT_SCALE_DIVISOR, MAX_FONT_PX),
-				MIN_FONT_PX,
-			);
-			setFontSize(`${newSize}px`);
-		};
-
-		updateFontSize();
-
-		const resizeObserver = new ResizeObserver(updateFontSize);
-		if (containerRef.current) {
-			resizeObserver.observe(containerRef.current);
-		}
-
-		return (): void => {
-			resizeObserver.disconnect();
-		};
-	}, []);
-
-	return { containerRef, fontSize };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/index.ts

@@ -1,36 +0,0 @@
-import { definition as barChart } from './kinds/BarChartPanel/definition';
-import { definition as histogram } from './kinds/HistogramPanel/definition';
-import { definition as number } from './kinds/NumberPanel/definition';
-import { definition as pieChart } from './kinds/PieChartPanel/definition';
-import { definition as timeSeries } from './kinds/TimeSeriesPanel/definition';
-import type {
-	PanelRegistry,
-	RenderablePanelDefinition,
-} from './types/panelDefinition';
-import type { PanelKind } from './types/panelKind';
-
-// Pure assembly: each kind owns its own PanelDefinition (see
-// `kinds/<Kind>/definition.ts`). Registering a new panel = add its folder and a
-// single entry below — no other central file needs editing.
-export const PANELS: PanelRegistry = {
-	[timeSeries.kind]: timeSeries,
-	[barChart.kind]: barChart,
-	[histogram.kind]: histogram,
-	[number.kind]: number,
-	[pieChart.kind]: pieChart,
-};
-
-export function getPanelDefinition(
-	kind: string | undefined,
-): RenderablePanelDefinition | undefined {
-	if (!kind) {
-		return undefined;
-	}
-	// The registry is correlated by kind, so a string lookup yields a union over
-	// every kind's exactly-typed definition. The renderer cannot be validated
-	// against that union at the JSX boundary, so widen to the kind-agnostic
-	// surface here — the single, intentional cast for the whole panel system.
-	return PANELS[kind as PanelKind] as unknown as
-		| RenderablePanelDefinition
-		| undefined;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -1,175 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import {
-	flattenTimeSeries,
-	getExecStats,
-	getTimeSeriesResults,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
-import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
-import { useTimezone } from 'providers/Timezone';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
-import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
-
-import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildBarChartConfig } from './buildConfig';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function BarPanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-	onDragSelect,
-	dashboardPreference,
-	panelMode,
-}: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/BarChartPanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesBarChartPanelSpecDTO>(
-		() => (panel?.spec?.plugin?.spec ?? {}) as DashboardtypesBarChartPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	// X-scale clamps come from the request that produced the data (falls back
-	// to the global picker inside the helper). The generated request DTO is
-	// structurally the hand-written V5 request; the cast is the boundary.
-	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data?.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
-		return { minTimeScale: startTime, maxTimeScale: endTime };
-	}, [data?.requestPayload]);
-
-	const groupByPerQuery = useGroupByPerQuery(builderQueries);
-
-	const flatSeries = useMemo(
-		() =>
-			flattenTimeSeries(
-				getTimeSeriesResults(data?.response),
-				data?.legendMap ?? {},
-			),
-		[data?.response, data?.legendMap],
-	);
-
-	const config = useMemo(
-		() =>
-			buildBarChartConfig({
-				panelId,
-				spec,
-				builderQueries,
-				series: flatSeries,
-				stepIntervals: getExecStats(data?.response)?.stepIntervals,
-				isDarkMode,
-				timezone,
-				panelMode,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			panelId,
-			spec,
-			builderQueries,
-			flatSeries,
-			data?.response,
-			isDarkMode,
-			timezone,
-			panelMode,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
-			// Rebuild it on syncMode changes so the new chart instance starts from a
-			// clean config — otherwise switching to "No Sync" would inherit stale sync
-			// settings from the previous mode.
-			dashboardPreference?.syncMode,
-		],
-	);
-
-	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(() => {
-		return resolveLegendPosition(spec.legend?.position);
-	}, [spec.legend?.position]);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
-		),
-		[panelId],
-	);
-
-	// The uPlot key prop is the only way to force a full teardown and re-mount
-	// of the chart. Including syncMode/syncFilterMode in the key ensures changes
-	// to these preferences trigger a fresh chart instance, preventing stale
-	// sync wiring from being inherited.
-	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="bar-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					key={key}
-					config={config}
-					data={chartData}
-					legendConfig={{ position: legendPosition }}
-					groupByPerQuery={groupByPerQuery}
-					canPinTooltip
-					timezone={timezone}
-					yAxisUnit={spec.formatting?.unit}
-					decimalPrecision={decimalPrecision}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					syncMode={dashboardPreference?.syncMode}
-					syncFilterMode={dashboardPreference?.syncFilterMode}
-					isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default BarPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/buildConfig.ts

@@ -1,138 +0,0 @@
-import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { toClickPluginPayload } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-export interface BuildBarChartConfigArgs {
-	panelId: string;
-	spec: DashboardtypesBarChartPanelSpecDTO;
-	/**
-	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
-	 * Powers per-query legend resolution; empty for non-builder panels.
-	 */
-	builderQueries: BuilderQuery[];
-	/** Flattened V5 series (see `flattenTimeSeries`). */
-	series: PanelSeries[];
-	/** Per-query step intervals from the response exec stats. */
-	stepIntervals?: Record<string, number>;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a Bar chart panel.
- *
- * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
- * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
- * in the Bar-specific concerns: optional stacking via uPlot bands, plus
- * one bar series per result row.
- */
-export function buildBarChartConfig({
-	panelId,
-	spec,
-	builderQueries,
-	series,
-	stepIntervals,
-	isDarkMode,
-	timezone,
-	panelMode,
-	onDragSelect,
-	onClick,
-	minTimeScale,
-	maxTimeScale,
-}: BuildBarChartConfigArgs): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.BAR,
-		isDarkMode,
-		timezone,
-		panelMode,
-		isLogScale: spec.axes?.isLogScale,
-		softMin: spec.axes?.softMin ?? undefined,
-		softMax: spec.axes?.softMax ?? undefined,
-		formatting: spec.formatting,
-		thresholds: spec.thresholds,
-		stepIntervals,
-		clickPayload: toClickPluginPayload(series),
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-		onClick,
-	});
-
-	addSeries({
-		builder,
-		spec,
-		builderQueries,
-		series,
-		stepIntervals,
-		isDarkMode,
-	});
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesBarChartPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	series: PanelSeries[];
-	stepIntervals?: Record<string, number>;
-	isDarkMode: boolean;
-}
-
-/**
- * Adds one bar series per flattened V5 series, plus uPlot bands for stacking
- * when `spec.visualization.stackedBarChart` is set. Each series receives its
- * own per-query step interval so bar widths line up with the actual
- * sampling cadence reported by the backend.
- *
- * Order must match `prepareAlignedData` — both iterate the same flat list.
- */
-function addSeries({
-	builder,
-	spec,
-	builderQueries,
-	series,
-	stepIntervals,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	const colorMapping = spec.legend?.customColors ?? {};
-
-	if (spec.visualization?.stackedBarChart) {
-		// uPlot uses 1-based series indices (index 0 is the timestamp axis);
-		// `+1` keeps the band targets aligned with the series we're about to add.
-		builder.setBands(getInitialStackedBands(series.length + 1));
-	}
-
-	series.forEach((s) => {
-		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
-		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
-		const stepInterval = s.queryName ? stepIntervals?.[s.queryName] : undefined;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping,
-			isDarkMode,
-			stepInterval,
-			metric: s.labels,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,14 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
-	kind: 'signoz/BarChartPanel',
-	displayName: 'Bar Chart',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-	actions: { view: true, edit: true, download: false, createAlert: true },
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -1,9 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{ kind: 'formatting', controls: { unit: true, decimals: true } },
-	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-	{ kind: 'chartAppearance', controls: { stacked: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -1,139 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import Histogram from 'container/DashboardContainer/visualization/charts/Histogram/Histogram';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import {
-	flattenTimeSeries,
-	getTimeSeriesResults,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
-import { useTimezone } from 'providers/Timezone';
-import type uPlot from 'uplot';
-
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import { resolveLegendPosition } from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildHistogramConfig } from './buildConfig';
-import { prepareHistogramData } from './prepareData';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function HistogramPanelRenderer({
-	panelId,
-	panel,
-	data,
-	panelMode,
-	onClick,
-}: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/HistogramPanel'`, so the cast is a
-	// documented boundary narrowing.
-	const spec = useMemo<DashboardtypesHistogramPanelSpecDTO>(
-		() =>
-			(panel?.spec?.plugin?.spec ?? {}) as DashboardtypesHistogramPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	const flatSeries = useMemo(
-		() =>
-			flattenTimeSeries(
-				getTimeSeriesResults(data?.response),
-				data?.legendMap ?? {},
-			),
-		[data?.response, data?.legendMap],
-	);
-
-	const config = useMemo(
-		() =>
-			buildHistogramConfig({
-				panelId,
-				spec,
-				builderQueries,
-				series: flatSeries,
-				isDarkMode,
-				timezone,
-				panelMode,
-			}),
-		[panelId, spec, builderQueries, flatSeries, isDarkMode, timezone, panelMode],
-	);
-
-	const chartData = useMemo(
-		() =>
-			prepareHistogramData({
-				series: flatSeries,
-				bucketWidth: spec.histogramBuckets?.bucketWidth ?? undefined,
-				bucketCount: spec.histogramBuckets?.bucketCount ?? undefined,
-				mergeAllActiveQueries: spec.histogramBuckets?.mergeAllActiveQueries,
-			}),
-		[
-			flatSeries,
-			spec.histogramBuckets?.bucketWidth,
-			spec.histogramBuckets?.bucketCount,
-			spec.histogramBuckets?.mergeAllActiveQueries,
-		],
-	);
-
-	const legendPosition = useMemo(
-		() => resolveLegendPosition(spec.legend?.position),
-		[spec.legend?.position],
-	);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter
-				id={panelId}
-				isPinned={isPinned}
-				dismiss={dismiss}
-				canDrilldown={false}
-			/>
-		),
-		[panelId],
-	);
-
-	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="histogram-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<Histogram
-					key={panelId}
-					config={config}
-					data={chartData as uPlot.AlignedData}
-					legendConfig={{ position: legendPosition }}
-					canPinTooltip
-					isQueriesMerged={isQueriesMerged}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/buildConfig.ts

@@ -1,129 +0,0 @@
-import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import getLabelName from 'lib/getLabelName';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-const POINT_SIZE = 5;
-const BAR_WIDTH_FACTOR = 1;
-// Merged-series colors mirror the V1 default — single histogram bin gets a
-// fixed blue-ish pair so the merged view looks the same as before.
-const MERGED_SERIES_LINE_COLOR = '#3f5ecc';
-const MERGED_SERIES_FILL_COLOR = '#4E74F8';
-
-export interface BuildHistogramConfigArgs {
-	panelId: string;
-	spec: DashboardtypesHistogramPanelSpecDTO;
-	/** Builder queries on this panel — used to resolve per-series labels. */
-	builderQueries: BuilderQuery[];
-	/** Flattened V5 series (see `flattenTimeSeries`). */
-	series: PanelSeries[];
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a Histogram panel.
- *
- * Unlike time-axis panels, histograms have no time scale and no drag-to-zoom.
- * We still reuse `buildBaseConfig` for the consistent scaffolding (thresholds,
- * axes, click plugin) but then override the X/Y scales to be auto-linear
- * (`time: false, auto: true`) and install a histogram-specific cursor that
- * disables drag-pan and tightens focus proximity.
- */
-export function buildHistogramConfig({
-	panelId,
-	spec,
-	builderQueries,
-	series,
-	isDarkMode,
-	timezone,
-	panelMode,
-}: BuildHistogramConfigArgs): UPlotConfigBuilder {
-	// Histograms have no time axis — no stepIntervals, and no click plugin
-	// (the renderer passes no onClick), so the base config needs no response.
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.HISTOGRAM,
-		isDarkMode,
-		timezone,
-		panelMode,
-	});
-
-	builder.setCursor({
-		drag: { x: false, y: false, setScale: true },
-		focus: { prox: 1e3 },
-	});
-
-	// Override the time-axis scales from `buildBaseConfig` — histograms are
-	// distribution plots, not time series.
-	builder.addScale({ scaleKey: 'x', time: false, auto: true });
-	builder.addScale({ scaleKey: 'y', time: false, auto: true, min: 0 });
-
-	addSeries({ builder, spec, builderQueries, series, isDarkMode });
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesHistogramPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	series: PanelSeries[];
-	isDarkMode: boolean;
-}
-
-/**
- * Adds histogram bar series to the builder. When `mergeAllActiveQueries` is
- * set, `prepareHistogramData` produces a single Y column, so we add exactly
- * one series with the fixed merged-mode colors. Otherwise one series per
- * result row, with labels resolved via the standard legend matrix.
- */
-function addSeries({
-	builder,
-	spec,
-	builderQueries,
-	series,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	const colorMapping = spec.legend?.customColors ?? {};
-	const mergeAllActiveQueries =
-		spec.histogramBuckets?.mergeAllActiveQueries ?? false;
-
-	if (mergeAllActiveQueries) {
-		builder.addSeries({
-			scaleKey: 'y',
-			label: '',
-			drawStyle: DrawStyle.Histogram,
-			colorMapping,
-			barWidthFactor: BAR_WIDTH_FACTOR,
-			pointSize: POINT_SIZE,
-			lineColor: MERGED_SERIES_LINE_COLOR,
-			fillColor: MERGED_SERIES_FILL_COLOR,
-			isDarkMode,
-		});
-		return;
-	}
-
-	series.forEach((s) => {
-		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
-		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			label,
-			drawStyle: DrawStyle.Histogram,
-			colorMapping,
-			barWidthFactor: BAR_WIDTH_FACTOR,
-			pointSize: POINT_SIZE,
-			isDarkMode,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,14 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
-	kind: 'signoz/HistogramPanel',
-	displayName: 'Histogram',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-	actions: { view: true, edit: true, download: false, createAlert: true },
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/prepareData.ts

@@ -1,148 +0,0 @@
-import { histogramBucketSizes } from '@grafana/data';
-import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
-import {
-	buildHistogramBuckets,
-	mergeAlignedDataTables,
-	prependNullBinToFirstHistogramSeries,
-	replaceUndefinedWithNullInAlignedData,
-} from 'container/DashboardContainer/visualization/panels/utils/histogram';
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { AlignedData } from 'uplot';
-import { incrRoundDn, roundDecimals } from 'utils/round';
-
-export interface PrepareHistogramDataArgs {
-	/** Flattened V5 series (see `flattenTimeSeries`). */
-	series: PanelSeries[];
-	bucketWidth?: number;
-	bucketCount?: number;
-	mergeAllActiveQueries?: boolean;
-}
-
-const BUCKET_OFFSET = 0;
-const sortAscending = (a: number, b: number): number => a - b;
-
-/**
- * Bins raw series values into a uPlot-aligned histogram. Picks a bucket size
- * either from `bucketWidth` (explicit override) or the smallest predefined
- * Grafana bucket that fits the data's `range / bucketCount` target while
- * staying ≥ the data's smallest non-zero delta (so we never sub-divide below
- * the resolution of the input).
- *
- * Empty input → `[[]]` (a valid empty AlignedData uPlot accepts).
- */
-export function prepareHistogramData({
-	series,
-	bucketWidth,
-	bucketCount = DEFAULT_BUCKET_COUNT,
-	mergeAllActiveQueries = false,
-}: PrepareHistogramDataArgs): AlignedData {
-	const values = extractNumericValues(series);
-	if (values.length === 0) {
-		return [[]];
-	}
-
-	const sorted = [...values].sort(sortAscending);
-	const range = sorted[sorted.length - 1] - sorted[0];
-	const smallestDelta = computeSmallestDelta(sorted);
-	let bucketSize = selectBucketSize({
-		range,
-		bucketCount,
-		smallestDelta,
-		bucketWidthOverride: bucketWidth,
-	});
-	if (bucketSize <= 0) {
-		bucketSize = range > 0 ? range / bucketCount : 1;
-	}
-
-	const getBucket = (v: number): number =>
-		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
-
-	const frames = buildFrames(series, mergeAllActiveQueries);
-	// Merged mode folds every query into frame 0 and leaves trailing empty
-	// frames — drop those. Per-query mode must keep one column per result row
-	// (even empty queries), or the data column count drifts below the series
-	// count `buildHistogramConfig` adds per row → uPlot renders nothing.
-	const histograms: AlignedData[] = frames
-		.filter((frame) => !mergeAllActiveQueries || frame.length > 0)
-		.map((frame) => buildHistogramBuckets(frame, getBucket, sortAscending));
-
-	if (histograms.length === 0) {
-		return [[]];
-	}
-
-	const merged = mergeAlignedDataTables(histograms);
-	replaceUndefinedWithNullInAlignedData(merged);
-	prependNullBinToFirstHistogramSeries(merged, bucketSize);
-	return merged;
-}
-
-// Non-finite samples degrade to 0 (legacy `parseFloat(...) || 0` parity).
-function toBinnableValue(value: number): number {
-	return Number.isFinite(value) ? value : 0;
-}
-
-function extractNumericValues(series: PanelSeries[]): number[] {
-	const values: number[] = [];
-	for (const s of series) {
-		for (const point of s.values) {
-			values.push(toBinnableValue(point.value));
-		}
-	}
-	return values;
-}
-
-function computeSmallestDelta(sortedValues: number[]): number {
-	if (sortedValues.length <= 1) {
-		return 0;
-	}
-	let smallest = Infinity;
-	for (let i = 1; i < sortedValues.length; i++) {
-		const delta = sortedValues[i] - sortedValues[i - 1];
-		if (delta > 0) {
-			smallest = Math.min(smallest, delta);
-		}
-	}
-	return smallest === Infinity ? 0 : smallest;
-}
-
-function selectBucketSize({
-	range,
-	bucketCount,
-	smallestDelta,
-	bucketWidthOverride,
-}: {
-	range: number;
-	bucketCount: number;
-	smallestDelta: number;
-	bucketWidthOverride?: number;
-}): number {
-	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
-		return bucketWidthOverride;
-	}
-	const targetSize = range / bucketCount;
-	for (const candidate of histogramBucketSizes) {
-		if (targetSize < candidate && candidate >= smallestDelta) {
-			return candidate;
-		}
-	}
-	return 0;
-}
-
-// When merging is on, fold all frames into the first; the trailing empty
-// frames stay in the array so downstream `.filter(length > 0)` drops them.
-function buildFrames(
-	series: PanelSeries[],
-	mergeAllActiveQueries: boolean,
-): number[][] {
-	const frames: number[][] = series.map((s) =>
-		s.values.map((point) => toBinnableValue(point.value)),
-	);
-	if (mergeAllActiveQueries && frames.length > 1) {
-		const first = frames[0];
-		for (let i = 1; i < frames.length; i++) {
-			first.push(...frames[i]);
-			frames[i] = [];
-		}
-	}
-	return frames;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -1,6 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'buckets', controls: { count: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -1,81 +0,0 @@
-import { useMemo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesNumberPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
-import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
-
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import { formatPanelValue } from '../../utils/formatPanelValue';
-import { resolveDecimalPrecision } from '../../utils/chartAppearanceMappings';
-
-import { prepareNumberData } from './prepareData';
-import { mapNumberThresholds } from './utils';
-import ValueDisplay from './components/ValueDisplay/ValueDisplay';
-
-function NumberPanelRenderer({
-	panel,
-	data,
-}: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/NumberPanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
-		() => (panel?.spec?.plugin?.spec ?? {}) as DashboardtypesNumberPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const value = useMemo(
-		() =>
-			prepareNumberData(
-				prepareScalarTables({
-					results: getScalarResults(data?.response),
-					legendMap: data?.legendMap ?? {},
-					requestPayload: data?.requestPayload,
-				}),
-			),
-		[data?.response, data?.legendMap, data?.requestPayload],
-	);
-
-	const thresholds = useMemo(
-		() => mapNumberThresholds(spec.thresholds),
-		[spec.thresholds],
-	);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const unit = spec.formatting?.unit;
-
-	// Precision is applied regardless of whether a unit is set (see
-	// `formatPanelValue`), so decimal-precision changes always take effect.
-	const formattedValue = useMemo(
-		() => (value === null ? '' : formatPanelValue(value, unit, decimalPrecision)),
-		[value, unit, decimalPrecision],
-	);
-
-	return (
-		<div
-			data-testid="number-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{value === null ? (
-				<Typography.Text data-testid="number-panel-no-data">
-					No Data
-				</Typography.Text>
-			) : (
-				<ValueDisplay
-					value={formattedValue}
-					rawValue={value}
-					thresholds={thresholds}
-					unit={unit}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default NumberPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/__tests__/Renderer.test.tsx

@@ -1,155 +0,0 @@
-import {
-	DashboardtypesComparisonOperatorDTO,
-	type DashboardtypesNumberPanelSpecDTO,
-	type DashboardtypesPanelDTO,
-	DashboardtypesThresholdFormatDTO,
-	type QueryRangeV5200,
-} from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { render } from 'tests/test-utils';
-
-import { BaseRendererProps } from '../../../types/rendererProps';
-import BaseNumberPanelRenderer from '../Renderer';
-
-// The kind's interaction map is `Record<string, never>`, which makes the strict
-// `PanelRendererProps<'signoz/NumberPanel'>` intersection impossible to satisfy
-// with a literal. NumberPanel reads no interaction props, so render it against
-// the base prop surface.
-const NumberPanelRenderer =
-	BaseNumberPanelRenderer as React.FC<BaseRendererProps>;
-
-// ValueDisplay observes its container to size the font.
-window.ResizeObserver =
-	window.ResizeObserver ||
-	jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-
-function panelWith(
-	spec: DashboardtypesNumberPanelSpecDTO,
-): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: { plugin: { kind: 'signoz/NumberPanel', spec } },
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-// V5 scalar response: one table per query, value in the aggregation column.
-function dataWith(value: string | number): PanelQueryData {
-	return {
-		response: {
-			status: 'success',
-			data: {
-				type: 'scalar',
-				data: {
-					results: [
-						{
-							queryName: 'A',
-							columns: [
-								{
-									name: '__result',
-									queryName: 'A',
-									columnType: 'aggregation',
-									aggregationIndex: 0,
-								},
-							],
-							data: [[value]],
-						},
-					],
-				},
-			},
-		} as unknown as QueryRangeV5200,
-		requestPayload: undefined,
-		legendMap: {},
-	};
-}
-
-const emptyData: PanelQueryData = {
-	response: {
-		status: 'success',
-		data: { type: 'scalar', data: { results: [] } },
-	} as unknown as QueryRangeV5200,
-	requestPayload: undefined,
-	legendMap: {},
-};
-
-// NumberPanel adds no interaction props (its interaction map is
-// `Record<string, never>`), so the base renderer props fully describe it.
-function renderPanel(
-	props: Partial<BaseRendererProps>,
-): ReturnType<typeof render> {
-	const baseProps: BaseRendererProps = {
-		panelId: 'panel-1',
-		panel: panelWith({}),
-		data: undefined,
-		isLoading: false,
-		error: null,
-		panelMode: PanelMode.DASHBOARD_VIEW,
-		...props,
-	};
-	return render(<NumberPanelRenderer {...baseProps} />);
-}
-
-describe('NumberPanelRenderer', () => {
-	it('renders the value with its y-axis unit', () => {
-		const { getByText } = renderPanel({
-			panel: panelWith({ formatting: { unit: 'ms' } }),
-			data: dataWith('295.4299833508185'),
-		});
-
-		expect(getByText('295.43')).toBeInTheDocument();
-		expect(getByText('ms')).toBeInTheDocument();
-	});
-
-	// Regression: with no unit configured, decimal precision must still apply.
-	// Previously the renderer fell back to `value.toString()` whenever the unit
-	// was empty, so precision changes had no effect on unitless panels.
-	it('applies decimal precision even when no unit is set', () => {
-		const { getByText, queryByText } = renderPanel({
-			panel: panelWith({}),
-			data: dataWith('3.14159'),
-		});
-
-		expect(getByText('3.14')).toBeInTheDocument();
-		expect(queryByText('3.14159')).not.toBeInTheDocument();
-	});
-
-	it('renders No Data when the response has no scalar results', () => {
-		const { getByTestId } = renderPanel({ data: emptyData });
-
-		expect(getByTestId('number-panel-no-data')).toBeInTheDocument();
-	});
-
-	it('renders No Data when the response is absent', () => {
-		const { getByTestId } = renderPanel({ data: undefined });
-
-		expect(getByTestId('number-panel-no-data')).toBeInTheDocument();
-	});
-
-	it('surfaces the conflicting-thresholds indicator when a value matches multiple thresholds', () => {
-		const { getByTestId } = renderPanel({
-			panel: panelWith({
-				thresholds: [
-					{
-						color: '#f00',
-						operator: DashboardtypesComparisonOperatorDTO.above,
-						value: 0,
-						format: DashboardtypesThresholdFormatDTO.background,
-					},
-					{
-						color: '#0f0',
-						operator: DashboardtypesComparisonOperatorDTO.above,
-						value: 100,
-						format: DashboardtypesThresholdFormatDTO.background,
-					},
-				],
-			}),
-			data: dataWith('295.4299833508185'),
-		});
-
-		expect(getByTestId('conflicting-thresholds')).toBeInTheDocument();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/__tests__/prepareData.test.ts

@@ -1,62 +0,0 @@
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-import { prepareNumberData } from '../prepareData';
-
-function tableWith(
-	columns: PanelTable['columns'],
-	rows: PanelTable['rows'],
-): PanelTable {
-	return { queryName: 'A', legend: '', columns, rows };
-}
-
-describe('prepareNumberData', () => {
-	it('returns null for no tables', () => {
-		expect(prepareNumberData([])).toBeNull();
-	});
-
-	it('reads the first row of the value column', () => {
-		const table = tableWith(
-			[
-				{ name: 'group', queryName: 'A', isValueColumn: false, id: 'group' },
-				{ name: 'value', queryName: 'A', isValueColumn: true, id: 'val' },
-			],
-			[
-				{ data: { group: 'prod', val: '295.4299833508185' } },
-				{ data: { group: 'dev', val: '7' } },
-			],
-		);
-
-		expect(prepareNumberData([table])).toBeCloseTo(295.43, 2);
-	});
-
-	it('falls back to the row first value when no column is tagged isValueColumn', () => {
-		const table = tableWith(
-			[{ name: 'value', queryName: 'A', isValueColumn: false, id: 'value' }],
-			[{ data: { value: '7' } }],
-		);
-
-		expect(prepareNumberData([table])).toBe(7);
-	});
-
-	it('skips empty tables and reads the first one with rows', () => {
-		const empty = tableWith(
-			[{ name: 'value', queryName: 'A', isValueColumn: true, id: 'A' }],
-			[],
-		);
-		const filled = tableWith(
-			[{ name: 'value', queryName: 'B', isValueColumn: true, id: 'B' }],
-			[{ data: { B: 42 } }],
-		);
-
-		expect(prepareNumberData([empty, filled])).toBe(42);
-	});
-
-	it('returns null when the value is non-numeric', () => {
-		const table = tableWith(
-			[{ name: 'value', queryName: 'A', isValueColumn: true, id: 'A' }],
-			[{ data: { A: 'n/a' } }],
-		);
-
-		expect(prepareNumberData([table])).toBeNull();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/__tests__/utils.test.ts

@@ -1,99 +0,0 @@
-import {
-	DashboardtypesComparisonOperatorDTO,
-	DashboardtypesComparisonThresholdDTO,
-	DashboardtypesThresholdFormatDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { mapNumberThresholds } from '../utils';
-
-describe('mapNumberThresholds', () => {
-	it('returns [] for null / undefined / empty', () => {
-		expect(mapNumberThresholds(null)).toStrictEqual([]);
-		expect(mapNumberThresholds(undefined)).toStrictEqual([]);
-		expect(mapNumberThresholds([])).toStrictEqual([]);
-	});
-
-	it('maps comparison operators to symbol operators', () => {
-		const thresholds: DashboardtypesComparisonThresholdDTO[] = [
-			{
-				color: '#f00',
-				operator: DashboardtypesComparisonOperatorDTO.above,
-				value: 1,
-			},
-			{
-				color: '#0f0',
-				operator: DashboardtypesComparisonOperatorDTO.below,
-				value: 2,
-			},
-			{
-				color: '#00f',
-				operator: DashboardtypesComparisonOperatorDTO.above_or_equal,
-				value: 3,
-			},
-			{
-				color: '#ff0',
-				operator: DashboardtypesComparisonOperatorDTO.below_or_equal,
-				value: 4,
-			},
-			{
-				color: '#0ff',
-				operator: DashboardtypesComparisonOperatorDTO.equal,
-				value: 5,
-			},
-		];
-
-		const mapped = mapNumberThresholds(thresholds);
-
-		expect(mapped.map((t) => t.operator)).toStrictEqual([
-			'>',
-			'<',
-			'>=',
-			'<=',
-			'=',
-		]);
-	});
-
-	it('maps not_equal to !=', () => {
-		const mapped = mapNumberThresholds([
-			{
-				color: '#f00',
-				operator: DashboardtypesComparisonOperatorDTO.not_equal,
-				value: 1,
-			},
-		]);
-
-		expect(mapped[0].operator).toBe('!=');
-	});
-
-	it('maps format and carries value/unit/color', () => {
-		const mapped = mapNumberThresholds([
-			{
-				color: '#abcdef',
-				operator: DashboardtypesComparisonOperatorDTO.above,
-				value: 100,
-				unit: 'ms',
-				format: DashboardtypesThresholdFormatDTO.background,
-			},
-		]);
-
-		expect(mapped[0]).toStrictEqual({
-			color: '#abcdef',
-			operator: '>',
-			value: 100,
-			unit: 'ms',
-			format: 'background',
-		});
-	});
-
-	it('maps text format to text', () => {
-		const mapped = mapNumberThresholds([
-			{
-				color: '#000',
-				value: 1,
-				format: DashboardtypesThresholdFormatDTO.text,
-			},
-		]);
-
-		expect(mapped[0].format).toBe('text');
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueDisplay/ValueDisplay.module.scss

@@ -1,36 +0,0 @@
-.container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-}
-
-.textContainer {
-	display: flex;
-	flex-direction: row;
-	align-items: baseline;
-	justify-content: center;
-	flex-wrap: nowrap;
-}
-
-.valueText {
-	text-align: center;
-	font-weight: 400;
-}
-
-.conflictBackground {
-	position: absolute;
-	right: 10px;
-	bottom: 10px;
-}
-
-.conflictText {
-	margin-left: 10px;
-	margin-top: 20px;
-}
-
-.conflictIcon {
-	color: var(--warning-background);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueDisplay/ValueDisplay.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tooltip } from 'antd';
-import { CircleAlert } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import type { PanelThreshold } from '../../../../types/threshold';
-import { resolveActiveThreshold } from '../../../../utils/evaluateThresholds';
-
-import { parseFormattedValue } from '../../../../utils/parseFormattedValue';
-import styles from './ValueDisplay.module.scss';
-import { useResponsiveFontSize } from '../../../../hooks/useResponsiveFontSize';
-import ValueUnit from '../ValueUnit/ValueUnit';
-
-interface ValueDisplayProps {
-	/** The pre-formatted value string (may include a unit label). */
-	value: string;
-	/** The raw numeric value, used for threshold evaluation. */
-	rawValue: number;
-	thresholds: PanelThreshold[];
-	/** The panel's unit, used to convert threshold units before comparison. */
-	unit?: string;
-}
-
-/**
- * Renders a single large scalar with optional prefix/suffix units and threshold
- * recoloring (text or background). A V2-native replacement for the V1
- * `ValueGraph` — depends only on V2 threshold utilities and the shared icon/
- * typography primitives.
- */
-function ValueDisplay({
-	value,
-	rawValue,
-	thresholds,
-	unit,
-}: ValueDisplayProps): JSX.Element {
-	const { t } = useTranslation(['valueGraph']);
-	const { containerRef, fontSize } = useResponsiveFontSize();
-
-	const { numericValue, prefixUnit, suffixUnit } = useMemo(
-		() => parseFormattedValue(value),
-		[value],
-	);
-
-	const { threshold, isConflicting } = useMemo(
-		() => resolveActiveThreshold(thresholds, rawValue, unit),
-		[thresholds, rawValue, unit],
-	);
-
-	const isBackground = threshold?.format === 'background';
-	const textColor = threshold?.format === 'text' ? threshold.color : undefined;
-	const backgroundColor = isBackground ? threshold?.color : undefined;
-
-	return (
-		<div
-			ref={containerRef}
-			className={styles.container}
-			style={{ backgroundColor }}
-		>
-			<div className={styles.textContainer}>
-				{prefixUnit && (
-					<ValueUnit
-						type="prefix"
-						unit={prefixUnit}
-						color={textColor}
-						fontSize={fontSize}
-					/>
-				)}
-				<Typography.Text
-					className={styles.valueText}
-					data-testid="number-panel-value"
-					style={{ color: textColor, fontSize }}
-				>
-					{numericValue}
-				</Typography.Text>
-				{suffixUnit && (
-					<ValueUnit
-						type="suffix"
-						unit={suffixUnit}
-						color={textColor}
-						fontSize={fontSize}
-					/>
-				)}
-			</div>
-			{isConflicting && (
-				<div
-					className={isBackground ? styles.conflictBackground : styles.conflictText}
-				>
-					<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
-						<CircleAlert
-							className={styles.conflictIcon}
-							data-testid="conflicting-thresholds"
-							size="md"
-						/>
-					</Tooltip>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ValueDisplay;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueUnit/ValueUnit.module.scss

@@ -1,5 +0,0 @@
-.unit {
-	margin-left: 4px;
-	font-weight: 300;
-	opacity: 0.8;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueUnit/ValueUnit.tsx

@@ -1,31 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './ValueUnit.module.scss';
-
-interface ValueUnitProps {
-	type: 'prefix' | 'suffix';
-	unit: string;
-	/** Text color, set only when a "text" threshold is active. */
-	color?: string;
-	fontSize: string;
-}
-
-/** A prefix/suffix unit label rendered alongside the numeric value. */
-function ValueUnit({
-	type,
-	unit,
-	color,
-	fontSize,
-}: ValueUnitProps): JSX.Element {
-	return (
-		<Typography.Text
-			className={styles.unit}
-			data-testid={`value-display-${type}-unit`}
-			style={{ color, fontSize: `calc(${fontSize} * 0.7)` }}
-		>
-			{unit}
-		</Typography.Text>
-	);
-}
-
-export default ValueUnit;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -1,14 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/NumberPanel'> = {
-	kind: 'signoz/NumberPanel',
-	displayName: 'Number',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-	actions: { view: true, edit: true, download: false, createAlert: true },
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/prepareData.ts

@@ -1,33 +0,0 @@
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-/**
- * Reduces the scalar tables of a V5 response to the single number a
- * NumberPanel renders.
- *
- * V2 always issues `requestType: 'scalar'` for VALUE panels, so the response
- * is a scalar table per query (see `prepareScalarTables`). The value is the
- * first row's `isValueColumn` cell of the first table that has rows —
- * falling back to the row's first cell when no column is marked as the
- * value (mirrors the V1 `formatForWeb` fallback read).
- *
- * Returns `null` when there is no numeric value to show, which the renderer
- * maps to the "No Data" state.
- */
-export function prepareNumberData(tables: PanelTable[]): number | null {
-	for (const table of tables) {
-		if (table.rows.length === 0) {
-			continue;
-		}
-		const row = table.rows[0].data;
-		const valueColumn = table.columns.find((column) => column.isValueColumn);
-		const raw = valueColumn
-			? row[valueColumn.id || valueColumn.name]
-			: Object.values(row)[0];
-		const value = Number(raw);
-		if (Number.isFinite(value)) {
-			return value;
-		}
-	}
-
-	return null;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts

@@ -1,8 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-// A number panel renders one scalar — no axes, legend, or stacking. Just value
-// formatting and thresholds that recolor the value/background.
-export const sections: SectionConfig[] = [
-	{ kind: 'formatting', controls: { unit: true, decimals: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/utils.ts

@@ -1,54 +0,0 @@
-import {
-	DashboardtypesComparisonOperatorDTO,
-	DashboardtypesComparisonThresholdDTO,
-	DashboardtypesThresholdFormatDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type {
-	PanelThreshold,
-	ThresholdComparisonOperator,
-	ThresholdDisplayFormat,
-} from '../../types/threshold';
-
-// Perses comparison operators → the symbol operators V2 threshold evaluation
-// uses.
-const OPERATOR_MAP: Record<
-	DashboardtypesComparisonOperatorDTO,
-	ThresholdComparisonOperator
-> = {
-	[DashboardtypesComparisonOperatorDTO.above]: '>',
-	[DashboardtypesComparisonOperatorDTO.below]: '<',
-	[DashboardtypesComparisonOperatorDTO.above_or_equal]: '>=',
-	[DashboardtypesComparisonOperatorDTO.below_or_equal]: '<=',
-	[DashboardtypesComparisonOperatorDTO.equal]: '=',
-	[DashboardtypesComparisonOperatorDTO.not_equal]: '!=',
-};
-
-const FORMAT_MAP: Record<
-	DashboardtypesThresholdFormatDTO,
-	ThresholdDisplayFormat
-> = {
-	[DashboardtypesThresholdFormatDTO.text]: 'text',
-	[DashboardtypesThresholdFormatDTO.background]: 'background',
-};
-
-/**
- * Maps the panel-spec threshold shape (`ComparisonThresholdDTO`) onto the
- * V2-native `PanelThreshold` consumed by `ValueDisplay` / threshold
- * evaluation. No dependency on the V1 `ThresholdProps` shape.
- */
-export function mapNumberThresholds(
-	thresholds: DashboardtypesComparisonThresholdDTO[] | null | undefined,
-): PanelThreshold[] {
-	if (!thresholds || thresholds.length === 0) {
-		return [];
-	}
-
-	return thresholds.map((threshold) => ({
-		color: threshold.color,
-		operator: threshold.operator ? OPERATOR_MAP[threshold.operator] : undefined,
-		value: threshold.value,
-		unit: threshold.unit,
-		format: threshold.format ? FORMAT_MAP[threshold.format] : undefined,
-	}));
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -1,88 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import type { DashboardtypesPieChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import Pie from 'container/DashboardContainer/visualization/charts/Pie/Pie';
-import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
-import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
-
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-
-import { preparePieData } from './prepareData';
-
-function PiePanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-}: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/PieChartPanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesPieChartPanelSpecDTO>(
-		() => (panel?.spec?.plugin?.spec ?? {}) as DashboardtypesPieChartPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const slices = useMemo(
-		() =>
-			preparePieData({
-				tables: prepareScalarTables({
-					results: getScalarResults(data?.response),
-					legendMap: data?.legendMap ?? {},
-					requestPayload: data?.requestPayload,
-				}),
-				customColors: spec.legend?.customColors,
-				isDarkMode,
-			}),
-		[
-			data?.response,
-			data?.legendMap,
-			data?.requestPayload,
-			spec.legend?.customColors,
-			isDarkMode,
-		],
-	);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(
-		() => resolveLegendPosition(spec.legend?.position),
-		[spec.legend?.position],
-	);
-
-	const handleSliceClick = useCallback(
-		(slice: PieSlice) => {
-			onClick?.({ label: slice.label, value: slice.value });
-		},
-		[onClick],
-	);
-
-	return (
-		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
-			<Pie
-				data={slices}
-				yAxisUnit={spec.formatting?.unit}
-				decimalPrecision={decimalPrecision}
-				isDarkMode={isDarkMode}
-				position={legendPosition}
-				id={panelId}
-				onSliceClick={handleSliceClick}
-				data-testid="pie-chart"
-			/>
-		</div>
-	);
-}
-
-export default PiePanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,14 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
-	kind: 'signoz/PieChartPanel',
-	displayName: 'Pie Chart',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-	actions: { view: true, edit: true, download: false, createAlert: true },
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -1,58 +0,0 @@
-import { themeColors } from 'constants/theme';
-import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-export interface PreparePieDataArgs {
-	/** Scalar tables from the V5 response (see `prepareScalarTables`). */
-	tables: PanelTable[];
-	/** Per-label colour overrides from `spec.legend.customColors`. */
-	customColors?: Record<string, string> | null;
-	isDarkMode: boolean;
-}
-
-/**
- * Turns the scalar tables of a V5 response into pie slices: one slice per
- * group row. The aggregation column holds the value, the group column(s)
- * form the label. Colours honour `customColors` then fall back to a
- * deterministic palette colour; non-positive / non-numeric values are
- * dropped.
- */
-export function preparePieData({
-	tables,
-	customColors,
-	isDarkMode,
-}: PreparePieDataArgs): PieSlice[] {
-	const colorMap = isDarkMode
-		? themeColors.chartcolors
-		: themeColors.lightModeColor;
-
-	const slices: PieSlice[] = [];
-	tables.forEach((table) => {
-		const valueColumn = table.columns.find((column) => column.isValueColumn);
-		if (!valueColumn) {
-			return;
-		}
-		const valueKey = valueColumn.id || valueColumn.name;
-		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
-
-		table.rows.forEach((row) => {
-			const value = Number(row.data[valueKey]);
-			const label =
-				labelColumns
-					.map((column) => row.data[column.id || column.name])
-					.filter((part) => part != null)
-					.map(String)
-					.join(', ') ||
-				table.legend ||
-				table.queryName ||
-				'';
-			const color = customColors?.[label] ?? generateColor(label, colorMap);
-			slices.push({ label, value, color });
-		});
-	});
-
-	return slices.filter(
-		(slice) => Number.isFinite(slice.value) && slice.value > 0,
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -1,8 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-// Pie has no axes, thresholds, or stacking — just value formatting and a
-// legend. `mode` is omitted: the pie legend is always interactive swatches.
-export const sections: SectionConfig[] = [
-	{ kind: 'formatting', controls: { unit: true, decimals: true } },
-	{ kind: 'legend', controls: { position: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -1,180 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import {
-	flattenTimeSeries,
-	getExecStats,
-	getTimeSeriesResults,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
-import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
-import { useTimezone } from 'providers/Timezone';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
-import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
-
-import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildTimeSeriesConfig } from './buildConfig';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function TimeSeriesPanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-	onDragSelect,
-	dashboardPreference,
-	panelMode,
-}: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/TimeSeriesPanel'`, so the cast is a
-	// documented boundary narrowing — not a blind assertion. Memoized so the
-	// `?? {}` fallback doesn't produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesTimeSeriesPanelSpecDTO>(
-		() =>
-			(panel?.spec?.plugin?.spec ?? {}) as DashboardtypesTimeSeriesPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	// X-scale clamps come from the request that produced the data, so each
-	// panel pins to the window it actually fetched — important during
-	// drag-zoom transitions when the time picker has moved but new data
-	// hasn't arrived yet. Falls back to the global picker inside the helper.
-	// The generated request DTO is structurally the hand-written V5 request;
-	// the cast is the documented boundary.
-	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data?.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
-		return { minTimeScale: startTime, maxTimeScale: endTime };
-	}, [data?.requestPayload]);
-
-	const groupByPerQuery = useGroupByPerQuery(builderQueries);
-
-	const flatSeries = useMemo(
-		() =>
-			flattenTimeSeries(
-				getTimeSeriesResults(data?.response),
-				data?.legendMap ?? {},
-			),
-		[data?.response, data?.legendMap],
-	);
-
-	const config = useMemo(
-		() =>
-			buildTimeSeriesConfig({
-				panelId,
-				spec,
-				builderQueries,
-				series: flatSeries,
-				stepIntervals: getExecStats(data?.response)?.stepIntervals,
-				isDarkMode,
-				timezone,
-				panelMode,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			panelId,
-			spec,
-			builderQueries,
-			flatSeries,
-			data?.response,
-			isDarkMode,
-			timezone,
-			panelMode,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
-			// Rebuild it on syncMode changes so the new chart instance starts from a
-			// clean config — otherwise switching to "No Sync" would inherit stale sync
-			// settings from the previous mode.
-			dashboardPreference?.syncMode,
-		],
-	);
-
-	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(() => {
-		return resolveLegendPosition(spec.legend?.position);
-	}, [spec.legend?.position]);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
-		),
-		[panelId],
-	);
-
-	/**
-	 * The uPlot key prop is the only way to force a full teardown and re-mount
-	 * of the chart. By including the syncMode and syncFilterMode in the key,
-	 * we ensure that changes to these preferences trigger a fresh chart instance,
-	 * preventing stale sync settings from being inherited.
-	 */
-	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="time-series-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<TimeSeries
-					key={key}
-					config={config}
-					data={chartData}
-					legendConfig={{ position: legendPosition }}
-					groupByPerQuery={groupByPerQuery}
-					canPinTooltip
-					timezone={timezone}
-					yAxisUnit={spec.formatting?.unit}
-					decimalPrecision={decimalPrecision}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					syncMode={dashboardPreference?.syncMode}
-					syncFilterMode={dashboardPreference?.syncFilterMode}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default TimeSeriesPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/buildConfig.ts

@@ -1,159 +0,0 @@
-import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import {
-	FILL_MODE_MAP,
-	LINE_INTERPOLATION_MAP,
-	LINE_STYLE_MAP,
-	resolveSpanGaps,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearanceMappings';
-import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import {
-	hasSingleVisiblePoint,
-	toClickPluginPayload,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-const DEFAULT_POINT_SIZE = 5;
-
-export interface BuildTimeSeriesConfigArgs {
-	panelId: string;
-	spec: DashboardtypesTimeSeriesPanelSpecDTO;
-	/**
-	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
-	 * Powers per-query legend resolution; empty for non-builder panels.
-	 */
-	builderQueries: BuilderQuery[];
-	/** Flattened V5 series (see `flattenTimeSeries`). */
-	series: PanelSeries[];
-	/** Per-query step intervals from the response exec stats. */
-	stepIntervals?: Record<string, number>;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a TimeSeries panel.
- *
- * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
- * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
- * in the TimeSeries-specific concern: one series per result, with visuals
- * resolved from `spec.chartAppearance`.
- */
-export function buildTimeSeriesConfig({
-	panelId,
-	spec,
-	builderQueries,
-	series,
-	stepIntervals,
-	isDarkMode,
-	timezone,
-	panelMode,
-	onDragSelect,
-	onClick,
-	minTimeScale,
-	maxTimeScale,
-}: BuildTimeSeriesConfigArgs): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.TIME_SERIES,
-		isDarkMode,
-		timezone,
-		panelMode,
-		isLogScale: spec.axes?.isLogScale,
-		softMin: spec.axes?.softMin ?? undefined,
-		softMax: spec.axes?.softMax ?? undefined,
-		formatting: spec.formatting,
-		thresholds: spec.thresholds,
-		stepIntervals,
-		clickPayload: toClickPluginPayload(series),
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-		onClick,
-	});
-
-	addSeries({ builder, spec, builderQueries, series, isDarkMode });
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesTimeSeriesPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	series: PanelSeries[];
-	isDarkMode: boolean;
-}
-
-/**
- * Adds one uPlot series per flattened V5 series to the scaffolded builder.
- * The visual resolution (line style, interpolation, fill mode, span gaps)
- * reads from `spec.chartAppearance`; the label is resolved via the legend
- * matrix in `resolveSeriesLabelV5`. Mutates the builder in place.
- *
- * Order must match `prepareAlignedData` — both iterate the same flat list.
- */
-function addSeries({
-	builder,
-	spec,
-	builderQueries,
-	series,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	const chartAppearance = spec.chartAppearance;
-	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
-	// a defined record (it dereferences keys without a guard).
-	const colorMapping = spec.legend?.customColors ?? {};
-	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
-
-	const lineStyle = chartAppearance?.lineStyle
-		? LINE_STYLE_MAP[chartAppearance.lineStyle]
-		: LineStyle.Solid;
-	const lineInterpolation = chartAppearance?.lineInterpolation
-		? LINE_INTERPOLATION_MAP[chartAppearance.lineInterpolation]
-		: LineInterpolation.Spline;
-	const fillMode = chartAppearance?.fillMode
-		? FILL_MODE_MAP[chartAppearance.fillMode]
-		: FillMode.None;
-
-	series.forEach((s) => {
-		const hasSingleValidPoint = hasSingleVisiblePoint(s.values);
-		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
-		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			// A single visible point can't be drawn as a line — degrade to points
-			// so the user still sees the datum (matches V1 behavior).
-			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
-			label,
-			colorMapping,
-			spanGaps,
-			lineStyle,
-			lineInterpolation,
-			showPoints: chartAppearance?.showPoints || hasSingleValidPoint,
-			pointSize: DEFAULT_POINT_SIZE,
-			fillMode,
-			isDarkMode,
-			metric: s.labels,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,14 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
-	kind: 'signoz/TimeSeriesPanel',
-	displayName: 'Time Series',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-	actions: { view: true, edit: true, download: false, createAlert: true },
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -1,15 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{
-		kind: 'formatting',
-		controls: {
-			unit: true,
-			decimals: true,
-		},
-	},
-	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-	{ kind: 'chartAppearance', controls: { lineStyle: true, fillOpacity: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/panel.module.scss

@@ -1,9 +0,0 @@
-.panelContainer {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	position: relative;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/interactions.ts

@@ -1,59 +0,0 @@
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-/**
- * Source-tagged click events. The three uPlot panels share `ChartClickEvent`;
- * each non-chart kind carries the context its drill-down needs. The `source`
- * tag lets a kind-agnostic consumer (the render boundary, a shared drill-down
- * handler) discriminate without assuming a chart shape.
- */
-export type ChartClickEvent = ChartClickData;
-export type TableClickEvent = {
-	rowData: Record<string, unknown>;
-	columnId?: string;
-};
-export type ListClickEvent = {
-	rowData: Record<string, unknown>;
-};
-export type PieClickEvent = { label: string; value: number };
-
-/** Union of every panel click event — switched on by `source` at the boundary. */
-export type PanelClickEvent =
-	| ChartClickEvent
-	| TableClickEvent
-	| ListClickEvent
-	| PieClickEvent;
-
-type DragSelect = (start: number, end: number) => void;
-
-/**
- * Per-kind interaction props. Each panel kind exposes ONLY the gestures it
- * supports: chart panels get a chart-shaped `onClick`, time-axis charts add
- * `onDragSelect`, histograms have no drag-to-zoom, a NumberPanel has no
- * interactions at all. Keys mirror `PanelKind`; `PanelRendererProps<K>` in
- * rendererProps.ts indexes this map, so a missing kind is a compile error there.
- */
-export interface PanelInteractionMap {
-	'signoz/TimeSeriesPanel': {
-		onClick?: (event: ChartClickEvent) => void;
-		onDragSelect?: DragSelect;
-	};
-	'signoz/BarChartPanel': {
-		onClick?: (event: ChartClickEvent) => void;
-		onDragSelect?: DragSelect;
-	};
-	'signoz/HistogramPanel': { onClick?: (event: ChartClickEvent) => void };
-	'signoz/TablePanel': { onClick?: (event: TableClickEvent) => void };
-	'signoz/ListPanel': { onClick?: (event: ListClickEvent) => void };
-	'signoz/PieChartPanel': { onClick?: (event: PieClickEvent) => void };
-	'signoz/NumberPanel': Record<string, never>;
-}
-
-/**
- * Widest interaction surface — used where the panel kind is not known
- * statically (the registry render boundary; see `getPanelDefinition`). It is
- * the structural supertype the per-kind shapes are cast to exactly once.
- */
-export interface AnyPanelInteractionProps {
-	onClick?: (event: PanelClickEvent) => void;
-	onDragSelect?: DragSelect;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -1,56 +0,0 @@
-import type { ComponentType } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { SectionConfig } from './sections';
-import type { AnyPanelInteractionProps } from './interactions';
-import type { PanelKind } from './panelKind';
-import type { BaseRendererProps, PanelRendererProps } from './rendererProps';
-
-/**
- * Kind-level action capabilities: which panel actions THIS kind supports.
- * Declared per-kind in `kinds/<Kind>/definition.ts` — the field is required,
- * so registering a new kind forces an explicit decision for every action
- * (mirroring how PanelInteractionMap forces per-kind interaction coverage).
- *
- * Chrome actions (move to section, clone, delete) are dashboard-layout
- * concerns, available for every panel — including kinds V2 can't render —
- * and are intentionally not declarable here.
- */
-export interface PanelActionCapabilities {
-	/** Kind has a full-screen view — gates the "View" action. */
-	view: boolean;
-	/** Kind is editable in the V2 panel editor — gates the "Edit panel" action. */
-	edit: boolean;
-	/**
-	 * Kind's data can be exported as CSV — gates "Download as CSV". V1 parity:
-	 * only table panels carry tabular data worth exporting.
-	 */
-	download: boolean;
-	/** Kind's query can seed a new alert — gates "Create Alerts". */
-	createAlert: boolean;
-}
-
-export interface PanelDefinition<K extends PanelKind = PanelKind> {
-	kind: K;
-	displayName: string;
-	Renderer: ComponentType<PanelRendererProps<K>>;
-	sections: SectionConfig[];
-	supportedSignals: DataSource[];
-	actions: PanelActionCapabilities;
-}
-
-// Keyed registry that preserves the kind ↔ definition correlation: indexing
-// with a literal kind yields that kind's exactly-typed PanelDefinition.
-export type PanelRegistry = { [K in PanelKind]?: PanelDefinition<K> };
-
-// A PanelDefinition whose Renderer is widened to the kind-agnostic prop surface.
-// At the render boundary the concrete kind isn't known statically (a registry
-// lookup returns a union over kinds), so getPanelDefinition resolves to this —
-// concentrating the single unavoidable cast in one place instead of leaking it
-// to every call site.
-export interface RenderablePanelDefinition extends Omit<
-	PanelDefinition,
-	'Renderer'
-> {
-	Renderer: ComponentType<BaseRendererProps & AnyPanelInteractionProps>;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind.ts

@@ -1,20 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-
-export type PanelKind =
-	| 'signoz/TimeSeriesPanel'
-	| 'signoz/BarChartPanel'
-	| 'signoz/NumberPanel'
-	| 'signoz/PieChartPanel'
-	| 'signoz/TablePanel'
-	| 'signoz/HistogramPanel'
-	| 'signoz/ListPanel';
-
-export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
-	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
-	'signoz/BarChartPanel': PANEL_TYPES.BAR,
-	'signoz/NumberPanel': PANEL_TYPES.VALUE,
-	'signoz/PieChartPanel': PANEL_TYPES.PIE,
-	'signoz/TablePanel': PANEL_TYPES.TABLE,
-	'signoz/HistogramPanel': PANEL_TYPES.HISTOGRAM,
-	'signoz/ListPanel': PANEL_TYPES.LIST,
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps.ts

@@ -1,75 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-import type { PanelInteractionMap } from './interactions';
-import type { PanelKind } from './panelKind';
-
-/**
- * Dashboard-wide rendering preferences propagated down to every panel renderer
- * on the same dashboard. Lets the shell push cross-panel concerns (cursor
- * sync, tooltip filter mode, dashboard id for scoped state) without each
- * renderer rediscovering them via hooks. All fields are optional — non-
- * dashboard render contexts (PanelEditor preview, standalone view) can pass
- * an empty object and the renderer will fall back to sensible defaults.
- */
-export interface DashboardPreference {
-	/**
-	 * Cursor-sync mode for the dashboard. Drives the uPlot tooltip plugin so
-	 * hovering one panel highlights the corresponding x on every other panel.
-	 */
-	syncMode?: DashboardCursorSync;
-	/**
-	 * Filter applied to the synced tooltip across panels (e.g. only show series
-	 * whose label matches the hovered series).
-	 */
-	syncFilterMode?: SyncTooltipFilterMode;
-	/**
-	 * Dashboard id — useful for renderers that scope per-dashboard state
-	 * (e.g. pinned-tooltip persistence, drill-down history).
-	 */
-	dashboardId?: string;
-}
-
-// Kind-agnostic props every renderer receives, regardless of panel kind. The
-// kind-specific interaction props (onClick payload, onDragSelect) are layered
-// on per-kind by PanelRendererProps<K>.
-export interface BaseRendererProps {
-	panelId: string;
-	/**
-	 * The whole perses panel — renderers derive their concrete `spec` and the
-	 * perses-shaped `queries` from this. Passing the full panel keeps the prop
-	 * surface stable as new panel-level fields are added to the wire format.
-	 */
-	panel: DashboardtypesPanelDTO | undefined;
-	/** Raw V5 fetch result — response + the request that produced it. */
-	data?: PanelQueryData;
-	isLoading: boolean;
-	error: Error | null;
-	/** Gate for the drill-down right-click menu. Off by default in V2. */
-	enableDrillDown?: boolean;
-	/**
-	 * Render context — varies behavior (e.g. dashboard widget vs. standalone
-	 * full-screen vs. inside the editor). See PanelMode for the contract.
-	 */
-	panelMode: PanelMode;
-	/**
-	 * Dashboard-level preferences that should propagate to every panel
-	 * (cursor sync, tooltip filter mode, dashboard id). The shell owns
-	 * resolving these; the renderer just consumes them.
-	 */
-	dashboardPreference?: DashboardPreference;
-}
-
-// Renderer props for a specific panel kind: the shared base plus that kind's
-// interaction surface (PanelInteractionMap[K]). Each renderer annotates with
-// its own kind — e.g. PanelRendererProps<'signoz/TimeSeriesPanel'> — so it can
-// only reference the gestures that kind supports. Indexing PanelInteractionMap
-// here forces the map to cover every PanelKind. The default K = PanelKind
-// yields the widest surface (a union over all kinds).
-export type PanelRendererProps<K extends PanelKind = PanelKind> =
-	BaseRendererProps & PanelInteractionMap[K];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts

@@ -1,55 +0,0 @@
-import {
-	BarChart,
-	Columns3,
-	Hash,
-	ListEnd,
-	Palette,
-	Ruler,
-	SlidersHorizontal,
-} from '@signozhq/icons';
-
-// Derived from an actual icon component so the type stays exact (size is a
-// constrained IconSize union, not arbitrary strings) and ForwardRef-compatible.
-export type SectionIcon = typeof Hash;
-
-export interface SectionMetadata {
-	title: string;
-	icon: SectionIcon;
-	description?: string;
-}
-
-// Per-kind control toggles (type-only — runtime metadata is in SECTIONS).
-// Section components type their controls prop via `SectionControls['axes']`.
-export type SectionControls = {
-	formatting: { unit?: boolean; decimals?: boolean };
-	axes: { minMax?: boolean; unit?: boolean; logScale?: boolean };
-	legend: { position?: boolean; mode?: boolean };
-	thresholds: { list?: boolean };
-	chartAppearance: {
-		lineStyle?: boolean;
-		fillOpacity?: boolean;
-		stacked?: boolean;
-	};
-	columnUnits: { perColumnUnit?: boolean };
-	buckets: { count?: boolean; min?: boolean; max?: boolean };
-};
-
-// Source of truth for sections. Its keys define SectionKind; its values are the
-// runtime UI metadata (consumed by PanelEditor in 1.8). Adding a new section =
-// one entry here + one entry in SectionControls.
-export const SECTIONS = {
-	formatting: { title: 'Formatting', icon: Hash },
-	axes: { title: 'Axes', icon: Ruler },
-	legend: { title: 'Legend', icon: ListEnd },
-	thresholds: { title: 'Thresholds', icon: SlidersHorizontal },
-	chartAppearance: { title: 'Chart appearance', icon: Palette },
-	columnUnits: { title: 'Column units', icon: Columns3 },
-	buckets: { title: 'Buckets', icon: BarChart },
-} as const satisfies Record<string, SectionMetadata>;
-
-export type SectionKind = keyof typeof SECTIONS;
-
-// Discriminated union derived from SectionControls — kept in lockstep automatically.
-export type SectionConfig = {
-	[K in SectionKind]: { kind: K; controls: SectionControls[K] };
-}[SectionKind];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/threshold.ts

@@ -1,29 +0,0 @@
-/**
- * V2-native threshold model.
- *
- * The panel spec carries thresholds as `DashboardtypesComparisonThresholdDTO`
- * (operator/format expressed as `above`/`below`/`text`/`background`). For
- * evaluation and rendering we work with the symbol operators and lowercase
- * display formats, kept here so V2 panels never reach into the V1
- * `container/NewWidget` `ThresholdProps` shape.
- */
-
-/** Comparison operators a threshold can use, as evaluable symbols. */
-export type ThresholdComparisonOperator = '>' | '<' | '>=' | '<=' | '=' | '!=';
-
-/** How a matched threshold recolors the panel. */
-export type ThresholdDisplayFormat = 'text' | 'background';
-
-/**
- * A threshold normalized for evaluation/rendering. `operator`/`format` are
- * optional because the spec allows partially-configured thresholds; a
- * threshold with no operator never matches.
- */
-export interface PanelThreshold {
-	color: string;
-	operator?: ThresholdComparisonOperator;
-	value: number;
-	/** Unit the threshold value is expressed in; converted to the panel unit before comparison. */
-	unit?: string;
-	format?: ThresholdDisplayFormat;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/evaluateThresholds.test.ts

@@ -1,71 +0,0 @@
-import type { PanelThreshold } from '../../types/threshold';
-import {
-	doesValueMatchThreshold,
-	resolveActiveThreshold,
-} from '../evaluateThresholds';
-
-const threshold = (overrides: Partial<PanelThreshold>): PanelThreshold => ({
-	color: '#f00',
-	value: 100,
-	operator: '>',
-	...overrides,
-});
-
-describe('doesValueMatchThreshold', () => {
-	it.each([
-		['>', 150, 100, true],
-		['>', 50, 100, false],
-		['<', 50, 100, true],
-		['>=', 100, 100, true],
-		['<=', 100, 100, true],
-		['=', 100, 100, true],
-		['!=', 150, 100, true],
-	] as const)('evaluates %s (%d vs %d)', (operator, value, target, expected) => {
-		expect(
-			doesValueMatchThreshold(value, threshold({ operator, value: target })),
-		).toBe(expected);
-	});
-
-	it('never matches a threshold without an operator', () => {
-		expect(doesValueMatchThreshold(150, threshold({ operator: undefined }))).toBe(
-			false,
-		);
-	});
-
-	it('compares the raw value when units are in different categories', () => {
-		// 'bytes' vs 'ms' belong to different categories, so conversion is invalid
-		// and the comparison falls back to the raw value (150 > 100).
-		expect(
-			doesValueMatchThreshold(150, threshold({ value: 100, unit: 'bytes' }), 'ms'),
-		).toBe(true);
-	});
-});
-
-describe('resolveActiveThreshold', () => {
-	it('returns no threshold when none match', () => {
-		const result = resolveActiveThreshold([threshold({ value: 1000 })], 10);
-		expect(result.threshold).toBeNull();
-		expect(result.isConflicting).toBe(false);
-	});
-
-	it('flags a conflict and picks the earliest-declared match', () => {
-		const first = threshold({ color: '#aaa', operator: '>', value: 0 });
-		const second = threshold({ color: '#bbb', operator: '>', value: 100 });
-
-		const result = resolveActiveThreshold([first, second], 150);
-
-		expect(result.isConflicting).toBe(true);
-		expect(result.threshold).toBe(first);
-	});
-
-	it('returns the single matching threshold without a conflict', () => {
-		const only = threshold({ color: '#abc', operator: '>', value: 100 });
-		const result = resolveActiveThreshold(
-			[only, threshold({ value: 9999 })],
-			150,
-		);
-
-		expect(result.threshold).toBe(only);
-		expect(result.isConflicting).toBe(false);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/formatPanelValue.test.ts

@@ -1,33 +0,0 @@
-import { PrecisionOptionsEnum } from 'components/Graph/types';
-
-import { formatPanelValue } from '../formatPanelValue';
-
-describe('formatPanelValue', () => {
-	it('applies the configured precision and appends the unit label', () => {
-		// The unit-aware formatter returns value + label as one string; the
-		// ValueDisplay splits it into numeric/suffix parts when rendering.
-		expect(formatPanelValue(295.4299833508185, 'ms', 2)).toBe('295.43 ms');
-	});
-
-	// Regression: precision must apply even with no unit. The old gate
-	// (`unit ? format() : value.toString()`) dropped precision on unitless
-	// panels, so decimal-precision changes had no visible effect.
-	it('applies precision when NO unit is set', () => {
-		expect(formatPanelValue(3.14159, undefined, 2)).toBe('3.14');
-		expect(formatPanelValue(3.14159, '', 2)).toBe('3.14');
-	});
-
-	it('honors full precision without a unit', () => {
-		expect(formatPanelValue(3.14159, undefined, PrecisionOptionsEnum.FULL)).toBe(
-			'3.14159',
-		);
-	});
-
-	it('drops the fractional part at precision 0', () => {
-		expect(formatPanelValue(3.14159, undefined, 0)).toBe('3');
-	});
-
-	it('renders whole numbers without a trailing decimal', () => {
-		expect(formatPanelValue(5, undefined, 2)).toBe('5');
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/resolveSeriesLabel.test.ts

@@ -1,120 +0,0 @@
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import { resolveSeriesLabelV5 } from '../resolveSeriesLabel';
-
-// Fixtures cast at the boundary; the v5 BuilderQuery union is too verbose to
-// construct field-typed inline.
-
-function builderQuery(spec: Record<string, unknown>): BuilderQuery {
-	return spec as unknown as BuilderQuery;
-}
-
-function panelSeries(overrides: Partial<PanelSeries> = {}): PanelSeries {
-	return {
-		queryName: 'A',
-		legend: '',
-		labels: { host: 'h1' },
-		kind: 'series',
-		values: [],
-		aggregation: { index: 0, alias: '' },
-		...overrides,
-	};
-}
-
-describe('resolveSeriesLabelV5', () => {
-	it('returns baseLabel for panels without builder queries (promql/clickhouse)', () => {
-		expect(resolveSeriesLabelV5(panelSeries(), [], 'base')).toBe('base');
-	});
-
-	it('returns baseLabel when no query matches the series queryName', () => {
-		expect(
-			resolveSeriesLabelV5(
-				panelSeries({ queryName: 'Z' }),
-				[builderQuery({ name: 'A' })],
-				'base',
-			),
-		).toBe('base');
-	});
-
-	it('falls back to baseLabel || queryName when the aggregation has no alias/expression (metrics)', () => {
-		const queries = [
-			builderQuery({ name: 'A', aggregations: [{ metricName: 'cpu' }] }),
-		];
-		expect(resolveSeriesLabelV5(panelSeries(), queries, 'base')).toBe('base');
-		expect(resolveSeriesLabelV5(panelSeries(), queries, '')).toBe('A');
-	});
-
-	it('single query + groupBy + single aggregation → baseLabel', () => {
-		const queries = [
-			builderQuery({
-				name: 'A',
-				groupBy: [{ name: 'host' }],
-				aggregations: [{ expression: 'count()', alias: '' }],
-			}),
-		];
-		expect(resolveSeriesLabelV5(panelSeries(), queries, 'h1')).toBe('h1');
-	});
-
-	it('single query + groupBy + multiple aggregations → "alias-or-expression"-baseLabel', () => {
-		const queries = [
-			builderQuery({
-				name: 'A',
-				groupBy: [{ name: 'host' }],
-				aggregations: [
-					{ expression: 'count()', alias: '' },
-					{ expression: 'avg(x)', alias: 'mean' },
-				],
-			}),
-		];
-		expect(
-			resolveSeriesLabelV5(
-				panelSeries({ aggregation: { index: 1, alias: 'mean' } }),
-				queries,
-				'h1',
-			),
-		).toBe('mean-h1');
-	});
-
-	it('single query, no groupBy, single aggregation → alias || legend || expression', () => {
-		const queries = [
-			builderQuery({
-				name: 'A',
-				legend: 'My legend',
-				aggregations: [{ expression: 'count()', alias: '' }],
-			}),
-		];
-		expect(resolveSeriesLabelV5(panelSeries({ labels: {} }), queries, 'A')).toBe(
-			'My legend',
-		);
-	});
-
-	it('multiple queries, no groupBy, single aggregation → alias || baseLabel', () => {
-		const queries = [
-			builderQuery({ name: 'A', aggregations: [{ expression: 'count()' }] }),
-			builderQuery({ name: 'B', aggregations: [{ expression: 'sum(y)' }] }),
-		];
-		expect(
-			resolveSeriesLabelV5(panelSeries({ labels: {} }), queries, 'base'),
-		).toBe('base');
-	});
-
-	it('resolves via the aggregation index carried on the series', () => {
-		const queries = [
-			builderQuery({
-				name: 'A',
-				aggregations: [
-					{ expression: 'count()', alias: 'hits' },
-					{ expression: 'avg(x)', alias: 'mean' },
-				],
-			}),
-		];
-		expect(
-			resolveSeriesLabelV5(
-				panelSeries({ labels: {}, aggregation: { index: 1, alias: 'mean' } }),
-				queries,
-				'',
-			),
-		).toBe('mean');
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder.ts

@@ -1,207 +0,0 @@
-import type {
-	DashboardtypesPanelFormattingDTO,
-	DashboardtypesThresholdWithLabelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-/**
- * Inputs for the shared V2 chart pipeline. Mirrors the V1 helper of the same
- * name but accepts perses-shaped inputs directly (so callers don't translate
- * once per panel). The series-rendering step is panel-specific and lives in
- * each panel's `utils.ts` — this helper only wires the scaffolding (scales,
- * thresholds, axes, drag-to-zoom, click plugin).
- */
-export interface BuildBaseConfigArgs {
-	panelId: string;
-	panelType: PANEL_TYPES;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-
-	/** From `spec.axes` — drives the Y scale and (when log) both scales' base. */
-	isLogScale?: boolean;
-	softMin?: number;
-	softMax?: number;
-
-	/** From `spec.formatting.unit` — drives Y axis tick formatting + threshold formatting. */
-	formatting?: DashboardtypesPanelFormattingDTO;
-
-	/** From `spec.thresholds` — perses shape, mapped to the draw-hook shape internally. */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-
-	/** Per-query step intervals from the response exec stats. */
-	stepIntervals?: Record<string, number>;
-	/**
-	 * Tuple-shaped payload for the shared click plugin (see
-	 * `toClickPluginPayload`). Omitted by panels without click interactions.
-	 */
-	clickPayload?: MetricRangePayloadProps;
-
-	/** Time-range clamps for the X scale (typically from `getTimeRange(apiResponse)`). */
-	minTimeScale?: number;
-	maxTimeScale?: number;
-
-	/** Optional — histogram and other non-time panels omit drag-to-zoom. */
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-}
-
-/**
- * Builds the panel-agnostic scaffolding of a uPlot chart: scales, thresholds,
- * axes, drag-to-zoom, click plugin. Callers (TimeSeriesPanel, BarPanel, …)
- * then call `addSeries`/`addPlugin` on the returned builder for their own
- * panel-specific rendering.
- */
-export function buildBaseConfig({
-	panelId,
-	panelType,
-	isDarkMode,
-	timezone,
-	panelMode,
-	isLogScale,
-	softMin,
-	softMax,
-	formatting,
-	thresholds,
-	stepIntervals,
-	clickPayload,
-	minTimeScale,
-	maxTimeScale,
-	onDragSelect,
-	onClick,
-}: BuildBaseConfigArgs): UPlotConfigBuilder {
-	const yAxisUnit = formatting?.unit;
-
-	const builder = new UPlotConfigBuilder({
-		id: panelId,
-		onDragSelect,
-		tzDate: makeTzDate(timezone),
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: resolveSelectionPreferencesSource(panelMode),
-		stepInterval: stepIntervals ? minStepInterval(stepIntervals) : undefined,
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: mapThresholds(thresholds),
-		yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin,
-		softMax,
-		thresholds: thresholdOptions,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(onClickPlugin({ onClick, apiResponse: clickPayload }));
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale,
-		yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}
-
-function makeTzDate(
-	timezone: Timezone,
-): ((timestamp: number) => Date) | undefined {
-	if (!timezone) {
-		return undefined;
-	}
-	return (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-}
-
-function resolveSelectionPreferencesSource(
-	panelMode: PanelMode,
-): SelectionPreferencesSource {
-	return panelMode === PanelMode.DASHBOARD_VIEW ||
-		panelMode === PanelMode.STANDALONE_VIEW
-		? SelectionPreferencesSource.LOCAL_STORAGE
-		: SelectionPreferencesSource.IN_MEMORY;
-}
-
-// Perses-shape thresholds → the draw-hook shape uPlotV2 consumes. Exported so
-// panels that need to feed the same threshold list elsewhere (e.g. to a series
-// `addSeries` thresholds hook) don't have to redo the mapping.
-export function mapThresholds(
-	thresholds: DashboardtypesThresholdWithLabelDTO[] | null | undefined,
-): ThresholdsDrawHookOptions['thresholds'] {
-	if (!thresholds || thresholds.length === 0) {
-		return [];
-	}
-	return thresholds.map((t) => ({
-		thresholdValue: t.value,
-		thresholdColor: t.color,
-		thresholdUnit: t.unit,
-		thresholdLabel: t.label,
-	}));
-}
-
-/**
- * V5 backend reports per-query step intervals; we feed the smallest one through
- * to uPlot so the X-axis tick density matches the densest query. An empty map
- * yields `Infinity` from `Math.min`, which would corrupt downstream scale math —
- * fall back to `undefined` (uPlot's "auto") in that case.
- */
-function minStepInterval(
-	stepIntervals: Record<string, number>,
-): number | undefined {
-	const values = Object.values(stepIntervals);
-	if (values.length === 0) {
-		return undefined;
-	}
-	const min = Math.min(...values);
-	return Number.isFinite(min) ? min : undefined;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearanceMappings.ts

@@ -1,108 +0,0 @@
-import {
-	DashboardtypesFillModeDTO,
-	DashboardtypesLegendPositionDTO,
-	DashboardtypesLineInterpolationDTO,
-	DashboardtypesLineStyleDTO,
-	DashboardtypesPrecisionOptionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-
-/**
- * Bridges the V2 dashboard wire-format enums (snake_case, generated from Go)
- * to the uPlotV2 chart enums (PascalCase). String values diverge between the
- * two — don't coerce, map.
- *
- * Kept as a single source of truth so every panel that reads chart-appearance
- * fields stays in sync as either side's enum evolves.
- */
-
-export const LINE_STYLE_MAP: Record<DashboardtypesLineStyleDTO, LineStyle> = {
-	[DashboardtypesLineStyleDTO.solid]: LineStyle.Solid,
-	[DashboardtypesLineStyleDTO.dashed]: LineStyle.Dashed,
-};
-
-export const LINE_INTERPOLATION_MAP: Record<
-	DashboardtypesLineInterpolationDTO,
-	LineInterpolation
-> = {
-	[DashboardtypesLineInterpolationDTO.linear]: LineInterpolation.Linear,
-	[DashboardtypesLineInterpolationDTO.spline]: LineInterpolation.Spline,
-	[DashboardtypesLineInterpolationDTO.step_after]: LineInterpolation.StepAfter,
-	[DashboardtypesLineInterpolationDTO.step_before]: LineInterpolation.StepBefore,
-};
-
-export const FILL_MODE_MAP: Record<DashboardtypesFillModeDTO, FillMode> = {
-	[DashboardtypesFillModeDTO.solid]: FillMode.Solid,
-	[DashboardtypesFillModeDTO.gradient]: FillMode.Gradient,
-	[DashboardtypesFillModeDTO.none]: FillMode.None,
-};
-
-export const LEGEND_POSITION_MAP: Record<
-	DashboardtypesLegendPositionDTO,
-	LegendPosition
-> = {
-	[DashboardtypesLegendPositionDTO.bottom]: LegendPosition.BOTTOM,
-	[DashboardtypesLegendPositionDTO.right]: LegendPosition.RIGHT,
-};
-
-/**
- * `spec.formatting.decimalPrecision` is a stringified-digit enum on the wire
- * (`'0'`–`'4'` plus the sentinel `'full'`). The chart consumes a numeric
- * `PrecisionOption` (`0`–`4`) or the same `'full'` sentinel from its own
- * enum. Missing / unknown → `undefined` (chart uses its default).
- */
-export function resolveDecimalPrecision(
-	precision: DashboardtypesPrecisionOptionDTO | undefined,
-): PrecisionOption | undefined {
-	if (!precision) {
-		return undefined;
-	}
-	if (precision === DashboardtypesPrecisionOptionDTO.full) {
-		return PrecisionOptionsEnum.FULL;
-	}
-	const parsed = Number(precision);
-	if (
-		parsed === 0 ||
-		parsed === 1 ||
-		parsed === 2 ||
-		parsed === 3 ||
-		parsed === 4
-	) {
-		return parsed;
-	}
-	return undefined;
-}
-
-/**
- * `spec.chartAppearance.spanGaps.fillLessThan` is a stringified number on the
- * wire. Empty / missing → span all gaps (the chart default). Numeric → forward
- * the threshold so uPlot only bridges short runs of nulls.
- */
-export function resolveSpanGaps(
-	fillLessThan: string | undefined,
-): boolean | number {
-	if (!fillLessThan) {
-		return true;
-	}
-	const parsed = Number(fillLessThan);
-	return Number.isFinite(parsed) ? parsed : true;
-}
-
-/**
- * Resolves the legend position for a panel. Missing / unknown values fall
- * back to `BOTTOM` to match the chart's default and the V1 behavior.
- */
-export function resolveLegendPosition(
-	position: DashboardtypesLegendPositionDTO | undefined,
-): LegendPosition {
-	if (position && position in LEGEND_POSITION_MAP) {
-		return LEGEND_POSITION_MAP[position];
-	}
-	return LegendPosition.BOTTOM;
-}