feat: handle number dataType in filters

* fix: resolve sentry issues in alert list

* chore: update the key

---------

Co-authored-by: srikanthccv <srikanth.chekuri92@gmail.com>

.devenv/docker/clickhouse/compose.yaml

@@ -24,7 +24,7 @@ services:
     depends_on:
       - zookeeper
   zookeeper:
-    image: bitnami/zookeeper:3.7.1
+    image: signoz/zookeeper:3.7.1
     container_name: zookeeper
     volumes:
       - ${PWD}/fs/tmp/zookeeper:/bitnami/zookeeper

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

@@ -39,7 +39,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:

deploy/docker-swarm/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:

deploy/docker/docker-compose.ha.yaml

@@ -42,7 +42,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"

deploy/docker/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"

ee/query-service/app/server.go

@@ -257,6 +257,7 @@ 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/public/locales/en-GB/titles.json

@@ -48,6 +48,6 @@
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_BASE": "SigNoz | Meter Explorer"
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }

frontend/public/locales/en/titles.json

@@ -71,6 +71,6 @@
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_BASE": "SigNoz | Meter Explorer"
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }

frontend/src/AppRoutes/routes.ts

@@ -437,10 +437,10 @@ const routes: AppRoutes[] = [
 	},
 
 	{
-		path: ROUTES.METER_EXPLORER_BASE,
+		path: ROUTES.METER,
 		exact: true,
 		component: MeterExplorer,
-		key: 'METER_EXPLORER_BASE',
+		key: 'METER',
 		isPrivate: true,
 	},
 	{

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -137,5 +137,11 @@
 		h6 {
 			color: var(--text-ink-500);
 		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
 	}
 }

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

@@ -169,6 +169,7 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
+
 	.ant-drawer-close {
 		padding: 0px;
 	}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -44,13 +44,14 @@
 .lightMode {
 	.metrics-select-container {
 		.ant-select-selector {
-			border: 1px solid var(--bg-slate-300) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
 			background: var(--bg-vanilla-100);
 			color: var(--text-ink-100);
 		}
 
 		.ant-select-dropdown {
 			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300) !important;
 			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 			backdrop-filter: none;

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

@@ -0,0 +1,914 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+
+import {
+	convertFiltersToExpression,
+	convertFiltersToExpressionWithExistingQuery,
+} from '../utils';
+
+jest.mock('utils/queryContextUtils', () => ({
+	extractQueryPairs: jest.fn(),
+}));
+
+// Type the mocked functions
+const mockExtractQueryPairs = extractQueryPairs as jest.MockedFunction<
+	typeof extractQueryPairs
+>;
+
+describe('convertFiltersToExpression', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should handle empty, null, and undefined inputs', () => {
+		// Test null and undefined
+		expect(convertFiltersToExpression(null as any)).toEqual({ expression: '' });
+		expect(convertFiltersToExpression(undefined as any)).toEqual({
+			expression: '',
+		});
+
+		// Test empty filters
+		expect(convertFiltersToExpression({ items: [], op: 'AND' })).toEqual({
+			expression: '',
+		});
+		expect(
+			convertFiltersToExpression({ items: undefined, op: 'AND' } as any),
+		).toEqual({ expression: '' });
+	});
+
+	it('should convert basic comparison operators with proper value formatting', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'service', type: 'string' },
+					op: '=',
+					value: 'api-gateway',
+				},
+				{
+					id: '2',
+					key: { key: 'status', type: 'string' },
+					op: '!=',
+					value: 'error',
+				},
+				{
+					id: '3',
+					key: { key: 'duration', type: 'number' },
+					op: '>',
+					value: 100,
+				},
+				{
+					id: '4',
+					key: { key: 'count', type: 'number' },
+					op: '<=',
+					value: 50,
+				},
+				{
+					id: '5',
+					key: { key: 'is_active', type: 'boolean' },
+					op: '=',
+					value: true,
+				},
+				{
+					id: '6',
+					key: { key: 'enabled', type: 'boolean' },
+					op: '=',
+					value: false,
+				},
+				{
+					id: '7',
+					key: { key: 'count', type: 'number' },
+					op: '=',
+					value: 0,
+				},
+				{
+					id: '7',
+					key: { key: 'regex', type: 'string' },
+					op: 'regex',
+					value: '.*',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"service = 'api-gateway' AND status != 'error' AND duration > 100 AND count <= 50 AND is_active = true AND enabled = false AND count = 0 AND regex REGEXP '.*'",
+		});
+	});
+
+	it('should handle string value formatting and escaping', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'message', type: 'string' },
+					op: '=',
+					value: "user's data",
+				},
+				{
+					id: '2',
+					key: { key: 'description', type: 'string' },
+					op: '=',
+					value: '',
+				},
+				{
+					id: '3',
+					key: { key: 'path', type: 'string' },
+					op: '=',
+					value: '/api/v1/users',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"message = 'user\\'s data' AND description = '' AND path = '/api/v1/users'",
+		});
+	});
+
+	it('should handle IN operator with various value types and array formatting', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'service', type: 'string' },
+					op: 'IN',
+					value: ['api-gateway', 'user-service', 'auth-service'],
+				},
+				{
+					id: '2',
+					key: { key: 'status', type: 'string' },
+					op: 'IN',
+					value: 'success', // Single value should be converted to array
+				},
+				{
+					id: '3',
+					key: { key: 'tags', type: 'string' },
+					op: 'IN',
+					value: [], // Empty array
+				},
+				{
+					id: '4',
+					key: { key: 'name', type: 'string' },
+					op: 'IN',
+					value: ["John's", "Mary's", 'Bob'], // Values with quotes
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"service in ['api-gateway', 'user-service', 'auth-service'] AND status in ['success'] AND tags in [] AND name in ['John\\'s', 'Mary\\'s', 'Bob']",
+		});
+	});
+
+	it('should convert deprecated operators to their modern equivalents', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'service', type: 'string' },
+					op: 'nin',
+					value: ['api-gateway', 'user-service'],
+				},
+				{
+					id: '2',
+					key: { key: 'message', type: 'string' },
+					op: 'nlike',
+					value: 'error',
+				},
+				{
+					id: '3',
+					key: { key: 'path', type: 'string' },
+					op: 'nregex',
+					value: '/api/.*',
+				},
+				{
+					id: '4',
+					key: { key: 'service', type: 'string' },
+					op: 'NIN', // Test case insensitivity
+					value: ['api-gateway'],
+				},
+				{
+					id: '5',
+					key: { key: 'user_id', type: 'string' },
+					op: 'nexists',
+					value: '',
+				},
+				{
+					id: '6',
+					key: { key: 'description', type: 'string' },
+					op: 'ncontains',
+					value: 'error',
+				},
+				{
+					id: '7',
+					key: { key: 'tags', type: 'string' },
+					op: 'nhas',
+					value: 'production',
+				},
+				{
+					id: '8',
+					key: { key: 'labels', type: 'string' },
+					op: 'nhasany',
+					value: ['env:prod', 'service:api'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"service NOT IN ['api-gateway', 'user-service'] AND message NOT LIKE 'error' AND path NOT REGEXP '/api/.*' AND service NOT IN ['api-gateway'] AND user_id NOT EXISTS AND description NOT CONTAINS 'error' AND NOT has(tags, 'production') AND NOT hasAny(labels, ['env:prod', 'service:api'])",
+		});
+	});
+
+	it('should handle non-value operators and function operators', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'user_id', type: 'string' },
+					op: 'EXISTS',
+					value: '', // Value should be ignored for EXISTS
+				},
+				{
+					id: '2',
+					key: { key: 'user_id', type: 'string' },
+					op: 'EXISTS',
+					value: 'some-value', // Value should be ignored for EXISTS
+				},
+				{
+					id: '3',
+					key: { key: 'tags', type: 'string' },
+					op: 'has',
+					value: 'production',
+				},
+				{
+					id: '4',
+					key: { key: 'tags', type: 'string' },
+					op: 'hasAny',
+					value: ['production', 'staging'],
+				},
+				{
+					id: '5',
+					key: { key: 'tags', type: 'string' },
+					op: 'hasAll',
+					value: ['production', 'monitoring'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"user_id exists AND user_id exists AND has(tags, 'production') AND hasAny(tags, ['production', 'staging']) AND hasAll(tags, ['production', 'monitoring'])",
+		});
+	});
+
+	it('should filter out invalid filters and handle edge cases', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'service', type: 'string' },
+					op: '=',
+					value: 'api-gateway',
+				},
+				{
+					id: '2',
+					key: undefined, // Invalid filter - should be skipped
+					op: '=',
+					value: 'error',
+				},
+				{
+					id: '3',
+					key: { key: '', type: 'string' }, // Invalid filter with empty key - should be skipped
+					op: '=',
+					value: 'test',
+				},
+				{
+					id: '4',
+					key: { key: 'status', type: 'string' },
+					op: ' = ', // Test whitespace handling
+					value: 'success',
+				},
+				{
+					id: '5',
+					key: { key: 'service', type: 'string' },
+					op: 'In', // Test mixed case handling
+					value: ['api-gateway'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"service = 'api-gateway' AND status = 'success' AND service in ['api-gateway']",
+		});
+	});
+
+	it('should handle complex mixed operator scenarios with proper joining', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'service', type: 'string' },
+					op: 'IN',
+					value: ['api-gateway', 'user-service'],
+				},
+				{
+					id: '2',
+					key: { key: 'user_id', type: 'string' },
+					op: 'EXISTS',
+					value: '',
+				},
+				{
+					id: '3',
+					key: { key: 'tags', type: 'string' },
+					op: 'has',
+					value: 'production',
+				},
+				{
+					id: '4',
+					key: { key: 'duration', type: 'number' },
+					op: '>',
+					value: 100,
+				},
+				{
+					id: '5',
+					key: { key: 'status', type: 'string' },
+					op: 'nin',
+					value: ['error', 'timeout'],
+				},
+				{
+					id: '6',
+					key: { key: 'method', type: 'string' },
+					op: '=',
+					value: 'POST',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"service in ['api-gateway', 'user-service'] AND user_id exists AND has(tags, 'production') AND duration > 100 AND status NOT IN ['error', 'timeout'] AND method = 'POST'",
+		});
+	});
+
+	it('should handle all numeric comparison operators and edge cases', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'count', type: 'number' },
+					op: '=',
+					value: 0,
+				},
+				{
+					id: '2',
+					key: { key: 'score', type: 'number' },
+					op: '>',
+					value: 100,
+				},
+				{
+					id: '3',
+					key: { key: 'limit', type: 'number' },
+					op: '>=',
+					value: 50,
+				},
+				{
+					id: '4',
+					key: { key: 'threshold', type: 'number' },
+					op: '<',
+					value: 1000,
+				},
+				{
+					id: '5',
+					key: { key: 'max_value', type: 'number' },
+					op: '<=',
+					value: 999,
+				},
+				{
+					id: '6',
+					key: { key: 'values', type: 'string' },
+					op: 'IN',
+					value: ['1', '2', '3', '4', '5'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"count = 0 AND score > 100 AND limit >= 50 AND threshold < 1000 AND max_value <= 999 AND values in ['1', '2', '3', '4', '5']",
+		});
+	});
+
+	it('should handle boolean values and string comparisons with special characters', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'is_active', type: 'boolean' },
+					op: '=',
+					value: true,
+				},
+				{
+					id: '2',
+					key: { key: 'is_deleted', type: 'boolean' },
+					op: '=',
+					value: false,
+				},
+				{
+					id: '3',
+					key: { key: 'email', type: 'string' },
+					op: '=',
+					value: 'user@example.com',
+				},
+				{
+					id: '4',
+					key: { key: 'description', type: 'string' },
+					op: '=',
+					value: 'Contains "quotes" and \'apostrophes\'',
+				},
+				{
+					id: '5',
+					key: { key: 'path', type: 'string' },
+					op: '=',
+					value: '/api/v1/users/123?filter=true',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"is_active = true AND is_deleted = false AND email = 'user@example.com' AND description = 'Contains \"quotes\" and \\'apostrophes\\'' AND path = '/api/v1/users/123?filter=true'",
+		});
+	});
+
+	it('should handle all function operators and complex array scenarios', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'tags', type: 'string' },
+					op: 'has',
+					value: 'production',
+				},
+				{
+					id: '2',
+					key: { key: 'labels', type: 'string' },
+					op: 'hasAny',
+					value: ['env:prod', 'service:api'],
+				},
+				{
+					id: '3',
+					key: { key: 'metadata', type: 'string' },
+					op: 'hasAll',
+					value: ['version:1.0', 'team:backend'],
+				},
+				{
+					id: '4',
+					key: { key: 'services', type: 'string' },
+					op: 'IN',
+					value: ['api-gateway', 'user-service', 'auth-service', 'payment-service'],
+				},
+				{
+					id: '5',
+					key: { key: 'excluded_services', type: 'string' },
+					op: 'nin',
+					value: ['legacy-service', 'deprecated-service'],
+				},
+				{
+					id: '6',
+					key: { key: 'status_codes', type: 'string' },
+					op: 'IN',
+					value: ['200', '201', '400', '500'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"has(tags, 'production') AND hasAny(labels, ['env:prod', 'service:api']) AND hasAll(metadata, ['version:1.0', 'team:backend']) AND services in ['api-gateway', 'user-service', 'auth-service', 'payment-service'] AND excluded_services NOT IN ['legacy-service', 'deprecated-service'] AND status_codes in ['200', '201', '400', '500']",
+		});
+	});
+
+	it('should handle specific deprecated operators: nhas, ncontains, nexists', () => {
+		const filters: TagFilter = {
+			items: [
+				{
+					id: '1',
+					key: { key: 'user_id', type: 'string' },
+					op: 'nexists',
+					value: '',
+				},
+				{
+					id: '2',
+					key: { key: 'description', type: 'string' },
+					op: 'ncontains',
+					value: 'error',
+				},
+				{
+					id: '3',
+					key: { key: 'tags', type: 'string' },
+					op: 'nhas',
+					value: 'production',
+				},
+				{
+					id: '4',
+					key: { key: 'labels', type: 'string' },
+					op: 'nhasany',
+					value: ['env:prod', 'service:api'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpression(filters);
+		expect(result).toEqual({
+			expression:
+				"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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: OPERATORS['='],
+				value: "'old-service'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 13,
+					valueStart: 15,
+					valueEnd: 28,
+				},
+			},
+		]);
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters).toBeDefined();
+		expect(result.filter).toBeDefined();
+		expect(result.filter.expression).toBe("service.name = 'updated-service'");
+		expect(mockExtractQueryPairs).toHaveBeenCalledWith(
+			"service.name = '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']";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: 'IN',
+				value: "['old-service']",
+				valueList: ["'old-service'"],
+				valuesPosition: [
+					{
+						start: 17,
+						end: 29,
+					},
+				],
+				hasNegation: false,
+				isMultiValue: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 14,
+					valueStart: 16,
+					valueEnd: 30,
+					negationStart: 0,
+					negationEnd: 0,
+				},
+				isComplete: true,
+			},
+		]);
+
+		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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: OPERATORS['='],
+				value: "'old-service'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 13,
+					valueStart: 15,
+					valueEnd: 28,
+				},
+			},
+		]);
+
+		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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: OPERATORS['!='],
+				value: "'old-service'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 14,
+					valueStart: 16,
+					valueEnd: 28,
+				},
+			},
+		]);
+
+		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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: OPERATORS['='],
+				value: "'old-service'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 13,
+					valueStart: 15,
+					valueEnd: 28,
+				},
+			},
+		]);
+
+		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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'status',
+				operator: OPERATORS['='],
+				value: "'success'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 6,
+					operatorStart: 7,
+					operatorEnd: 7,
+					valueStart: 9,
+					valueEnd: 19,
+				},
+			},
+		]);
+
+		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'";
+
+		mockExtractQueryPairs.mockReturnValue([
+			{
+				key: 'service.name',
+				operator: OPERATORS['='],
+				value: "'old-service'",
+				hasNegation: false,
+				isMultiValue: false,
+				isComplete: true,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 13,
+					operatorEnd: 13,
+					valueStart: 15,
+					valueEnd: 28,
+				},
+			},
+		]);
+
+		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

@@ -1,8 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { createAggregation } from 'api/v5/queryRange/prepareQueryRangePayloadV5';
-import { OPERATORS } from 'constants/antlrQueryConstants';
+import {
+	DEPRECATED_OPERATORS_MAP,
+	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
+} from 'constants/antlrQueryConstants';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual, sortBy } from 'lodash-es';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -21,7 +25,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { unquote } from 'utils/stringUtils';
-import { isFunctionOperator } from 'utils/tokenUtils';
+import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -87,12 +91,32 @@ export const convertFiltersToExpression = (
 				return '';
 			}
 
-			if (isFunctionOperator(op)) {
-				return `${op}(${key.key}, ${value})`;
+			let operator = op.trim().toLowerCase();
+			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(operator)) {
+				operator =
+					DEPRECATED_OPERATORS_MAP[
+						operator as keyof typeof DEPRECATED_OPERATORS_MAP
+					];
 			}
 
-			const formattedValue = formatValueForExpression(value, op);
-			return `${key.key} ${op} ${formattedValue}`;
+			if (isNonValueOperator(operator)) {
+				return `${key.key} ${operator}`;
+			}
+
+			if (isFunctionOperator(operator)) {
+				// Get the proper function name from QUERY_BUILDER_FUNCTIONS
+				const functionOperators = Object.values(QUERY_BUILDER_FUNCTIONS);
+				const properFunctionName =
+					functionOperators.find(
+						(func: string) => func.toLowerCase() === operator.toLowerCase(),
+					) || operator;
+
+				const formattedValue = formatValueForExpression(value, operator);
+				return `${properFunctionName}(${key.key}, ${formattedValue})`;
+			}
+
+			const formattedValue = formatValueForExpression(value, operator);
+			return `${key.key} ${operator} ${formattedValue}`;
 		})
 		.filter((expression) => expression !== ''); // Remove empty expressions
 
@@ -117,7 +141,6 @@ export const convertExpressionToFilters = (
 	if (!expression) return [];
 
 	const queryPairs = extractQueryPairs(expression);
-
 	const filters: TagFilterItem[] = [];
 
 	queryPairs.forEach((pair) => {
@@ -140,39 +163,57 @@ 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,
 	existingQuery: string | undefined,
 ): { filters: TagFilter; filter: { expression: string } } => {
+	// Check for deprecated operators and replace them with new operators
+	const updatedFilters = cloneDeep(filters);
+
+	// Replace deprecated operators in filter items
+	if (updatedFilters?.items) {
+		updatedFilters.items = updatedFilters.items.map((item) => {
+			const opLower = item.op?.toLowerCase();
+			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(opLower)) {
+				return {
+					...item,
+					op: DEPRECATED_OPERATORS_MAP[
+						opLower as keyof typeof DEPRECATED_OPERATORS_MAP
+					].toLowerCase(),
+				};
+			}
+			return item;
+		});
+	}
+
 	if (!existingQuery) {
 		// If no existing query, return filters with a newly generated expression
 		return {
-			filters,
-			filter: convertFiltersToExpression(filters),
+			filters: updatedFilters,
+			filter: convertFiltersToExpression(updatedFilters),
 		};
 	}
 
-	// Extract query pairs from the existing query
-	const queryPairs = extractQueryPairs(existingQuery.trim());
-	let queryPairsMap: Map<string, IQueryPair> = new Map();
-
-	const updatedFilters = cloneDeep(filters); // Clone filters to avoid direct mutation
 	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
-	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];
-			}),
-		);
-	}
+	let queryPairsMap = getQueryPairsMap(existingQuery.trim());
 
 	filters?.items?.forEach((filter) => {
 		const { key, op, value } = filter;
@@ -201,10 +242,37 @@ 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;
 			}
 
@@ -230,6 +298,7 @@ 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 (
@@ -246,6 +315,7 @@ 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 (
@@ -262,6 +332,7 @@ 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
 					}
@@ -283,6 +354,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							} ${formattedValue} ${modifiedQuery.slice(
 								notEqualsPair.position.valueEnd + 1,
 							)}`;
+							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					}
@@ -295,6 +367,23 @@ 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

@@ -5,8 +5,11 @@ import { SignalType } from 'components/QuickFilters/types';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useMemo } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -40,6 +43,10 @@ function OtherFilters({
 		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
 		[signal],
 	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
+	);
 
 	const {
 		data: suggestionsData,
@@ -69,7 +76,22 @@ function OtherFilters({
 		},
 		{
 			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && !isLogDataSource,
+			enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+		},
+	);
+
+	const {
+		data: fieldKeysData,
+		isLoading: isLoadingFieldKeys,
+	} = useGetQueryKeySuggestions(
+		{
+			searchText: inputValue,
+			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+			signalSource: 'meter',
+		},
+		{
+			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+			enabled: !!signal && isMeterDataSource,
 		},
 	);
 
@@ -77,13 +99,33 @@ function OtherFilters({
 		let filterAttributes;
 		if (isLogDataSource) {
 			filterAttributes = suggestionsData?.payload?.attributes || [];
+		} else if (isMeterDataSource) {
+			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
+				fieldKeysData?.data?.data?.keys || {},
+			)?.flat();
+			filterAttributes = fieldKeys.map(
+				(attr) =>
+					({
+						key: attr.name,
+						dataType: attr.fieldDataType,
+						type: attr.fieldContext,
+						signal: attr.signal,
+					} as BaseAutocompleteData),
+			);
 		} else {
 			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
 		}
 		return filterAttributes?.filter(
 			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
 		);
-	}, [suggestionsData, aggregateKeysData, addedFilters, isLogDataSource]);
+	}, [
+		suggestionsData,
+		aggregateKeysData,
+		addedFilters,
+		isLogDataSource,
+		fieldKeysData,
+		isMeterDataSource,
+	]);
 
 	const handleAddFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => [
@@ -99,7 +141,8 @@ function OtherFilters({
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		const isLoading = isFetchingSuggestions || isFetchingAggregateKeys;
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
 		if (isLoading) return <OtherFiltersSkeleton />;
 		if (!otherFilters?.length)
 			return <div className="no-values-found">No values found</div>;

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -0,0 +1,63 @@
+import './styles.scss';
+
+import { Select } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
+
+import { UniversalYAxisUnitMappings, Y_AXIS_CATEGORIES } from './constants';
+import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
+import { mapMetricUnitToUniversalUnit } from './utils';
+
+function YAxisUnitSelector({
+	value,
+	onChange,
+	placeholder = 'Please select a unit',
+	loading = false,
+}: YAxisUnitSelectorProps): JSX.Element {
+	const universalUnit = mapMetricUnitToUniversalUnit(value);
+
+	const handleSearch = (
+		searchTerm: string,
+		currentOption: DefaultOptionType | undefined,
+	): boolean => {
+		if (!currentOption?.value) return false;
+
+		const search = searchTerm.toLowerCase();
+		const unitId = currentOption.value.toString().toLowerCase();
+		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
+
+		// Check label and id
+		if (unitId.includes(search) || unitLabel.includes(search)) return true;
+
+		// Check aliases (from the mapping) using array iteration
+		const aliases = Array.from(
+			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
+		);
+
+		return aliases.some((alias) => alias.toLowerCase().includes(search));
+	};
+
+	return (
+		<div className="y-axis-unit-selector-component">
+			<Select
+				showSearch
+				value={universalUnit}
+				onChange={onChange}
+				placeholder={placeholder}
+				filterOption={(input, option): boolean => handleSearch(input, option)}
+				loading={loading}
+			>
+				{Y_AXIS_CATEGORIES.map((category) => (
+					<Select.OptGroup key={category.name} label={category.name}>
+						{category.units.map((unit) => (
+							<Select.Option key={unit.id} value={unit.id}>
+								{unit.name}
+							</Select.Option>
+						))}
+					</Select.OptGroup>
+				))}
+			</Select>
+		</div>
+	);
+}
+
+export default YAxisUnitSelector;

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

@@ -0,0 +1,68 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import YAxisUnitSelector from '../YAxisUnitSelector';
+
+describe('YAxisUnitSelector', () => {
+	const mockOnChange = jest.fn();
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	it('renders with default placeholder', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		expect(screen.getByText('Please select a unit')).toBeInTheDocument();
+	});
+
+	it('renders with custom placeholder', () => {
+		render(
+			<YAxisUnitSelector
+				value=""
+				onChange={mockOnChange}
+				placeholder="Custom placeholder"
+			/>,
+		);
+		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
+	});
+
+	it('calls onChange when a value is selected', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+		const option = screen.getByText('Bytes (B)');
+		fireEvent.click(option);
+
+		expect(mockOnChange).toHaveBeenCalledWith('By', {
+			children: 'Bytes (B)',
+			key: 'By',
+			value: 'By',
+		});
+	});
+
+	it('filters options based on search input', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+		const input = screen.getByRole('combobox');
+		fireEvent.change(input, { target: { value: 'byte' } });
+
+		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
+	});
+
+	it('shows all categories and their units', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+
+		// Check for category headers
+		expect(screen.getByText('Data')).toBeInTheDocument();
+		expect(screen.getByText('Time')).toBeInTheDocument();
+
+		// Check for some common units
+		expect(screen.getByText('Bytes (B)')).toBeInTheDocument();
+		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
+	});
+});

frontend/src/components/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -0,0 +1,39 @@
+import {
+	getUniversalNameFromMetricUnit,
+	mapMetricUnitToUniversalUnit,
+} from '../utils';
+
+describe('YAxisUnitSelector utils', () => {
+	describe('mapMetricUnitToUniversalUnit', () => {
+		it('maps known units correctly', () => {
+			expect(mapMetricUnitToUniversalUnit('bytes')).toBe('By');
+			expect(mapMetricUnitToUniversalUnit('seconds')).toBe('s');
+			expect(mapMetricUnitToUniversalUnit('bytes_per_second')).toBe('By/s');
+		});
+
+		it('returns null or self for unknown units', () => {
+			expect(mapMetricUnitToUniversalUnit('unknown_unit')).toBe('unknown_unit');
+			expect(mapMetricUnitToUniversalUnit('')).toBe(null);
+			expect(mapMetricUnitToUniversalUnit(undefined)).toBe(null);
+		});
+	});
+
+	describe('getUniversalNameFromMetricUnit', () => {
+		it('returns human readable names for known units', () => {
+			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
+			expect(getUniversalNameFromMetricUnit('seconds')).toBe('Seconds (s)');
+			expect(getUniversalNameFromMetricUnit('bytes_per_second')).toBe('Bytes/sec');
+		});
+
+		it('returns original unit for unknown units', () => {
+			expect(getUniversalNameFromMetricUnit('unknown_unit')).toBe('unknown_unit');
+			expect(getUniversalNameFromMetricUnit('')).toBe('-');
+			expect(getUniversalNameFromMetricUnit(undefined)).toBe('-');
+		});
+
+		it('handles case variations', () => {
+			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
+			expect(getUniversalNameFromMetricUnit('s')).toBe('Seconds (s)');
+		});
+	});
+});

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -0,0 +1,627 @@
+import { UniversalYAxisUnit, YAxisUnit } from './types';
+
+// Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents
+export const UniversalYAxisUnitMappings: Record<
+	UniversalYAxisUnit,
+	Set<YAxisUnit>
+> = {
+	// Time
+	[UniversalYAxisUnit.NANOSECONDS]: new Set([
+		YAxisUnit.UCUM_NANOSECONDS,
+		YAxisUnit.OPEN_METRICS_NANOSECONDS,
+	]),
+	[UniversalYAxisUnit.MICROSECONDS]: new Set([
+		YAxisUnit.AWS_MICROSECONDS,
+		YAxisUnit.UCUM_MICROSECONDS,
+		YAxisUnit.OPEN_METRICS_MICROSECONDS,
+	]),
+	[UniversalYAxisUnit.MILLISECONDS]: new Set([
+		YAxisUnit.AWS_MILLISECONDS,
+		YAxisUnit.UCUM_MILLISECONDS,
+		YAxisUnit.OPEN_METRICS_MILLISECONDS,
+	]),
+	[UniversalYAxisUnit.SECONDS]: new Set([
+		YAxisUnit.AWS_SECONDS,
+		YAxisUnit.UCUM_SECONDS,
+		YAxisUnit.OPEN_METRICS_SECONDS,
+	]),
+	[UniversalYAxisUnit.MINUTES]: new Set([
+		YAxisUnit.UCUM_MINUTES,
+		YAxisUnit.OPEN_METRICS_MINUTES,
+	]),
+	[UniversalYAxisUnit.HOURS]: new Set([
+		YAxisUnit.UCUM_HOURS,
+		YAxisUnit.OPEN_METRICS_HOURS,
+	]),
+	[UniversalYAxisUnit.DAYS]: new Set([
+		YAxisUnit.UCUM_DAYS,
+		YAxisUnit.OPEN_METRICS_DAYS,
+	]),
+	[UniversalYAxisUnit.WEEKS]: new Set([YAxisUnit.UCUM_WEEKS]),
+
+	// Data
+	[UniversalYAxisUnit.BYTES]: new Set([
+		YAxisUnit.AWS_BYTES,
+		YAxisUnit.UCUM_BYTES,
+		YAxisUnit.OPEN_METRICS_BYTES,
+	]),
+	[UniversalYAxisUnit.KILOBYTES]: new Set([
+		YAxisUnit.AWS_KILOBYTES,
+		YAxisUnit.UCUM_KILOBYTES,
+		YAxisUnit.OPEN_METRICS_KILOBYTES,
+	]),
+	[UniversalYAxisUnit.MEGABYTES]: new Set([
+		YAxisUnit.AWS_MEGABYTES,
+		YAxisUnit.UCUM_MEGABYTES,
+		YAxisUnit.OPEN_METRICS_MEGABYTES,
+	]),
+	[UniversalYAxisUnit.GIGABYTES]: new Set([
+		YAxisUnit.AWS_GIGABYTES,
+		YAxisUnit.UCUM_GIGABYTES,
+		YAxisUnit.OPEN_METRICS_GIGABYTES,
+	]),
+	[UniversalYAxisUnit.TERABYTES]: new Set([
+		YAxisUnit.AWS_TERABYTES,
+		YAxisUnit.UCUM_TERABYTES,
+		YAxisUnit.OPEN_METRICS_TERABYTES,
+	]),
+	[UniversalYAxisUnit.PETABYTES]: new Set([
+		YAxisUnit.AWS_PETABYTES,
+		YAxisUnit.UCUM_PEBIBYTES,
+		YAxisUnit.OPEN_METRICS_PEBIBYTES,
+	]),
+	[UniversalYAxisUnit.EXABYTES]: new Set([
+		YAxisUnit.AWS_EXABYTES,
+		YAxisUnit.UCUM_EXABYTES,
+		YAxisUnit.OPEN_METRICS_EXABYTES,
+	]),
+	[UniversalYAxisUnit.ZETTABYTES]: new Set([
+		YAxisUnit.AWS_ZETTABYTES,
+		YAxisUnit.UCUM_ZETTABYTES,
+		YAxisUnit.OPEN_METRICS_ZETTABYTES,
+	]),
+	[UniversalYAxisUnit.YOTTABYTES]: new Set([
+		YAxisUnit.AWS_YOTTABYTES,
+		YAxisUnit.UCUM_YOTTABYTES,
+		YAxisUnit.OPEN_METRICS_YOTTABYTES,
+	]),
+
+	// Data Rate
+	[UniversalYAxisUnit.BYTES_SECOND]: new Set([
+		YAxisUnit.AWS_BYTES_SECOND,
+		YAxisUnit.UCUM_BYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_BYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.KILOBYTES_SECOND]: new Set([
+		YAxisUnit.AWS_KILOBYTES_SECOND,
+		YAxisUnit.UCUM_KILOBYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_KILOBYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.MEGABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_MEGABYTES_SECOND,
+		YAxisUnit.UCUM_MEGABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_MEGABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.GIGABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_GIGABYTES_SECOND,
+		YAxisUnit.UCUM_GIGABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_GIGABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.TERABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_TERABYTES_SECOND,
+		YAxisUnit.UCUM_TERABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_TERABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.PETABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_PETABYTES_SECOND,
+		YAxisUnit.UCUM_PETABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_PETABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.EXABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_EXABYTES_SECOND,
+		YAxisUnit.UCUM_EXABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_EXABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.ZETTABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_ZETTABYTES_SECOND,
+		YAxisUnit.UCUM_ZETTABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_ZETTABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.YOTTABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_YOTTABYTES_SECOND,
+		YAxisUnit.UCUM_YOTTABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_YOTTABYTES_SECOND,
+	]),
+
+	// Bits
+	[UniversalYAxisUnit.BITS]: new Set([
+		YAxisUnit.AWS_BITS,
+		YAxisUnit.UCUM_BITS,
+		YAxisUnit.OPEN_METRICS_BITS,
+	]),
+	[UniversalYAxisUnit.KILOBITS]: new Set([
+		YAxisUnit.AWS_KILOBITS,
+		YAxisUnit.UCUM_KILOBITS,
+		YAxisUnit.OPEN_METRICS_KILOBITS,
+	]),
+	[UniversalYAxisUnit.MEGABITS]: new Set([
+		YAxisUnit.AWS_MEGABITS,
+		YAxisUnit.UCUM_MEGABITS,
+		YAxisUnit.OPEN_METRICS_MEGABITS,
+	]),
+	[UniversalYAxisUnit.GIGABITS]: new Set([
+		YAxisUnit.AWS_GIGABITS,
+		YAxisUnit.UCUM_GIGABITS,
+		YAxisUnit.OPEN_METRICS_GIGABITS,
+	]),
+	[UniversalYAxisUnit.TERABITS]: new Set([
+		YAxisUnit.AWS_TERABITS,
+		YAxisUnit.UCUM_TERABITS,
+		YAxisUnit.OPEN_METRICS_TERABITS,
+	]),
+	[UniversalYAxisUnit.PETABITS]: new Set([
+		YAxisUnit.AWS_PETABITS,
+		YAxisUnit.UCUM_PETABITS,
+		YAxisUnit.OPEN_METRICS_PETABITS,
+	]),
+	[UniversalYAxisUnit.EXABITS]: new Set([
+		YAxisUnit.AWS_EXABITS,
+		YAxisUnit.UCUM_EXABITS,
+		YAxisUnit.OPEN_METRICS_EXABITS,
+	]),
+	[UniversalYAxisUnit.ZETTABITS]: new Set([
+		YAxisUnit.AWS_ZETTABITS,
+		YAxisUnit.UCUM_ZETTABITS,
+		YAxisUnit.OPEN_METRICS_ZETTABITS,
+	]),
+	[UniversalYAxisUnit.YOTTABITS]: new Set([
+		YAxisUnit.AWS_YOTTABITS,
+		YAxisUnit.UCUM_YOTTABITS,
+		YAxisUnit.OPEN_METRICS_YOTTABITS,
+	]),
+
+	// Bit Rate
+	[UniversalYAxisUnit.BITS_SECOND]: new Set([
+		YAxisUnit.AWS_BITS_SECOND,
+		YAxisUnit.UCUM_BITS_SECOND,
+		YAxisUnit.OPEN_METRICS_BITS_SECOND,
+	]),
+	[UniversalYAxisUnit.KILOBITS_SECOND]: new Set([
+		YAxisUnit.AWS_KILOBITS_SECOND,
+		YAxisUnit.UCUM_KILOBITS_SECOND,
+		YAxisUnit.OPEN_METRICS_KILOBITS_SECOND,
+	]),
+	[UniversalYAxisUnit.MEGABITS_SECOND]: new Set([
+		YAxisUnit.AWS_MEGABITS_SECOND,
+		YAxisUnit.UCUM_MEGABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_MEGABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.GIGABITS_SECOND]: new Set([
+		YAxisUnit.AWS_GIGABITS_SECOND,
+		YAxisUnit.UCUM_GIGABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_GIGABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.TERABITS_SECOND]: new Set([
+		YAxisUnit.AWS_TERABITS_SECOND,
+		YAxisUnit.UCUM_TERABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_TERABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.PETABITS_SECOND]: new Set([
+		YAxisUnit.AWS_PETABITS_SECOND,
+		YAxisUnit.UCUM_PETABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_PETABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.EXABITS_SECOND]: new Set([
+		YAxisUnit.AWS_EXABITS_SECOND,
+		YAxisUnit.UCUM_EXABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_EXABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.ZETTABITS_SECOND]: new Set([
+		YAxisUnit.AWS_ZETTABITS_SECOND,
+		YAxisUnit.UCUM_ZETTABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_ZETTABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.YOTTABITS_SECOND]: new Set([
+		YAxisUnit.AWS_YOTTABITS_SECOND,
+		YAxisUnit.UCUM_YOTTABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_YOTTABITS_SECOND,
+	]),
+
+	// Count
+	[UniversalYAxisUnit.COUNT]: new Set([
+		YAxisUnit.AWS_COUNT,
+		YAxisUnit.UCUM_COUNT,
+		YAxisUnit.OPEN_METRICS_COUNT,
+	]),
+	[UniversalYAxisUnit.COUNT_SECOND]: new Set([
+		YAxisUnit.AWS_COUNT_SECOND,
+		YAxisUnit.UCUM_COUNT_SECOND,
+		YAxisUnit.OPEN_METRICS_COUNT_SECOND,
+	]),
+
+	// Percent
+	[UniversalYAxisUnit.PERCENT]: new Set([
+		YAxisUnit.AWS_PERCENT,
+		YAxisUnit.UCUM_PERCENT,
+		YAxisUnit.OPEN_METRICS_PERCENT,
+	]),
+	[UniversalYAxisUnit.NONE]: new Set([
+		YAxisUnit.AWS_NONE,
+		YAxisUnit.UCUM_NONE,
+		YAxisUnit.OPEN_METRICS_NONE,
+	]),
+	[UniversalYAxisUnit.PERCENT_UNIT]: new Set([
+		YAxisUnit.OPEN_METRICS_PERCENT_UNIT,
+	]),
+
+	// Count Rate
+	[UniversalYAxisUnit.COUNT_MINUTE]: new Set([
+		YAxisUnit.UCUM_COUNTS_MINUTE,
+		YAxisUnit.OPEN_METRICS_COUNTS_MINUTE,
+	]),
+	[UniversalYAxisUnit.OPS_SECOND]: new Set([
+		YAxisUnit.UCUM_OPS_SECOND,
+		YAxisUnit.OPEN_METRICS_OPS_SECOND,
+	]),
+	[UniversalYAxisUnit.OPS_MINUTE]: new Set([
+		YAxisUnit.UCUM_OPS_MINUTE,
+		YAxisUnit.OPEN_METRICS_OPS_MINUTE,
+	]),
+	[UniversalYAxisUnit.REQUESTS_SECOND]: new Set([
+		YAxisUnit.UCUM_REQUESTS_SECOND,
+		YAxisUnit.OPEN_METRICS_REQUESTS_SECOND,
+	]),
+	[UniversalYAxisUnit.REQUESTS_MINUTE]: new Set([
+		YAxisUnit.UCUM_REQUESTS_MINUTE,
+		YAxisUnit.OPEN_METRICS_REQUESTS_MINUTE,
+	]),
+	[UniversalYAxisUnit.READS_SECOND]: new Set([
+		YAxisUnit.UCUM_READS_SECOND,
+		YAxisUnit.OPEN_METRICS_READS_SECOND,
+	]),
+	[UniversalYAxisUnit.WRITES_SECOND]: new Set([
+		YAxisUnit.UCUM_WRITES_SECOND,
+		YAxisUnit.OPEN_METRICS_WRITES_SECOND,
+	]),
+	[UniversalYAxisUnit.READS_MINUTE]: new Set([
+		YAxisUnit.UCUM_READS_MINUTE,
+		YAxisUnit.OPEN_METRICS_READS_MINUTE,
+	]),
+	[UniversalYAxisUnit.WRITES_MINUTE]: new Set([
+		YAxisUnit.UCUM_WRITES_MINUTE,
+		YAxisUnit.OPEN_METRICS_WRITES_MINUTE,
+	]),
+	[UniversalYAxisUnit.IOOPS_SECOND]: new Set([
+		YAxisUnit.UCUM_IOPS_SECOND,
+		YAxisUnit.OPEN_METRICS_IOPS_SECOND,
+	]),
+};
+
+// Mapping of universal y-axis units to their display labels
+export const Y_AXIS_UNIT_NAMES: Record<UniversalYAxisUnit, string> = {
+	[UniversalYAxisUnit.SECONDS]: 'Seconds (s)',
+	[UniversalYAxisUnit.MILLISECONDS]: 'Milliseconds (ms)',
+	[UniversalYAxisUnit.MICROSECONDS]: 'Microseconds (µs)',
+	[UniversalYAxisUnit.BYTES]: 'Bytes (B)',
+	[UniversalYAxisUnit.KILOBYTES]: 'Kilobytes (KB)',
+	[UniversalYAxisUnit.MEGABYTES]: 'Megabytes (MB)',
+	[UniversalYAxisUnit.GIGABYTES]: 'Gigabytes (GB)',
+	[UniversalYAxisUnit.TERABYTES]: 'Terabytes (TB)',
+	[UniversalYAxisUnit.PETABYTES]: 'Petabytes (PB)',
+	[UniversalYAxisUnit.EXABYTES]: 'Exabytes (EB)',
+	[UniversalYAxisUnit.ZETTABYTES]: 'Zettabytes (ZB)',
+	[UniversalYAxisUnit.YOTTABYTES]: 'Yottabytes (YB)',
+	[UniversalYAxisUnit.BITS]: 'Bits (b)',
+	[UniversalYAxisUnit.KILOBITS]: 'Kilobits (Kb)',
+	[UniversalYAxisUnit.MEGABITS]: 'Megabits (Mb)',
+	[UniversalYAxisUnit.GIGABITS]: 'Gigabits (Gb)',
+	[UniversalYAxisUnit.TERABITS]: 'Terabits (Tb)',
+	[UniversalYAxisUnit.PETABITS]: 'Petabits (Pb)',
+	[UniversalYAxisUnit.EXABITS]: 'Exabits (Eb)',
+	[UniversalYAxisUnit.ZETTABITS]: 'Zettabits (Zb)',
+	[UniversalYAxisUnit.YOTTABITS]: 'Yottabits (Yb)',
+	[UniversalYAxisUnit.BYTES_SECOND]: 'Bytes/sec',
+	[UniversalYAxisUnit.KILOBYTES_SECOND]: 'Kilobytes/sec',
+	[UniversalYAxisUnit.MEGABYTES_SECOND]: 'Megabytes/sec',
+	[UniversalYAxisUnit.GIGABYTES_SECOND]: 'Gigabytes/sec',
+	[UniversalYAxisUnit.TERABYTES_SECOND]: 'Terabytes/sec',
+	[UniversalYAxisUnit.PETABYTES_SECOND]: 'Petabytes/sec',
+	[UniversalYAxisUnit.EXABYTES_SECOND]: 'Exabytes/sec',
+	[UniversalYAxisUnit.ZETTABYTES_SECOND]: 'Zettabytes/sec',
+	[UniversalYAxisUnit.YOTTABYTES_SECOND]: 'Yottabytes/sec',
+	[UniversalYAxisUnit.BITS_SECOND]: 'Bits/sec',
+	[UniversalYAxisUnit.KILOBITS_SECOND]: 'Kilobits/sec',
+	[UniversalYAxisUnit.MEGABITS_SECOND]: 'Megabits/sec',
+	[UniversalYAxisUnit.GIGABITS_SECOND]: 'Gigabits/sec',
+	[UniversalYAxisUnit.TERABITS_SECOND]: 'Terabits/sec',
+	[UniversalYAxisUnit.PETABITS_SECOND]: 'Petabits/sec',
+	[UniversalYAxisUnit.EXABITS_SECOND]: 'Exabits/sec',
+	[UniversalYAxisUnit.ZETTABITS_SECOND]: 'Zettabits/sec',
+	[UniversalYAxisUnit.YOTTABITS_SECOND]: 'Yottabits/sec',
+	[UniversalYAxisUnit.COUNT]: 'Count',
+	[UniversalYAxisUnit.COUNT_SECOND]: 'Count/sec',
+	[UniversalYAxisUnit.PERCENT]: 'Percent (0 - 100)',
+	[UniversalYAxisUnit.NONE]: 'None',
+	[UniversalYAxisUnit.WEEKS]: 'Weeks',
+	[UniversalYAxisUnit.DAYS]: 'Days',
+	[UniversalYAxisUnit.HOURS]: 'Hours',
+	[UniversalYAxisUnit.MINUTES]: 'Minutes',
+	[UniversalYAxisUnit.NANOSECONDS]: 'Nanoseconds',
+	[UniversalYAxisUnit.COUNT_MINUTE]: 'Count/min',
+	[UniversalYAxisUnit.OPS_SECOND]: 'Ops/sec',
+	[UniversalYAxisUnit.OPS_MINUTE]: 'Ops/min',
+	[UniversalYAxisUnit.REQUESTS_SECOND]: 'Requests/sec',
+	[UniversalYAxisUnit.REQUESTS_MINUTE]: 'Requests/min',
+	[UniversalYAxisUnit.READS_SECOND]: 'Reads/sec',
+	[UniversalYAxisUnit.WRITES_SECOND]: 'Writes/sec',
+	[UniversalYAxisUnit.READS_MINUTE]: 'Reads/min',
+	[UniversalYAxisUnit.WRITES_MINUTE]: 'Writes/min',
+	[UniversalYAxisUnit.IOOPS_SECOND]: 'IOPS/sec',
+	[UniversalYAxisUnit.PERCENT_UNIT]: 'Percent (0.0 - 1.0)',
+};
+
+// Splitting the universal y-axis units into categories
+export const Y_AXIS_CATEGORIES = [
+	{
+		name: 'Time',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
+				id: UniversalYAxisUnit.SECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
+				id: UniversalYAxisUnit.MILLISECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MICROSECONDS],
+				id: UniversalYAxisUnit.MICROSECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NANOSECONDS],
+				id: UniversalYAxisUnit.NANOSECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MINUTES],
+				id: UniversalYAxisUnit.MINUTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HOURS],
+				id: UniversalYAxisUnit.HOURS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DAYS],
+				id: UniversalYAxisUnit.DAYS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WEEKS],
+				id: UniversalYAxisUnit.WEEKS,
+			},
+		],
+	},
+	{
+		name: 'Data',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
+				id: UniversalYAxisUnit.BYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES],
+				id: UniversalYAxisUnit.KILOBYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES],
+				id: UniversalYAxisUnit.MEGABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES],
+				id: UniversalYAxisUnit.GIGABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES],
+				id: UniversalYAxisUnit.TERABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES],
+				id: UniversalYAxisUnit.PETABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES],
+				id: UniversalYAxisUnit.EXABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES],
+				id: UniversalYAxisUnit.ZETTABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES],
+				id: UniversalYAxisUnit.YOTTABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS],
+				id: UniversalYAxisUnit.BITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS],
+				id: UniversalYAxisUnit.KILOBITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS],
+				id: UniversalYAxisUnit.MEGABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS],
+				id: UniversalYAxisUnit.GIGABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS],
+				id: UniversalYAxisUnit.TERABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS],
+				id: UniversalYAxisUnit.PETABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS],
+				id: UniversalYAxisUnit.EXABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS],
+				id: UniversalYAxisUnit.ZETTABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS],
+				id: UniversalYAxisUnit.YOTTABITS,
+			},
+		],
+	},
+	{
+		name: 'Data Rate',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
+				id: UniversalYAxisUnit.BYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES_SECOND],
+				id: UniversalYAxisUnit.KILOBYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES_SECOND],
+				id: UniversalYAxisUnit.MEGABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES_SECOND],
+				id: UniversalYAxisUnit.GIGABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES_SECOND],
+				id: UniversalYAxisUnit.TERABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES_SECOND],
+				id: UniversalYAxisUnit.PETABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES_SECOND],
+				id: UniversalYAxisUnit.EXABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES_SECOND],
+				id: UniversalYAxisUnit.ZETTABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES_SECOND],
+				id: UniversalYAxisUnit.YOTTABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS_SECOND],
+				id: UniversalYAxisUnit.BITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS_SECOND],
+				id: UniversalYAxisUnit.KILOBITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS_SECOND],
+				id: UniversalYAxisUnit.MEGABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS_SECOND],
+				id: UniversalYAxisUnit.GIGABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS_SECOND],
+				id: UniversalYAxisUnit.TERABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS_SECOND],
+				id: UniversalYAxisUnit.PETABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS_SECOND],
+				id: UniversalYAxisUnit.EXABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS_SECOND],
+				id: UniversalYAxisUnit.ZETTABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS_SECOND],
+				id: UniversalYAxisUnit.YOTTABITS_SECOND,
+			},
+		],
+	},
+	{
+		name: 'Count',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
+				id: UniversalYAxisUnit.COUNT,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_SECOND],
+				id: UniversalYAxisUnit.COUNT_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_MINUTE],
+				id: UniversalYAxisUnit.COUNT_MINUTE,
+			},
+		],
+	},
+	{
+		name: 'Operations',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
+				id: UniversalYAxisUnit.OPS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_MINUTE],
+				id: UniversalYAxisUnit.OPS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_SECOND],
+				id: UniversalYAxisUnit.REQUESTS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_MINUTE],
+				id: UniversalYAxisUnit.REQUESTS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_SECOND],
+				id: UniversalYAxisUnit.READS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_SECOND],
+				id: UniversalYAxisUnit.WRITES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_MINUTE],
+				id: UniversalYAxisUnit.READS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_MINUTE],
+				id: UniversalYAxisUnit.WRITES_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.IOOPS_SECOND],
+				id: UniversalYAxisUnit.IOOPS_SECOND,
+			},
+		],
+	},
+	{
+		name: 'Percentage',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
+				id: UniversalYAxisUnit.PERCENT,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT_UNIT],
+				id: UniversalYAxisUnit.PERCENT_UNIT,
+			},
+		],
+	},
+];

frontend/src/components/YAxisUnitSelector/index.ts

@@ -0,0 +1,3 @@
+import YAxisUnitSelector from './YAxisUnitSelector';
+
+export default YAxisUnitSelector;

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -0,0 +1,5 @@
+.y-axis-unit-selector-component {
+	.ant-select {
+		width: 220px;
+	}
+}

frontend/src/components/YAxisUnitSelector/types.ts

@@ -0,0 +1,365 @@
+export interface YAxisUnitSelectorProps {
+	value: string | undefined;
+	onChange: (value: UniversalYAxisUnit) => void;
+	placeholder?: string;
+	loading?: boolean;
+	disabled?: boolean;
+}
+
+export enum UniversalYAxisUnit {
+	// Time
+	WEEKS = 'wk',
+	DAYS = 'd',
+	HOURS = 'h',
+	MINUTES = 'min',
+	SECONDS = 's',
+	MICROSECONDS = 'us',
+	MILLISECONDS = 'ms',
+	NANOSECONDS = 'ns',
+
+	// Data
+	BYTES = 'By',
+	KILOBYTES = 'kBy',
+	MEGABYTES = 'MBy',
+	GIGABYTES = 'GBy',
+	TERABYTES = 'TBy',
+	PETABYTES = 'PBy',
+	EXABYTES = 'EBy',
+	ZETTABYTES = 'ZBy',
+	YOTTABYTES = 'YBy',
+
+	// Data Rate
+	BYTES_SECOND = 'By/s',
+	KILOBYTES_SECOND = 'kBy/s',
+	MEGABYTES_SECOND = 'MBy/s',
+	GIGABYTES_SECOND = 'GBy/s',
+	TERABYTES_SECOND = 'TBy/s',
+	PETABYTES_SECOND = 'PBy/s',
+	EXABYTES_SECOND = 'EBy/s',
+	ZETTABYTES_SECOND = 'ZBy/s',
+	YOTTABYTES_SECOND = 'YBy/s',
+
+	// Bits
+	BITS = 'bit',
+	KILOBITS = 'kbit',
+	MEGABITS = 'Mbit',
+	GIGABITS = 'Gbit',
+	TERABITS = 'Tbit',
+	PETABITS = 'Pbit',
+	EXABITS = 'Ebit',
+	ZETTABITS = 'Zbit',
+	YOTTABITS = 'Ybit',
+
+	// Bit Rate
+	BITS_SECOND = 'bit/s',
+	KILOBITS_SECOND = 'kbit/s',
+	MEGABITS_SECOND = 'Mbit/s',
+	GIGABITS_SECOND = 'Gbit/s',
+	TERABITS_SECOND = 'Tbit/s',
+	PETABITS_SECOND = 'Pbit/s',
+	EXABITS_SECOND = 'Ebit/s',
+	ZETTABITS_SECOND = 'Zbit/s',
+	YOTTABITS_SECOND = 'Ybit/s',
+
+	// Count
+	COUNT = '{count}',
+	COUNT_SECOND = '{count}/s',
+	COUNT_MINUTE = '{count}/min',
+
+	// Operations
+	OPS_SECOND = '{ops}/s',
+	OPS_MINUTE = '{ops}/min',
+
+	// Requests
+	REQUESTS_SECOND = '{req}/s',
+	REQUESTS_MINUTE = '{req}/min',
+
+	// Reads/Writes
+	READS_SECOND = '{read}/s',
+	WRITES_SECOND = '{write}/s',
+	READS_MINUTE = '{read}/min',
+	WRITES_MINUTE = '{write}/min',
+
+	// IO Operations
+	IOOPS_SECOND = '{iops}/s',
+
+	// Percent
+	PERCENT = '%',
+	PERCENT_UNIT = 'percentunit',
+	NONE = '1',
+}
+
+export enum YAxisUnit {
+	AWS_SECONDS = 'Seconds',
+	UCUM_SECONDS = 's',
+	OPEN_METRICS_SECONDS = 'seconds',
+
+	AWS_MICROSECONDS = 'Microseconds',
+	UCUM_MICROSECONDS = 'us',
+	OPEN_METRICS_MICROSECONDS = 'microseconds',
+
+	AWS_MILLISECONDS = 'Milliseconds',
+	UCUM_MILLISECONDS = 'ms',
+	OPEN_METRICS_MILLISECONDS = 'milliseconds',
+
+	AWS_BYTES = 'Bytes',
+	UCUM_BYTES = 'By',
+	OPEN_METRICS_BYTES = 'bytes',
+
+	AWS_KILOBYTES = 'Kilobytes',
+	UCUM_KILOBYTES = 'kBy',
+	OPEN_METRICS_KILOBYTES = 'kilobytes',
+
+	AWS_MEGABYTES = 'Megabytes',
+	UCUM_MEGABYTES = 'MBy',
+	OPEN_METRICS_MEGABYTES = 'megabytes',
+
+	AWS_GIGABYTES = 'Gigabytes',
+	UCUM_GIGABYTES = 'GBy',
+	OPEN_METRICS_GIGABYTES = 'gigabytes',
+
+	AWS_TERABYTES = 'Terabytes',
+	UCUM_TERABYTES = 'TBy',
+	OPEN_METRICS_TERABYTES = 'terabytes',
+
+	AWS_PETABYTES = 'Petabytes',
+	UCUM_PETABYTES = 'PBy',
+	OPEN_METRICS_PETABYTES = 'petabytes',
+
+	AWS_EXABYTES = 'Exabytes',
+	UCUM_EXABYTES = 'EBy',
+	OPEN_METRICS_EXABYTES = 'exabytes',
+
+	AWS_ZETTABYTES = 'Zettabytes',
+	UCUM_ZETTABYTES = 'ZBy',
+	OPEN_METRICS_ZETTABYTES = 'zettabytes',
+
+	AWS_YOTTABYTES = 'Yottabytes',
+	UCUM_YOTTABYTES = 'YBy',
+	OPEN_METRICS_YOTTABYTES = 'yottabytes',
+
+	AWS_BYTES_SECOND = 'Bytes/Second',
+	UCUM_BYTES_SECOND = 'By/s',
+	OPEN_METRICS_BYTES_SECOND = 'bytes_per_second',
+
+	AWS_KILOBYTES_SECOND = 'Kilobytes/Second',
+	UCUM_KILOBYTES_SECOND = 'kBy/s',
+	OPEN_METRICS_KILOBYTES_SECOND = 'kilobytes_per_second',
+
+	AWS_MEGABYTES_SECOND = 'Megabytes/Second',
+	UCUM_MEGABYTES_SECOND = 'MBy/s',
+	OPEN_METRICS_MEGABYTES_SECOND = 'megabytes_per_second',
+
+	AWS_GIGABYTES_SECOND = 'Gigabytes/Second',
+	UCUM_GIGABYTES_SECOND = 'GBy/s',
+	OPEN_METRICS_GIGABYTES_SECOND = 'gigabytes_per_second',
+
+	AWS_TERABYTES_SECOND = 'Terabytes/Second',
+	UCUM_TERABYTES_SECOND = 'TBy/s',
+	OPEN_METRICS_TERABYTES_SECOND = 'terabytes_per_second',
+
+	AWS_PETABYTES_SECOND = 'Petabytes/Second',
+	UCUM_PETABYTES_SECOND = 'PBy/s',
+	OPEN_METRICS_PETABYTES_SECOND = 'petabytes_per_second',
+
+	AWS_EXABYTES_SECOND = 'Exabytes/Second',
+	UCUM_EXABYTES_SECOND = 'EBy/s',
+	OPEN_METRICS_EXABYTES_SECOND = 'exabytes_per_second',
+
+	AWS_ZETTABYTES_SECOND = 'Zettabytes/Second',
+	UCUM_ZETTABYTES_SECOND = 'ZBy/s',
+	OPEN_METRICS_ZETTABYTES_SECOND = 'zettabytes_per_second',
+
+	AWS_YOTTABYTES_SECOND = 'Yottabytes/Second',
+	UCUM_YOTTABYTES_SECOND = 'YBy/s',
+	OPEN_METRICS_YOTTABYTES_SECOND = 'yottabytes_per_second',
+
+	AWS_BITS = 'Bits',
+	UCUM_BITS = 'bit',
+	OPEN_METRICS_BITS = 'bits',
+
+	AWS_KILOBITS = 'Kilobits',
+	UCUM_KILOBITS = 'kbit',
+	OPEN_METRICS_KILOBITS = 'kilobits',
+
+	AWS_MEGABITS = 'Megabits',
+	UCUM_MEGABITS = 'Mbit',
+	OPEN_METRICS_MEGABITS = 'megabits',
+
+	AWS_GIGABITS = 'Gigabits',
+	UCUM_GIGABITS = 'Gbit',
+	OPEN_METRICS_GIGABITS = 'gigabits',
+
+	AWS_TERABITS = 'Terabits',
+	UCUM_TERABITS = 'Tbit',
+	OPEN_METRICS_TERABITS = 'terabits',
+
+	AWS_PETABITS = 'Petabits',
+	UCUM_PETABITS = 'Pbit',
+	OPEN_METRICS_PETABITS = 'petabits',
+
+	AWS_EXABITS = 'Exabits',
+	UCUM_EXABITS = 'Ebit',
+	OPEN_METRICS_EXABITS = 'exabits',
+
+	AWS_ZETTABITS = 'Zettabits',
+	UCUM_ZETTABITS = 'Zbit',
+	OPEN_METRICS_ZETTABITS = 'zettabits',
+
+	AWS_YOTTABITS = 'Yottabits',
+	UCUM_YOTTABITS = 'Ybit',
+	OPEN_METRICS_YOTTABITS = 'yottabits',
+
+	AWS_BITS_SECOND = 'Bits/Second',
+	UCUM_BITS_SECOND = 'bit/s',
+	OPEN_METRICS_BITS_SECOND = 'bits_per_second',
+
+	AWS_KILOBITS_SECOND = 'Kilobits/Second',
+	UCUM_KILOBITS_SECOND = 'kbit/s',
+	OPEN_METRICS_KILOBITS_SECOND = 'kilobits_per_second',
+
+	AWS_MEGABITS_SECOND = 'Megabits/Second',
+	UCUM_MEGABITS_SECOND = 'Mbit/s',
+	OPEN_METRICS_MEGABITS_SECOND = 'megabits_per_second',
+
+	AWS_GIGABITS_SECOND = 'Gigabits/Second',
+	UCUM_GIGABITS_SECOND = 'Gbit/s',
+	OPEN_METRICS_GIGABITS_SECOND = 'gigabits_per_second',
+
+	AWS_TERABITS_SECOND = 'Terabits/Second',
+	UCUM_TERABITS_SECOND = 'Tbit/s',
+	OPEN_METRICS_TERABITS_SECOND = 'terabits_per_second',
+
+	AWS_PETABITS_SECOND = 'Petabits/Second',
+	UCUM_PETABITS_SECOND = 'Pbit/s',
+	OPEN_METRICS_PETABITS_SECOND = 'petabits_per_second',
+
+	AWS_EXABITS_SECOND = 'Exabits/Second',
+	UCUM_EXABITS_SECOND = 'Ebit/s',
+	OPEN_METRICS_EXABITS_SECOND = 'exabits_per_second',
+
+	AWS_ZETTABITS_SECOND = 'Zettabits/Second',
+	UCUM_ZETTABITS_SECOND = 'Zbit/s',
+	OPEN_METRICS_ZETTABITS_SECOND = 'zettabits_per_second',
+
+	AWS_YOTTABITS_SECOND = 'Yottabits/Second',
+	UCUM_YOTTABITS_SECOND = 'Ybit/s',
+	OPEN_METRICS_YOTTABITS_SECOND = 'yottabits_per_second',
+
+	AWS_COUNT = 'Count',
+	UCUM_COUNT = '{count}',
+	OPEN_METRICS_COUNT = 'count',
+
+	AWS_COUNT_SECOND = 'Count/Second',
+	UCUM_COUNT_SECOND = '{count}/s',
+	OPEN_METRICS_COUNT_SECOND = 'count_per_second',
+
+	AWS_PERCENT = 'Percent',
+	UCUM_PERCENT = '%',
+	OPEN_METRICS_PERCENT = 'ratio',
+
+	AWS_NONE = 'None',
+	UCUM_NONE = '1',
+	OPEN_METRICS_NONE = 'none',
+
+	UCUM_NANOSECONDS = 'ns',
+	OPEN_METRICS_NANOSECONDS = 'nanoseconds',
+
+	UCUM_MINUTES = 'min',
+	OPEN_METRICS_MINUTES = 'minutes',
+
+	UCUM_HOURS = 'h',
+	OPEN_METRICS_HOURS = 'hours',
+
+	UCUM_DAYS = 'd',
+	OPEN_METRICS_DAYS = 'days',
+
+	UCUM_WEEKS = 'wk',
+	OPEN_METRICS_WEEKS = 'weeks',
+
+	UCUM_KIBIBYTES = 'KiBy',
+	OPEN_METRICS_KIBIBYTES = 'kibibytes',
+
+	UCUM_MEBIBYTES = 'MiBy',
+	OPEN_METRICS_MEBIBYTES = 'mebibytes',
+
+	UCUM_GIBIBYTES = 'GiBy',
+	OPEN_METRICS_GIBIBYTES = 'gibibytes',
+
+	UCUM_TEBIBYTES = 'TiBy',
+	OPEN_METRICS_TEBIBYTES = 'tebibytes',
+
+	UCUM_PEBIBYTES = 'PiBy',
+	OPEN_METRICS_PEBIBYTES = 'pebibytes',
+
+	UCUM_KIBIBYTES_SECOND = 'KiBy/s',
+	OPEN_METRICS_KIBIBYTES_SECOND = 'kibibytes_per_second',
+
+	UCUM_KIBIBITS_SECOND = 'Kibit/s',
+	OPEN_METRICS_KIBIBITS_SECOND = 'kibibits_per_second',
+
+	UCUM_MEBIBYTES_SECOND = 'MiBy/s',
+	OPEN_METRICS_MEBIBYTES_SECOND = 'mebibytes_per_second',
+
+	UCUM_MEBIBITS_SECOND = 'Mibit/s',
+	OPEN_METRICS_MEBIBITS_SECOND = 'mebibits_per_second',
+
+	UCUM_GIBIBYTES_SECOND = 'GiBy/s',
+	OPEN_METRICS_GIBIBYTES_SECOND = 'gibibytes_per_second',
+
+	UCUM_GIBIBITS_SECOND = 'Gibit/s',
+	OPEN_METRICS_GIBIBITS_SECOND = 'gibibits_per_second',
+
+	UCUM_TEBIBYTES_SECOND = 'TiBy/s',
+	OPEN_METRICS_TEBIBYTES_SECOND = 'tebibytes_per_second',
+
+	UCUM_TEBIBITS_SECOND = 'Tibit/s',
+	OPEN_METRICS_TEBIBITS_SECOND = 'tebibits_per_second',
+
+	UCUM_PEBIBYTES_SECOND = 'PiBy/s',
+	OPEN_METRICS_PEBIBYTES_SECOND = 'pebibytes_per_second',
+
+	UCUM_PEBIBITS_SECOND = 'Pibit/s',
+	OPEN_METRICS_PEBIBITS_SECOND = 'pebibits_per_second',
+
+	UCUM_TRUE_FALSE = '{bool}',
+	OPEN_METRICS_TRUE_FALSE = 'boolean_true_false',
+
+	UCUM_YES_NO = '{bool}',
+	OPEN_METRICS_YES_NO = 'boolean_yes_no',
+
+	UCUM_COUNTS_SECOND = '{count}/s',
+	OPEN_METRICS_COUNTS_SECOND = 'counts_per_second',
+
+	UCUM_OPS_SECOND = '{ops}/s',
+	OPEN_METRICS_OPS_SECOND = 'ops_per_second',
+
+	UCUM_REQUESTS_SECOND = '{requests}/s',
+	OPEN_METRICS_REQUESTS_SECOND = 'requests_per_second',
+
+	UCUM_REQUESTS_MINUTE = '{requests}/min',
+	OPEN_METRICS_REQUESTS_MINUTE = 'requests_per_minute',
+
+	UCUM_READS_SECOND = '{reads}/s',
+	OPEN_METRICS_READS_SECOND = 'reads_per_second',
+
+	UCUM_WRITES_SECOND = '{writes}/s',
+	OPEN_METRICS_WRITES_SECOND = 'writes_per_second',
+
+	UCUM_IOPS_SECOND = '{iops}/s',
+	OPEN_METRICS_IOPS_SECOND = 'io_ops_per_second',
+
+	UCUM_COUNTS_MINUTE = '{count}/min',
+	OPEN_METRICS_COUNTS_MINUTE = 'counts_per_minute',
+
+	UCUM_OPS_MINUTE = '{ops}/min',
+	OPEN_METRICS_OPS_MINUTE = 'ops_per_minute',
+
+	UCUM_READS_MINUTE = '{reads}/min',
+	OPEN_METRICS_READS_MINUTE = 'reads_per_minute',
+
+	UCUM_WRITES_MINUTE = '{writes}/min',
+	OPEN_METRICS_WRITES_MINUTE = 'writes_per_minute',
+
+	OPEN_METRICS_PERCENT_UNIT = 'percentunit',
+}

frontend/src/components/YAxisUnitSelector/utils.tsx

@@ -0,0 +1,33 @@
+import { UniversalYAxisUnitMappings, Y_AXIS_UNIT_NAMES } from './constants';
+import { UniversalYAxisUnit, YAxisUnit } from './types';
+
+export const mapMetricUnitToUniversalUnit = (
+	unit: string | undefined,
+): UniversalYAxisUnit | null => {
+	if (!unit) {
+		return null;
+	}
+
+	const universalUnit = Object.values(UniversalYAxisUnit).find(
+		(u) => UniversalYAxisUnitMappings[u].has(unit as YAxisUnit) || unit === u,
+	);
+
+	return universalUnit || (unit as UniversalYAxisUnit) || null;
+};
+
+export const getUniversalNameFromMetricUnit = (
+	unit: string | undefined,
+): string => {
+	if (!unit) {
+		return '-';
+	}
+
+	const universalUnit = mapMetricUnitToUniversalUnit(unit);
+	if (!universalUnit) {
+		return unit;
+	}
+
+	const universalName = Y_AXIS_UNIT_NAMES[universalUnit];
+
+	return universalName || unit || '-';
+};

frontend/src/constants/antlrQueryConstants.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 export const OPERATORS = {
 	IN: 'IN',
 	LIKE: 'LIKE',
@@ -21,6 +23,44 @@ export const QUERY_BUILDER_FUNCTIONS = {
 	HASALL: 'hasAll',
 };
 
+export function negateOperator(operatorOrFunction: string): string {
+	// Special cases for equals/not equals
+	if (operatorOrFunction === OPERATORS['=']) {
+		return OPERATORS['!='];
+	}
+	if (operatorOrFunction === OPERATORS['!=']) {
+		return OPERATORS['='];
+	}
+	// For all other operators and functions, add NOT in front
+	return `${OPERATORS.NOT} ${operatorOrFunction}`;
+}
+
+export enum DEPRECATED_OPERATORS {
+	REGEX = 'regex',
+	NIN = 'nin',
+	NREGEX = 'nregex',
+	NLIKE = 'nlike',
+	NILIKE = 'nilike',
+	NEXTISTS = 'nexists',
+	NCONTAINS = 'ncontains',
+	NHAS = 'nhas',
+	NHASANY = 'nhasany',
+	NHASALL = 'nhasall',
+}
+
+export const DEPRECATED_OPERATORS_MAP = {
+	[DEPRECATED_OPERATORS.REGEX]: OPERATORS.REGEXP,
+	[DEPRECATED_OPERATORS.NIN]: negateOperator(OPERATORS.IN),
+	[DEPRECATED_OPERATORS.NREGEX]: negateOperator(OPERATORS.REGEXP),
+	[DEPRECATED_OPERATORS.NLIKE]: negateOperator(OPERATORS.LIKE),
+	[DEPRECATED_OPERATORS.NILIKE]: negateOperator(OPERATORS.ILIKE),
+	[DEPRECATED_OPERATORS.NEXTISTS]: negateOperator(OPERATORS.EXISTS),
+	[DEPRECATED_OPERATORS.NCONTAINS]: negateOperator(OPERATORS.CONTAINS),
+	[DEPRECATED_OPERATORS.NHAS]: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
+	[DEPRECATED_OPERATORS.NHASANY]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASANY),
+	[DEPRECATED_OPERATORS.NHASALL]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASALL),
+};
+
 export const NON_VALUE_OPERATORS = [OPERATORS.EXISTS];
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -82,15 +122,3 @@ export const queryOperatorSuggestions = [
 	{ label: OPERATORS.NOT, type: 'operator', info: 'Not' },
 	...negationQueryOperatorSuggestions,
 ];
-
-export function negateOperator(operatorOrFunction: string): string {
-	// Special cases for equals/not equals
-	if (operatorOrFunction === OPERATORS['=']) {
-		return OPERATORS['!='];
-	}
-	if (operatorOrFunction === OPERATORS['!=']) {
-		return OPERATORS['='];
-	}
-	// For all other operators and functions, add NOT in front
-	return `${OPERATORS.NOT} ${operatorOrFunction}`;
-}

frontend/src/constants/query.ts

@@ -46,6 +46,7 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	summaryFilters = 'summaryFilters',
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',

frontend/src/constants/routes.ts

@@ -77,9 +77,9 @@ const ROUTES = {
 	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
-	METER_EXPLORER_BASE: '/meter-explorer',
-	METER_EXPLORER: '/meter-explorer',
-	METER_EXPLORER_VIEWS: '/meter-explorer/views',
+	METER: '/meter',
+	METER_EXPLORER: '/meter/explorer',
+	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 } as const;
 

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/FullView/WidgetFullView.styles.scss

@@ -4,7 +4,9 @@
 	overflow-y: hidden;
 
 	.full-view-header-container {
-		height: 40px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
 	}
 
 	.graph-container {

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import './WidgetFullView.styles.scss';
 
 import {
@@ -8,24 +9,31 @@ import {
 import { Button, Input, Spin } from 'antd';
 import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import useDrilldown from 'container/GridCardLayout/GridCard/FullView/useDrilldown';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import {
 	timeItems,
 	timePreferance,
 } from 'container/NewWidget/RightContainer/timeItems';
 import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
+import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useChartMutable } from 'hooks/useChartMutable';
+import useComponentPermission from 'hooks/useComponentPermission';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
+import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -52,6 +60,7 @@ function FullView({
 	onClickHandler,
 	customOnDragSelect,
 	setCurrentGraphRef,
+	enableDrillDown = false,
 }: FullViewProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const { selectedTime: globalSelectedTime } = useSelector<
@@ -63,12 +72,16 @@ function FullView({
 	const location = useLocation();
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
+	const { handleRunQuery } = useQueryBuilder();
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
 	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const { user } = useAppContext();
+
+	const [editWidget] = useComponentPermission(['edit_widget'], user.role);
 
 	const getSelectedTime = useCallback(
 		() =>
@@ -114,6 +127,13 @@ function FullView({
 		};
 	});
 
+	const { dashboardEditView, handleResetQuery, showResetQuery } = useDrilldown({
+		enableDrillDown,
+		widget,
+		setRequestData,
+		selectedDashboard,
+	});
+
 	useEffect(() => {
 		setRequestData((prev) => ({
 			...prev,
@@ -204,71 +224,117 @@ function FullView({
 
 	return (
 		<div className="full-view-container">
-			<div className="full-view-header-container">
-				{fullViewOptions && (
-					<TimeContainer $panelType={widget.panelTypes}>
-						{response.isFetching && (
-							<Spin spinning indicator={<LoadingOutlined spin />} />
+			<OverlayScrollbar>
+				<>
+					<div className="full-view-header-container">
+						{fullViewOptions && (
+							<TimeContainer $panelType={widget.panelTypes}>
+								{enableDrillDown && (
+									<div className="drildown-options-container">
+										{showResetQuery && (
+											<Button type="link" onClick={handleResetQuery}>
+												Reset Query
+											</Button>
+										)}
+										{editWidget && (
+											<Button
+												className="switch-edit-btn"
+												disabled={response.isFetching || response.isLoading}
+												onClick={(): void => {
+													if (dashboardEditView) {
+														safeNavigate(dashboardEditView);
+													}
+												}}
+											>
+												Switch to Edit Mode
+											</Button>
+										)}
+									</div>
+								)}
+								<div className="time-container">
+									{response.isFetching && (
+										<Spin spinning indicator={<LoadingOutlined spin />} />
+									)}
+									<TimePreference
+										selectedTime={selectedTime}
+										setSelectedTime={setSelectedTime}
+									/>
+									<Button
+										style={{
+											marginLeft: '4px',
+										}}
+										onClick={(): void => {
+											response.refetch();
+										}}
+										type="primary"
+										icon={<SyncOutlined />}
+									/>
+								</div>
+							</TimeContainer>
 						)}
-						<TimePreference
-							selectedTime={selectedTime}
-							setSelectedTime={setSelectedTime}
-						/>
-						<Button
-							style={{
-								marginLeft: '4px',
-							}}
-							onClick={(): void => {
-								response.refetch();
-							}}
-							type="primary"
-							icon={<SyncOutlined />}
-						/>
-					</TimeContainer>
-				)}
-			</div>
+						{enableDrillDown && (
+							<>
+								<QueryBuilderV2
+									panelType={widget.panelTypes}
+									version={selectedDashboard?.data?.version || 'v3'}
+									isListViewPanel={widget.panelTypes === PANEL_TYPES.LIST}
+									// filterConfigs={filterConfigs}
+									// queryComponents={queryComponents}
+								/>
+								<RightToolbarActions
+									onStageRunQuery={(): void => {
+										handleRunQuery(true, true);
+									}}
+								/>
+							</>
+						)}
+					</div>
 
-			<div
-				className={cx('graph-container', {
-					disabled: isDashboardLocked,
-					'height-widget': widget?.mergeAllActiveQueries || widget?.stackedBarChart,
-					'list-graph-container': isListView,
-				})}
-				ref={fullViewRef}
-			>
-				<GraphContainer
-					style={{
-						height: isListView ? '100%' : '90%',
-					}}
-					isGraphLegendToggleAvailable={canModifyChart}
-				>
-					{isTablePanel && (
-						<Input
-							addonBefore={<SearchOutlined size={14} />}
-							className="global-search"
-							placeholder="Search..."
-							allowClear
-							key={widget.id}
-							onChange={(e): void => {
-								setSearchTerm(e.target.value || '');
+					<div
+						className={cx('graph-container', {
+							disabled: isDashboardLocked,
+							'height-widget':
+								widget?.mergeAllActiveQueries || widget?.stackedBarChart,
+							'list-graph-container': isListView,
+						})}
+						ref={fullViewRef}
+					>
+						<GraphContainer
+							style={{
+								height: isListView ? '100%' : '90%',
 							}}
-						/>
-					)}
-					<PanelWrapper
-						queryResponse={response}
-						widget={widget}
-						setRequestData={setRequestData}
-						isFullViewMode
-						onToggleModelHandler={onToggleModelHandler}
-						setGraphVisibility={setGraphsVisibilityStates}
-						graphVisibility={graphsVisibilityStates}
-						onDragSelect={customOnDragSelect ?? onDragSelect}
-						tableProcessedDataRef={tableProcessedDataRef}
-						searchTerm={searchTerm}
-						onClickHandler={onClickHandler}
-					/>
-				</GraphContainer>
-			</div>
+							isGraphLegendToggleAvailable={canModifyChart}
+						>
+							{isTablePanel && (
+								<Input
+									addonBefore={<SearchOutlined size={14} />}
+									className="global-search"
+									placeholder="Search..."
+									allowClear
+									key={widget.id}
+									onChange={(e): void => {
+										setSearchTerm(e.target.value || '');
+									}}
+								/>
+							)}
+							<PanelWrapper
+								queryResponse={response}
+								widget={widget}
+								setRequestData={setRequestData}
+								isFullViewMode
+								onToggleModelHandler={onToggleModelHandler}
+								setGraphVisibility={setGraphsVisibilityStates}
+								graphVisibility={graphsVisibilityStates}
+								onDragSelect={customOnDragSelect ?? onDragSelect}
+								tableProcessedDataRef={tableProcessedDataRef}
+								searchTerm={searchTerm}
+								onClickHandler={onClickHandler}
+								enableDrillDown={enableDrillDown}
+							/>
+						</GraphContainer>
+					</div>
+				</>
+			</OverlayScrollbar>
 		</div>
 	);
 }

frontend/src/container/GridCardLayout/GridCard/FullView/styles.ts

@@ -18,6 +18,7 @@ export const NotFoundContainer = styled.div`
 export const TimeContainer = styled.div<Props>`
 	display: flex;
 	justify-content: flex-end;
+	gap: 16px;
 	align-items: center;
 	${({ $panelType }): FlattenSimpleInterpolation =>
 		$panelType === PANEL_TYPES.TABLE
@@ -25,6 +26,10 @@ export const TimeContainer = styled.div<Props>`
 					margin-bottom: 1rem;
 			  `
 			: css``}
+
+	.time-container {
+		display: flex;
+	}
 `;
 
 export const GraphContainer = styled.div<GraphContainerProps>`

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -59,6 +59,7 @@ export interface FullViewProps {
 	isDependedDataLoaded?: boolean;
 	onToggleModelHandler?: GraphManagerProps['onToggleModelHandler'];
 	setCurrentGraphRef: Dispatch<SetStateAction<RefObject<HTMLDivElement> | null>>;
+	enableDrillDown?: boolean;
 }
 
 export interface GraphManagerProps extends UplotProps {

frontend/src/container/GridCardLayout/GridCard/FullView/useDrilldown.tsx

@@ -0,0 +1,84 @@
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
+
+export interface DrilldownQueryProps {
+	widget: Widgets;
+	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	enableDrillDown: boolean;
+	selectedDashboard: Dashboard | undefined;
+}
+
+export interface UseDrilldownReturn {
+	dashboardEditView: string;
+	handleResetQuery: () => void;
+	showResetQuery: boolean;
+}
+
+const useDrilldown = ({
+	enableDrillDown,
+	widget,
+	setRequestData,
+	selectedDashboard,
+}: DrilldownQueryProps): UseDrilldownReturn => {
+	const isMounted = useRef(false);
+	const { redirectWithQueryBuilderData, currentQuery } = useQueryBuilder();
+	const compositeQuery = useGetCompositeQueryParam();
+
+	useEffect(() => {
+		if (enableDrillDown && !!compositeQuery) {
+			setRequestData((prev) => ({
+				...prev,
+				query: compositeQuery,
+			}));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentQuery, compositeQuery]);
+
+	// update composite query with widget query if composite query is not present in url.
+	// Composite query should be in the url if switch to edit mode is clicked or drilldown happens from dashboard.
+	useEffect(() => {
+		if (enableDrillDown && !isMounted.current) {
+			redirectWithQueryBuilderData(compositeQuery || widget.query);
+		}
+		isMounted.current = true;
+	}, [widget, enableDrillDown, compositeQuery, redirectWithQueryBuilderData]);
+
+	const dashboardEditView = selectedDashboard?.id
+		? generateExportToDashboardLink({
+				query: currentQuery,
+				panelType: widget.panelTypes,
+				dashboardId: selectedDashboard?.id || '',
+				widgetId: widget.id,
+		  })
+		: '';
+
+	const showResetQuery = useMemo(
+		() =>
+			JSON.stringify(widget.query?.builder) !==
+			JSON.stringify(compositeQuery?.builder),
+		[widget.query, compositeQuery],
+	);
+
+	const handleResetQuery = useCallback((): void => {
+		redirectWithQueryBuilderData(widget.query);
+	}, [redirectWithQueryBuilderData, widget.query]);
+
+	return {
+		dashboardEditView,
+		handleResetQuery,
+		showResetQuery,
+	};
+};
+
+export default useDrilldown;

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

@@ -62,6 +62,7 @@ function WidgetGraphComponent({
 	customErrorMessage,
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
+	enableDrillDown,
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
@@ -236,6 +237,7 @@ function WidgetGraphComponent({
 	const onToggleModelHandler = (): void => {
 		const existingSearchParams = new URLSearchParams(search);
 		existingSearchParams.delete(QueryParams.expandedWidgetId);
+		existingSearchParams.delete(QueryParams.compositeQuery);
 		const updatedQueryParams = Object.fromEntries(existingSearchParams.entries());
 		if (queryResponse.data?.payload) {
 			const {
@@ -364,6 +366,7 @@ function WidgetGraphComponent({
 					onClickHandler={onClickHandler ?? graphClickHandler}
 					customOnDragSelect={customOnDragSelect}
 					setCurrentGraphRef={setCurrentGraphRef}
+					enableDrillDown={enableDrillDown}
 				/>
 			</Modal>
 
@@ -414,6 +417,7 @@ function WidgetGraphComponent({
 						onOpenTraceBtnClick={onOpenTraceBtnClick}
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
+						enableDrillDown={enableDrillDown}
 					/>
 				</div>
 			)}
@@ -426,6 +430,7 @@ WidgetGraphComponent.defaultProps = {
 	setLayout: undefined,
 	onClickHandler: undefined,
 	customTimeRangeWindowForCoRelation: undefined,
+	enableDrillDown: false,
 };
 
 export default WidgetGraphComponent;

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

@@ -53,6 +53,7 @@ function GridCardGraph({
 	customTimeRange,
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
+	enableDrillDown,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -317,6 +318,7 @@ function GridCardGraph({
 					customErrorMessage={isInternalServerError ? customErrorMessage : undefined}
 					customOnRowClick={customOnRowClick}
 					customTimeRangeWindowForCoRelation={customTimeRangeWindowForCoRelation}
+					enableDrillDown={enableDrillDown}
 				/>
 			)}
 		</div>
@@ -332,6 +334,7 @@ GridCardGraph.defaultProps = {
 	version: 'v3',
 	analyticsEvent: undefined,
 	customTimeRangeWindowForCoRelation: undefined,
+	enableDrillDown: false,
 };
 
 export default memo(GridCardGraph);

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -41,6 +41,7 @@ export interface WidgetGraphComponentProps {
 	customErrorMessage?: string;
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
+	enableDrillDown?: boolean;
 }
 
 export interface GridCardGraphProps {
@@ -69,6 +70,7 @@ export interface GridCardGraphProps {
 	};
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
+	enableDrillDown?: boolean;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -53,11 +53,12 @@ import { WidgetRowHeader } from './WidgetRow';
 
 interface GraphLayoutProps {
 	handle: FullScreenHandle;
+	enableDrillDown?: boolean;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function GraphLayout(props: GraphLayoutProps): JSX.Element {
-	const { handle } = props;
+	const { handle, enableDrillDown = false } = props;
 	const { safeNavigate } = useSafeNavigate();
 	const {
 		selectedDashboard,
@@ -584,6 +585,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									version={ENTITY_VERSION_V5}
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
+									enableDrillDown={enableDrillDown}
 								/>
 							</Card>
 						</CardContainer>
@@ -670,3 +672,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 }
 
 export default GraphLayout;
+
+GraphLayout.defaultProps = {
+	enableDrillDown: false,
+};

frontend/src/container/GridCardLayout/index.tsx

@@ -4,10 +4,17 @@ import GraphLayoutContainer from './GridCardLayout';
 
 interface GridGraphProps {
 	handle: FullScreenHandle;
+	enableDrillDown?: boolean;
 }
 function GridGraph(props: GridGraphProps): JSX.Element {
-	const { handle } = props;
-	return <GraphLayoutContainer handle={handle} />;
+	const { handle, enableDrillDown = false } = props;
+	return (
+		<GraphLayoutContainer handle={handle} enableDrillDown={enableDrillDown} />
+	);
 }
 
 export default GridGraph;
+
+GridGraph.defaultProps = {
+	enableDrillDown: false,
+};

frontend/src/container/GridTableComponent/index.tsx

@@ -46,6 +46,7 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
+	panelType,
 	...props
 }: GridTableComponentProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
@@ -266,6 +267,7 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
+				panelType={panelType}
 				onRow={
 					openTracesButton || customOnRowClick
 						? (record): React.HTMLAttributes<HTMLElement> => ({

frontend/src/container/GridTableComponent/types.ts

@@ -1,4 +1,5 @@
 import { TableProps } from 'antd';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { LogsExplorerTableProps } from 'container/LogsExplorerTable/LogsExplorerTable.interfaces';
 import {
 	ThresholdOperators,
@@ -6,7 +7,7 @@ import {
 } from 'container/NewWidget/RightContainer/Threshold/types';
 import { QueryTableProps } from 'container/QueryTable/QueryTable.intefaces';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { ColumnUnit } from 'types/api/dashboard/getAll';
+import { ColumnUnit, ContextLinksData } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export type GridTableComponentProps = {
@@ -22,6 +23,9 @@ export type GridTableComponentProps = {
 	widgetId?: string;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
+	enableDrillDown?: boolean;
+	contextLinks?: ContextLinksData;
+	panelType?: PANEL_TYPES;
 } & Pick<LogsExplorerTableProps, 'data'> &
 	Omit<TableProps<RowData>, 'columns' | 'dataSource'>;
 

frontend/src/container/GridTableComponent/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { ColumnsType, ColumnType } from 'antd/es/table';
+import { ColumnType } from 'antd/es/table';
 import { convertUnit } from 'container/NewWidget/RightContainer/dataFormatCategories';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { QUERY_TABLE_CONFIG } from 'container/QueryTable/config';
@@ -9,6 +9,12 @@ import { isEmpty, isNaN } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 
+// Custom column type that extends ColumnType to include isValueColumn
+export interface CustomDataColumnType<T> extends ColumnType<T> {
+	isValueColumn?: boolean;
+	queryName?: string;
+}
+
 // Helper function to evaluate the condition based on the operator
 function evaluateCondition(
 	operator: string | undefined,
@@ -180,9 +186,9 @@ export function createColumnsAndDataSource(
 	data: TableData,
 	currentQuery: Query,
 	renderColumnCell?: QueryTableProps['renderColumnCell'],
-): { columns: ColumnsType<RowData>; dataSource: RowData[] } {
-	const columns: ColumnsType<RowData> =
-		data.columns?.reduce<ColumnsType<RowData>>((acc, item) => {
+): { columns: CustomDataColumnType<RowData>[]; dataSource: RowData[] } {
+	const columns: CustomDataColumnType<RowData>[] =
+		data.columns?.reduce<CustomDataColumnType<RowData>[]>((acc, item) => {
 			// is the column is the value column then we need to check for the available legend
 			const legend = item.isValueColumn
 				? getQueryLegend(currentQuery, item.queryName)
@@ -193,11 +199,13 @@ export function createColumnsAndDataSource(
 					(query) => query.queryName === item.queryName,
 				)?.aggregations?.length || 0;
 
-			const column: ColumnType<RowData> = {
+			const column: CustomDataColumnType<RowData> = {
 				dataIndex: item.id || item.name,
 				// if no legend present then rely on the column name value
 				title: !isNewAggregation && !isEmpty(legend) ? legend : item.name,
 				width: QUERY_TABLE_CONFIG.width,
+				isValueColumn: item.isValueColumn,
+				queryName: item.queryName,
 				render: renderColumnCell && renderColumnCell[item.name],
 				sorter: (a: RowData, b: RowData): number => sortFunction(a, b, item),
 			};

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

@@ -520,12 +520,6 @@ function ClusterDetails({
 								>
 									Cluster Name
 								</Typography.Text>
-								<Typography.Text
-									type="secondary"
-									className="entity-details-metadata-label"
-								>
-									Cluster Name
-								</Typography.Text>
 							</div>
 							<div className="values-row">
 								<Typography.Text className="entity-details-metadata-value">
@@ -533,9 +527,6 @@ function ClusterDetails({
 										{cluster.meta.k8s_cluster_name}
 									</Tooltip>
 								</Typography.Text>
-								<Typography.Text className="entity-details-metadata-value">
-									<Tooltip title="Cluster name">{cluster.meta.k8s_cluster_name}</Tooltip>
-								</Typography.Text>
 							</div>
 						</div>
 					</div>

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

@@ -0,0 +1,351 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/config';
+import * as useQueryBuilderHooks from 'hooks/queryBuilder/useQueryBuilder';
+import * as appContextHooks from 'providers/App/App';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import EntityEvents from '../EntityEvents';
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+
+const mockUseQuery = jest.fn();
+jest.mock('react-query', () => ({
+	useQuery: (queryKey: any, queryFn: any, options: any): any =>
+		mockUseQuery(queryKey, queryFn, options),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}/`,
+	}),
+}));
+
+jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+	user: {
+		role: 'admin',
+	},
+	activeLicenseV3: {
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		license: {
+			license_key: 'test-license-key',
+			license_type: 'trial',
+			org_id: 'test-org-id',
+			plan_id: 'test-plan-id',
+			plan_name: 'test-plan-name',
+			plan_type: 'trial',
+			plan_version: 'test-plan-version',
+		},
+	},
+} as any);
+
+const mockUseQueryBuilderData = {
+	handleRunQuery: jest.fn(),
+	stagedQuery: initialQueriesMap[DataSource.METRICS],
+	updateAllQueriesOperators: jest.fn(),
+	currentQuery: initialQueriesMap[DataSource.METRICS],
+	resetQuery: jest.fn(),
+	redirectWithQueryBuilderData: jest.fn(),
+	isStagedQueryUpdated: jest.fn(),
+	handleSetQueryData: jest.fn(),
+	handleSetFormulaData: jest.fn(),
+	handleSetQueryItemData: jest.fn(),
+	handleSetConfig: jest.fn(),
+	removeQueryBuilderEntityByIndex: jest.fn(),
+	removeQueryTypeItemByIndex: jest.fn(),
+	isDefaultQuery: jest.fn(),
+};
+
+jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
+	...mockUseQueryBuilderData,
+} as any);
+
+const timeRange = {
+	startTime: 1718236800,
+	endTime: 1718236800,
+};
+
+const mockHandleChangeEventFilters = jest.fn();
+
+const mockFilters: IBuilderQuery['filters'] = {
+	items: [
+		{
+			id: 'pod-name',
+			key: {
+				id: 'pod-name',
+				dataType: DataTypes.String,
+				isColumn: true,
+				key: 'pod-name',
+				type: 'tag',
+				isJSON: false,
+				isIndexed: false,
+			},
+			op: '=',
+			value: 'pod-1',
+		},
+	],
+	op: 'and',
+};
+
+const isModalTimeSelection = false;
+const mockHandleTimeChange = jest.fn();
+const selectedInterval: Time = '1m';
+const category = K8sCategory.PODS;
+const queryKey = 'pod-events';
+
+const mockEventsData = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [
+								{
+									timestamp: '2024-01-15T10:00:00Z',
+									data: {
+										id: 'event-1',
+										severity_text: 'INFO',
+										body: 'Test event 1',
+										resources_string: { 'pod.name': 'test-pod-1' },
+										attributes_string: { service: 'test-service' },
+									},
+								},
+								{
+									timestamp: '2024-01-15T10:01:00Z',
+									data: {
+										id: 'event-2',
+										severity_text: 'WARN',
+										body: 'Test event 2',
+										resources_string: { 'pod.name': 'test-pod-2' },
+										attributes_string: { service: 'test-service' },
+									},
+								},
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+const mockEmptyEventsData = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+const createMockEvent = (
+	id: string,
+	severity: string,
+	body: string,
+	podName: string,
+): any => ({
+	timestamp: `2024-01-15T10:${id.padStart(2, '0')}:00Z`,
+	data: {
+		id: `event-${id}`,
+		severity_text: severity,
+		body,
+		resources_string: { 'pod.name': podName },
+		attributes_string: { service: 'test-service' },
+	},
+});
+
+const createMockMoreEventsData = (): any => ({
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: Array.from({ length: 11 }, (_, i) =>
+								createMockEvent(
+									String(i + 1),
+									['INFO', 'WARN', 'ERROR', 'DEBUG'][i % 4],
+									`Test event ${i + 1}`,
+									`test-pod-${i + 1}`,
+								),
+							),
+						},
+					],
+				},
+			},
+		},
+	},
+});
+
+const renderEntityEvents = (overrides = {}): any => {
+	const defaultProps = {
+		timeRange,
+		handleChangeEventFilters: mockHandleChangeEventFilters,
+		filters: mockFilters,
+		isModalTimeSelection,
+		handleTimeChange: mockHandleTimeChange,
+		selectedInterval,
+		category,
+		queryKey,
+		...overrides,
+	};
+
+	return render(
+		<EntityEvents
+			timeRange={defaultProps.timeRange}
+			handleChangeEventFilters={defaultProps.handleChangeEventFilters}
+			filters={defaultProps.filters}
+			isModalTimeSelection={defaultProps.isModalTimeSelection}
+			handleTimeChange={defaultProps.handleTimeChange}
+			selectedInterval={defaultProps.selectedInterval}
+			category={defaultProps.category}
+			queryKey={defaultProps.queryKey}
+		/>,
+	);
+};
+
+describe('EntityEvents', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseQuery.mockReturnValue({
+			data: mockEventsData,
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+	});
+
+	it('should render events list with data', () => {
+		renderEntityEvents();
+		expect(screen.getByText('Prev')).toBeInTheDocument();
+		expect(screen.getByText('Next')).toBeInTheDocument();
+		expect(screen.getByText('Test event 1')).toBeInTheDocument();
+		expect(screen.getByText('Test event 2')).toBeInTheDocument();
+		expect(screen.getByText('INFO')).toBeInTheDocument();
+		expect(screen.getByText('WARN')).toBeInTheDocument();
+	});
+
+	it('renders empty state when no events are found', () => {
+		mockUseQuery.mockReturnValue({
+			data: mockEmptyEventsData,
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+
+		renderEntityEvents();
+		expect(screen.getByText(/No events found for this pods/)).toBeInTheDocument();
+	});
+
+	it('renders loader when fetching events', () => {
+		mockUseQuery.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+			isFetching: true,
+		});
+
+		renderEntityEvents();
+		expect(screen.getByTestId('loader')).toBeInTheDocument();
+	});
+
+	it('shows pagination controls when events are present', () => {
+		renderEntityEvents();
+		expect(screen.getByText('Prev')).toBeInTheDocument();
+		expect(screen.getByText('Next')).toBeInTheDocument();
+	});
+
+	it('disables Prev button on first page', () => {
+		renderEntityEvents();
+		const prevButton = screen.getByText('Prev').closest('button');
+		expect(prevButton).toBeDisabled();
+	});
+
+	it('enables Next button when more events are available', () => {
+		mockUseQuery.mockReturnValue({
+			data: createMockMoreEventsData(),
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+
+		renderEntityEvents();
+		const nextButton = screen.getByText('Next').closest('button');
+		expect(nextButton).not.toBeDisabled();
+	});
+
+	it('navigates to next page when Next button is clicked', () => {
+		mockUseQuery.mockReturnValue({
+			data: createMockMoreEventsData(),
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+
+		renderEntityEvents();
+
+		const nextButton = screen.getByText('Next').closest('button');
+		expect(nextButton).not.toBeNull();
+		fireEvent.click(nextButton as Element);
+
+		const { calls } = mockUseQuery.mock;
+		const hasPage2Call = calls.some((call) => {
+			const { queryKey: callQueryKey } = call[0] || {};
+			return Array.isArray(callQueryKey) && callQueryKey.includes(2);
+		});
+		expect(hasPage2Call).toBe(true);
+	});
+
+	it('navigates to previous page when Prev button is clicked', () => {
+		mockUseQuery.mockReturnValue({
+			data: createMockMoreEventsData(),
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+
+		renderEntityEvents();
+
+		const nextButton = screen.getByText('Next').closest('button');
+		expect(nextButton).not.toBeNull();
+		fireEvent.click(nextButton as Element);
+
+		const prevButton = screen.getByText('Prev').closest('button');
+		expect(prevButton).not.toBeNull();
+		fireEvent.click(prevButton as Element);
+
+		const { calls } = mockUseQuery.mock;
+		const hasPage1Call = calls.some((call) => {
+			const { queryKey: callQueryKey } = call[0] || {};
+			return Array.isArray(callQueryKey) && callQueryKey.includes(1);
+		});
+		expect(hasPage1Call).toBe(true);
+	});
+});

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

@@ -0,0 +1,374 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, screen } from '@testing-library/react';
+import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/config';
+import * as appContextHooks from 'providers/App/App';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+
+import EntityMetrics from '../EntityMetrics';
+
+jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
+	getUPlotChartOptions: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
+	getUPlotChartData: jest.fn().mockReturnValue([]),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="uplot-chart">Uplot Chart</div>,
+}));
+
+jest.mock('container/InfraMonitoringK8s/commonUtils', () => ({
+	__esModule: true,
+	getMetricsTableData: jest.fn().mockReturnValue([
+		{
+			rows: [
+				{ data: { timestamp: '2024-01-15T10:00:00Z', value: '42.5' } },
+				{ data: { timestamp: '2024-01-15T10:01:00Z', value: '43.2' } },
+			],
+			columns: [
+				{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
+				{ key: 'value', label: 'Value', isValueColumn: true },
+			],
+		},
+	]),
+	MetricsTable: jest
+		.fn()
+		.mockImplementation(
+			(): JSX.Element => <div data-testid="metrics-table">Metrics Table</div>,
+		),
+}));
+
+const mockUseQueries = jest.fn();
+jest.mock('react-query', () => ({
+	useQueries: (queryConfigs: any[]): any[] => mockUseQueries(queryConfigs),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: (): { width: number; height: number } => ({
+		width: 800,
+		height: 600,
+	}),
+}));
+
+jest.mock('hooks/useMultiIntersectionObserver', () => ({
+	useMultiIntersectionObserver: (count: number): any => ({
+		visibilities: new Array(count).fill(true),
+		setElement: jest.fn(),
+	}),
+}));
+
+jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+	user: {
+		role: 'admin',
+	},
+	activeLicenseV3: {
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		license: {
+			license_key: 'test-license-key',
+			license_type: 'trial',
+			org_id: 'test-org-id',
+			plan_id: 'test-plan-id',
+			plan_name: 'test-plan-name',
+			plan_type: 'trial',
+			plan_version: 'test-plan-version',
+		},
+	},
+	featureFlags: [
+		{
+			name: 'DOT_METRICS_ENABLED',
+			active: false,
+		},
+	],
+} as any);
+
+const mockEntity = {
+	id: 'test-entity-1',
+	name: 'test-entity',
+	type: 'pod',
+};
+
+const mockEntityWidgetInfo = [
+	{
+		title: 'CPU Usage',
+		yAxisUnit: 'percentage',
+	},
+	{
+		title: 'Memory Usage',
+		yAxisUnit: 'bytes',
+	},
+];
+
+const mockGetEntityQueryPayload = jest.fn().mockReturnValue([
+	{
+		query: 'cpu_usage',
+		start: 1705315200,
+		end: 1705318800,
+	},
+	{
+		query: 'memory_usage',
+		start: 1705315200,
+		end: 1705318800,
+	},
+]);
+
+const mockTimeRange = {
+	startTime: 1705315200,
+	endTime: 1705318800,
+};
+
+const mockHandleTimeChange = jest.fn();
+
+const mockQueries = [
+	{
+		data: {
+			payload: {
+				data: {
+					result: [
+						{
+							table: {
+								rows: [
+									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '42.5' } },
+									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '43.2' } },
+								],
+								columns: [
+									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
+									{ key: 'value', label: 'Value', isValueColumn: true },
+								],
+							},
+						},
+					],
+				},
+			},
+			params: {
+				compositeQuery: {
+					panelType: 'time_series',
+				},
+			},
+		},
+		isLoading: false,
+		isError: false,
+		error: null,
+	},
+	{
+		data: {
+			payload: {
+				data: {
+					result: [
+						{
+							table: {
+								rows: [
+									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '1024' } },
+									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '1028' } },
+								],
+								columns: [
+									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
+									{ key: 'value', label: 'Value', isValueColumn: true },
+								],
+							},
+						},
+					],
+				},
+			},
+			params: {
+				compositeQuery: {
+					panelType: 'table',
+				},
+			},
+		},
+		isLoading: false,
+		isError: false,
+		error: null,
+	},
+];
+
+const mockLoadingQueries = [
+	{
+		data: undefined,
+		isLoading: true,
+		isError: false,
+		error: null,
+	},
+	{
+		data: undefined,
+		isLoading: true,
+		isError: false,
+		error: null,
+	},
+];
+
+const mockErrorQueries = [
+	{
+		data: undefined,
+		isLoading: false,
+		isError: true,
+		error: new Error('API Error'),
+	},
+	{
+		data: undefined,
+		isLoading: false,
+		isError: true,
+		error: new Error('Network Error'),
+	},
+];
+
+const mockEmptyQueries = [
+	{
+		data: {
+			payload: {
+				data: {
+					result: [],
+				},
+			},
+			params: {
+				compositeQuery: {
+					panelType: 'time_series',
+				},
+			},
+		},
+		isLoading: false,
+		isError: false,
+		error: null,
+	},
+	{
+		data: {
+			payload: {
+				data: {
+					result: [],
+				},
+			},
+			params: {
+				compositeQuery: {
+					panelType: 'table',
+				},
+			},
+		},
+		isLoading: false,
+		isError: false,
+		error: null,
+	},
+];
+
+const renderEntityMetrics = (overrides = {}): any => {
+	const defaultProps = {
+		timeRange: mockTimeRange,
+		isModalTimeSelection: false,
+		handleTimeChange: mockHandleTimeChange,
+		selectedInterval: '5m' as Time,
+		entity: mockEntity,
+		entityWidgetInfo: mockEntityWidgetInfo,
+		getEntityQueryPayload: mockGetEntityQueryPayload,
+		queryKey: 'test-query-key',
+		category: K8sCategory.PODS,
+		...overrides,
+	};
+
+	return render(
+		<EntityMetrics
+			timeRange={defaultProps.timeRange}
+			isModalTimeSelection={defaultProps.isModalTimeSelection}
+			handleTimeChange={defaultProps.handleTimeChange}
+			selectedInterval={defaultProps.selectedInterval}
+			entity={defaultProps.entity}
+			entityWidgetInfo={defaultProps.entityWidgetInfo}
+			getEntityQueryPayload={defaultProps.getEntityQueryPayload}
+			queryKey={defaultProps.queryKey}
+			category={defaultProps.category}
+		/>,
+	);
+};
+
+describe('EntityMetrics', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseQueries.mockReturnValue(mockQueries);
+	});
+
+	it('should render metrics with data', () => {
+		renderEntityMetrics();
+		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
+		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
+		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
+		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
+		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
+	});
+
+	it('renders loading state when fetching metrics', () => {
+		mockUseQueries.mockReturnValue(mockLoadingQueries);
+		renderEntityMetrics();
+		expect(screen.getAllByText('CPU Usage')).toHaveLength(1);
+		expect(screen.getAllByText('Memory Usage')).toHaveLength(1);
+	});
+
+	it('renders error state when query fails', () => {
+		mockUseQueries.mockReturnValue(mockErrorQueries);
+		renderEntityMetrics();
+		expect(screen.getByText('API Error')).toBeInTheDocument();
+		expect(screen.getByText('Network Error')).toBeInTheDocument();
+	});
+
+	it('renders empty state when no metrics data', () => {
+		mockUseQueries.mockReturnValue(mockEmptyQueries);
+		renderEntityMetrics();
+		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
+		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
+	});
+
+	it('calls handleTimeChange when datetime selection changes', () => {
+		renderEntityMetrics();
+		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
+	});
+
+	it('renders multiple metric widgets', () => {
+		renderEntityMetrics();
+		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
+		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
+	});
+
+	it('handles different panel types correctly', () => {
+		renderEntityMetrics();
+		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
+		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
+	});
+
+	it('applies intersection observer for visibility', () => {
+		renderEntityMetrics();
+		expect(mockUseQueries).toHaveBeenCalledWith(
+			expect.arrayContaining([
+				expect.objectContaining({
+					enabled: true,
+				}),
+			]),
+		);
+	});
+
+	it('generates correct query payloads', () => {
+		renderEntityMetrics();
+		expect(mockGetEntityQueryPayload).toHaveBeenCalledWith(
+			mockEntity,
+			mockTimeRange.startTime,
+			mockTimeRange.endTime,
+			false,
+		);
+	});
+});

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

@@ -0,0 +1,288 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, screen } from '@testing-library/react';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/config';
+import * as useQueryBuilderHooks from 'hooks/queryBuilder/useQueryBuilder';
+import * as appContextHooks from 'providers/App/App';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import EntityTraces from '../EntityTraces';
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+
+const mockUseQuery = jest.fn();
+jest.mock('react-query', () => ({
+	useQuery: (queryKey: any, queryFn: any, options: any): any =>
+		mockUseQuery(queryKey, queryFn, options),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: '/test-path',
+	}),
+	useNavigate: (): jest.Mock => jest.fn(),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+	user: {
+		role: 'admin',
+	},
+	activeLicenseV3: {
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		license: {
+			license_key: 'test-license-key',
+			license_type: 'trial',
+			org_id: 'test-org-id',
+			plan_id: 'test-plan-id',
+			plan_name: 'test-plan-name',
+			plan_type: 'trial',
+			plan_version: 'test-plan-version',
+		},
+	},
+} as any);
+
+const mockUseQueryBuilderData = {
+	handleRunQuery: jest.fn(),
+	stagedQuery: initialQueriesMap[DataSource.METRICS],
+	updateAllQueriesOperators: jest.fn(),
+	currentQuery: initialQueriesMap[DataSource.METRICS],
+	resetQuery: jest.fn(),
+	redirectWithQueryBuilderData: jest.fn(),
+	isStagedQueryUpdated: jest.fn(),
+	handleSetQueryData: jest.fn(),
+	handleSetFormulaData: jest.fn(),
+	handleSetQueryItemData: jest.fn(),
+	handleSetConfig: jest.fn(),
+	removeQueryBuilderEntityByIndex: jest.fn(),
+	removeQueryTypeItemByIndex: jest.fn(),
+	isDefaultQuery: jest.fn(),
+};
+
+jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
+	...mockUseQueryBuilderData,
+} as any);
+
+const timeRange = {
+	startTime: 1718236800,
+	endTime: 1718236800,
+};
+
+const mockHandleChangeTracesFilters = jest.fn();
+
+const mockTracesFilters: IBuilderQuery['filters'] = {
+	items: [
+		{
+			id: 'service-name',
+			key: {
+				id: 'service-name',
+				dataType: DataTypes.String,
+				isColumn: true,
+				key: 'service.name',
+				type: 'tag',
+				isJSON: false,
+				isIndexed: false,
+			},
+			op: '=',
+			value: 'test-service',
+		},
+	],
+	op: 'and',
+};
+
+const isModalTimeSelection = false;
+const mockHandleTimeChange = jest.fn();
+const selectedInterval: Time = '5m';
+const category = K8sCategory.PODS;
+const queryKey = 'pod-traces';
+const queryKeyFilters = ['service.name'];
+
+const mockTracesData = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [
+								{
+									timestamp: '2024-01-15T10:00:00Z',
+									data: {
+										trace_id: 'trace-1',
+										span_id: 'span-1',
+										service_name: 'test-service-1',
+										operation_name: 'test-operation-1',
+										duration: 100,
+										status_code: 200,
+									},
+								},
+								{
+									timestamp: '2024-01-15T10:01:00Z',
+									data: {
+										trace_id: 'trace-2',
+										span_id: 'span-2',
+										service_name: 'test-service-2',
+										operation_name: 'test-operation-2',
+										duration: 150,
+										status_code: 500,
+									},
+								},
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+const mockEmptyTracesData = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+const renderEntityTraces = (overrides = {}): any => {
+	const defaultProps = {
+		timeRange,
+		isModalTimeSelection,
+		handleTimeChange: mockHandleTimeChange,
+		handleChangeTracesFilters: mockHandleChangeTracesFilters,
+		tracesFilters: mockTracesFilters,
+		selectedInterval,
+		queryKey,
+		category,
+		queryKeyFilters,
+		...overrides,
+	};
+
+	return render(
+		<EntityTraces
+			timeRange={defaultProps.timeRange}
+			isModalTimeSelection={defaultProps.isModalTimeSelection}
+			handleTimeChange={defaultProps.handleTimeChange}
+			handleChangeTracesFilters={defaultProps.handleChangeTracesFilters}
+			tracesFilters={defaultProps.tracesFilters}
+			selectedInterval={defaultProps.selectedInterval}
+			queryKey={defaultProps.queryKey}
+			category={defaultProps.category}
+			queryKeyFilters={defaultProps.queryKeyFilters}
+		/>,
+	);
+};
+
+describe('EntityTraces', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseQuery.mockReturnValue({
+			data: mockTracesData,
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+	});
+
+	it('should render traces list with data', () => {
+		renderEntityTraces();
+		expect(screen.getByText('Previous')).toBeInTheDocument();
+		expect(screen.getByText('Next')).toBeInTheDocument();
+		expect(
+			screen.getByText(/Search Filter : select options from suggested values/),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
+	});
+
+	it('renders empty state when no traces are found', () => {
+		mockUseQuery.mockReturnValue({
+			data: mockEmptyTracesData,
+			isLoading: false,
+			isError: false,
+			isFetching: false,
+		});
+
+		renderEntityTraces();
+		expect(screen.getByText(/No traces yet./)).toBeInTheDocument();
+	});
+
+	it('renders loader when fetching traces', () => {
+		mockUseQuery.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+			isFetching: true,
+		});
+
+		renderEntityTraces();
+		expect(screen.getByText('pending_data_placeholder')).toBeInTheDocument();
+	});
+
+	it('shows error state when query fails', () => {
+		mockUseQuery.mockReturnValue({
+			data: { error: 'API Error' },
+			isLoading: false,
+			isError: true,
+			isFetching: false,
+		});
+
+		renderEntityTraces();
+		expect(screen.getByText('API Error')).toBeInTheDocument();
+	});
+
+	it('calls handleChangeTracesFilters when query builder search changes', () => {
+		renderEntityTraces();
+		expect(
+			screen.getByText(/Search Filter : select options from suggested values/),
+		).toBeInTheDocument();
+	});
+
+	it('calls handleTimeChange when datetime selection changes', () => {
+		renderEntityTraces();
+		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
+	});
+
+	it('shows pagination controls when traces are present', () => {
+		renderEntityTraces();
+		expect(screen.getByText('Previous')).toBeInTheDocument();
+		expect(screen.getByText('Next')).toBeInTheDocument();
+	});
+
+	it('disables pagination buttons when no more data', () => {
+		renderEntityTraces();
+		const prevButton = screen.getByText('Previous').closest('button');
+		const nextButton = screen.getByText('Next').closest('button');
+		expect(prevButton).toBeDisabled();
+		expect(nextButton).toBeDisabled();
+	});
+});

frontend/src/container/InfraMonitoringK8s/LoadingContainer.tsx

@@ -4,7 +4,7 @@ import { Skeleton } from 'antd';
 
 function LoadingContainer(): JSX.Element {
 	return (
-		<div className="k8s-list-loading-state">
+		<div className="k8s-list-loading-state" data-testid="loader">
 			<Skeleton.Input
 				className="k8s-list-loading-state-item"
 				size="large"

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

@@ -0,0 +1,131 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import ClusterDetails from 'container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('ClusterDetails', () => {
+	const mockCluster = {
+		meta: {
+			k8s_cluster_name: 'test-cluster',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<ClusterDetails
+							cluster={mockCluster}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<ClusterDetails
+							cluster={mockCluster}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<ClusterDetails
+							cluster={mockCluster}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<ClusterDetails
+							cluster={mockCluster}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<ClusterDetails
+							cluster={mockCluster}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,141 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import DaemonSetDetails from 'container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('DaemonSetDetails', () => {
+	const mockDaemonSet = {
+		meta: {
+			k8s_daemonset_name: 'test-daemon-set',
+			k8s_cluster_name: 'test-cluster',
+			k8s_namespace_name: 'test-namespace',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DaemonSetDetails
+							daemonSet={mockDaemonSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const daemonSetNameElements = screen.getAllByText('test-daemon-set');
+		expect(daemonSetNameElements.length).toBeGreaterThan(0);
+		expect(daemonSetNameElements[0]).toBeInTheDocument();
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DaemonSetDetails
+							daemonSet={mockDaemonSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DaemonSetDetails
+							daemonSet={mockDaemonSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DaemonSetDetails
+							daemonSet={mockDaemonSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DaemonSetDetails
+							daemonSet={mockDaemonSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,141 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import DeploymentDetails from 'container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('DeploymentDetails', () => {
+	const mockDeployment = {
+		meta: {
+			k8s_deployment_name: 'test-deployment',
+			k8s_cluster_name: 'test-cluster',
+			k8s_namespace_name: 'test-namespace',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DeploymentDetails
+							deployment={mockDeployment}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const deploymentNameElements = screen.getAllByText('test-deployment');
+		expect(deploymentNameElements.length).toBeGreaterThan(0);
+		expect(deploymentNameElements[0]).toBeInTheDocument();
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DeploymentDetails
+							deployment={mockDeployment}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DeploymentDetails
+							deployment={mockDeployment}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DeploymentDetails
+							deployment={mockDeployment}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<DeploymentDetails
+							deployment={mockDeployment}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,116 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import JobDetails from 'container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('JobDetails', () => {
+	const mockJob = {
+		meta: {
+			k8s_job_name: 'test-job',
+			k8s_namespace_name: 'test-namespace',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const jobNameElements = screen.getAllByText('test-job');
+		expect(jobNameElements.length).toBeGreaterThan(0);
+		expect(jobNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<JobDetails job={mockJob} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,136 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import NamespaceDetails from 'container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('NamespaceDetails', () => {
+	const mockNamespace = {
+		namespaceName: 'test-namespace',
+		meta: {
+			k8s_cluster_name: 'test-cluster',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NamespaceDetails
+							namespace={mockNamespace}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NamespaceDetails
+							namespace={mockNamespace}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NamespaceDetails
+							namespace={mockNamespace}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NamespaceDetails
+							namespace={mockNamespace}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NamespaceDetails
+							namespace={mockNamespace}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,116 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import NodeDetails from 'container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('NodeDetails', () => {
+	const mockNode = {
+		meta: {
+			k8s_node_name: 'test-node',
+			k8s_cluster_name: 'test-cluster',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NodeDetails node={mockNode} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const nodeNameElements = screen.getAllByText('test-node');
+		expect(nodeNameElements.length).toBeGreaterThan(0);
+		expect(nodeNameElements[0]).toBeInTheDocument();
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NodeDetails node={mockNode} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NodeDetails node={mockNode} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NodeDetails node={mockNode} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<NodeDetails node={mockNode} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,122 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import PodDetails from 'container/InfraMonitoringK8s/Pods/PodDetails/PodDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('PodDetails', () => {
+	const mockPod = {
+		podName: 'test-pod',
+		meta: {
+			k8s_cluster_name: 'test-cluster',
+			k8s_namespace_name: 'test-namespace',
+			k8s_node_name: 'test-node',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<PodDetails pod={mockPod} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+
+		const nodeNameElements = screen.getAllByText('test-node');
+		expect(nodeNameElements.length).toBeGreaterThan(0);
+		expect(nodeNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<PodDetails pod={mockPod} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<PodDetails pod={mockPod} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<PodDetails pod={mockPod} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<PodDetails pod={mockPod} isModalTimeSelection onClose={mockOnClose} />
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,136 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import StatefulSetDetails from 'container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('StatefulSetDetails', () => {
+	const mockStatefulSet = {
+		meta: {
+			k8s_namespace_name: 'test-namespace',
+			k8s_statefulset_name: 'test-stateful-set',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<StatefulSetDetails
+							statefulSet={mockStatefulSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const statefulSetNameElements = screen.getAllByText('test-stateful-set');
+		expect(statefulSetNameElements.length).toBeGreaterThan(0);
+		expect(statefulSetNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should render modal with 4 tabs', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<StatefulSetDetails
+							statefulSet={mockStatefulSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByText('Metrics');
+		expect(metricsTab).toBeInTheDocument();
+
+		const eventsTab = screen.getByText('Events');
+		expect(eventsTab).toBeInTheDocument();
+
+		const logsTab = screen.getByText('Logs');
+		expect(logsTab).toBeInTheDocument();
+
+		const tracesTab = screen.getByText('Traces');
+		expect(tracesTab).toBeInTheDocument();
+	});
+
+	it('default tab should be metrics', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<StatefulSetDetails
+							statefulSet={mockStatefulSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const metricsTab = screen.getByRole('radio', { name: 'Metrics' });
+		expect(metricsTab).toBeChecked();
+	});
+
+	it('should switch to events tab when events tab is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<StatefulSetDetails
+							statefulSet={mockStatefulSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const eventsTab = screen.getByRole('radio', { name: 'Events' });
+		expect(eventsTab).not.toBeChecked();
+		fireEvent.click(eventsTab);
+		expect(eventsTab).toBeChecked();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<StatefulSetDetails
+							statefulSet={mockStatefulSet}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

frontend/src/container/InfraMonitoringK8s/__tests__/Volumes/VolumeDetails/VolumeDetails.test.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable import/first */
+// eslint-disable-next-line import/order
+import setupCommonMocks from '../../commonMocks';
+
+setupCommonMocks();
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import VolumeDetails from 'container/InfraMonitoringK8s/Volumes/VolumeDetails/VolumeDetails';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+
+const queryClient = new QueryClient();
+
+describe('VolumeDetails', () => {
+	const mockVolume = {
+		persistentVolumeClaimName: 'test-volume',
+		meta: {
+			k8s_cluster_name: 'test-cluster',
+			k8s_namespace_name: 'test-namespace',
+		},
+	} as any;
+	const mockOnClose = jest.fn();
+
+	it('should render modal with relevant metadata', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<VolumeDetails
+							volume={mockVolume}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const volumeNameElements = screen.getAllByText('test-volume');
+		expect(volumeNameElements.length).toBeGreaterThan(0);
+		expect(volumeNameElements[0]).toBeInTheDocument();
+
+		const clusterNameElements = screen.getAllByText('test-cluster');
+		expect(clusterNameElements.length).toBeGreaterThan(0);
+		expect(clusterNameElements[0]).toBeInTheDocument();
+
+		const namespaceNameElements = screen.getAllByText('test-namespace');
+		expect(namespaceNameElements.length).toBeGreaterThan(0);
+		expect(namespaceNameElements[0]).toBeInTheDocument();
+	});
+
+	it('should close modal when close button is clicked', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<MemoryRouter>
+						<VolumeDetails
+							volume={mockVolume}
+							isModalTimeSelection
+							onClose={mockOnClose}
+						/>
+					</MemoryRouter>
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: 'Close' });
+		fireEvent.click(closeButton);
+		expect(mockOnClose).toHaveBeenCalled();
+	});
+});

frontend/src/container/InfraMonitoringK8s/__tests__/commonMocks.ts

@@ -0,0 +1,121 @@
+import * as appContextHooks from 'providers/App/App';
+import * as timezoneHooks from 'providers/Timezone';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+
+const setupCommonMocks = (): void => {
+	const createMockObserver = (): {
+		observe: jest.Mock;
+		unobserve: jest.Mock;
+		disconnect: jest.Mock;
+	} => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	});
+
+	global.IntersectionObserver = jest.fn().mockImplementation(createMockObserver);
+	global.ResizeObserver = jest.fn().mockImplementation(createMockObserver);
+
+	jest.mock('react-redux', () => ({
+		...jest.requireActual('react-redux'),
+		useSelector: jest.fn(() => ({
+			globalTime: {
+				selectedTime: {
+					startTime: 1713734400000,
+					endTime: 1713738000000,
+				},
+				maxTime: 1713738000000,
+				minTime: 1713734400000,
+			},
+		})),
+	}));
+
+	jest.mock('uplot', () => ({
+		paths: {
+			spline: jest.fn(),
+			bars: jest.fn(),
+		},
+		default: jest.fn(() => ({
+			paths: {
+				spline: jest.fn(),
+				bars: jest.fn(),
+			},
+		})),
+	}));
+
+	jest.mock('react-router-dom-v5-compat', () => ({
+		...jest.requireActual('react-router-dom-v5-compat'),
+		useSearchParams: jest.fn().mockReturnValue([
+			{
+				get: jest.fn(),
+				entries: jest.fn(() => []),
+				set: jest.fn(),
+			},
+			jest.fn(),
+		]),
+		useNavigationType: (): any => 'PUSH',
+	}));
+
+	jest.mock('hooks/useUrlQuery', () => ({
+		__esModule: true,
+		default: jest.fn(() => ({
+			set: jest.fn(),
+			delete: jest.fn(),
+			get: jest.fn(),
+			has: jest.fn(),
+			entries: jest.fn(() => []),
+			append: jest.fn(),
+			toString: jest.fn(() => ''),
+		})),
+	}));
+
+	jest.mock('lib/getMinMax', () => ({
+		__esModule: true,
+		default: jest.fn().mockImplementation(() => ({
+			minTime: 1713734400000,
+			maxTime: 1713738000000,
+		})),
+		isValidTimeFormat: jest.fn().mockReturnValue(true),
+	}));
+
+	jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+		user: {
+			role: 'admin',
+		},
+		activeLicenseV3: {
+			event_queue: {
+				created_at: '0',
+				event: LicenseEvent.NO_EVENT,
+				scheduled_at: '0',
+				status: '',
+				updated_at: '0',
+			},
+			license: {
+				license_key: 'test-license-key',
+				license_type: 'trial',
+				org_id: 'test-org-id',
+				plan_id: 'test-plan-id',
+				plan_name: 'test-plan-name',
+				plan_type: 'trial',
+				plan_version: 'test-plan-version',
+			},
+		},
+	} as any);
+
+	jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
+		timezone: {
+			offset: 0,
+		},
+		browserTimezone: {
+			offset: 0,
+		},
+	} as any);
+
+	jest.mock('hooks/useSafeNavigate', () => ({
+		useSafeNavigate: (): any => ({
+			safeNavigate: jest.fn(),
+		}),
+	}));
+};
+
+export default setupCommonMocks;

frontend/src/container/ListAlertRules/ListAlert.tsx

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

frontend/src/container/LogsExplorerList/index.tsx

@@ -50,7 +50,6 @@ function LogsExplorerList({
 	isFilterApplied,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
-
 	const { activeLogId } = useCopyLogLink();
 
 	const {

frontend/src/container/LogsExplorerViews/index.tsx

@@ -256,7 +256,6 @@ function LogsExplorerViewsContainer({
 	} = useGetExplorerQueryRange(
 		listChartQuery,
 		PANEL_TYPES.TIME_SERIES,
-		// ENTITY_VERSION_V4,
 		ENTITY_VERSION_V5,
 		{
 			enabled:
@@ -279,7 +278,6 @@ function LogsExplorerViewsContainer({
 	} = useGetExplorerQueryRange(
 		requestData,
 		panelType,
-		// ENTITY_VERSION_V4,
 		ENTITY_VERSION_V5,
 		{
 			keepPreviousData: true,

frontend/src/container/MeterExplorer/Breakdown/BreakDown.styles.scss

@@ -0,0 +1,92 @@
+.meter-explorer-breakdown {
+	display: flex;
+	flex-direction: column;
+
+	.meter-explorer-date-time {
+		display: flex;
+		min-height: 30px;
+		justify-content: end;
+		border-bottom: 1px solid var(--bg-slate-500);
+		padding: 10px 16px;
+	}
+
+	.meter-explorer-graphs {
+		display: flex;
+		flex-direction: column;
+		padding: 20px;
+		gap: 36px;
+
+		.meter-column-graph {
+			.row-card {
+				background-color: var(--bg-ink-400);
+				padding-left: 10px;
+				height: 32px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.section-title {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px;
+					letter-spacing: -0.07px;
+				}
+			}
+
+			.graph-description {
+				padding: 10px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.meter-page-grid {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				align-items: flex-start;
+				gap: 10px;
+				.meter-graph {
+					height: 400px;
+					padding: 10px;
+					width: 100%;
+					box-sizing: border-box;
+				}
+			}
+		}
+
+		.total {
+			.meter-column-graph {
+				.meter-page-grid {
+					grid-template-columns: repeat(3, 1fr);
+
+					.meter-graph {
+						height: 200px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.meter-explorer-breakdown {
+		.meter-explorer-date-time {
+			border-bottom: none;
+		}
+
+		.meter-explorer-graphs {
+			.meter-column-graph {
+				.row-card {
+					background-color: var(--bg-vanilla-300);
+
+					.section-title {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -0,0 +1,200 @@
+import './BreakDown.styles.scss';
+
+import { Typography } from 'antd';
+// import useFilterConfig from 'components/QuickFilters/hooks/useFilterConfig';
+// import { SignalType } from 'components/QuickFilters/types';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card, CardContainer } from 'container/GridCardLayout/styles';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+// import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
+import { Widgets } from 'types/api/dashboard/getAll';
+// import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+import {
+	getLogCountWidgetData,
+	getLogSizeWidgetData,
+	getMetricCountWidgetData,
+	getSpanCountWidgetData,
+	getSpanSizeWidgetData,
+	getTotalLogSizeWidgetData,
+	getTotalMetricDatapointCountWidgetData,
+	getTotalTraceSizeWidgetData,
+} from './graphs';
+
+type MetricSection = {
+	id: string;
+	title: string;
+	graphs: Widgets[];
+};
+
+const sections: MetricSection[] = [
+	{
+		id: uuid(),
+		title: 'Total',
+		graphs: [
+			getTotalLogSizeWidgetData(),
+			getTotalTraceSizeWidgetData(),
+			getTotalMetricDatapointCountWidgetData(),
+		],
+	},
+	{
+		id: uuid(),
+		title: 'Logs',
+		graphs: [getLogCountWidgetData(), getLogSizeWidgetData()],
+	},
+	{
+		id: uuid(),
+		title: 'Traces',
+		graphs: [getSpanCountWidgetData(), getSpanSizeWidgetData()],
+	},
+	{
+		id: uuid(),
+		title: 'Metrics',
+		graphs: [getMetricCountWidgetData()],
+	},
+];
+
+function Section(section: MetricSection): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const { title, graphs } = section;
+	const history = useHistory();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+
+	const onDragSelect = useCallback(
+		(start: number, end: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+		},
+		[dispatch, history, pathname, urlQuery],
+	);
+
+	return (
+		<div className="meter-column-graph">
+			<CardContainer className="row-card" isDarkMode={isDarkMode}>
+				<Typography.Text className="section-title">{title}</Typography.Text>
+			</CardContainer>
+			<div className="meter-page-grid">
+				{graphs.map((widget) => (
+					<Card
+						key={widget?.id}
+						isDarkMode={isDarkMode}
+						$panelType={PANEL_TYPES.BAR}
+						className="meter-graph"
+					>
+						<GridCard widget={widget} onDragSelect={onDragSelect} version="v5" />
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}
+
+// function FilterDropdown({ attrKey }: { attrKey: string }): JSX.Element {
+// 	const {
+// 		data: keyValueSuggestions,
+// 		isLoading: isLoadingKeyValueSuggestions,
+// 	} = useGetQueryKeyValueSuggestions({
+// 		key: attrKey,
+// 		signal: DataSource.METRICS,
+// 		signalSource: 'meter',
+// 		options: {
+// 			keepPreviousData: true,
+// 		},
+// 	});
+
+// 	const responseData = keyValueSuggestions?.data as any;
+// 	const values = responseData?.data?.values || {};
+// 	const stringValues = values.stringValues || [];
+// 	const numberValues = values.numberValues || [];
+
+// 	const stringOptions = stringValues.filter(
+// 		(value: string | null | undefined): value is string =>
+// 			value !== null && value !== undefined && value !== '',
+// 	);
+
+// 	const numberOptions = numberValues
+// 		.filter(
+// 			(value: number | null | undefined): value is number =>
+// 				value !== null && value !== undefined,
+// 		)
+// 		.map((value: number) => value.toString());
+
+// 	const vals = [...stringOptions, ...numberOptions];
+
+// 	return (
+// 		<div className="filter-dropdown">
+// 			<Typography.Text>{attrKey}</Typography.Text>
+// 			<Select
+// 				loading={isLoadingKeyValueSuggestions}
+// 				options={vals?.map((suggestion: any) => ({
+// 					label: suggestion,
+// 					value: suggestion,
+// 				}))}
+// 				placeholder={`Select ${attrKey}`}
+// 			/>
+// 		</div>
+// 	);
+// }
+
+function BreakDown(): JSX.Element {
+	// const { customFilters } = useFilterConfig({
+	// 	signal: SignalType.METER_EXPLORER,
+	// 	config: [],
+	// });
+
+	return (
+		<div className="meter-explorer-breakdown">
+			<section className="meter-explorer-date-time">
+				{/* {customFilters.map((filter) => (
+					<FilterDropdown key={filter.key} attrKey={filter.key} />
+				))} */}
+				<DateTimeSelectionV2 showAutoRefresh={false} />
+			</section>
+			<section className="meter-explorer-graphs">
+				<section className="total">
+					<Section
+						id={sections[0].id}
+						title={sections[0].title}
+						graphs={sections[0].graphs}
+					/>
+				</section>
+				{sections.map((section, idx) => {
+					if (idx === 0) {
+						return;
+					}
+
+					return (
+						<Section
+							key={section.id}
+							id={section.id}
+							title={section.title}
+							graphs={section.graphs}
+						/>
+					);
+				})}
+			</section>
+		</div>
+	);
+}
+
+export default BreakDown;

frontend/src/container/MeterExplorer/Breakdown/graphs.ts

@@ -0,0 +1,390 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetWidgetQueryBuilderProps } from 'container/MetricsApplication/types';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+interface GetWidgetQueryProps {
+	title: string;
+	description: string;
+	queryData: IBuilderQuery[];
+	queryFormulas?: IBuilderFormula[];
+	panelTypes?: PANEL_TYPES;
+	yAxisUnit?: string;
+	columnUnits?: Record<string, string>;
+}
+
+interface GetWidgetQueryPropsReturn extends GetWidgetQueryBuilderProps {
+	description?: string;
+	nullZeroValues: string;
+	columnUnits?: Record<string, string>;
+}
+
+export const getWidgetQueryBuilder = ({
+	query,
+	title = '',
+	panelTypes,
+	yAxisUnit = '',
+	fillSpans = false,
+	id,
+	nullZeroValues,
+	description,
+}: GetWidgetQueryPropsReturn): Widgets => ({
+	description: description || '',
+	id: id || uuid(),
+	isStacked: false,
+	nullZeroValues: nullZeroValues || '',
+	opacity: '1',
+	panelTypes,
+	query,
+	timePreferance: 'GLOBAL_TIME',
+	title,
+	yAxisUnit,
+	softMax: null,
+	softMin: null,
+	selectedLogFields: [],
+	selectedTracesFields: [],
+	fillSpans,
+});
+
+export function getWidgetQuery(
+	props: GetWidgetQueryProps,
+): GetWidgetQueryPropsReturn {
+	const { title, description, panelTypes, yAxisUnit, columnUnits } = props;
+	return {
+		title,
+		yAxisUnit: yAxisUnit || 'none',
+		panelTypes: panelTypes || PANEL_TYPES.TIME_SERIES,
+		fillSpans: false,
+		description,
+		nullZeroValues: 'zero',
+		columnUnits,
+		query: {
+			queryType: EQueryType.QUERY_BUILDER,
+			promql: [],
+			builder: {
+				queryData: props.queryData,
+				queryFormulas: (props.queryFormulas as IBuilderFormula[]) || [],
+			},
+			clickhouse_sql: [],
+			id: uuid(),
+		},
+	};
+}
+export const getTotalLogSizeWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.log.size',
+						id: 'signoz.meter.log.size--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'sum',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Total size of log records ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.VALUE,
+			yAxisUnit: 'bytes',
+		}),
+	);
+
+export const getTotalTraceSizeWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.span.size',
+						id: 'signoz.meter.span.size--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'sum',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Total size of spans ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.VALUE,
+			yAxisUnit: 'bytes',
+		}),
+	);
+
+export const getTotalMetricDatapointCountWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.metric.datapoint.count',
+						id: 'signoz.meter.metric.datapoint.count--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'sum',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Total metric datapoints ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.VALUE,
+			yAxisUnit: 'short',
+		}),
+	);
+
+export const getLogCountWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.log.count',
+						id: 'signoz.meter.log.count--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'avg',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Count of log records ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.BAR,
+			yAxisUnit: 'short',
+		}),
+	);
+
+export const getLogSizeWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.log.size',
+						id: 'signoz.meter.log.size--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'size',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'avg',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Size of log records ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.BAR,
+			yAxisUnit: 'bytes',
+		}),
+	);
+
+export const getSpanCountWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.span.count',
+						id: 'signoz.meter.span.count--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'avg',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Count of spans ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.BAR,
+			yAxisUnit: 'short',
+		}),
+	);
+
+export const getSpanSizeWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.span.size',
+						id: 'signoz.meter.span.size--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'size',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'avg',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Size of spans ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.BAR,
+			yAxisUnit: 'bytes',
+		}),
+	);
+
+export const getMetricCountWidgetData = (): Widgets =>
+	getWidgetQueryBuilder(
+		getWidgetQuery({
+			queryData: [
+				{
+					aggregateAttribute: {
+						dataType: DataTypes.Float64,
+						key: 'signoz.meter.metric.datapoint.count',
+						id: 'signoz.meter.metric.datapoint.count--float64--Sum--true',
+						isColumn: true,
+						isJSON: false,
+						type: 'Sum',
+					},
+					aggregateOperator: 'increase',
+					dataSource: DataSource.METRICS,
+					source: 'meter',
+					disabled: false,
+					expression: 'A',
+					filters: { items: [], op: 'AND' },
+					functions: [],
+					groupBy: [],
+					having: [],
+					legend: 'count',
+					limit: null,
+					orderBy: [],
+					queryName: 'A',
+					reduceTo: 'avg',
+					spaceAggregation: 'sum',
+					stepInterval: 60,
+					timeAggregation: 'increase',
+				},
+			],
+			title: 'Count of metric datapoints ingested',
+			description: '',
+			panelTypes: PANEL_TYPES.BAR,
+			yAxisUnit: 'short',
+		}),
+	);

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -141,6 +141,19 @@
 				background: var(--bg-vanilla-500);
 			}
 		}
+
+		.meter-explorer-content-section {
+			.explore-content {
+				.time-series-view-panel {
+					background: var(--bg-vanilla-100);
+					border-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.meter-explorer-quick-filters-section {
+			border-right: 1px solid var(--bg-vanilla-300);
+		}
 	}
 }
 

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -43,7 +43,7 @@ function Explorer(): JSX.Element {
 		() =>
 			updateAllQueriesOperators(
 				initialQueryMeterWithType,
-				PANEL_TYPES.TIME_SERIES,
+				PANEL_TYPES.BAR,
 				DataSource.METRICS,
 				'meter' as 'meter' | '',
 			),
@@ -54,7 +54,7 @@ function Explorer(): JSX.Element {
 		() =>
 			updateAllQueriesOperators(
 				currentQuery || initialQueryMeterWithType,
-				PANEL_TYPES.TIME_SERIES,
+				PANEL_TYPES.BAR,
 				DataSource.METRICS,
 				'meter' as 'meter' | '',
 			),
@@ -75,7 +75,7 @@ function Explorer(): JSX.Element {
 
 			const dashboardEditView = generateExportToDashboardLink({
 				query: queryToExport || exportDefaultQuery,
-				panelType: PANEL_TYPES.TIME_SERIES,
+				panelType: PANEL_TYPES.BAR,
 				dashboardId: dashboard.id,
 				widgetId,
 			});

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -69,7 +69,7 @@ function TimeSeries(): JSX.Element {
 				GetMetricQueryRange(
 					{
 						query: payload,
-						graphType: PANEL_TYPES.TIME_SERIES,
+						graphType: PANEL_TYPES.BAR,
 						selectedTime: 'GLOBAL_TIME',
 						globalSelectedInterval: globalSelectedTime,
 						params: {
@@ -131,6 +131,7 @@ function TimeSeries(): JSX.Element {
 							data={datapoint}
 							dataSource={DataSource.METRICS}
 							yAxisUnit={yAxisUnit}
+							panelType={PANEL_TYPES.BAR}
 						/>
 					</div>
 				))}

frontend/src/container/NewDashboard/GridGraphs/index.tsx

@@ -1,4 +1,5 @@
 import GridGraphLayout from 'container/GridCardLayout';
+import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
 import { FullScreenHandle } from 'react-full-screen';
 
 import { GridComponentSliderContainer } from './styles';
@@ -11,7 +12,7 @@ function GridGraphs(props: GridGraphsProps): JSX.Element {
 	const { handle } = props;
 	return (
 		<GridComponentSliderContainer>
-			<GridGraphLayout handle={handle} />
+			<GridGraphLayout handle={handle} enableDrillDown={isDrilldownEnabled()} />
 		</GridComponentSliderContainer>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx

@@ -16,6 +16,7 @@ function WidgetGraphContainer({
 	setRequestData,
 	selectedWidget,
 	isLoadingPanelData,
+	enableDrillDown = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	if (queryResponse.data && selectedGraph === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
@@ -86,6 +87,7 @@ function WidgetGraphContainer({
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
 			selectedGraph={selectedGraph}
+			enableDrillDown={enableDrillDown}
 		/>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -36,6 +36,7 @@ function WidgetGraph({
 	queryResponse,
 	setRequestData,
 	selectedGraph,
+	enableDrillDown = false,
 }: WidgetGraphProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const lineChartRef = useRef<ToggleGraphProps>();
@@ -188,6 +189,7 @@ function WidgetGraph({
 				onClickHandler={graphClickHandler}
 				graphVisibility={graphVisibility}
 				setGraphVisibility={setGraphVisibility}
+				enableDrillDown={enableDrillDown}
 			/>
 		</div>
 	);
@@ -201,6 +203,11 @@ interface WidgetGraphProps {
 	>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
+	enableDrillDown?: boolean;
 }
 
 export default WidgetGraph;
+
+WidgetGraph.defaultProps = {
+	enableDrillDown: false,
+};

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx

@@ -21,6 +21,7 @@ function WidgetGraph({
 	setRequestData,
 	selectedWidget,
 	isLoadingPanelData,
+	enableDrillDown = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 
@@ -57,6 +58,7 @@ function WidgetGraph({
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
 				selectedWidget={selectedWidget}
+				enableDrillDown={enableDrillDown}
 			/>
 		</Container>
 	);

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -27,6 +27,7 @@ function LeftContainer({
 	setRequestData,
 	isLoadingPanelData,
 	setQueryResponse,
+	enableDrillDown = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 	// const { selectedDashboard } = useDashboard();
@@ -64,6 +65,7 @@ function LeftContainer({
 				setRequestData={setRequestData}
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
+				enableDrillDown={enableDrillDown}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection selectedGraph={selectedGraph} queryResponse={queryResponse} />

frontend/src/container/NewWidget/NewWidget.styles.scss

@@ -36,6 +36,11 @@
 		}
 	}
 
+	.right-header {
+		display: flex;
+		gap: 16px;
+	}
+
 	.save-btn {
 		display: flex;
 		height: 32px;

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.styles.scss

@@ -0,0 +1,87 @@
+.context-link-form-container {
+	margin-top: 16px;
+
+	.form-label {
+		margin-left: 4px;
+	}
+
+	.add-url-parameter-btn {
+		display: flex;
+		align-items: center;
+		width: fit-content;
+		margin-top: 16px;
+	}
+
+	.url-parameters-section {
+		margin-top: 16px;
+		margin-bottom: 16px;
+
+		.parameter-header {
+			margin-bottom: 8px;
+
+			strong {
+				color: #666;
+				font-size: 14px;
+			}
+		}
+
+		.parameter-row {
+			margin-bottom: 8px;
+			align-items: center;
+
+			.ant-input {
+				border-radius: 4px;
+			}
+
+			.delete-parameter-btn {
+				color: var(--bg-vanilla-400);
+				padding: 4px;
+				height: 32px;
+				width: 32px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:hover {
+					color: var(--bg-cherry-400) !important;
+					border-color: var(--bg-cherry-400) !important;
+				}
+			}
+		}
+	}
+
+	.params-container {
+		margin-left: 16px;
+	}
+
+	.context-link-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		margin-top: 24px;
+		padding-top: 16px;
+		border-top: 1px solid var(--bg-slate-400);
+	}
+}
+
+.lightMode {
+	.context-link-form-container {
+		.url-parameters-section {
+			.parameter-row {
+				.delete-parameter-btn {
+					color: var(--bg-slate-400);
+
+					&:hover {
+						color: var(--bg-cherry-500) !important;
+						border-color: var(--bg-cherry-500) !important;
+						background-color: var(--bg-cherry-100);
+					}
+				}
+			}
+		}
+
+		.context-link-footer {
+			border-top-color: var(--bg-vanilla-200);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -0,0 +1,229 @@
+import './UpdateContextLinks.styles.scss';
+
+import {
+	Button,
+	Col,
+	Form,
+	Input as AntInput,
+	Input,
+	Row,
+	Typography,
+} from 'antd';
+import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
+import {
+	getInitialValues,
+	getUrlParams,
+	updateUrlWithParams,
+} from 'container/NewWidget/RightContainer/ContextLinks/utils';
+import { Plus, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ContextLinkProps } from 'types/api/dashboard/getAll';
+
+const { TextArea } = AntInput;
+
+interface UpdateContextLinksProps {
+	selectedContextLink: ContextLinkProps | null;
+	onSave: (newContextLink: ContextLinkProps) => void;
+	onCancel: () => void;
+}
+
+function UpdateContextLinks({
+	selectedContextLink,
+	onSave,
+	onCancel,
+}: UpdateContextLinksProps): JSX.Element {
+	const [form] = Form.useForm();
+	const label = Form.useWatch(CONTEXT_LINK_FIELDS.LABEL, form);
+	const url = Form.useWatch(CONTEXT_LINK_FIELDS.URL, form);
+
+	const [params, setParams] = useState<
+		{
+			key: string;
+			value: string;
+		}[]
+	>([]);
+
+	// Function to get current domain
+	const getCurrentDomain = (): string => window.location.origin;
+
+	console.log('FORM VALUES', { label, url });
+	useEffect(() => {
+		((window as unknown) as Record<string, unknown>).form = form;
+	}, [form]);
+
+	// Parse URL and update params when URL changes
+	useEffect(() => {
+		if (url) {
+			const urlParams = getUrlParams(url);
+			setParams(urlParams);
+		}
+	}, [url]);
+
+	const handleSave = async (): Promise<void> => {
+		try {
+			// Validate form fields
+			await form.validateFields();
+			const newContextLink = {
+				id: form.getFieldValue(CONTEXT_LINK_FIELDS.ID),
+				label:
+					form.getFieldValue(CONTEXT_LINK_FIELDS.LABEL) ||
+					form.getFieldValue(CONTEXT_LINK_FIELDS.URL),
+				url: form.getFieldValue(CONTEXT_LINK_FIELDS.URL),
+			};
+			// If validation passes, call onSave
+			onSave(newContextLink);
+		} catch (error) {
+			// Form validation failed, don't call onSave
+			console.log('Form validation failed:', error);
+		}
+	};
+
+	const handleAddUrlParameter = (): void => {
+		const isLastParamEmpty =
+			params.length > 0 &&
+			params[params.length - 1].key.trim() === '' &&
+			params[params.length - 1].value.trim() === '';
+		const canAddParam = params.length === 0 || !isLastParamEmpty;
+
+		if (canAddParam) {
+			const newParams = [
+				...params,
+				{
+					key: '',
+					value: '',
+				},
+			];
+			setParams(newParams);
+			const updatedUrl = updateUrlWithParams(url, newParams);
+			form.setFieldValue(CONTEXT_LINK_FIELDS.URL, updatedUrl);
+		}
+	};
+
+	const handleDeleteParameter = (index: number): void => {
+		const newParams = params.filter((_, i) => i !== index);
+		setParams(newParams);
+		const updatedUrl = updateUrlWithParams(url, newParams);
+		form.setFieldValue(CONTEXT_LINK_FIELDS.URL, updatedUrl);
+	};
+
+	const handleParamChange = (
+		index: number,
+		field: 'key' | 'value',
+		value: string,
+	): void => {
+		const newParams = [...params];
+		newParams[index][field] = value;
+		setParams(newParams);
+		const updatedUrl = updateUrlWithParams(url, newParams);
+		form.setFieldValue(CONTEXT_LINK_FIELDS.URL, updatedUrl);
+	};
+
+	return (
+		<div className="context-link-form-container">
+			<Form
+				form={form}
+				name="contextLink"
+				initialValues={getInitialValues(selectedContextLink)}
+				// onFinish={() => {}}
+			>
+				{/* //label */}
+				<Typography.Text className="form-label">Label</Typography.Text>
+				<Form.Item
+					name={CONTEXT_LINK_FIELDS.LABEL}
+					rules={[{ required: false, message: 'Please input the label' }]}
+				>
+					<Input placeholder="View Traces details: {{_traceId}}" />
+				</Form.Item>
+				{/* //url */}
+				<Typography.Text className="form-label">
+					URL <span className="required-asterisk">*</span>
+				</Typography.Text>
+				<Form.Item
+					name={CONTEXT_LINK_FIELDS.URL}
+					// label="URL"
+					rules={[
+						{ required: true, message: 'Please input the URL' },
+						{
+							pattern: /^(https?:\/\/|\/|{{.*}}\/)/,
+							message: 'URLs must start with http(s), /, or {{.*}}/',
+						},
+					]}
+				>
+					<Input
+						autoComplete="off"
+						autoCorrect="off"
+						autoCapitalize="off"
+						spellCheck="false"
+						placeholder={`${getCurrentDomain()}/trace/{{_traceId}}`}
+					/>
+				</Form.Item>
+			</Form>
+			<div className="params-container">
+				{/* URL Parameters Section */}
+				{params.length > 0 && (
+					<div className="url-parameters-section">
+						<Row gutter={[8, 8]} className="parameter-header">
+							<Col span={11}>Key</Col>
+							<Col span={11}>Value</Col>
+							<Col span={2}>{/* Empty column for spacing */}</Col>
+						</Row>
+
+						{params.map((param, index) => (
+							// eslint-disable-next-line react/no-array-index-key
+							<Row gutter={[8, 8]} key={index} className="parameter-row">
+								<Col span={11}>
+									<Input
+										id={`param-key-${index}`}
+										placeholder="Key"
+										value={param.key}
+										onChange={(e): void =>
+											handleParamChange(index, 'key', e.target.value)
+										}
+									/>
+								</Col>
+								<Col span={11}>
+									<TextArea
+										rows={1}
+										placeholder="Value"
+										value={param.value}
+										onChange={(event): void =>
+											handleParamChange(index, 'value', event.target.value)
+										}
+									/>
+								</Col>
+								<Col span={2}>
+									<Button
+										type="text"
+										icon={<Trash2 size={14} />}
+										onClick={(): void => handleDeleteParameter(index)}
+										className="delete-parameter-btn"
+									/>
+								</Col>
+							</Row>
+						))}
+					</div>
+				)}
+
+				{/* Add URL parameter btn */}
+				<Button
+					type="primary"
+					className="add-url-parameter-btn"
+					icon={<Plus size={12} />}
+					onClick={handleAddUrlParameter}
+				>
+					Add URL parameter
+				</Button>
+			</div>
+
+			{/* Footer with Cancel and Save buttons */}
+			<div className="context-link-footer">
+				<Button onClick={onCancel}>Cancel</Button>
+				<Button type="primary" onClick={handleSave}>
+					Save
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default UpdateContextLinks;

frontend/src/container/NewWidget/RightContainer/ContextLinks/__test__/ContextLinks.test.tsx

@@ -0,0 +1,634 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+import { ContextLinksData } from 'types/api/dashboard/getAll';
+
+import ContextLinks from '../index';
+
+// Mock data for testing
+const MOCK_EMPTY_CONTEXT_LINKS: ContextLinksData = {
+	linksData: [],
+};
+
+const MOCK_CONTEXT_LINKS: ContextLinksData = {
+	linksData: [
+		{
+			id: '1',
+			label: 'Dashboard 1',
+			url: 'https://example.com/dashboard1',
+		},
+		{
+			id: '2',
+			label: 'External Tool',
+			url: 'https://external.com/tool',
+		},
+		{
+			id: '3',
+			label: 'Grafana',
+			url: 'https://grafana.example.com',
+		},
+	],
+};
+
+// Test wrapper component
+const renderWithProviders = (
+	component: React.ReactElement,
+): ReturnType<typeof render> =>
+	render(
+		<Provider store={store}>
+			<MemoryRouter>{component}</MemoryRouter>
+		</Provider>,
+	);
+
+describe('ContextLinks Component', () => {
+	describe('Component Rendering & Initial State', () => {
+		it('should render correctly with existing context links', () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Check that the component renders
+			expect(screen.getByText('Context Links')).toBeInTheDocument();
+
+			// Check that the add button is present
+			expect(
+				screen.getByRole('button', { name: /context link/i }),
+			).toBeInTheDocument();
+
+			// Check that all context link items are displayed
+			expect(screen.getByText('Dashboard 1')).toBeInTheDocument();
+			expect(screen.getByText('External Tool')).toBeInTheDocument();
+			expect(screen.getByText('Grafana')).toBeInTheDocument();
+
+			// Check that URLs are displayed
+			expect(
+				screen.getByText('https://example.com/dashboard1'),
+			).toBeInTheDocument();
+			expect(screen.getByText('https://external.com/tool')).toBeInTheDocument();
+			expect(screen.getByText('https://grafana.example.com')).toBeInTheDocument();
+		});
+
+		it('should show "Context Link" add button', () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Check that the add button is present and has correct text
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			expect(addButton).toBeInTheDocument();
+			expect(addButton).toHaveTextContent('Context Link');
+			expect(addButton).toHaveClass('add-context-link-button');
+		});
+	});
+
+	describe('Add Context Link Functionality', () => {
+		it('should show "Add a context link" title in modal when adding new link', () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Check that modal content is displayed
+			expect(screen.getByText('Add a context link')).toBeInTheDocument();
+
+			// Check that save and cancel buttons are present
+			expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+		});
+
+		it('should call setContextLinks when saving new context link', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Fill in the form fields using placeholder text
+			const labelInput = screen.getByPlaceholderText(
+				'View Traces details: {{_traceId}}',
+			);
+			fireEvent.change(labelInput, { target: { value: 'New Link' } });
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+			fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
+
+			// Click save button in modal
+			const saveButton = screen.getByRole('button', { name: /save/i });
+			fireEvent.click(saveButton);
+
+			// Wait for the modal to close and state to update
+			await waitFor(() => {
+				expect(screen.queryByText('Add a context link')).not.toBeInTheDocument();
+			});
+
+			// Verify that setContextLinks was called
+			expect(mockSetContextLinks).toHaveBeenCalledTimes(1);
+
+			// setContextLinks is called with a function (state updater)
+			const setContextLinksCall = mockSetContextLinks.mock.calls[0][0];
+			expect(typeof setContextLinksCall).toBe('function');
+
+			// Test the function by calling it with the current state
+			const result = setContextLinksCall(MOCK_EMPTY_CONTEXT_LINKS);
+			expect(result).toEqual({
+				linksData: [
+					{
+						id: expect.any(String), // ID is generated dynamically
+						label: 'New Link',
+						url: 'https://example.com',
+					},
+				],
+			});
+		});
+
+		it('should close modal when cancel button is clicked', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Modal should be visible
+			expect(screen.getByText('Add a context link')).toBeInTheDocument();
+
+			// Click cancel button
+			const cancelButton = screen.getByRole('button', { name: /cancel/i });
+			fireEvent.click(cancelButton);
+
+			// Modal should be closed
+			await waitFor(() => {
+				expect(screen.queryByText('Add a context link')).not.toBeInTheDocument();
+			});
+		});
+
+		it('should not call setContextLinks when cancel button is clicked', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Click cancel button
+			const cancelButton = screen.getByRole('button', { name: /cancel/i });
+			fireEvent.click(cancelButton);
+
+			// Wait for modal to close
+			await waitFor(() => {
+				expect(screen.queryByText('Add a context link')).not.toBeInTheDocument();
+			});
+
+			// Verify that setContextLinks was not called
+			expect(mockSetContextLinks).not.toHaveBeenCalled();
+		});
+
+		it('should show form fields in the modal', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Check that form field labels are present
+			expect(screen.getByText('Label')).toBeInTheDocument();
+			expect(screen.getByText('URL')).toBeInTheDocument();
+
+			// Check that form field inputs are present using placeholder text
+			const labelInput = screen.getByPlaceholderText(
+				'View Traces details: {{_traceId}}',
+			);
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+			expect(labelInput.tagName).toBe('INPUT');
+			expect(urlInput.tagName).toBe('INPUT');
+		});
+
+		it('should validate form fields before saving', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Click the add button to open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Try to save without filling required fields
+			const saveButton = screen.getByRole('button', { name: /save/i });
+			fireEvent.click(saveButton);
+
+			// Form validation should prevent saving
+			await waitFor(() => {
+				expect(mockSetContextLinks).not.toHaveBeenCalled();
+			});
+
+			// Modal should still be open
+			expect(screen.getByText('Add a context link')).toBeInTheDocument();
+		});
+
+		it('should pre-populate form with existing data when editing a context link', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Find and click the edit button for the first context link using CSS class
+			const editButtons = document.querySelectorAll('.edit-context-link-btn');
+			expect(editButtons).toHaveLength(3); // Should have 3 edit buttons for 3 context links
+			fireEvent.click(editButtons[0]); // Click edit button for first link
+
+			// Modal should open with "Edit context link" title
+			expect(screen.getByText('Edit context link')).toBeInTheDocument();
+
+			// Form should be pre-populated with existing data from the first context link
+			const labelInput = screen.getByPlaceholderText(
+				'View Traces details: {{_traceId}}',
+			);
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+
+			// Check that the form is pre-populated with the first context link's data
+			expect(labelInput).toHaveAttribute('value', 'Dashboard 1');
+			expect(urlInput).toHaveAttribute('value', 'https://example.com/dashboard1');
+
+			// Verify save and cancel buttons are present
+			expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+		});
+	});
+
+	describe('URL and Query Parameter Functionality', () => {
+		it('should parse URL with query parameters and display them in parameter table', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal to add new context link
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Type a URL with query parameters
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+			const testUrl =
+				'https://example.com/api?param1=value1&param2=value2&param3=value3';
+			fireEvent.change(urlInput, { target: { value: testUrl } });
+
+			// Wait for parameter parsing and display
+			await waitFor(() => {
+				expect(screen.getByText('Key')).toBeInTheDocument();
+				expect(screen.getByText('Value')).toBeInTheDocument();
+			});
+
+			// Verify all parameters are displayed
+			expect(screen.getByDisplayValue('param1')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('value1')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('param2')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('value2')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('param3')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('value3')).toBeInTheDocument();
+		});
+
+		it('should add new URL parameter when "Add URL parameter" button is clicked', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Initially no parameters should be visible
+			expect(screen.queryByText('Key')).not.toBeInTheDocument();
+
+			// Click "Add URL parameter" button
+			const addParamButton = screen.getByRole('button', {
+				name: /add url parameter/i,
+			});
+			fireEvent.click(addParamButton);
+
+			// Parameter table should now be visible
+			await waitFor(() => {
+				expect(screen.getByText('Key')).toBeInTheDocument();
+				expect(screen.getByText('Value')).toBeInTheDocument();
+			});
+
+			// Should have one empty parameter row
+			const keyInputs = screen.getAllByPlaceholderText('Key');
+			const valueInputs = screen.getAllByPlaceholderText('Value');
+			expect(keyInputs).toHaveLength(1);
+			expect(valueInputs).toHaveLength(1);
+		});
+
+		it('should update URL when parameter values are changed', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Add a parameter
+			const addParamButton = screen.getByRole('button', {
+				name: /add url parameter/i,
+			});
+			fireEvent.click(addParamButton);
+
+			// Fill in parameter key and value
+			const keyInput = screen.getByPlaceholderText('Key');
+			const valueInput = screen.getAllByPlaceholderText('Value')[0];
+
+			fireEvent.change(keyInput, { target: { value: 'search' } });
+			fireEvent.change(valueInput, { target: { value: 'query' } });
+
+			// URL should be updated with the parameter
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			) as HTMLInputElement;
+			expect(urlInput.value).toBe('?search=query');
+		});
+
+		it('should delete URL parameter when delete button is clicked', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Add a parameter
+			const addParamButton = screen.getByRole('button', {
+				name: /add url parameter/i,
+			});
+			fireEvent.click(addParamButton);
+
+			// Fill in parameter
+			const keyInput = screen.getByPlaceholderText('Key');
+			const valueInput = screen.getAllByPlaceholderText('Value')[0];
+			fireEvent.change(keyInput, { target: { value: 'test' } });
+			fireEvent.change(valueInput, { target: { value: 'value' } });
+
+			// Verify parameter is added
+			expect(screen.getByDisplayValue('test')).toBeInTheDocument();
+
+			// Click delete button for the parameter
+			const deleteButtons = screen.getAllByRole('button', { name: '' });
+			const deleteButton = deleteButtons.find((btn) =>
+				btn.className.includes('delete-parameter-btn'),
+			);
+			expect(deleteButton).toBeInTheDocument();
+			fireEvent.click(deleteButton!);
+
+			// Parameter should be removed
+			await waitFor(() => {
+				expect(screen.queryByDisplayValue('test')).not.toBeInTheDocument();
+			});
+
+			// URL should be cleaned up
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			) as HTMLInputElement;
+			expect(urlInput.value).toBe('');
+		});
+
+		it('should handle multiple parameters and maintain URL synchronization', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Add first parameter
+			const addParamButton = screen.getByRole('button', {
+				name: /add url parameter/i,
+			});
+			fireEvent.click(addParamButton);
+
+			// Fill first parameter
+			let keyInputs = screen.getAllByPlaceholderText('Key');
+			let valueInputs = screen.getAllByPlaceholderText('Value');
+			fireEvent.change(keyInputs[0], { target: { value: 'page' } });
+			fireEvent.change(valueInputs[0], { target: { value: '1' } });
+
+			// Add second parameter
+			fireEvent.click(addParamButton);
+
+			// Get updated inputs after adding second parameter
+			keyInputs = screen.getAllByPlaceholderText('Key');
+			valueInputs = screen.getAllByPlaceholderText('Value');
+
+			// Fill second parameter
+			fireEvent.change(keyInputs[1], { target: { value: 'size' } });
+			fireEvent.change(valueInputs[1], { target: { value: '10' } });
+
+			// URL should contain both parameters
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			) as HTMLInputElement;
+			expect(urlInput.value).toBe('?page=1&size=10');
+
+			// Change first parameter value
+			fireEvent.change(valueInputs[0], { target: { value: '2' } });
+
+			// URL should be updated
+			expect(urlInput.value).toBe('?page=2&size=10');
+		});
+
+		it('should validate URL format and show appropriate error messages', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Try to save with invalid URL
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+			fireEvent.change(urlInput, { target: { value: 'invalid-url' } });
+
+			// Try to save
+			const saveButton = screen.getByRole('button', { name: /save/i });
+			fireEvent.click(saveButton);
+
+			// Should show validation error
+			await waitFor(() => {
+				expect(
+					screen.getByText('URLs must start with http(s), /, or {{.*}}/'),
+				).toBeInTheDocument();
+			});
+
+			// setContextLinks should not be called due to validation failure
+			expect(mockSetContextLinks).not.toHaveBeenCalled();
+		});
+
+		it('should handle special characters in parameter keys and values correctly', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Add parameter with special characters
+			const addParamButton = screen.getByRole('button', {
+				name: /add url parameter/i,
+			});
+			fireEvent.click(addParamButton);
+
+			// Fill parameter with special characters
+			const keyInput = screen.getByPlaceholderText('Key');
+			const valueInput = screen.getAllByPlaceholderText('Value')[0];
+
+			fireEvent.change(keyInput, { target: { value: 'user@domain' } });
+			fireEvent.change(valueInput, { target: { value: 'John Doe & Co.' } });
+
+			// URL should be properly encoded
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			) as HTMLInputElement;
+			expect(urlInput.value).toBe('?user%40domain=John%20Doe%20%26%20Co.');
+		});
+
+		it('should support template variables in URL and parameters', async () => {
+			const mockSetContextLinks = jest.fn();
+
+			renderWithProviders(
+				<ContextLinks
+					contextLinks={MOCK_EMPTY_CONTEXT_LINKS}
+					setContextLinks={mockSetContextLinks}
+				/>,
+			);
+
+			// Open modal
+			const addButton = screen.getByRole('button', { name: /context link/i });
+			fireEvent.click(addButton);
+
+			// Type URL with template variable
+			const urlInput = screen.getByPlaceholderText(
+				'http://localhost/trace/{{_traceId}}',
+			);
+			const testUrl =
+				'https://example.com/trace/{{_traceId}}?service={{_serviceName}}';
+			fireEvent.change(urlInput, { target: { value: testUrl } });
+
+			// Wait for parameter parsing
+			await waitFor(() => {
+				expect(screen.getByText('Key')).toBeInTheDocument();
+			});
+
+			// Should parse template variable as parameter
+			expect(screen.getByDisplayValue('service')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('{{_serviceName}}')).toBeInTheDocument();
+
+			// URL should maintain template variables
+			expect((urlInput as HTMLInputElement).value).toBe(
+				'https://example.com/trace/{{_traceId}}?service={{_serviceName}}',
+			);
+		});
+	});
+});

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

@@ -0,0 +1,6 @@
+export const CONTEXT_LINK_FIELDS = {
+	ID: 'id',
+	LABEL: 'label',
+	URL: 'url',
+	// OPEN_IN_NEW_TAB: 'openInNewTab'
+};

frontend/src/container/NewWidget/RightContainer/ContextLinks/index.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import './styles.scss';
+
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button, Modal, Typography } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
+import { Dispatch, SetStateAction } from 'react';
+import { ContextLinkProps, ContextLinksData } from 'types/api/dashboard/getAll';
+
+import UpdateContextLinks from './UpdateContextLinks';
+import useContextLinkModal from './useContextLinkModal';
+
+function SortableContextLink({
+	contextLink,
+	onDelete,
+	onEdit,
+}: {
+	contextLink: ContextLinkProps;
+	onDelete: (contextLink: ContextLinkProps) => void;
+	onEdit: (contextLink: ContextLinkProps) => void;
+}): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+	} = useSortable({ id: contextLink.id });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className="context-link-item drag-enabled"
+		>
+			<div {...attributes} {...listeners} className="drag-handle">
+				<div className="drag-handle-icon">
+					<GripVertical size={16} />
+				</div>
+				<div className="context-link-content">
+					<span className="context-link-label">{contextLink.label}</span>
+					<span className="context-link-url">{contextLink.url}</span>
+				</div>
+			</div>
+			<div className="context-link-actions">
+				<Button
+					className="edit-context-link-btn periscope-btn"
+					size="small"
+					icon={<Pencil size={12} />}
+					onClick={(): void => {
+						onEdit(contextLink);
+					}}
+				/>
+				<Button
+					className="delete-context-link-btn periscope-btn"
+					size="small"
+					icon={<Trash2 size={12} />}
+					onClick={(): void => {
+						onDelete(contextLink);
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function ContextLinks({
+	contextLinks,
+	setContextLinks,
+}: {
+	contextLinks: ContextLinksData;
+	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
+}): JSX.Element {
+	// Use the custom hook for modal functionality
+	const {
+		isModalOpen,
+		selectedContextLink,
+		handleEditContextLink,
+		handleAddContextLink,
+		handleCancelModal,
+		handleSaveContextLink,
+	} = useContextLinkModal({ setContextLinks });
+
+	const sensors = useSensors(useSensor(PointerSensor));
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+
+		if (over && active.id !== over.id) {
+			setContextLinks((prev) => {
+				const items = [...prev.linksData];
+				const oldIndex = items.findIndex((item) => item.id === active.id);
+				const newIndex = items.findIndex((item) => item.id === over.id);
+
+				return {
+					...prev,
+					linksData: arrayMove(items, oldIndex, newIndex),
+				};
+			});
+		}
+	};
+
+	const handleDeleteContextLink = (contextLink: ContextLinkProps): void => {
+		setContextLinks((prev) => ({
+			...prev,
+			linksData: prev.linksData.filter((link) => link.id !== contextLink.id),
+		}));
+	};
+
+	return (
+		<div className="context-links-container">
+			<Typography.Text className="context-links-text">
+				Context Links
+			</Typography.Text>
+
+			<div className="context-links-list">
+				<OverlayScrollbar>
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						onDragEnd={handleDragEnd}
+					>
+						<SortableContext
+							items={contextLinks.linksData.map((link) => link.id)}
+							strategy={verticalListSortingStrategy}
+						>
+							{contextLinks.linksData.map((contextLink) => (
+								<SortableContextLink
+									key={contextLink.id}
+									contextLink={contextLink}
+									onDelete={handleDeleteContextLink}
+									onEdit={handleEditContextLink}
+								/>
+							))}
+						</SortableContext>
+					</DndContext>
+				</OverlayScrollbar>
+
+				{/* button to add context link */}
+				<Button
+					type="primary"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					onClick={handleAddContextLink}
+				>
+					Context Link
+				</Button>
+			</div>
+
+			<Modal
+				title={selectedContextLink ? 'Edit context link' : 'Add a context link'}
+				open={isModalOpen}
+				onCancel={handleCancelModal}
+				destroyOnClose
+				width={672}
+				footer={null}
+			>
+				<UpdateContextLinks
+					selectedContextLink={selectedContextLink}
+					onSave={handleSaveContextLink}
+					onCancel={handleCancelModal}
+				/>
+			</Modal>
+		</div>
+	);
+}
+
+export default ContextLinks;

frontend/src/container/NewWidget/RightContainer/ContextLinks/styles.scss

@@ -0,0 +1,149 @@
+.context-links-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin: 12px;
+}
+
+.context-links-text {
+	color: var(--bg-vanilla-400);
+	font-family: 'Space Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: 0.52px;
+	text-transform: uppercase;
+}
+
+.context-links-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	max-height: 300px;
+}
+
+.context-link-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	border-radius: 4px;
+	user-select: none;
+	transition: background-color 0.2s ease-in-out;
+	width: 100%;
+	min-width: 0;
+
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-grow: 1;
+		cursor: grab;
+		min-width: 0;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	.drag-handle-icon {
+		flex-shrink: 0;
+		color: var(--bg-vanilla-400);
+	}
+
+	.context-link-content {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		flex-grow: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.context-link-label {
+		color: var(--bg-vanilla-100);
+		font-size: 12px;
+		font-weight: 500;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.context-link-url {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 400;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.context-link-actions {
+		display: flex;
+		gap: 4px;
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+		flex-shrink: 0;
+	}
+
+	.edit-context-link-btn,
+	.delete-context-link-btn {
+		padding: 6px 12px;
+		flex-shrink: 0;
+	}
+
+	.delete-context-link-btn {
+		&:hover {
+			color: var(--bg-cherry-400) !important;
+			border-color: var(--bg-cherry-400) !important;
+		}
+	}
+
+	&:hover {
+		background-color: var(--bg-slate-400);
+
+		.context-link-actions {
+			opacity: 1;
+		}
+	}
+}
+
+.add-context-link-button {
+	display: flex;
+	align-items: center;
+	margin: auto;
+	width: fit-content;
+}
+
+.lightMode {
+	.context-links-text {
+		color: var(--bg-ink-400);
+	}
+
+	.context-link-item {
+		&:hover {
+			background-color: var(--bg-vanilla-200);
+		}
+
+		.context-link-label {
+			color: var(--bg-slate-500);
+		}
+
+		.context-link-url {
+			color: var(--bg-slate-400);
+		}
+
+		.drag-handle-icon {
+			color: var(--bg-slate-400);
+		}
+
+		.delete-context-link-btn {
+			&:hover {
+				color: var(--bg-cherry-500);
+				border-color: var(--bg-cherry-500);
+				background-color: var(--bg-cherry-100);
+			}
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/useContextLinkModal.ts

@@ -0,0 +1,65 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { ContextLinkProps, ContextLinksData } from 'types/api/dashboard/getAll';
+
+interface ContextLinkModalProps {
+	isModalOpen: boolean;
+	selectedContextLink: ContextLinkProps | null;
+	handleEditContextLink: (contextLink: ContextLinkProps) => void;
+	handleAddContextLink: () => void;
+	handleCancelModal: () => void;
+	handleSaveContextLink: (newContextLink: ContextLinkProps) => void;
+}
+
+const useContextLinkModal = ({
+	setContextLinks,
+}: {
+	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
+}): ContextLinkModalProps => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [
+		selectedContextLink,
+		setSelectedContextLink,
+	] = useState<ContextLinkProps | null>(null);
+
+	const handleEditContextLink = (contextLink: ContextLinkProps): void => {
+		setSelectedContextLink(contextLink);
+		setIsModalOpen(true);
+	};
+
+	const handleAddContextLink = (): void => {
+		setSelectedContextLink(null);
+		setIsModalOpen(true);
+	};
+
+	const handleCancelModal = (): void => {
+		setIsModalOpen(false);
+		setSelectedContextLink(null);
+	};
+
+	const handleSaveContextLink = (newContextLink: ContextLinkProps): void => {
+		setContextLinks((prev) => {
+			const links = [...prev.linksData];
+			const existing = links.filter((link) => link.id === newContextLink.id)[0];
+			if (existing) {
+				const idx = links.findIndex((link) => link.id === newContextLink.id);
+				links[idx] = { ...existing, ...newContextLink };
+				return { ...prev, linksData: links };
+			}
+			links.push(newContextLink);
+			return { ...prev, linksData: links };
+		});
+		setIsModalOpen(false);
+		setSelectedContextLink(null);
+	};
+
+	return {
+		isModalOpen,
+		selectedContextLink,
+		handleEditContextLink,
+		handleAddContextLink,
+		handleCancelModal,
+		handleSaveContextLink,
+	};
+};
+
+export default useContextLinkModal;

frontend/src/container/NewWidget/RightContainer/ContextLinks/utils.tsx

@@ -0,0 +1,181 @@
+import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
+import { resolveTexts } from 'hooks/dashboard/useContextVariables';
+import { ContextLinkProps } from 'types/api/dashboard/getAll';
+import { v4 as uuid } from 'uuid';
+
+interface UrlParam {
+	key: string;
+	value: string;
+}
+
+interface ProcessedContextLink {
+	id: string;
+	label: string;
+	url: string;
+}
+
+const getInitialValues = (
+	contextLink: ContextLinkProps | null,
+): Record<string, string> => ({
+	[CONTEXT_LINK_FIELDS.ID]: contextLink?.id || uuid(),
+	[CONTEXT_LINK_FIELDS.LABEL]: contextLink?.label || '',
+	[CONTEXT_LINK_FIELDS.URL]: contextLink?.url || '',
+});
+
+const getUrlParams = (url: string): UrlParam[] => {
+	try {
+		const [, queryString] = url.split('?');
+
+		if (!queryString) {
+			return [];
+		}
+
+		const paramPairs = queryString.split('&');
+		const params: UrlParam[] = [];
+
+		paramPairs.forEach((pair) => {
+			try {
+				const [key, value] = pair.split('=');
+				if (key) {
+					const decodedKey = decodeURIComponent(key);
+					const decodedValue = decodeURIComponent(value || '');
+
+					// Double decode the value for display
+					let displayValue = decodedValue;
+					try {
+						// Try to double decode if it looks like it was double encoded
+						const doubleDecoded = decodeURIComponent(decodedValue);
+						// Check if double decoding produced a different result
+						if (doubleDecoded !== decodedValue) {
+							displayValue = doubleDecoded;
+						}
+					} catch {
+						// If double decoding fails, use single decoded value
+						displayValue = decodedValue;
+					}
+
+					params.push({
+						key: decodedKey,
+						value: displayValue,
+					});
+				}
+			} catch (paramError) {
+				// Skip malformed parameters and continue processing
+				console.warn('Failed to parse URL parameter:', pair, paramError);
+			}
+		});
+
+		return params;
+	} catch (error) {
+		console.warn('Failed to parse URL parameters, returning empty array:', error);
+		return [];
+	}
+};
+
+const updateUrlWithParams = (url: string, params: UrlParam[]): string => {
+	// Get base URL without query parameters
+	const [baseUrl] = url.split('?');
+
+	// Create query parameter string from current parameters
+	const validParams = params.filter((param) => param.key.trim() !== '');
+	const queryString = validParams
+		.map(
+			(param) =>
+				`${encodeURIComponent(param.key.trim())}=${encodeURIComponent(
+					param.value,
+				)}`,
+		)
+		.join('&');
+
+	// Construct final URL
+	return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+};
+
+// Utility function to process context links with variable resolution and URL encoding
+const processContextLinks = (
+	contextLinks: ContextLinkProps[],
+	processedVariables: Record<string, string>,
+	maxLength?: number,
+): ProcessedContextLink[] => {
+	// Extract all labels and URLs for batch processing
+	const labels = contextLinks.map(({ label }) => label);
+	const urls = contextLinks.map(({ url }) => url);
+
+	// Resolve variables in labels
+	const resolvedLabels = resolveTexts({
+		texts: labels,
+		processedVariables,
+		maxLength,
+	});
+
+	// Process URLs with proper encoding/decoding
+	const finalUrls = urls.map((url) => {
+		if (typeof url !== 'string') return url;
+
+		try {
+			// 1. Get the URL and extract base URL and query string
+			const [baseUrl, queryString] = url.split('?');
+			// Resolve variables in base URL.
+			const resolvedBaseUrlResult = resolveTexts({
+				texts: [baseUrl],
+				processedVariables,
+			});
+			const resolvedBaseUrl = resolvedBaseUrlResult.fullTexts[0];
+
+			if (!queryString) return resolvedBaseUrl;
+
+			// 2. Extract all query params using URLSearchParams
+			const searchParams = new URLSearchParams(queryString);
+			const processedParams: Record<string, string> = {};
+
+			// 3. Process each parameter
+			Array.from(searchParams.entries()).forEach(([key, value]) => {
+				// 4. Decode twice to handle double encoding
+				let decodedValue = decodeURIComponent(value);
+				try {
+					const doubleDecoded = decodeURIComponent(decodedValue);
+					// Check if double decoding produced a different result
+					if (doubleDecoded !== decodedValue) {
+						decodedValue = doubleDecoded;
+					}
+				} catch {
+					// If double decoding fails, use single decoded value
+				}
+
+				// 5. Pass through resolve text for variable resolution
+				const resolvedTextsResult = resolveTexts({
+					texts: [decodedValue],
+					processedVariables,
+				});
+				const resolvedValue = resolvedTextsResult.fullTexts[0];
+
+				// 6. Encode the resolved value
+				processedParams[key] = encodeURIComponent(resolvedValue);
+			});
+
+			// 7. Create new URL with processed parameters
+			const newQueryString = Object.entries(processedParams)
+				.map(([key, value]) => `${encodeURIComponent(key)}=${value}`)
+				.join('&');
+
+			return `${resolvedBaseUrl}?${newQueryString}`;
+		} catch (error) {
+			console.warn('Failed to process URL, using original URL:', error);
+			return url;
+		}
+	});
+
+	// Return processed context links
+	return contextLinks.map((link, index) => ({
+		id: link.id,
+		label: resolvedLabels.fullTexts[index],
+		url: finalUrls[index],
+	}));
+};
+
+export {
+	getInitialValues,
+	getUrlParams,
+	processContextLinks,
+	updateUrlWithParams,
+};

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -335,6 +335,10 @@
 		}
 	}
 
+	.context-links {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
 	.alerts {
 		display: flex;
 		padding: 12px;
@@ -512,6 +516,10 @@
 				color: var(--bg-ink-300);
 			}
 		}
+
+		.context-links {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+		}
 	}
 
 	.select-option {

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

@@ -178,3 +178,17 @@ export const panelTypeVsLegendColors: {
 	[PANEL_TYPES.HISTOGRAM]: true,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
+
+export const panelTypeVsContextLinks: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: true,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: true,
+	[PANEL_TYPES.BAR]: true,
+	[PANEL_TYPES.HISTOGRAM]: true,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -34,6 +34,7 @@ import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
+	ContextLinksData,
 	LegendPosition,
 	Widgets,
 } from 'types/api/dashboard/getAll';
@@ -45,6 +46,7 @@ import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
+	panelTypeVsContextLinks,
 	panelTypeVsCreateAlert,
 	panelTypeVsFillSpan,
 	panelTypeVsLegendColors,
@@ -56,6 +58,7 @@ import {
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
 } from './constants';
+import ContextLinks from './ContextLinks';
 import LegendColors from './LegendColors/LegendColors';
 import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
@@ -113,6 +116,9 @@ function RightContainer({
 	customLegendColors,
 	setCustomLegendColors,
 	queryResponse,
+	contextLinks,
+	setContextLinks,
+	enableDrillDown = false,
 }: RightContainerProps): JSX.Element {
 	const { selectedDashboard } = useDashboard();
 	const [inputValue, setInputValue] = useState(title);
@@ -152,6 +158,8 @@ function RightContainer({
 
 	const allowPanelColumnPreference =
 		panelTypeVsColumnUnitPreferences[selectedGraph];
+	const allowContextLinks =
+		panelTypeVsContextLinks[selectedGraph] && enableDrillDown;
 
 	const { currentQuery } = useQueryBuilder();
 
@@ -498,6 +506,15 @@ function RightContainer({
 				</section>
 			)}
 
+			{allowContextLinks && (
+				<section className="context-links">
+					<ContextLinks
+						contextLinks={contextLinks}
+						setContextLinks={setContextLinks}
+					/>
+				</section>
+			)}
+
 			{allowThreshold && (
 				<section>
 					<ThresholdSelector
@@ -559,11 +576,15 @@ interface RightContainerProps {
 		SuccessResponse<MetricRangePayloadProps, unknown>,
 		Error
 	>;
+	contextLinks: ContextLinksData;
+	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
+	enableDrillDown?: boolean;
 }
 
 RightContainer.defaultProps = {
 	selectedWidget: undefined,
 	queryResponse: null,
+	enableDrillDown: false,
 };
 
 export default RightContainer;

frontend/src/container/NewWidget/index.tsx

@@ -21,6 +21,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import createQueryParams from 'lib/createQueryParams';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
@@ -41,6 +42,7 @@ import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
+	ContextLinksData,
 	LegendPosition,
 	Widgets,
 } from 'types/api/dashboard/getAll';
@@ -72,7 +74,10 @@ import {
 	placeWidgetBetweenRows,
 } from './utils';
 
-function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
+function NewWidget({
+	selectedGraph,
+	enableDrillDown = false,
+}: NewWidgetProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const {
 		selectedDashboard,
@@ -239,6 +244,10 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		selectedWidget?.columnUnits || {},
 	);
 
+	const [contextLinks, setContextLinks] = useState<ContextLinksData>(
+		selectedWidget?.contextLinks || { linksData: [] },
+	);
+
 	useEffect(() => {
 		setSelectedWidget((prev) => {
 			if (!prev) {
@@ -268,6 +277,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 				legendPosition,
 				customLegendColors,
 				columnWidths: columnWidths?.[selectedWidget?.id],
+				contextLinks,
 			};
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -294,6 +304,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		legendPosition,
 		customLegendColors,
 		columnWidths,
+		contextLinks,
 	]);
 
 	const closeModal = (): void => {
@@ -504,6 +515,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 								selectedTracesFields: selectedWidget?.selectedTracesFields || [],
 								legendPosition: selectedWidget?.legendPosition || LegendPosition.BOTTOM,
 								customLegendColors: selectedWidget?.customLegendColors || {},
+								contextLinks: selectedWidget?.contextLinks || { linksData: [] },
 							},
 					  ]
 					: [
@@ -533,6 +545,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 								selectedTracesFields: selectedWidget?.selectedTracesFields || [],
 								legendPosition: selectedWidget?.legendPosition || LegendPosition.BOTTOM,
 								customLegendColors: selectedWidget?.customLegendColors || {},
+								contextLinks: selectedWidget?.contextLinks || { linksData: [] },
 							},
 							...afterWidgets,
 					  ],
@@ -690,6 +703,26 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		}
 	}, [selectedLogFields, selectedTracesFields, currentQuery, selectedGraph]);
 
+	const showSwitchToViewModeButton =
+		enableDrillDown && !isNewDashboard && !!query.get('widgetId');
+
+	const handleSwitchToViewMode = useCallback(() => {
+		if (!query.get('widgetId')) return;
+		const widgetId = query.get('widgetId') || '';
+		const queryParams = {
+			[QueryParams.expandedWidgetId]: widgetId,
+			[QueryParams.compositeQuery]: encodeURIComponent(
+				JSON.stringify(currentQuery),
+			),
+		};
+
+		const updatedSearch = createQueryParams(queryParams);
+		safeNavigate({
+			pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
+			search: updatedSearch,
+		});
+	}, [query, safeNavigate, dashboardId, currentQuery]);
+
 	return (
 		<Container>
 			<div className="edit-header">
@@ -706,31 +739,42 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 						</Typography.Text>
 					</Flex>
 				</div>
-				{isSaveDisabled && (
-					<Button
-						type="primary"
-						data-testid="new-widget-save"
-						loading={updateDashboardMutation.isLoading}
-						disabled={isSaveDisabled}
-						onClick={onSaveDashboard}
-						className="save-btn"
-					>
-						Save Changes
-					</Button>
-				)}
-				{!isSaveDisabled && (
-					<Button
-						type="primary"
-						data-testid="new-widget-save"
-						loading={updateDashboardMutation.isLoading}
-						disabled={isSaveDisabled}
-						onClick={onSaveDashboard}
-						icon={<Check size={14} />}
-						className="save-btn"
-					>
-						Save Changes
-					</Button>
-				)}
+				<div className="right-header">
+					{showSwitchToViewModeButton && (
+						<Button
+							data-testid="switch-to-view-mode"
+							disabled={isSaveDisabled || !currentQuery}
+							onClick={handleSwitchToViewMode}
+						>
+							Switch to View Mode
+						</Button>
+					)}
+					{isSaveDisabled && (
+						<Button
+							type="primary"
+							data-testid="new-widget-save"
+							loading={updateDashboardMutation.isLoading}
+							disabled={isSaveDisabled}
+							onClick={onSaveDashboard}
+							className="save-btn"
+						>
+							Save Changes
+						</Button>
+					)}
+					{!isSaveDisabled && (
+						<Button
+							type="primary"
+							data-testid="new-widget-save"
+							loading={updateDashboardMutation.isLoading}
+							disabled={isSaveDisabled}
+							onClick={onSaveDashboard}
+							icon={<Check size={14} />}
+							className="save-btn"
+						>
+							Save Changes
+						</Button>
+					)}
+				</div>
 			</div>
 
 			<PanelContainer>
@@ -749,6 +793,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 								setRequestData={setRequestData}
 								isLoadingPanelData={isLoadingPanelData}
 								setQueryResponse={setQueryResponse}
+								enableDrillDown={enableDrillDown}
 							/>
 						)}
 					</OverlayScrollbar>
@@ -799,6 +844,9 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 							setSoftMin={setSoftMin}
 							softMax={softMax}
 							setSoftMax={setSoftMax}
+							contextLinks={contextLinks}
+							setContextLinks={setContextLinks}
+							enableDrillDown={enableDrillDown}
 						/>
 					</OverlayScrollbar>
 				</RightContainerWrapper>

frontend/src/container/NewWidget/types.ts

@@ -12,6 +12,7 @@ export interface NewWidgetProps {
 	selectedGraph: PANEL_TYPES;
 	yAxisUnit: Widgets['yAxisUnit'];
 	fillSpans: Widgets['fillSpans'];
+	enableDrillDown?: boolean;
 }
 
 export interface WidgetGraphProps {
@@ -32,6 +33,7 @@ export interface WidgetGraphProps {
 			UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
 		>
 	>;
+	enableDrillDown?: boolean;
 }
 
 export type WidgetGraphContainerProps = {
@@ -45,4 +47,5 @@ export type WidgetGraphContainerProps = {
 	selectedGraph: PANEL_TYPES;
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
+	enableDrillDown?: boolean;
 };

frontend/src/container/NewWidget/utils.ts

@@ -554,6 +554,7 @@ export const getDefaultWidgetData = (
 		dataType: field.fieldDataType ?? '',
 	})),
 	selectedTracesFields: defaultTraceSelectedColumns,
+	// contextLinks: { linksData: [] },
 });
 
 export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {

frontend/src/container/PanelWrapper/HistogramPanelWrapper.tsx

@@ -2,12 +2,15 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import Uplot from 'components/Uplot';
 import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
 import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
+import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { getUplotHistogramChartOptions } from 'lib/uPlotLib/getUplotHistogramChartOptions';
 import _noop from 'lodash-es/noop';
+import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { buildHistogramData } from './histogram';
 import { PanelWrapperProps } from './panelWrapper.types';
@@ -20,11 +23,60 @@ function HistogramPanelWrapper({
 	isFullViewMode,
 	onToggleModelHandler,
 	onClickHandler,
+	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+	const { menuItemsConfig } = useGraphContextMenu({
+		widgetId: widget.id || '',
+		query: widget.query,
+		graphData: clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+		contextLinks: widget.contextLinks,
+		panelType: widget.panelTypes,
+	});
+
+	const clickHandlerWithContextMenu = useCallback(
+		(...args: any[]) => {
+			const [
+				,
+				,
+				,
+				,
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				,
+				focusedSeries,
+			] = args;
+			const data = getUplotClickData({
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				focusedSeries,
+			});
+			if (data && data?.record?.queryName) {
+				onClick(data.coord, { ...data.record, label: data.label });
+			}
+		},
+		[onClick],
+	);
 
 	const histogramData = buildHistogramData(
 		queryResponse.data?.payload.data.result,
@@ -73,7 +125,9 @@ function HistogramPanelWrapper({
 				setGraphsVisibilityStates: setGraphVisibility,
 				graphsVisibilityStates: graphVisibility,
 				mergeAllQueries: widget.mergeAllActiveQueries,
-				onClickHandler: onClickHandler || _noop,
+				onClickHandler: enableDrillDown
+					? clickHandlerWithContextMenu
+					: onClickHandler ?? _noop,
 			}),
 		[
 			containerDimensions,
@@ -85,6 +139,8 @@ function HistogramPanelWrapper({
 			widget.id,
 			widget.mergeAllActiveQueries,
 			widget.panelTypes,
+			clickHandlerWithContextMenu,
+			enableDrillDown,
 			onClickHandler,
 		],
 	);
@@ -92,6 +148,13 @@ function HistogramPanelWrapper({
 	return (
 		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			<Uplot options={histogramOptions} data={histogramData} ref={lineChartRef} />
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				title={menuItemsConfig.header as string}
+				items={menuItemsConfig.items}
+				onClose={onClose}
+			/>
 			{isFullViewMode && setGraphVisibility && !widget.mergeAllActiveQueries && (
 				<GraphManager
 					data={histogramData}

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -21,6 +21,7 @@ function PanelWrapper({
 	onOpenTraceBtnClick,
 	customSeries,
 	customOnRowClick,
+	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -49,6 +50,7 @@ function PanelWrapper({
 			onOpenTraceBtnClick={onOpenTraceBtnClick}
 			customOnRowClick={customOnRowClick}
 			customSeries={customSeries}
+			enableDrillDown={enableDrillDown}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/PiePanelWrapper.tsx

@@ -6,10 +6,13 @@ import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { themeColors } from 'constants/theme';
+import { getPieChartClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { isNaN } from 'lodash-es';
+import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
 import { useRef, useState } from 'react';
 
 import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
@@ -19,6 +22,7 @@ import { lightenColor, tooltipStyles } from './utils';
 function PiePanelWrapper({
 	queryResponse,
 	widget,
+	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const [active, setActive] = useState<{
 		label: string;
@@ -48,6 +52,7 @@ function PiePanelWrapper({
 		label: string;
 		value: string;
 		color: string;
+		record: any;
 	}[] = [].concat(
 		...(panelData
 			.map((d) => {
@@ -55,6 +60,7 @@ function PiePanelWrapper({
 				return {
 					label,
 					value: d?.values?.[0]?.[1],
+					record: d,
 					color:
 						widget?.customLegendColors?.[label] ||
 						generateColor(
@@ -142,6 +148,28 @@ function PiePanelWrapper({
 		return active.color === color ? color : lightenedColor;
 	};
 
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+
+	const { menuItemsConfig } = useGraphContextMenu({
+		widgetId: widget.id || '',
+		query: widget.query,
+		graphData: clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+		contextLinks: widget.contextLinks,
+		panelType: widget.panelTypes,
+	});
+
 	return (
 		<div className="piechart-wrapper">
 			{!pieChartData.length && <div className="piechart-no-data">No data</div>}
@@ -165,7 +193,7 @@ function PiePanelWrapper({
 									height={size}
 								>
 									{
-										// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+										// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, sonarjs/cognitive-complexity
 										(pie) =>
 											pie.arcs.map((arc) => {
 												const { label } = arc.data;
@@ -226,6 +254,17 @@ function PiePanelWrapper({
 															hideTooltip();
 															setActive(null);
 														}}
+														onClick={(e): void => {
+															if (enableDrillDown) {
+																const data = getPieChartClickData(arc);
+																if (data && data?.queryName) {
+																	onClick(
+																		{ x: e.clientX, y: e.clientY },
+																		{ ...data, label: data.label },
+																	);
+																}
+															}
+														}}
 													>
 														<path d={arcPath || ''} fill={getFillColor(arcFill)} />
 
@@ -284,6 +323,13 @@ function PiePanelWrapper({
 											})
 									}
 								</Pie>
+								<ContextMenu
+									coordinates={coordinates}
+									popoverPosition={popoverPosition}
+									title={menuItemsConfig.header as string}
+									items={menuItemsConfig.items}
+									onClose={onClose}
+								/>
 
 								{/* Add total value in the center */}
 								<text

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -12,6 +12,7 @@ function TablePanelWrapper({
 	openTracesButton,
 	onOpenTraceBtnClick,
 	customOnRowClick,
+	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -31,6 +32,9 @@ function TablePanelWrapper({
 			widgetId={widget.id}
 			renderColumnCell={widget.renderColumnCell}
 			customColTitles={widget.customColTitles}
+			contextLinks={widget.contextLinks}
+			enableDrillDown={enableDrillDown}
+			panelType={widget.panelTypes}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...GRID_TABLE_CONFIG}
 		/>

frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx

@@ -6,6 +6,8 @@ import Uplot from 'components/Uplot';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
 import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
+import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -13,14 +15,16 @@ import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { cloneDeep, isEqual, isUndefined } from 'lodash-es';
 import _noop from 'lodash-es/noop';
+import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import uPlot from 'uplot';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { PanelWrapperProps } from './panelWrapper.types';
+import { getTimeRangeFromUplotAxis } from './utils';
 
 function UplotPanelWrapper({
 	queryResponse,
@@ -34,6 +38,7 @@ function UplotPanelWrapper({
 	selectedGraph,
 	customTooltipElement,
 	customSeries,
+	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const isDarkMode = useIsDarkMode();
@@ -65,6 +70,27 @@ function UplotPanelWrapper({
 
 	const containerDimensions = useResizeObserver(graphRef);
 
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+	const { menuItemsConfig } = useGraphContextMenu({
+		widgetId: widget.id || '',
+		query: widget.query,
+		graphData: clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+		contextLinks: widget.contextLinks,
+		panelType: widget.panelTypes,
+	});
+
 	useEffect(() => {
 		const {
 			graphVisibilityStates: localStoredVisibilityState,
@@ -114,6 +140,42 @@ function UplotPanelWrapper({
 
 	const { timezone } = useTimezone();
 
+	const clickHandlerWithContextMenu = useCallback(
+		(...args: any[]) => {
+			const [
+				xValue,
+				,
+				,
+				,
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				axesData,
+				focusedSeries,
+			] = args;
+			const data = getUplotClickData({
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				focusedSeries,
+			});
+			console.log('onClickData: ', data);
+			// Compute time range if needed and if axes data is available
+			let timeRange;
+			if (axesData) {
+				const { xAxis } = axesData;
+				timeRange = getTimeRangeFromUplotAxis(xAxis, xValue);
+			}
+
+			if (data && data?.record?.queryName) {
+				onClick(data.coord, { ...data.record, label: data.label, timeRange });
+			}
+		},
+		[onClick],
+	);
+
 	const options = useMemo(
 		() =>
 			getUPlotChartOptions({
@@ -123,7 +185,9 @@ function UplotPanelWrapper({
 				isDarkMode,
 				onDragSelect,
 				yAxisUnit: widget?.yAxisUnit,
-				onClickHandler: onClickHandler || _noop,
+				onClickHandler: enableDrillDown
+					? clickHandlerWithContextMenu
+					: onClickHandler ?? _noop,
 				thresholds: widget.thresholds,
 				minTimeScale,
 				maxTimeScale,
@@ -152,7 +216,7 @@ function UplotPanelWrapper({
 			containerDimensions,
 			isDarkMode,
 			onDragSelect,
-			onClickHandler,
+			clickHandlerWithContextMenu,
 			minTimeScale,
 			maxTimeScale,
 			graphVisibility,
@@ -163,6 +227,8 @@ function UplotPanelWrapper({
 			customTooltipElement,
 			timezone.value,
 			customSeries,
+			enableDrillDown,
+			onClickHandler,
 			widget,
 		],
 	);
@@ -170,6 +236,13 @@ function UplotPanelWrapper({
 	return (
 		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			<Uplot options={options} data={chartData} ref={lineChartRef} />
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				title={menuItemsConfig.header as string}
+				items={menuItemsConfig.items}
+				onClose={onClose}
+			/>
 			{widget?.stackedBarChart && isFullViewMode && (
 				<Alert
 					message="Selecting multiple legends is currently not supported in case of stacked bar charts"

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

@@ -266,22 +266,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              demo-app
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                demo-app
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              4.35 s
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                4.35 s
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -292,22 +304,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              customer
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                customer
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              431 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                431 ms
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -318,22 +342,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              mysql
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                mysql
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              431 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                431 ms
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -344,22 +380,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              frontend
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                frontend
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              287 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                287 ms
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -370,22 +418,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              driver
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                driver
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              230 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                230 ms
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -396,22 +456,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              route
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                route
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              66.4 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                66.4 ms
+                              </div>
                             </div>
                           </div>
                         </td>
@@ -422,22 +494,34 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              redis
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                redis
+                              </div>
                             </div>
                           </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
-                          <div>
-                            <div
-                              class="line-clamped-wrapper__text"
-                            >
-                              31.3 ms
+                          <div
+                            class=""
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div>
+                              <div
+                                class="line-clamped-wrapper__text"
+                              >
+                                31.3 ms
+                              </div>
                             </div>
                           </div>
                         </td>

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -30,6 +30,7 @@ export type PanelWrapperProps = {
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	customOnRowClick?: (record: RowData) => void;
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
+	enableDrillDown?: boolean;
 };
 
 export type TooltipData = {

frontend/src/container/PanelWrapper/utils.ts

@@ -71,3 +71,20 @@ export const lightenColor = (color: string, opacity: number): string => {
 	// Create a new RGBA color string with the specified opacity
 	return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 };
+
+export const getTimeRangeFromUplotAxis = (
+	axis: any,
+	xValue: number,
+): { startTime: number; endTime: number } => {
+	let gap =
+		(axis as any)._splits && (axis as any)._splits.length > 1
+			? (axis as any)._splits[1] - (axis as any)._splits[0]
+			: 600; // 10 minutes in seconds
+
+	gap = Math.max(gap, 600); // Minimum gap of 10 minutes in seconds
+
+	const startTime = xValue - gap;
+	const endTime = xValue + gap;
+
+	return { startTime, endTime };
+};

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -0,0 +1,137 @@
+import './Breakoutoptions.styles.scss';
+
+import { Input, Skeleton } from 'antd';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import useDebounce from 'hooks/useDebounce';
+import { ContextMenu } from 'periscope/components/ContextMenu';
+import { useCallback, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { MetricAggregation } from 'types/api/v5/queryRange';
+
+import { BreakoutOptionsProps } from './contextConfig';
+
+function OptionsSkeleton(): JSX.Element {
+	return (
+		<div className="breakout-options-skeleton">
+			{Array.from({ length: 5 }).map((_, index) => (
+				<Skeleton.Input
+					active
+					size="small"
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+				/>
+			))}
+		</div>
+	);
+}
+
+function BreakoutOptions({
+	queryData,
+	onColumnClick,
+}: BreakoutOptionsProps): JSX.Element {
+	const { groupBy = [] } = queryData;
+	const [searchText, setSearchText] = useState<string>('');
+	const debouncedSearchText = useDebounce(searchText, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setSearchText(value);
+		},
+		[],
+	);
+
+	// Using getKeySuggestions directly like in QuerySearch
+	const { data, isFetching } = useQuery(
+		[
+			'keySuggestions',
+			queryData.dataSource,
+			debouncedSearchText,
+			queryData.aggregateAttribute?.key,
+		],
+		() =>
+			getKeySuggestions({
+				signal: queryData.dataSource,
+				searchText: debouncedSearchText,
+				metricName:
+					(queryData.aggregations?.[0] as MetricAggregation)?.metricName ||
+					queryData.aggregateAttribute?.key,
+			}),
+		{
+			enabled: !!queryData,
+		},
+	);
+
+	const breakoutOptions = useMemo(() => {
+		if (!data?.data?.data?.keys) {
+			return [];
+		}
+
+		const { keys } = data.data.data;
+		const transformedOptions: BaseAutocompleteData[] = [];
+
+		// Transform the response to match BaseAutocompleteData format
+		Object.values(keys).forEach((keyArray) => {
+			keyArray.forEach((keyData) => {
+				transformedOptions.push({
+					key: keyData.name,
+					dataType: DataTypes.EMPTY,
+					type: '',
+					isColumn: true,
+				});
+			});
+		});
+
+		// Filter out already selected groupBy keys
+		const groupByKeys = groupBy.map((item: BaseAutocompleteData) => item.key);
+		return transformedOptions.filter(
+			(item: BaseAutocompleteData) => !groupByKeys.includes(item.key),
+		);
+	}, [data, groupBy]);
+
+	return (
+		<div>
+			<section className="search" style={{ padding: '8px 0' }}>
+				<Input
+					type="text"
+					value={searchText}
+					placeholder="Search breakout options..."
+					onChange={handleInputChange}
+				/>
+			</section>
+			<div>
+				<OverlayScrollbar
+					style={{ maxHeight: '200px' }}
+					options={{
+						overflow: {
+							x: 'hidden',
+						},
+					}}
+				>
+					{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+					<>
+						{isFetching ? (
+							<OptionsSkeleton />
+						) : (
+							breakoutOptions?.map((item: BaseAutocompleteData) => (
+								<ContextMenu.Item
+									key={item.key}
+									onClick={(): void => onColumnClick(item)}
+								>
+									{item.key}
+								</ContextMenu.Item>
+							))
+						)}
+					</>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default BreakoutOptions;

frontend/src/container/QueryTable/Drilldown/Breakoutoptions.styles.scss

@@ -0,0 +1,7 @@
+.breakout-options-skeleton {
+	.ant-skeleton-input {
+		width: 100% !important;
+		height: 20px !important;
+		margin: 8px 5px;
+	}
+}

frontend/src/container/QueryTable/Drilldown/__tests__/Breakout.test.tsx

@@ -0,0 +1,259 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Button } from 'antd';
+import ROUTES from 'constants/routes';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import useTableContextMenu from '../useTableContextMenu';
+import {
+	MOCK_AGGREGATE_DATA,
+	MOCK_COORDINATES,
+	MOCK_FILTER_DATA,
+	MOCK_KEY_SUGGESTIONS_RESPONSE,
+	// MOCK_KEY_SUGGESTIONS_SEARCH_RESPONSE,
+	MOCK_QUERY,
+} from './mockTableData';
+
+// Mock the necessary hooks and dependencies
+const mockSafeNavigate = jest.fn();
+const mockRedirectWithQueryBuilderData = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
+	}),
+}));
+
+jest.mock('container/GridCardLayout/useResolveQuery', () => ({
+	__esModule: true,
+	default: (): any => ({
+		getUpdatedQuery: jest.fn().mockResolvedValue({}),
+		isLoading: false,
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.DASHBOARD}/`,
+	}),
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: (): any => ({
+		globalTime: {
+			selectedTime: {
+				startTime: 1713734400000,
+				endTime: 1713738000000,
+			},
+			maxTime: 1713738000000,
+			minTime: 1713734400000,
+		},
+	}),
+}));
+
+function MockTableDrilldown(): JSX.Element {
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+
+	const { menuItemsConfig } = useTableContextMenu({
+		widgetId: 'test-widget',
+		query: MOCK_QUERY as Query,
+		clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+	});
+
+	const handleClick = (type: 'aggregate' | 'filter'): void => {
+		// Simulate the same flow as handleColumnClick in QueryTable
+		onClick(
+			MOCK_COORDINATES,
+			type === 'aggregate' ? MOCK_AGGREGATE_DATA : MOCK_FILTER_DATA,
+		);
+	};
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<Button type="primary" onClick={(): void => handleClick('aggregate')}>
+				Aggregate
+			</Button>
+
+			<Button type="primary" onClick={(): void => handleClick('filter')}>
+				Filter
+			</Button>
+
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				onClose={onClose}
+				items={menuItemsConfig.items}
+				title={
+					typeof menuItemsConfig.header === 'string'
+						? menuItemsConfig.header
+						: undefined
+				}
+			/>
+		</div>
+	);
+}
+
+const renderWithProviders = (
+	component: React.ReactElement,
+): ReturnType<typeof render> =>
+	render(
+		<MockQueryClientProvider>
+			<MemoryRouter>
+				<Provider store={store}>{component}</Provider>
+			</MemoryRouter>
+		</MockQueryClientProvider>,
+	);
+
+describe('TableDrilldown Breakout Functionality', () => {
+	beforeEach((): void => {
+		jest.clearAllMocks();
+
+		// Mock the substitute_vars API that's causing network errors
+		server.use(
+			rest.post('*/api/v5/substitute_vars', (req, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+			),
+		);
+	});
+
+	it('should show breakout options when "Breakout by" is clicked', async (): Promise<void> => {
+		// Mock the MSW server to intercept the keySuggestions API call
+		server.use(
+			rest.get('*/fields/keys', (req, res, ctx) =>
+				res(ctx.status(200), ctx.json(MOCK_KEY_SUGGESTIONS_RESPONSE)),
+			),
+		);
+
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the aggregate button to show context menu
+		const aggregateButton = screen.getByRole('button', { name: /aggregate/i });
+		fireEvent.click(aggregateButton);
+
+		// Find and click "Breakout by" option
+		const breakoutOption = screen.getByText(/Breakout by/);
+		fireEvent.click(breakoutOption);
+
+		// Wait for the breakout options to load and verify they are displayed
+		await screen.findByText('Breakout by');
+
+		// Check that the search input is displayed
+		expect(
+			screen.getByPlaceholderText('Search breakout options...'),
+		).toBeInTheDocument();
+
+		// Wait for the API call to complete and options to load
+		// Check what's actually being rendered instead of waiting for specific text
+		await screen.findByText('deployment.environment');
+
+		// Check that the breakout options are loaded and displayed
+		// Based on the test output, these are the actual options being rendered
+		expect(screen.getByText('deployment.environment')).toBeInTheDocument();
+		expect(screen.getByText('http.method')).toBeInTheDocument();
+		expect(screen.getByText('http.status_code')).toBeInTheDocument();
+
+		// Verify that the breakout header is displayed
+		expect(screen.getByText('Breakout by')).toBeInTheDocument();
+	});
+
+	it('should add selected breakout option to groupBy and redirect with correct query', async (): Promise<void> => {
+		// Mock the MSW server to intercept the keySuggestions API call
+		server.use(
+			rest.get('*/fields/keys', (req, res, ctx) =>
+				res(ctx.status(200), ctx.json(MOCK_KEY_SUGGESTIONS_RESPONSE)),
+			),
+		);
+
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Navigate to breakout options
+		const aggregateButton = screen.getByRole('button', { name: /aggregate/i });
+		fireEvent.click(aggregateButton);
+
+		const breakoutOption = screen.getByText(/Breakout by/);
+		fireEvent.click(breakoutOption);
+
+		// Wait for breakout options to load
+		await screen.findByText('deployment.environment');
+
+		// Click on a breakout option (e.g., deployment.environment)
+		const breakoutOptionItem = screen.getByText('deployment.environment');
+		fireEvent.click(breakoutOptionItem);
+
+		// Verify redirectWithQueryBuilderData was called
+		expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+
+		const [
+			query,
+			queryParams,
+			,
+			newTab,
+		] = mockRedirectWithQueryBuilderData.mock.calls[0];
+
+		// Check that the query contains the correct structure
+		expect(query.builder).toBeDefined();
+		expect(query.builder.queryData).toBeDefined();
+
+		// Find the query data for the aggregate query (queryName: 'A')
+		const aggregateQueryData = query.builder.queryData.find(
+			(item: any) => item.queryName === 'A',
+		);
+		expect(aggregateQueryData).toBeDefined();
+
+		// Verify that the groupBy has been updated to only contain the selected breakout option
+		expect(aggregateQueryData.groupBy).toHaveLength(1);
+		expect(aggregateQueryData.groupBy[0].key).toEqual('deployment.environment');
+
+		// Verify that orderBy has been cleared (as per getBreakoutQuery logic)
+		expect(aggregateQueryData.orderBy).toEqual([]);
+
+		// Verify that the legend has been updated (check the actual value being returned)
+		// The legend logic in getBreakoutQuery: legend: item.legend && groupBy.key ? `{{${groupBy.key}}}` : ''
+		// Since the original legend might be empty, the result could be empty string
+		expect(aggregateQueryData.legend).toBeDefined();
+
+		// Check that the queryParams contain the expandedWidgetId
+		expect(queryParams).toEqual({ expandedWidgetId: 'test-widget' });
+
+		// Check that newTab is true
+		expect(newTab).toBe(true);
+
+		// Verify that the original filters are preserved and new filters are added
+		expect(aggregateQueryData.filter.expression).toContain(
+			"service.name = '$service.name' AND trace_id EXISTS AND deployment.environment = '$env'",
+		);
+		// The new filter from the clicked data should also be present
+		expect(aggregateQueryData.filter.expression).toContain(
+			"service.name = 'adservice' AND trace_id = 'df2cfb0e57bb8736207689851478cd50'",
+		);
+	});
+});

frontend/src/container/QueryTable/Drilldown/__tests__/TableDrilldown.test.tsx

@@ -0,0 +1,291 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Button } from 'antd';
+import ROUTES from 'constants/routes';
+import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import useTableContextMenu from '../useTableContextMenu';
+import {
+	MOCK_AGGREGATE_DATA,
+	MOCK_COORDINATES,
+	MOCK_FILTER_DATA,
+	MOCK_QUERY,
+	MOCK_QUERY_WITH_FILTER,
+} from './mockTableData';
+
+// Mock the necessary hooks and dependencies
+const mockSafeNavigate = jest.fn();
+const mockRedirectWithQueryBuilderData = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.DASHBOARD}/`,
+	}),
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: (): any => ({
+		globalTime: {
+			selectedTime: {
+				startTime: 1713734400000,
+				endTime: 1713738000000,
+			},
+			maxTime: 1713738000000,
+			minTime: 1713734400000,
+		},
+	}),
+}));
+
+function MockTableDrilldown(): JSX.Element {
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+
+	const { menuItemsConfig } = useTableContextMenu({
+		widgetId: 'test-widget',
+		query: MOCK_QUERY as Query,
+		clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+	});
+
+	const handleClick = (type: 'aggregate' | 'filter'): void => {
+		// Simulate the same flow as handleColumnClick in QueryTable
+		onClick(
+			MOCK_COORDINATES,
+			type === 'aggregate' ? MOCK_AGGREGATE_DATA : MOCK_FILTER_DATA,
+		);
+	};
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<Button type="primary" onClick={(): void => handleClick('aggregate')}>
+				Aggregate
+			</Button>
+
+			<Button type="primary" onClick={(): void => handleClick('filter')}>
+				Filter
+			</Button>
+
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				onClose={onClose}
+				items={menuItemsConfig.items}
+				title={
+					typeof menuItemsConfig.header === 'string'
+						? menuItemsConfig.header
+						: undefined
+				}
+			/>
+		</div>
+	);
+}
+
+const renderWithProviders = (
+	component: React.ReactElement,
+): ReturnType<typeof render> =>
+	render(
+		<MockQueryClientProvider>
+			<MemoryRouter>
+				<Provider store={store}>{component}</Provider>
+			</MemoryRouter>
+		</MockQueryClientProvider>,
+	);
+
+describe('TableDrilldown', () => {
+	beforeEach((): void => {
+		jest.clearAllMocks();
+	});
+
+	it('should show context menu filter options when button is clicked', (): void => {
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the button
+		const button = screen.getByRole('button', { name: /filter/i });
+		fireEvent.click(button);
+
+		// Check that the context menu options are displayed
+		expect(screen.getByText('Filter by trace_id')).toBeInTheDocument();
+	});
+
+	it('should show context menu aggregate options when button is clicked', (): void => {
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the button
+		const button = screen.getByRole('button', { name: /aggregate/i });
+		fireEvent.click(button);
+
+		// Check that the context menu options are displayed
+		expect(screen.getByText('logs')).toBeInTheDocument();
+		expect(screen.getByText('count()')).toBeInTheDocument();
+		expect(screen.getByText('View in Logs')).toBeInTheDocument();
+		expect(screen.getByText('View in Traces')).toBeInTheDocument();
+		expect(screen.getByText(/Breakout by/)).toBeInTheDocument();
+	});
+
+	it('should navigate to logs explorer with correct query when "View in Logs" is clicked', (): void => {
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the button to show context menu
+		const button = screen.getByRole('button', { name: /aggregate/i });
+		fireEvent.click(button);
+
+		// Find and click "View in Logs" option
+		const viewInLogsOption = screen.getByText('View in Logs');
+		fireEvent.click(viewInLogsOption);
+
+		// Verify safeNavigate was called with the correct URL
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+
+		const [url, options] = mockSafeNavigate.mock.calls[0];
+
+		// Check the URL structure
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain('?');
+
+		// Parse the URL to check query parameters
+		const urlObj = new URL(url, 'http://localhost');
+
+		// Check that compositeQuery parameter exists and contains the query with filters
+		expect(urlObj.searchParams.has('compositeQuery')).toBe(true);
+
+		const compositeQuery = JSON.parse(
+			urlObj.searchParams.get('compositeQuery') || '{}',
+		);
+
+		// Verify the query structure includes the filters from clicked data
+		expect(compositeQuery.builder).toBeDefined();
+		expect(compositeQuery.builder.queryData).toBeDefined();
+
+		// Check that the query contains the correct filter expression
+		// The filter should include the clicked data filters (service.name = 'adservice', trace_id = 'df2cfb0e57bb8736207689851478cd50')
+		const firstQueryData = compositeQuery.builder.queryData[0];
+		expect(firstQueryData.filters).toBeDefined();
+
+		// Check that newTab option is set to true
+		expect(options).toEqual({ newTab: true });
+	});
+
+	it('should navigate to traces explorer with correct query when "View in Traces" is clicked', (): void => {
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the button to show context menu
+		const button = screen.getByRole('button', { name: /aggregate/i });
+		fireEvent.click(button);
+
+		// Find and click "View in Traces" option
+		const viewInTracesOption = screen.getByText('View in Traces');
+		fireEvent.click(viewInTracesOption);
+
+		// Verify safeNavigate was called with the correct URL
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+
+		const [url, options] = mockSafeNavigate.mock.calls[0];
+
+		// Check the URL structure
+		expect(url).toContain(ROUTES.TRACES_EXPLORER);
+		expect(url).toContain('?');
+
+		// Parse the URL to check query parameters
+		const urlObj = new URL(url, 'http://localhost');
+
+		// Check that compositeQuery parameter exists and contains the query with filters
+		expect(urlObj.searchParams.has('compositeQuery')).toBe(true);
+
+		const compositeQuery = JSON.parse(
+			urlObj.searchParams.get('compositeQuery') || '{}',
+		);
+		// Verify the query structure includes the filters from clicked data
+		expect(compositeQuery.builder).toBeDefined();
+		expect(compositeQuery.builder.queryData).toBeDefined();
+
+		// Check that the query contains the correct filter expression
+		// The filter should include the clicked data filters (service.name = 'adservice', trace_id = 'df2cfb0e57bb8736207689851478cd50')
+		const firstQueryData = compositeQuery.builder.queryData[0];
+		expect(firstQueryData.filter.expression).toEqual(MOCK_QUERY_WITH_FILTER);
+
+		// Check that newTab option is set to true
+		expect(options).toEqual({ newTab: true });
+	});
+
+	it('should show filter options and navigate with correct query when filter option is clicked', (): void => {
+		renderWithProviders(<MockTableDrilldown />);
+
+		// Find and click the Filter button to show filter context menu
+		const filterButton = screen.getByRole('button', { name: /filter/i });
+		fireEvent.click(filterButton);
+
+		// Check that the filter context menu is displayed
+		expect(screen.getByText('Filter by trace_id')).toBeInTheDocument();
+
+		// Check that the filter operators are displayed
+		expect(screen.getByText('Is this')).toBeInTheDocument(); // = operator
+		expect(screen.getByText('Is not this')).toBeInTheDocument(); // != operator
+
+		// Click on "Is this" (equals operator)
+		const equalsOption = screen.getByText('Is this');
+		fireEvent.click(equalsOption);
+
+		// Verify redirectWithQueryBuilderData was called instead of safeNavigate
+		expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+
+		const [
+			query,
+			queryParams,
+			,
+			newTab,
+		] = mockRedirectWithQueryBuilderData.mock.calls[0];
+
+		// Check that the query contains the filter that was added
+		expect(query.builder).toBeDefined();
+		expect(query.builder.queryData).toBeDefined();
+
+		const firstQueryData = query.builder.queryData[0];
+
+		// The filter should include the original filter plus the new one from clicked data
+		// Original: "service.name = '$service.name' AND trace_id EXISTS AND deployment.environment = '$env'"
+		// New: trace_id = 'df2cfb0e57bb8736207689851478cd50'
+		expect(firstQueryData.filter.expression).toContain(
+			"service.name = '$service.name' AND trace_id EXISTS AND deployment.environment = '$env'",
+		);
+		expect(firstQueryData.filter.expression).toContain(
+			"trace_id = 'df2cfb0e57bb8736207689851478cd50'",
+		);
+
+		// Check that the queryParams contain the expandedWidgetId
+		expect(queryParams).toEqual({ expandedWidgetId: 'test-widget' });
+
+		// Check that newTab is true
+		expect(newTab).toBe(true);
+	});
+});
+
+export default MockTableDrilldown;

frontend/src/container/QueryTable/Drilldown/__tests__/mockTableData.ts

@@ -0,0 +1,290 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const MOCK_COORDINATES = {
+	x: 996,
+	y: 421,
+};
+
+export const MOCK_AGGREGATE_DATA = {
+	record: {
+		'service.name': 'adservice',
+		trace_id: 'df2cfb0e57bb8736207689851478cd50',
+		A: 3,
+	},
+	column: {
+		dataIndex: 'A',
+		title: 'count()',
+		width: 145,
+		isValueColumn: true,
+		queryName: 'A',
+	},
+	tableColumns: [
+		{
+			dataIndex: 'service.name',
+			title: 'service.name',
+			width: 145,
+			isValueColumn: false,
+			queryName: 'A',
+		},
+		{
+			dataIndex: 'trace_id',
+			title: 'trace_id',
+			width: 145,
+			isValueColumn: false,
+			queryName: 'A',
+		},
+		{
+			dataIndex: 'A',
+			title: 'count()',
+			width: 145,
+			isValueColumn: true,
+			queryName: 'A',
+		},
+	],
+};
+
+export const MOCK_QUERY_WITH_FILTER =
+	"service.name = '$service.name' AND trace_id EXISTS AND deployment.environment = '$env' service.name = 'adservice' AND trace_id = 'df2cfb0e57bb8736207689851478cd50'";
+
+export const MOCK_FILTER_DATA = {
+	record: {
+		'service.name': 'adservice',
+		trace_id: 'df2cfb0e57bb8736207689851478cd50',
+		A: 3,
+	},
+	column: {
+		dataIndex: 'trace_id',
+		title: 'trace_id',
+		width: 145,
+		isValueColumn: false,
+		queryName: 'A',
+	},
+	tableColumns: [
+		{
+			dataIndex: 'service.name',
+			title: 'service.name',
+			width: 145,
+			isValueColumn: false,
+			queryName: 'A',
+		},
+		{
+			dataIndex: 'trace_id',
+			title: 'trace_id',
+			width: 145,
+			isValueColumn: false,
+			queryName: 'A',
+		},
+		{
+			dataIndex: 'A',
+			title: 'count()',
+			width: 145,
+			isValueColumn: true,
+			queryName: 'A',
+		},
+	],
+};
+
+export const MOCK_QUERY = {
+	queryType: EQueryType.QUERY_BUILDER,
+	builder: {
+		queryData: [
+			{
+				aggregations: [
+					{
+						expression: 'count()',
+					},
+				],
+				dataSource: DataSource.LOGS,
+				disabled: false,
+				expression: 'A',
+				filter: {
+					expression:
+						"service.name = '$service.name' AND trace_id EXISTS AND deployment.environment = '$env'",
+				},
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: 'string',
+						id: 'service.name--string--resource--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'service.name',
+						type: 'resource',
+					},
+					{
+						dataType: 'string',
+						id: 'trace_id--string----true',
+						isColumn: true,
+						isJSON: false,
+						key: 'trace_id',
+					},
+				],
+				having: {
+					expression: '',
+				},
+				havingExpression: {
+					expression: '',
+				},
+				legend: '',
+				limit: null,
+				orderBy: [],
+				queryName: 'A',
+				stepInterval: 60,
+			},
+			{
+				aggregations: [
+					{
+						expression: 'count()',
+					},
+				],
+				dataSource: 'logs',
+				disabled: true,
+				expression: 'B',
+				filter: {
+					expression: '',
+				},
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: 'string',
+						id: 'service.name--string--resource--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'service.name',
+						type: 'resource',
+					},
+				],
+				having: {
+					expression: '',
+				},
+				havingExpression: {
+					expression: '',
+				},
+				legend: '',
+				limit: null,
+				orderBy: [],
+				queryName: 'B',
+				stepInterval: 60,
+			},
+		],
+		queryFormulas: [],
+	},
+	clickhouse_sql: [
+		{
+			disabled: false,
+			legend: '',
+			name: 'A',
+			query: '',
+		},
+	],
+	id: '6092c3fd-6877-4cb8-836a-7f30db4e4bfe',
+	promql: [
+		{
+			disabled: false,
+			legend: '',
+			name: 'A',
+			query: '',
+		},
+	],
+};
+
+export const MOCK_KEY_SUGGESTIONS_RESPONSE = {
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {
+			resource: [
+				{
+					name: 'service.name',
+					label: 'Service Name',
+					type: 'resource',
+					signal: 'logs',
+					fieldContext: 'resource',
+					fieldDataType: 'string',
+				},
+				{
+					name: 'deployment.environment',
+					label: 'Environment',
+					type: 'resource',
+					signal: 'logs',
+					fieldContext: 'resource',
+					fieldDataType: 'string',
+				},
+			],
+			attribute: [
+				{
+					name: 'http.method',
+					label: 'HTTP Method',
+					type: 'attribute',
+					signal: 'logs',
+					fieldContext: 'attribute',
+					fieldDataType: 'string',
+				},
+				{
+					name: 'http.status_code',
+					label: 'HTTP Status Code',
+					type: 'attribute',
+					signal: 'logs',
+					fieldContext: 'attribute',
+					fieldDataType: 'number',
+				},
+			],
+		},
+	},
+};
+
+export const MOCK_KEY_SUGGESTIONS_SEARCH_RESPONSE = {
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {
+			resource: [
+				{
+					name: 'service.name',
+					label: 'Service Name',
+					type: 'resource',
+					signal: 'logs',
+					fieldContext: 'resource',
+					fieldDataType: 'string',
+				},
+				{
+					name: 'deployment.environment',
+					label: 'Environment',
+					type: 'resource',
+					signal: 'logs',
+					fieldContext: 'attribute',
+					fieldDataType: 'string',
+				},
+			],
+		},
+	},
+};
+
+export const MOCK_KEY_SUGGESTIONS_SINGLE_RESPONSE = {
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {
+			resource: [
+				{
+					name: 'deployment.environment',
+					label: 'Environment',
+					type: 'resource',
+					signal: 'logs',
+					fieldContext: 'resource',
+					fieldDataType: 'string',
+				},
+			],
+		},
+	},
+};

frontend/src/container/QueryTable/Drilldown/contextConfig.tsx

@@ -0,0 +1,153 @@
+import {
+	PANEL_TYPES,
+	QUERY_BUILDER_OPERATORS_BY_TYPES,
+} from 'constants/queryBuilder';
+import ContextMenu, { ClickedData } from 'periscope/components/ContextMenu';
+import { ReactNode } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import BreakoutOptions from './BreakoutOptions';
+import {
+	getAggregateColumnHeader,
+	getBaseMeta,
+	getQueryData,
+} from './drilldownUtils';
+import { AGGREGATE_OPTIONS, SUPPORTED_OPERATORS } from './menuOptions';
+import { getBreakoutQuery } from './tableDrilldownUtils';
+import { AggregateData } from './useAggregateDrilldown';
+
+export type ContextMenuItem = ReactNode;
+
+export enum ConfigType {
+	GROUP = 'group',
+	AGGREGATE = 'aggregate',
+}
+
+export interface ContextMenuConfigParams {
+	configType: ConfigType;
+	query: Query;
+	clickedData: ClickedData;
+	panelType?: string;
+	onColumnClick: (key: string, query?: Query) => void;
+	subMenu?: string;
+}
+
+export interface GroupContextMenuConfig {
+	header?: string;
+	items?: ContextMenuItem;
+}
+
+export interface AggregateContextMenuConfig {
+	header?: string | ReactNode;
+	items?: ContextMenuItem;
+}
+
+export interface BreakoutOptionsProps {
+	queryData: IBuilderQuery;
+	onColumnClick: (groupBy: BaseAutocompleteData) => void;
+}
+
+export function getGroupContextMenuConfig({
+	query,
+	clickedData,
+	panelType,
+	onColumnClick,
+}: Omit<ContextMenuConfigParams, 'configType'>): GroupContextMenuConfig {
+	const filterKey = clickedData?.column?.dataIndex;
+
+	const filterDataType =
+		getBaseMeta(query, filterKey as string)?.dataType || 'string';
+
+	const operators =
+		QUERY_BUILDER_OPERATORS_BY_TYPES[
+			filterDataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
+		];
+
+	const filterOperators = operators.filter(
+		(operator) => SUPPORTED_OPERATORS[operator],
+	);
+
+	if (panelType === PANEL_TYPES.TABLE && clickedData?.column) {
+		return {
+			items: (
+				<>
+					<ContextMenu.Header>
+						<div>Filter by {filterKey}</div>
+					</ContextMenu.Header>
+					{filterOperators.map((operator) => (
+						<ContextMenu.Item
+							key={operator}
+							icon={SUPPORTED_OPERATORS[operator].icon}
+							onClick={(): void => onColumnClick(SUPPORTED_OPERATORS[operator].value)}
+						>
+							{SUPPORTED_OPERATORS[operator].label}
+						</ContextMenu.Item>
+					))}
+				</>
+			),
+		};
+	}
+
+	return {};
+}
+
+export function getAggregateContextMenuConfig({
+	subMenu,
+	query,
+	onColumnClick,
+	aggregateData,
+}: {
+	subMenu?: string;
+	query: Query;
+	onColumnClick: (key: string, query?: Query) => void;
+	aggregateData: AggregateData | null;
+}): AggregateContextMenuConfig {
+	if (subMenu === 'breakout') {
+		const queryData = getQueryData(query, aggregateData?.queryName || '');
+		return {
+			header: 'Breakout by',
+			items: (
+				<BreakoutOptions
+					queryData={queryData}
+					onColumnClick={(groupBy: BaseAutocompleteData): void => {
+						// Use aggregateData.filters
+						const filtersToAdd = aggregateData?.filters || [];
+						const breakoutQuery = getBreakoutQuery(
+							query,
+							aggregateData,
+							groupBy,
+							filtersToAdd,
+						);
+						onColumnClick('breakout', breakoutQuery);
+					}}
+				/>
+			),
+		};
+	}
+
+	// Use aggregateData.queryName
+	const queryName = aggregateData?.queryName;
+	const { dataSource, aggregations } = getAggregateColumnHeader(
+		query,
+		queryName as string,
+	);
+
+	return {
+		header: (
+			<div>
+				<div style={{ textTransform: 'capitalize' }}>{dataSource}</div>
+				<div>{aggregations}</div>
+			</div>
+		),
+		items: AGGREGATE_OPTIONS.map(({ key, label, icon }) => (
+			<ContextMenu.Item
+				key={key}
+				icon={icon}
+				onClick={(): void => onColumnClick(key)}
+			>
+				{label}
+			</ContextMenu.Item>
+		)),
+	};
+}

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -0,0 +1,336 @@
+import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
+import {
+	initialQueryBuilderFormValuesMap,
+	OPERATORS,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import cloneDeep from 'lodash-es/cloneDeep';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	Query,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuid } from 'uuid';
+
+export function getBaseMeta(
+	query: Query,
+	filterKey: string,
+): BaseAutocompleteData | null {
+	const steps = query.builder.queryData;
+	for (let i = 0; i < steps.length; i++) {
+		const { groupBy } = steps[i];
+		for (let j = 0; j < groupBy.length; j++) {
+			if (groupBy[j].key === filterKey) {
+				return groupBy[j];
+			}
+		}
+	}
+	return null;
+}
+
+export const getRoute = (key: string): string => {
+	switch (key) {
+		case 'view_logs':
+			return ROUTES.LOGS_EXPLORER;
+		case 'view_metrics':
+			return ROUTES.METRICS_EXPLORER;
+		case 'view_traces':
+			return ROUTES.TRACES_EXPLORER;
+		default:
+			return '';
+	}
+};
+
+export const isNumberDataType = (dataType: DataTypes | undefined): boolean => {
+	if (!dataType) return false;
+	return dataType === DataTypes.Int64 || dataType === DataTypes.Float64;
+};
+
+export interface FilterData {
+	filterKey: string;
+	filterValue: string | number;
+	operator: string;
+}
+
+// Helper function to avoid code duplication
+function addFiltersToQuerySteps(
+	query: Query,
+	filters: FilterData[],
+	queryName?: string,
+): Query {
+	// 1) clone so we don't mutate the original
+	const q = cloneDeep(query);
+
+	// 2) map over builder.queryData to return a new modified version
+	q.builder.queryData = q.builder.queryData.map((step) => {
+		// Only modify the step that matches the queryName (if provided)
+		if (queryName && step.queryName !== queryName) {
+			return step;
+		}
+
+		// 3) build the new filters array
+		const newFilters = {
+			...step.filters,
+			op: step?.filters?.op || 'AND',
+			items: [...(step?.filters?.items || [])],
+		};
+
+		// Add each filter to the items array
+		filters.forEach(({ filterKey, filterValue, operator }) => {
+			// skip if this step doesn't group by our key
+			const baseMeta = step.groupBy.find((g) => g.key === filterKey);
+			if (!baseMeta) return;
+
+			newFilters.items.push({
+				id: uuid(),
+				key: baseMeta,
+				op: operator,
+				value: filterValue,
+			});
+		});
+
+		const resolvedFilters = convertFiltersToExpressionWithExistingQuery(
+			newFilters,
+			step.filter?.expression,
+		);
+
+		// 4) return a new step object with updated filters
+		return {
+			...step,
+			...resolvedFilters,
+		};
+	});
+
+	return q;
+}
+
+export function addFilterToQuery(query: Query, filters: FilterData[]): Query {
+	return addFiltersToQuerySteps(query, filters);
+}
+
+export const addFilterToSelectedQuery = (
+	query: Query,
+	filters: FilterData[],
+	queryName: string,
+): Query => addFiltersToQuerySteps(query, filters, queryName);
+
+export const getAggregateColumnHeader = (
+	query: Query,
+	queryName: string,
+): { dataSource: string; aggregations: string } => {
+	// Find the query step with the matching queryName
+	const queryStep = query.builder.queryData.find(
+		(step) => step.queryName === queryName,
+	);
+
+	if (!queryStep) {
+		return { dataSource: '', aggregations: '' };
+	}
+
+	const { dataSource, aggregations } = queryStep; // TODO: check if this is correct
+
+	// Extract aggregation expressions based on data source type
+	let aggregationExpressions: string[] = [];
+
+	if (aggregations && aggregations.length > 0) {
+		if (dataSource === 'metrics') {
+			// For metrics, construct expression from spaceAggregation(metricName)
+			aggregationExpressions = aggregations.map((agg: any) => {
+				const { spaceAggregation, metricName } = agg;
+				return `${spaceAggregation}(${metricName})`;
+			});
+		} else {
+			// For traces and logs, use the expression field directly
+			aggregationExpressions = aggregations.map((agg: any) => agg.expression);
+		}
+	}
+
+	return {
+		dataSource,
+		aggregations: aggregationExpressions.join(', '),
+	};
+};
+
+const getFiltersFromMetric = (metric: any): FilterData[] =>
+	Object.keys(metric).map((key) => ({
+		filterKey: key,
+		filterValue: metric[key],
+		operator: OPERATORS['='],
+	}));
+
+export const getUplotClickData = ({
+	metric,
+	queryData,
+	absoluteMouseX,
+	absoluteMouseY,
+	focusedSeries,
+}: {
+	metric?: { [key: string]: string };
+	queryData?: { queryName: string; inFocusOrNot: boolean };
+	absoluteMouseX: number;
+	absoluteMouseY: number;
+	focusedSeries?: {
+		seriesIndex: number;
+		seriesName: string;
+		value: number;
+		color: string;
+		show: boolean;
+		isFocused: boolean;
+	} | null;
+}): {
+	coord: { x: number; y: number };
+	record: { queryName: string; filters: FilterData[] };
+	label: string | React.ReactNode;
+} | null => {
+	if (!queryData?.queryName || !metric) {
+		return null;
+	}
+
+	const record = {
+		queryName: queryData.queryName,
+		filters: getFiltersFromMetric(metric),
+	};
+
+	// Generate label from focusedSeries data
+	let label: string | React.ReactNode = '';
+	if (focusedSeries && focusedSeries.seriesName) {
+		label = (
+			<span style={{ color: focusedSeries.color }}>
+				{focusedSeries.seriesName}
+			</span>
+		);
+	}
+
+	return {
+		coord: {
+			x: absoluteMouseX,
+			y: absoluteMouseY,
+		},
+		record,
+		label,
+	};
+};
+
+export const getPieChartClickData = (
+	arc: PieArcDatum<{
+		label: string;
+		value: string;
+		color: string;
+		record: any;
+	}>,
+): {
+	queryName: string;
+	filters: FilterData[];
+	label: string | React.ReactNode;
+} | null => {
+	const { metric, queryName } = arc.data.record;
+	if (!queryName || !metric) return null;
+
+	const label = <span style={{ color: arc.data.color }}>{arc.data.label}</span>;
+	return {
+		queryName,
+		filters: getFiltersFromMetric(metric), // TODO: add where clause query as well.
+		label,
+	};
+};
+
+/**
+ * Gets the query data that matches the aggregate data's queryName
+ */
+export const getQueryData = (
+	query: Query,
+	queryName: string,
+): IBuilderQuery => {
+	const queryData = query?.builder?.queryData?.filter(
+		(item: IBuilderQuery) => item.queryName === queryName,
+	);
+	return queryData[0];
+};
+
+/**
+ * Checks if a query name is valid for drilldown operations
+ * Returns false if queryName is empty or starts with 'F'
+ * Note: Checking if queryName starts with 'F' is a hack to know if it's a Formulae based query
+ */
+export const isValidQueryName = (queryName: string): boolean => {
+	if (!queryName || queryName.trim() === '') {
+		return false;
+	}
+	return !queryName.startsWith('F');
+};
+
+const VIEW_QUERY_MAP: Record<string, IBuilderQuery> = {
+	view_logs: initialQueryBuilderFormValuesMap.logs,
+	view_metrics: initialQueryBuilderFormValuesMap.metrics,
+	view_traces: initialQueryBuilderFormValuesMap.traces,
+};
+
+export const getViewQuery = (
+	query: Query,
+	filtersToAdd: FilterData[],
+	key: string,
+	queryName: string,
+): Query | null => {
+	const newQuery = cloneDeep(query);
+
+	const queryBuilderData = VIEW_QUERY_MAP[key];
+
+	if (!queryBuilderData) return null;
+
+	let existingFilters: TagFilterItem[] = [];
+	let existingFilterExpression: string | undefined;
+	if (queryName) {
+		const queryData = getQueryData(query, queryName);
+		existingFilters = queryData?.filters?.items || [];
+		existingFilterExpression = queryData?.filter?.expression;
+	}
+
+	newQuery.builder.queryData = [queryBuilderData];
+
+	const filters = filtersToAdd.reduce((acc: any[], filter) => {
+		// use existing query to get baseMeta
+		const baseMeta = getBaseMeta(query, filter.filterKey);
+		if (!baseMeta) return acc;
+
+		acc.push({
+			id: uuid(),
+			key: baseMeta,
+			op: filter.operator,
+			value: filter.filterValue,
+		});
+
+		return acc;
+	}, []);
+
+	const allFilters = [...existingFilters, ...filters];
+
+	const {
+		// filters: newFilters,
+		filter: newFilterExpression,
+	} = convertFiltersToExpressionWithExistingQuery(
+		{
+			items: allFilters,
+			op: 'AND',
+		},
+		existingFilterExpression,
+	);
+
+	// newQuery.builder.queryData[0].filters = newFilters;
+
+	newQuery.builder.queryData[0].filter = newFilterExpression;
+
+	return newQuery;
+};
+
+export function isDrilldownEnabled(): boolean {
+	return true;
+	// temp code
+	// if (typeof window === 'undefined') return false;
+	// const drilldownValue = window.localStorage.getItem('drilldown');
+	// return drilldownValue === 'true';
+}

frontend/src/container/QueryTable/Drilldown/menuOptions.tsx

@@ -0,0 +1,99 @@
+import { OPERATORS } from 'constants/queryBuilder';
+import { ChartBar, DraftingCompass, ScrollText } from 'lucide-react';
+
+/**
+ * Supported operators for filtering with their display properties
+ */
+export const SUPPORTED_OPERATORS = {
+	[OPERATORS['=']]: {
+		label: 'Is this',
+		icon: '=',
+		value: '=',
+	},
+	[OPERATORS['!=']]: {
+		label: 'Is not this',
+		icon: '!=',
+		value: '!=',
+	},
+	[OPERATORS['>=']]: {
+		label: 'Is greater than or equal to',
+		icon: '>=',
+		value: '>=',
+	},
+	[OPERATORS['<=']]: {
+		label: 'Is less than or equal to',
+		icon: '<=',
+		value: '<=',
+	},
+	[OPERATORS['<']]: {
+		label: 'Is less than',
+		icon: '<',
+		value: '<',
+	},
+};
+
+/**
+ * Aggregate menu options for different views
+ */
+// TO REMOVE
+export const AGGREGATE_OPTIONS = [
+	{
+		key: 'view_logs',
+		icon: <ScrollText size={16} />,
+		label: 'View in Logs',
+	},
+	// {
+	// 	key: 'view_metrics',
+	// 	icon: <BarChart2 size={16} />,
+	// 	label: 'View in Metrics',
+	// },
+	{
+		key: 'view_traces',
+		icon: <DraftingCompass size={16} />,
+		label: 'View in Traces',
+	},
+	{
+		key: 'breakout',
+		icon: <ChartBar size={16} />,
+		label: 'Breakout by ..',
+	},
+];
+
+/**
+ * Aggregate menu options for different views
+ */
+export const getBaseContextConfig = ({
+	handleBaseDrilldown,
+}: {
+	handleBaseDrilldown: (key: string) => void;
+}): {
+	key: string;
+	icon: React.ReactNode;
+	label: string;
+	onClick: () => void;
+}[] => [
+	{
+		key: 'view_logs',
+		icon: <ScrollText size={16} />,
+		label: 'View in Logs',
+		onClick: (): void => handleBaseDrilldown('view_logs'),
+	},
+	// {
+	// 	key: 'view_metrics',
+	// 	icon: <BarChart2 size={16} />,
+	// 	label: 'View in Metrics',
+	// 	onClick: () => handleBaseDrilldown('view_metrics'),
+	// },
+	{
+		key: 'view_traces',
+		icon: <DraftingCompass size={16} />,
+		label: 'View in Traces',
+		onClick: (): void => handleBaseDrilldown('view_traces'),
+	},
+	{
+		key: 'breakout',
+		icon: <ChartBar size={16} />,
+		label: 'Breakout by ..',
+		onClick: (): void => handleBaseDrilldown('breakout'),
+	},
+];