feat: changed query param name

"

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     container_name: schema-migrator-async
     command:
       - async

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.93.0
+    image: signoz/signoz:v0.92.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -207,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.2
+    image: signoz/signoz-otel-collector:v0.129.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -115,7 +115,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.93.0
+    image: signoz/signoz:v0.92.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.2
+    image: signoz/signoz-otel-collector:v0.129.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.93.0}
+    image: signoz/signoz:${VERSION:-v0.92.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -211,7 +211,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +237,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +248,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.93.0}
+    image: signoz/signoz:${VERSION:-v0.92.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -143,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
     container_name: schema-migrator-async
     command:
       - async

ee/query-service/app/server.go

@@ -257,7 +257,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
-	r.Use(middleware.NewComment().Wrap)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)

frontend/jest.config.ts

@@ -16,7 +16,6 @@ const config: Config.InitialOptions = {
 		'ts-jest': {
 			useESM: true,
 			isolatedModules: true,
-			tsconfig: '<rootDir>/tsconfig.jest.json',
 		},
 	},
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
@@ -26,7 +25,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -43,15 +43,11 @@
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
 		"@sentry/webpack-plugin": "2.22.6",
-		"@signozhq/badge": "0.0.2",
-		"@signozhq/calendar": "0.0.0",
 		"@signozhq/design-tokens": "1.1.4",
-		"@signozhq/input": "0.0.2",
-		"@signozhq/popover": "0.0.0",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
-		"@uiw/codemirror-theme-copilot": "4.23.11",
 		"@uiw/codemirror-theme-github": "4.24.1",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
 		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
@@ -96,7 +92,6 @@
 		"i18next-http-backend": "^1.3.2",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
-		"kbar": "0.1.0-beta.48",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
@@ -133,7 +128,6 @@
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"rehype-raw": "7.0.0",
-		"rrweb-player": "1.0.0-alpha.4",
 		"stream": "^0.0.2",
 		"style-loader": "1.3.0",
 		"styled-components": "^5.3.11",
@@ -174,7 +168,6 @@
 		"@commitlint/config-conventional": "^16.2.4",
 		"@faker-js/faker": "9.3.0",
 		"@jest/globals": "^27.5.1",
-		"@rrweb/types": "2.0.0-alpha.18",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",

frontend/src/AppRoutes/index.tsx

@@ -4,7 +4,6 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
-import KBarCommandPalette from 'components/KBarCommandPalette/KBarCommandPalette';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
@@ -26,7 +25,6 @@ import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
-import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -370,42 +368,39 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
-						<KBarCommandPaletteProvider>
-							<UserpilotRouteTracker />
-							<KBarCommandPalette />
-							<NotificationProvider>
-								<ErrorModalProvider>
-									<PrivateRoute>
-										<ResourceProvider>
-											<QueryBuilderProvider>
-												<DashboardProvider>
-													<KeyboardHotkeysProvider>
-														<AlertRuleProvider>
-															<AppLayout>
-																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																	<Switch>
-																		{routes.map(({ path, component, exact }) => (
-																			<Route
-																				key={`${path}`}
-																				exact={exact}
-																				path={path}
-																				component={component}
-																			/>
-																		))}
-																		<Route exact path="/" component={Home} />
-																		<Route path="*" component={NotFound} />
-																	</Switch>
-																</Suspense>
-															</AppLayout>
-														</AlertRuleProvider>
-													</KeyboardHotkeysProvider>
-												</DashboardProvider>
-											</QueryBuilderProvider>
-										</ResourceProvider>
-									</PrivateRoute>
-								</ErrorModalProvider>
-							</NotificationProvider>
-						</KBarCommandPaletteProvider>
+						<UserpilotRouteTracker />
+						<NotificationProvider>
+							<ErrorModalProvider>
+								<PrivateRoute>
+									<ResourceProvider>
+										<QueryBuilderProvider>
+											<DashboardProvider>
+												<KeyboardHotkeysProvider>
+													<AlertRuleProvider>
+														<AppLayout>
+															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																<Switch>
+																	{routes.map(({ path, component, exact }) => (
+																		<Route
+																			key={`${path}`}
+																			exact={exact}
+																			path={path}
+																			component={component}
+																		/>
+																	))}
+																	<Route exact path="/" component={Home} />
+																	<Route path="*" component={NotFound} />
+																</Switch>
+															</Suspense>
+														</AppLayout>
+													</AlertRuleProvider>
+												</KeyboardHotkeysProvider>
+											</DashboardProvider>
+										</QueryBuilderProvider>
+									</ResourceProvider>
+								</PrivateRoute>
+							</ErrorModalProvider>
+						</NotificationProvider>
 					</CompatRouter>
 				</Router>
 			</ConfigProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -295,15 +295,3 @@ export const MetricsExplorer = Loadable(
 export const ApiMonitoring = Loadable(
 	() => import(/* webpackChunkName: "ApiMonitoring" */ 'pages/ApiMonitoring'),
 );
-
-export const SessionRecordings = Loadable(
-	() =>
-		import(/* webpackChunkName: "SessionRecordings" */ 'pages/SessionRecording'),
-);
-
-export const SessionRecordingsDetail = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "SessionRecordingsDetail" */ 'pages/SessionRecording/SessionDetail'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -54,8 +54,6 @@ import {
 	WorkspaceAccessRestricted,
 	WorkspaceBlocked,
 	WorkspaceSuspended,
-	SessionRecordings,
-	SessionRecordingsDetail,
 } from './pageComponents';
 
 const routes: AppRoutes[] = [
@@ -452,20 +450,6 @@ const routes: AppRoutes[] = [
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.SESSION_RECORDINGS,
-		exact: true,
-		component: SessionRecordings,
-		key: 'SESSION_RECORDINGS',
-		isPrivate: true,
-	},
-	{
-		path: ROUTES.SESSION_RECORDINGS_DETAIL,
-		exact: true,
-		component: SessionRecordingsDetail,
-		key: 'SESSION_RECORDINGS_DETAIL',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -0,0 +1,34 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
+
+/**
+ * Get field keys for a given signal type
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Optional search text
+ */
+export const getFieldKeys = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	const response = await ApiBaseInstance.get('/fields/keys', { params });
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -0,0 +1,63 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
+
+/**
+ * Get field values for a given signal type and field name
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Name of the attribute for which values are being fetched
+ * @param value Optional search text
+ */
+export const getFieldValues = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+	value?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	if (value) {
+		params.value = value;
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	const response = await ApiBaseInstance.get('/fields/values', { params });
+
+	// Normalize values from different types (stringValues, boolValues, etc.)
+	if (response.data?.data?.values) {
+		const allValues: string[] = [];
+		Object.values(response.data.data.values).forEach((valueArray: any) => {
+			if (Array.isArray(valueArray)) {
+				allValues.push(...valueArray.map(String));
+			}
+		});
+
+		// Add a normalized values array to the response
+		response.data.data.normalizedValues = allValues;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldValues;

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -1,284 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { SuccessResponse } from 'types/api';
-import {
-	MetricRangePayloadV5,
-	QueryBuilderFormula,
-	QueryRangeRequestV5,
-	QueryRangeResponseV5,
-	RequestType,
-	ScalarData,
-	TelemetryFieldKey,
-	TimeSeries,
-	TimeSeriesData,
-	TimeSeriesValue,
-} from 'types/api/v5/queryRange';
-
-import { convertV5ResponseToLegacy } from './convertV5Response';
-
-describe('convertV5ResponseToLegacy', () => {
-	function makeBaseSuccess<T>(
-		payload: T,
-		params: QueryRangeRequestV5,
-	): SuccessResponse<T, QueryRangeRequestV5> {
-		return {
-			statusCode: 200,
-			message: 'success',
-			payload,
-			error: null,
-			params,
-		};
-	}
-
-	function makeBaseParams(
-		requestType: RequestType,
-		queries: QueryRangeRequestV5['compositeQuery']['queries'],
-	): QueryRangeRequestV5 {
-		return {
-			schemaVersion: 'v1',
-			start: 1,
-			end: 2,
-			requestType,
-			compositeQuery: { queries },
-			variables: {},
-			formatOptions: { formatTableResultForUI: false, fillGaps: false },
-		};
-	}
-
-	it('converts time_series response into legacy series structure', () => {
-		const timeSeries: TimeSeriesData = {
-			queryName: 'A',
-			aggregations: [
-				{
-					index: 0,
-					alias: '__result_0',
-					meta: {},
-					series: [
-						({
-							labels: [
-								{
-									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
-									value: 'adservice',
-								},
-							],
-							values: [
-								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
-								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
-							],
-						} as unknown) as TimeSeries,
-					],
-				},
-			],
-		};
-
-		const v5Data: QueryRangeResponseV5 = {
-			type: 'time_series',
-			data: { results: [timeSeries] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
-		};
-
-		const params = makeBaseParams('time_series', [
-			{
-				type: 'builder_query',
-				spec: {
-					name: 'A',
-					signal: 'traces',
-					stepInterval: 60,
-					disabled: false,
-					aggregations: [{ expression: 'count()' }],
-				},
-			},
-		]);
-
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
-
-		const legendMap = { A: '{{service.name}}' };
-		const result = convertV5ResponseToLegacy(input, legendMap, false);
-
-		expect(result.payload.data.resultType).toBe('time_series');
-		expect(result.payload.data.result).toHaveLength(1);
-		const q = result.payload.data.result[0];
-		expect(q.queryName).toBe('A');
-		expect(q.legend).toBe('{{service.name}}');
-		expect(q.series?.[0]).toEqual(
-			expect.objectContaining({
-				labels: { 'service.name': 'adservice' },
-				values: [
-					{ timestamp: 1000, value: '10' },
-					{ timestamp: 2000, value: '12' },
-				],
-				metaData: expect.objectContaining({
-					alias: '__result_0',
-					index: 0,
-					queryName: 'A',
-				}),
-			}),
-		);
-	});
-
-	it('converts scalar to legacy table (formatForWeb=false) with names/ids resolved from aggregations', () => {
-		const scalar: ScalarData = {
-			columns: [
-				// group column
-				({
-					name: 'service.name',
-					queryName: 'A',
-					aggregationIndex: 0,
-					columnType: 'group',
-				} as unknown) as ScalarData['columns'][number],
-				// aggregation 0
-				({
-					name: '__result_0',
-					queryName: 'A',
-					aggregationIndex: 0,
-					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
-				// aggregation 1
-				({
-					name: '__result_1',
-					queryName: 'A',
-					aggregationIndex: 1,
-					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
-				// formula F1
-				({
-					name: '__result',
-					queryName: 'F1',
-					aggregationIndex: 0,
-					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
-			],
-			data: [['adservice', 606, 1.452, 151.5]],
-		};
-
-		const v5Data: QueryRangeResponseV5 = {
-			type: 'scalar',
-			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
-		};
-
-		const params = makeBaseParams('scalar', [
-			{
-				type: 'builder_query',
-				spec: {
-					name: 'A',
-					signal: 'traces',
-					stepInterval: 60,
-					disabled: false,
-					aggregations: [
-						{ expression: 'count()' },
-						{ expression: 'avg(app.ads.count)', alias: 'avg' },
-					],
-				},
-			},
-			{
-				type: 'builder_formula',
-				spec: ({
-					name: 'F1',
-					expression: 'A * 0.25',
-				} as unknown) as QueryBuilderFormula,
-			},
-		]);
-
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
-		const legendMap = { A: '{{service.name}}', F1: '' };
-		const result = convertV5ResponseToLegacy(input, legendMap, false);
-
-		expect(result.payload.data.resultType).toBe('scalar');
-		const [tableEntry] = result.payload.data.result;
-		expect(tableEntry.table?.columns).toEqual([
-			{
-				name: 'service.name',
-				queryName: 'A',
-				isValueColumn: false,
-				id: 'service.name',
-			},
-			{ name: 'count()', queryName: 'A', isValueColumn: true, id: 'A.count()' },
-			{
-				name: 'avg',
-				queryName: 'A',
-				isValueColumn: true,
-				id: 'A.avg(app.ads.count)',
-			},
-			{ name: 'F1', queryName: 'F1', isValueColumn: true, id: 'F1' },
-		]);
-		expect(tableEntry.table?.rows?.[0]).toEqual({
-			data: {
-				'service.name': 'adservice',
-				'A.count()': 606,
-				'A.avg(app.ads.count)': 1.452,
-				F1: 151.5,
-			},
-		});
-	});
-
-	it('converts scalar with formatForWeb=true to UI-friendly table', () => {
-		const scalar: ScalarData = {
-			columns: [
-				{
-					name: 'service.name',
-					queryName: 'A',
-					aggregationIndex: 0,
-					columnType: 'group',
-				} as any,
-				{
-					name: '__result_0',
-					queryName: 'A',
-					aggregationIndex: 0,
-					columnType: 'aggregation',
-				} as any,
-			],
-			data: [['adservice', 580]],
-		};
-
-		const v5Data: QueryRangeResponseV5 = {
-			type: 'scalar',
-			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
-		};
-
-		const params = makeBaseParams('scalar', [
-			{
-				type: 'builder_query',
-				spec: {
-					name: 'A',
-					signal: 'traces',
-					stepInterval: 60,
-					disabled: false,
-					aggregations: [{ expression: 'count()' }],
-				},
-			},
-		]);
-
-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
-		const legendMap = { A: '{{service.name}}' };
-		const result = convertV5ResponseToLegacy(input, legendMap, true);
-
-		expect(result.payload.data.resultType).toBe('scalar');
-		const [tableEntry] = result.payload.data.result;
-		expect(tableEntry.table?.columns).toEqual([
-			{
-				name: 'service.name',
-				queryName: 'A',
-				isValueColumn: false,
-				id: 'service.name',
-			},
-			// Single aggregation: name resolves to legend, id resolves to queryName
-			{ name: '{{service.name}}', queryName: 'A', isValueColumn: true, id: 'A' },
-		]);
-		expect(tableEntry.table?.rows?.[0]).toEqual({
-			data: {
-				'service.name': 'adservice',
-				A: 580,
-			},
-		});
-	});
-});

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -1,633 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string, simple-import-sort/imports, @typescript-eslint/indent, no-mixed-spaces-and-tabs */
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	IBuilderFormula,
-	IBuilderQuery,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import {
-	ClickHouseQuery,
-	LogAggregation,
-	LogBuilderQuery,
-	MetricBuilderQuery,
-	PromQuery,
-	QueryBuilderFormula as V5QueryBuilderFormula,
-	QueryEnvelope,
-	QueryRangePayloadV5,
-} from 'types/api/v5/queryRange';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
-
-jest.mock('lib/getStartEndRangeTime', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({ start: '100', end: '200' })),
-}));
-
-describe('prepareQueryRangePayloadV5', () => {
-	const start = 1_710_000_000; // seconds
-	const end = 1_710_000_600; // seconds
-
-	const baseBuilderQuery = (
-		overrides?: Partial<IBuilderQuery>,
-	): IBuilderQuery => ({
-		queryName: 'A',
-		dataSource: DataSource.METRICS,
-		aggregations: [
-			{
-				metricName: 'cpu_usage',
-				temporality: '',
-				timeAggregation: 'sum',
-				spaceAggregation: 'avg',
-				reduceTo: 'avg',
-			},
-		],
-		timeAggregation: 'sum',
-		spaceAggregation: 'avg',
-		temporality: '',
-		functions: [
-			{
-				name: 'timeShift',
-				args: [{ value: '5m' }],
-			},
-		],
-		filter: { expression: '' },
-		filters: { items: [], op: 'AND' },
-		groupBy: [],
-		expression: 'A',
-		disabled: false,
-		having: [],
-		limit: null,
-		stepInterval: 600,
-		orderBy: [],
-		reduceTo: 'avg',
-		legend: 'Legend A',
-		...overrides,
-	});
-
-	const baseFormula = (
-		overrides?: Partial<IBuilderFormula>,
-	): IBuilderFormula => ({
-		expression: 'A + 1',
-		disabled: false,
-		queryName: 'F1',
-		legend: 'Formula Legend',
-		limit: undefined,
-		having: [],
-		stepInterval: undefined,
-		orderBy: [],
-		...overrides,
-	});
-
-	it('builds payload for builder queries with formulas and variables', () => {
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.QUERY_BUILDER,
-				id: 'q1',
-				unit: undefined,
-				promql: [],
-				clickhouse_sql: [],
-				builder: {
-					queryData: [baseBuilderQuery()],
-					queryFormulas: [baseFormula()],
-				},
-			},
-			graphType: PANEL_TYPES.TIME_SERIES,
-			selectedTime: 'GLOBAL_TIME',
-			start,
-			end,
-			variables: { svc: 'api', count: 5, flag: true },
-			fillGaps: true,
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { A: 'Legend A', F1: 'Formula Legend' },
-				queryPayload: expect.objectContaining({
-					compositeQuery: expect.objectContaining({
-						queries: expect.arrayContaining([
-							expect.objectContaining({
-								type: 'builder_query',
-								spec: expect.objectContaining({
-									name: 'A',
-									signal: 'metrics',
-									stepInterval: 600,
-									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
-									aggregations: [
-										expect.objectContaining({
-											metricName: 'cpu_usage',
-											timeAggregation: 'sum',
-											spaceAggregation: 'avg',
-											reduceTo: undefined,
-										}),
-									],
-								}),
-							}),
-							expect.objectContaining({
-								type: 'builder_formula',
-								spec: expect.objectContaining({
-									name: 'F1',
-									expression: 'A + 1',
-									legend: 'Formula Legend',
-								}),
-							}),
-						]),
-					}),
-					requestType: 'time_series',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: false,
-						fillGaps: true,
-					}),
-					start: start * 1000,
-					end: end * 1000,
-					variables: expect.objectContaining({
-						svc: { value: 'api' },
-						count: { value: 5 },
-						flag: { value: true },
-					}),
-				}),
-			}),
-		);
-
-		// Legend map combines builder and formulas
-		expect(result.legendMap).toEqual({ A: 'Legend A', F1: 'Formula Legend' });
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-
-		expect(payload.schemaVersion).toBe('v1');
-		expect(payload.start).toBe(start * 1000);
-		expect(payload.end).toBe(end * 1000);
-		expect(payload.requestType).toBe('time_series');
-		expect(payload.formatOptions?.formatTableResultForUI).toBe(false);
-		expect(payload.formatOptions?.fillGaps).toBe(true);
-
-		// Variables mapped as { key: { value } }
-		expect(payload.variables).toEqual({
-			svc: { value: 'api' },
-			count: { value: 5 },
-			flag: { value: true },
-		});
-
-		// Queries include one builder_query and one builder_formula
-		expect(payload.compositeQuery.queries).toHaveLength(2);
-
-		const builderQuery = payload.compositeQuery.queries.find(
-			(q) => q.type === 'builder_query',
-		) as QueryEnvelope;
-		const builderSpec = builderQuery.spec as MetricBuilderQuery;
-		expect(builderSpec.name).toBe('A');
-		expect(builderSpec.signal).toBe('metrics');
-		expect(builderSpec.aggregations?.[0]).toMatchObject({
-			metricName: 'cpu_usage',
-			timeAggregation: 'sum',
-			spaceAggregation: 'avg',
-		});
-		// reduceTo should not be present for non-scalar panels
-		expect(builderSpec.aggregations?.[0].reduceTo).toBeUndefined();
-		// functions should be preserved/normalized
-		expect(builderSpec.functions?.[0]?.name).toBe('timeShift');
-
-		const formulaQuery = payload.compositeQuery.queries.find(
-			(q) => q.type === 'builder_formula',
-		) as QueryEnvelope;
-		const formulaSpec = formulaQuery.spec as V5QueryBuilderFormula;
-		expect(formulaSpec.name).toBe('F1');
-		expect(formulaSpec.expression).toBe('A + 1');
-		expect(formulaSpec.legend).toBe('Formula Legend');
-	});
-
-	it('builds payload for PromQL queries and respects originalGraphType for formatting', () => {
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.PROM,
-				id: 'q2',
-				unit: undefined,
-				promql: [
-					{
-						name: 'A',
-						query: 'up',
-						disabled: false,
-						legend: 'LP',
-					},
-				],
-				clickhouse_sql: [],
-				builder: { queryData: [], queryFormulas: [] },
-			},
-			graphType: PANEL_TYPES.TIME_SERIES,
-			originalGraphType: PANEL_TYPES.TABLE,
-			selectedTime: 'GLOBAL_TIME',
-			start,
-			end,
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { A: 'LP' },
-				queryPayload: expect.objectContaining({
-					compositeQuery: expect.objectContaining({
-						queries: [
-							{
-								type: 'promql',
-								spec: expect.objectContaining({
-									name: 'A',
-									query: 'up',
-									legend: 'LP',
-									stats: false,
-								}),
-							},
-						],
-					}),
-					requestType: 'time_series',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: true,
-						fillGaps: false,
-					}),
-					start: start * 1000,
-					end: end * 1000,
-					variables: {},
-				}),
-			}),
-		);
-
-		expect(result.legendMap).toEqual({ A: 'LP' });
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-		expect(payload.requestType).toBe('time_series');
-		expect(payload.formatOptions?.formatTableResultForUI).toBe(true);
-		expect(payload.compositeQuery.queries).toHaveLength(1);
-
-		const prom = payload.compositeQuery.queries[0];
-		expect(prom.type).toBe('promql');
-		const promSpec = prom.spec as PromQuery;
-		expect(promSpec.name).toBe('A');
-		expect(promSpec.query).toBe('up');
-		expect(promSpec.legend).toBe('LP');
-		expect(promSpec.stats).toBe(false);
-	});
-
-	it('builds payload for ClickHouse queries and maps requestType from panel', () => {
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.CLICKHOUSE,
-				id: 'q3',
-				unit: undefined,
-				promql: [],
-				clickhouse_sql: [
-					{
-						name: 'Q',
-						query: 'SELECT 1',
-						disabled: false,
-						legend: 'LC',
-					},
-				],
-				builder: { queryData: [], queryFormulas: [] },
-			},
-			graphType: PANEL_TYPES.TABLE,
-			selectedTime: 'GLOBAL_TIME',
-			start,
-			end,
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { Q: 'LC' },
-				queryPayload: expect.objectContaining({
-					compositeQuery: expect.objectContaining({
-						queries: [
-							{
-								type: 'clickhouse_sql',
-								spec: expect.objectContaining({
-									name: 'Q',
-									query: 'SELECT 1',
-									legend: 'LC',
-								}),
-							},
-						],
-					}),
-					requestType: 'scalar',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: true,
-						fillGaps: false,
-					}),
-					start: start * 1000,
-					end: end * 1000,
-					variables: {},
-				}),
-			}),
-		);
-
-		expect(result.legendMap).toEqual({ Q: 'LC' });
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-		expect(payload.requestType).toBe('scalar');
-		expect(payload.compositeQuery.queries).toHaveLength(1);
-		const ch = payload.compositeQuery.queries[0];
-		expect(ch.type).toBe('clickhouse_sql');
-		const chSpec = ch.spec as ClickHouseQuery;
-		expect(chSpec.name).toBe('Q');
-		expect(chSpec.query).toBe('SELECT 1');
-		expect(chSpec.legend).toBe('LC');
-	});
-
-	it('uses getStartEndRangeTime when start/end are not provided', () => {
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.QUERY_BUILDER,
-				id: 'q4',
-				unit: undefined,
-				promql: [],
-				clickhouse_sql: [],
-				builder: { queryData: [], queryFormulas: [] },
-			},
-			graphType: PANEL_TYPES.TIME_SERIES,
-			selectedTime: 'GLOBAL_TIME',
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: {},
-				queryPayload: expect.objectContaining({
-					compositeQuery: { queries: [] },
-					requestType: 'time_series',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: false,
-						fillGaps: false,
-					}),
-					start: 100 * 1000,
-					end: 200 * 1000,
-					variables: {},
-				}),
-			}),
-		);
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-		expect(payload.start).toBe(100 * 1000);
-		expect(payload.end).toBe(200 * 1000);
-	});
-
-	it('includes reduceTo for metrics in scalar panels (TABLE)', () => {
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.QUERY_BUILDER,
-				id: 'q5',
-				unit: undefined,
-				promql: [],
-				clickhouse_sql: [],
-				builder: {
-					queryData: [baseBuilderQuery()],
-					queryFormulas: [],
-				},
-			},
-			graphType: PANEL_TYPES.TABLE,
-			selectedTime: 'GLOBAL_TIME',
-			start,
-			end,
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { A: 'Legend A' },
-				queryPayload: expect.objectContaining({
-					compositeQuery: expect.objectContaining({
-						queries: [
-							{
-								type: 'builder_query',
-								spec: expect.objectContaining({
-									name: 'A',
-									signal: 'metrics',
-									stepInterval: 600,
-									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
-									aggregations: [
-										expect.objectContaining({
-											metricName: 'cpu_usage',
-											timeAggregation: 'sum',
-											spaceAggregation: 'avg',
-											reduceTo: 'avg',
-											temporality: undefined,
-										}),
-									],
-								}),
-							},
-						],
-					}),
-					requestType: 'scalar',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: true,
-						fillGaps: false,
-					}),
-					start: start * 1000,
-					end: end * 1000,
-					variables: {},
-				}),
-			}),
-		);
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-		const builderQuery = payload.compositeQuery.queries.find(
-			(q) => q.type === 'builder_query',
-		) as QueryEnvelope;
-		const builderSpec = builderQuery.spec as MetricBuilderQuery;
-		expect(builderSpec.aggregations?.[0].reduceTo).toBe('avg');
-	});
-
-	it('omits aggregations for raw request type (LIST panel)', () => {
-		const logAgg: LogAggregation[] = [{ expression: 'count()' }];
-		const logsQuery = baseBuilderQuery({
-			dataSource: DataSource.LOGS,
-			aggregations: logAgg,
-		} as Partial<IBuilderQuery>);
-
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.QUERY_BUILDER,
-				id: 'q6',
-				unit: undefined,
-				promql: [],
-				clickhouse_sql: [],
-				builder: {
-					queryData: [logsQuery],
-					queryFormulas: [],
-				},
-			},
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			start,
-			end,
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { A: 'Legend A' },
-				queryPayload: expect.objectContaining({
-					compositeQuery: expect.objectContaining({
-						queries: [
-							{
-								type: 'builder_query',
-								spec: expect.objectContaining({
-									name: 'A',
-									signal: 'logs',
-									stepInterval: 600,
-									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
-									aggregations: undefined,
-								}),
-							},
-						],
-					}),
-					requestType: 'raw',
-					formatOptions: expect.objectContaining({
-						formatTableResultForUI: false,
-						fillGaps: false,
-					}),
-					start: start * 1000,
-					end: end * 1000,
-					variables: {},
-				}),
-			}),
-		);
-
-		const payload: QueryRangePayloadV5 = result.queryPayload;
-		expect(payload.requestType).toBe('raw');
-		const builderQuery = payload.compositeQuery.queries.find(
-			(q) => q.type === 'builder_query',
-		) as QueryEnvelope;
-		// For RAW request type, aggregations should be omitted
-		const logSpec = builderQuery.spec as LogBuilderQuery;
-		expect(logSpec.aggregations).toBeUndefined();
-	});
-
-	it('maps groupBy, order, having, aggregations and filter for logs builder query', () => {
-		const getStartEndRangeTime = jest.requireMock('lib/getStartEndRangeTime')
-			.default as jest.Mock;
-		getStartEndRangeTime.mockReturnValueOnce({
-			start: '1754623641',
-			end: '1754645241',
-		});
-
-		const props: GetQueryResultsProps = {
-			query: {
-				queryType: EQueryType.QUERY_BUILDER,
-				id: 'e643e387-1996-4449-97b6-9ef4498a0573',
-				unit: undefined,
-				promql: [{ name: 'A', query: '', legend: '', disabled: false }],
-				clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
-				builder: {
-					queryData: [
-						{
-							dataSource: DataSource.LOGS,
-							queryName: 'A',
-							aggregateOperator: 'count',
-							aggregateAttribute: {
-								key: '',
-								dataType: DataTypes.EMPTY,
-								type: '',
-							},
-							timeAggregation: 'rate',
-							spaceAggregation: 'sum',
-							filter: { expression: "service.name = 'adservice'" },
-							aggregations: [
-								{ expression: 'count() as cnt avg(code.lineno) ' } as LogAggregation,
-							],
-							functions: [],
-							filters: {
-								items: [
-									{
-										id: '14c790ec-54d1-42f0-a889-3b4f0fb79852',
-										op: '=',
-										key: { id: 'service.name', key: 'service.name', type: '' },
-										value: 'adservice',
-									},
-								],
-								op: 'AND',
-							},
-							expression: 'A',
-							disabled: false,
-							stepInterval: 80,
-							having: { expression: 'count() > 0' },
-							limit: 600,
-							orderBy: [{ columnName: 'service.name', order: 'desc' }],
-							groupBy: [
-								{
-									key: 'service.name',
-									type: '',
-								},
-							],
-							legend: '{{service.name}}',
-							reduceTo: 'avg',
-							offset: 0,
-							pageSize: 100,
-						},
-					],
-					queryFormulas: [],
-				},
-			},
-			graphType: PANEL_TYPES.TIME_SERIES,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: 'custom' as never,
-			variables: {},
-		};
-
-		const result = prepareQueryRangePayloadV5(props);
-
-		expect(result).toEqual(
-			expect.objectContaining({
-				legendMap: { A: '{{service.name}}' },
-				queryPayload: expect.objectContaining({
-					schemaVersion: 'v1',
-					start: 1754623641000,
-					end: 1754645241000,
-					requestType: 'time_series',
-					compositeQuery: expect.objectContaining({
-						queries: [
-							{
-								type: 'builder_query',
-								spec: expect.objectContaining({
-									name: 'A',
-									signal: 'logs',
-									stepInterval: 80,
-									disabled: false,
-									filter: { expression: "service.name = 'adservice'" },
-									groupBy: [
-										{
-											name: 'service.name',
-											fieldDataType: '',
-											fieldContext: '',
-										},
-									],
-									limit: 600,
-									order: [
-										{
-											key: { name: 'service.name' },
-											direction: 'desc',
-										},
-									],
-									legend: '{{service.name}}',
-									having: { expression: 'count() > 0' },
-									aggregations: [
-										{ expression: 'count()', alias: 'cnt' },
-										{ expression: 'avg(code.lineno)' },
-									],
-								}),
-							},
-						],
-					}),
-					formatOptions: { formatTableResultForUI: false, fillGaps: false },
-					variables: {},
-				}),
-			}),
-		);
-	});
-});

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -66,46 +66,9 @@ function getSignalType(dataSource: string): 'traces' | 'logs' | 'metrics' {
 	return 'metrics';
 }
 
-function isDeprecatedField(fieldName: string): boolean {
-	const deprecatedIntrinsicFields = [
-		'traceID',
-		'spanID',
-		'parentSpanID',
-		'spanKind',
-		'durationNano',
-		'statusCode',
-		'statusMessage',
-		'statusCodeString',
-	];
-
-	const deprecatedCalculatedFields = [
-		'responseStatusCode',
-		'externalHttpUrl',
-		'httpUrl',
-		'externalHttpMethod',
-		'httpMethod',
-		'httpHost',
-		'dbName',
-		'dbOperation',
-		'hasError',
-		'isRemote',
-		'serviceName',
-		'httpRoute',
-		'msgSystem',
-		'msgOperation',
-		'dbSystem',
-		'rpcSystem',
-		'rpcService',
-		'rpcMethod',
-		'peerService',
-	];
-
-	return (
-		deprecatedIntrinsicFields.includes(fieldName) ||
-		deprecatedCalculatedFields.includes(fieldName)
-	);
-}
-
+/**
+ * Creates base spec for builder queries
+ */
 function createBaseSpec(
 	queryData: IBuilderQuery,
 	requestType: RequestType,
@@ -117,7 +80,7 @@ function createBaseSpec(
 	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
 
 	return {
-		stepInterval: queryData?.stepInterval || null,
+		stepInterval: queryData?.stepInterval || undefined,
 		disabled: queryData.disabled,
 		filter: queryData?.filter?.expression ? queryData.filter : undefined,
 		groupBy:
@@ -125,8 +88,8 @@ function createBaseSpec(
 				? queryData.groupBy.map(
 						(item: any): GroupByKey => ({
 							name: item.key,
-							fieldDataType: item?.dataType || '',
-							fieldContext: item?.type || '',
+							fieldDataType: item?.dataType,
+							fieldContext: item?.type,
 							description: item?.description,
 							unit: item?.unit,
 							signal: item?.signal,
@@ -177,33 +140,19 @@ function createBaseSpec(
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
 			: nonEmptySelectColumns?.map(
-					(column: any): TelemetryFieldKey => {
-						const fieldName = column.name ?? column.key;
-						const isDeprecated = isDeprecatedField(fieldName);
-
-						const fieldObj: TelemetryFieldKey = {
-							name: fieldName,
-							fieldDataType:
-								column?.fieldDataType ?? (column?.dataType as FieldDataType),
-							signal: column?.signal ?? undefined,
-						};
-
-						// Only add fieldContext if the field is NOT deprecated
-						if (!isDeprecated && fieldName !== 'name') {
-							fieldObj.fieldContext =
-								column?.fieldContext ?? (column?.type as FieldContext);
-						}
-
-						return fieldObj;
-					},
+					(column: any): TelemetryFieldKey => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
 			  ),
 	};
 }
-
 // Utility to parse aggregation expressions with optional alias
 export function parseAggregations(
 	expression: string,
-	availableAlias?: string,
 ): { expression: string; alias?: string }[] {
 	const result: { expression: string; alias?: string }[] = [];
 	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
@@ -212,7 +161,7 @@ export function parseAggregations(
 	let match = regex.exec(expression);
 	while (match !== null) {
 		const expr = match[1];
-		let alias = match[2] || availableAlias; // Use provided alias or availableAlias if not matched
+		let alias = match[2];
 		if (alias) {
 			// Remove quotes if present
 			alias = alias.replace(/^['"]|['"]$/g, '');
@@ -263,14 +212,9 @@ export function createAggregation(
 	}
 
 	if (queryData.aggregations?.length > 0) {
-		return queryData.aggregations.flatMap(
-			(agg: { expression: string; alias?: string }) => {
-				const parsedAggregations = parseAggregations(agg.expression, agg?.alias);
-				return isEmpty(parsedAggregations)
-					? [{ expression: 'count()' }]
-					: parsedAggregations;
-			},
-		);
+		return isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
+			? [{ expression: 'count()' }]
+			: parseAggregations(queryData.aggregations?.[0].expression);
 	}
 
 	return [{ expression: 'count()' }];

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

@@ -1,16 +1,14 @@
 import { render, screen } from '@testing-library/react';
 
-import getLocal from '../../../api/browser/localstorage/get';
 import AppLoading from '../AppLoading';
 
-jest.mock('../../../api/browser/localstorage/get', () => ({
+// Mock the localStorage API
+const mockGet = jest.fn();
+jest.mock('api/browser/localstorage/get', () => ({
 	__esModule: true,
-	default: jest.fn(),
+	default: mockGet,
 }));
 
-// Access the mocked function
-const mockGet = (getLocal as unknown) as jest.Mock;
-
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
 	const TAGLINE_TEXT =

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -32,6 +32,8 @@ export const celeryAllStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
+						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -48,6 +50,8 @@ export const celeryAllStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.state--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.state',
 							type: 'tag',
 						},
@@ -84,6 +88,7 @@ export const celeryRetryStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -98,6 +103,8 @@ export const celeryRetryStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -112,6 +119,8 @@ export const celeryRetryStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -144,6 +153,8 @@ export const celeryFailedStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
+						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -158,6 +169,8 @@ export const celeryFailedStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -172,6 +185,8 @@ export const celeryFailedStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -204,6 +219,8 @@ export const celerySuccessStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
+						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -218,6 +235,8 @@ export const celerySuccessStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -232,6 +251,8 @@ export const celerySuccessStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -263,6 +284,7 @@ export const celeryTasksByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -279,6 +301,8 @@ export const celeryTasksByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -314,6 +338,8 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
+						isColumn: true,
+						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -327,6 +353,8 @@ export const celeryErrorByWorkerWidgetData = (
 								key: {
 									dataType: DataTypes.bool,
 									id: 'has_error--bool----true',
+									isColumn: true,
+									isJSON: false,
 									key: 'has_error',
 									type: '',
 								},
@@ -345,6 +373,8 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -360,6 +390,8 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
+						isColumn: true,
+						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -379,6 +411,8 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -411,6 +445,8 @@ export const celeryLatencyByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
+						isColumn: true,
+						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -427,6 +463,8 @@ export const celeryLatencyByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -460,6 +498,8 @@ export const celeryActiveTasksWidgetData = (
 						dataType: DataTypes.Float64,
 						id:
 							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
+						isColumn: true,
+						isJSON: false,
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},
@@ -476,6 +516,8 @@ export const celeryActiveTasksWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'worker--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'worker',
 							type: 'tag',
 						},
@@ -509,6 +551,8 @@ export const celeryTaskLatencyWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
+						isColumn: true,
+						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -525,6 +569,8 @@ export const celeryTaskLatencyWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -560,6 +606,8 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -576,6 +624,8 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -610,6 +660,8 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -624,6 +676,8 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -638,6 +692,8 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -673,6 +729,8 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -687,6 +745,8 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -701,6 +761,8 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -734,6 +796,8 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -748,6 +812,8 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -762,6 +828,8 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -801,6 +869,8 @@ export const celeryTimeSeriesTablesWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
+						isColumn: true,
+						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -815,6 +885,8 @@ export const celeryTimeSeriesTablesWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: `${entity}--string--tag--false`,
+									isColumn: false,
+									isJSON: false,
 									key: `${entity}`,
 									type: 'tag',
 								},
@@ -829,6 +901,8 @@ export const celeryTimeSeriesTablesWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
+							isColumn: false,
+							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -859,6 +933,8 @@ export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -896,6 +972,8 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -910,6 +988,8 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -945,6 +1025,8 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
+					isColumn: true,
+					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -959,6 +1041,8 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -994,6 +1078,7 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
+					isColumn: true,
 					key: 'span_id',
 					type: '',
 				},
@@ -1008,6 +1093,8 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -39,6 +39,8 @@ export function getFiltersFromQueryParams(
 			key,
 			dataType: DataTypes.String,
 			type: 'tag',
+			isColumn: false,
+			isJSON: false,
 			id: `${key}--string--tag--false`,
 		},
 		op: '=',
@@ -98,7 +100,8 @@ export const createFiltersFromData = (
 		key: string;
 		dataType: DataTypes;
 		type: string;
-
+		isColumn: boolean;
+		isJSON: boolean;
 		id: string;
 	};
 	op: string;
@@ -116,6 +119,8 @@ export const createFiltersFromData = (
 					key,
 					dataType: DataTypes.String,
 					type: 'tag',
+					isColumn: false,
+					isJSON: false,
 					id: `${key}--string--tag--false`,
 				},
 				op: '=',

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -241,6 +241,8 @@ function ClientSideQBSearch(
 							key: 'body',
 							dataType: DataTypes.String,
 							type: '',
+							isColumn: true,
+							isJSON: false,
 							id: 'body--string----true',
 						},
 						op: OPERATORS.CONTAINS,

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,16 +1,6 @@
 .custom-time-picker {
 	display: flex;
 	flex-direction: column;
-
-	.timeSelection-input {
-		&:hover {
-			border-color: #1d212d !important;
-		}
-	}
-
-	.time-input-suffix {
-		display: flex;
-	}
 }
 
 .time-options-container {
@@ -145,7 +135,6 @@
 		align-items: center;
 		color: var(--bg-vanilla-400);
 		gap: 6px;
-
 		.timezone {
 			display: flex;
 			align-items: center;
@@ -174,27 +163,6 @@
 	cursor: pointer;
 }
 
-.time-input-suffix-icon-badge {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0 4px;
-	border-radius: 2px;
-	background: rgba(171, 189, 255, 0.04);
-	color: var(--bg-vanilla-100);
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	letter-spacing: -0.06px;
-	cursor: pointer;
-	height: 20px;
-	width: 20px;
-
-	&:hover {
-		background: rgba(171, 189, 255, 0.08);
-	}
-}
-
 .lightMode {
 	.date-time-popover__footer {
 		border-color: var(--bg-vanilla-400);
@@ -212,26 +180,8 @@
 			}
 		}
 	}
-
-	.custom-time-picker {
-		.timeSelection-input {
-			&:hover {
-				border-color: var(--bg-vanilla-300) !important;
-			}
-		}
-	}
-
 	.timezone-badge {
 		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
-
-	.time-input-suffix-icon-badge {
-		color: var(--bg-ink-100);
-		background: rgb(179 179 179 / 15%);
-
-		&:hover {
-			background: rgb(179 179 179 / 20%);
-		}
-	}
 }

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -5,12 +5,13 @@ import './CustomTimePicker.styles.scss';
 import { Input, Popover, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
+	CustomTimeType,
 	FixedDurationSuggestionOptions,
 	Options,
 	RelativeDurationSuggestionOptions,
+	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
 import { isValidTimeFormat } from 'lib/getMinMax';
@@ -27,10 +28,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
@@ -60,6 +58,10 @@ interface CustomTimePickerProps {
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
 	handleGoLive?: () => void;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
 }
 
 function CustomTimePicker({
@@ -77,16 +79,13 @@ function CustomTimePicker({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	handleGoLive,
+	onTimeChange,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
 		setSelectedTimePlaceholderValue,
 	] = useState('Select / Enter Time Range');
 
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
 	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
@@ -257,11 +256,6 @@ function CustomTimePicker({
 	};
 
 	const handleSelect = (label: string, value: string): void => {
-		if (label === 'Custom') {
-			setCustomDTPickerVisible?.(true);
-			return;
-		}
-
 		onSelect(value);
 		setSelectedTimePlaceholderValue(label);
 		setInputStatus('');
@@ -324,105 +318,84 @@ function CustomTimePicker({
 		);
 	};
 
-	const getTooltipTitle = (): string => {
-		if (selectedTime === 'custom' && inputValue === '' && !open) {
-			return `${dayjs(minTime / 1000_000)
-				.tz(timezone.value)
-				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(
-				maxTime / 1000_000,
-			)
-				.tz(timezone.value)
-				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`;
-		}
-
-		return '';
-	};
-
 	return (
 		<div className="custom-time-picker">
-			<Tooltip title={getTooltipTitle()} placement="top">
-				<Popover
-					className={cx(
-						'timeSelection-input-container',
-						selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
-					)}
-					placement="bottomRight"
-					getPopupContainer={popupContainer}
-					rootClassName="date-time-root"
-					content={
-						newPopover ? (
-							<CustomTimePickerPopoverContent
-								setIsOpen={setOpen}
-								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
-								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
-								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
-								onSelectHandler={handleSelect}
-								handleGoLive={defaultTo(handleGoLive, noop)}
-								options={items}
-								selectedTime={selectedTime}
-								activeView={activeView}
-								setActiveView={setActiveView}
-								setIsOpenedFromFooter={setIsOpenedFromFooter}
-								isOpenedFromFooter={isOpenedFromFooter}
-							/>
+			<Popover
+				className={cx(
+					'timeSelection-input-container',
+					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+				)}
+				placement="bottomRight"
+				getPopupContainer={popupContainer}
+				rootClassName="date-time-root"
+				content={
+					newPopover ? (
+						<CustomTimePickerPopoverContent
+							setIsOpen={setOpen}
+							customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
+							setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
+							onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
+							onSelectHandler={handleSelect}
+							handleGoLive={defaultTo(handleGoLive, noop)}
+							options={items}
+							selectedTime={selectedTime}
+							activeView={activeView}
+							setActiveView={setActiveView}
+							setIsOpenedFromFooter={setIsOpenedFromFooter}
+							isOpenedFromFooter={isOpenedFromFooter}
+							onTimeChange={onTimeChange}
+						/>
+					) : (
+						content
+					)
+				}
+				arrow={false}
+				trigger="click"
+				open={open}
+				onOpenChange={handleOpenChange}
+				style={{
+					padding: 0,
+				}}
+			>
+				<Input
+					className="timeSelection-input"
+					type="text"
+					status={inputValue && inputStatus === 'error' ? 'error' : ''}
+					placeholder={
+						isInputFocused
+							? 'Time Format (1m or 2h or 3d or 4w)'
+							: selectedTimePlaceholderValue
+					}
+					value={inputValue}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					onChange={handleInputChange}
+					data-1p-ignore
+					prefix={
+						inputValue && inputStatus === 'success' ? (
+							<CheckCircle size={14} color="#51E7A8" />
 						) : (
-							content
+							<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+								<Clock size={14} />
+							</Tooltip>
 						)
 					}
-					arrow={false}
-					trigger="click"
-					open={open}
-					onOpenChange={handleOpenChange}
-					style={{
-						padding: 0,
-					}}
-				>
-					<Input
-						className="timeSelection-input"
-						type="text"
-						status={inputValue && inputStatus === 'error' ? 'error' : ''}
-						placeholder={
-							isInputFocused
-								? 'Time Format (1m or 2h or 3d or 4w)'
-								: selectedTimePlaceholderValue
-						}
-						value={inputValue}
-						onFocus={handleFocus}
-						onClick={handleFocus}
-						onBlur={handleBlur}
-						onChange={handleInputChange}
-						data-1p-ignore
-						prefix={
-							<div className="time-input-prefix">
-								{inputValue && inputStatus === 'success' ? (
-									<CheckCircle size={14} color="#51E7A8" />
-								) : (
-									<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
-										<Clock size={14} className="cursor-pointer" />
-									</Tooltip>
-								)}
-							</div>
-						}
-						suffix={
-							<div className="time-input-suffix">
-								{!!isTimezoneOverridden && activeTimezoneOffset && (
-									<div className="timezone-badge" onClick={handleTimezoneHintClick}>
-										<span>{activeTimezoneOffset}</span>
-									</div>
-								)}
-								<ChevronDown
-									size={14}
-									className="cursor-pointer time-input-suffix-icon-badge"
-									onClick={(e): void => {
-										e.stopPropagation();
-										handleViewChange('datetime');
-									}}
-								/>
-							</div>
-						}
-					/>
-				</Popover>
-			</Tooltip>
+					suffix={
+						<>
+							{!!isTimezoneOverridden && activeTimezoneOffset && (
+								<div className="timezone-badge" onClick={handleTimezoneHintClick}>
+									<span>{activeTimezoneOffset}</span>
+								</div>
+							)}
+							<ChevronDown
+								size={14}
+								onClick={(): void => handleViewChange('datetime')}
+							/>
+						</>
+					}
+				/>
+			</Popover>
+
 			{inputStatus === 'error' && inputErrorMessage && (
 				<Typography.Title level={5} className="valid-format-error">
 					{inputErrorMessage}
@@ -441,4 +414,5 @@ CustomTimePicker.defaultProps = {
 	onCustomDateHandler: noop,
 	handleGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
+	onTimeChange: undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -4,22 +4,21 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
-import DatePickerV2 from 'components/DatePickerV2/DatePickerV2';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
+	CustomTimeType,
 	LexicalContext,
 	Option,
 	RelativeDurationSuggestionOptions,
+	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs from 'dayjs';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 
+import RangePickerModal from './RangePickerModal';
 import TimezonePicker from './TimezonePicker';
 
 interface CustomTimePickerPopoverContentProps {
@@ -38,14 +37,10 @@ interface CustomTimePickerPopoverContentProps {
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
-}
-
-interface RecentlyUsedDateTimeRange {
-	label: string;
-	value: number;
-	timestamp: number;
-	from: string;
-	to: string;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -62,42 +57,16 @@ function CustomTimePickerPopoverContent({
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
+	onTimeChange,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
 	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
 		pathname,
 	]);
-
 	const { timezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;
 
-	const [recentlyUsedTimeRanges, setRecentlyUsedTimeRanges] = useState<
-		RecentlyUsedDateTimeRange[]
-	>([]);
-
-	useEffect(() => {
-		if (!customDateTimeVisible) {
-			const customTimeRanges = getCustomTimeRanges();
-
-			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
-				(range) => ({
-					label: `${dayjs(range.from)
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`,
-					from: range.from,
-					to: range.to,
-					value: range.timestamp,
-					timestamp: range.timestamp,
-				}),
-			);
-
-			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
-		}
-	}, [customDateTimeVisible, timezone.value]);
-
 	function getTimeChips(options: Option[]): JSX.Element {
 		return (
 			<div className="relative-date-time-section">
@@ -143,77 +112,50 @@ function CustomTimePickerPopoverContent({
 	return (
 		<>
 			<div className="date-time-popover">
-				{!customDateTimeVisible && (
-					<div className="date-time-options">
-						{isLogsExplorerPage && (
-							<Button className="data-time-live" type="text" onClick={handleGoLive}>
-								Live
-							</Button>
-						)}
-						{options.map((option) => (
-							<Button
-								type="text"
-								key={option.label + option.value}
-								onClick={(): void => {
-									onSelectHandler(option.label, option.value);
-								}}
-								className={cx(
-									'date-time-options-btn',
-									customDateTimeVisible
-										? option.value === 'custom' && 'active'
-										: selectedTime === option.value && 'active',
-								)}
-							>
-								{option.label}
-							</Button>
-						))}
-					</div>
-				)}
-
+				<div className="date-time-options">
+					{isLogsExplorerPage && (
+						<Button className="data-time-live" type="text" onClick={handleGoLive}>
+							Live
+						</Button>
+					)}
+					{options.map((option) => (
+						<Button
+							type="text"
+							key={option.label + option.value}
+							onClick={(): void => {
+								onSelectHandler(option.label, option.value);
+							}}
+							className={cx(
+								'date-time-options-btn',
+								customDateTimeVisible
+									? option.value === 'custom' && 'active'
+									: selectedTime === option.value && 'active',
+							)}
+						>
+							{option.label}
+						</Button>
+					))}
+				</div>
 				<div
 					className={cx(
 						'relative-date-time',
-						customDateTimeVisible ? 'date-picker' : 'relative-times',
+						selectedTime === 'custom' || customDateTimeVisible
+							? 'date-picker'
+							: 'relative-times',
 					)}
 				>
-					{customDateTimeVisible ? (
-						<DatePickerV2
-							onSetCustomDTPickerVisible={setCustomDTPickerVisible}
+					{selectedTime === 'custom' || customDateTimeVisible ? (
+						<RangePickerModal
+							setCustomDTPickerVisible={setCustomDTPickerVisible}
 							setIsOpen={setIsOpen}
 							onCustomDateHandler={onCustomDateHandler}
+							selectedTime={selectedTime}
+							onTimeChange={onTimeChange}
 						/>
 					) : (
-						<div className="time-selector-container">
-							<div className="relative-times-container">
-								<div className="time-heading">RELATIVE TIMES</div>
-								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
-							</div>
-
-							<div className="recently-used-container">
-								<div className="time-heading">RECENTLY USED</div>
-								<div className="recently-used-range">
-									{recentlyUsedTimeRanges.map((range: RecentlyUsedDateTimeRange) => (
-										<div
-											className="recently-used-range-item"
-											role="button"
-											tabIndex={0}
-											onKeyDown={(e): void => {
-												if (e.key === 'Enter' || e.key === ' ') {
-													onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
-													setIsOpen(false);
-												}
-											}}
-											key={range.value}
-											onClick={(): void => {
-												onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
-												setIsOpen(false);
-											}}
-										>
-											{range.label}
-										</div>
-									))}
-								</div>
-							</div>
+						<div className="relative-times-container">
+							<div className="time-heading">RELATIVE TIMES</div>
+							<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 						</div>
 					)}
 				</div>
@@ -247,4 +189,8 @@ function CustomTimePickerPopoverContent({
 	);
 }
 
+CustomTimePickerPopoverContent.defaultProps = {
+	onTimeChange: undefined,
+};
+
 export default CustomTimePickerPopoverContent;

frontend/src/components/DatePickerV2/DatePickerV2.styles.scss

@@ -1,114 +0,0 @@
-.date-picker-v2-container {
-	display: flex;
-	flex-direction: row;
-}
-
-.custom-date-time-picker-v2 {
-	padding: 12px;
-
-	.periscope-calendar {
-		border-radius: 4px;
-		border: none !important;
-		background: none !important;
-		padding: 8px 0 !important;
-	}
-
-	.periscope-calendar-day {
-		background: none !important;
-
-		&.periscope-calendar-today {
-			&.text-accent-foreground {
-				color: var(--bg-vanilla-100) !important;
-			}
-		}
-
-		button {
-			&:hover {
-				background-color: var(--bg-robin-500) !important;
-				color: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-
-	.custom-time-selector {
-		display: flex;
-		flex-direction: row;
-		gap: 16px;
-		align-items: center;
-		justify-content: space-between;
-
-		.time-input {
-			border-radius: 4px;
-			border: none !important;
-			background: none !important;
-			padding: 8px 4px !important;
-			color: var(--bg-vanilla-100) !important;
-
-			&::-webkit-calendar-picker-indicator {
-				display: none !important;
-				-webkit-appearance: none;
-				appearance: none;
-			}
-
-			&:focus {
-				border: none !important;
-				outline: none !important;
-				box-shadow: none !important;
-			}
-
-			&:focus-visible {
-				border: none !important;
-				outline: none !important;
-				box-shadow: none !important;
-			}
-		}
-	}
-
-	.custom-date-time-picker-footer {
-		display: flex;
-		flex-direction: row;
-		gap: 8px;
-		align-items: center;
-		justify-content: flex-end;
-		margin-top: 16px;
-
-		.next-btn {
-			width: 80px;
-		}
-
-		.clear-btn {
-			width: 80px;
-		}
-	}
-}
-
-.invalid-date-range-tooltip {
-	.ant-tooltip-inner {
-		color: var(--bg-sakura-500) !important;
-	}
-}
-
-.lightMode {
-	.custom-date-time-picker-v2 {
-		.periscope-calendar-day {
-			&.periscope-calendar-today {
-				&.text-accent-foreground {
-					color: var(--bg-ink-500) !important;
-				}
-			}
-
-			button {
-				&:hover {
-					background-color: var(--bg-robin-500) !important;
-					color: var(--bg-ink-500) !important;
-				}
-			}
-		}
-
-		.custom-time-selector {
-			.time-input {
-				color: var(--bg-ink-500) !important;
-			}
-		}
-	}
-}

frontend/src/components/DatePickerV2/DatePickerV2.tsx

@@ -1,311 +0,0 @@
-import './DatePickerV2.styles.scss';
-
-import { Calendar } from '@signozhq/calendar';
-import { Input } from '@signozhq/input';
-import { Button, Tooltip } from 'antd';
-import cx from 'classnames';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs, { Dayjs } from 'dayjs';
-import { CornerUpLeft, MoveRight } from 'lucide-react';
-import { useTimezone } from 'providers/Timezone';
-import { useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
-
-function DatePickerV2({
-	onSetCustomDTPickerVisible,
-	setIsOpen,
-	onCustomDateHandler,
-}: {
-	onSetCustomDTPickerVisible: (visible: boolean) => void;
-	setIsOpen: (isOpen: boolean) => void;
-	onCustomDateHandler: (
-		dateTimeRange: DateTimeRangeType,
-		lexicalContext?: LexicalContext,
-	) => void;
-}): JSX.Element {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const timeInputRef = useRef<HTMLInputElement>(null);
-
-	const { timezone } = useTimezone();
-
-	const [selectedDateTimeFor, setSelectedDateTimeFor] = useState<'to' | 'from'>(
-		'from',
-	);
-
-	const [selectedFromDateTime, setSelectedFromDateTime] = useState<Dayjs | null>(
-		dayjs(minTime / 1000_000).tz(timezone.value),
-	);
-
-	const [selectedToDateTime, setSelectedToDateTime] = useState<Dayjs | null>(
-		dayjs(maxTime / 1000_000).tz(timezone.value),
-	);
-
-	const handleNext = (): void => {
-		if (selectedDateTimeFor === 'to') {
-			onCustomDateHandler([selectedFromDateTime, selectedToDateTime]);
-
-			addCustomTimeRange([selectedFromDateTime, selectedToDateTime]);
-
-			setIsOpen(false);
-			onSetCustomDTPickerVisible(false);
-			setSelectedDateTimeFor('from');
-		} else {
-			setSelectedDateTimeFor('to');
-		}
-	};
-
-	const handleDateChange = (date: Date | undefined): void => {
-		if (!date) {
-			return;
-		}
-
-		if (selectedDateTimeFor === 'from') {
-			const prevFromDateTime = selectedFromDateTime;
-
-			const newDate = dayjs(date);
-
-			const updatedFromDateTime = prevFromDateTime
-				? prevFromDateTime
-						.year(newDate.year())
-						.month(newDate.month())
-						.date(newDate.date())
-				: dayjs(date).tz(timezone.value);
-
-			setSelectedFromDateTime(updatedFromDateTime);
-		} else {
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setSelectedToDateTime((prev) => {
-				const newDate = dayjs(date);
-
-				// Update only the date part, keeping time from existing state
-				return prev
-					? prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
-					: dayjs(date).tz(timezone.value);
-			});
-		}
-
-		// focus the time input
-		timeInputRef?.current?.focus();
-	};
-
-	const handleTimeChange = (time: string): void => {
-		// time should have format HH:mm:ss
-		if (!/^\d{2}:\d{2}:\d{2}$/.test(time)) {
-			return;
-		}
-
-		if (selectedDateTimeFor === 'from') {
-			setSelectedFromDateTime((prev) => {
-				if (prev) {
-					return prev
-						.set('hour', parseInt(time.split(':')[0], 10))
-						.set('minute', parseInt(time.split(':')[1], 10))
-						.set('second', parseInt(time.split(':')[2], 10));
-				}
-
-				return prev;
-			});
-		}
-		if (selectedDateTimeFor === 'to') {
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setSelectedToDateTime((prev) => {
-				if (prev) {
-					return prev
-						.set('hour', parseInt(time.split(':')[0], 10))
-						.set('minute', parseInt(time.split(':')[1], 10))
-						.set('second', parseInt(time.split(':')[2], 10));
-				}
-
-				return prev;
-			});
-		}
-	};
-
-	const getDefaultMonth = (): Date => {
-		let defaultDate = null;
-
-		if (selectedDateTimeFor === 'from') {
-			defaultDate = selectedFromDateTime?.toDate();
-		} else if (selectedDateTimeFor === 'to') {
-			defaultDate = selectedToDateTime?.toDate();
-		}
-
-		return defaultDate ?? new Date();
-	};
-
-	const isValidRange = (): boolean => {
-		if (selectedDateTimeFor === 'to') {
-			return selectedToDateTime?.isAfter(selectedFromDateTime) ?? false;
-		}
-
-		return true;
-	};
-
-	const handleBack = (): void => {
-		setSelectedDateTimeFor('from');
-	};
-
-	const handleHideCustomDTPicker = (): void => {
-		onSetCustomDTPickerVisible(false);
-	};
-
-	const handleSelectDateTimeFor = (selectedDateTimeFor: 'to' | 'from'): void => {
-		setSelectedDateTimeFor(selectedDateTimeFor);
-	};
-
-	return (
-		<div className="date-picker-v2-container">
-			<div className="date-time-custom-options-container">
-				<div
-					className="back-btn"
-					onClick={handleHideCustomDTPicker}
-					role="button"
-					tabIndex={0}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter') {
-							handleHideCustomDTPicker();
-						}
-					}}
-				>
-					<CornerUpLeft size={16} />
-					<span>Back</span>
-				</div>
-
-				<div className="date-time-custom-options">
-					<div
-						role="button"
-						tabIndex={0}
-						onKeyDown={(e): void => {
-							if (e.key === 'Enter') {
-								handleSelectDateTimeFor('from');
-							}
-						}}
-						className={cx(
-							'date-time-custom-option-from',
-							selectedDateTimeFor === 'from' && 'active',
-						)}
-						onClick={(): void => {
-							handleSelectDateTimeFor('from');
-						}}
-					>
-						<div className="date-time-custom-option-from-title">FROM</div>
-						<div className="date-time-custom-option-from-value">
-							{selectedFromDateTime?.format('YYYY-MM-DD HH:mm:ss')}
-						</div>
-					</div>
-					<div
-						role="button"
-						tabIndex={0}
-						onKeyDown={(e): void => {
-							if (e.key === 'Enter') {
-								handleSelectDateTimeFor('to');
-							}
-						}}
-						className={cx(
-							'date-time-custom-option-to',
-							selectedDateTimeFor === 'to' && 'active',
-						)}
-						onClick={(): void => {
-							handleSelectDateTimeFor('to');
-						}}
-					>
-						<div className="date-time-custom-option-to-title">TO</div>
-						<div className="date-time-custom-option-to-value">
-							{selectedToDateTime?.format('YYYY-MM-DD HH:mm:ss')}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div className="custom-date-time-picker-v2">
-				<Calendar
-					mode="single"
-					required
-					selected={
-						selectedDateTimeFor === 'from'
-							? selectedFromDateTime?.toDate()
-							: selectedToDateTime?.toDate()
-					}
-					key={selectedDateTimeFor + selectedDateTimeFor}
-					onSelect={handleDateChange}
-					defaultMonth={getDefaultMonth()}
-					disabled={(current): boolean => {
-						if (selectedDateTimeFor === 'to') {
-							// disable dates after today and before selectedFromDateTime
-							const currentDay = dayjs(current);
-							return currentDay.isAfter(dayjs()) || false;
-						}
-
-						if (selectedDateTimeFor === 'from') {
-							// disable dates after selectedToDateTime
-
-							return dayjs(current).isAfter(dayjs()) || false;
-						}
-
-						return false;
-					}}
-					className="rounded-md border"
-					navLayout="after"
-				/>
-
-				<div className="custom-time-selector">
-					<label className="text-xs font-normal block" htmlFor="time-picker">
-						Timestamp
-					</label>
-
-					<MoveRight size={16} />
-
-					<div className="time-input-container">
-						<Input
-							type="time"
-							ref={timeInputRef}
-							className="time-input"
-							value={
-								selectedDateTimeFor === 'from'
-									? selectedFromDateTime?.format('HH:mm:ss')
-									: selectedToDateTime?.format('HH:mm:ss')
-							}
-							onChange={(e): void => handleTimeChange(e.target.value)}
-							step="1"
-						/>
-					</div>
-				</div>
-
-				<div className="custom-date-time-picker-footer">
-					{selectedDateTimeFor === 'to' && (
-						<Button
-							className="periscope-btn secondary clear-btn"
-							type="default"
-							onClick={handleBack}
-						>
-							Back
-						</Button>
-					)}
-					<Tooltip
-						title={
-							!isValidRange() ? 'Invalid range: TO date should be after FROM date' : ''
-						}
-						overlayClassName="invalid-date-range-tooltip"
-					>
-						<Button
-							className="periscope-btn primary next-btn"
-							type="primary"
-							onClick={handleNext}
-							disabled={!isValidRange()}
-						>
-							{selectedDateTimeFor === 'from' ? 'Next' : 'Apply'}
-						</Button>
-					</Tooltip>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default DatePickerV2;

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -55,31 +55,37 @@ export const selectedColumns: BaseAutocompleteData[] = [
 		key: 'timestamp',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'serviceName',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'name',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'durationNano',
 		dataType: DataTypes.Float64,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'httpMethod',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'responseStatusCode',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 ];
 
@@ -102,7 +108,9 @@ export const getHostTracesQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.EMPTY,
 						key: '',
+						isColumn: false,
 						type: '',
+						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -146,6 +154,8 @@ export const getHostTracesQueryPayload = (
 				key: 'serviceName',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'serviceName--string--tag--true',
 				isIndexed: false,
 			},
@@ -153,6 +163,8 @@ export const getHostTracesQueryPayload = (
 				key: 'name',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'name--string--tag--true',
 				isIndexed: false,
 			},
@@ -160,6 +172,8 @@ export const getHostTracesQueryPayload = (
 				key: 'durationNano',
 				dataType: 'float64',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'durationNano--float64--tag--true',
 				isIndexed: false,
 			},
@@ -167,6 +181,8 @@ export const getHostTracesQueryPayload = (
 				key: 'httpMethod',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'httpMethod--string--tag--true',
 				isIndexed: false,
 			},
@@ -174,6 +190,8 @@ export const getHostTracesQueryPayload = (
 				key: 'responseStatusCode',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'responseStatusCode--string--tag--true',
 				isIndexed: false,
 			},

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -119,6 +119,8 @@ function HostMetricsDetails({
 						key: 'host.name',
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'host.name--string--resource--false',
 					},
 					op: '=',

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -26,7 +26,9 @@ export const getHostLogsQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.String,
 						key: '',
+						isColumn: false,
 						type: '',
+						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,50 +0,0 @@
-import { Badge } from '@signozhq/badge';
-
-type BadgeColor =
-	| 'vanilla'
-	| 'robin'
-	| 'forest'
-	| 'amber'
-	| 'sienna'
-	| 'cherry'
-	| 'sakura'
-	| 'aqua';
-
-interface HttpStatusBadgeProps {
-	statusCode: string | number;
-}
-
-function getStatusCodeColor(statusCode: number): BadgeColor {
-	if (statusCode >= 200 && statusCode < 300) {
-		return 'forest'; // Success - green
-	}
-	if (statusCode >= 300 && statusCode < 400) {
-		return 'robin'; // Redirect - blue
-	}
-	if (statusCode >= 400 && statusCode < 500) {
-		return 'amber'; // Client error - amber
-	}
-	if (statusCode >= 500) {
-		return 'cherry'; // Server error - red
-	}
-	if (statusCode >= 100 && statusCode < 200) {
-		return 'vanilla'; // Informational - neutral
-	}
-	return 'robin'; // Default fallback
-}
-
-function HttpStatusBadge({
-	statusCode,
-}: HttpStatusBadgeProps): JSX.Element | null {
-	const numericStatusCode = Number(statusCode);
-
-	if (!numericStatusCode || numericStatusCode <= 0) {
-		return null;
-	}
-
-	const color = getStatusCodeColor(numericStatusCode);
-
-	return <Badge color={color}>{statusCode}</Badge>;
-}
-
-export default HttpStatusBadge;

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -17,7 +17,7 @@ function InputWithLabel({
 	closeIcon,
 }: {
 	label: string;
-	initialValue?: string | number | null;
+	initialValue?: string | number;
 	placeholder: string;
 	type?: string;
 	onClose?: () => void;

frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss

@@ -1,152 +0,0 @@
-.kbar-command-palette__positioner {
-	position: fixed;
-	inset: 0;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.5);
-	backdrop-filter: blur(6px);
-	z-index: 50;
-}
-
-.kbar-command-palette__animator {
-	width: 100%;
-	max-width: 600px;
-}
-
-.kbar-command-palette__card {
-	background: var(--bg-ink-500);
-	color: var(--text-vanilla-100);
-	border-radius: 3px;
-	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-}
-
-.kbar-command-palette__search {
-	padding: 12px 16px;
-	font-size: 13px;
-	border: none;
-	border-bottom: 1px solid var(--border-ink-200);
-	color: var(--text-vanilla-100);
-	outline: none;
-	background-color: var(--bg-ink-500);
-}
-
-.kbar-command-palette__section {
-	padding: 8px 16px 4px;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--text-robin-500);
-	font-family: 'Inter', sans-serif;
-	text-transform: uppercase;
-	letter-spacing: 0.02em;
-}
-
-.kbar-command-palette__item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 16px;
-	font-size: 13px;
-	cursor: pointer;
-	transition: background 0.15s ease;
-}
-
-.kbar-command-palette__item:hover,
-.kbar-command-palette__item--active {
-	background: var(--bg-ink-400);
-}
-
-.kbar-command-palette__icon {
-	flex-shrink: 0;
-	width: 18px;
-	height: 18px;
-	color: #444;
-}
-
-.kbar-command-palette__shortcut {
-	margin-left: auto;
-	display: flex;
-	gap: 4px;
-}
-
-.kbar-command-palette__key {
-	padding: 2px 6px;
-	font-size: 12px;
-	border-radius: 4px;
-	background: var(--bg-ink-300);
-	color: var(--text-vanilla-300);
-	text-transform: uppercase;
-	font-family: 'Space Mono', monospace;
-}
-
-.kbar-command-palette__results-container {
-	div {
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-			height: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-300);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--bg-slate-200);
-		}
-	}
-}
-
-.lightMode {
-	.kbar-command-palette__positioner {
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	.kbar-command-palette__card {
-		background: #fff;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-	}
-
-	.kbar-command-palette__search {
-		border-bottom: 1px solid #e5e5e5;
-		color: var(--text-ink-500);
-		background-color: var(--bg-vanilla-100);
-	}
-
-	.kbar-command-palette__item {
-		color: var(--text-ink-500);
-	}
-
-	.kbar-command-palette__item:hover,
-	.kbar-command-palette__item--active {
-		background: #f5f5f5;
-	}
-
-	.kbar-command-palette__icon {
-		color: #444;
-	}
-
-	.kbar-command-palette__key {
-		background: #eee;
-		color: #555;
-	}
-
-	.kbar-command-palette__results-container {
-		div {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-300);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background: var(--bg-vanilla-300);
-			}
-		}
-	}
-}

frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx

@@ -1,69 +0,0 @@
-import './KBarCommandPalette.scss';
-
-import {
-	KBarAnimator,
-	KBarPortal,
-	KBarPositioner,
-	KBarResults,
-	KBarSearch,
-	useMatches,
-} from 'kbar';
-
-function Results(): JSX.Element {
-	const { results } = useMatches();
-
-	const renderResults = ({
-		item,
-		active,
-	}: {
-		item: any;
-		active: boolean;
-	}): JSX.Element =>
-		typeof item === 'string' ? (
-			<div className="kbar-command-palette__section">{item}</div>
-		) : (
-			<div
-				className={`kbar-command-palette__item ${
-					active ? 'kbar-command-palette__item--active' : ''
-				}`}
-			>
-				{item.icon}
-				<span>{item.name}</span>
-				{item.shortcut?.length ? (
-					<span className="kbar-command-palette__shortcut">
-						{item.shortcut.map((sc: string) => (
-							<kbd key={sc} className="kbar-command-palette__key">
-								{sc}
-							</kbd>
-						))}
-					</span>
-				) : null}
-			</div>
-		);
-
-	return (
-		<div className="kbar-command-palette__results-container">
-			<KBarResults items={results} onRender={renderResults} />
-		</div>
-	);
-}
-
-function KBarCommandPalette(): JSX.Element {
-	return (
-		<KBarPortal>
-			<KBarPositioner className="kbar-command-palette__positioner">
-				<KBarAnimator className="kbar-command-palette__animator">
-					<div className="kbar-command-palette__card">
-						<KBarSearch
-							className="kbar-command-palette__search"
-							placeholder="Search or type a command..."
-						/>
-						<Results />
-					</div>
-				</KBarAnimator>
-			</KBarPositioner>
-		</KBarPortal>
-	);
-}
-
-export default KBarCommandPalette;

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -10,7 +10,11 @@ import { VIEWS } from './constants';
 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
-	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
+	onGroupByAttribute?: (
+		fieldKey: string,
+		isJSON?: boolean,
+		dataType?: DataTypes,
+	) => Promise<void>;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -17,7 +17,7 @@ function AddToQueryHOC({
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], dataType);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], undefined, dataType);
 	};
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
@@ -41,6 +41,7 @@ export interface AddToQueryHOCProps {
 		fieldKey: string,
 		fieldValue: string,
 		operator: string,
+		isJSON?: boolean,
 		dataType?: DataTypes,
 	) => void;
 	fontSize: FontSize;

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -27,7 +27,9 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
+	ALL_SELECTED_VALUE,
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -37,8 +39,6 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
-
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
 	className,
@@ -62,6 +62,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
+	onDropdownVisibleChange,
+	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -78,6 +80,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
+	const justOpenedRef = useRef<boolean>(false);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -124,6 +128,12 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
+	// Define allOptionShown earlier in the code
+	const allOptionShown = useMemo(
+		() => value === ALL_SELECTED_VALUE || value === 'ALL',
+		[value],
+	);
+
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -132,10 +142,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[]): void => {
+		(newValue: string | string[], directCaller?: boolean): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
+			if (
+				(allOptionShown || isAllSelected) &&
+				!directCaller &&
+				currentNewValue.length === 0
+			) {
+				return;
+			}
+
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -144,7 +162,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__all__" is selected (means select all actual values)
+			// Case 2: "__ALL__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -175,7 +193,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[onChange, allAvailableValues, options, enableAllSelection],
+		[
+			allOptionShown,
+			isAllSelected,
+			onChange,
+			allAvailableValues,
+			options,
+			enableAllSelection,
+		],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -510,11 +535,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			setSearchText(value.trim());
+			const trimmedValue = value.trim();
+			setSearchText(trimmedValue);
 			if (!isOpen) {
 				setIsOpen(true);
+				justOpenedRef.current = true;
 			}
-			if (onSearch) onSearch(value.trim());
+
+			// Reset active index when search changes if dropdown is open
+			if (isOpen && trimmedValue) {
+				setActiveIndex(0);
+			}
+
+			if (onSearch) onSearch(trimmedValue);
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -528,28 +561,34 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			const parts = text.split(
-				new RegExp(
-					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
-					'gi',
-				),
-			);
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a unique key that doesn't rely on array index
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a unique key that doesn't rely on array index
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				// If regex fails, return the original text without highlighting
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -560,10 +599,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([]);
+			handleInternalChange([], true);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE]);
+			handleInternalChange([ALL_SELECTED_VALUE], true);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -738,6 +777,26 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
+			// Simple early return if ALL is selected - block all possible keyboard interactions
+			// that could remove the ALL tag, but still allow dropdown navigation and search
+			if (
+				(allOptionShown || isAllSelected) &&
+				(e.key === 'Backspace' || e.key === 'Delete')
+			) {
+				// Only prevent default if the input is empty or cursor is at start position
+				const activeElement = document.activeElement as HTMLInputElement;
+				const isInputActive = activeElement?.tagName === 'INPUT';
+				const isInputEmpty = isInputActive && !activeElement?.value;
+				const isCursorAtStart =
+					isInputActive && activeElement?.selectionStart === 0;
+
+				if (isInputEmpty || isCursorAtStart) {
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+			}
+
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -752,7 +811,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: '__all__', // Special value for the ALL option
+						value: ALL_SELECTED_VALUE, // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -784,6 +843,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
+			// If we just opened the dropdown and have options, set first option as active
+			if (justOpenedRef.current && flatOptions.length > 0) {
+				setActiveIndex(0);
+				justOpenedRef.current = false;
+			}
+
+			// If no option is active but we have options and dropdown is open, activate the first one
+			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
+				setActiveIndex(0);
+			}
+
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1129,7 +1199,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1159,6 +1229,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
+						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
+						if (onDropdownVisibleChange) {
+							onDropdownVisibleChange(false);
+						}
 						break;
 
 					case SPACEKEY:
@@ -1168,7 +1242,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1214,7 +1288,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						setActiveIndex(0);
+						justOpenedRef.current = true; // Set flag to initialize active option on next render
 						setActiveChipIndex(-1);
 						break;
 
@@ -1260,9 +1334,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
+			allOptionShown,
+			isAllSelected,
+			isOpen,
+			activeIndex,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
-			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1278,10 +1357,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			activeIndex,
+			onDropdownVisibleChange,
 			handleSelectAll,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1306,6 +1383,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);
+
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1382,6 +1467,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1460,15 +1546,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<ArrowLeft size={8} className="icons" />
-							<ArrowRight size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<ArrowLeft size={8} className="icons" />
+								<ArrowRight size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1494,9 +1583,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -1513,6 +1612,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1522,8 +1622,31 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);
 
+	// Custom handler for dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback(
+		(visible: boolean): void => {
+			setIsOpen(visible);
+			if (visible) {
+				justOpenedRef.current = true;
+				setActiveIndex(0);
+				setActiveChipIndex(-1);
+			} else {
+				setSearchText('');
+				setActiveIndex(-1);
+				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
+			}
+			// Pass through to the parent component's handler if provided
+			if (onDropdownVisibleChange) {
+				onDropdownVisibleChange(visible);
+			}
+		},
+		[onDropdownVisibleChange],
+	);
+
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1588,52 +1711,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (value === ALL_SELECTED_VALUE && isAllSelected) {
-				const handleAllTagClose = (
-					e: React.MouseEvent | React.KeyboardEvent,
-				): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					handleInternalChange([]); // Clear selection when ALL tag is closed
-				};
-
-				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
-					if (e.key === 'Enter' || e.key === SPACEKEY) {
-						handleAllTagClose(e);
-					}
-					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
-				};
-
-				return (
-					<div
-						className={cx('ant-select-selection-item', {
-							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
-							'ant-select-selection-item-selected': selectedChips.includes(0),
-						})}
-						style={
-							activeChipIndex === 0 || selectedChips.includes(0)
-								? {
-										borderColor: Color.BG_ROBIN_500,
-										backgroundColor: Color.BG_SLATE_400,
-								  }
-								: undefined
-						}
-					>
-						<span className="ant-select-selection-item-content">ALL</span>
-						{closable && (
-							<span
-								className="ant-select-selection-item-remove"
-								onClick={handleAllTagClose}
-								onKeyDown={handleAllTagKeyDown}
-								role="button"
-								tabIndex={0}
-								aria-label="Remove ALL tag (deselect all)"
-							>
-								×
-							</span>
-						)}
-					</div>
-				);
+			if (allOptionShown) {
+				// Don't render a visible tag - will be shown as placeholder
+				return <div style={{ display: 'none' }} />;
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1713,52 +1793,70 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		[
-			isAllSelected,
-			handleInternalChange,
-			activeChipIndex,
-			selectedChips,
-			selectedValues,
-			maxTagCount,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
 	);
 
+	// Simple onClear handler to prevent clearing ALL
+	const onClearHandler = useCallback((): void => {
+		// Skip clearing if ALL is selected
+		if (allOptionShown || isAllSelected) {
+			return;
+		}
+
+		// Normal clear behavior
+		handleInternalChange([], true);
+		if (onClear) onClear();
+	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
+
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-multiselect', className, {
-				'has-selection': selectedChips.length > 0 && !isAllSelected,
-				'is-all-selected': isAllSelected,
+		<div
+			className={cx('custom-multiselect-wrapper', {
+				'all-selected': allOptionShown || isAllSelected,
 			})}
-			placeholder={placeholder}
-			mode="multiple"
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={displayValue}
-			onChange={handleInternalChange}
-			onClear={(): void => handleInternalChange([])}
-			onDropdownVisibleChange={setIsOpen}
-			open={isOpen}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={dropdownMatchSelectWidth}
-			allowClear={allowClear}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			tagRender={tagRender as any}
-			placement={placement}
-			listHeight={300}
-			searchValue={searchText}
-			maxTagTextLength={maxTagTextLength}
-			maxTagCount={isAllSelected ? 1 : maxTagCount}
-			{...rest}
-		/>
+		>
+			{(allOptionShown || isAllSelected) && !searchText && (
+				<div className="all-text">ALL</div>
+			)}
+			<Select
+				ref={selectRef}
+				className={cx('custom-multiselect', className, {
+					'has-selection': selectedChips.length > 0 && !isAllSelected,
+					'is-all-selected': isAllSelected,
+				})}
+				placeholder={placeholder}
+				mode="multiple"
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={displayValue}
+				onChange={(newValue): void => {
+					console.log('newValue', newValue);
+					handleInternalChange(newValue, false);
+				}}
+				onClear={onClearHandler}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={dropdownMatchSelectWidth}
+				allowClear={allowClear}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				tagRender={tagRender as any}
+				placement={placement}
+				listHeight={300}
+				searchValue={searchText}
+				maxTagTextLength={maxTagTextLength}
+				maxTagCount={isAllSelected ? undefined : maxTagCount}
+				{...rest}
+			/>
+		</div>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,6 +29,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -57,17 +58,29 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
+	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
+	// Flag to track if dropdown just opened
+	const justOpenedRef = useRef<boolean>(false);
+
+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -130,23 +143,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a deterministic but unique key
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a deterministic but unique key
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -246,9 +269,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
+			// Reset active option index when search changes
+			if (isOpen) {
+				setActiveOptionIndex(0);
+			}
+
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch],
+		[onSearch, isOpen],
 	);
 
 	/**
@@ -272,14 +300,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
+					let processedOptions = isEmpty(value)
+						? filteredOptions
+						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
+
+					if (!isEmpty(searchText)) {
+						processedOptions = filterOptionsBySearch(processedOptions, searchText);
+					}
+
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						isEmpty(value)
-							? filteredOptions
-							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
+						processedOptions,
 					);
 
 					// Add custom option if needed
-					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
+					if (
+						!isEmpty(searchText) &&
+						!isLabelPresent(processedOptions, searchText)
+					) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -300,33 +337,52 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
+				// If we just opened the dropdown and have options, set first option as active
+				if (justOpenedRef.current && options.length > 0) {
+					setActiveOptionIndex(0);
+					justOpenedRef.current = false;
+				}
+
+				// If no option is active but we have options, activate the first one
+				if (activeOptionIndex === -1 && options.length > 0) {
+					setActiveOptionIndex(0);
+				}
+
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev < options.length - 1 ? prev + 1 : 0,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
+						}
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev > 0 ? prev - 1 : options.length - 1,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
+						}
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev > 0 ? prev - 1 : options.length - 1,
+								);
+							}
 						} else {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev < options.length - 1 ? prev + 1 : 0,
+								);
+							}
 						}
 						break;
 
@@ -339,6 +395,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -351,6 +408,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -359,6 +417,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
+						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -369,6 +428,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -379,7 +439,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				setActiveOptionIndex(0);
+				justOpenedRef.current = true; // Set flag to initialize active option on next render
 			}
 		},
 		[
@@ -444,6 +504,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -454,7 +515,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
-
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -472,13 +532,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -504,9 +567,19 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -520,6 +593,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -527,8 +601,22 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);
 
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
+		setIsOpen(visible);
+		if (visible) {
+			justOpenedRef.current = true;
+			setActiveOptionIndex(0);
+		} else {
+			setSearchText('');
+			setActiveOptionIndex(-1);
+		}
+	}, []);
+
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -582,7 +670,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={setIsOpen}
+			onDropdownVisibleChange={handleDropdownVisibleChange}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,6 +35,43 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
+	&.is-all-selected {
+		.ant-select-selection-search-input {
+			caret-color: transparent;
+		}
+
+		.ant-select-selection-placeholder {
+			opacity: 1 !important;
+			color: var(--bg-vanilla-400) !important;
+			font-weight: 500;
+			visibility: visible !important;
+			pointer-events: none;
+			z-index: 2;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85) !important;
+			}
+		}
+
+		&.ant-select-focused .ant-select-selection-placeholder {
+			opacity: 0.45 !important;
+		}
+	}
+
+	.all-selected-text {
+		position: absolute;
+		left: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--bg-vanilla-400);
+		z-index: 1;
+		pointer-events: none;
+
+		.lightMode & {
+			color: rgba(0, 0, 0, 0.85);
+		}
+	}
+
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
@@ -158,7 +195,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 300px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -276,6 +313,10 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
+	.navigation-text-incomplete {
+		color: var(--bg-amber-600) !important;
+	}
+
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -322,7 +363,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -656,6 +697,10 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
+			font-size: 12px !important;
+			height: 20px;
+			line-height: 18px;
+
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -836,3 +881,38 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
+
+.custom-multiselect-wrapper {
+	position: relative;
+	width: 100%;
+
+	&.all-selected {
+		.all-text {
+			position: absolute;
+			left: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			color: var(--bg-vanilla-400);
+			font-weight: 500;
+			z-index: 2;
+			pointer-events: none;
+			transition: opacity 0.2s ease, visibility 0.2s ease;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85);
+			}
+		}
+
+		&:focus-within .all-text {
+			opacity: 0.45;
+		}
+
+		.ant-select-selection-search-input {
+			caret-color: auto;
+		}
+
+		.ant-select-selection-placeholder {
+			display: none;
+		}
+	}
+}

frontend/src/components/NewSelect/types.ts

@@ -24,9 +24,10 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -51,10 +52,12 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	maxTagTextLength?: number;
+	showIncompleteDataMessage?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -3,6 +3,8 @@ import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
+export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,
@@ -133,3 +135,15 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
+
+/**
+ * Utility function to handle dropdown scroll and detect when scrolled to bottom
+ * Returns true when scrolled to within 20px of the bottom
+ */
+export const handleScrollToBottom = (
+	e: React.UIEvent<HTMLDivElement>,
+): boolean => {
+	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
+	return scrollHeight - scrollTop - clientHeight < 20;
+};

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -160,7 +160,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 											label="Seconds"
 											placeholder="Auto"
 											labelAfter
-											initialValue={query?.stepInterval ?? null}
+											initialValue={query?.stepInterval ?? undefined}
 										/>
 									</div>
 								</div>
@@ -283,7 +283,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 									label="Seconds"
 									placeholder="Auto"
 									labelAfter
-									initialValue={query?.stepInterval ?? null}
+									initialValue={query?.stepInterval ?? undefined}
 									className="histogram-every-input"
 								/>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -81,7 +81,9 @@ function QueryAggregationOptions({
 
 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
-								initialValue={queryData?.stepInterval ? queryData?.stepInterval : null}
+								initialValue={
+									queryData?.stepInterval ? queryData?.stepInterval : undefined
+								}
 								className="query-aggregation-interval-input"
 								label="Seconds"
 								placeholder="Auto"

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -154,23 +154,15 @@ function QueryAggregationSelect({
 	const isDarkMode = useIsDarkMode();
 	const { setAggregationOptions } = useQueryBuilderV2Context();
 
-	const formatAggregations = useCallback(
-		(aggregations: any[] | undefined): string =>
-			aggregations
-				?.map(({ expression, alias }: any) =>
-					alias ? `${expression} as ${alias}` : expression,
-				)
-				.join(' ') || '',
-		[],
-	);
-
 	const [input, setInput] = useState(
-		formatAggregations(queryData?.aggregations),
+		queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
 	);
 
 	useEffect(() => {
-		setInput(formatAggregations(queryData?.aggregations));
-	}, [queryData?.aggregations, formatAggregations]);
+		setInput(
+			queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+		);
+	}, [queryData?.aggregations]);
 
 	const [cursorPos, setCursorPos] = useState(0);
 	const [functionArgPairs, setFunctionArgPairs] = useState<

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1292,7 +1292,7 @@ function QuerySearch({
 										if (onRun && typeof onRun === 'function') {
 											onRun(query);
 										} else {
-											handleRunQuery();
+											handleRunQuery(true, true);
 										}
 										return true;
 									},

frontend/src/components/QueryBuilderV2/__tests__/utils.test.ts

@@ -1,19 +1,9 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable import/no-unresolved */
-import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { extractQueryPairs } from 'utils/queryContextUtils';
 
-import {
-	convertFiltersToExpression,
-	convertFiltersToExpressionWithExistingQuery,
-} from '../utils';
+import { convertFiltersToExpression } from '../utils';
 
 describe('convertFiltersToExpression', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
 	it('should handle empty, null, and undefined inputs', () => {
 		// Test null and undefined
 		expect(convertFiltersToExpression(null as any)).toEqual({ expression: '' });
@@ -543,229 +533,4 @@ describe('convertFiltersToExpression', () => {
 				"user_id NOT EXISTS AND description NOT CONTAINS 'error' AND NOT has(tags, 'production') AND NOT hasAny(labels, ['env:prod', 'service:api'])",
 		});
 	});
-
-	it('should return filters with new expression when no existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS['='],
-					value: 'test-service',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			undefined,
-		);
-
-		expect(result.filters).toEqual(filters);
-		expect(result.filter.expression).toBe("service.name = 'test-service'");
-	});
-
-	it('should handle empty filters', () => {
-		const filters = {
-			items: [],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			undefined,
-		);
-
-		expect(result.filters).toEqual(filters);
-		expect(result.filter.expression).toBe('');
-	});
-
-	it('should handle existing query with matching filters', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS['='],
-					value: 'updated-service',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters).toBeDefined();
-		expect(result.filter).toBeDefined();
-		expect(result.filter.expression).toBe("service.name = 'updated-service'");
-		// Ensure parser can parse the existing query
-		expect(extractQueryPairs(existingQuery)).toEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					key: 'service.name',
-					operator: '=',
-					value: "'old-service'",
-				}),
-			]),
-		);
-	});
-
-	it('should handle IN operator with existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS.IN,
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name IN ['old-service']";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters).toBeDefined();
-		expect(result.filter).toBeDefined();
-		expect(result.filter.expression).toBe(
-			"service.name IN ['service1', 'service2']",
-		);
-	});
-
-	it('should handle IN operator conversion from equals', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS.IN,
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe(
-			"service.name IN ['service1', 'service2'] ",
-		);
-	});
-
-	it('should handle NOT IN operator conversion from not equals', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: negateOperator(OPERATORS.IN),
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name != 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe(
-			"service.name NOT IN ['service1', 'service2'] ",
-		);
-	});
-
-	it('should add new filters when they do not exist in existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'new.key', key: 'new.key', type: 'string' },
-					op: OPERATORS['='],
-					value: 'new-value',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(2); // Original + new filter
-		expect(result.filter.expression).toBe(
-			"service.name = 'old-service' new.key = 'new-value'",
-		);
-	});
-
-	it('should handle simple value replacement', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'status', key: 'status', type: 'string' },
-					op: OPERATORS['='],
-					value: 'error',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "status = 'success'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe("status = 'error'");
-	});
-
-	it('should handle filters with no key gracefully', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: undefined,
-					op: OPERATORS['='],
-					value: 'test-value',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(2);
-		expect(result.filter.expression).toBe("service.name = 'old-service'");
-	});
 });

frontend/src/components/QueryBuilderV2/utils.ts

@@ -6,7 +6,7 @@ import {
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep, isEqual, sortBy } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -163,19 +163,6 @@ export const convertExpressionToFilters = (
 
 	return filters;
 };
-const getQueryPairsMap = (query: string): Map<string, IQueryPair> => {
-	const queryPairs = extractQueryPairs(query);
-	const queryPairsMap: Map<string, IQueryPair> = new Map();
-
-	queryPairs.forEach((pair) => {
-		const key = pair.hasNegation
-			? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
-			: `${pair.key}-${pair.operator}`.trim().toLowerCase();
-		queryPairsMap.set(key, pair);
-	});
-
-	return queryPairsMap;
-};
 
 export const convertFiltersToExpressionWithExistingQuery = (
 	filters: TagFilter,
@@ -208,12 +195,24 @@ export const convertFiltersToExpressionWithExistingQuery = (
 		};
 	}
 
+	// Extract query pairs from the existing query
+	const queryPairs = extractQueryPairs(existingQuery.trim());
+	let queryPairsMap: Map<string, IQueryPair> = new Map();
 	const nonExistingFilters: TagFilterItem[] = [];
 	let modifiedQuery = existingQuery; // We'll modify this query as we proceed
 	const visitedPairs: Set<string> = new Set(); // Set to track visited query pairs
 
 	// Map extracted query pairs to key-specific pair information for faster access
-	let queryPairsMap = getQueryPairsMap(existingQuery.trim());
+	if (queryPairs.length > 0) {
+		queryPairsMap = new Map(
+			queryPairs.map((pair) => {
+				const key = pair.hasNegation
+					? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
+					: `${pair.key}-${pair.operator}`.trim().toLowerCase();
+				return [key, pair];
+			}),
+		);
+	}
 
 	filters?.items?.forEach((filter) => {
 		const { key, op, value } = filter;
@@ -242,37 +241,10 @@ export const convertFiltersToExpressionWithExistingQuery = (
 				existingPair.position?.valueEnd
 			) {
 				visitedPairs.add(`${key.key}-${op}`.trim().toLowerCase());
-
-				// Check if existing values match current filter values (for array-based operators)
-				if (existingPair.valueList && filter.value && Array.isArray(filter.value)) {
-					// Clean quotes from string values for comparison
-					const cleanValues = (values: any[]): any[] =>
-						values.map((val) => (typeof val === 'string' ? unquote(val) : val));
-
-					const cleanExistingValues = cleanValues(existingPair.valueList);
-					const cleanFilterValues = cleanValues(filter.value);
-
-					// Compare arrays (order-independent) - if identical, keep existing value
-					const isSameValues =
-						cleanExistingValues.length === cleanFilterValues.length &&
-						isEqual(sortBy(cleanExistingValues), sortBy(cleanFilterValues));
-
-					if (isSameValues) {
-						// Values are identical, preserve existing formatting
-						modifiedQuery =
-							modifiedQuery.slice(0, existingPair.position.valueStart) +
-							existingPair.value +
-							modifiedQuery.slice(existingPair.position.valueEnd + 1);
-						return;
-					}
-				}
-
 				modifiedQuery =
 					modifiedQuery.slice(0, existingPair.position.valueStart) +
 					formattedValue +
 					modifiedQuery.slice(existingPair.position.valueEnd + 1);
-
-				queryPairsMap = getQueryPairsMap(modifiedQuery);
 				return;
 			}
 
@@ -298,7 +270,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								notInPair.position.valueEnd + 1,
 							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery.trim());
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					} else if (
@@ -315,7 +286,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								equalsPair.position.valueEnd + 1,
 							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					} else if (
@@ -332,7 +302,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								notEqualsPair.position.valueEnd + 1,
 							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					}
@@ -354,7 +323,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							} ${formattedValue} ${modifiedQuery.slice(
 								notEqualsPair.position.valueEnd + 1,
 							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					}
@@ -367,23 +335,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 		if (
 			queryPairsMap.has(`${filter.key?.key}-${filter.op}`.trim().toLowerCase())
 		) {
-			const existingPair = queryPairsMap.get(
-				`${filter.key?.key}-${filter.op}`.trim().toLowerCase(),
-			);
-			if (
-				existingPair &&
-				existingPair.position?.valueStart &&
-				existingPair.position?.valueEnd
-			) {
-				const formattedValue = formatValueForExpression(value, op);
-				// replace the value with the new value
-				modifiedQuery =
-					modifiedQuery.slice(0, existingPair.position.valueStart) +
-					formattedValue +
-					modifiedQuery.slice(existingPair.position.valueEnd + 1);
-				queryPairsMap = getQueryPairsMap(modifiedQuery);
-			}
-
 			visitedPairs.add(`${filter.key?.key}-${filter.op}`.trim().toLowerCase());
 		}
 

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -133,6 +133,8 @@ function OtherFilters({
 			{
 				key: filter.key,
 				dataType: filter.dataType,
+				isColumn: filter.isColumn,
+				isJSON: filter.isJSON,
 				type: filter.type,
 			},
 		]);

frontend/src/components/QuickFilters/tests/constants.ts

@@ -10,6 +10,8 @@ export const QuickFiltersConfig = [
 			key: 'deployment.environment',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: false,
+			isJSON: false,
 		},
 		defaultOpen: true,
 	},
@@ -20,6 +22,8 @@ export const QuickFiltersConfig = [
 			key: 'service.name',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: false,
+			isJSON: false,
 		},
 		defaultOpen: false,
 	},

frontend/src/components/QuickFilters/utils.tsx

@@ -53,6 +53,8 @@ export const getFilterConfig = (
 					key: att.key,
 					dataType: att.dataType,
 					type: att.type,
+					isColumn: att.isColumn,
+					isJSON: att.isJSON,
 				},
 				defaultOpen: index < 2,
 			} as IQuickFiltersConfig),

frontend/src/constants/dateTimeFormats.ts

@@ -39,8 +39,6 @@ export const DATE_TIME_FORMATS = {
 	MONTH_DATETIME_SECONDS: 'MMM DD YYYY HH:mm:ss',
 	MONTH_DATETIME_FULL: 'MMMM DD, YYYY HH:mm',
 	MONTH_DATETIME_FULL_SECONDS: 'MMM DD, YYYY, HH:mm:ss',
-	DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, HH:mm',
-	DD_MMM_YYYY_HH_MM_SS: 'DD MMM YYYY, HH:mm:ss',
 
 	// Ordinal formats (1st, 2nd, 3rd, etc)
 	ORDINAL_DATE: 'Do MMM YYYY',

frontend/src/constants/localStorage.ts

@@ -32,5 +32,4 @@ export enum LOCALSTORAGE {
 	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
-	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 }

frontend/src/constants/query.ts

@@ -49,4 +49,5 @@ export enum QueryParams {
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
+	variables = 'variables',
 }

frontend/src/constants/queryBuilder.ts

@@ -55,8 +55,8 @@ export const selectValueDivider = '__';
 
 export const baseAutoCompleteIdKeysOrder: (keyof Omit<
 	BaseAutocompleteData,
-	'id' | 'isIndexed'
->)[] = ['key', 'dataType', 'type'];
+	'id' | 'isJSON' | 'isIndexed'
+>)[] = ['key', 'dataType', 'type', 'isColumn'];
 
 export const autocompleteType: Record<AutocompleteType, AutocompleteType> = {
 	resource: 'resource',
@@ -150,12 +150,14 @@ export const initialHavingValues: HavingForm = {
 
 export const initialAutocompleteData: BaseAutocompleteData = {
 	id: createIdFromObjectFields(
-		{ dataType: null, key: '', type: null },
+		{ dataType: null, key: '', isColumn: null, type: null },
 		baseAutoCompleteIdKeysOrder,
 	),
 	dataType: DataTypes.EMPTY,
 	key: '',
+	isColumn: false,
 	type: '',
+	isJSON: false,
 };
 
 export const initialFilters: TagFilter = {
@@ -187,7 +189,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 		sourceNames: alphabet,
 	}),
 	disabled: false,
-	stepInterval: null,
+	stepInterval: undefined,
 	having: [],
 	limit: null,
 	orderBy: [],
@@ -235,7 +237,7 @@ export const initialQueryBuilderFormMeterValues: IBuilderQuery = {
 		sourceNames: alphabet,
 	}),
 	disabled: false,
-	stepInterval: null,
+	stepInterval: undefined,
 	having: [],
 	limit: null,
 	orderBy: [],

frontend/src/constants/routes.ts

@@ -19,8 +19,6 @@ const ROUTES = {
 	GET_STARTED_AZURE_MONITORING: '/get-started/azure-monitoring',
 	USAGE_EXPLORER: '/usage-explorer',
 	APPLICATION: '/services',
-	SESSION_RECORDINGS: '/session-recordings',
-	SESSION_RECORDINGS_DETAIL: '/session-recordings/:sessionId',
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
 	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -7,7 +7,6 @@ export const GlobalShortcuts = {
 	NavigateToExceptions: 'e+shift',
 	NavigateToMessagingQueues: 'm+shift',
 	ToggleSidebar: 'b+shift',
-	NavigateToHome: 'h+shift',
 };
 
 export const GlobalShortcutsName = {
@@ -19,17 +18,15 @@ export const GlobalShortcutsName = {
 	NavigateToExceptions: 'shift+e',
 	NavigateToMessagingQueues: 'shift+m',
 	ToggleSidebar: 'shift+b',
-	NavigateToHome: 'shift+h',
 };
 
 export const GlobalShortcutsDescription = {
-	NavigateToHome: 'Navigate to Home',
 	NavigateToServices: 'Navigate to Services page',
-	NavigateToTraces: 'Navigate to Traces Explorer',
-	NavigateToLogs: 'Navigate to Logs Explorer',
-	NavigateToDashboards: 'Navigate to Dashboards List',
-	NavigateToAlerts: 'Navigate to Alerts List',
-	NavigateToExceptions: 'Navigate to Exceptions List',
-	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
+	NavigateToTraces: 'Navigate to Traces page',
+	NavigateToLogs: 'Navigate to logs page',
+	NavigateToDashboards: 'Navigate to dashboards page',
+	NavigateToAlerts: 'Navigate to alerts page',
+	NavigateToExceptions: 'Navigate to Exceptions page',
+	NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
 	ToggleSidebar: 'Toggle sidebar visibility',
 };

frontend/src/constants/shortcuts/logsExplorerShortcuts.ts

@@ -10,9 +10,9 @@ export const LogsExplorerShortcuts = {
 export const LogsExplorerShortcutsName = {
 	StageAndRunQuery: `${
 		userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
-	} + enter`,
+	}+enter`,
 	FocusTheSearchBar: 's',
-	ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'} + /`,
+	ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+/`,
 };
 
 export const LogsExplorerShortcutsDescription = {

frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx

@@ -56,6 +56,8 @@ describe('API Monitoring Utils', () => {
 			const groupBy = [
 				{
 					dataType: DataTypes.String,
+					isColumn: true,
+					isJSON: false,
 					// eslint-disable-next-line sonarjs/no-duplicate-string
 					key: 'http.method',
 					type: '',
@@ -70,6 +72,8 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'test-key',
 							type: '',
 						},
@@ -140,6 +144,8 @@ describe('API Monitoring Utils', () => {
 					[
 						{
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'custom.field',
 							type: '',
 						},
@@ -174,18 +180,24 @@ describe('API Monitoring Utils', () => {
 					id: 'group-by-1',
 					key: 'http.method',
 					dataType: DataTypes.String,
+					isColumn: true,
+					isJSON: false,
 					type: '',
 				},
 				{
 					id: 'group-by-2',
 					key: 'http.status_code',
 					dataType: DataTypes.String,
+					isColumn: true,
+					isJSON: false,
 					type: '',
 				},
 				{
 					id: 'group-by-3',
 					key: 'service.name',
 					dataType: DataTypes.String,
+					isColumn: false,
+					isJSON: false,
 					type: 'tag',
 				},
 			];
@@ -246,6 +258,8 @@ describe('API Monitoring Utils', () => {
 					id: 'group-by-1',
 					key: 'http.method',
 					dataType: DataTypes.String,
+					isColumn: true,
+					isJSON: false,
 					type: '',
 				},
 			];
@@ -267,6 +281,7 @@ describe('API Monitoring Utils', () => {
 			expect(knownField).toBeDefined();
 			if (knownField && knownField.key) {
 				expect(knownField.key.dataType).toBe(DataTypes.String);
+				expect(knownField.key.isColumn).toBe(true);
 			}
 
 			// Should include the unknown field
@@ -415,6 +430,8 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'test-key',
 							type: '',
 						},
@@ -526,6 +543,8 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: 'string',
+							isColumn: true,
+							isJSON: false,
 							key: 'test.key',
 							type: '',
 						},
@@ -1382,6 +1401,8 @@ describe('API Monitoring Utils', () => {
 				id: 'custom-filter',
 				key: {
 					dataType: 'string',
+					isColumn: true,
+					isJSON: false,
 					key: 'custom.key',
 					type: '',
 				},

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx

@@ -32,6 +32,8 @@ import { SPAN_ATTRIBUTES } from './constants';
 
 const httpUrlKey = {
 	dataType: DataTypes.String,
+	isColumn: false,
+	isJSON: false,
 	key: SPAN_ATTRIBUTES.URL_PATH,
 	type: 'tag',
 };

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -58,6 +58,8 @@ function TopErrors({
 									id: '92b8a1c1',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.URL_PATH,
 										type: 'tag',
 									},

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -99,6 +99,8 @@ function DomainList(): JSX.Element {
 							key: 'kind_string',
 							dataType: 'string',
 							type: '',
+							isColumn: true,
+							isJSON: false,
 						},
 						op: '=',
 						value: 'Client',

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -123,6 +123,8 @@ describe('AllEndPoints', () => {
 						{
 							key: 'http.status_code',
 							dataType: 'string',
+							isColumn: true,
+							isJSON: false,
 							type: '',
 						},
 					],

frontend/src/container/ApiMonitoring/__tests__/EndPointDetails.test.tsx

@@ -76,6 +76,8 @@ jest.mock(
 										key: 'test.key',
 										dataType: DataTypes.String,
 										type: 'tag',
+										isColumn: false,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'test-value',
@@ -333,6 +335,8 @@ describe('EndPointDetails Component', () => {
 							key: 'service.name',
 							dataType: DataTypes.String,
 							type: 'tag',
+							isColumn: false,
+							isJSON: false,
 						},
 						op: '=',
 						value: 'test-service',

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -172,6 +172,8 @@ describe('StatusCodeBarCharts', () => {
 			key: {
 				dataType: 'string',
 				id: 'response_status_code--string--tag--false',
+				isColumn: false,
+				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
@@ -183,6 +185,8 @@ describe('StatusCodeBarCharts', () => {
 			key: {
 				dataType: 'string',
 				id: 'response_status_code--string--tag--false',
+				isColumn: false,
+				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},

frontend/src/container/ApiMonitoring/utils.tsx

@@ -43,6 +43,8 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'deployment.environment',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: false,
+			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -54,6 +56,8 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'service.name',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: true,
+			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -65,6 +69,8 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'rpc.method',
 			dataType: DataTypes.String,
 			type: 'tag',
+			isColumn: true,
+			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -249,16 +255,22 @@ export const hardcodedAttributeKeys: BaseAutocompleteData[] = [
 		key: 'deployment.environment',
 		dataType: DataTypes.String,
 		type: 'resource',
+		isColumn: false,
+		isJSON: false,
 	},
 	{
 		key: 'service.name',
 		dataType: DataTypes.String,
 		type: 'resource',
+		isColumn: true,
+		isJSON: false,
 	},
 	{
 		key: 'rpc.method',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
+		isJSON: false,
 	},
 ];
 
@@ -340,6 +352,8 @@ export const getDomainMetricsQueryPayload = (
 						aggregateOperator: 'count',
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: false,
+							isJSON: false,
 							key: SPAN_ATTRIBUTES.URL_PATH,
 							type: 'tag',
 						},
@@ -352,6 +366,8 @@ export const getDomainMetricsQueryPayload = (
 									id: '4c57937c',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -378,6 +394,8 @@ export const getDomainMetricsQueryPayload = (
 						aggregateOperator: 'p99',
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
+							isColumn: true,
+							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -390,6 +408,8 @@ export const getDomainMetricsQueryPayload = (
 									id: '2cf675cd',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -417,6 +437,7 @@ export const getDomainMetricsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
+							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -429,6 +450,8 @@ export const getDomainMetricsQueryPayload = (
 									id: '3db0f605',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -439,6 +462,8 @@ export const getDomainMetricsQueryPayload = (
 									id: '6096f745',
 									key: {
 										dataType: DataTypes.bool,
+										isColumn: true,
+										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -466,6 +491,7 @@ export const getDomainMetricsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: 'timestamp------false',
+							isColumn: false,
 							key: 'timestamp',
 							type: '',
 						},
@@ -478,6 +504,8 @@ export const getDomainMetricsQueryPayload = (
 									id: '8ff8dea1',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -611,6 +639,8 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'span_id',
 								type: '',
 							},
@@ -624,6 +654,8 @@ export const getEndPointsQueryPayload = (
 										id: 'ec316e57',
 										key: {
 											dataType: DataTypes.String,
+											isColumn: false,
+											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -636,6 +668,8 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
+											isColumn: true,
+											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -658,6 +692,8 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
+								isColumn: true,
+								isJSON: false,
 								key: 'duration_nano',
 								type: '',
 							},
@@ -671,6 +707,8 @@ export const getEndPointsQueryPayload = (
 										id: '46d57857',
 										key: {
 											dataType: DataTypes.String,
+											isColumn: false,
+											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -683,6 +721,8 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
+											isColumn: true,
+											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -706,6 +746,7 @@ export const getEndPointsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.String,
 								id: 'timestamp------false',
+								isColumn: false,
 								key: 'timestamp',
 								type: '',
 							},
@@ -719,6 +760,8 @@ export const getEndPointsQueryPayload = (
 										id: '4a237616',
 										key: {
 											dataType: DataTypes.String,
+											isColumn: false,
+											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -731,6 +774,8 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
+											isColumn: true,
+											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -753,6 +798,8 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'span_id',
 								type: '',
 							},
@@ -766,6 +813,8 @@ export const getEndPointsQueryPayload = (
 										id: 'f162de1e',
 										key: {
 											dataType: DataTypes.String,
+											isColumn: false,
+											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -776,6 +825,8 @@ export const getEndPointsQueryPayload = (
 										id: '3df0ac1d',
 										key: {
 											dataType: DataTypes.bool,
+											isColumn: true,
+											isJSON: false,
 											key: 'has_error',
 											type: '',
 										},
@@ -788,6 +839,8 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
+											isColumn: true,
+											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -866,7 +919,9 @@ export const getTopErrorsQueryPayload = (
 							id: '------false',
 							dataType: DataTypes.String,
 							key: '',
+							isColumn: false,
 							type: '',
+							isJSON: false,
 						},
 						timeAggregation: 'rate',
 						spaceAggregation: 'sum',
@@ -880,6 +935,8 @@ export const getTopErrorsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -890,6 +947,8 @@ export const getTopErrorsQueryPayload = (
 										key: SPAN_ATTRIBUTES.URL_PATH,
 										dataType: DataTypes.String,
 										type: 'tag',
+										isColumn: false,
+										isJSON: false,
 									},
 									op: 'exists',
 									value: '',
@@ -902,6 +961,8 @@ export const getTopErrorsQueryPayload = (
 													key: 'status_message',
 													dataType: DataTypes.String,
 													type: '',
+													isColumn: true,
+													isJSON: false,
 												},
 												op: 'exists',
 												value: '',
@@ -914,6 +975,8 @@ export const getTopErrorsQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
+										isColumn: false,
+										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -924,6 +987,8 @@ export const getTopErrorsQueryPayload = (
 										key: 'has_error',
 										dataType: DataTypes.bool,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: true,
@@ -947,9 +1012,13 @@ export const getTopErrorsQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
+								isColumn: false,
+								isJSON: false,
 							},
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 								id: 'response_status_code--string----true',
@@ -958,6 +1027,8 @@ export const getTopErrorsQueryPayload = (
 								key: 'status_message',
 								dataType: DataTypes.String,
 								type: '',
+								isColumn: true,
+								isJSON: false,
 							},
 						],
 						legend: '',
@@ -1333,6 +1404,8 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'http.url',
 				dataType: DataTypes.String,
 				type: 'tag',
+				isColumn: false,
+				isJSON: false,
 				id: 'http.url--string--tag--false',
 			},
 			op: '=',
@@ -1344,6 +1417,8 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'has_error',
 				dataType: DataTypes.bool,
 				type: '',
+				isColumn: false,
+				isJSON: false,
 			},
 			op: '=',
 			value: 'true',
@@ -1354,6 +1429,8 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'net.peer.name',
 				dataType: DataTypes.String,
 				type: '',
+				isColumn: false,
+				isJSON: false,
 			},
 			op: '=',
 			value: domainName,
@@ -1364,6 +1441,8 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'response_status_code',
 				dataType: DataTypes.String,
 				type: '',
+				isColumn: true,
+				isJSON: false,
 				id: 'response_status_code--string----true',
 			},
 			op: '=',
@@ -1472,6 +1551,8 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
+							isColumn: false,
+							isJSON: false,
 							key: '',
 							type: '',
 						},
@@ -1485,6 +1566,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '874562e1',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1497,6 +1580,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1520,6 +1605,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
+							isColumn: true,
+							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -1533,6 +1620,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '0c5564e0',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1545,6 +1634,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1568,6 +1659,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1581,6 +1674,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '0d656701',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1591,6 +1686,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '83ef9a1b',
 									key: {
 										dataType: DataTypes.bool,
+										isColumn: true,
+										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -1603,6 +1700,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1627,6 +1726,7 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: 'timestamp------false',
+							isColumn: false,
 							key: 'timestamp',
 							type: '',
 						},
@@ -1640,6 +1740,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '918f5b99',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1652,6 +1754,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1675,6 +1779,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1688,6 +1794,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'b355d1aa',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1700,6 +1808,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1764,6 +1874,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1777,6 +1889,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '23450eb8',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1789,6 +1903,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1801,6 +1917,8 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -1818,6 +1936,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
+							isColumn: true,
+							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -1831,6 +1951,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '2687dc18',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1843,6 +1965,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1855,6 +1979,8 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -1876,6 +2002,7 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
+							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -1889,6 +2016,8 @@ export const getEndPointDetailsQueryPayload = (
 									key: {
 										dataType: DataTypes.String,
 										id: 'net.peer.name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
 										key: 'net.peer.name',
 										type: 'tag',
 									},
@@ -1901,6 +2030,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1918,6 +2049,8 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 								id: 'response_status_code--string----true',
@@ -1967,6 +2100,7 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							key: '',
+							isColumn: false,
 							type: '',
 						},
 						timeAggregation: 'count',
@@ -1980,6 +2114,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
+										isColumn: false,
+										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -1990,6 +2126,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2010,6 +2148,8 @@ export const getEndPointDetailsQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
+								isColumn: false,
+								isJSON: false,
 							},
 						],
 						reduceTo: 'avg',
@@ -2051,6 +2191,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -2064,6 +2206,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'b78ff216',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2076,6 +2220,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2089,6 +2235,8 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
+								isColumn: true,
+								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2106,6 +2254,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
+							isColumn: true,
+							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -2119,6 +2269,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'a9024472',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2131,6 +2283,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2144,6 +2298,8 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
+								isColumn: true,
+								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2162,6 +2318,7 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
+							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -2175,6 +2332,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: '1b6c062d',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2187,6 +2346,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2200,6 +2361,8 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
+								isColumn: true,
+								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2217,6 +2380,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -2230,6 +2395,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'd14792a8',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2239,6 +2406,9 @@ export const getEndPointDetailsQueryPayload = (
 								{
 									id: '3212bf1a',
 									key: {
+										dataType: DataTypes.bool,
+										isColumn: true,
+										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -2251,6 +2421,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2264,6 +2436,8 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
+								isColumn: true,
+								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2323,6 +2497,7 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
+							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -2336,6 +2511,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'c6724407',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2348,6 +2525,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2360,6 +2539,8 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -2411,6 +2592,8 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
+							isColumn: true,
+							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -2424,6 +2607,8 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'aae93366',
 									key: {
 										dataType: DataTypes.String,
+										isColumn: false,
+										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2436,6 +2621,8 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2448,6 +2635,8 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
+								isColumn: true,
+								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -2510,6 +2699,7 @@ export const getEndPointZeroStateQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							key: '',
+							isColumn: false,
 							type: '',
 						},
 						timeAggregation: 'count',
@@ -2523,6 +2713,8 @@ export const getEndPointZeroStateQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
+										isColumn: false,
+										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -2533,6 +2725,8 @@ export const getEndPointZeroStateQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
+										isColumn: true,
+										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2552,6 +2746,8 @@ export const getEndPointZeroStateQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
+								isColumn: false,
+								isJSON: false,
 							},
 						],
 						reduceTo: 'avg',
@@ -3084,6 +3280,7 @@ export const getStatusCodeBarChartWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -3097,6 +3294,8 @@ export const getStatusCodeBarChartWidgetData = (
 								id: 'c6724407',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3109,6 +3308,8 @@ export const getStatusCodeBarChartWidgetData = (
 											id: '8b1be6f0',
 											key: {
 												dataType: DataTypes.String,
+												isColumn: false,
+												isJSON: false,
 												key: SPAN_ATTRIBUTES.URL_PATH,
 												type: 'tag',
 											},
@@ -3226,6 +3427,8 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.String,
+						isColumn: true,
+						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -3239,6 +3442,8 @@ export const getAllEndpointsWidgetData = (
 								id: 'ec316e57',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3251,6 +3456,8 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
+									isColumn: true,
+									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3276,6 +3483,8 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
+						isColumn: true,
+						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -3289,6 +3498,8 @@ export const getAllEndpointsWidgetData = (
 								id: '46d57857',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3301,6 +3512,8 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
+									isColumn: true,
+									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3327,6 +3540,7 @@ export const getAllEndpointsWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: 'timestamp------false',
+						isColumn: false,
 						key: 'timestamp',
 						type: '',
 					},
@@ -3340,6 +3554,8 @@ export const getAllEndpointsWidgetData = (
 								id: '4a237616',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3352,6 +3568,8 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
+									isColumn: true,
+									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3377,6 +3595,8 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.String,
+						isColumn: true,
+						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -3390,6 +3610,8 @@ export const getAllEndpointsWidgetData = (
 								id: 'f162de1e',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3400,11 +3622,13 @@ export const getAllEndpointsWidgetData = (
 								id: '3df0ac1d',
 								key: {
 									dataType: DataTypes.bool,
+									isColumn: true,
+									isJSON: false,
 									key: 'has_error',
 									type: '',
 								},
 								op: '=',
-								value: true,
+								value: 'true',
 							},
 							{
 								id: '212678b9',
@@ -3412,6 +3636,8 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
+									isColumn: true,
+									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3547,6 +3773,8 @@ export const getGroupByFiltersFromGroupByValues = (
 				id: groupByAttribute?.id || v4(),
 				key: {
 					dataType: groupByAttribute?.dataType || DataTypes.String,
+					isColumn: groupByAttribute?.isColumn || true,
+					isJSON: groupByAttribute?.isJSON || false,
 					key: groupByAttribute?.key || key,
 					type: groupByAttribute?.type || '',
 				},
@@ -3582,6 +3810,7 @@ export const getRateOverTimeWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
+						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -3595,6 +3824,8 @@ export const getRateOverTimeWidgetData = (
 								id: '3c76fe0b',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3643,6 +3874,8 @@ export const getLatencyOverTimeWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
+						isColumn: true,
+						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -3656,6 +3889,8 @@ export const getLatencyOverTimeWidgetData = (
 								id: '63adb3ff',
 								key: {
 									dataType: DataTypes.String,
+									isColumn: false,
+									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3765,6 +4000,8 @@ export const getCustomFiltersForBarChart = (
 			key: {
 				dataType: DataTypes.String,
 				id: 'response_status_code--string--tag--false',
+				isColumn: false,
+				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
@@ -3776,6 +4013,8 @@ export const getCustomFiltersForBarChart = (
 			key: {
 				dataType: DataTypes.String,
 				id: 'response_status_code--string--tag--false',
+				isColumn: false,
+				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},

frontend/src/container/AppLayout/index.tsx

@@ -668,18 +668,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		</div>
 	);
 
-	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
-	const { updateUserPreferenceInContext } = useAppContext();
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-		{
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
 	const sideNavPinnedPreference = userPreferences?.find(
 		(preference) => preference.name === USER_PREFERENCES.SIDENAV_PINNED,
 	)?.value as boolean;
@@ -709,6 +697,18 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		? sideNavPinnedPreference
 		: getSidebarStateFromLocalStorage();
 
+	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+	const { updateUserPreferenceInContext } = useAppContext();
+
+	const { mutate: updateUserPreferenceMutation } = useMutation(
+		updateUserPreference,
+		{
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
+
 	const handleToggleSidebar = useCallback((): void => {
 		const newState = !isSideNavPinned;
 

frontend/src/container/ExplorerOrderBy/index.tsx

@@ -34,7 +34,7 @@ function ExplorerOrderBy({ query, onChange }: OrderByFilterProps): JSX.Element {
 		const keysOptions = createOptions(data?.payload?.attributeKeys || []);
 
 		const customOptions = createOptions([
-			{ key: 'timestamp', type: '', dataType: DataTypes.EMPTY },
+			{ key: 'timestamp', isColumn: true, type: '', dataType: DataTypes.EMPTY },
 		]);
 
 		const baseOptions = [

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -142,6 +142,7 @@ function ChartPreview({
 				return false;
 		}
 	}, [query]);
+
 	const queryResponse = useGetQueryRange(
 		{
 			query: query || initialQueriesMap.metrics,

frontend/src/container/FormAlertRules/index.tsx

@@ -864,7 +864,7 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => handleRunQuery(true, true)}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

frontend/src/container/FormAlertRules/labels/utils.ts

@@ -23,7 +23,7 @@ export const flattenLabels = (labels: Labels): ILabelRecord[] => {
 		if (!hiddenLabels.includes(key)) {
 			recs.push({
 				key,
-				value: labels[key] || '',
+				value: labels[key],
 			});
 		}
 	});

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -65,6 +65,8 @@ const mockProps: WidgetGraphComponentProps = {
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: 'span_id--string----true',
+							isColumn: true,
+							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -13,7 +13,6 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -62,14 +61,12 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
-		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -120,11 +117,7 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition =
-		isVisible &&
-		!isEmptyWidget &&
-		isQueryEnabled &&
-		isEmpty(variablesToGetUpdated);
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -163,22 +156,24 @@ function GridCardGraph({
 		};
 	});
 
-	useEffect(() => {
-		if (variablesToGetUpdated.length > 0) {
-			queryClient.cancelQueries([
-				maxTime,
-				minTime,
-				globalSelectedInterval,
-				variables,
-				widget?.query,
-				widget?.panelTypes,
-				widget.timePreferance,
-				widget.fillSpans,
-				requestData,
-			]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated]);
+	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
+	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
+	// useEffect(() => {
+	// 	if (variablesToGetUpdated.length > 0) {
+	// 		queryClient.cancelQueries([
+	// 			maxTime,
+	// 			minTime,
+	// 			globalSelectedInterval,
+	// 			variables,
+	// 			widget?.query,
+	// 			widget?.panelTypes,
+	// 			widget.timePreferance,
+	// 			widget.fillSpans,
+	// 			requestData,
+	// 		]);
+	// 	}
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -224,6 +219,15 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
+				variables
+					? Object.entries(variables).reduce(
+							(acc, [id, variable]) => ({
+								...acc,
+								[id]: variable.selectedValue,
+							}),
+							{},
+					  )
+					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),

frontend/src/container/GridCardLayout/__tests__/utils.test.ts

@@ -2,16 +2,16 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getBarStepIntervalPoints, updateBarStepInterval } from '../utils';
+import { getStepIntervalPoints, updateStepInterval } from '../utils';
 
 describe('GridCardLayout Utils', () => {
-	describe('getBarStepIntervalPoints', () => {
+	describe('getStepIntervalPoints', () => {
 		it('should return 60 points for duration <= 1 hour', () => {
 			// 30 minutes in milliseconds
 			const start = Date.now();
 			const end = start + 30 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(60);
+			expect(getStepIntervalPoints(start, end)).toBe(60);
 		});
 
 		it('should return 60 points for exactly 1 hour', () => {
@@ -19,7 +19,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 60 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(60);
+			expect(getStepIntervalPoints(start, end)).toBe(60);
 		});
 
 		it('should return 120 points for duration <= 3 hours', () => {
@@ -27,7 +27,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 2 * 60 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(120);
+			expect(getStepIntervalPoints(start, end)).toBe(120);
 		});
 
 		it('should return 120 points for exactly 3 hours', () => {
@@ -35,7 +35,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 3 * 60 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(120);
+			expect(getStepIntervalPoints(start, end)).toBe(120);
 		});
 
 		it('should return 180 points for duration <= 5 hours', () => {
@@ -43,7 +43,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 4 * 60 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(180);
+			expect(getStepIntervalPoints(start, end)).toBe(180);
 		});
 
 		it('should return 180 points for exactly 5 hours', () => {
@@ -51,7 +51,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 5 * 60 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(180);
+			expect(getStepIntervalPoints(start, end)).toBe(180);
 		});
 
 		it('should calculate dynamic interval for duration > 5 hours', () => {
@@ -59,7 +59,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 10 * 60 * 60 * 1000;
 
-			const result = getBarStepIntervalPoints(start, end);
+			const result = getStepIntervalPoints(start, end);
 
 			// For 10 hours (600 minutes), interval should be ceil(600/80) = 8, rounded to 10, then * 60 = 600
 			expect(result).toBe(600);
@@ -70,7 +70,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 7 * 24 * 60 * 60 * 1000;
 
-			const result = getBarStepIntervalPoints(start, end);
+			const result = getStepIntervalPoints(start, end);
 
 			// For 7 days (10080 minutes), interval should be ceil(10080/80) = 126, rounded to 130, then * 60 = 7800
 			expect(result).toBe(7800);
@@ -81,7 +81,7 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 12 * 60 * 60 * 1000;
 
-			const result = getBarStepIntervalPoints(start, end);
+			const result = getStepIntervalPoints(start, end);
 
 			// For 12 hours (720 minutes), interval should be ceil(720/80) = 9, rounded to 10, then * 60 = 600
 			expect(result).toBe(600);
@@ -92,24 +92,24 @@ describe('GridCardLayout Utils', () => {
 			const start = Date.now();
 			const end = start + 1 * 60 * 1000;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(60);
+			expect(getStepIntervalPoints(start, end)).toBe(60);
 		});
 
 		it('should handle zero duration', () => {
 			const start = Date.now();
 			const end = start;
 
-			expect(getBarStepIntervalPoints(start, end)).toBe(60);
+			expect(getStepIntervalPoints(start, end)).toBe(60);
 		});
 	});
 
-	describe('updateBarStepInterval', () => {
+	describe('updateStepInterval', () => {
 		const mockQuery: Query = {
 			queryType: EQueryType.QUERY_BUILDER,
 			builder: {
 				queryData: [
 					{
-						stepInterval: null,
+						stepInterval: 60,
 						aggregateOperator: 'avg',
 						dataSource: DataSource.METRICS,
 						queryName: 'A',
@@ -142,7 +142,7 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime + 2 * 60 * 60 * 1000;
 
-			const result = updateBarStepInterval(mockQuery, minTime, maxTime);
+			const result = updateStepInterval(mockQuery, minTime, maxTime);
 
 			expect(result.builder.queryData[0].stepInterval).toBe(120);
 		});
@@ -151,7 +151,7 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime + 1 * 60 * 60 * 1000;
 
-			const result = updateBarStepInterval(mockQuery, minTime, maxTime);
+			const result = updateStepInterval(mockQuery, minTime, maxTime);
 
 			expect(result.builder.queryData[0].aggregateOperator).toBe('avg');
 			expect(result.builder.queryData[0].queryName).toBe('A');
@@ -177,7 +177,7 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime + 4 * 60 * 60 * 1000;
 
-			const result = updateBarStepInterval(multiQueryMock, minTime, maxTime);
+			const result = updateStepInterval(multiQueryMock, minTime, maxTime);
 
 			expect(result.builder.queryData).toHaveLength(2);
 			expect(result.builder.queryData[0].stepInterval).toBe(180);
@@ -201,11 +201,7 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime + 1 * 60 * 60 * 1000;
 
-			const result = updateBarStepInterval(
-				queryWithUndefinedStep,
-				minTime,
-				maxTime,
-			);
+			const result = updateStepInterval(queryWithUndefinedStep, minTime, maxTime);
 
 			expect(result.builder.queryData[0].stepInterval).toBe(60);
 		});
@@ -214,7 +210,7 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime; // Same time = 0 duration
 
-			const result = updateBarStepInterval(mockQuery, minTime, maxTime);
+			const result = updateStepInterval(mockQuery, minTime, maxTime);
 
 			expect(result.builder.queryData[0].stepInterval).toBe(60);
 		});
@@ -223,66 +219,10 @@ describe('GridCardLayout Utils', () => {
 			const minTime = Date.now();
 			const maxTime = minTime + 30 * 24 * 60 * 60 * 1000; // 30 days
 
-			const result = updateBarStepInterval(mockQuery, minTime, maxTime);
+			const result = updateStepInterval(mockQuery, minTime, maxTime);
 
 			// Should calculate appropriate interval for 30 days
 			expect(result.builder.queryData[0].stepInterval).toBeGreaterThan(180);
 		});
-
-		it('should handle stepInterval as 0', () => {
-			const queryWithZeroStep: Query = {
-				...mockQuery,
-				builder: {
-					queryData: [
-						{
-							...mockQuery.builder.queryData[0],
-							stepInterval: 0,
-						},
-					],
-					queryFormulas: [],
-				},
-			};
-
-			const minTime = Date.now();
-			let maxTime = minTime + 1 * 60 * 60 * 1000;
-
-			const result = updateBarStepInterval(queryWithZeroStep, minTime, maxTime);
-
-			expect(result.builder.queryData[0].stepInterval).toBe(60);
-
-			maxTime = minTime + 30 * 24 * 60 * 60 * 1000; // 30 days
-
-			const result1 = updateBarStepInterval(queryWithZeroStep, minTime, maxTime);
-
-			expect(result1.builder.queryData[0].stepInterval).toBe(32400);
-		});
-
-		it('should respect user entered inputs', () => {
-			const queryWithUserStep: Query = {
-				...mockQuery,
-				builder: {
-					queryData: [
-						{
-							...mockQuery.builder.queryData[0],
-							stepInterval: 120,
-						},
-					],
-					queryFormulas: [],
-				},
-			};
-
-			const minTime = Date.now();
-			let maxTime = minTime + 1 * 60 * 60 * 1000;
-
-			const result = updateBarStepInterval(queryWithUserStep, minTime, maxTime);
-
-			expect(result.builder.queryData[0].stepInterval).toBe(120); // not 60
-
-			maxTime = minTime + 30 * 24 * 60 * 60 * 1000; // 30 days
-
-			const result1 = updateBarStepInterval(queryWithUserStep, minTime, maxTime);
-
-			expect(result1.builder.queryData[0].stepInterval).toBe(120); // not 32400
-		});
 	});
 });

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -53,7 +53,10 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			const queryResult = await queryRangeMutation.mutateAsync(queryPayload);
 
 			// Map query data from API response
-			return mapQueryDataFromApi(queryResult.data.compositeQuery);
+			return mapQueryDataFromApi(
+				queryResult.data.compositeQuery,
+				widgetConfig?.query,
+			);
 		},
 		[globalSelectedInterval, queryRangeMutation],
 	);

frontend/src/container/GridCardLayout/utils.ts

@@ -57,8 +57,6 @@ export const hasColumnWidthsChanged = (
  * Calculates the step interval in uPlot points (1 minute = 60 points)
  * based on the time duration between two timestamps in nanoseconds.
  *
- * NOTE: This function is specifically designed for BAR visualization panels only.
- *
  * Conversion logic:
  * - <= 1 hr     → 1 min (60 points)
  * - <= 3 hr     → 2 min (120 points)
@@ -69,7 +67,7 @@ export const hasColumnWidthsChanged = (
  * @param endNano - end time in nanoseconds
  * @returns stepInterval in uPlot points
  */
-export function getBarStepIntervalPoints(
+export function getStepIntervalPoints(
 	startNano: number,
 	endNano: number,
 ): number {
@@ -94,18 +92,18 @@ export function getBarStepIntervalPoints(
 	return roundedInterval * 60; // convert min to points
 }
 
-export function updateBarStepInterval(
+export function updateStepInterval(
 	query: Query,
 	minTime: number,
 	maxTime: number,
 ): Query {
-	const stepIntervalPoints = getBarStepIntervalPoints(minTime, maxTime);
+	const stepIntervalPoints = getStepIntervalPoints(minTime, maxTime);
 
 	// if user haven't enter anything manually, that is we have default value of 60 then do the interval adjustment for bar otherwise apply the user's value
-	const getBarSteps = (queryData: IBuilderQuery): number | null =>
-		!queryData.stepInterval
-			? stepIntervalPoints || null
-			: queryData?.stepInterval;
+	const getSteps = (queryData: IBuilderQuery): number =>
+		queryData?.stepInterval === 60
+			? stepIntervalPoints || 60
+			: queryData?.stepInterval || 60;
 
 	return {
 		...query,
@@ -114,7 +112,7 @@ export function updateBarStepInterval(
 			queryData: [
 				...(query?.builder?.queryData ?? []).map((queryData) => ({
 					...queryData,
-					stepInterval: getBarSteps(queryData),
+					stepInterval: getSteps(queryData),
 				})),
 			],
 		},

frontend/src/container/GridTableComponent/__tests__/response.ts

@@ -105,6 +105,8 @@ export const widgetQueryWithLegend = {
 				aggregateAttribute: {
 					dataType: 'float64',
 					id: 'signoz_latency--float64--ExponentialHistogram--true',
+					isColumn: true,
+					isJSON: false,
 					key: 'signoz_latency',
 					type: 'ExponentialHistogram',
 				},
@@ -124,6 +126,8 @@ export const widgetQueryWithLegend = {
 				groupBy: [
 					{
 						dataType: 'string',
+						isColumn: false,
+						isJSON: false,
 						key: 'service_name',
 						type: 'tag',
 						id: 'service_name--string--tag--false',
@@ -139,6 +143,8 @@ export const widgetQueryWithLegend = {
 				aggregateAttribute: {
 					dataType: 'float64',
 					id: 'system_disk_operations--float64--Sum--true',
+					isColumn: true,
+					isJSON: false,
 					key: 'system_disk_operations',
 					type: 'Sum',
 				},

frontend/src/container/Home/Home.tsx

@@ -24,7 +24,7 @@ import { AnimatePresence } from 'motion/react';
 import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
@@ -40,9 +40,6 @@ import HomeChecklist, { ChecklistItem } from './HomeChecklist/HomeChecklist';
 import SavedViews from './SavedViews/SavedViews';
 import Services from './Services/Services';
 import StepsProgress from './StepsProgress/StepsProgress';
-import events from './rows.json';
-import { eventWithTime } from '@rrweb/types';
-import RRWebPlayer from 'pages/SessionRecording/RRWebPlayer';
 
 const homeInterval = 30 * 60 * 1000;
 
@@ -171,37 +168,6 @@ export default function Home(): JSX.Element {
 		false,
 	);
 
-	const playerContainerRef = useRef(null);
-	// const [player, setPlayer] = useState<init | null>(null);
-	const [parsedEvents, setParsedEvents] = useState<eventWithTime[]>([]);
-
-	useEffect(() => {
-		if (events.rows.length > 0) {
-			// Initialize the rrweb player with events
-			const parsedEvents = events.rows.map((event) => {
-				return JSON.parse(event.data.body);
-			});
-
-			setParsedEvents(parsedEvents);
-			// const replayPlayer = new init({
-			// 	target: (playerContainerRef.current as unknown) as HTMLElement,
-			// 	props: {
-			// 		events: parsedEvents, // Pass the captured events to the player
-			// 		speed: 1, // Normal speed (can be adjusted)
-			// 		showDebug: false, // Optionally show debug info
-			// 	},
-			// });
-
-			// // Save the player instance for future use if needed
-			// setPlayer(replayPlayer);
-
-			// // Cleanup on unmount
-			// return () => {
-			// 	replayPlayer.destroy();
-			// };
-		}
-	}, [events]); // Re-run effect when events change
-
 	const processUserPreferences = (userPreferences: UserPreference[]): void => {
 		const checklistSkipped = Boolean(
 			userPreferences?.find(
@@ -345,9 +311,6 @@ export default function Home(): JSX.Element {
 
 	return (
 		<div className="home-container">
-			<p>hello world</p>
-			<RRWebPlayer events={parsedEvents} options={{ autoPlay: false }} />
-			{/* 
 			<div className="sticky-header">
 				{showBanner && (
 					<div className="home-container-banner">
@@ -415,6 +378,7 @@ export default function Home(): JSX.Element {
 					}
 				/>
 			</div>
+
 			<div className="home-content">
 				<div className="home-left-content">
 					<DataSourceInfo
@@ -800,7 +764,7 @@ export default function Home(): JSX.Element {
 						</>
 					)}
 				</div>
-			</div> */}
+			</div>
 		</div>
 	);
 }

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -220,10 +220,18 @@ function ServiceMetrics({
 		() =>
 			getQueryRangeRequestData({
 				topLevelOperations,
+				minTime: timeRange.startTime * 1e6,
+				maxTime: timeRange.endTime * 1e6,
 				globalSelectedInterval,
 				dotMetricsEnabled,
 			}),
-		[globalSelectedInterval, topLevelOperations, dotMetricsEnabled],
+		[
+			globalSelectedInterval,
+			timeRange.endTime,
+			timeRange.startTime,
+			topLevelOperations,
+			dotMetricsEnabled,
+		],
 	);
 
 	const dataQueries = useGetQueriesRange(

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -182,6 +182,8 @@ export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'host_name',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: false,
+			isJSON: false,
 		},
 		aggregateOperator: 'noop',
 		aggregateAttribute: 'system_cpu_load_average_15m',
@@ -195,6 +197,8 @@ export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'os_type',
 			dataType: DataTypes.String,
 			type: 'resource',
+			isColumn: false,
+			isJSON: false,
 		},
 		aggregateOperator: 'noop',
 		aggregateAttribute: 'system_cpu_load_average_15m',
@@ -226,6 +230,8 @@ export function GetHostsQuickFiltersConfig(
 				key: hostNameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -239,6 +245,8 @@ export function GetHostsQuickFiltersConfig(
 				key: osTypeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -252,6 +260,8 @@ export function GetHostsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -122,6 +122,8 @@ function ClusterDetails({
 						key: QUERY_KEYS.K8S_CLUSTER_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_cluster_name--string--resource--false',
 					},
 					op: '=',
@@ -148,6 +150,8 @@ function ClusterDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -159,6 +163,8 @@ function ClusterDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

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

@@ -147,6 +147,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -161,6 +163,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -186,6 +190,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -200,6 +206,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -225,6 +233,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -239,6 +249,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -264,6 +276,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_cpu--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableCpuKey,
 								type: 'Gauge',
 							},
@@ -278,6 +292,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -336,6 +352,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -350,6 +368,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -375,6 +395,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -389,6 +411,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -414,6 +438,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -428,6 +454,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -453,6 +481,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_memory--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableMemoryKey,
 								type: 'Gauge',
 							},
@@ -467,6 +497,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -525,6 +557,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_condition_ready--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeConditionReadyKey,
 								type: 'Gauge',
 							},
@@ -539,6 +573,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -553,6 +589,8 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_node_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNodeNameKey,
 									type: 'tag',
 								},
@@ -610,6 +648,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_condition_ready--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeConditionReadyKey,
 								type: 'Gauge',
 							},
@@ -624,6 +664,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -638,6 +680,8 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_node_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNodeNameKey,
 									type: 'tag',
 								},
@@ -695,6 +739,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_deployment_available--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sDeploymentAvailableKey,
 								type: 'Gauge',
 							},
@@ -709,6 +755,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -723,12 +771,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_deployment_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sDeploymentNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -747,6 +799,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_deployment_desired--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
@@ -761,6 +815,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -775,12 +831,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_deployment_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sDeploymentNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -844,6 +904,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_statefulset_current_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetCurrentPodsKey,
 								type: 'Gauge',
 							},
@@ -858,6 +920,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -872,12 +936,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_statefulset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -896,6 +964,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_statefulset_desired_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetDesiredPodsKey,
 								type: 'Gauge',
 							},
@@ -910,6 +980,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -924,12 +996,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_statefulset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -948,6 +1024,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_statefulset_ready_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetReadyPodsKey,
 								type: 'Gauge',
 							},
@@ -962,6 +1040,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -976,12 +1056,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_statefulset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -1000,6 +1084,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_statefulset_updated_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetUpdatedPodsKey,
 								type: 'Gauge',
 							},
@@ -1014,6 +1100,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1028,12 +1116,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_statefulset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -1121,6 +1213,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_daemonset_current_scheduled_nodes--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetCurrentScheduledNodesKey,
 								type: 'Gauge',
 							},
@@ -1135,6 +1229,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1149,6 +1245,8 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_daemonset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1167,6 +1265,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_daemonset_desired_scheduled_nodes--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetDesiredScheduledNodesKey,
 								type: 'Gauge',
 							},
@@ -1181,6 +1281,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1195,6 +1297,8 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_daemonset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1213,6 +1317,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_daemonset_ready_nodes--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetReadyNodesKey,
 								type: 'Gauge',
 							},
@@ -1227,6 +1333,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1241,6 +1349,8 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_daemonset_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1316,6 +1426,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_job_active_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sJobActivePodsKey,
 								type: 'Gauge',
 							},
@@ -1330,6 +1442,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1344,12 +1458,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sJobNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -1368,6 +1486,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_job_successful_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sJobSuccessfulPodsKey,
 								type: 'Gauge',
 							},
@@ -1382,6 +1502,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1396,12 +1518,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sJobNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -1420,6 +1546,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_job_failed_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sJobFailedPodsKey,
 								type: 'Gauge',
 							},
@@ -1434,6 +1562,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1448,12 +1578,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sJobNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},
@@ -1472,6 +1606,8 @@ export const getClusterMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_job_desired_successful_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sJobDesiredSuccessfulPodsKey,
 								type: 'Gauge',
 							},
@@ -1486,6 +1622,8 @@ export const getClusterMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -1500,12 +1638,16 @@ export const getClusterMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sJobNameKey,
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sNamespaceNameKey,
 									type: 'tag',
 								},

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -121,6 +121,8 @@ function DaemonSetDetails({
 						key: QUERY_KEYS.K8S_DAEMON_SET_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_daemonSet_name--string--resource--false',
 					},
 					op: '=',
@@ -132,6 +134,8 @@ function DaemonSetDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_daemonSet_name--string--resource--false',
 					},
 					op: '=',
@@ -162,6 +166,8 @@ function DaemonSetDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -173,6 +179,8 @@ function DaemonSetDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/constants.ts

@@ -85,6 +85,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -99,6 +101,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_daemonset_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDaemonSetNameKey,
 											type: 'tag',
 										},
@@ -110,6 +114,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -135,6 +141,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -149,6 +157,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -160,6 +170,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -185,6 +197,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuLimitKey,
 								type: 'Gauge',
 							},
@@ -199,6 +213,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -210,6 +226,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -268,6 +286,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -282,6 +302,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_daemonset_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDaemonSetNameKey,
 											type: 'tag',
 										},
@@ -293,6 +315,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -318,6 +342,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -332,6 +358,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -343,6 +371,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -368,6 +398,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryLimitKey,
 								type: 'Gauge',
 							},
@@ -382,6 +414,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -393,6 +427,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -451,6 +487,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_io--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -465,6 +503,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_daemonset_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDaemonSetNameKey,
 											type: 'tag',
 										},
@@ -476,6 +516,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -490,12 +532,16 @@ export const getDaemonSetMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -547,6 +593,8 @@ export const getDaemonSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_errors--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -561,6 +609,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_daemonset_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDaemonSetNameKey,
 											type: 'tag',
 										},
@@ -572,6 +622,8 @@ export const getDaemonSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -586,12 +638,16 @@ export const getDaemonSetMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -125,6 +125,8 @@ function DeploymentDetails({
 						key: QUERY_KEYS.K8S_DEPLOYMENT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_deployment_name--string--resource--false',
 					},
 					op: '=',
@@ -136,6 +138,8 @@ function DeploymentDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_deployment_name--string--resource--false',
 					},
 					op: '=',
@@ -166,6 +170,8 @@ function DeploymentDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -177,6 +183,8 @@ function DeploymentDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/constants.ts

@@ -81,6 +81,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -95,6 +97,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_deployment_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDeploymentNameKey,
 											type: 'tag',
 										},
@@ -120,6 +124,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -134,6 +140,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -159,6 +167,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuLimitKey,
 								type: 'Gauge',
 							},
@@ -173,6 +183,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -231,6 +243,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -245,6 +259,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_deployment_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDeploymentNameKey,
 											type: 'tag',
 										},
@@ -270,6 +286,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -284,6 +302,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -309,6 +329,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryLimitKey,
 								type: 'Gauge',
 							},
@@ -323,6 +345,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -381,6 +405,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_io--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -395,6 +421,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_deployment_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDeploymentNameKey,
 											type: 'tag',
 										},
@@ -409,12 +437,16 @@ export const getDeploymentMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -466,6 +498,8 @@ export const getDeploymentMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_errors--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -480,6 +514,8 @@ export const getDeploymentMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_deployment_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sDeploymentNameKey,
 											type: 'tag',
 										},
@@ -494,12 +530,16 @@ export const getDeploymentMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},

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

@@ -93,8 +93,10 @@ const mockFilters: IBuilderQuery['filters'] = {
 			key: {
 				id: 'pod-name',
 				dataType: DataTypes.String,
+				isColumn: true,
 				key: 'pod-name',
 				type: 'tag',
+				isJSON: false,
 				isIndexed: false,
 			},
 			op: '=',

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

@@ -99,8 +99,10 @@ const mockTracesFilters: IBuilderQuery['filters'] = {
 			key: {
 				id: 'service-name',
 				dataType: DataTypes.String,
+				isColumn: true,
 				key: 'service.name',
 				type: 'tag',
+				isJSON: false,
 				isIndexed: false,
 			},
 			op: '=',

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

@@ -54,7 +54,9 @@ export const getEntityEventsOrLogsQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.String,
 						key: '',
+						isColumn: false,
 						type: '',
+						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -156,31 +158,37 @@ export const selectedEntityTracesColumns: BaseAutocompleteData[] = [
 		key: 'timestamp',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'serviceName',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'name',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'durationNano',
 		dataType: DataTypes.Float64,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'httpMethod',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 	{
 		key: 'responseStatusCode',
 		dataType: DataTypes.String,
 		type: 'tag',
+		isColumn: true,
 	},
 ];
 
@@ -203,7 +211,9 @@ export const getEntityTracesQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.EMPTY,
 						key: '',
+						isColumn: false,
 						type: '',
+						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -247,6 +257,8 @@ export const getEntityTracesQueryPayload = (
 				key: 'serviceName',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'serviceName--string--tag--true',
 				isIndexed: false,
 			},
@@ -254,6 +266,8 @@ export const getEntityTracesQueryPayload = (
 				key: 'name',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'name--string--tag--true',
 				isIndexed: false,
 			},
@@ -261,6 +275,8 @@ export const getEntityTracesQueryPayload = (
 				key: 'durationNano',
 				dataType: 'float64',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'durationNano--float64--tag--true',
 				isIndexed: false,
 			},
@@ -268,6 +284,8 @@ export const getEntityTracesQueryPayload = (
 				key: 'httpMethod',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'httpMethod--string--tag--true',
 				isIndexed: false,
 			},
@@ -275,6 +293,8 @@ export const getEntityTracesQueryPayload = (
 				key: 'responseStatusCode',
 				dataType: 'string',
 				type: 'tag',
+				isColumn: true,
+				isJSON: false,
 				id: 'responseStatusCode--string--tag--true',
 				isIndexed: false,
 			},

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -118,6 +118,8 @@ function JobDetails({
 						key: QUERY_KEYS.K8S_JOB_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_job_name--string--resource--false',
 					},
 					op: '=',
@@ -129,6 +131,8 @@ function JobDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_job_name--string--resource--false',
 					},
 					op: '=',
@@ -155,6 +159,8 @@ function JobDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -166,6 +172,8 @@ function JobDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/constants.ts

@@ -60,6 +60,8 @@ export const getJobMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -74,6 +76,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_job_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sJobNameKey,
 											type: 'tag',
 										},
@@ -85,6 +89,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -143,6 +149,8 @@ export const getJobMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -157,6 +165,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_job_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sJobNameKey,
 											type: 'tag',
 										},
@@ -168,6 +178,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -226,6 +238,8 @@ export const getJobMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_io--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -240,6 +254,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_job_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sJobNameKey,
 											type: 'tag',
 										},
@@ -251,6 +267,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -265,12 +283,16 @@ export const getJobMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -322,6 +344,8 @@ export const getJobMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_errors--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -336,6 +360,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_job_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sJobNameKey,
 											type: 'tag',
 										},
@@ -347,6 +373,8 @@ export const getJobMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -361,12 +389,16 @@ export const getJobMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -122,6 +122,8 @@ function NamespaceDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_namespace_name--string--resource--false',
 					},
 					op: '=',
@@ -148,6 +150,8 @@ function NamespaceDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -159,6 +163,8 @@ function NamespaceDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/constants.ts

@@ -155,6 +155,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodCpuUtilizationKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -169,6 +171,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -194,6 +198,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sContainerCpuRequestKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -208,6 +214,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -233,6 +241,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodCpuUtilizationKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -247,6 +257,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -272,6 +284,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodCpuUtilizationKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -286,6 +300,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -344,6 +360,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryUsageKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -358,6 +376,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -383,6 +403,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sContainerMemoryRequestKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -397,6 +419,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -422,6 +446,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryWorkingSetKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryWorkingSetKey,
 								type: 'Gauge',
 							},
@@ -436,6 +462,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -461,6 +489,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryRssKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryRssKey,
 								type: 'Gauge',
 							},
@@ -475,6 +505,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -500,6 +532,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryUsageKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -514,6 +548,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -539,6 +575,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryUsageKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -553,6 +591,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -611,6 +651,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodCpuUtilizationKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -625,6 +667,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -639,6 +683,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sPodNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sPodNameKey,
 									type: 'tag',
 								},
@@ -690,6 +736,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodMemoryUsageKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -704,6 +752,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -718,6 +768,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sPodNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sPodNameKey,
 									type: 'tag',
 								},
@@ -769,6 +821,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sPodNetworkIoKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -783,6 +837,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -797,12 +853,16 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'interface',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'direction',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
@@ -854,6 +914,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.String,
 								id: k8sPodNetworkErrorsKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -868,6 +930,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -882,12 +946,16 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'interface',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'direction',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
@@ -939,6 +1007,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sStatefulsetCurrentPodsKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetCurrentPodsKey,
 								type: 'Gauge',
 							},
@@ -953,6 +1023,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sStatefulsetNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulsetNameKey,
 											type: 'tag',
 										},
@@ -967,6 +1039,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sStatefulsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
@@ -985,6 +1059,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sStatefulsetDesiredPodsKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetDesiredPodsKey,
 								type: 'Gauge',
 							},
@@ -999,6 +1075,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1013,6 +1091,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sStatefulsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
@@ -1031,6 +1111,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sStatefulsetUpdatedPodsKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sStatefulsetUpdatedPodsKey,
 								type: 'Gauge',
 							},
@@ -1045,6 +1127,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1059,6 +1143,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sStatefulsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sStatefulsetNameKey,
 									type: 'tag',
 								},
@@ -1110,6 +1196,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sReplicasetDesiredKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sReplicasetDesiredKey,
 								type: 'Gauge',
 							},
@@ -1124,6 +1212,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1138,6 +1228,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sReplicasetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sReplicasetNameKey,
 									type: 'tag',
 								},
@@ -1162,6 +1254,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sReplicasetAvailableKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sReplicasetAvailableKey,
 								type: 'Gauge',
 							},
@@ -1176,6 +1270,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1190,6 +1286,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sReplicasetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sReplicasetNameKey,
 									type: 'tag',
 								},
@@ -1247,6 +1345,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDaemonsetDesiredScheduledNamespacesKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetDesiredScheduledNamespacesKey,
 								type: 'Gauge',
 							},
@@ -1261,6 +1361,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1275,6 +1377,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDaemonsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1293,6 +1397,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDaemonsetCurrentScheduledNamespacesKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetCurrentScheduledNamespacesKey,
 								type: 'Gauge',
 							},
@@ -1307,6 +1413,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1321,6 +1429,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDaemonsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1339,6 +1449,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDaemonsetReadyNamespacesKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetReadyNamespacesKey,
 								type: 'Gauge',
 							},
@@ -1353,6 +1465,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1367,6 +1481,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDaemonsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1385,6 +1501,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDaemonsetMisscheduledNamespacesKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDaemonsetMisscheduledNamespacesKey,
 								type: 'Gauge',
 							},
@@ -1399,6 +1517,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1413,6 +1533,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDaemonsetNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
@@ -1464,6 +1586,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDeploymentDesiredKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
@@ -1478,6 +1602,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1492,6 +1618,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDeploymentNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDeploymentNameKey,
 									type: 'tag',
 								},
@@ -1510,6 +1638,8 @@ export const getNamespaceMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: k8sDeploymentAvailableKey,
+								isColumn: true,
+								isJSON: false,
 								key: k8sDeploymentAvailableKey,
 								type: 'Gauge',
 							},
@@ -1524,6 +1654,8 @@ export const getNamespaceMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: k8sNamespaceNameKey,
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1538,6 +1670,8 @@ export const getNamespaceMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: k8sDeploymentNameKey,
+									isColumn: false,
+									isJSON: false,
 									key: k8sDeploymentNameKey,
 									type: 'tag',
 								},

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -122,6 +122,8 @@ function NodeDetails({
 						key: QUERY_KEYS.K8S_NODE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_node_name--string--resource--false',
 					},
 					op: '=',
@@ -148,6 +150,8 @@ function NodeDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -159,6 +163,8 @@ function NodeDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/constants.ts

@@ -148,6 +148,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -162,6 +164,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -187,6 +191,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_cpu--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableCpuKey,
 								type: 'Gauge',
 							},
@@ -201,6 +207,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -226,6 +234,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -240,6 +250,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -265,6 +277,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -279,6 +293,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -304,6 +320,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -318,6 +336,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -376,6 +396,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -390,6 +412,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -415,6 +439,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_memory--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableMemoryKey,
 								type: 'Gauge',
 							},
@@ -429,6 +455,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -454,6 +482,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -468,6 +498,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -493,6 +525,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -507,6 +541,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -532,6 +568,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -546,6 +584,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -571,6 +611,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_working_set--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryWorkingSetKey,
 								type: 'Gauge',
 							},
@@ -585,6 +627,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -610,6 +654,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_rss--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryRssKey,
 								type: 'Gauge',
 							},
@@ -624,6 +670,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -682,6 +730,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -696,6 +746,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -721,6 +773,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_cpu--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableCpuKey,
 								type: 'Gauge',
 							},
@@ -735,6 +789,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -760,6 +816,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -774,6 +832,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -845,6 +905,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -859,6 +921,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -884,6 +948,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_allocatable_memory--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeAllocatableMemoryKey,
 								type: 'Gauge',
 							},
@@ -898,6 +964,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -923,6 +991,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -937,6 +1007,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1008,6 +1080,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
 								type: 'Gauge',
 							},
@@ -1022,6 +1096,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1036,6 +1112,8 @@ export const getNodeMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_pod_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sPodNameKey,
 									type: 'tag',
 								},
@@ -1087,6 +1165,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemoryUsageKey,
 								type: 'Gauge',
 							},
@@ -1101,6 +1181,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1115,6 +1197,8 @@ export const getNodeMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_pod_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sPodNameKey,
 									type: 'tag',
 								},
@@ -1166,6 +1250,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_network_errors--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -1180,6 +1266,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1194,12 +1282,16 @@ export const getNodeMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -1251,6 +1343,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_network_io--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeNetworkIoKey,
 								type: 'Sum',
 							},
@@ -1265,6 +1359,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1279,12 +1375,16 @@ export const getNodeMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -1336,6 +1436,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_filesystem_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeFilesystemUsageKey,
 								type: 'Gauge',
 							},
@@ -1350,6 +1452,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1375,6 +1479,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_filesystem_capacity--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeFilesystemCapacityKey,
 								type: 'Gauge',
 							},
@@ -1389,6 +1495,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1414,6 +1522,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_filesystem_available--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeFilesystemAvailableKey,
 								type: 'Gauge',
 							},
@@ -1428,6 +1538,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1486,6 +1598,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_filesystem_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeFilesystemUsageKey,
 								type: 'Gauge',
 							},
@@ -1500,6 +1614,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},
@@ -1525,6 +1641,8 @@ export const getNodeMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_node_filesystem_capacity--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sNodeFilesystemCapacityKey,
 								type: 'Gauge',
 							},
@@ -1539,6 +1657,8 @@ export const getNodeMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_node_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNodeNameKey,
 											type: 'tag',
 										},

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -126,6 +126,8 @@ function PodDetails({
 						key: QUERY_KEYS.K8S_POD_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_pod_name--string--resource--false',
 					},
 					op: '=',
@@ -137,6 +139,8 @@ function PodDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_pod_name--string--resource--false',
 					},
 					op: '=',
@@ -163,6 +167,8 @@ function PodDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -174,6 +180,8 @@ function PodDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

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

@@ -187,6 +187,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -201,6 +203,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -212,6 +216,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -237,6 +243,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -251,6 +259,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -262,6 +272,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -287,6 +299,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -301,6 +315,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -312,6 +328,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -370,6 +388,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuReqUtilKey,
 								type: 'Gauge',
 							},
@@ -384,6 +404,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -395,6 +417,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -420,6 +444,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -434,6 +460,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -445,6 +473,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -470,6 +500,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuReqUtilKey,
 								type: 'Gauge',
 							},
@@ -484,6 +516,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -495,6 +529,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -520,6 +556,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuReqUtilKey,
 								type: 'Gauge',
 							},
@@ -534,6 +572,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -545,6 +585,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -570,6 +612,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -584,6 +628,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -595,6 +641,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -620,6 +668,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_cpu_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -634,6 +684,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -645,6 +697,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -703,6 +757,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemUsageKey,
 								type: 'Gauge',
 							},
@@ -717,6 +773,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -728,6 +786,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -753,6 +813,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemUsageKey,
 								type: 'Gauge',
 							},
@@ -767,6 +829,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -778,6 +842,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -803,6 +869,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemUsageKey,
 								type: 'Gauge',
 							},
@@ -817,6 +885,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -828,6 +898,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -886,6 +958,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemReqUtilKey,
 								type: 'Gauge',
 							},
@@ -900,6 +974,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -911,6 +987,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -936,6 +1014,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -950,6 +1030,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -961,6 +1043,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -986,6 +1070,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemReqUtilKey,
 								type: 'Gauge',
 							},
@@ -1000,6 +1086,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1011,6 +1099,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1036,6 +1126,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -1050,6 +1142,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1061,6 +1155,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1086,6 +1182,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_request_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemReqUtilKey,
 								type: 'Gauge',
 							},
@@ -1100,6 +1198,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1111,6 +1211,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1136,6 +1238,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_limit_utilization--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -1150,6 +1254,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1161,6 +1267,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1219,6 +1327,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_rss--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemRssKey,
 								type: 'Gauge',
 							},
@@ -1233,6 +1343,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1244,6 +1356,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1269,6 +1383,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_working_set--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemWorkingSetKey,
 								type: 'Gauge',
 							},
@@ -1283,6 +1399,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1294,6 +1412,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1359,6 +1479,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_memory_major_page_faults--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemMajorPFKey,
 								type: 'Gauge',
 							},
@@ -1373,6 +1495,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1384,6 +1508,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1442,6 +1568,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -1456,6 +1584,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1467,6 +1597,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1481,6 +1613,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1532,6 +1666,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_cpu_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -1546,6 +1682,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1557,6 +1695,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1571,6 +1711,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1589,6 +1731,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -1603,6 +1747,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1614,6 +1760,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1628,6 +1776,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1646,6 +1796,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_cpu_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuLimitKey,
 								type: 'Gauge',
 							},
@@ -1660,6 +1812,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1671,6 +1825,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1685,6 +1841,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1749,6 +1907,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerMemUsageKey,
 								type: 'Gauge',
 							},
@@ -1763,6 +1923,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1774,6 +1936,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1788,6 +1952,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1806,6 +1972,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_memory_working_set--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerMemWorkingSetKey,
 								type: 'Gauge',
 							},
@@ -1820,6 +1988,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1831,6 +2001,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1845,6 +2017,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1863,6 +2037,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_memory_rss--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerMemRssKey,
 								type: 'Gauge',
 							},
@@ -1877,6 +2053,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1888,6 +2066,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1902,6 +2082,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -1953,6 +2135,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'container_memory_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: containerMemUsageKey,
 								type: 'Gauge',
 							},
@@ -1967,6 +2151,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -1978,6 +2164,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -1992,6 +2180,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -2010,6 +2200,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_request--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryRequestKey,
 								type: 'Gauge',
 							},
@@ -2024,6 +2216,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2035,6 +2229,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2049,6 +2245,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -2067,6 +2265,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_container_memory_limit--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemoryLimitKey,
 								type: 'Gauge',
 							},
@@ -2081,6 +2281,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2092,6 +2294,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2106,6 +2310,8 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'k8s_container_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: k8sContainerNameKey,
 									type: 'tag',
 								},
@@ -2170,6 +2376,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_io--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -2184,6 +2392,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2195,6 +2405,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2209,12 +2421,16 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
@@ -2266,6 +2482,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_network_errors--float64--Sum--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -2280,6 +2498,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2291,6 +2511,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2305,12 +2527,16 @@ export const getPodMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'interface--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'direction--string--tag--false',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
@@ -2362,6 +2588,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_filesystem_capacity--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodFilesystemCapacityKey,
 								type: 'Gauge',
 							},
@@ -2376,6 +2604,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2387,6 +2617,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2412,6 +2644,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_filesystem_available--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodFilesystemAvailableKey,
 								type: 'Gauge',
 							},
@@ -2426,6 +2660,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2437,6 +2673,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -2462,6 +2700,8 @@ export const getPodMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_pod_filesystem_usage--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodFilesystemUsageKey,
 								type: 'Gauge',
 							},
@@ -2476,6 +2716,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -2487,6 +2729,8 @@ export const getPodMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_pod_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -121,6 +121,8 @@ function StatefulSetDetails({
 						key: QUERY_KEYS.K8S_STATEFUL_SET_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_statefulset_name--string--resource--false',
 					},
 					op: '=',
@@ -132,6 +134,8 @@ function StatefulSetDetails({
 						key: QUERY_KEYS.K8S_NAMESPACE_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s_namespace_name--string--resource--false',
 					},
 					op: '=',
@@ -162,6 +166,8 @@ function StatefulSetDetails({
 						key: QUERY_KEYS.K8S_OBJECT_KIND,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.kind--string--resource--false',
 					},
 					op: '=',
@@ -173,6 +179,8 @@ function StatefulSetDetails({
 						key: QUERY_KEYS.K8S_OBJECT_NAME,
 						dataType: DataTypes.String,
 						type: 'resource',
+						isColumn: false,
+						isJSON: false,
 						id: 'k8s.object.name--string--resource--false',
 					},
 					op: '=',

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/constants.ts

@@ -98,6 +98,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'cpu_usage',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuUtilKey,
 								type: 'Gauge',
 							},
@@ -112,6 +114,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -123,6 +127,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -148,6 +154,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'cpu_request',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuRequestKey,
 								type: 'Gauge',
 							},
@@ -162,6 +170,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -173,6 +183,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -198,6 +210,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'cpu_limit',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerCpuLimitKey,
 								type: 'Gauge',
 							},
@@ -212,6 +226,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -223,6 +239,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -267,6 +285,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'cpu_req_util',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuReqUtilKey,
 								type: 'Gauge',
 							},
@@ -281,6 +301,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -292,6 +314,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -317,6 +341,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'cpu_limit_util',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodCpuLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -331,6 +357,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -342,6 +370,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -386,6 +416,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'mem_usage',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemUsageKey,
 								type: 'Gauge',
 							},
@@ -400,6 +432,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -411,6 +445,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -436,6 +472,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'mem_request',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemRequestKey,
 								type: 'Gauge',
 							},
@@ -450,6 +488,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -461,6 +501,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -486,6 +528,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'mem_limit',
+								isColumn: true,
+								isJSON: false,
 								key: k8sContainerMemLimitKey,
 								type: 'Gauge',
 							},
@@ -500,6 +544,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sPodNameKey,
 											type: 'tag',
 										},
@@ -511,6 +557,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -555,6 +603,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'mem_req_util',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemReqUtilKey,
 								type: 'Gauge',
 							},
@@ -569,6 +619,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -580,6 +632,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -605,6 +659,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'mem_limit_util',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodMemLimitUtilKey,
 								type: 'Gauge',
 							},
@@ -619,6 +675,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -630,6 +688,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -674,6 +734,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'net_io',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkIoKey,
 								type: 'Sum',
 							},
@@ -688,6 +750,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -699,6 +763,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -713,12 +779,16 @@ export const getStatefulSetMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},
@@ -756,6 +826,8 @@ export const getStatefulSetMetricsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'net_err',
+								isColumn: true,
+								isJSON: false,
 								key: k8sPodNetworkErrorsKey,
 								type: 'Sum',
 							},
@@ -770,6 +842,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ss_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sStatefulSetNameKey,
 											type: 'tag',
 										},
@@ -781,6 +855,8 @@ export const getStatefulSetMetricsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'ns_name',
+											isColumn: false,
+											isJSON: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -795,12 +871,16 @@ export const getStatefulSetMetricsQueryPayload = (
 								{
 									dataType: DataTypes.String,
 									id: 'direction',
+									isColumn: false,
+									isJSON: false,
 									key: 'direction',
 									type: 'tag',
 								},
 								{
 									dataType: DataTypes.String,
 									id: 'interface',
+									isColumn: false,
+									isJSON: false,
 									key: 'interface',
 									type: 'tag',
 								},

frontend/src/container/InfraMonitoringK8s/Volumes/VolumeDetails/constants.ts

@@ -78,6 +78,8 @@ export const getVolumeQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_volume_available--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sVolumeAvailableKey,
 								type: 'Gauge',
 							},
@@ -92,6 +94,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -103,6 +106,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -114,6 +118,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_volume_type--string--tag--false',
+											isColumn: false,
 											key: k8sVolumeTypeKey,
 											type: 'tag',
 										},
@@ -125,6 +130,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_persistentvolumeclaim_name--string--tag--false',
+											isColumn: false,
 											key: k8sPVCNameKey,
 											type: 'tag',
 										},
@@ -169,6 +175,8 @@ export const getVolumeQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_volume_capacity--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
 								key: k8sVolumeCapacityKey,
 								type: 'Gauge',
 							},
@@ -183,6 +191,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -194,6 +203,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -205,6 +215,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_volume_type--string--tag--false',
+											isColumn: false,
 											key: k8sVolumeTypeKey,
 											type: 'tag',
 										},
@@ -216,6 +227,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_persistentvolumeclaim_name--string--tag--false',
+											isColumn: false,
 											key: k8sPVCNameKey,
 											type: 'tag',
 										},
@@ -260,6 +272,7 @@ export const getVolumeQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_volume_inodes_used--float64----true',
+								isColumn: true,
 								key: k8sVolumeInodesUsedKey,
 								type: '',
 							},
@@ -274,6 +287,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -285,6 +299,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -296,6 +311,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_volume_type--string--tag--false',
+											isColumn: false,
 											key: k8sVolumeTypeKey,
 											type: 'tag',
 										},
@@ -307,6 +323,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_persistentvolumeclaim_name--string--tag--false',
+											isColumn: false,
 											key: k8sPVCNameKey,
 											type: 'tag',
 										},
@@ -351,6 +368,7 @@ export const getVolumeQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_volume_inodes--float64----true',
+								isColumn: true,
 								key: k8sVolumeInodesKey,
 								type: '',
 							},
@@ -365,6 +383,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -376,6 +395,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -387,6 +407,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_volume_type--string--tag--false',
+											isColumn: false,
 											key: k8sVolumeTypeKey,
 											type: 'tag',
 										},
@@ -398,6 +419,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_persistentvolumeclaim_name--string--tag--false',
+											isColumn: false,
 											key: k8sPVCNameKey,
 											type: 'tag',
 										},
@@ -442,6 +464,7 @@ export const getVolumeQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
 								id: 'k8s_volume_inodes_free--float64----true',
+								isColumn: true,
 								key: k8sVolumeInodesFreeKey,
 								type: '',
 							},
@@ -456,6 +479,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
 											key: k8sClusterNameKey,
 											type: 'tag',
 										},
@@ -467,6 +491,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_namespace_name--string--tag--false',
+											isColumn: false,
 											key: k8sNamespaceNameKey,
 											type: 'tag',
 										},
@@ -478,6 +503,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_volume_type--string--tag--false',
+											isColumn: false,
 											key: k8sVolumeTypeKey,
 											type: 'tag',
 										},
@@ -489,6 +515,7 @@ export const getVolumeQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_persistentvolumeclaim_name--string--tag--false',
+											isColumn: false,
 											key: k8sPVCNameKey,
 											type: 'tag',
 										},

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -107,6 +107,8 @@ export function GetPodsQuickFiltersConfig(
 				key: podKey,
 				dataType: DataTypes.String,
 				type: 'tag',
+				isColumn: false,
+				isJSON: false,
 				id: `${podKey}--string--tag--true`,
 			},
 			aggregateOperator: 'noop',
@@ -121,6 +123,8 @@ export function GetPodsQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${namespaceKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -135,6 +139,8 @@ export function GetPodsQuickFiltersConfig(
 				key: nodeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${nodeKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -149,6 +155,8 @@ export function GetPodsQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -163,6 +171,8 @@ export function GetPodsQuickFiltersConfig(
 				key: deploymentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${deploymentKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -177,6 +187,8 @@ export function GetPodsQuickFiltersConfig(
 				key: statefulsetKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${statefulsetKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -191,6 +203,8 @@ export function GetPodsQuickFiltersConfig(
 				key: daemonsetKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${daemonsetKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -205,6 +219,8 @@ export function GetPodsQuickFiltersConfig(
 				key: jobKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${jobKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
@@ -219,6 +235,8 @@ export function GetPodsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -248,6 +266,8 @@ export function GetNodesQuickFiltersConfig(
 				key: nodeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${nodeKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
@@ -262,6 +282,8 @@ export function GetNodesQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
@@ -276,6 +298,8 @@ export function GetNodesQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -304,6 +328,8 @@ export function GetNamespaceQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -318,6 +344,8 @@ export function GetNamespaceQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -332,6 +360,8 @@ export function GetNamespaceQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -357,6 +387,8 @@ export function GetClustersQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -371,6 +403,8 @@ export function GetClustersQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -395,6 +429,8 @@ export function GetContainersQuickFiltersConfig(
 				key: containerKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${containerKey}--string--resource`,
 			},
 			defaultOpen: true,
@@ -406,6 +442,8 @@ export function GetContainersQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -437,6 +475,8 @@ export function GetVolumesQuickFiltersConfig(
 				key: pvcKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${pvcKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -451,6 +491,8 @@ export function GetVolumesQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -465,6 +507,8 @@ export function GetVolumesQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -479,6 +523,8 @@ export function GetVolumesQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -508,6 +554,8 @@ export function GetDeploymentsQuickFiltersConfig(
 				key: deployKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${deployKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -522,6 +570,8 @@ export function GetDeploymentsQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -536,6 +586,8 @@ export function GetDeploymentsQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -550,6 +602,8 @@ export function GetDeploymentsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -579,6 +633,8 @@ export function GetStatefulsetsQuickFiltersConfig(
 				key: ssKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${ssKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -593,6 +649,8 @@ export function GetStatefulsetsQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -607,6 +665,8 @@ export function GetStatefulsetsQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
@@ -621,6 +681,8 @@ export function GetStatefulsetsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -652,6 +714,8 @@ export function GetDaemonsetsQuickFiltersConfig(
 				key: nameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${nameKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
@@ -666,6 +730,8 @@ export function GetDaemonsetsQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -679,6 +745,8 @@ export function GetDaemonsetsQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -692,6 +760,8 @@ export function GetDaemonsetsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},
@@ -721,6 +791,8 @@ export function GetJobsQuickFiltersConfig(
 				key: nameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 				id: `${nameKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
@@ -735,6 +807,8 @@ export function GetJobsQuickFiltersConfig(
 				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -748,6 +822,8 @@ export function GetJobsQuickFiltersConfig(
 				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			aggregateOperator: 'noop',
 			aggregateAttribute: metricName,
@@ -761,6 +837,8 @@ export function GetJobsQuickFiltersConfig(
 				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
+				isColumn: false,
+				isJSON: false,
 			},
 			defaultOpen: true,
 		},

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -272,11 +272,12 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			width: 80,
 			key: 'severity',
 			sorter: (a, b): number =>
-				(a?.labels?.severity?.length || 0) - (b?.labels?.severity?.length || 0),
+				(a.labels ? a.labels.severity.length : 0) -
+				(b.labels ? b.labels.severity.length : 0),
 			render: (value): JSX.Element => {
-				const objectKeys = value ? Object.keys(value) : [];
+				const objectKeys = Object.keys(value);
 				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
-				const severityValue = withSeverityKey ? value[withSeverityKey] : '-';
+				const severityValue = value[withSeverityKey];
 
 				return <Typography>{severityValue}</Typography>;
 			},
@@ -289,7 +290,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			align: 'center',
 			width: 100,
 			render: (value): JSX.Element => {
-				const objectKeys = value ? Object.keys(value) : [];
+				const objectKeys = Object.keys(value);
 				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
 
 				if (withOutSeverityKeys.length === 0) {