chore: update types

ee/query-service/app/api/api.go

@@ -11,7 +11,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/global"
-	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -23,8 +22,6 @@ import (
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/gorilla/mux"
 )
@@ -111,22 +108,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
 	// v5
-	router.Handle("/api/v5/query_range", handler.New(am.ViewAccess(ah.queryRangeV5), handler.OpenAPIDef{
-		ID:                 "QueryRangeV5",
-		Tags:               []string{"query"},
-		Summary:            "Query range",
-		Description:        "Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL.",
-		Request:            new(qbtypes.QueryRangeRequest),
-		RequestContentType: "application/json",
-		Response:           new(qbtypes.QueryRangeResponse),
-		ResponseContentType: "application/json",
-		SuccessStatusCode:  http.StatusOK,
-		ErrorStatusCodes:   []int{http.StatusBadRequest},
-		SecuritySchemes: []handler.OpenAPISecurityScheme{
-			{Name: ctxtypes.AuthTypeAPIKey.StringValue(), Scopes: []string{"VIEWER"}},
-			{Name: ctxtypes.AuthTypeTokenizer.StringValue(), Scopes: []string{"VIEWER"}},
-		},
-	})).Methods(http.MethodPost)
+	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
 

frontend/.eslintrc.js

@@ -61,8 +61,6 @@ module.exports = {
 		curly: 'error', // Requires curly braces for all control statements
 		eqeqeq: ['error', 'always', { null: 'ignore' }], // Enforces === and !== (allows == null for null/undefined check)
 		'no-console': ['error', { allow: ['warn', 'error'] }], // Warns on console.log, allows console.warn/error
-		// TODO: Change this to error in May 2026
-		'max-params': ['warn', 3], // a function can have max 3 params after which it should become an object
 
 		// TypeScript rules
 		'@typescript-eslint/explicit-function-return-type': 'error', // Requires explicit return types on functions
@@ -118,7 +116,7 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
-		'import/no-cycle': 'warn', // Warns about circular dependencies
+		// 'import/no-cycle': 'warn', // TODO: Enable later to detect circular dependencies
 
 		// Import sorting rules
 		'simple-import-sort/imports': [
@@ -148,19 +146,6 @@ module.exports = {
 		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
 	},
 	overrides: [
-		{
-			files: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				// Tests often have intentional duplication and complexity - disable SonarJS rules
-				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
-				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
-				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
-			},
-		},
 		{
 			files: ['src/api/generated/**/*.ts'],
 			rules: {
@@ -168,6 +153,7 @@ module.exports = {
 				'@typescript-eslint/explicit-module-boundary-types': 'off',
 				'no-nested-ternary': 'off',
 				'@typescript-eslint/no-unused-vars': 'warn',
+				'sonarjs/no-duplicate-string': 'off',
 			},
 		},
 	],

frontend/CONTRIBUTIONS.md

@@ -2,11 +2,6 @@
 
 Embrace the spirit of collaboration and contribute to the success of our open-source project by adhering to these frontend development guidelines with precision and passion.
 
-### Export Style
-
-- **React components** (`src/components/`, `src/container/`, `src/pages/`): Prefer **default exports** for the main component in each file
-- **Utilities, hooks, APIs, types, constants** (`src/utils/`, `src/hooks/`, `src/api/`, `src/lib/`, `src/types/`, `src/constants/`): Prefer **named exports** for better tree-shaking and explicit imports
-
 ### React and Components
 
 - Strive to create small and modular components, ensuring they are divided into individual pieces for improved maintainability and reusability.

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

@@ -762,6 +762,18 @@ export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	totalTimeSeries: number;
 }
 
+export enum MetricsexplorertypesMetricMetadataDTOTemporality {
+	delta = 'delta',
+	cumulative = 'cumulative',
+	unspecified = 'unspecified',
+}
+export enum MetricsexplorertypesMetricMetadataDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesMetricMetadataDTO {
 	/**
 	 * @type string
@@ -771,14 +783,29 @@ export interface MetricsexplorertypesMetricMetadataDTO {
 	 * @type boolean
 	 */
 	isMonotonic: boolean;
-	temporality: MetrictypesTemporalityDTO;
-	type: MetrictypesTypeDTO;
+	/**
+	 * @enum delta,cumulative,unspecified
+	 * @type string
+	 */
+	temporality: MetricsexplorertypesMetricMetadataDTOTemporality;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesMetricMetadataDTOType;
 	/**
 	 * @type string
 	 */
 	unit: string;
 }
 
+export enum MetricsexplorertypesStatDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesStatDTO {
 	/**
 	 * @type string
@@ -798,7 +825,11 @@ export interface MetricsexplorertypesStatDTO {
 	 * @minimum 0
 	 */
 	timeseries: number;
-	type: MetrictypesTypeDTO;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesStatDTOType;
 	/**
 	 * @type string
 	 */
@@ -858,7 +889,7 @@ export interface MetricsexplorertypesTreemapEntryDTO {
 	totalValue: number;
 }
 
-export enum MetricsexplorertypesTreemapModeDTO {
+export enum MetricsexplorertypesTreemapRequestDTOMode {
 	timeseries = 'timeseries',
 	samples = 'samples',
 }
@@ -873,7 +904,11 @@ export interface MetricsexplorertypesTreemapRequestDTO {
 	 * @type integer
 	 */
 	limit: number;
-	mode: MetricsexplorertypesTreemapModeDTO;
+	/**
+	 * @enum timeseries,samples
+	 * @type string
+	 */
+	mode: MetricsexplorertypesTreemapRequestDTOMode;
 	/**
 	 * @type integer
 	 * @format int64
@@ -894,6 +929,18 @@ export interface MetricsexplorertypesTreemapResponseDTO {
 	timeseries: MetricsexplorertypesTreemapEntryDTO[] | null;
 }
 
+export enum MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality {
+	delta = 'delta',
+	cumulative = 'cumulative',
+	unspecified = 'unspecified',
+}
+export enum MetricsexplorertypesUpdateMetricMetadataRequestDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	/**
 	 * @type string
@@ -907,26 +954,22 @@ export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	 * @type string
 	 */
 	metricName: string;
-	temporality: MetrictypesTemporalityDTO;
-	type: MetrictypesTypeDTO;
+	/**
+	 * @enum delta,cumulative,unspecified
+	 * @type string
+	 */
+	temporality: MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesUpdateMetricMetadataRequestDTOType;
 	/**
 	 * @type string
 	 */
 	unit: string;
 }
 
-export enum MetrictypesTemporalityDTO {
-	delta = 'delta',
-	cumulative = 'cumulative',
-	unspecified = 'unspecified',
-}
-export enum MetrictypesTypeDTO {
-	gauge = 'gauge',
-	sum = 'sum',
-	histogram = 'histogram',
-	summary = 'summary',
-	exponentialhistogram = 'exponentialhistogram',
-}
 export interface PreferencetypesPreferenceDTO {
 	/**
 	 * @type array
@@ -1345,7 +1388,7 @@ export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
 	 */
-	email: string;
+	email?: string;
 	/**
 	 * @type string
 	 */
@@ -1353,7 +1396,7 @@ export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
 	 */
-	orgId: string;
+	orgId?: string;
 }
 
 export interface TypesPostableInviteDTO {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx

@@ -1,53 +0,0 @@
-import { memo, useMemo } from 'react';
-import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
-import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { VariableItemProps } from './VariableItem';
-
-type CustomVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate'
->;
-
-function CustomVariableInput({
-	variableData,
-	onValueUpdate,
-}: CustomVariableInputProps): JSX.Element {
-	const optionsData: (string | number | boolean)[] = useMemo(() => {
-		return sortValues(
-			commaValuesParser(variableData.customValue || ''),
-			variableData.sort,
-		) as (string | number | boolean)[];
-	}, [variableData.customValue, variableData.sort]);
-
-	const {
-		value,
-		defaultValue,
-		enableSelectAll,
-		onChange,
-		onDropdownVisibleChange,
-		handleClear,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-	});
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={optionsData}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={onDropdownVisibleChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-		/>
-	);
-}
-
-export default memo(CustomVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -25,6 +25,12 @@
 		}
 	}
 
+	&.focused {
+		.variable-value {
+			outline: 1px solid var(--bg-robin-400);
+		}
+	}
+
 	.variable-value {
 		display: flex;
 		min-width: 120px;
@@ -42,11 +48,6 @@
 		font-style: normal;
 		font-weight: 400;
 		line-height: 16px; /* 133.333% */
-
-		&:hover,
-		&:focus-within {
-			outline: 1px solid var(--bg-robin-400);
-		}
 	}
 
 	.variable-select {
@@ -98,6 +99,12 @@
 
 .lightMode {
 	.variable-item {
+		&.focused {
+			.variable-value {
+				border: 1px solid var(--bg-robin-400);
+			}
+		}
+
 		.variable-name {
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);
@@ -108,11 +115,6 @@
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);
 			color: var(--bg-ink-400);
-
-			&:hover,
-			&:focus-within {
-				outline: 1px solid var(--bg-robin-400);
-			}
 		}
 	}
 }
@@ -122,9 +124,3 @@
 	padding: 4px 12px;
 	font-size: 12px;
 }
-
-.dashboard-variables-selection-container {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12px;
-}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'antd';
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
@@ -7,6 +7,7 @@ import {
 	useDashboardVariablesSelector,
 } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { AppState } from 'store/reducers';
@@ -21,6 +22,7 @@ import './DashboardVariableSelection.styles.scss';
 
 function DashboardVariableSelection(): JSX.Element | null {
 	const {
+		selectedDashboard,
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
 		variablesToGetUpdated,
@@ -50,36 +52,34 @@ function DashboardVariableSelection(): JSX.Element | null {
 		);
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
 
-	// Memoize the order key to avoid unnecessary triggers
-	const dependencyOrderKey = useMemo(
-		() => dependencyData?.order?.join(',') ?? '',
-		[dependencyData?.order],
-	);
-
-	// Trigger refetch when dependency order changes or global time changes
-	useEffect(() => {
-		if (dependencyData?.order && dependencyData.order.length > 0) {
-			setVariablesToGetUpdated(dependencyData?.order || []);
-		}
+	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
+	// also trigger when the global time changes
+	useEffect(
+		() => {
+			if (!isEmpty(dependencyData?.order)) {
+				setVariablesToGetUpdated(dependencyData?.order || []);
+			}
+		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dependencyOrderKey, minTime, maxTime]);
+		[JSON.stringify(dependencyData?.order), minTime, maxTime],
+	);
 
 	// Performance optimization: For dynamic variables with allSelected=true, we don't store
 	// individual values in localStorage since we can always derive them from available options.
 	// This makes localStorage much lighter and more efficient.
-	const onValueUpdate = useCallback(
-		(
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-			// eslint-disable-next-line sonarjs/cognitive-complexity
-		): void => {
+	const onValueUpdate = (
+		name: string,
+		id: string,
+		value: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+	): void => {
+		if (id) {
 			// For dynamic variables, only store in localStorage when NOT allSelected
 			// This makes localStorage much lighter by avoiding storing all individual values
-			const variable = dashboardVariables[id] || dashboardVariables[name];
-			const isDynamic = variable.type === 'DYNAMIC';
+			const variable = dashboardVariables?.[id] || dashboardVariables?.[name];
+			const isDynamic = variable?.type === 'DYNAMIC';
 			updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);
 
 			if (allSelected) {
@@ -88,39 +88,41 @@ function DashboardVariableSelection(): JSX.Element | null {
 				updateUrlVariable(name || id, value);
 			}
 
-			setSelectedDashboard((prev) => {
-				if (prev) {
-					const oldVariables = { ...prev?.data.variables };
-					// this is added to handle case where we have two different
-					// schemas for variable response
-					if (oldVariables?.[id]) {
-						oldVariables[id] = {
-							...oldVariables[id],
-							selectedValue: value,
-							allSelected,
-							haveCustomValuesSelected,
-						};
-					}
-					if (oldVariables?.[name]) {
-						oldVariables[name] = {
-							...oldVariables[name],
-							selectedValue: value,
-							allSelected,
-							haveCustomValuesSelected,
-						};
-					}
-					return {
-						...prev,
-						data: {
-							...prev?.data,
-							variables: {
-								...oldVariables,
+			if (selectedDashboard) {
+				setSelectedDashboard((prev) => {
+					if (prev) {
+						const oldVariables = prev?.data.variables;
+						// this is added to handle case where we have two different
+						// schemas for variable response
+						if (oldVariables?.[id]) {
+							oldVariables[id] = {
+								...oldVariables[id],
+								selectedValue: value,
+								allSelected,
+								haveCustomValuesSelected,
+							};
+						}
+						if (oldVariables?.[name]) {
+							oldVariables[name] = {
+								...oldVariables[name],
+								selectedValue: value,
+								allSelected,
+								haveCustomValuesSelected,
+							};
+						}
+						return {
+							...prev,
+							data: {
+								...prev?.data,
+								variables: {
+									...oldVariables,
+								},
 							},
-						},
-					};
-				}
-				return prev;
-			});
+						};
+					}
+					return prev;
+				});
+			}
 
 			if (dependencyData) {
 				const updatedVariables: string[] = [];
@@ -136,20 +138,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 			} else {
 				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
 			}
-		},
-		[
-			// This can be removed
-			dashboardVariables,
-			updateLocalStorageDashboardVariables,
-			dependencyData,
-			updateUrlVariable,
-			setSelectedDashboard,
-			setVariablesToGetUpdated,
-		],
-	);
+		}
+	};
 
 	return (
-		<Row className="dashboard-variables-selection-container">
+		<Row style={{ display: 'flex', gap: '12px' }}>
 			{sortedVariablesArray.map((variable) => {
 				const key = `${variable.name}${variable.id}${variable.order}`;
 

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -23,9 +23,9 @@ import { SelectItemStyle } from './styles';
 import {
 	areArraysEqual,
 	getOptionsForDynamicVariable,
-	getSelectValue,
 	uniqueValues,
 } from './util';
+import { getSelectValue } from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
 

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -1,229 +0,0 @@
-import { memo, useCallback, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { isArray, isString } from 'lodash-es';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { VariableResponseProps } from 'types/api/dashboard/variables/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { variablePropsToPayloadVariables } from '../utils';
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, checkAPIInvocation } from './util';
-
-interface QueryVariableInputProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
-	dependencyData: IDependencyData | null;
-}
-
-function QueryVariableInput({
-	variableData,
-	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
-	onValueUpdate,
-}: QueryVariableInputProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const {
-		tempSelection,
-		setTempSelection,
-		value,
-		defaultValue,
-		enableSelectAll,
-		onChange,
-		onDropdownVisibleChange,
-		handleClear,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-	});
-
-	const validVariableUpdate = (): boolean => {
-		if (!variableData.name) {
-			return false;
-		}
-		return Boolean(
-			variablesToGetUpdated.length &&
-				variablesToGetUpdated[0] === variableData.name,
-		);
-	};
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const getOptions = (variablesRes: VariableResponseProps | null): void => {
-		try {
-			setErrorMessage(null);
-
-			if (
-				variablesRes?.variableValues &&
-				Array.isArray(variablesRes?.variableValues)
-			) {
-				const newOptionsData = sortValues(
-					variablesRes?.variableValues,
-					variableData.sort,
-				);
-
-				const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
-
-				if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-					let valueNotInList = false;
-
-					if (isArray(variableData.selectedValue)) {
-						variableData.selectedValue.forEach((val) => {
-							if (!newOptionsData.includes(val)) {
-								valueNotInList = true;
-							}
-						});
-					} else if (
-						isString(variableData.selectedValue) &&
-						!newOptionsData.includes(variableData.selectedValue)
-					) {
-						valueNotInList = true;
-					}
-
-					// variablesData.allSelected is added for the case where on change of options we need to update the
-					// local storage
-					if (
-						variableData.name &&
-						(validVariableUpdate() || valueNotInList || variableData.allSelected)
-					) {
-						if (
-							variableData.allSelected &&
-							variableData.multiSelect &&
-							variableData.showALLOption
-						) {
-							onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
-
-							// Update tempSelection to maintain ALL state when dropdown is open
-							if (tempSelection !== undefined) {
-								setTempSelection(newOptionsData.map((option) => option.toString()));
-							}
-						} else {
-							const value = variableData.selectedValue;
-							let allSelected = false;
-
-							if (variableData.multiSelect) {
-								const { selectedValue } = variableData;
-								allSelected =
-									newOptionsData.length > 0 &&
-									Array.isArray(selectedValue) &&
-									newOptionsData.every((option) => selectedValue.includes(option));
-							}
-
-							if (variableData.name && variableData.id) {
-								onValueUpdate(variableData.name, variableData.id, value, allSelected);
-							}
-						}
-					}
-
-					setOptionsData(newOptionsData);
-				} else {
-					setVariablesToGetUpdated((prev) =>
-						prev.filter((name) => name !== variableData.name),
-					);
-				}
-			}
-		} catch (e) {
-			console.error(e);
-		}
-	};
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || '',
-			`${minTime}`,
-			`${maxTime}`,
-			JSON.stringify(dependencyData?.order),
-		],
-		{
-			enabled:
-				variableData &&
-				variableData.type === 'QUERY' &&
-				checkAPIInvocation(
-					variablesToGetUpdated,
-					variableData,
-					dependencyData?.parentDependencyGraph,
-				),
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableData.queryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
-			refetchOnWindowFocus: false,
-			onSuccess: (response) => {
-				getOptions(response.payload);
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
-			},
-			onError: (error: {
-				details: {
-					error: string;
-				};
-			}) => {
-				const { details } = error;
-
-				if (details.error) {
-					let message = details.error;
-					if ((details.error ?? '').toString().includes('Syntax error:')) {
-						message =
-							'Please make sure query is valid and dependent variables are selected';
-					}
-					setErrorMessage(message);
-				}
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
-			},
-		},
-	);
-
-	const handleRetry = useCallback((): void => {
-		setErrorMessage(null);
-		refetch();
-	}, [refetch]);
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={optionsData}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={onDropdownVisibleChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-			// query variable specific, API related props
-			loading={isLoading}
-			errorMessage={errorMessage}
-			onRetry={handleRetry}
-		/>
-	);
-}
-
-export default memo(QueryVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -1,134 +0,0 @@
-import { memo, useMemo } from 'react';
-import { orange } from '@ant-design/colors';
-import { WarningOutlined } from '@ant-design/icons';
-import { Popover, Tooltip, Typography } from 'antd';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-
-const errorIconStyle = { margin: '0 0.5rem' };
-
-interface SelectVariableInputProps {
-	variableId: string;
-	options: (string | number | boolean)[];
-	value: string | string[] | undefined;
-	enableSelectAll: boolean;
-	isMultiSelect: boolean;
-	onChange: (value: string | string[]) => void;
-	onClear: () => void;
-	defaultValue?: string | string[];
-	onDropdownVisibleChange?: (visible: boolean) => void;
-	loading?: boolean;
-	errorMessage?: string | null;
-	onRetry?: () => void;
-}
-
-const MAX_TAG_DISPLAY_VALUES = 10;
-
-function maxTagPlaceholder(
-	omittedValues: { label?: React.ReactNode; value?: string | number }[],
-): JSX.Element {
-	const valuesToShow = omittedValues.slice(0, MAX_TAG_DISPLAY_VALUES);
-	const hasMore = omittedValues.length > MAX_TAG_DISPLAY_VALUES;
-	const tooltipText =
-		valuesToShow.map(({ value: v }) => v ?? '').join(', ') +
-		(hasMore ? ` + ${omittedValues.length - MAX_TAG_DISPLAY_VALUES} more` : '');
-
-	return (
-		<Tooltip title={tooltipText}>
-			<span>+ {omittedValues.length} </span>
-		</Tooltip>
-	);
-}
-
-function SelectVariableInput({
-	variableId,
-	options,
-	value,
-	onChange,
-	onDropdownVisibleChange,
-	onClear,
-	loading,
-	errorMessage,
-	onRetry,
-	enableSelectAll,
-	isMultiSelect,
-	defaultValue,
-}: SelectVariableInputProps): JSX.Element {
-	const selectOptions = useMemo(
-		() =>
-			options.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[options],
-	);
-
-	const commonProps = useMemo(
-		() => ({
-			// main props
-			key: variableId,
-			value,
-			defaultValue,
-
-			// setup props
-			placeholder: 'Select value',
-			className: 'variable-select',
-			popupClassName: 'dropdown-styles',
-			getPopupContainer: popupContainer,
-			style: SelectItemStyle,
-			showSearch: true,
-			bordered: false,
-
-			// dynamic props
-			'data-testid': 'variable-select',
-			onChange,
-			loading,
-			options: selectOptions,
-			errorMessage,
-			onRetry,
-		}),
-		[
-			variableId,
-			defaultValue,
-			onChange,
-			loading,
-			selectOptions,
-			value,
-			errorMessage,
-			onRetry,
-		],
-	);
-
-	return (
-		<>
-			{isMultiSelect ? (
-				<CustomMultiSelect
-					{...commonProps}
-					placement="bottomLeft"
-					maxTagCount={2}
-					onDropdownVisibleChange={onDropdownVisibleChange}
-					maxTagPlaceholder={maxTagPlaceholder}
-					onClear={onClear}
-					enableAllSelection={enableSelectAll}
-					maxTagTextLength={30}
-					allowClear={value !== ALL_SELECT_VALUE && value !== 'ALL'}
-				/>
-			) : (
-				<CustomSelect {...commonProps} />
-			)}
-
-			{errorMessage && (
-				<span style={errorIconStyle}>
-					<Popover placement="top" content={<Typography>{errorMessage}</Typography>}>
-						<WarningOutlined style={{ color: orange[5] }} />
-					</Popover>
-				</span>
-			)}
-		</>
-	);
-}
-
-export default memo(SelectVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx

@@ -1,85 +0,0 @@
-import { memo, useCallback, useRef, useState } from 'react';
-import { Input, InputRef } from 'antd';
-
-import { VariableItemProps } from './VariableItem';
-
-type TextboxVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate'
->;
-
-function TextboxVariableInput({
-	variableData,
-	onValueUpdate,
-}: TextboxVariableInputProps): JSX.Element {
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			if (inputValue === variableData.selectedValue) {
-				return;
-			}
-			if (variableData.name) {
-				onValueUpdate(variableData.name, variableData.id, inputValue, false);
-			}
-		},
-		[
-			onValueUpdate,
-			variableData.id,
-			variableData.name,
-			variableData.selectedValue,
-		],
-	);
-
-	const textboxInputRef = useRef<InputRef>(null);
-	const [textboxInputValue, setTextboxInputValue] = useState<string>(
-		(variableData.selectedValue?.toString() ||
-			variableData.defaultValue?.toString()) ??
-			'',
-	);
-
-	const handleInputOnChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			setTextboxInputValue(event.target.value);
-		},
-		[setTextboxInputValue],
-	);
-
-	const handleInputOnBlur = useCallback(
-		(event: React.FocusEvent<HTMLInputElement>): void => {
-			const value = event.target.value.trim();
-			// If empty, reset to default value
-			if (!value && variableData.defaultValue) {
-				setTextboxInputValue(variableData.defaultValue.toString());
-				handleChange(variableData.defaultValue.toString());
-			} else {
-				handleChange(value);
-			}
-		},
-		[handleChange, variableData.defaultValue],
-	);
-
-	const handleInputOnKeyDown = useCallback(
-		(event: React.KeyboardEvent<HTMLInputElement>): void => {
-			if (event.key === 'Enter') {
-				textboxInputRef.current?.blur();
-			}
-		},
-		[],
-	);
-
-	return (
-		<Input
-			key={variableData.id}
-			ref={textboxInputRef}
-			placeholder="Enter value"
-			data-testid={`variable-textbox-${variableData.id}`}
-			bordered={false}
-			value={textboxInputValue}
-			title={textboxInputValue}
-			onChange={handleInputOnChange}
-			onBlur={handleInputOnBlur}
-			onKeyDown={handleInputOnKeyDown}
-		/>
-	);
-}
-
-export default memo(TextboxVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -1,16 +1,35 @@
-import { memo } from 'react';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-nested-ternary */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { orange } from '@ant-design/colors';
+import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
+import { Input, InputRef, Popover, Tooltip, Typography } from 'antd';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
+import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import { debounce, isArray, isEmpty, isString } from 'lodash-es';
 import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { VariableResponseProps } from 'types/api/dashboard/variables/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
 
-import CustomVariableInput from './CustomVariableInput';
-import QueryVariableInput from './QueryVariableInput';
-import TextboxVariableInput from './TextboxVariableInput';
+import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
+import { SelectItemStyle } from './styles';
+import { areArraysEqual, checkAPIInvocation } from './util';
 
 import './DashboardVariableSelection.styles.scss';
 
-export interface VariableItemProps {
+interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
 	onValueUpdate: (
@@ -24,49 +43,488 @@ export interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
+export const getSelectValue = (
+	selectedValue: IDashboardVariable['selectedValue'],
+	variableData: IDashboardVariable,
+): string | string[] | undefined => {
+	if (Array.isArray(selectedValue)) {
+		if (!variableData.multiSelect && selectedValue.length === 1) {
+			return selectedValue[0]?.toString();
+		}
+		return selectedValue.map((item) => item.toString());
+	}
+	return selectedValue?.toString();
+};
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function VariableItem({
 	variableData,
-	onValueUpdate,
 	existingVariables,
+	onValueUpdate,
 	variablesToGetUpdated,
 	setVariablesToGetUpdated,
 	dependencyData,
 }: VariableItemProps): JSX.Element {
-	const { name, description, type: variableType } = variableData;
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// Local state for textbox input to ensure smooth editing experience
+	const [textboxInputValue, setTextboxInputValue] = useState<string>(
+		(variableData.selectedValue?.toString() ||
+			variableData.defaultValue?.toString()) ??
+			'',
+	);
+	const [isTextboxFocused, setIsTextboxFocused] = useState<boolean>(false);
+	const textboxInputRef = useRef<InputRef>(null);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const validVariableUpdate = (): boolean => {
+		if (!variableData.name) {
+			return false;
+		}
+
+		// variableData.name is present as the top element or next in the queue - variablesToGetUpdated
+		return Boolean(
+			variablesToGetUpdated.length &&
+				variablesToGetUpdated[0] === variableData.name,
+		);
+	};
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const getOptions = (variablesRes: VariableResponseProps | null): void => {
+		if (variablesRes && variableData.type === 'QUERY') {
+			try {
+				setErrorMessage(null);
+
+				if (
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
+				) {
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
+					);
+
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						/* eslint-disable no-useless-escape */
+
+						let valueNotInList = false;
+
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								const isUsed = newOptionsData.includes(val);
+
+								if (!isUsed) {
+									valueNotInList = true;
+								}
+							});
+						} else if (isString(variableData.selectedValue)) {
+							const isUsed = newOptionsData.includes(variableData.selectedValue);
+
+							if (!isUsed) {
+								valueNotInList = true;
+							}
+						}
+
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.type === 'QUERY' &&
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
+							if (
+								variableData.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;
+
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (variableData && variableData?.name && variableData?.id) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
+							}
+						}
+
+						setOptionsData(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
+					}
+				}
+			} catch (e) {
+				console.error(e);
+			}
+		} else if (variableData.type === 'CUSTOM') {
+			const optionsData = sortValues(
+				commaValuesParser(variableData.customValue || ''),
+				variableData.sort,
+			) as never;
+
+			setOptionsData(optionsData);
+		}
+	};
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || '',
+			`${minTime}`,
+			`${maxTime}`,
+			JSON.stringify(dependencyData?.order),
+		],
+		{
+			enabled:
+				variableData &&
+				variableData.type === 'QUERY' &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
+				),
+			queryFn: () =>
+				dashboardVariablesQuery({
+					query: variableData.queryValue || '',
+					variables: variablePropsToPayloadVariables(existingVariables),
+				}),
+			refetchOnWindowFocus: false,
+			onSuccess: (response) => {
+				getOptions(response.payload);
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
+			},
+			onError: (error: {
+				details: {
+					error: string;
+				};
+			}) => {
+				const { details } = error;
+
+				if (details.error) {
+					let message = details.error;
+					if ((details.error ?? '').toString().includes('Syntax error:')) {
+						message =
+							'Please make sure query is valid and dependent variables are selected';
+					}
+					setErrorMessage(message);
+				}
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
+			},
+		},
+	);
+
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+
+			if (
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
+			) {
+				return;
+			}
+			if (variableData.name) {
+				// Check if ALL is effectively selected by comparing with available options
+				const isAllSelected =
+					Array.isArray(value) &&
+					value.length > 0 &&
+					optionsData.every((option) => value.includes(option.toString()));
+
+				if (isAllSelected && variableData.showALLOption) {
+					// For ALL selection, pass null to avoid storing values
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(variableData.name, variableData.id, value, false);
+				}
+			}
+		},
+		[
+			variableData.multiSelect,
+			variableData.selectedValue,
+			variableData.name,
+			variableData.id,
+			onValueUpdate,
+			optionsData,
+			variableData.showALLOption,
+		],
+	);
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = (inputValue: string | string[]): void => {
+		// Store the selection in temporary state while dropdown is open
+		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+		setTempSelection(value);
+	};
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
+		}
+	};
+
+	// do not debounce the above function as we do not need debounce in select variables
+	const debouncedHandleChange = debounce(handleChange, 500);
+
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(
+		() => getSelectValue(selectedValue, variableData),
+		[selectedValue, variableData],
+	);
+
+	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
+
+	const selectValue =
+		variableData.allSelected && enableSelectAll
+			? 'ALL'
+			: selectedValueStringified;
+
+	// Apply default value on first render if no selection exists
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		selectedValue,
+		tempSelection,
+		optionsData,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
+
+	useEffect(() => {
+		// Fetch options for CUSTOM Type
+		if (variableData.type === 'CUSTOM') {
+			getOptions(null);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variableData.type, variableData.customValue]);
 
 	return (
-		<div className="variable-item">
+		<div className={`variable-item${isTextboxFocused ? ' focused' : ''}`}>
 			<Typography.Text className="variable-name" ellipsis>
-				${name}
-				{description && (
-					<Tooltip title={description}>
+				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
 						<InfoCircleOutlined className="info-icon" />
 					</Tooltip>
 				)}
 			</Typography.Text>
 
 			<div className="variable-value">
-				{variableType === 'TEXTBOX' && (
-					<TextboxVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
+				{variableData.type === 'TEXTBOX' ? (
+					<Input
+						ref={textboxInputRef}
+						placeholder="Enter value"
+						data-testid={`variable-textbox-${variableData.id}`}
+						bordered={false}
+						value={textboxInputValue}
+						title={textboxInputValue}
+						onChange={(e): void => {
+							setTextboxInputValue(e.target.value);
+						}}
+						onFocus={(): void => {
+							setIsTextboxFocused(true);
+						}}
+						onBlur={(e): void => {
+							setIsTextboxFocused(false);
+							const value = e.target.value.trim();
+							// If empty, reset to default value
+							if (!value && variableData.defaultValue) {
+								setTextboxInputValue(variableData.defaultValue.toString());
+								debouncedHandleChange(variableData.defaultValue.toString());
+							} else {
+								debouncedHandleChange(value);
+							}
+						}}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								const value = textboxInputValue.trim();
+								if (!value && variableData.defaultValue) {
+									setTextboxInputValue(variableData.defaultValue.toString());
+									debouncedHandleChange(variableData.defaultValue.toString());
+								} else {
+									debouncedHandleChange(value);
+								}
+								textboxInputRef.current?.blur();
+							}
+						}}
 					/>
+				) : (
+					optionsData &&
+					(variableData.multiSelect ? (
+						<CustomMultiSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleTempChange}
+							bordered={false}
+							placeholder="Select value"
+							placement="bottomLeft"
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							popupClassName="dropdown-styles"
+							maxTagCount={2}
+							getPopupContainer={popupContainer}
+							value={tempSelection || selectValue}
+							onDropdownVisibleChange={handleDropdownVisibleChange}
+							errorMessage={errorMessage}
+							// eslint-disable-next-line react/no-unstable-nested-components
+							maxTagPlaceholder={(omittedValues): JSX.Element => {
+								const maxDisplayValues = 10;
+								const valuesToShow = omittedValues.slice(0, maxDisplayValues);
+								const hasMore = omittedValues.length > maxDisplayValues;
+								const tooltipText =
+									valuesToShow.map(({ value }) => value).join(', ') +
+									(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
+
+								return (
+									<Tooltip title={tooltipText}>
+										<span>+ {omittedValues.length} </span>
+									</Tooltip>
+								);
+							}}
+							onClear={(): void => {
+								handleChange([]);
+							}}
+							enableAllSelection={enableSelectAll}
+							maxTagTextLength={30}
+							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
+							onRetry={(): void => {
+								setErrorMessage(null);
+								refetch();
+							}}
+						/>
+					) : (
+						<CustomSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleChange}
+							bordered={false}
+							placeholder="Select value"
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							popupClassName="dropdown-styles"
+							getPopupContainer={popupContainer}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							value={selectValue}
+							errorMessage={errorMessage}
+							onRetry={(): void => {
+								setErrorMessage(null);
+								refetch();
+							}}
+						/>
+					))
 				)}
-				{variableType === 'CUSTOM' && (
-					<CustomVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-					/>
-				)}
-				{variableType === 'QUERY' && (
-					<QueryVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-						existingVariables={existingVariables}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
-					/>
+				{variableData.type !== 'TEXTBOX' && errorMessage && (
+					<span style={{ margin: '0 0.5rem' }}>
+						<Popover
+							placement="top"
+							content={<Typography>{errorMessage}</Typography>}
+						>
+							<WarningOutlined style={{ color: orange[5] }} />
+						</Popover>
+					</span>
 				)}
 			</div>
 		</div>

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -1,201 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { isEmpty } from 'lodash-es';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import { areArraysEqual, getSelectValue } from './util';
-
-interface UseDashboardVariableSelectHelperParams {
-	variableData: IDashboardVariable;
-	optionsData: (string | number | boolean)[];
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void;
-}
-
-interface UseDashboardVariableSelectHelperReturn {
-	// State
-	tempSelection: string | string[] | undefined;
-	setTempSelection: React.Dispatch<
-		React.SetStateAction<string | string[] | undefined>
-	>;
-	value: string | string[] | undefined;
-	defaultValue: string | string[] | undefined;
-
-	// Derived values
-	enableSelectAll: boolean;
-
-	// Handlers
-	onChange: (value: string | string[]) => void;
-	onDropdownVisibleChange: (visible: boolean) => void;
-	handleClear: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function useDashboardVariableSelectHelper({
-	variableData,
-	optionsData,
-	onValueUpdate,
-}: UseDashboardVariableSelectHelperParams): UseDashboardVariableSelectHelperReturn {
-	const { selectedValue } = variableData;
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? 'ALL'
-			: selectedValueStringified;
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-			if (variableData.name) {
-				// Check if ALL is effectively selected by comparing with available options
-				const isAllSelected =
-					Array.isArray(value) &&
-					value.length > 0 &&
-					optionsData.every((option) => value.includes(option.toString()));
-
-				if (isAllSelected && variableData.showALLOption) {
-					// For ALL selection, pass optionsData as the value and set allSelected to true
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
-		},
-		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			variableData.showALLOption,
-			onValueUpdate,
-			optionsData,
-		],
-	);
-
-	const handleTempChange = useCallback(
-		(inputValue: string | string[]): void => {
-			// Store the selection in temporary state while dropdown is open
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			setTempSelection(value);
-		},
-		[variableData.multiSelect],
-	);
-
-	// Apply default value on first render if no selection exists
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	// Apply default values when needed
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
-
-	// Handle dropdown visibility changes
-	const onDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			// Initialize temp selection when opening dropdown
-			if (visible) {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-			}
-			// Apply changes when closing dropdown
-			else if (!visible && tempSelection !== undefined) {
-				// Call handleChange with the temporarily stored selection
-				handleChange(tempSelection);
-				setTempSelection(undefined);
-			}
-		},
-		[variableData, tempSelection, handleChange],
-	);
-
-	const handleClear = useCallback((): void => {
-		handleChange([]);
-	}, [handleChange]);
-
-	const value = variableData.multiSelect
-		? tempSelection || selectValue
-		: selectValue;
-
-	const defaultValue = variableData.defaultValue || selectValue;
-
-	const onChange = useMemo(() => {
-		return variableData.multiSelect ? handleTempChange : handleChange;
-	}, [variableData.multiSelect, handleTempChange, handleChange]);
-
-	return {
-		tempSelection,
-		setTempSelection,
-		enableSelectAll,
-		onDropdownVisibleChange,
-		handleClear,
-		value,
-		defaultValue,
-		onChange,
-	};
-}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -381,16 +381,3 @@ export const uniqueValues = (values: string[] | string): string[] | string => {
 
 	return values;
 };
-
-export const getSelectValue = (
-	selectedValue: IDashboardVariable['selectedValue'],
-	variableData: IDashboardVariable,
-): string | string[] | undefined => {
-	if (Array.isArray(selectedValue)) {
-		if (!variableData.multiSelect && selectedValue.length === 1) {
-			return selectedValue[0]?.toString();
-		}
-		return selectedValue.map((item) => item.toString());
-	}
-	return selectedValue?.toString();
-};

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss

@@ -1,21 +0,0 @@
-.chart-manager-container {
-	width: 100%;
-	max-height: calc(40% - 40px);
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.chart-manager-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 16px;
-
-		.chart-manager-actions-container {
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,147 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
-import { ResizeTable } from 'components/ResizeTable';
-import { getGraphManagerTableColumns } from 'container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns';
-import { ExtendedChartDataset } from 'container/GridCardLayout/GridCard/FullView/types';
-import { getDefaultTableDataSet } from 'container/GridCardLayout/GridCard/FullView/utils';
-import { useNotifications } from 'hooks/useNotifications';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-import './ChartManager.styles.scss';
-
-interface ChartManagerProps {
-	config: UPlotConfigBuilder;
-	alignedData: uPlot.AlignedData;
-	yAxisUnit?: string;
-	onCancel?: () => void;
-}
-
-/**
- * ChartManager provides a tabular view to manage the visibility of
- * individual series on a uPlot chart.
- *
- * It syncs with the legend state coming from the plot context and
- * allows users to:
- * - filter series by label
- * - toggle individual series on/off
- * - persist the visibility configuration to local storage.
- *
- * @param config - `UPlotConfigBuilder` instance used to derive chart options.
- * @param alignedData - uPlot aligned data used to build the initial table dataset.
- * @param yAxisUnit - Optional unit label for Y-axis values shown in the table.
- * @param onCancel - Optional callback invoked when the user cancels the dialog.
- */
-export default function ChartManager({
-	config,
-	alignedData,
-	yAxisUnit,
-	onCancel,
-}: ChartManagerProps): JSX.Element {
-	const { notifications } = useNotifications();
-	const { legendItemsMap } = useLegendsSync({
-		config,
-		subscribeToFocusChange: false,
-	});
-	const {
-		onToggleSeriesOnOff,
-		onToggleSeriesVisibility,
-		syncSeriesVisibilityToLocalStorage,
-	} = usePlotContext();
-	const { isDashboardLocked } = useDashboard();
-
-	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
-		getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
-	);
-
-	const graphVisibilityState = useMemo(
-		() =>
-			Object.entries(legendItemsMap).reduce<boolean[]>((acc, [key, item]) => {
-				acc[Number(key)] = item.show;
-				return acc;
-			}, []),
-		[legendItemsMap],
-	);
-
-	useEffect(() => {
-		setTableDataSet(
-			getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
-		);
-	}, [alignedData, config]);
-
-	const filterHandler = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = event.target.value.toString().toLowerCase();
-			const updatedDataSet = tableDataSet.map((item) => {
-				if (item.label?.toLocaleLowerCase().includes(value)) {
-					return { ...item, show: true };
-				}
-				return { ...item, show: false };
-			});
-			setTableDataSet(updatedDataSet);
-		},
-		[tableDataSet],
-	);
-
-	const dataSource = useMemo(
-		() =>
-			tableDataSet.filter(
-				(item, index) => index !== 0 && item.show, // skipping the first item as it is the x-axis
-			),
-		[tableDataSet],
-	);
-
-	const columns = useMemo(
-		() =>
-			getGraphManagerTableColumns({
-				tableDataSet,
-				checkBoxOnChangeHandler: (_e, index) => {
-					onToggleSeriesOnOff(index);
-				},
-				graphVisibilityState,
-				labelClickedHandler: onToggleSeriesVisibility,
-				yAxisUnit,
-				isGraphDisabled: isDashboardLocked,
-			}),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[tableDataSet, graphVisibilityState, yAxisUnit, isDashboardLocked],
-	);
-
-	const handleSave = useCallback((): void => {
-		syncSeriesVisibilityToLocalStorage();
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
-		if (onCancel) {
-			onCancel();
-		}
-	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
-
-	return (
-		<div className="chart-manager-container">
-			<div className="chart-manager-header">
-				<Input onChange={filterHandler} placeholder="Filter Series" />
-				<div className="chart-manager-actions-container">
-					<Button type="default" onClick={onCancel}>
-						Cancel
-					</Button>
-					<Button type="primary" onClick={handleSave}>
-						Save
-					</Button>
-				</div>
-			</div>
-			<div className="chart-manager-table-container">
-				<ResizeTable
-					columns={columns}
-					dataSource={dataSource}
-					virtual
-					rowKey="index"
-					scroll={{ y: 200 }}
-					pagination={false}
-				/>
-			</div>
-		</div>
-	);
-}

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

@@ -1,120 +0,0 @@
-import { useCallback } from 'react';
-import { UseQueryResult } from 'react-query';
-import {
-	getTimeRangeFromStepInterval,
-	isApmMetric,
-} from 'container/PanelWrapper/utils';
-import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
-import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
-import {
-	PopoverPosition,
-	useCoordinates,
-} from 'periscope/components/ContextMenu';
-import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-interface UseTimeSeriesContextMenuParams {
-	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
-}
-
-export const usePanelContextMenu = ({
-	widget,
-	queryResponse,
-}: UseTimeSeriesContextMenuParams): {
-	coordinates: { x: number; y: number } | null;
-	popoverPosition: PopoverPosition | null;
-	onClose: () => void;
-	menuItemsConfig: {
-		header?: string | React.ReactNode;
-		items?: React.ReactNode;
-	};
-	clickHandlerWithContextMenu: (...args: any[]) => void;
-} => {
-	const {
-		coordinates,
-		popoverPosition,
-		clickedData,
-		onClose,
-		subMenu,
-		onClick,
-		setSubMenu,
-	} = useCoordinates();
-
-	const { menuItemsConfig } = useGraphContextMenu({
-		widgetId: widget.id || '',
-		query: widget.query,
-		graphData: clickedData,
-		onClose,
-		coordinates,
-		subMenu,
-		setSubMenu,
-		contextLinks: widget.contextLinks,
-		panelType: widget.panelTypes,
-		queryRange: queryResponse,
-	});
-
-	const clickHandlerWithContextMenu = useCallback(
-		(...args: any[]) => {
-			const [
-				xValue,
-				_yvalue,
-				_mouseX,
-				_mouseY,
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				axesData,
-				focusedSeries,
-			] = args;
-
-			const data = getUplotClickData({
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				focusedSeries,
-			});
-
-			let timeRange;
-
-			if (axesData && queryData?.queryName) {
-				const compositeQuery = (queryResponse?.data?.params as any)?.compositeQuery;
-
-				if (compositeQuery?.queries) {
-					const specificQuery = compositeQuery.queries.find(
-						(query: any) => query.spec?.name === queryData.queryName,
-					);
-
-					const stepInterval = specificQuery?.spec?.stepInterval || 60;
-
-					timeRange = getTimeRangeFromStepInterval(
-						stepInterval,
-						metric?.clickedTimestamp || xValue,
-						specificQuery?.spec?.signal === DataSource.METRICS &&
-							isApmMetric(specificQuery?.spec?.aggregations[0]?.metricName),
-					);
-				}
-			}
-
-			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label, timeRange });
-			}
-		},
-		[onClick, queryResponse],
-	);
-
-	return {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	};
-};

frontend/src/container/DashboardContainer/visualization/panels/Panel.styles.scss

@@ -1,4 +0,0 @@
-.panel-container {
-	height: 100%;
-	width: 100%;
-}

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

@@ -1,176 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
-import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { LineInterpolation } from 'lib/uPlotV2/config/types';
-import { ContextMenu } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
-
-import '../Panel.styles.scss';
-
-function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareChartData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const config = useMemo(() => {
-		const tzDate = (timestamp: number): Date =>
-			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-		return prepareUPlotConfig({
-			widgetId: widget.id || '',
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			tzDate,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-			isLogScale: widget?.isLogScale ?? false,
-			thresholds: {
-				scaleKey: 'y',
-				thresholds: (widget.thresholds || []).map((threshold) => ({
-					thresholdValue: threshold.thresholdValue ?? 0,
-					thresholdColor: threshold.thresholdColor,
-					thresholdUnit: threshold.thresholdUnit,
-					thresholdLabel: threshold.thresholdLabel,
-				})),
-				yAxisUnit: widget.yAxisUnit,
-			},
-			yAxisUnit: widget.yAxisUnit || '',
-			softMin: widget.softMin === undefined ? null : widget.softMin,
-			softMax: widget.softMax === undefined ? null : widget.softMax,
-			spanGaps: false,
-			colorMapping: widget.customLegendColors ?? {},
-			lineInterpolation: LineInterpolation.Spline,
-			isDarkMode,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			currentQuery: widget.query,
-			panelMode,
-		});
-	}, [
-		widget.id,
-		maxTimeScale,
-		minTimeScale,
-		timezone.value,
-		widget.customLegendColors,
-		widget.isLogScale,
-		widget.softMax,
-		widget.softMin,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		widget.query,
-		widget.thresholds,
-		widget.yAxisUnit,
-		panelMode,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-	]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<TimeSeries
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</TimeSeries>
-			)}
-		</div>
-	);
-}
-
-export default TimeSeriesPanel;

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

@@ -1,170 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	fillMissingXAxisTimestamps,
-	getXAxisTimestamps,
-} from 'container/DashboardContainer/visualization/panels/utils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	SelectionPreferencesSource,
-	VisibilityMode,
-} 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 { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { PanelMode } from '../types';
-
-export const prepareChartData = (
-	apiResponse: MetricRangePayloadProps,
-): uPlot.AlignedData => {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-
-	return [timestampArr, ...yAxisValuesArr];
-};
-
-export const prepareUPlotConfig = ({
-	widgetId,
-	apiResponse,
-	tzDate,
-	minTimeScale,
-	maxTimeScale,
-	isLogScale,
-	thresholds,
-	softMin,
-	softMax,
-	spanGaps,
-	colorMapping,
-	lineInterpolation,
-	isDarkMode,
-	currentQuery,
-	onDragSelect,
-	onClick,
-	yAxisUnit,
-	panelMode,
-}: {
-	widgetId: string;
-	apiResponse: MetricRangePayloadProps;
-	tzDate: uPlot.LocalDateFromUnix;
-	minTimeScale: number | undefined;
-	maxTimeScale: number | undefined;
-	isLogScale: boolean;
-	softMin: number | null;
-	softMax: number | null;
-	spanGaps: boolean;
-	colorMapping: Record<string, string>;
-	lineInterpolation: LineInterpolation;
-	isDarkMode: boolean;
-	thresholds: ThresholdsDrawHookOptions;
-	currentQuery: Query;
-	yAxisUnit: string;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	panelMode: PanelMode;
-}): UPlotConfigBuilder => {
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	// X scale – time axis
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: softMin ?? undefined,
-		softMax: softMax ?? undefined,
-		thresholds,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	builder.addThresholds(thresholds);
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: false,
-		panelType: PANEL_TYPES.TIME_SERIES,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: false,
-		yAxisUnit,
-		panelType: PANEL_TYPES.TIME_SERIES,
-	});
-
-	apiResponse.data?.result?.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Line,
-			label: label,
-			colorMapping,
-			spanGaps,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-	return builder;
-};

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

@@ -1,54 +0,0 @@
-import { normalizePlotValue } from 'lib/uPlotV2/utils/dataUtils';
-import { QueryData } from 'types/api/widgets/getQuery';
-
-export function getXAxisTimestamps(seriesList: QueryData[]): number[] {
-	const timestamps = new Set<number>();
-
-	seriesList.forEach((series: { values?: [number, string][] }) => {
-		if (series?.values) {
-			series.values.forEach((value) => {
-				timestamps.add(value[0]);
-			});
-		}
-	});
-
-	const timestampsArr = Array.from(timestamps);
-	timestampsArr.sort((a, b) => a - b);
-
-	return timestampsArr;
-}
-
-export function fillMissingXAxisTimestamps(
-	timestampArr: number[],
-	data: Array<{ values?: [number, string][] }>,
-): (number | null)[][] {
-	// Ensure we work with a sorted, de‑duplicated list of x-axis timestamps
-	const canonicalTimestamps = Array.from(new Set(timestampArr)).sort(
-		(a, b) => a - b,
-	);
-
-	return data.map(({ values }) =>
-		buildSeriesYValues(canonicalTimestamps, values),
-	);
-}
-
-function buildSeriesYValues(
-	timestamps: number[],
-	values?: [number, string][],
-): (number | null)[] {
-	if (!values?.length) {
-		return [];
-	}
-
-	const valueByTimestamp = new Map<number, number | null>();
-
-	for (let i = 0; i < values.length; i++) {
-		const [timestamp, rawValue] = values[i];
-		valueByTimestamp.set(timestamp, normalizePlotValue(rawValue));
-	}
-
-	return timestamps.map((timestamp) => {
-		const value = valueByTimestamp.get(timestamp);
-		return value !== undefined ? value : null;
-	});
-}

frontend/src/container/MetricsExplorer/Explorer/RelatedMetricsCard.tsx

@@ -39,10 +39,7 @@ function RelatedMetricsCard({ metric }: RelatedMetricsCardProps): JSX.Element {
 					dataSource={DataSource.METRICS}
 				/>
 			)}
-			<DashboardsAndAlertsPopover
-				dashboards={metric.dashboards}
-				alerts={metric.alerts}
-			/>
+			<DashboardsAndAlertsPopover metricName={metric.name} />
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/Inspect/utils.tsx

@@ -2,8 +2,8 @@
 import { useMemo, useState } from 'react';
 import { Card, Input, Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { MetricsexplorertypesMetricMetadataDTOType } from 'api/generated/services/sigNoz.schemas';
 import { InspectMetricsSeries } from 'api/metricsExplorer/getInspectMetricsDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import classNames from 'classnames';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { AggregatorFilter } from 'container/QueryBuilder/filters';
@@ -40,8 +40,10 @@ import {
  * returns true if the feature flag is enabled, false otherwise
  * Show the inspect button in  metrics explorer if the feature flag is enabled
  */
-export function isInspectEnabled(metricType: MetricType | undefined): boolean {
-	return metricType === MetricType.GAUGE;
+export function isInspectEnabled(
+	metricType: MetricsexplorertypesMetricMetadataDTOType | undefined,
+): boolean {
+	return metricType === MetricsexplorertypesMetricMetadataDTOType.gauge;
 }
 
 export function getAllTimestampsOfMetrics(

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -1,8 +1,17 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Collapse, Input, Menu, Popover, Typography } from 'antd';
+import {
+	Button,
+	Collapse,
+	Input,
+	Menu,
+	Popover,
+	Skeleton,
+	Typography,
+} from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
+import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
@@ -15,6 +24,8 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { AllAttributesProps, AllAttributesValueProps } from './types';
 import { getMetricDetailsQuery } from './utils';
 
+const ALL_ATTRIBUTES_KEY = 'all-attributes';
+
 export function AllAttributesValue({
 	filterKey,
 	filterValue,
@@ -110,12 +121,31 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
-	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	const [activeKey, setActiveKey] = useState<string | string[]>(
-		'all-attributes',
+	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
+
+	const {
+		data: attributesData,
+		isLoading: isLoadingAttributes,
+		isError: isErrorAttributes,
+		mutate: getMetricAttributes,
+	} = useGetMetricAttributes();
+
+	useEffect(() => {
+		if (metricName) {
+			getMetricAttributes({
+				data: {
+					metricName,
+				},
+			});
+		}
+	}, [getMetricAttributes, metricName]);
+
+	const attributes = useMemo(
+		() => attributesData?.data?.data?.attributes ?? [],
+		[attributesData],
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
@@ -178,7 +208,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.value.some((value) =>
+					attribute.values?.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -195,7 +225,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.value,
+							value: attribute.values,
 						},
 				  }))
 				: [],
@@ -252,6 +282,12 @@ function AllAttributes({
 		],
 	);
 
+	const emptyText = useMemo(
+		() =>
+			isErrorAttributes ? 'Error fetching attributes' : 'No attributes found',
+		[isErrorAttributes],
+	);
+
 	const items = useMemo(
 		() => [
 			{
@@ -270,6 +306,7 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
+							disabled={isLoadingAttributes}
 						/>
 					</div>
 				),
@@ -277,25 +314,37 @@ function AllAttributes({
 				children: (
 					<ResizeTable
 						columns={columns}
+						loading={isLoadingAttributes}
 						tableLayout="fixed"
 						dataSource={tableData}
 						pagination={false}
 						showHeader={false}
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
+						locale={{
+							emptyText,
+						}}
 					/>
 				),
 			},
 		],
-		[columns, tableData, searchString],
+		[searchString, columns, isLoadingAttributes, tableData, emptyText],
 	);
 
+	if (isLoadingAttributes) {
+		return (
+			<div className="all-attributes-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion metrics-metadata-accordion"
+			className="metrics-accordion metrics-all-attributes-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys)}
+			onChange={(keys): void => setActiveKey(keys as string[])}
 			items={items}
 		/>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -2,36 +2,84 @@ import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Dropdown, Typography } from 'antd';
+import { Skeleton } from 'antd/lib';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
+import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
+import {
+	useGetMetricAlerts,
+	useGetMetricDashboards,
+} from 'api/generated/services/metrics';
 
 function DashboardsAndAlertsPopover({
-	alerts,
-	dashboards,
+	metricName,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
 	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 
+	const {
+		data: alertsData,
+		isLoading: isLoadingAlerts,
+		isError: isErrorAlerts,
+	} = useGetMetricAlerts(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const {
+		data: dashboardsData,
+		isLoading: isLoadingDashboards,
+		isError: isErrorDashboards,
+	} = useGetMetricDashboards(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const alerts = useMemo(() => {
+		return alertsData?.data?.data?.alerts ?? [];
+	}, [alertsData]);
+
+	const dashboards = useMemo(() => {
+		const currentDashboards = dashboardsData?.data?.data?.dashboards ?? [];
+		// Remove duplicate dashboards
+		return currentDashboards.filter(
+			(dashboard, index, self) =>
+				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
+		);
+	}, [dashboardsData]);
+
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
 			return alerts.map((alert) => ({
-				key: alert.alert_id,
+				key: alert.alertId,
 				label: (
 					<Typography.Link
-						key={alert.alert_id}
+						key={alert.alertId}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alert_id);
+							params.set(QueryParams.ruleId, alert.alertId);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alert_name || alert.alert_id}
+						{alert.alertName || alert.alertId}
 					</Typography.Link>
 				),
 			}));
@@ -39,41 +87,44 @@ function DashboardsAndAlertsPopover({
 		return null;
 	}, [alerts, params]);
 
-	const uniqueDashboards = useMemo(
-		() =>
-			dashboards?.filter(
-				(item, index, self) =>
-					index === self.findIndex((t) => t.dashboard_id === item.dashboard_id),
-			),
-		[dashboards],
-	);
-
 	const dashboardsPopoverContent = useMemo(() => {
-		if (uniqueDashboards && uniqueDashboards.length > 0) {
-			return uniqueDashboards.map((dashboard) => ({
-				key: dashboard.dashboard_id,
+		if (dashboards && dashboards.length > 0) {
+			return dashboards.map((dashboard) => ({
+				key: dashboard.dashboardId,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboard_id}
+						key={dashboard.dashboardId}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboard_id,
+									dashboardId: dashboard.dashboardId,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboard_name || dashboard.dashboard_id}
+						{dashboard.dashboardName || dashboard.dashboardId}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [uniqueDashboards, safeNavigate]);
+	}, [dashboards, safeNavigate]);
 
-	if (!dashboardsPopoverContent && !alertsPopoverContent) {
-		return null;
+	if (isLoadingAlerts || isLoadingDashboards) {
+		return (
+			<div className="dashboards-and-alerts-popover-container">
+				<Skeleton title={false} paragraph={{ rows: 1 }} active />
+			</div>
+		);
+	}
+
+	// If there are no dashboards or alerts or both have errors, don't show the popover
+	const hidePopover =
+		(!dashboardsPopoverContent && !alertsPopoverContent) ||
+		(isErrorAlerts && isErrorDashboards);
+	if (hidePopover) {
+		return <div className="dashboards-and-alerts-popover-container" />;
 	}
 
 	return (
@@ -92,8 +143,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{uniqueDashboards?.length} dashboard
-							{uniqueDashboards?.length === 1 ? '' : 's'}
+							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -112,7 +162,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
+							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
 				</Dropdown>

frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx

@@ -0,0 +1,129 @@
+import { Skeleton, Tooltip, Typography } from 'antd';
+import { useMemo } from 'react';
+
+import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
+import { HighlightsProps } from './types';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+} from './utils';
+import { useGetMetricHighlights } from 'api/generated/services/metrics';
+
+function Highlights({ metricName }: HighlightsProps): JSX.Element {
+	const {
+		data: metricHighlightsData,
+		isLoading: isLoadingMetricHighlights,
+		isError: isErrorMetricHighlights,
+	} = useGetMetricHighlights(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const metricHighlights = useMemo(() => {
+		return metricHighlightsData?.data?.data ?? null;
+	}, [metricHighlightsData]);
+
+	const dataPoints = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
+					{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const timeSeries = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+
+		const timeSeriesActive = formatNumberToCompactFormat(
+			metricHighlights.activeTimeSeries,
+		);
+		const timeSeriesTotal = formatNumberToCompactFormat(
+			metricHighlights.totalTimeSeries,
+		);
+
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip
+					title="Active time series are those that have received data points in the last 1
+					hour."
+					placement="top"
+				>
+					<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const lastReceived = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		const displayText = formatTimestampToReadableDate(
+			metricHighlights.lastReceived,
+		);
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={displayText}>{displayText}</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	if (isLoadingMetricHighlights) {
+		return (
+			<div className="metric-details-content-grid">
+				<Skeleton title={false} paragraph={{ rows: 2 }} active />
+			</div>
+		);
+	}
+
+	return (
+		<div className="metric-details-content-grid">
+			<div className="labels-row">
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					SAMPLES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					TIME SERIES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					LAST RECEIVED
+				</Typography.Text>
+			</div>
+			<div className="values-row">
+				{dataPoints}
+				{timeSeries}
+				{lastReceived}
+			</div>
+		</div>
+	);
+}
+
+export default Highlights;

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,18 +1,25 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
+import {
+	invalidateGetMetricMetadata,
+	useUpdateMetricMetadata,
+} from 'api/generated/services/metrics';
+import {
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality,
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOType,
+} from 'api/generated/services/sigNoz.schemas';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
 import { ResizeTable } from 'components/ResizeTable';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';
-import { useUpdateMetricMetadata } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import { useNotifications } from 'hooks/useNotifications';
 import { Edit2, Save, X } from 'lucide-react';
 
@@ -23,23 +30,27 @@ import {
 } from '../Summary/constants';
 import { MetricTypeRenderer } from '../Summary/utils';
 import { METRIC_METADATA_KEYS } from './constants';
-import { MetadataProps } from './types';
-import { determineIsMonotonic } from './utils';
+import { MetadataProps, MetricMetadataState, TableFields } from './types';
+import {
+	transformMetricType,
+	transformTemporality,
+	transformUpdateMetricMetadataRequest,
+} from './utils';
 
 function Metadata({
 	metricName,
 	metadata,
-	refetchMetricDetails,
+	isErrorMetricMetadata,
+	isLoadingMetricMetadata,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
-	const [
-		metricMetadata,
-		setMetricMetadata,
-	] = useState<UpdateMetricMetadataProps>({
-		metricType: metadata?.metric_type || MetricType.SUM,
-		description: metadata?.description || '',
-		temporality: metadata?.temporality,
-		unit: metadata?.unit,
+
+	const [metricMetadata, setMetricMetadata] = useState<MetricMetadataState>({
+		type: MetricsexplorertypesUpdateMetricMetadataRequestDTOType.sum,
+		description: '',
+		temporality:
+			MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.unspecified,
+		unit: '',
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -51,6 +62,18 @@ function Metadata({
 	);
 	const queryClient = useQueryClient();
 
+	// Initialize state from metadata api data
+	useEffect(() => {
+		if (metadata) {
+			setMetricMetadata({
+				type: transformMetricType(metadata.type),
+				description: metadata.description,
+				temporality: transformTemporality(metadata.temporality),
+				unit: metadata.unit,
+			});
+		}
+	}, [metadata]);
+
 	const tableData = useMemo(
 		() =>
 			metadata
@@ -59,7 +82,7 @@ function Metadata({
 						temporality: metadata?.temporality,
 				  })
 						// Filter out monotonic as user input is not required
-						.filter((key) => key !== 'monotonic')
+						.filter((key) => key !== TableFields.IS_MONOTONIC)
 						.map((key) => ({
 							key,
 							value: {
@@ -72,30 +95,37 @@ function Metadata({
 	);
 
 	// Render un-editable field value
-	const renderUneditableField = useCallback((key: string, value: string) => {
-		if (key === 'metric_type') {
-			return <MetricTypeRenderer type={value as MetricType} />;
-		}
-		let fieldValue = value;
-		if (key === 'unit') {
-			fieldValue = getUniversalNameFromMetricUnit(value);
-		}
-		return <FieldRenderer field={fieldValue || '-'} />;
-	}, []);
+	const renderUneditableField = useCallback(
+		(key: keyof MetricMetadataState, value: string) => {
+			if (isErrorMetricMetadata) {
+				return <FieldRenderer field="-" />;
+			}
+			if (key === TableFields.TYPE) {
+				return <MetricTypeRenderer type={value as MetricType} />;
+			}
+			let fieldValue = value;
+			if (key === TableFields.UNIT) {
+				fieldValue = getUniversalNameFromMetricUnit(value);
+			}
+			return <FieldRenderer field={fieldValue || '-'} />;
+		},
+		[isErrorMetricMetadata],
+	);
 
 	const renderColumnValue = useCallback(
-		(field: { value: string; key: string }): JSX.Element => {
+		(field: { value: string; key: keyof MetricMetadataState }): JSX.Element => {
 			if (!isEditing) {
 				return renderUneditableField(field.key, field.value);
 			}
 
 			// Don't allow editing of unit if it's already set
-			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
+			const metricUnitAlreadySet =
+				field.key === TableFields.UNIT && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			if (field.key === 'metric_type') {
+			if (field.key === TableFields.TYPE) {
 				return (
 					<Select
 						data-testid="metric-type-select"
@@ -103,17 +133,17 @@ function Metadata({
 							value: key,
 							label: METRIC_TYPE_LABEL_MAP[key as MetricType],
 						}))}
-						value={metricMetadata.metricType}
+						value={metricMetadata.type}
 						onChange={(value): void => {
 							setMetricMetadata((prev) => ({
 								...prev,
-								metricType: value as MetricType,
+								metricType: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'unit') {
+			if (field.key === TableFields.UNIT) {
 				return (
 					<YAxisUnitSelector
 						value={metricMetadata.unit}
@@ -125,7 +155,7 @@ function Metadata({
 					/>
 				);
 			}
-			if (field.key === 'temporality') {
+			if (field.key === TableFields.Temporality) {
 				return (
 					<Select
 						data-testid="temporality-select"
@@ -137,22 +167,18 @@ function Metadata({
 						onChange={(value): void => {
 							setMetricMetadata((prev) => ({
 								...prev,
-								temporality: value as Temporality,
+								temporality: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'description') {
+			if (field.key === TableFields.DESCRIPTION) {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={
-							metricMetadata[
-								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
-							]
-						}
+						defaultValue={metricMetadata.description}
 						onChange={(e): void => {
 							setMetricMetadata((prev) => ({
 								...prev,
@@ -201,18 +227,14 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				metricName,
-				payload: {
-					...metricMetadata,
-					isMonotonic: determineIsMonotonic(
-						metricMetadata.metricType,
-						metricMetadata.temporality,
-					),
+				pathParams: {
+					metricName: metricName ?? '',
 				},
+				data: transformUpdateMetricMetadataRequest(metricName, metricMetadata),
 			},
 			{
 				onSuccess: (response): void => {
-					if (response?.statusCode === 200) {
+					if (response.status === 200) {
 						logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
 							[MetricsExplorerEventKeys.MetricName]: metricName,
 							[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -221,9 +243,13 @@ function Metadata({
 						notifications.success({
 							message: 'Metadata updated successfully',
 						});
-						refetchMetricDetails();
 						setIsEditing(false);
-						queryClient.invalidateQueries(['metricsList']);
+						// TODO: To update this to use invalidateGetMetricList
+						// once we have switched to the V2 API in summary page
+						queryClient.invalidateQueries([REACT_QUERY_KEY.GET_METRICS_LIST]);
+						invalidateGetMetricMetadata(queryClient, {
+							metricName,
+						});
 					} else {
 						notifications.error({
 							message:
@@ -243,10 +269,24 @@ function Metadata({
 		metricName,
 		metricMetadata,
 		notifications,
-		refetchMetricDetails,
 		queryClient,
 	]);
 
+	const cancelEdit = useCallback(
+		(e: React.MouseEvent<HTMLElement, MouseEvent>): void => {
+			e.stopPropagation();
+			if (metadata) {
+				setMetricMetadata({
+					type: transformMetricType(metadata.type),
+					description: metadata.description,
+					unit: metadata.unit,
+				});
+			}
+			setIsEditing(false);
+		},
+		[metadata],
+	);
+
 	const actionButton = useMemo(() => {
 		if (isEditing) {
 			return (
@@ -254,10 +294,7 @@ function Metadata({
 					<Button
 						className="action-button"
 						type="text"
-						onClick={(e): void => {
-							e.stopPropagation();
-							setIsEditing(false);
-						}}
+						onClick={cancelEdit}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -294,7 +331,7 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
+	}, [isEditing, isUpdatingMetricsMetadata, cancelEdit, handleSave]);
 
 	const items = useMemo(
 		() => [
@@ -321,6 +358,14 @@ function Metadata({
 		[actionButton, columns, tableData],
 	);
 
+	if (isLoadingMetricMetadata) {
+		return (
+			<div className="metrics-metadata-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -39,6 +39,7 @@
 		gap: 12px;
 
 		.metric-details-content-grid {
+			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -72,6 +73,7 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
+			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -102,6 +104,14 @@
 			}
 		}
 
+		.metrics-metadata-skeleton-container {
+			height: 330px;
+		}
+
+		.all-attributes-skeleton-container {
+			height: 600px;
+		}
+
 		.metrics-accordion {
 			.ant-table-body {
 				&::-webkit-scrollbar {
@@ -148,7 +158,6 @@
 
 				.all-attributes-search-input {
 					width: 300px;
-					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -161,6 +170,7 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
+								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -237,6 +247,7 @@
 			}
 
 			.metric-metadata-value {
+				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -330,18 +341,26 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-button {
-					.ant-typography {
-						color: var(--bg-slate-400);
+				.action-menu {
+					.action-button {
+						.ant-typography {
+							color: var(--bg-slate-400);
+						}
 					}
 				}
 			}
 
 			.metrics-accordion-content {
 				.metric-metadata-key {
+					.field-renderer-container {
+						.label {
+							color: var(--bg-slate-300);
+						}
+					}
+
 					.all-attributes-key {
 						.ant-typography:last-child {
-							color: var(--bg-slate-400);
+							color: var(--bg-vanilla-200);
 							background-color: var(--bg-robin-300);
 						}
 					}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -1,16 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import {
-	Button,
-	Divider,
-	Drawer,
-	Empty,
-	Skeleton,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Divider, Drawer, Empty, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
+import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 
@@ -19,16 +11,12 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { isInspectEnabled } from '../Inspect/utils';
-import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import AllAttributes from './AllAttributes';
 import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
+import Highlights from './Highlights';
 import Metadata from './Metadata';
 import { MetricDetailsProps } from './types';
-import {
-	formatNumberToCompactFormat,
-	formatTimestampToReadableDate,
-	getMetricDetailsQuery,
-} from './utils';
+import { getMetricDetailsQuery } from './utils';
 
 import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
@@ -43,55 +31,52 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data,
-		isLoading,
-		isFetching,
-		error: metricDetailsError,
-		refetch: refetchMetricDetails,
-	} = useGetMetricDetails(metricName ?? '', {
-		enabled: !!metricName,
-	});
-
-	const metric = data?.payload?.data;
-
-	const lastReceived = useMemo(() => {
-		if (!metric) {
-			return null;
-		}
-		return formatTimestampToReadableDate(metric.lastReceived);
-	}, [metric]);
-
-	const showInspectFeature = useMemo(
-		() => isInspectEnabled(metric?.metadata?.metric_type),
-		[metric],
+		data: metricMetadataResponse,
+		isLoading: isLoadingMetricMetadata,
+		isError: isErrorMetricMetadata,
+	} = useGetMetricMetadata(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
 	);
 
-	const isMetricDetailsLoading = isLoading || isFetching;
-
-	const timeSeries = useMemo(() => {
-		if (!metric) {
+	const metadata = useMemo(() => {
+		if (
+			!metricMetadataResponse ||
+			!metricMetadataResponse.data ||
+			!metricMetadataResponse.data.data
+		) {
 			return null;
 		}
-		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
-		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
+		const {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		} = metricMetadataResponse.data.data;
 
-		return (
-			<Tooltip
-				title="Active time series are those that have received data points in the last 1
-					hour."
-				placement="top"
-			>
-				<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-			</Tooltip>
-		);
-	}, [metric]);
+		return {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		};
+	}, [metricMetadataResponse]);
+
+	const showInspectFeature = useMemo(() => isInspectEnabled(metadata?.type), [
+		metadata,
+	]);
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(
-				metricName,
-				metric?.metadata?.metric_type,
-			);
+			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -107,9 +92,7 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
-
-	const isMetricDetailsError = metricDetailsError || !metric;
+	}, [metricName, handleExplorerTabChange, metadata?.type]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -117,6 +100,10 @@ function MetricDetails({
 		});
 	}, []);
 
+	if (!metricName) {
+		return <Empty description="Metric not found" />;
+	}
+
 	return (
 		<Drawer
 			width="60%"
@@ -124,7 +111,7 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metric?.name}</Typography.Text>
+						<Typography.Text>{metricName}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
@@ -142,8 +129,8 @@ function MetricDetails({
 								aria-label="Inspect Metric"
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metric?.name) {
-										openInspectModal(metric.name);
+									if (metricName) {
+										openInspectModal(metricName);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -163,60 +150,17 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			{isMetricDetailsLoading && (
-				<div data-testid="metric-details-skeleton">
-					<Skeleton active />
-				</div>
-			)}
-			{isMetricDetailsError && !isMetricDetailsLoading && (
-				<Empty description="Error fetching metric details" />
-			)}
-			{!isMetricDetailsLoading && !isMetricDetailsError && (
-				<div className="metric-details-content">
-					<div className="metric-details-content-grid">
-						<div className="labels-row">
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								SAMPLES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								TIME SERIES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								LAST RECEIVED
-							</Typography.Text>
-						</div>
-						<div className="values-row">
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={metric?.samples.toLocaleString()}>
-									{formatNumberIntoHumanReadableFormat(metric?.samples)}
-								</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={timeSeries}>{timeSeries}</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={lastReceived}>{lastReceived}</Tooltip>
-							</Typography.Text>
-						</div>
-					</div>
-					<DashboardsAndAlertsPopover
-						dashboards={metric.dashboards}
-						alerts={metric.alerts}
-					/>
-					<Metadata
-						metricName={metric?.name}
-						metadata={metric.metadata}
-						refetchMetricDetails={refetchMetricDetails}
-					/>
-					{metric.attributes && (
-						<AllAttributes
-							metricName={metric?.name}
-							attributes={metric.attributes}
-							metricType={metric?.metadata?.metric_type}
-						/>
-					)}
-				</div>
-			)}
+			<div className="metric-details-content">
+				<Highlights metricName={metricName} />
+				<DashboardsAndAlertsPopover metricName={metricName} />
+				<Metadata
+					metricName={metricName}
+					metadata={metadata}
+					isErrorMetricMetadata={isErrorMetricMetadata}
+					isLoadingMetricMetadata={isLoadingMetricMetadata}
+				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.type} />
+			</div>
 		</Drawer>
 	);
 }

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/AllAttributes.test.tsx

@@ -1,11 +1,13 @@
 import * as reactUseHooks from 'react-use';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import { userEvent } from 'tests/test-utils';
 
-import { MetricDetailsAttribute } from '../../../../api/metricsExplorer/getMetricDetails';
 import ROUTES from '../../../../constants/routes';
 import AllAttributes, { AllAttributesValue } from '../AllAttributes';
+import { getMockMetricAttributesData } from './testUtlls';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -22,32 +24,30 @@ jest
 
 const mockMetricName = 'test-metric';
 const mockMetricType = MetricType.GAUGE;
-const mockAttributes: MetricDetailsAttribute[] = [
-	{
-		key: 'attribute1',
-		value: ['value1', 'value2'],
-		valueCount: 2,
-	},
-	{
-		key: 'attribute2',
-		value: ['value3'],
-		valueCount: 1,
-	},
-];
 
 const mockUseCopyToClipboard = jest.fn();
 jest
 	.spyOn(reactUseHooks, 'useCopyToClipboard')
 	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);
 
+const useGetMetricAttributesMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAttributes',
+);
+
+const mockUseGetMetricAttributes = jest.fn();
+
 describe('AllAttributes', () => {
+	beforeEach(() => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData(),
+			mutate: mockUseGetMetricAttributes,
+		});
+	});
+
 	it('renders attributes section with title', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
@@ -55,11 +55,7 @@ describe('AllAttributes', () => {
 
 	it('renders all attribute keys and values', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		// Check attribute keys are rendered
@@ -74,11 +70,7 @@ describe('AllAttributes', () => {
 
 	it('renders value counts correctly', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
@@ -86,41 +78,36 @@ describe('AllAttributes', () => {
 	});
 
 	it('handles empty attributes array', () => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData({
+				data: {
+					attributes: [],
+					totalKeys: 0,
+				},
+			}),
+			mutate: mockUseGetMetricAttributes,
+		});
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={[]}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-		expect(screen.queryByText('No data')).toBeInTheDocument();
+		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});
 
-	it('clicking on an attribute key opens the explorer with the attribute filter applied', () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
-		fireEvent.click(screen.getByText('attribute1'));
+		await userEvent.click(screen.getByText('attribute1'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});
 
-	it('filters attributes based on search input', () => {
+	it('filters attributes based on search input', async () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
-		fireEvent.change(screen.getByPlaceholderText('Search'), {
-			target: { value: 'value1' },
-		});
+		await userEvent.type(screen.getByPlaceholderText('Search'), 'value1');
 
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
@@ -144,7 +131,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.getByText('value2')).toBeInTheDocument();
 	});
 
-	it('loads more attributes when show more button is clicked', () => {
+	it('loads more attributes when show more button is clicked', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -155,7 +142,7 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		fireEvent.click(screen.getByText('Show More'));
+		await userEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
 	});
 
@@ -172,7 +159,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
 	});
 
-	it('copy button should copy the attribute value to the clipboard', () => {
+	it('copy button should copy the attribute value to the clipboard', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -183,13 +170,13 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Copy Attribute'));
+		await userEvent.click(screen.getByText('Copy Attribute'));
 		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
 	});
 
-	it('explorer button should go to metrics explore with the attribute filter applied', () => {
+	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -200,10 +187,10 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 
 		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Open in Explorer'));
+		await userEvent.click(screen.getByText('Open in Explorer'));
 		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
 			'attribute1',
 			'value1',

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -1,26 +1,17 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { QueryParams } from 'constants/query';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { userEvent } from 'tests/test-utils';
 
 import DashboardsAndAlertsPopover from '../DashboardsAndAlertsPopover';
-
-const mockAlert1 = {
-	alert_id: '1',
-	alert_name: 'Alert 1',
-};
-const mockAlert2 = {
-	alert_id: '2',
-	alert_name: 'Alert 2',
-};
-const mockDashboard1 = {
-	dashboard_id: '1',
-	dashboard_name: 'Dashboard 1',
-};
-const mockDashboard2 = {
-	dashboard_id: '2',
-	dashboard_name: 'Dashboard 2',
-};
-const mockAlerts = [mockAlert1, mockAlert2];
-const mockDashboards = [mockDashboard1, mockDashboard2];
+import {
+	getMockAlertsData,
+	getMockDashboardsData,
+	MOCK_ALERT_1,
+	MOCK_ALERT_2,
+	MOCK_DASHBOARD_1,
+	MOCK_DASHBOARD_2,
+} from './testUtlls';
 
 const mockSafeNavigate = jest.fn();
 jest.mock('hooks/useSafeNavigate', () => ({
@@ -28,7 +19,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 		safeNavigate: mockSafeNavigate,
 	}),
 }));
-
 const mockSetQuery = jest.fn();
 const mockUrlQuery = {
 	set: mockSetQuery,
@@ -39,125 +29,155 @@ jest.mock('hooks/useUrlQuery', () => ({
 	default: jest.fn(() => mockUrlQuery),
 }));
 
-describe('DashboardsAndAlertsPopover', () => {
-	it('renders the popover correctly with multiple dashboards and alerts', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+const MOCK_METRIC_NAME = 'test-metric';
 
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
-		expect(
-			screen.getByText(`${mockAlerts.length} alert rules`),
-		).toBeInTheDocument();
+const useGetMetricAlertsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAlerts',
+);
+const useGetMetricDashboardsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricDashboards',
+);
+
+describe('DashboardsAndAlertsPopover', () => {
+	beforeEach(() => {
+		useGetMetricAlertsMock.mockReturnValue(getMockAlertsData());
+		useGetMetricDashboardsMock.mockReturnValue(getMockDashboardsData());
+	});
+
+	it('renders the popover correctly with multiple dashboards and alerts', () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText(`2 dashboards`)).toBeInTheDocument();
+		expect(screen.getByText(`2 alert rules`)).toBeInTheDocument();
 	});
 
 	it('renders null with no dashboards and alerts', () => {
-		const { container } = render(
-			<DashboardsAndAlertsPopover alerts={[]} dashboards={[]} />,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: undefined,
+			}),
 		);
-		expect(container).toBeEmptyDOMElement();
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: undefined,
+			}),
+		);
+
+		const { container } = render(
+			<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />,
+		);
+
+		expect(
+			container.querySelector('dashboards-and-alerts-popover-container'),
+		).toBeNull();
 	});
 
 	it('renders popover with single dashboard and alert', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[mockAlert1]}
-				dashboards={[mockDashboard1]}
-			/>,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [MOCK_ALERT_1],
+				},
+			}),
 		);
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1],
+				},
+			}),
+		);
+
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
 		expect(screen.getByText(`1 dashboard`)).toBeInTheDocument();
 		expect(screen.getByText(`1 alert rule`)).toBeInTheDocument();
 	});
 
-	it('renders popover with dashboard id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[{ ...mockDashboard1, dashboard_name: undefined } as any]}
-			/>,
+	it('renders popover with dashboard id if name is not available', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [{ ...MOCK_DASHBOARD_1, dashboardName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 dashboard`));
-		expect(screen.getByText(mockDashboard1.dashboard_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 dashboard`));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardId)).toBeInTheDocument();
 	});
 
-	it('renders popover with alert id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[{ ...mockAlert1, alert_name: undefined } as any]}
-				dashboards={mockDashboards}
-			/>,
+	it('renders popover with alert id if name is not available', async () => {
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [{ ...MOCK_ALERT_1, alertName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 alert rule`));
-		expect(screen.getByText(mockAlert1.alert_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 alert rule`));
+		expect(screen.getByText(MOCK_ALERT_1.alertId)).toBeInTheDocument();
 	});
 
-	it('navigates to the dashboard when the dashboard is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the dashboard when the dashboard is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 dashboards button
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
+		await userEvent.click(screen.getByText(`2 dashboards`));
 		// Popover showing list of 2 dashboards should be visible
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 
 		// Click on the first dashboard
-		fireEvent.click(screen.getByText(mockDashboard1.dashboard_name));
+		await userEvent.click(screen.getByText(MOCK_DASHBOARD_1.dashboardName));
 
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			`/dashboard/${mockDashboard1.dashboard_id}`,
+			`/dashboard/${MOCK_DASHBOARD_1.dashboardId}`,
 		);
 	});
 
-	it('navigates to the alert when the alert is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the alert when the alert is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 alert rules button
-		fireEvent.click(screen.getByText(`${mockAlerts.length} alert rules`));
+		await userEvent.click(screen.getByText(`2 alert rules`));
 		// Popover showing list of 2 alert rules should be visible
-		expect(screen.getByText(mockAlert1.alert_name)).toBeInTheDocument();
-		expect(screen.getByText(mockAlert2.alert_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_1.alertName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_2.alertName)).toBeInTheDocument();
 
 		// Click on the first alert rule
-		fireEvent.click(screen.getByText(mockAlert1.alert_name));
+		await userEvent.click(screen.getByText(MOCK_ALERT_1.alertName));
 
 		// Should navigate to the alert rule
 		expect(mockSetQuery).toHaveBeenCalledWith(
 			QueryParams.ruleId,
-			mockAlert1.alert_id,
+			MOCK_ALERT_1.alertId,
 		);
 	});
 
-	it('renders unique dashboards even when there are duplicates', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[...mockDashboards, mockDashboard1]}
-			/>,
+	it('renders unique dashboards even when there are duplicates', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2, MOCK_DASHBOARD_1],
+				},
+			}),
 		);
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
 
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText('2 dashboards')).toBeInTheDocument();
+
+		await userEvent.click(screen.getByText('2 dashboards'));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Highlights.test.tsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+
+import Highlights from '../Highlights';
+import { getMockMetricHighlightsData } from './testUtlls';
+import { formatTimestampToReadableDate } from '../utils';
+
+const MOCK_METRIC_NAME = 'test-metric';
+const METRIC_DETAILS_GRID_VALUE_SELECTOR = '.metric-details-grid-value';
+
+const useGetMetricHighlightsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricHighlights',
+);
+
+describe('Highlights', () => {
+	beforeEach(() => {
+		useGetMetricHighlightsMock.mockReturnValue(getMockMetricHighlightsData());
+	});
+
+	it('should render all highlights data correctly', () => {
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+
+		expect(metricHighlightsValues).toHaveLength(3);
+		expect(metricHighlightsValues[0].textContent).toBe('1M+');
+		expect(metricHighlightsValues[1].textContent).toBe('1M total ⎯ 1M active');
+		expect(metricHighlightsValues[2].textContent).toBe(
+			formatTimestampToReadableDate('2026-01-24T00:00:00Z'),
+		);
+	});
+
+	it('should render "-" for highlights data when there is an error', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isError: true,
+				},
+			),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+		expect(metricHighlightsValues[0].textContent).toBe('-');
+		expect(metricHighlightsValues[1].textContent).toBe('-');
+		expect(metricHighlightsValues[2].textContent).toBe('-');
+	});
+
+	it('should render loading state when data is loading', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isLoading: true,
+				},
+			),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		expect(container.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('should not render grid values when there is no data', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData({
+				data: undefined,
+			}),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+		expect(metricHighlightsValues).toHaveLength(0);
+	});
+});

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Metadata.test.tsx

@@ -1,16 +1,22 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import {
 	UniversalYAxisUnit,
 	YAxisUnitSelectorProps,
 } from 'components/YAxisUnitSelector/types';
-import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import * as useNotificationsHooks from 'hooks/useNotifications';
+import { userEvent } from 'tests/test-utils';
 import { SelectOption } from 'types/common/select';
 
 import Metadata from '../Metadata';
+import { MetricMetadata } from '../types';
+import { transformMetricMetadata } from '../utils';
+import { getMockMetricMetadataData } from './testUtlls';
+import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { AxiosResponse } from 'axios';
 
 // Mock antd select for testing
 jest.mock('antd', () => ({
@@ -72,13 +78,18 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+const mockUseUpdateMetricMetadataHook = jest.spyOn(
+	metricsExplorerHooks,
+	'useUpdateMetricMetadata',
+);
+type UseUpdateMetricMetadataResult = ReturnType<
+	typeof metricsExplorerHooks.useUpdateMetricMetadata
+>;
 const mockUseUpdateMetricMetadata = jest.fn();
-jest
-	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
-	.mockReturnValue({
-		mutate: mockUseUpdateMetricMetadata,
-		isLoading: false,
-	} as any);
+
+const mockMetricMetadata = transformMetricMetadata(
+	(getMockMetricMetadataData().data as AxiosResponse<GetMetricMetadata200>).data,
+) as MetricMetadata;
 
 const mockErrorNotification = jest.fn();
 const mockSuccessNotification = jest.fn();
@@ -90,26 +101,26 @@ jest.spyOn(useNotificationsHooks, 'useNotifications').mockReturnValue({
 } as any);
 
 const mockMetricName = 'test_metric';
-const mockMetricMetadata = {
-	metric_type: MetricType.GAUGE,
-	description: 'test_description',
-	unit: 'test_unit',
-	temporality: Temporality.DELTA,
-};
-const mockRefetchMetricDetails = jest.fn();
 
 describe('Metadata', () => {
+	beforeEach(() => {
+		mockUseUpdateMetricMetadataHook.mockReturnValue(({
+			mutate: mockUseUpdateMetricMetadata,
+		} as Partial<UseUpdateMetricMetadataResult>) as UseUpdateMetricMetadataResult);
+	});
+
 	it('should render the metadata properly', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		expect(screen.getByText('Metric Type')).toBeInTheDocument();
-		expect(screen.getByText(mockMetricMetadata.metric_type)).toBeInTheDocument();
+		expect(screen.getByText(mockMetricMetadata.metricType)).toBeInTheDocument();
 		expect(screen.getByText('Description')).toBeInTheDocument();
 		expect(screen.getByText(mockMetricMetadata.description)).toBeInTheDocument();
 		expect(screen.getByText('Unit')).toBeInTheDocument();
@@ -118,18 +129,19 @@ describe('Metadata', () => {
 		expect(screen.getByText(mockMetricMetadata.temporality)).toBeInTheDocument();
 	});
 
-	it('editing the metadata should show the form inputs', () => {
+	it('editing the metadata should show the form inputs', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		expect(screen.getByTestId('metric-type-select')).toBeInTheDocument();
 		expect(screen.getByTestId('temporality-select')).toBeInTheDocument();
@@ -144,52 +156,47 @@ describe('Metadata', () => {
 					...mockMetricMetadata,
 					unit: '',
 				}}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
 		expect(metricDescriptionInput).toBeInTheDocument();
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const metricTypeSelect = screen.getByTestId('metric-type-select');
 		expect(metricTypeSelect).toBeInTheDocument();
-		fireEvent.change(metricTypeSelect, {
-			target: { value: MetricType.SUM },
-		});
+		await userEvent.selectOptions(metricTypeSelect, MetricType.SUM);
 
 		const temporalitySelect = screen.getByTestId('temporality-select');
 		expect(temporalitySelect).toBeInTheDocument();
-		fireEvent.change(temporalitySelect, {
-			target: { value: Temporality.CUMULATIVE },
-		});
+		await userEvent.selectOptions(temporalitySelect, Temporality.CUMULATIVE);
 
 		const unitSelect = screen.getByTestId('unit-select');
 		expect(unitSelect).toBeInTheDocument();
-		fireEvent.change(unitSelect, {
-			target: { value: 'By' },
-		});
+		await userEvent.selectOptions(unitSelect, 'By');
 
 		const saveButton = screen.getByText('Save');
 		expect(saveButton).toBeInTheDocument();
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
-				metricName: mockMetricName,
-				payload: expect.objectContaining({
-					description: 'Updated description',
-					metricType: MetricType.SUM,
+				data: expect.objectContaining({
+					type: MetricType.SUM,
 					temporality: Temporality.CUMULATIVE,
 					unit: 'By',
 					isMonotonic: true,
 				}),
+				pathParams: {
+					metricName: mockMetricName,
+				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -203,29 +210,28 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 200 });
+		onSuccessCallback({ status: 200 });
 
 		expect(mockSuccessNotification).toHaveBeenCalledWith({
 			message: 'Metadata updated successfully',
 		});
-		expect(mockRefetchMetricDetails).toHaveBeenCalled();
 	});
 
 	it('should show error notification when metadata update fails with non-200 response', async () => {
@@ -233,24 +239,24 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 500 });
+		onSuccessCallback({ status: 500 });
 
 		expect(mockErrorNotification).toHaveBeenCalledWith({
 			message:
@@ -263,20 +269,20 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
 
@@ -289,39 +295,41 @@ describe('Metadata', () => {
 		});
 	});
 
-	it('cancel button should cancel the edit mode', () => {
+	it('cancel button should cancel the edit mode', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const cancelButton = screen.getByText('Cancel');
 		expect(cancelButton).toBeInTheDocument();
-		fireEvent.click(cancelButton);
+		await userEvent.click(cancelButton);
 
 		const editButton2 = screen.getByText('Edit');
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should not allow editing of unit if it is already set', () => {
+	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const unitSelect = screen.queryByTestId('unit-select');
 		expect(unitSelect).not.toBeInTheDocument();

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/MetricDetails.test.tsx

@@ -1,68 +1,16 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MetricDetails as MetricDetailsType } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { render, screen } from '@testing-library/react';
 import ROUTES from 'constants/routes';
-import * as useGetMetricDetails from 'hooks/metricsExplorer/useGetMetricDetails';
-import * as useUpdateMetricMetadata from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import { userEvent } from 'tests/test-utils';
 
 import MetricDetails from '../MetricDetails';
+import { getMockMetricMetadataData } from './testUtlls';
 
 const mockMetricName = 'test-metric';
-const mockMetricDescription = 'description for a test metric';
-const mockMetricData: MetricDetailsType = {
-	name: mockMetricName,
-	description: mockMetricDescription,
-	unit: 'count',
-	attributes: [
-		{
-			key: 'test-attribute',
-			value: ['test-value'],
-			valueCount: 1,
-		},
-	],
-	alerts: [],
-	dashboards: [],
-	metadata: {
-		metric_type: MetricType.SUM,
-		description: mockMetricDescription,
-		unit: 'count',
-	},
-	type: '',
-	timeseries: 0,
-	samples: 0,
-	timeSeriesTotal: 0,
-	timeSeriesActive: 0,
-	lastReceived: '',
-};
 const mockOpenInspectModal = jest.fn();
 const mockOnClose = jest.fn();
 
-const mockUseGetMetricDetailsData = {
-	data: {
-		payload: {
-			data: mockMetricData,
-		},
-	},
-	isLoading: false,
-	isFetching: false,
-	isError: false,
-	error: null,
-	refetch: jest.fn(),
-};
-
-jest
-	.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-	.mockReturnValue(mockUseGetMetricDetailsData as any);
-
-jest.spyOn(useUpdateMetricMetadata, 'useUpdateMetricMetadata').mockReturnValue({
-	mutate: jest.fn(),
-	isLoading: false,
-	isError: false,
-	error: null,
-} as any);
-
 const mockHandleExplorerTabChange = jest.fn();
 jest
 	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
@@ -88,7 +36,50 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/AllAttributes',
+	() =>
+		function MockAllAttributes(): JSX.Element {
+			return <div data-testid="all-attributes">All Attributes</div>;
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover',
+	() =>
+		function MockDashboardsAndAlertsPopover(): JSX.Element {
+			return (
+				<div data-testid="dashboards-and-alerts-popover">
+					Dashboards and Alerts Popover
+				</div>
+			);
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Highlights',
+	() =>
+		function MockHighlights(): JSX.Element {
+			return <div data-testid="highlights">Highlights</div>;
+		},
+);
+
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Metadata',
+	() =>
+		function MockMetadata(): JSX.Element {
+			return <div data-testid="metadata">Metadata</div>;
+		},
+);
+
+const useGetMetricMetadataMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricMetadata',
+);
+
 describe('MetricDetails', () => {
+	beforeEach(() => {
+		useGetMetricMetadataMock.mockReturnValue(getMockMetricMetadataData());
+	});
+
 	it('renders metric details correctly', () => {
 		render(
 			<MetricDetails
@@ -101,27 +92,15 @@ describe('MetricDetails', () => {
 		);
 
 		expect(screen.getByText(mockMetricName)).toBeInTheDocument();
-		expect(screen.getByText(mockMetricDescription)).toBeInTheDocument();
+		expect(screen.getByTestId('all-attributes')).toBeInTheDocument();
 		expect(
-			screen.getByText(getUniversalNameFromMetricUnit(mockMetricData.unit)),
+			screen.getByTestId('dashboards-and-alerts-popover'),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('highlights')).toBeInTheDocument();
+		expect(screen.getByTestId('metadata')).toBeInTheDocument();
 	});
 
-	it('renders the "open in explorer" and "inspect" buttons', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValueOnce({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						metadata: {
-							...mockMetricData.metadata,
-							metric_type: MetricType.GAUGE,
-						},
-					},
-				},
-			},
-		} as any);
+	it('renders the "open in explorer" and "inspect" buttons', async () => {
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
@@ -135,93 +114,24 @@ describe('MetricDetails', () => {
 		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
 		expect(screen.getByTestId('inspect-metric-button')).toBeInTheDocument();
 
-		fireEvent.click(screen.getByTestId('open-in-explorer-button'));
+		await userEvent.click(screen.getByTestId('open-in-explorer-button'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 
-		fireEvent.click(screen.getByTestId('inspect-metric-button'));
+		await userEvent.click(screen.getByTestId('inspect-metric-button'));
 		expect(mockOpenInspectModal).toHaveBeenCalled();
 	});
 
-	it('should render error state when metric details are not found', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isError: true,
-			error: {
-				message: 'Error fetching metric details',
-			},
-		} as any);
-
+	it('should render empty state when metric name is not provided', () => {
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
 				isOpen
-				metricName={mockMetricName}
+				metricName={null}
 				isModalTimeSelection
 				openInspectModal={mockOpenInspectModal}
 			/>,
 		);
 
-		expect(screen.getByText('Error fetching metric details')).toBeInTheDocument();
-	});
-
-	it('should render loading state when metric details are loading', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isLoading: true,
-		} as any);
-
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByTestId('metric-details-skeleton')).toBeInTheDocument();
-	});
-
-	it('should render all attributes section', () => {
-		jest
-			.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-			.mockReturnValue(mockUseGetMetricDetailsData as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-	});
-
-	it('should not render all attributes section when relevant data is not present', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						attributes: null,
-					},
-				},
-			},
-		} as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.queryByText('All Attributes')).not.toBeInTheDocument();
+		expect(screen.getByText('Metric not found')).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/testUtlls.ts

@@ -0,0 +1,175 @@
+import {
+	GetMetricAlerts200,
+	GetMetricAttributes200,
+	GetMetricDashboards200,
+	GetMetricHighlights200,
+	GetMetricMetadata200,
+} from 'api/generated/services/sigNoz.schemas';
+
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { Temporality } from 'types/common/queryBuilder';
+
+export function getMockMetricHighlightsData(
+	overrides?: Partial<GetMetricHighlights200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights> {
+	return {
+		data: {
+			data: {
+				data: {
+					dataPoints: 1000000,
+					lastReceived: '2026-01-24T00:00:00Z',
+					totalTimeSeries: 1000000,
+					activeTimeSeries: 1000000,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights>;
+}
+
+export const MOCK_DASHBOARD_1 = {
+	dashboardName: 'Dashboard 1',
+	dashboardId: '1',
+	widgetId: '1',
+	widgetName: 'Widget 1',
+};
+export const MOCK_DASHBOARD_2 = {
+	dashboardName: 'Dashboard 2',
+	dashboardId: '2',
+	widgetId: '2',
+	widgetName: 'Widget 2',
+};
+export const MOCK_ALERT_1 = {
+	alertName: 'Alert 1',
+	alertId: '1',
+};
+export const MOCK_ALERT_2 = {
+	alertName: 'Alert 2',
+	alertId: '2',
+};
+
+export function getMockDashboardsData(
+	overrides?: Partial<GetMetricDashboards200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards> {
+	return {
+		data: {
+			data: {
+				data: {
+					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2],
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards>;
+}
+
+export function getMockAlertsData(
+	overrides?: Partial<GetMetricAlerts200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts> {
+	return {
+		data: {
+			data: {
+				data: {
+					alerts: [MOCK_ALERT_1, MOCK_ALERT_2],
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts>;
+}
+
+export function getMockMetricAttributesData(
+	overrides?: Partial<GetMetricAttributes200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes> {
+	return {
+		data: {
+			data: {
+				data: {
+					attributes: [
+						{
+							key: 'attribute1',
+							values: ['value1', 'value2'],
+							valueCount: 2,
+						},
+						{
+							key: 'attribute2',
+							values: ['value3'],
+							valueCount: 1,
+						},
+					],
+					totalKeys: 2,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes>;
+}
+
+export function getMockMetricMetadataData(
+	overrides?: Partial<GetMetricMetadata200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata> {
+	return {
+		data: {
+			data: {
+				data: {
+					description: 'test_description',
+					type: 'gauge',
+					unit: 'test_unit',
+					temporality: Temporality.Delta,
+					isMonotonic: false,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata>;
+}

frontend/src/container/MetricsExplorer/MetricDetails/constants.ts

@@ -1,6 +1,6 @@
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	metric_type: 'Metric Type',
+	metricType: 'Metric Type',
 	temporality: 'Temporality',
 };

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -1,10 +1,13 @@
 import {
-	MetricDetails,
-	MetricDetailsAlert,
-	MetricDetailsAttribute,
-	MetricDetailsDashboard,
-} from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+	MetricsexplorertypesMetricAlertDTO,
+	MetricsexplorertypesMetricAttributeDTO,
+	MetricsexplorertypesMetricDashboardDTO,
+	MetricsexplorertypesMetricHighlightsResponseDTO,
+	MetricsexplorertypesMetricMetadataDTO,
+	MetricsexplorertypesMetricMetadataDTOType,
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality,
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOType,
+} from 'api/generated/services/sigNoz.schemas';
 
 export interface MetricDetailsProps {
 	onClose: () => void;
@@ -14,21 +17,23 @@ export interface MetricDetailsProps {
 	openInspectModal?: (metricName: string) => void;
 }
 
+export interface HighlightsProps {
+	metricName: string;
+}
 export interface DashboardsAndAlertsPopoverProps {
-	dashboards: MetricDetailsDashboard[] | null;
-	alerts: MetricDetailsAlert[] | null;
+	metricName: string;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricDetails['metadata'] | undefined;
-	refetchMetricDetails: () => void;
+	metadata: MetricMetadata | null;
+	isErrorMetricMetadata: boolean;
+	isLoadingMetricMetadata: boolean;
 }
 
 export interface AllAttributesProps {
-	attributes: MetricDetailsAttribute[];
 	metricName: string;
-	metricType: MetricType | undefined;
+	metricType: MetricsexplorertypesMetricMetadataDTOType | undefined;
 }
 
 export interface AllAttributesValueProps {
@@ -36,3 +41,27 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
+
+export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
+
+export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
+
+export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
+
+export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
+export interface MetricMetadataState {
+	type: MetricsexplorertypesUpdateMetricMetadataRequestDTOType;
+	description: string;
+	temporality?: MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality;
+	unit: string;
+}
+
+export type MetricAttribute = MetricsexplorertypesMetricAttributeDTO;
+
+export enum TableFields {
+	DESCRIPTION = 'description',
+	UNIT = 'unit',
+	TYPE = 'type',
+	Temporality = 'temporality',
+	IS_MONOTONIC = 'isMonotonic',
+}

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -1,12 +1,25 @@
-import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
+import {
+	GetMetricMetadata200,
+	MetricsexplorertypesMetricMetadataDTOTemporality,
+	MetricsexplorertypesMetricMetadataDTOType,
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality,
+	MetricsexplorertypesUpdateMetricMetadataRequestDTOType,
+} from 'api/generated/services/sigNoz.schemas';
 import { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-export function formatTimestampToReadableDate(timestamp: string): string {
+import { MetricMetadata, MetricMetadataState } from './types';
+
+export function formatTimestampToReadableDate(
+	timestamp: number | string | undefined,
+): string {
+	if (!timestamp) {
+		return '-';
+	}
 	const date = new Date(timestamp);
 	const now = new Date();
 	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
@@ -39,7 +52,10 @@ export function formatTimestampToReadableDate(timestamp: string): string {
 	return date.toLocaleDateString();
 }
 
-export function formatNumberToCompactFormat(num: number): string {
+export function formatNumberToCompactFormat(num: number | undefined): string {
+	if (!num) {
+		return '-';
+	}
 	return new Intl.NumberFormat('en-US', {
 		notation: 'compact',
 		maximumFractionDigits: 1,
@@ -47,27 +63,37 @@ export function formatNumberToCompactFormat(num: number): string {
 }
 
 export function determineIsMonotonic(
-	metricType: MetricType,
-	temporality?: Temporality,
+	metricType: MetricsexplorertypesUpdateMetricMetadataRequestDTOType,
+	temporality?: MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality,
 ): boolean {
 	if (
-		metricType === MetricType.HISTOGRAM ||
-		metricType === MetricType.EXPONENTIAL_HISTOGRAM
+		metricType ===
+			MetricsexplorertypesUpdateMetricMetadataRequestDTOType.histogram ||
+		metricType ===
+			MetricsexplorertypesUpdateMetricMetadataRequestDTOType.exponentialhistogram
 	) {
 		return true;
 	}
-	if (metricType === MetricType.GAUGE || metricType === MetricType.SUMMARY) {
+	if (
+		metricType === MetricsexplorertypesUpdateMetricMetadataRequestDTOType.gauge ||
+		metricType === MetricsexplorertypesUpdateMetricMetadataRequestDTOType.summary
+	) {
 		return false;
 	}
-	if (metricType === MetricType.SUM) {
-		return temporality === Temporality.CUMULATIVE;
+	if (
+		metricType === MetricsexplorertypesUpdateMetricMetadataRequestDTOType.sum
+	) {
+		return (
+			temporality ===
+			MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.cumulative
+		);
 	}
 	return false;
 }
 
 export function getMetricDetailsQuery(
 	metricName: string,
-	metricType: MetricType | undefined,
+	metricType: MetricsexplorertypesMetricMetadataDTOType | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
 ): Query {
@@ -75,23 +101,23 @@ export function getMetricDetailsQuery(
 	let spaceAggregation;
 	let aggregateOperator;
 	switch (metricType) {
-		case MetricType.SUM:
+		case MetricsexplorertypesMetricMetadataDTOType.sum:
 			timeAggregation = 'rate';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'rate';
 			break;
-		case MetricType.GAUGE:
+		case MetricsexplorertypesMetricMetadataDTOType.gauge:
 			timeAggregation = 'avg';
 			spaceAggregation = 'avg';
 			aggregateOperator = 'avg';
 			break;
-		case MetricType.SUMMARY:
+		case MetricsexplorertypesMetricMetadataDTOType.summary:
 			timeAggregation = 'noop';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'noop';
 			break;
-		case MetricType.HISTOGRAM:
-		case MetricType.EXPONENTIAL_HISTOGRAM:
+		case MetricsexplorertypesMetricMetadataDTOType.histogram:
+		case MetricsexplorertypesMetricMetadataDTOType.exponentialhistogram:
 			timeAggregation = 'noop';
 			spaceAggregation = 'p90';
 			aggregateOperator = 'noop';
@@ -160,3 +186,69 @@ export function getMetricDetailsQuery(
 		},
 	};
 }
+
+export function transformMetricMetadata(
+	apiData: GetMetricMetadata200 | undefined,
+): MetricMetadata | null {
+	if (!apiData || !apiData.data) {
+		return null;
+	}
+	const { type, description, unit, temporality, isMonotonic } = apiData.data;
+
+	return {
+		type,
+		description,
+		unit,
+		temporality,
+		isMonotonic,
+	};
+}
+
+export function transformUpdateMetricMetadataRequest(
+	metricName: string,
+	metricMetadata: MetricMetadataState,
+): UpdateMetricMetadataMutationBody {
+	return {
+		metricName: metricName,
+		type: metricMetadata.type,
+		description: metricMetadata.description,
+		unit: metricMetadata.unit,
+		temporality:
+			metricMetadata.temporality ??
+			MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.unspecified,
+		isMonotonic: determineIsMonotonic(
+			metricMetadata.type,
+			metricMetadata.temporality,
+		),
+	};
+}
+
+export function transformMetricType(
+	type: MetricsexplorertypesMetricMetadataDTOType,
+): MetricsexplorertypesUpdateMetricMetadataRequestDTOType {
+	switch (type) {
+		case MetricsexplorertypesMetricMetadataDTOType.sum:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOType.sum;
+		case MetricsexplorertypesMetricMetadataDTOType.gauge:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOType.gauge;
+		case MetricsexplorertypesMetricMetadataDTOType.histogram:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOType.histogram;
+		case MetricsexplorertypesMetricMetadataDTOType.summary:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOType.summary;
+		case MetricsexplorertypesMetricMetadataDTOType.exponentialhistogram:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOType.exponentialhistogram;
+	}
+}
+
+export function transformTemporality(
+	temporality: MetricsexplorertypesMetricMetadataDTOTemporality,
+): MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality {
+	switch (temporality) {
+		case MetricsexplorertypesMetricMetadataDTOTemporality.delta:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.delta;
+		case MetricsexplorertypesMetricMetadataDTOTemporality.cumulative:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.cumulative;
+		case MetricsexplorertypesMetricMetadataDTOTemporality.unspecified:
+			return MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality.unspecified;
+	}
+}

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -34,6 +34,7 @@ import {
 	formatDataForMetricsTable,
 	getMetricsListQuery,
 } from './utils';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 
 import './Summary.styles.scss';
 
@@ -128,7 +129,7 @@ function Summary(): JSX.Element {
 	} = useGetMetricsList(metricsListQuery, {
 		enabled: !!metricsListQuery && !isInspectModalOpen,
 		queryKey: [
-			'metricsList',
+			REACT_QUERY_KEY.GET_METRICS_LIST,
 			queryFiltersWithoutId,
 			orderBy,
 			pageSize,

frontend/src/container/MetricsExplorer/Summary/utils.tsx

@@ -157,9 +157,12 @@ function ValidateRowValueWrapper({
 }
 
 export const formatNumberIntoHumanReadableFormat = (
-	num: number,
+	num: number | undefined,
 	addPlusSign = true,
 ): string => {
+	if (!num) {
+		return '-';
+	}
 	function format(num: number, divisor: number, suffix: string): string {
 		const value = num / divisor;
 		return value % 1 === 0

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,5 +1,5 @@
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
-import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { getMetricMetadata } from 'api/generated/services/metrics';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { SuccessResponseV2 } from 'types/api';
 import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -24,14 +24,6 @@
 		opacity: 1;
 	}
 
-	.legend-empty-state {
-		font-size: 12px;
-		color: var(--bg-vanilla-400);
-		text-align: center;
-		padding: 12px;
-		padding: 2rem 0;
-	}
-
 	.legend-virtuoso-container {
 		height: 100%;
 		width: 100%;

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

@@ -81,13 +81,6 @@ export default function Legend({
 		[focusedSeriesIndex, position],
 	);
 
-	const isEmptyState = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
-			return false;
-		}
-		return visibleLegendItems.length === 0;
-	}, [position, legendSearchQuery, visibleLegendItems]);
-
 	return (
 		<div
 			ref={legendContainerRef}
@@ -110,21 +103,15 @@ export default function Legend({
 					/>
 				</div>
 			)}
-			{isEmptyState ? (
-				<div className="legend-empty-state">
-					No series found matching &quot;{legendSearchQuery}&quot;
-				</div>
-			) : (
-				<VirtuosoGrid
-					className={cx(
-						'legend-virtuoso-container',
-						`legend-virtuoso-container-${position.toLowerCase()}`,
-						{ 'legend-virtuoso-container-single-row': isSingleRow },
-					)}
-					data={visibleLegendItems}
-					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
-				/>
-			)}
+			<VirtuosoGrid
+				className={cx(
+					'legend-virtuoso-container',
+					`legend-virtuoso-container-${position.toLowerCase()}`,
+					{ 'legend-virtuoso-container-single-row': isSingleRow },
+				)}
+				data={visibleLegendItems}
+				itemContent={(_, item): JSX.Element => renderLegendItem(item)}
+			/>
 		</div>
 	);
 }

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -4,7 +4,6 @@ import {
 } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import { initializeVariableFetchStore } from '../variableFetchStore';
 import {
 	IDashboardVariables,
 	IDashboardVariablesStoreState,
@@ -63,30 +62,9 @@ export function buildDependencyData(
 	};
 }
 
-/**
- * Initialize the variable fetch store with the computed dependency data
- */
-function initializeFetchStore(
-	sortedVariablesArray: IDashboardVariable[],
-	dependencyData: IDependencyData | null,
-): void {
-	if (dependencyData) {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-
-		initializeVariableFetchStore(
-			allVariableNames,
-			dependencyData.graph,
-			dependencyData.parentDependencyGraph,
-		);
-	}
-}
-
 /**
  * Compute derived values from variables
  * This is a composition of buildSortedVariablesArray and buildDependencyData
- * Also initializes the variable fetch store with the new dependency data
  */
 export function computeDerivedValues(
 	variables: IDashboardVariablesStoreState['variables'],
@@ -97,22 +75,15 @@ export function computeDerivedValues(
 	const sortedVariablesArray = buildSortedVariablesArray(variables);
 	const dependencyData = buildDependencyData(sortedVariablesArray);
 
-	// Initialize the variable fetch store when dependency data is computed
-	initializeFetchStore(sortedVariablesArray, dependencyData);
-
 	return { sortedVariablesArray, dependencyData };
 }
 
 /**
  * Update derived values in the store state (for use with immer)
- * Also initializes the variable fetch store with the new dependency data
  */
 export function updateDerivedValues(
 	draft: IDashboardVariablesStoreState,
 ): void {
 	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
 	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-
-	// Initialize the variable fetch store when dependency data is updated
-	initializeFetchStore(draft.sortedVariablesArray, draft.dependencyData);
 }

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -1,57 +0,0 @@
-import { VariableGraph } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-
-import createStore from './store';
-
-// Fetch state for each variable
-export type VariableFetchState =
-	| 'idle' // stable state - initial or complete
-	| 'loading' // actively fetching data (first time)
-	| 'revalidating' // refetching existing data
-	| 'waiting' // blocked on parent dependencies
-	| 'error';
-
-export interface IVariableFetchStoreState {
-	// Per-variable fetch state
-	states: Record<string, VariableFetchState>;
-
-	// Dependency graphs (set once when variables change)
-	dependencyGraph: VariableGraph; // variable -> children that depend on it
-	parentGraph: VariableGraph; // variable -> parents it depends on
-
-	// Track last update timestamp per variable to trigger re-fetches
-	lastUpdated: Record<string, number>;
-}
-
-const initialState: IVariableFetchStoreState = {
-	states: {},
-	dependencyGraph: {},
-	parentGraph: {},
-	lastUpdated: {},
-};
-
-export const variableFetchStore = createStore<IVariableFetchStoreState>(
-	initialState,
-);
-
-// ============== Actions ==============
-
-/**
- * Initialize the store with dependency graphs and set initial states
- */
-export function initializeVariableFetchStore(
-	variableNames: string[],
-	dependencyGraph: VariableGraph,
-	parentGraph: VariableGraph,
-): void {
-	variableFetchStore.update((draft) => {
-		draft.dependencyGraph = dependencyGraph;
-		draft.parentGraph = parentGraph;
-
-		// Initialize all variables to idle, preserving existing ready states
-		variableNames.forEach((name) => {
-			if (!draft.states[name]) {
-				draft.states[name] = 'idle';
-			}
-		});
-	});
-}

frontend/src/utils/pluralize.ts

@@ -0,0 +1,13 @@
+export function pluralize(
+	count: number,
+	singular: string,
+	plural?: string,
+): string {
+	if (count === 1) {
+		return `${count} ${singular}`;
+	}
+	if (plural) {
+		return `${count} ${plural}`;
+	}
+	return `${count} ${singular}s`;
+}

pkg/apiserver/signozapiserver/user.go

@@ -325,7 +325,7 @@ func (provider *provider) addUserRoutes(router *mux.Router) error {
 		Response:            nil,
 		ResponseContentType: "",
 		SuccessStatusCode:   http.StatusNoContent,
-		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnprocessableEntity},
+		ErrorStatusCodes:    []int{http.StatusBadRequest},
 		Deprecated:          false,
 		SecuritySchemes:     []handler.OpenAPISecurityScheme{},
 	})).Methods(http.MethodPost).GetError(); err != nil {

pkg/modules/user/impluser/module.go

@@ -369,7 +369,7 @@ func (module *Module) GetOrCreateResetPasswordToken(ctx context.Context, userID
 
 func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, email valuer.Email, frontendBaseURL string) error {
 	if !module.config.Password.Reset.AllowSelf {
-		return errors.New(errors.TypeUnsupported, errors.CodeUnsupported, "Users are not allowed to reset their password themselves, please contact an admin to reset your password.")
+		return errors.New(errors.TypeUnsupported, errors.CodeUnsupported, "users are not allowed to reset their password themselves, please contact an admin to reset your password")
 	}
 
 	user, err := module.store.GetUserByEmailAndOrgID(ctx, email, orgID)

pkg/query-service/queryBuilderToExpr/queryBuilderToExpr.go

@@ -71,18 +71,7 @@ func Parse(filters *v3.FilterSet) (string, error) {
 			// accustom log filters like `body.log.message EXISTS` into EXPR language
 			// where User is attempting to check for keys present in JSON log body
 			if strings.HasPrefix(v.Key.Key, "body.") {
-				// if body is a string and is a valid JSON, then check if the key exists in the JSON
-				filter = fmt.Sprintf(`((type(body) == "string" && isJSON(body)) && %s %s %s)`, exprFormattedValue(strings.TrimPrefix(v.Key.Key, "body.")), logOperatorsToExpr[v.Operator], "fromJSON(body)")
-
-				// if body is a map, then check if the key exists in the map
-				operator := v3.FilterOperatorNotEqual
-				if v.Operator == v3.FilterOperatorNotExists {
-					operator = v3.FilterOperatorEqual
-				}
-				nilCheckFilter := fmt.Sprintf("%s %s nil", v.Key.Key, logOperatorsToExpr[operator])
-
-				// join the two filters with OR
-				filter = fmt.Sprintf(`(%s or (type(body) == "map" && (%s)))`, filter, nilCheckFilter)
+				filter = fmt.Sprintf("%s %s %s", exprFormattedValue(strings.TrimPrefix(v.Key.Key, "body.")), logOperatorsToExpr[v.Operator], "fromJSON(body)")
 			} else if typ := getTypeName(v.Key.Type); typ != "" {
 				filter = fmt.Sprintf("%s %s %s", exprFormattedValue(v.Key.Key), logOperatorsToExpr[v.Operator], typ)
 			} else {

pkg/query-service/queryBuilderToExpr/queryBuilderToExpr_test.go

@@ -3,538 +3,203 @@ package queryBuilderToExpr
 import (
 	"testing"
 
-	signozstanzahelper "github.com/SigNoz/signoz-otel-collector/processor/signozlogspipelineprocessor/stanza/operator/helper"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
-	"github.com/expr-lang/expr/vm"
-	"github.com/open-telemetry/opentelemetry-collector-contrib/pkg/stanza/entry"
-	"github.com/stretchr/testify/assert"
+	. "github.com/smartystreets/goconvey/convey"
 )
 
-func TestParseExpression(t *testing.T) {
-	var testCases = []struct {
-		Name        string
-		Query       *v3.FilterSet
-		Expr        string
-		ExpectError bool
-	}{
-		{
-			Name: "equal",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "checkbody", Operator: "="},
-			}},
-			Expr: `attributes["key"] == "checkbody"`,
-		},
-		{
-			Name: "not equal",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "checkbody", Operator: "!="},
-			}},
-			Expr: `attributes["key"] != "checkbody"`,
-		},
-		{
-			Name: "less than",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<"},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] < 10`,
-		},
-		{
-			Name: "greater than",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: ">"},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] > 10`,
-		},
-		{
-			Name: "less than equal",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] <= 10`,
-		},
-		{
-			Name: "greater than equal",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: ">="},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] >= 10`,
-		},
-		// case sensitive
-		{
-			Name: "body contains",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "contains"},
-			}},
-			Expr: `body != nil && lower(body) contains lower("checkbody")`,
-		},
-		{
-			Name: "body.log.message exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body.log.message", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			Expr: `(((type(body) == "string" && isJSON(body)) && "log.message" in fromJSON(body)) or (type(body) == "map" && (body.log.message != nil)))`,
-		},
-		{
-			Name: "body.log.message not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body.log.message", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			Expr: `(((type(body) == "string" && isJSON(body)) && "log.message" not in fromJSON(body)) or (type(body) == "map" && (body.log.message == nil)))`,
-		},
-		{
-			Name: "body ncontains",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "ncontains"},
-			}},
-			Expr: `body != nil && lower(body) not contains lower("checkbody")`,
-		},
-		{
-			Name: "body regex",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "regex"},
-			}},
-			Expr: `body != nil && body matches "[0-1]+regex$"`,
-		},
-		{
-			Name: "body not regex",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "nregex"},
-			}},
-			Expr: `body != nil && body not matches "[0-1]+regex$"`,
-		},
-		{
-			Name: "regex with escape characters",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: `^Executing \[\S+@\S+:[0-9]+\] \S+".*`, Operator: "regex"},
-			}},
-			Expr: `body != nil && body matches "^Executing \\[\\S+@\\S+:[0-9]+\\] \\S+\".*"`,
-		},
-		{
-			Name: "invalid regex",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-9]++", Operator: "nregex"},
-			}},
-			Expr:        `body != nil && lower(body) not matches "[0-9]++"`,
-			ExpectError: true,
-		},
-		{
-			Name: "in",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []any{1, 2, 3, 4}, Operator: "in"},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] in [1,2,3,4]`,
-		},
-		{
-			Name: "not in",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []any{"1", "2"}, Operator: "nin"},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] not in ['1','2']`,
-		},
-		{
-			Name: "exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "exists"},
-			}},
-			Expr: `"key" in attributes`,
-		},
-		{
-			Name: "not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
-			}},
-			Expr: `"key" not in attributes`,
-		},
-		{
-			Name: "trace_id not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			Expr: `trace_id == nil`,
-		},
-		{
-			Name: "trace_id exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			Expr: `trace_id != nil`,
-		},
-		{
-			Name: "span_id not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			Expr: `span_id == nil`,
-		},
-		{
-			Name: "span_id exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			Expr: `span_id != nil`,
-		},
-		{
-			Name: "Multi filter",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "nregex"},
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
-			}},
-			Expr: `attributes["key"] != nil && attributes["key"] <= 10 and body != nil && body not matches "[0-1]+regex$" and "key" not in attributes`,
-		},
-		{
-			Name: "incorrect multi filter",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-9]++", Operator: "nregex"},
-				{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
-			}},
-			Expr:        `attributes["key"] != nil && attributes["key"] <= 10 and body not matches "[0-9]++" and "key" not in attributes`,
-			ExpectError: true,
-		},
-	}
+var testCases = []struct {
+	Name        string
+	Query       *v3.FilterSet
+	Expr        string
+	ExpectError bool
+}{
+	{
+		Name: "equal",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "checkbody", Operator: "="},
+		}},
+		Expr: `attributes["key"] == "checkbody"`,
+	},
+	{
+		Name: "not equal",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "checkbody", Operator: "!="},
+		}},
+		Expr: `attributes["key"] != "checkbody"`,
+	},
+	{
+		Name: "less than",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<"},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] < 10`,
+	},
+	{
+		Name: "greater than",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: ">"},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] > 10`,
+	},
+	{
+		Name: "less than equal",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] <= 10`,
+	},
+	{
+		Name: "greater than equal",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: ">="},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] >= 10`,
+	},
+	// case sensitive
+	{
+		Name: "body contains",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "contains"},
+		}},
+		Expr: `body != nil && lower(body) contains lower("checkbody")`,
+	},
+	{
+		Name: "body.log.message exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body.log.message", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
+		}},
+		Expr: `"log.message" in fromJSON(body)`,
+	},
+	{
+		Name: "body.log.message not exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body.log.message", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
+		}},
+		Expr: `"log.message" not in fromJSON(body)`,
+	},
+	{
+		Name: "body ncontains",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "ncontains"},
+		}},
+		Expr: `body != nil && lower(body) not contains lower("checkbody")`,
+	},
+	{
+		Name: "body regex",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "regex"},
+		}},
+		Expr: `body != nil && body matches "[0-1]+regex$"`,
+	},
+	{
+		Name: "body not regex",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "nregex"},
+		}},
+		Expr: `body != nil && body not matches "[0-1]+regex$"`,
+	},
+	{
+		Name: "regex with escape characters",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: `^Executing \[\S+@\S+:[0-9]+\] \S+".*`, Operator: "regex"},
+		}},
+		Expr: `body != nil && body matches "^Executing \\[\\S+@\\S+:[0-9]+\\] \\S+\".*"`,
+	},
+	{
+		Name: "invalid regex",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-9]++", Operator: "nregex"},
+		}},
+		Expr:        `body != nil && lower(body) not matches "[0-9]++"`,
+		ExpectError: true,
+	},
+	{
+		Name: "in",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []interface{}{1, 2, 3, 4}, Operator: "in"},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] in [1,2,3,4]`,
+	},
+	{
+		Name: "not in",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []interface{}{"1", "2"}, Operator: "nin"},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] not in ['1','2']`,
+	},
+	{
+		Name: "exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "exists"},
+		}},
+		Expr: `"key" in attributes`,
+	},
+	{
+		Name: "not exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
+		}},
+		Expr: `"key" not in attributes`,
+	},
+	{
+		Name: "trace_id not exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
+		}},
+		Expr: `trace_id == nil`,
+	},
+	{
+		Name: "trace_id exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
+		}},
+		Expr: `trace_id != nil`,
+	},
+	{
+		Name: "span_id not exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
+		}},
+		Expr: `span_id == nil`,
+	},
+	{
+		Name: "span_id exists",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
+		}},
+		Expr: `span_id != nil`,
+	},
+	{
+		Name: "Multi filter",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex$", Operator: "nregex"},
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
+		}},
+		Expr: `attributes["key"] != nil && attributes["key"] <= 10 and body != nil && body not matches "[0-1]+regex$" and "key" not in attributes`,
+	},
+	{
+		Name: "incorrect multi filter",
+		Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: 10, Operator: "<="},
+			{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-9]++", Operator: "nregex"},
+			{Key: v3.AttributeKey{Key: "key", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
+		}},
+		Expr:        `attributes["key"] != nil && attributes["key"] <= 10 and body not matches "[0-9]++" and "key" not in attributes`,
+		ExpectError: true,
+	},
+}
 
+func TestParse(t *testing.T) {
 	for _, tt := range testCases {
-		t.Run(tt.Name, func(t *testing.T) {
+		Convey(tt.Name, t, func() {
 			x, err := Parse(tt.Query)
 			if tt.ExpectError {
-				assert.Error(t, err)
+				So(err, ShouldNotBeNil)
 			} else {
-				assert.NoError(t, err)
-				assert.Equal(t, tt.Expr, x)
+				So(err, ShouldBeNil)
+				So(x, ShouldEqual, tt.Expr)
 			}
 		})
 	}
 }
-
-type EntryComposite struct {
-	ID int
-	*entry.Entry
-}
-
-// makeEntry creates an EntryComposite for tests. Pass nil for traceID/spanID to mean "not set".
-func makeEntry(id int, body any, attributes, resource map[string]any, traceID, spanID []byte) EntryComposite {
-	e := entry.New()
-	e.Body = body
-	if attributes != nil {
-		e.Attributes = attributes
-	} else {
-		e.Attributes = make(map[string]any)
-	}
-	if resource != nil {
-		e.Resource = resource
-	} else {
-		e.Resource = make(map[string]any)
-	}
-	if traceID != nil {
-		e.TraceID = traceID
-	}
-	if spanID != nil {
-		e.SpanID = spanID
-	}
-	return EntryComposite{ID: id, Entry: e}
-}
-
-func TestExpressionVSEntry(t *testing.T) {
-	// Dataset: entries with varied body (JSON and plain text), attributes, trace_id, span_id for filter testing.
-	// IDs 0..12: JSON bodies (body.msg / body.log etc. work). IDs 13..17: simple text log bodies.
-	dataset := []EntryComposite{
-		// JSON body entries (0-12)
-		makeEntry(0, `{"msg":"hello world"}`, map[string]any{"level": "info"}, map[string]any{"env": "prod", "host": "node-0"}, nil, nil),
-		makeEntry(1, `{"msg":"error occurred", "missing": "value"}`, map[string]any{"level": "error"}, map[string]any{"env": "prod", "host": "node-1"}, []byte("trace1"), []byte("span1")),
-		makeEntry(2, `{"msg":"checkbody substring"}`, map[string]any{"level": "info"}, map[string]any{"env": "staging", "host": "node-2"}, []byte("trace2"), nil),
-		makeEntry(3, `{"msg":"no match here"}`, map[string]any{"level": "debug"}, map[string]any{"env": "staging", "host": "node-3"}, nil, []byte("span3")),
-		makeEntry(4, `{"msg":"101regex suffix"}`, map[string]any{"code": "200", "count": int64(5)}, map[string]any{"env": "prod", "host": "node-4"}, nil, nil),
-		makeEntry(5, `{"msg":"plain text only"}`, map[string]any{"code": "404", "count": int64(10)}, map[string]any{"env": "prod", "host": "node-5"}, []byte("trace5"), []byte("span5")),
-		makeEntry(6, `{"log":{"message":"user login"}}`, map[string]any{"service": "auth"}, map[string]any{"env": "dev", "host": "node-6"}, nil, nil),
-		makeEntry(7, `{"log":{"message":"user logout"}}`, map[string]any{"service": "auth", "user_id": "u1"}, map[string]any{"env": "dev", "host": "node-7"}, []byte("trace7"), nil),
-		makeEntry(8, `{"event":"click"}`, map[string]any{"service": "api"}, map[string]any{"env": "dev", "host": "node-8"}, nil, nil),
-		makeEntry(9, `{"msg":"checkbody"}`, map[string]any{"tag": "exact", "num": int64(9)}, map[string]any{"env": "prod", "host": "node-9"}, nil, nil),
-		makeEntry(10, `{"msg":"CHECKBODY case"}`, map[string]any{"tag": "case", "num": int64(10)}, map[string]any{"env": "staging", "host": "node-10"}, nil, nil),
-		makeEntry(11, `{"msg":"foo"}`, map[string]any{"status": "active", "score": int64(100)}, map[string]any{"env": "prod", "host": "node-11"}, nil, nil),
-		makeEntry(12, `{"msg":"bar"}`, map[string]any{"status": "inactive", "score": int64(50)}, map[string]any{"env": "staging", "host": "node-12"}, []byte("trace12"), []byte("span12")),
-		// Plain text log body entries (13-17)
-		makeEntry(13, "Server started on port 8080", map[string]any{"component": "server"}, map[string]any{"env": "prod", "host": "node-13"}, nil, nil),
-		makeEntry(14, "Connection refused to 10.0.0.1:5432", map[string]any{"level": "error"}, map[string]any{"env": "prod", "host": "node-14"}, nil, nil),
-		makeEntry(15, "User login failed for admin", map[string]any{"service": "auth", "level": "warn"}, map[string]any{"env": "dev", "host": "node-15"}, []byte("trace15"), nil),
-		makeEntry(16, "checkbody in text log", map[string]any{"level": "info"}, map[string]any{"env": "staging", "host": "node-16"}, nil, nil),
-		makeEntry(17, "WARN: disk full on /var", map[string]any{"level": "warn"}, map[string]any{"env": "prod", "host": "node-17"}, nil, []byte("span17")),
-		// Body as map (not string) entries (18-20)
-		makeEntry(18, map[string]any{"msg": "checkbody substring", "level": "info"}, map[string]any{"source": "map"}, map[string]any{"env": "prod", "host": "node-18"}, nil, nil),
-		makeEntry(19, map[string]any{"log": map[string]any{"message": "nested value in map body"}, "missing": true}, map[string]any{"source": "map"}, map[string]any{"env": "staging", "host": "node-19"}, []byte("trace19"), nil),
-		makeEntry(20, map[string]any{"event": "deploy", "version": "1.2.0"}, map[string]any{"source": "map", "level": "info"}, map[string]any{"env": "dev", "host": "node-20"}, nil, []byte("span20")),
-	}
-
-	var testCases = []struct {
-		Name            string
-		Query           *v3.FilterSet
-		ExpectedMatches []int
-	}{
-		{
-			Name: "resource equal (env)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "prod", Operator: "="},
-			}},
-			ExpectedMatches: []int{0, 1, 4, 5, 9, 11, 13, 14, 17, 18},
-		},
-		{
-			Name: "resource not equal (env)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "prod", Operator: "!="},
-			}},
-			ExpectedMatches: []int{2, 3, 6, 7, 8, 10, 12, 15, 16, 19, 20},
-		},
-		{
-			Name: "attribute less than (numeric)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "count", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 8, Operator: "<"},
-			}},
-			ExpectedMatches: []int{4},
-		},
-		{
-			Name: "attribute greater than (numeric)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "count", DataType: v3.AttributeKeyDataTypeInt64, Type: v3.AttributeKeyTypeTag}, Value: 8, Operator: ">"},
-			}},
-			ExpectedMatches: []int{5},
-		},
-		{
-			Name: "body contains (case insensitive)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "contains"},
-			}},
-			ExpectedMatches: []int{2, 9, 10, 16},
-		},
-		{
-			Name: "body ncontains",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "ncontains"},
-			}},
-			ExpectedMatches: []int{0, 1, 3, 4, 5, 6, 7, 8, 11, 12, 13, 14, 15, 17},
-		},
-		{
-			Name: "body.msg (case insensitive)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body.msg", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: false}, Value: "checkbody", Operator: "contains"},
-			}},
-			ExpectedMatches: []int{2, 9, 10, 18},
-		},
-		{
-			Name: "body regex",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex", Operator: "regex"},
-			}},
-			ExpectedMatches: []int{4},
-		},
-		{
-			Name: "body not regex",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex", Operator: "nregex"},
-			}},
-			ExpectedMatches: []int{0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17},
-		},
-		// body.log.message exists/nexists: expr checks "log.message" in fromJSON(body); nested key
-		// semantics depend on signoz stanza helper. Omitted here to avoid coupling to env shape.
-		{
-			Name: "body top-level key exists (body.msg)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body.msg", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			ExpectedMatches: []int{0, 1, 2, 3, 4, 5, 9, 10, 11, 12, 18},
-		},
-		{
-			Name: "body top-level key not exists (body.missing)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body.missing", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			ExpectedMatches: []int{0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 18, 20},
-		},
-		{
-			Name: "attribute exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "service", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "exists"},
-			}},
-			ExpectedMatches: []int{6, 7, 8, 15},
-		},
-		{
-			Name: "attribute not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "service", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
-			}},
-			ExpectedMatches: []int{0, 1, 2, 3, 4, 5, 9, 10, 11, 12, 13, 14, 16, 17, 18, 19, 20},
-		},
-		{
-			Name: "trace_id exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			ExpectedMatches: []int{1, 2, 5, 7, 12, 15, 19},
-		},
-		{
-			Name: "trace_id not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			ExpectedMatches: []int{0, 3, 4, 6, 8, 9, 10, 11, 13, 14, 16, 17, 18, 20},
-		},
-		{
-			Name: "span_id exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			ExpectedMatches: []int{1, 3, 5, 12, 17, 20},
-		},
-		{
-			Name: "span_id not exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-			}},
-			ExpectedMatches: []int{0, 2, 4, 6, 7, 8, 9, 10, 11, 13, 14, 15, 16, 18, 19},
-		},
-		{
-			Name: "in (attribute in list)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []any{"info", "error"}, Operator: "in"},
-			}},
-			ExpectedMatches: []int{0, 1, 2, 14, 16, 20},
-		},
-		{
-			Name: "not in (attribute not in list)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: []any{"error", "warn"}, Operator: "nin"},
-			}},
-			ExpectedMatches: []int{0, 2, 3, 16, 20},
-		},
-		{
-			Name: "multi filter AND",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "staging", Operator: "="},
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "info", Operator: "="},
-			}},
-			ExpectedMatches: []int{2, 16},
-		},
-		{
-			Name: "multi filter AND (two attributes)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "service", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "auth", Operator: "="},
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Operator: "nexists"},
-			}},
-			ExpectedMatches: []int{6, 7},
-		},
-		// Multi-filter variations: body + attribute, three conditions, trace/span + attribute
-		{
-			Name: "multi filter AND body contains + attribute",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "Connection", Operator: "contains"},
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "prod", Operator: "="},
-			}},
-			ExpectedMatches: []int{14},
-		},
-		{
-			Name: "multi filter AND body contains + service",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "login", Operator: "contains"},
-				{Key: v3.AttributeKey{Key: "service", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "auth", Operator: "="},
-			}},
-			ExpectedMatches: []int{6, 15},
-		},
-		{
-			Name: "multi filter AND env + level (prod error)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "prod", Operator: "="},
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "error", Operator: "="},
-			}},
-			ExpectedMatches: []int{1, 14},
-		},
-		{
-			Name: "multi filter AND three conditions (staging + checkbody + info)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "staging", Operator: "="},
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "contains"},
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "info", Operator: "="},
-			}},
-			ExpectedMatches: []int{2, 16},
-		},
-		{
-			Name: "multi filter AND trace_id exists + body contains",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "checkbody", Operator: "contains"},
-			}},
-			ExpectedMatches: []int{2},
-		},
-		{
-			Name: "multi filter AND span_id nexists + service auth",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-				{Key: v3.AttributeKey{Key: "service", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "auth", Operator: "="},
-			}},
-			ExpectedMatches: []int{6, 7, 15},
-		},
-		{
-			Name: "multi filter AND body regex + attribute",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "[0-1]+regex", Operator: "regex"},
-				{Key: v3.AttributeKey{Key: "code", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "200", Operator: "="},
-			}},
-			ExpectedMatches: []int{4},
-		},
-		{
-			Name: "multi filter AND no trace_id + no span_id + env prod",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-				{Key: v3.AttributeKey{Key: "span_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "nexists"},
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "prod", Operator: "="},
-			}},
-			ExpectedMatches: []int{0, 4, 9, 11, 13, 14, 18},
-		},
-		{
-			Name: "multi filter AND level warn + body contains",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "level", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "warn", Operator: "="},
-				{Key: v3.AttributeKey{Key: "body", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "disk", Operator: "contains"},
-			}},
-			ExpectedMatches: []int{17},
-		},
-		{
-			Name: "no matches (attribute value not present)",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "env", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeResource}, Value: "never", Operator: "="},
-			}},
-			ExpectedMatches: []int{},
-		},
-		{
-			Name: "attribute equal and trace_id exists",
-			Query: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-				{Key: v3.AttributeKey{Key: "code", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeTag}, Value: "404", Operator: "="},
-				{Key: v3.AttributeKey{Key: "trace_id", DataType: v3.AttributeKeyDataTypeString, Type: v3.AttributeKeyTypeUnspecified, IsColumn: true}, Value: "", Operator: "exists"},
-			}},
-			ExpectedMatches: []int{5},
-		},
-	}
-
-	for _, tt := range testCases {
-		t.Run(tt.Name, func(t *testing.T) {
-			expression, err := Parse(tt.Query)
-			assert.NoError(t, err)
-
-			compiled, hasBodyFieldRef, err := signozstanzahelper.ExprCompileBool(expression)
-			assert.NoError(t, err)
-
-			matchedIDs := []int{}
-			for _, d := range dataset {
-				env := signozstanzahelper.GetExprEnv(d.Entry, hasBodyFieldRef)
-				matches, err := vm.Run(compiled, env)
-				signozstanzahelper.PutExprEnv(env)
-				if err != nil {
-					// Eval error (e.g. fromJSON on non-JSON body) => treat as no match
-					continue
-				}
-				if matches != nil && matches.(bool) {
-					matchedIDs = append(matchedIDs, d.ID)
-				}
-			}
-			assert.Equal(t, tt.ExpectedMatches, matchedIDs, "query %q", tt.Name)
-		})
-	}
-}

pkg/signoz/openapi.go

@@ -2,7 +2,6 @@ package signoz
 
 import (
 	"context"
-	"net/http"
 	"os"
 	"reflect"
 
@@ -24,8 +23,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/gorilla/mux"
 	"github.com/swaggest/jsonschema-go"
 	"github.com/swaggest/openapi-go"
 	"github.com/swaggest/openapi-go/openapi3"
@@ -60,10 +57,6 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		return nil, err
 	}
 
-	// Register routes that live outside the APIServer modules
-	// so they are discovered by the OpenAPI walker.
-	registerQueryRoutes(apiserver.Router())
-
 	reflector := openapi3.NewReflector()
 	reflector.JSONSchemaReflector().DefaultOptions = append(reflector.JSONSchemaReflector().DefaultOptions, jsonschema.InterceptDefName(func(t reflect.Type, defaultDefName string) string {
 		if defaultDefName == "RenderSuccessResponse" {
@@ -104,25 +97,3 @@ func (openapi *OpenAPI) CreateAndWrite(path string) error {
 
 	return os.WriteFile(path, spec, 0o600)
 }
-
-func registerQueryRoutes(router *mux.Router) {
-	router.Handle("/api/v5/query_range", handler.New(
-		func(http.ResponseWriter, *http.Request) {},
-		handler.OpenAPIDef{
-			ID:                  "QueryRangeV5",
-			Tags:                []string{"query"},
-			Summary:             "Query range",
-			Description:         "Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.",
-			Request:             new(qbtypes.QueryRangeRequest),
-			RequestContentType:  "application/json",
-			Response:            new(qbtypes.QueryRangeResponse),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest},
-			SecuritySchemes: []handler.OpenAPISecurityScheme{
-				{Name: ctxtypes.AuthTypeAPIKey.StringValue(), Scopes: []string{"VIEWER"}},
-				{Name: ctxtypes.AuthTypeTokenizer.StringValue(), Scopes: []string{"VIEWER"}},
-			},
-		},
-	)).Methods(http.MethodPost)
-}

pkg/types/factor_password.go

@@ -36,8 +36,8 @@ type ChangePasswordRequest struct {
 }
 
 type PostableForgotPassword struct {
-	OrgID           valuer.UUID  `json:"orgId" required:"true"`
-	Email           valuer.Email `json:"email" required:"true"`
+	OrgID           valuer.UUID  `json:"orgId"`
+	Email           valuer.Email `json:"email"`
 	FrontendBaseURL string       `json:"frontendBaseURL"`
 }
 

pkg/types/gatewaytypes/ingestionkey.go

@@ -33,8 +33,8 @@ type LimitConfig struct {
 }
 
 type LimitValue struct {
-	Size  int64 `json:"size"`
-	Count int64 `json:"count"`
+	Size  int64 `json:"size,omitempty"`
+	Count int64 `json:"count,omitempty"`
 }
 
 type LimitMetric struct {

pkg/types/metricsexplorertypes/metricsexplorer.go

@@ -31,13 +31,6 @@ var (
 	TreemapModeSamples = TreemapMode{valuer.NewString("samples")}
 )
 
-func (TreemapMode) Enum() []any {
-	return []any{
-		TreemapModeTimeSeries,
-		TreemapModeSamples,
-	}
-}
-
 // StatsRequest represents the payload accepted by the metrics stats endpoint.
 type StatsRequest struct {
 	Filter  *qbtypes.Filter  `json:"filter,omitempty"`
@@ -105,7 +98,7 @@ func (req *StatsRequest) UnmarshalJSON(data []byte) error {
 type Stat struct {
 	MetricName  string           `json:"metricName" required:"true"`
 	Description string           `json:"description" required:"true"`
-	MetricType  metrictypes.Type `json:"type" required:"true"`
+	MetricType  metrictypes.Type `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
 	MetricUnit  string           `json:"unit" required:"true"`
 	TimeSeries  uint64           `json:"timeseries" required:"true"`
 	Samples     uint64           `json:"samples" required:"true"`
@@ -119,9 +112,9 @@ type StatsResponse struct {
 
 type MetricMetadata struct {
 	Description string                  `json:"description" required:"true"`
-	MetricType  metrictypes.Type        `json:"type" required:"true"`
+	MetricType  metrictypes.Type        `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
 	MetricUnit  string                  `json:"unit" required:"true"`
-	Temporality metrictypes.Temporality `json:"temporality" required:"true"`
+	Temporality metrictypes.Temporality `json:"temporality" required:"true" enum:"delta,cumulative,unspecified"`
 	IsMonotonic bool                    `json:"isMonotonic" required:"true"`
 }
 
@@ -138,10 +131,10 @@ func (m *MetricMetadata) UnmarshalBinary(data []byte) error {
 // UpdateMetricMetadataRequest represents the payload for updating metric metadata.
 type UpdateMetricMetadataRequest struct {
 	MetricName  string                  `json:"metricName" required:"true"`
-	Type        metrictypes.Type        `json:"type" required:"true"`
+	Type        metrictypes.Type        `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
 	Description string                  `json:"description" required:"true"`
 	Unit        string                  `json:"unit" required:"true"`
-	Temporality metrictypes.Temporality `json:"temporality" required:"true"`
+	Temporality metrictypes.Temporality `json:"temporality" required:"true" enum:"delta,cumulative,unspecified"`
 	IsMonotonic bool                    `json:"isMonotonic" required:"true"`
 }
 
@@ -151,7 +144,7 @@ type TreemapRequest struct {
 	Start  int64           `json:"start" required:"true"`
 	End    int64           `json:"end" required:"true"`
 	Limit  int             `json:"limit" required:"true"`
-	Mode   TreemapMode     `json:"mode" required:"true"`
+	Mode   TreemapMode     `json:"mode" required:"true" enum:"timeseries,samples"`
 }
 
 // Validate enforces basic constraints on TreemapRequest.

pkg/types/metrictypes/metrictypes.go

@@ -36,7 +36,7 @@ func (t Temporality) Value() (driver.Value, error) {
 	}
 }
 
-func (t *Temporality) Scan(src any) error {
+func (t *Temporality) Scan(src interface{}) error {
 	if src == nil {
 		*t = Unknown
 		return nil
@@ -66,14 +66,6 @@ func (t *Temporality) Scan(src any) error {
 	return nil
 }
 
-func (Temporality) Enum() []any {
-	return []any{
-		Delta,
-		Cumulative,
-		Unspecified,
-	}
-}
-
 // Type is the type of the metric in OTLP data model
 // Read more here https://opentelemetry.io/docs/specs/otel/metrics/data-model/#metric-points
 type Type struct {
@@ -142,16 +134,6 @@ var (
 	UnspecifiedType  = Type{valuer.NewString("")}
 )
 
-func (Type) Enum() []any {
-	return []any{
-		GaugeType,
-		SumType,
-		HistogramType,
-		SummaryType,
-		ExpHistogramType,
-	}
-}
-
 type TimeAggregation struct {
 	valuer.String
 }
@@ -169,21 +151,6 @@ var (
 	TimeAggregationIncrease      = TimeAggregation{valuer.NewString("increase")}
 )
 
-func (TimeAggregation) Enum() []any {
-	return []any{
-		TimeAggregationUnspecified,
-		TimeAggregationLatest,
-		TimeAggregationSum,
-		TimeAggregationAvg,
-		TimeAggregationMin,
-		TimeAggregationMax,
-		TimeAggregationCount,
-		TimeAggregationCountDistinct,
-		TimeAggregationRate,
-		TimeAggregationIncrease,
-	}
-}
-
 type SpaceAggregation struct {
 	valuer.String
 }
@@ -202,22 +169,6 @@ var (
 	SpaceAggregationPercentile99 = SpaceAggregation{valuer.NewString("p99")}
 )
 
-func (SpaceAggregation) Enum() []any {
-	return []any{
-		SpaceAggregationUnspecified,
-		SpaceAggregationSum,
-		SpaceAggregationAvg,
-		SpaceAggregationMin,
-		SpaceAggregationMax,
-		SpaceAggregationCount,
-		SpaceAggregationPercentile50,
-		SpaceAggregationPercentile75,
-		SpaceAggregationPercentile90,
-		SpaceAggregationPercentile95,
-		SpaceAggregationPercentile99,
-	}
-}
-
 func (s SpaceAggregation) IsPercentile() bool {
 	return s == SpaceAggregationPercentile50 ||
 		s == SpaceAggregationPercentile75 ||

pkg/types/querybuildertypes/querybuildertypesv5/openapi.go

@@ -1,707 +0,0 @@
-package querybuildertypesv5
-
-import (
-	"github.com/swaggest/jsonschema-go"
-)
-
-// Enum returns the acceptable values for QueryType.
-func (QueryType) Enum() []any {
-	return []any{
-		QueryTypeBuilder,
-		QueryTypeFormula,
-		// Not yet supported.
-		// QueryTypeSubQuery,
-		// QueryTypeJoin,
-		QueryTypeTraceOperator,
-		QueryTypeClickHouseSQL,
-		QueryTypePromQL,
-	}
-}
-
-// Enum returns the acceptable values for RequestType.
-func (RequestType) Enum() []any {
-	return []any{
-		RequestTypeScalar,
-		RequestTypeTimeSeries,
-		RequestTypeRaw,
-		RequestTypeRawStream,
-		RequestTypeTrace,
-		// RequestTypeDistribution,
-	}
-}
-
-// Enum returns the acceptable values for FunctionName.
-func (FunctionName) Enum() []any {
-	return []any{
-		FunctionNameCutOffMin,
-		FunctionNameCutOffMax,
-		FunctionNameClampMin,
-		FunctionNameClampMax,
-		FunctionNameAbsolute,
-		FunctionNameRunningDiff,
-		FunctionNameLog2,
-		FunctionNameLog10,
-		FunctionNameCumulativeSum,
-		FunctionNameEWMA3,
-		FunctionNameEWMA5,
-		FunctionNameEWMA7,
-		FunctionNameMedian3,
-		FunctionNameMedian5,
-		FunctionNameMedian7,
-		FunctionNameTimeShift,
-		FunctionNameAnomaly,
-		FunctionNameFillZero,
-	}
-}
-
-// Enum returns the acceptable values for OrderDirection.
-func (OrderDirection) Enum() []any {
-	return []any{
-		OrderDirectionAsc,
-		OrderDirectionDesc,
-	}
-}
-
-// Enum returns the acceptable values for ReduceTo.
-func (ReduceTo) Enum() []any {
-	return []any{
-		ReduceToSum,
-		ReduceToCount,
-		ReduceToAvg,
-		ReduceToMin,
-		ReduceToMax,
-		ReduceToLast,
-		ReduceToMedian,
-	}
-}
-
-// Enum returns the acceptable values for VariableType.
-func (VariableType) Enum() []any {
-	return []any{
-		QueryVariableType,
-		DynamicVariableType,
-		CustomVariableType,
-		TextBoxVariableType,
-	}
-}
-
-// Enum returns the acceptable values for JoinType.
-func (JoinType) Enum() []any {
-	return []any{
-		JoinTypeInner,
-		JoinTypeLeft,
-		JoinTypeRight,
-		JoinTypeFull,
-		JoinTypeCross,
-	}
-}
-
-// Enum returns the acceptable values for ColumnType.
-func (ColumnType) Enum() []any {
-	return []any{
-		ColumnTypeGroup,
-		ColumnTypeAggregation,
-	}
-}
-
-// queryEnvelopeBuilderTrace is the OpenAPI schema for a QueryEnvelope with type=builder_query and signal=traces.
-type queryEnvelopeBuilderTrace struct {
-	Type QueryType                           `json:"type" description:"The type of the query."`
-	Spec QueryBuilderQuery[TraceAggregation] `json:"spec" description:"The trace builder query specification."`
-}
-
-// queryEnvelopeBuilderLog is the OpenAPI schema for a QueryEnvelope with type=builder_query and signal=logs.
-type queryEnvelopeBuilderLog struct {
-	Type QueryType                         `json:"type" description:"The type of the query."`
-	Spec QueryBuilderQuery[LogAggregation] `json:"spec" description:"The log builder query specification."`
-}
-
-// queryEnvelopeBuilderMetric is the OpenAPI schema for a QueryEnvelope with type=builder_query and signal=metrics.
-type queryEnvelopeBuilderMetric struct {
-	Type QueryType                            `json:"type" description:"The type of the query."`
-	Spec QueryBuilderQuery[MetricAggregation] `json:"spec" description:"The metric builder query specification."`
-}
-
-// queryEnvelopeFormula is the OpenAPI schema for a QueryEnvelope with type=builder_formula.
-type queryEnvelopeFormula struct {
-	Type QueryType           `json:"type" description:"The type of the query."`
-	Spec QueryBuilderFormula `json:"spec" description:"The formula specification."`
-}
-
-// queryEnvelopeJoin is the OpenAPI schema for a QueryEnvelope with type=builder_join.
-// type queryEnvelopeJoin struct {
-// 	Type QueryType        `json:"type" description:"The type of the query."`
-// 	Spec QueryBuilderJoin `json:"spec" description:"The join specification."`
-// }
-
-// queryEnvelopeTraceOperator is the OpenAPI schema for a QueryEnvelope with type=builder_trace_operator.
-type queryEnvelopeTraceOperator struct {
-	Type QueryType                 `json:"type" description:"The type of the query."`
-	Spec QueryBuilderTraceOperator `json:"spec" description:"The trace operator specification."`
-}
-
-// queryEnvelopePromQL is the OpenAPI schema for a QueryEnvelope with type=promql.
-type queryEnvelopePromQL struct {
-	Type QueryType `json:"type" description:"The type of the query."`
-	Spec PromQuery `json:"spec" description:"The PromQL query specification."`
-}
-
-// queryEnvelopeClickHouseSQL is the OpenAPI schema for a QueryEnvelope with type=clickhouse_sql.
-type queryEnvelopeClickHouseSQL struct {
-	Type QueryType       `json:"type" description:"The type of the query."`
-	Spec ClickHouseQuery `json:"spec" description:"The ClickHouse SQL query specification."`
-}
-
-var _ jsonschema.OneOfExposer = QueryEnvelope{}
-
-// JSONSchemaOneOf returns the oneOf variants for the QueryEnvelope discriminated union.
-// Each variant represents a different query type with its corresponding spec schema.
-func (QueryEnvelope) JSONSchemaOneOf() []any {
-	return []any{
-		queryEnvelopeBuilderTrace{},
-		queryEnvelopeBuilderLog{},
-		queryEnvelopeBuilderMetric{},
-		queryEnvelopeFormula{},
-		// queryEnvelopeJoin{},
-		queryEnvelopeTraceOperator{},
-		queryEnvelopePromQL{},
-		queryEnvelopeClickHouseSQL{},
-	}
-}
-
-var _ jsonschema.Exposer = Step{}
-
-// JSONSchema returns a custom schema for Step that accepts either a duration string or a number (seconds).
-func (Step) JSONSchema() (jsonschema.Schema, error) {
-	s := jsonschema.Schema{}
-	s.WithDescription("Step interval. Accepts a Go duration string (e.g., \"60s\", \"1m\", \"1h\") or a number representing seconds (e.g., 60).")
-
-	strSchema := jsonschema.Schema{}
-	strSchema.WithType(jsonschema.String.Type())
-	strSchema.WithExamples("60s", "5m", "1h")
-	strSchema.WithDescription("Duration string (e.g., \"60s\", \"5m\", \"1h\").")
-
-	numSchema := jsonschema.Schema{}
-	numSchema.WithType(jsonschema.Number.Type())
-	numSchema.WithExamples(60, 300, 3600)
-	numSchema.WithDescription("Duration in seconds.")
-
-	s.OneOf = []jsonschema.SchemaOrBool{
-		strSchema.ToSchemaOrBool(),
-		numSchema.ToSchemaOrBool(),
-	}
-	return s, nil
-}
-
-var _ jsonschema.OneOfExposer = QueryData{}
-
-// JSONSchemaOneOf documents the polymorphic result types in QueryData.Results.
-func (QueryData) JSONSchemaOneOf() []any {
-	return []any{
-		TimeSeriesData{},
-		ScalarData{},
-		RawData{},
-	}
-}
-
-var _ jsonschema.Preparer = &QueryRangeRequest{}
-
-// PrepareJSONSchema adds examples and description to the QueryRangeRequest schema.
-func (q *QueryRangeRequest) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	schema.WithDescription("Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.")
-	schema.WithExamples(
-		// 1. time_series + traces builder: count spans grouped by service, ordered by count
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "count()",
-									"alias":      "span_count",
-								},
-							},
-							"stepInterval": "60s",
-							"filter": map[string]any{
-								"expression": "service.name = 'frontend'",
-							},
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-							"order": []any{
-								map[string]any{
-									"key":       map[string]any{"name": "span_count"},
-									"direction": "desc",
-								},
-							},
-							"limit": 10,
-						},
-					},
-				},
-			},
-		},
-		// 2. time_series + logs builder: count logs grouped by service
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "count()",
-									"alias":      "log_count",
-								},
-							},
-							"stepInterval": "60s",
-							"filter": map[string]any{
-								"expression": "severity_text = 'ERROR'",
-							},
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-							"order": []any{
-								map[string]any{
-									"key":       map[string]any{"name": "log_count"},
-									"direction": "desc",
-								},
-							},
-							"limit": 10,
-						},
-					},
-				},
-			},
-		},
-		// 3. time_series + metrics builder (Gauge): latest value averaged across series
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{
-									"metricName":       "system.cpu.utilization",
-									"timeAggregation":  "latest",
-									"spaceAggregation": "avg",
-								},
-							},
-							"stepInterval": "60s",
-							"groupBy": []any{
-								map[string]any{
-									"name":         "host.name",
-									"fieldContext": "resource",
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-		// 4. time_series + metrics builder (Sum): rate of cumulative counter
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{
-									"metricName":       "http.server.duration.count",
-									"timeAggregation":  "rate",
-									"spaceAggregation": "sum",
-								},
-							},
-							"stepInterval": 120,
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-		// 5. time_series + metrics builder (Histogram): p99 latency
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{
-									"metricName":       "http.server.duration.bucket",
-									"spaceAggregation": "p99",
-								},
-							},
-							"stepInterval": "60s",
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-		// 6. raw + logs builder: fetch raw log records
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"filter": map[string]any{
-								"expression": "severity_text = 'ERROR'",
-							},
-							"selectFields": []any{
-								map[string]any{
-									"name":         "body",
-									"fieldContext": "log",
-								},
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-							"order": []any{
-								map[string]any{
-									"key":       map[string]any{"name": "timestamp", "fieldContext": "log"},
-									"direction": "desc",
-								},
-								map[string]any{
-									"key":       map[string]any{"name": "id"},
-									"direction": "desc",
-								},
-							},
-							"limit":  50,
-							"offset": 0,
-						},
-					},
-				},
-			},
-		},
-		// 7. raw + traces builder: fetch raw span records
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"filter": map[string]any{
-								"expression": "service.name = 'frontend' AND has_error = true",
-							},
-							"selectFields": []any{
-								map[string]any{
-									"name":         "name",
-									"fieldContext": "span",
-								},
-								map[string]any{
-									"name":         "duration_nano",
-									"fieldContext": "span",
-								},
-							},
-							"order": []any{
-								map[string]any{
-									"key":       map[string]any{"name": "timestamp", "fieldContext": "span"},
-									"direction": "desc",
-								},
-							},
-							"limit": 100,
-						},
-					},
-				},
-			},
-		},
-		// 8. scalar + traces builder: total span count as a single value
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "count()",
-									"alias":      "span_count",
-								},
-							},
-							"filter": map[string]any{
-								"expression": "service.name = 'frontend'",
-							},
-						},
-					},
-				},
-			},
-		},
-		// 9. scalar + logs builder: total error log count as a single value
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "count()",
-									"alias":      "error_count",
-								},
-							},
-							"filter": map[string]any{
-								"expression": "severity_text = 'ERROR'",
-							},
-						},
-					},
-				},
-			},
-		},
-		// 10. scalar + metrics builder: single reduced value with reduceTo
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{
-									"metricName":       "http.server.duration.count",
-									"timeAggregation":  "rate",
-									"spaceAggregation": "sum",
-									"reduceTo":         "sum",
-								},
-							},
-							"stepInterval": "60s",
-						},
-					},
-				},
-			},
-		},
-		// 11. builder formula: error rate from two trace queries
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "countIf(has_error = true)",
-								},
-							},
-							"stepInterval": "60s",
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-						},
-					},
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "B",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{
-									"expression": "count()",
-								},
-							},
-							"stepInterval": "60s",
-							"groupBy": []any{
-								map[string]any{
-									"name":         "service.name",
-									"fieldContext": "resource",
-								},
-							},
-						},
-					},
-					map[string]any{
-						"type": "builder_formula",
-						"spec": map[string]any{
-							"name":       "error_rate",
-							"expression": "A / B * 100",
-						},
-					},
-				},
-			},
-		},
-		// 12. PromQL query with UTF-8 dot metric name
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "promql",
-						"spec": map[string]any{
-							"name":  "request_rate",
-							"query": "sum(rate({\"http.server.duration.count\"}[5m])) by (\"service.name\")",
-							"step":  60,
-						},
-					},
-				},
-			},
-		},
-		// 13. ClickHouse SQL — time_series
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name":  "span_rate",
-							"query": "SELECT toStartOfInterval(timestamp, INTERVAL 60 SECOND) AS ts, count() AS value FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= $start_datetime AND timestamp <= $end_datetime GROUP BY ts ORDER BY ts",
-						},
-					},
-				},
-			},
-		},
-		// 14. ClickHouse SQL — raw
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name":  "recent_errors",
-							"query": "SELECT timestamp, body FROM signoz_logs.distributed_logs_v2 WHERE timestamp >= $start_timestamp_nano AND timestamp <= $end_timestamp_nano AND severity_text = 'ERROR' ORDER BY timestamp DESC LIMIT 100",
-						},
-					},
-				},
-			},
-		},
-		// 15. ClickHouse SQL — scalar
-		map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name":  "total_spans",
-							"query": "SELECT count() AS value FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= $start_datetime AND timestamp <= $end_datetime",
-						},
-					},
-				},
-			},
-		},
-	)
-	return nil
-}
-
-var _ jsonschema.Preparer = &QueryRangeResponse{}
-
-// PrepareJSONSchema adds description to the QueryRangeResponse schema.
-func (q *QueryRangeResponse) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	schema.WithDescription("Response from the v5 query range endpoint. The data.results array contains typed results depending on the requestType: TimeSeriesData for time_series, ScalarData for scalar, or RawData for raw requests.")
-	return nil
-}
-
-var _ jsonschema.Preparer = &CompositeQuery{}
-
-// PrepareJSONSchema adds description to the CompositeQuery schema.
-func (c *CompositeQuery) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	schema.WithDescription("Composite query containing one or more query envelopes. Each query envelope specifies its type and corresponding spec.")
-	return nil
-}
-
-var _ jsonschema.Preparer = &ExecStats{}
-
-// PrepareJSONSchema adds description to the ExecStats schema.
-func (e *ExecStats) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	schema.WithDescription("Execution statistics for the query, including rows scanned, bytes scanned, and duration.")
-	return nil
-}

pkg/types/telemetrytypes/openapi.go

@@ -1,48 +0,0 @@
-package telemetrytypes
-
-// Enum returns the acceptable values for Signal.
-func (Signal) Enum() []any {
-	return []any{
-		SignalTraces,
-		SignalLogs,
-		SignalMetrics,
-	}
-}
-
-// Enum returns the acceptable values for FieldContext.
-func (FieldContext) Enum() []any {
-	return []any{
-		FieldContextMetric,
-		FieldContextLog,
-		FieldContextSpan,
-		// FieldContextTrace,
-		FieldContextResource,
-		// FieldContextScope,
-		FieldContextAttribute,
-		// FieldContextEvent,
-		FieldContextBody,
-	}
-}
-
-// Enum returns the acceptable values for Source.
-func (Source) Enum() []any {
-	return []any{
-		SourceMeter,
-	}
-}
-
-// Enum returns the acceptable values for FieldDataType.
-func (FieldDataType) Enum() []any {
-	return []any{
-		FieldDataTypeString,
-		FieldDataTypeBool,
-		FieldDataTypeFloat64,
-		FieldDataTypeInt64,
-		FieldDataTypeNumber,
-		// FieldDataTypeArrayString,
-		// FieldDataTypeArrayFloat64,
-		// FieldDataTypeArrayBool,
-		// FieldDataTypeArrayInt64,
-		// FieldDataTypeArrayNumber,
-	}
-}