fix: minor changes

Adds the Test tab to the LLM Observability Attribute Mapping page,
replacing the "Coming soon" placeholder. Users paste a sample JSON span
and run it through their configured mappers to preview which target
attributes get populated and which source key matched, before saving.

- Monaco JSON editor with a SigNoz light/dark theme, inline validation
  and a prefilled sample span
- Result diff view labelling attributes added/changed/unchanged/removed
- Payload sends all draft groups; per-group mappers are sent only when
  they differ from the saved snapshot (null -> backend reuses stored
  mappers), so unsaved edits are testable without persisting
- Expose snapshot from useAttributeMappingEditor; add
  useCanManageAttributeMapping hook

Backed by the span mapper test endpoint (#11795).

.github/workflows/integrationci.yaml

@@ -58,6 +58,7 @@ jobs:
           - role
           - rootuser
           - serviceaccount
+          - spanmapper
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl

docs/api/openapi.yml

@@ -1495,6 +1495,7 @@ components:
       - cassandradb
       - redis
       - cloudsql_postgres
+      - memorystore_redis
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -8084,6 +8085,19 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableSpanMapperTest:
+      properties:
+        collectorLogs:
+          items:
+            type: string
+          nullable: true
+          type: array
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      type: object
     SpantypesGettableSpanMappers:
       properties:
         items:
@@ -8180,6 +8194,39 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableSpanMapperTest:
+      properties:
+        groups:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapperTestGroup'
+          nullable: true
+          type: array
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      required:
+      - spans
+      - groups
+      type: object
+    SpantypesPostableSpanMapperTestGroup:
+      properties:
+        condition:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
+        enabled:
+          type: boolean
+        mappers:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapper'
+          nullable: true
+          type: array
+        name:
+          type: string
+      required:
+      - name
+      - condition
+      type: object
     SpantypesPostableTraceAggregations:
       properties:
         aggregations:
@@ -8341,6 +8388,17 @@ components:
       - operation
       - priority
       type: object
+    SpantypesSpanMapperTestSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        resource:
+          additionalProperties: {}
+          nullable: true
+          type: object
+      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -14074,6 +14132,69 @@ paths:
       summary: Update a span mapper
       tags:
       - spanmapper
+  /api/v1/span_mapper_groups/test:
+    post:
+      deprecated: false
+      description: Tests how span mappers would transform sample spans
+      operationId: TestSpanMappers
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableSpanMapperTest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableSpanMapperTest'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Test span mappers against sample spans
+      tags:
+      - spanmapper
   /api/v1/stats:
     get:
       deprecated: false

frontend/package.json

@@ -89,7 +89,7 @@
     "lodash-es": "^4.17.21",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.8.1",
+    "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
@@ -221,5 +221,18 @@
     "*.(scss|css)": [
       "stylelint"
     ]
+  },
+  "overrides": {
+    "@babel/core@<=7.29.0": ">=7.29.6 <8",
+    "@istanbuljs/load-nyc-config>js-yaml": ">=4.2.0 <5",
+    "cookie@<0.7.0": ">=0.7.1 <1",
+    "dompurify@<=3.4.10": ">=3.4.11 <4",
+    "esbuild@>=0.27.3 <0.28.1": ">=0.28.1 <0.29.0",
+    "js-cookie@<=3.0.5": ">=3.0.7 <4",
+    "js-yaml@>=4.0.0 <=4.1.1": ">=4.2.0 <5",
+    "prismjs@<1.30.0": ">=1.30.0 <2",
+    "react-router@>=6.7.0 <6.30.4": ">=6.30.4 <7",
+    "tmp@<0.2.6": ">=0.2.6 <0.3.0",
+    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/pnpm-lock.yaml

@@ -187,11 +187,11 @@ importers:
         specifier: 2.8.8
         version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)
       overlayscrollbars:
-        specifier: ^2.8.1
-        version: 2.9.2
+        specifier: ^2.16.0
+        version: 2.16.0
       overlayscrollbars-react:
         specifier: ^0.5.6
-        version: 0.5.6(overlayscrollbars@2.9.2)(react@18.2.0)
+        version: 0.5.6(overlayscrollbars@2.16.0)(react@18.2.0)
       papaparse:
         specifier: 5.4.1
         version: 5.4.1
@@ -6941,8 +6941,8 @@ packages:
       overlayscrollbars: ^2.0.0
       react: '>=16.8.0'
 
-  overlayscrollbars@2.9.2:
-    resolution: {integrity: sha512-iDT84r39i7oWP72diZN2mbJUsn/taCq568aQaIrc84S87PunBT7qtsVltAF2esk7ORTRjQDnfjVYoqqTzgs8QA==}
+  overlayscrollbars@2.16.0:
+    resolution: {integrity: sha512-N03oje/q7j93D0aLZtoCdsDSYLmhheSsv8H7oSLE7HhdV9P/bmCURtLV/KbPye7P/bpfyt/obSfDpGUYoJ0OWg==}
 
   oxfmt@0.54.0:
     resolution: {integrity: sha512-DjnMwn7smSLF+Mc2+pRItnuPftm/dkUFpY/d4+33y9TfKrsHZo8GLhmUg9BrOIUEy94Rlom1Q11N6vuhE+e0oQ==}
@@ -16456,12 +16456,12 @@ snapshots:
 
   outvariant@1.4.0: {}
 
-  overlayscrollbars-react@0.5.6(overlayscrollbars@2.9.2)(react@18.2.0):
+  overlayscrollbars-react@0.5.6(overlayscrollbars@2.16.0)(react@18.2.0):
     dependencies:
-      overlayscrollbars: 2.9.2
+      overlayscrollbars: 2.16.0
       react: 18.2.0
 
-  overlayscrollbars@2.9.2: {}
+  overlayscrollbars@2.16.0: {}
 
   oxfmt@0.54.0:
     dependencies:

frontend/src/__tests__/fields_api.util.ts

@@ -0,0 +1,20 @@
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+
+export function mockFieldsAPIsWithEmptyResponse(): void {
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/values`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+	);
+}

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,29 +2,6 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
-// The wire shape these handlers can actually rely on. The generated
-// RenderErrorResponseDTO marks code/message/url/errors as required, but the
-// server omits any of them even on valid errors (e.g. a 400 with just a
-// message), so a present `error` object is all the guard can guarantee.
-type ErrorEnvelope = {
-	error: {
-		code?: string;
-		message?: string;
-		url?: string;
-		errors?: { message?: string }[];
-	};
-};
-
-function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorEnvelope).error === 'object' &&
-		(data as ErrorEnvelope).error !== null
-	);
-}
-
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -33,29 +10,15 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy. Verify the shape before reading
-		// it; otherwise synthesize a consistent error from the status.
-		const data: unknown = response.data;
-		if (isErrorEnvelope(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: {
-					code: code ?? '',
-					message: message ?? '',
-					url: url ?? '',
-					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
-				},
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url ?? '',
+				errors: (response.data.error.errors ?? []).map((e) => ({
+					message: e.message ?? '',
+				})),
 			},
 		});
 	}
@@ -99,7 +62,9 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
+			code:
+				errorData?.code ||
+				String(response?.status || error.code || 'unknown_error'),
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,38 +2,19 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
-function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorV2Resp).error?.code === 'string'
-	);
-}
-
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy), so verify the shape first.
-		const data: unknown = response.data;
-		if (isErrorV2Resp(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: { code, message, url, errors },
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -1,126 +0,0 @@
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
-	return partial as AxiosError<ErrorV2Resp>;
-}
-
-// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
-// unconditional.
-function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
-	try {
-		ErrorResponseHandlerV2(error);
-	} catch (thrown) {
-		return thrown as APIError;
-	}
-	throw new Error('expected ErrorResponseHandlerV2 to throw');
-}
-
-type ExpectedError = {
-	httpStatusCode: number;
-	code: string;
-	message: string;
-	errors: { message: string }[];
-};
-
-// One row per response shape the handler must normalize. New shapes (with
-// different bodies) can be added here without a new test block.
-const cases: {
-	name: string;
-	error: AxiosError<ErrorV2Resp>;
-	expected: ExpectedError;
-}[] = [
-	{
-		name: 'well-formed V2 error envelope',
-		error: asAxiosError({
-			message: 'Request failed with status code 400',
-			response: {
-				status: 400,
-				data: {
-					error: {
-						code: 'bad_request',
-						message: 'Invalid dashboard payload',
-						url: 'https://signoz.io/docs',
-						errors: [{ message: 'name is required' }, { message: 'name too long' }],
-					},
-				},
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 400,
-			code: 'bad_request',
-			message: 'Invalid dashboard payload',
-			errors: [{ message: 'name is required' }, { message: 'name too long' }],
-		},
-	},
-	{
-		// Regression: during a deployment the gateway returns a 5xx with a
-		// non-envelope body. Reading response.data.error.code used to throw a
-		// TypeError from inside the handler itself. See engineering-pod#5760.
-		name: '5xx with a non-envelope HTML body',
-		error: asAxiosError({
-			message: 'Request failed with status code 503',
-			response: {
-				status: 503,
-				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 503,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 503',
-			errors: [],
-		},
-	},
-	{
-		name: '5xx with an empty body',
-		error: asAxiosError({
-			message: 'Request failed with status code 502',
-			response: {
-				status: 502,
-				data: undefined,
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 502,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 502',
-			errors: [],
-		},
-	},
-	{
-		name: 'no response received (network error)',
-		error: asAxiosError({
-			message: 'Network Error',
-			code: 'ERR_NETWORK',
-			name: 'AxiosError',
-			request: {},
-		}),
-		expected: {
-			httpStatusCode: 500,
-			code: 'ERR_NETWORK',
-			message: 'Network Error',
-			errors: [],
-		},
-	},
-];
-
-describe('ErrorResponseHandlerV2', () => {
-	it.each(cases)(
-		'normalizes $name into a consistent APIError',
-		({ error, expected }) => {
-			const apiError = runHandler(error);
-
-			expect(apiError).toBeInstanceOf(APIError);
-			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
-			expect(apiError.getErrorCode()).toBe(expected.code);
-			expect(apiError.getErrorMessage()).toBe(expected.message);
-			// The sub-error messages feed several parts of the UI, so assert them.
-			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
-				expected.errors,
-			);
-		},
-	);
-});

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

@@ -2814,6 +2814,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cassandradb = 'cassandradb',
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
+	memorystore_redis = 'memorystore_redis',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -9270,6 +9271,48 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export type SpantypesSpanMapperTestSpanDTOAttributesAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOAttributes =
+	SpantypesSpanMapperTestSpanDTOAttributesAnyOf | null;
+
+export type SpantypesSpanMapperTestSpanDTOResourceAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOResource =
+	SpantypesSpanMapperTestSpanDTOResourceAnyOf | null;
+
+export interface SpantypesSpanMapperTestSpanDTO {
+	/**
+	 * @type object,null
+	 */
+	attributes?: SpantypesSpanMapperTestSpanDTOAttributes;
+	/**
+	 * @type object,null
+	 */
+	resource?: SpantypesSpanMapperTestSpanDTOResource;
+}
+
+export interface SpantypesGettableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	collectorLogs?: string[] | null;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -9611,6 +9654,33 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 	name: string;
 }
 
+export interface SpantypesPostableSpanMapperTestGroupDTO {
+	condition: SpantypesSpanMapperGroupConditionDTO | null;
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+	/**
+	 * @type array,null
+	 */
+	mappers?: SpantypesPostableSpanMapperDTO[] | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
+export interface SpantypesPostableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	groups: SpantypesPostableSpanMapperTestGroupDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	spans: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
 export interface SpantypesSpanAggregationDTO {
 	aggregation: SpantypesSpanAggregationTypeDTO;
 	field: TelemetrytypesTelemetryFieldKeyDTO;
@@ -10961,6 +11031,14 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type TestSpanMappers200 = {
+	data: SpantypesGettableSpanMapperTestDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetStats200Data = { [key: string]: unknown };
 
 export type GetStats200 = {

frontend/src/api/generated/services/spanmapper/index.ts

@@ -30,8 +30,10 @@ import type {
 	RenderErrorResponseDTO,
 	SpantypesPostableSpanMapperDTO,
 	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesPostableSpanMapperTestDTO,
 	SpantypesUpdatableSpanMapperDTO,
 	SpantypesUpdatableSpanMapperGroupDTO,
+	TestSpanMappers200,
 	UpdateSpanMapperGroupPathParameters,
 	UpdateSpanMapperPathParameters,
 } from '../sigNoz.schemas';
@@ -780,3 +782,86 @@ export const useUpdateSpanMapper = <
 > => {
 	return useMutation(getUpdateSpanMapperMutationOptions(options));
 };
+/**
+ * Tests how span mappers would transform sample spans
+ * @summary Test span mappers against sample spans
+ */
+export const testSpanMappers = (
+	spantypesPostableSpanMapperTestDTO?: BodyType<SpantypesPostableSpanMapperTestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<TestSpanMappers200>({
+		url: `/api/v1/span_mapper_groups/test`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableSpanMapperTestDTO,
+		signal,
+	});
+};
+
+export const getTestSpanMappersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	const mutationKey = ['testSpanMappers'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testSpanMappers(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestSpanMappersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testSpanMappers>>
+>;
+export type TestSpanMappersMutationBody =
+	| BodyType<SpantypesPostableSpanMapperTestDTO>
+	| undefined;
+export type TestSpanMappersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Test span mappers against sample spans
+ */
+export const useTestSpanMappers = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	return useMutation(getTestSpanMappersMutationOptions(options));
+};

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,8 +1,6 @@
 .quick-filters-container {
 	display: flex;
 	flex-direction: row;
-	height: 100%;
-	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {

frontend/src/components/TagKeyValueInput/TagKeyValueInput.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TagKeyValueInput from './TagKeyValueInput';
+
+const TID = 'tag-key-value-input';
+
+type User = ReturnType<typeof userEvent.setup>;
+
+const startEditingFirstChip = async (user: User): Promise<HTMLElement> => {
+	await user.dblClick(screen.getAllByTestId(`${TID}-chip`)[0]);
+	return screen.getByTestId(`${TID}-edit`);
+};
+
+describe('TagKeyValueInput — inline chip edit', () => {
+	it('shows an error and stays in edit mode when Enter commits an invalid value', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'key:value format',
+		);
+		// Still editing (input present), and no change committed.
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('shows a duplicate error when Enter commits an existing tag', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(
+			<TagKeyValueInput
+				tags={['env:prod', 'team:pulse']}
+				onTagsChange={onTagsChange}
+			/>,
+		);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'team:pulse{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'already exists',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('commits a valid edit on Enter', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'env:staging{Enter}');
+
+		expect(onTagsChange).toHaveBeenCalledWith(['env:staging']);
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+	});
+
+	it('reverts silently (no error) when blurring an invalid edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue');
+		await user.tab(); // blur off the edit input
+
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+		expect(screen.queryByTestId(`${TID}-edit`)).not.toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});
+
+describe('TagKeyValueInput — backend-rule validation', () => {
+	it('rejects a key containing a space on inline edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'my key:prod{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('rejects a value containing a space in the new-tag input', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={[]} onTagsChange={onTagsChange} />);
+
+		const input = screen.getByTestId(TID);
+		await user.type(input, 'env:pro d{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
 import TagBadge from '../TagBadge/TagBadge';
-import { parseKeyValueTag } from './utils';
+import { validateTag } from './utils';
 
 import styles from './TagKeyValueInput.module.scss';
 
@@ -43,16 +43,12 @@ function TagKeyValueInput({
 		if (!raw) {
 			return;
 		}
-		const normalized = parseKeyValueTag(raw);
-		if (!normalized) {
-			setError('Tags must be in key:value format (both sides required).');
+		const result = validateTag(raw, tags);
+		if ('error' in result) {
+			setError(result.error);
 			return;
 		}
-		if (tags.includes(normalized)) {
-			setError('This tag already exists.');
-			return;
-		}
-		onTagsChange([...tags, normalized]);
+		onTagsChange([...tags, result.tag]);
 		setInputValue('');
 		setError('');
 	};
@@ -82,15 +78,20 @@ function TagKeyValueInput({
 	const cancelEdit = (): void => {
 		setEditIndex(-1);
 		setEditValue('');
+		setError('');
 	};
 
-	const commitEdit = (): void => {
-		const normalized = parseKeyValueTag(editValue);
-		// Drop into a no-op (revert) on invalid or duplicate edits rather than
-		// stranding the user in an un-exitable edit box.
-		if (normalized && !tags.some((t, i) => t === normalized && i !== editIndex)) {
-			onTagsChange(tags.map((t, i) => (i === editIndex ? normalized : t)));
+	const commitEdit = (revertOnInvalid = false): void => {
+		const result = validateTag(editValue, tags, editIndex);
+		if ('error' in result) {
+			if (revertOnInvalid) {
+				cancelEdit();
+			} else {
+				setError(result.error);
+			}
+			return;
 		}
+		onTagsChange(tags.map((t, i) => (i === editIndex ? result.tag : t)));
 		cancelEdit();
 	};
 
@@ -121,11 +122,14 @@ function TagKeyValueInput({
 							value={editValue}
 							autoFocus
 							testId={`${testId}-edit`}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-								setEditValue(e.target.value)
-							}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+								setEditValue(e.target.value);
+								if (error) {
+									setError('');
+								}
+							}}
 							onKeyDown={handleEditKeyDown}
-							onBlur={commitEdit}
+							onBlur={(): void => commitEdit(true)}
 						/>
 					) : (
 						<TagBadge

frontend/src/components/TagKeyValueInput/utils.ts

@@ -15,3 +15,42 @@ export function parseKeyValueTag(raw: string): string | null {
 	}
 	return `${key}:${value}`;
 }
+
+const TAG_KEY_REGEX = new RegExp('^[a-zA-Z$_@{#][a-zA-Z0-9$_@#{}:/-]*$');
+const TAG_VALUE_REGEX = new RegExp('^[a-zA-Z0-9$_@#{}:.+=/-]*$');
+const MAX_TAG_LEN = 32;
+
+export type TagValidation = { tag: string } | { error: string };
+
+export function validateTag(
+	raw: string,
+	existingTags: string[],
+	excludeIndex = -1,
+): TagValidation {
+	const normalized = parseKeyValueTag(raw);
+	if (!normalized) {
+		return { error: 'Tags must be in key:value format (both sides required).' };
+	}
+	const separator = normalized.indexOf(':');
+	const key = normalized.slice(0, separator);
+	const value = normalized.slice(separator + 1);
+	if (!TAG_KEY_REGEX.test(key)) {
+		return { error: 'Tag keys cannot contain spaces or special characters.' };
+	}
+	if (!TAG_VALUE_REGEX.test(value)) {
+		return { error: 'Tag values cannot contain spaces or special characters.' };
+	}
+	if (key.length > MAX_TAG_LEN || value.length > MAX_TAG_LEN) {
+		return {
+			error: `Tag key and value must each be ${MAX_TAG_LEN} characters or fewer.`,
+		};
+	}
+	if (
+		existingTags.some(
+			(tag, index) => tag === normalized && index !== excludeIndex,
+		)
+	) {
+		return { error: 'This tag already exists.' };
+	}
+	return { tag: normalized };
+}

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,7 +1,11 @@
-import { ComponentProps, memo } from 'react';
+import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
 import { TableComponents } from 'react-virtuoso';
 import cx from 'classnames';
 
+import {
+	chromePerformanceTanstackTableBeginHover,
+	chromePerformanceMeasureTanstackTable,
+} from './perfDevtools';
 import TanStackRowCells from './TanStackRow';
 import {
 	useClearRowHovered,
@@ -10,6 +14,7 @@ import {
 import { FlatItem, TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
 type VirtuosoTableRowProps<TData, TItemKey = string> = ComponentProps<
 	NonNullable<
@@ -22,6 +27,7 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 	context,
 	...props
 }: VirtuosoTableRowProps<TData, TItemKey>): JSX.Element {
+	const renderStart = chromePerformanceNow();
 	const rowId = item.row.id;
 	const rowData = item.row.original;
 
@@ -29,6 +35,23 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 	const setHovered = useSetRowHovered(rowId);
 	const clearHovered = useClearRowHovered(rowId);
 
+	const handleMouseEnter = useCallback((): void => {
+		chromePerformanceTanstackTableBeginHover(rowId);
+		setHovered();
+	}, [rowId, setHovered]);
+
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Row render', renderStart, {
+			track: 'Row render',
+			color: 'secondary',
+			tooltipText: 'Row render + commit',
+			properties: [
+				['rowId', rowId],
+				['kind', item.kind],
+			],
+		});
+	});
+
 	if (item.kind === 'expansion') {
 		return (
 			<tr {...props} className={tableStyles.tableRowExpansion}>
@@ -65,7 +88,7 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
-			onMouseEnter={setHovered}
+			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
 			<TanStackRowCells

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -0,0 +1,30 @@
+import { useLayoutEffect, type ReactNode } from 'react';
+
+import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
+import { useIsRowHovered } from './TanStackTableStateContext';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
+	rowId: string;
+	children: ReactNode;
+};
+
+export function TanStackHoverTooltip({
+	rowId,
+	children,
+	...tooltipProps
+}: HoverTooltipProps): JSX.Element {
+	const isHovered = useIsRowHovered(rowId);
+
+	useLayoutEffect(() => {
+		if (isHovered) {
+			chromePerformanceTanstackTableEndHover(rowId);
+		}
+	}, [isHovered, rowId]);
+
+	if (!isHovered) {
+		return <>{children}</>;
+	}
+
+	return <TooltipSimple {...tooltipProps}>{children}</TooltipSimple>;
+}

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -5,6 +5,7 @@ import {
 	useCallback,
 	useEffect,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
 	useRef,
 } from 'react';
@@ -44,6 +45,7 @@ import {
 	TanStackTableHandle,
 	TanStackTableProps,
 } from './types';
+import { chromePerformanceMeasureTanstackTable } from './perfDevtools';
 import { useColumnDnd } from './useColumnDnd';
 import { useColumnHandlers } from './useColumnHandlers';
 import { useColumnState } from './useColumnState';
@@ -56,6 +58,7 @@ import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
 import viewStyles from './TanStackTableView.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
 const COLUMN_DND_AUTO_SCROLL = {
 	layoutShiftCompensation: false as const,
@@ -116,6 +119,8 @@ function TanStackTableInner<TData, TItemKey = string>(
 		);
 	}
 
+	const renderStart = chromePerformanceNow();
+
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -344,6 +349,19 @@ function TanStackTableInner<TData, TItemKey = string>(
 
 	const visibleColumnsCount = table.getVisibleFlatColumns().length;
 
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Table render', renderStart, {
+			track: 'Table render',
+			color: 'primary',
+			tooltipText: 'TanStackTable render + commit',
+			properties: [
+				['rows', String(flatItems.length)],
+				['columns', String(visibleColumnsCount)],
+				['loading', String(isLoading)],
+			],
+		});
+	});
+
 	const columnOrderKey = useMemo(() => columnIds.join(','), [columnIds]);
 	const columnVisibilityKey = useMemo(
 		() =>

frontend/src/components/TanStackTableView/index.tsx

@@ -1,6 +1,8 @@
+import { TanStackHoverTooltip } from './TanStackHoverTooltip';
 import { TanStackTableBase } from './TanStackTable';
 import TanStackTableText from './TanStackTableText';
 
+export * from './TanStackHoverTooltip';
 export * from './TanStackTableStateContext';
 export * from './types';
 export * from './useCalculatedPageSize';
@@ -274,6 +276,7 @@ export * from './useTableParams';
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,
+	HoverTooltip: TanStackHoverTooltip,
 });
 
 export default TanStackTable;

frontend/src/components/TanStackTableView/perfDevtools.ts

@@ -0,0 +1,35 @@
+import {
+	createChromePerformanceInteractionTracker,
+	chromePerformanceMeasure,
+	ChromePerformanceTrackEntryOptions,
+} from 'lib/chromePerformanceDevTools';
+
+const TABLE_TRACK_GROUP = 'SigNoz Table';
+
+export function chromePerformanceMeasureTanstackTable(
+	name: string,
+	start: number,
+	{
+		track,
+		color,
+		tooltipText,
+		properties,
+	}: Omit<ChromePerformanceTrackEntryOptions, 'trackGroup'>,
+): void {
+	chromePerformanceMeasure(name, start, {
+		trackGroup: TABLE_TRACK_GROUP,
+		track,
+		color,
+		tooltipText,
+		properties,
+	});
+}
+
+const hoverTracker = createChromePerformanceInteractionTracker(
+	TABLE_TRACK_GROUP,
+	'Hover',
+	'Row hover',
+);
+
+export const chromePerformanceTanstackTableBeginHover = hoverTracker.begin;
+export const chromePerformanceTanstackTableEndHover = hoverTracker.end;

frontend/src/components/TanStackTableView/types.ts

@@ -21,6 +21,7 @@ export type TableCellContext<TData, TValue> = {
 	value: TValue;
 	isActive: boolean;
 	rowIndex: number;
+	rowId: string;
 	isExpanded: boolean;
 	canExpand: boolean;
 	toggleExpanded: () => void;

frontend/src/components/TanStackTableView/utils.ts

@@ -135,6 +135,7 @@ export function buildTanstackColumnDef<TData, TItemKey = string>(
 				value: getValue() as TData[any],
 				isActive: isRowActive?.(rowData) ?? false,
 				rowIndex: row.index,
+				rowId: row.id,
 				isExpanded: row.getIsExpanded(),
 				canExpand: row.getCanExpand(),
 				toggleExpanded: (): void => {

frontend/src/container/CreateAlertV2/context/__tests__/CreateAlertProvider.prefill.test.tsx

@@ -1,9 +1,11 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
+import { INITIAL_CREATE_ALERT_STATE } from '../constants';
 import { CreateAlertProvider, useCreateAlertState } from '../index';
+import { AlertThresholdMatchType } from '../types';
 
 // The provider only needs a query with a unit + empty builder for these assertions.
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -108,3 +110,67 @@ describe('CreateAlertProvider — URL-declared prefill (issue #5291)', () => {
 		expect(screen.getByTestId('window-type')).toHaveTextContent('cumulative');
 	});
 });
+
+// Reproduces the #12137 regression: on the alert overview page the query builder
+// rewrites location.search after the alert loads, which used to re-run the prefill
+// effect and RESET the loaded threshold back to 0.
+function SearchMutator(): JSX.Element {
+	const routerHistory = useHistory();
+	return (
+		<button
+			type="button"
+			data-testid="mutate-search"
+			onClick={(): void =>
+				routerHistory.replace(
+					'/alerts/overview?compositeQuery=normalized&ruleId=r1',
+				)
+			}
+		>
+			change search
+		</button>
+	);
+}
+
+describe('CreateAlertProvider — edit mode ignores URL prefill', () => {
+	it('keeps loaded thresholds when the query builder rewrites location.search', () => {
+		const initialAlertState = {
+			...INITIAL_CREATE_ALERT_STATE,
+			threshold: {
+				...INITIAL_CREATE_ALERT_STATE.threshold,
+				matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+				thresholds: [
+					{
+						...INITIAL_CREATE_ALERT_STATE.threshold.thresholds[0],
+						thresholdValue: 245,
+					},
+				],
+			},
+		};
+
+		const queryClient = new QueryClient({
+			defaultOptions: { queries: { retry: false } },
+		});
+		render(
+			<MemoryRouter initialEntries={['/alerts/overview?ruleId=r1']}>
+				<QueryClientProvider client={queryClient}>
+					<CreateAlertProvider
+						initialAlertType={AlertTypes.METRICS_BASED_ALERT}
+						isEditMode
+						ruleId="r1"
+						initialAlertState={initialAlertState}
+					>
+						<Probe />
+						<SearchMutator />
+					</CreateAlertProvider>
+				</QueryClientProvider>
+			</MemoryRouter>,
+		);
+
+		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
+
+		// Simulate the query builder normalizing the query into the URL post-load.
+		fireEvent.click(screen.getByTestId('mutate-search'));
+
+		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
+	});
+});

frontend/src/container/CreateAlertV2/context/index.tsx

@@ -168,6 +168,14 @@ export function CreateAlertProvider(
 	const yAxisUnitAppliedRef = useRef(false);
 
 	useEffect(() => {
+		// URL-declared prefill is a create-flow concern. In edit mode the alert
+		// state is owned by SET_INITIAL_STATE; running the RESET below would wipe
+		// the loaded thresholds each time the query builder rewrites location.search
+		// (which yields a fresh urlPrefill object and re-triggers this effect).
+		if (isEditMode) {
+			return;
+		}
+
 		setCreateAlertState({
 			slice: CreateAlertSlice.THRESHOLD,
 			action: {
@@ -235,7 +243,7 @@ export function CreateAlertProvider(
 				},
 			});
 		}
-	}, [alertType, urlPrefill, ruleNameFromURL, yAxisUnitFromURL]);
+	}, [alertType, urlPrefill, ruleNameFromURL, yAxisUnitFromURL, isEditMode]);
 
 	useEffect(() => {
 		if (isEditMode && initialAlertState) {

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -51,6 +51,7 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -211,27 +212,31 @@ function Hosts(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.quickFiltersContainerHeader}>
-								<Typography.Text>Filters</Typography.Text>
-								<Tooltip title="Collapse Filters">
-									<ArrowUpToLine
-										style={{ rotate: '270deg', cursor: 'pointer' }}
-										onClick={handleFilterVisibilityChange}
-										size="md"
+							<OverlayScrollbar>
+								<>
+									<div className={styles.quickFiltersContainerHeader}>
+										<Typography.Text>Filters</Typography.Text>
+										<Tooltip title="Collapse Filters">
+											<ArrowUpToLine
+												style={{ rotate: '270deg', cursor: 'pointer' }}
+												onClick={handleFilterVisibilityChange}
+												size="md"
+											/>
+										</Tooltip>
+									</div>
+									<QuickFilters
+										source={QuickFiltersSource.INFRA_MONITORING}
+										config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
+										handleFilterVisibilityChange={handleFilterVisibilityChange}
+										useFieldApis={{
+											metricNamespace:
+												METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
+											startUnixMilli,
+											endUnixMilli,
+										}}
 									/>
-								</Tooltip>
-							</div>
-							<QuickFilters
-								source={QuickFiltersSource.INFRA_MONITORING}
-								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
-								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								useFieldApis={{
-									metricNamespace:
-										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
-									startUnixMilli,
-									endUnixMilli,
-								}}
-							/>
+								</>
+							</OverlayScrollbar>
 						</div>
 					)}
 					<div
@@ -248,6 +253,7 @@ function Hosts(): JSX.Element {
 							getRowKey={getHostRowKey}
 							getItemKey={getHostItemKey}
 							eventCategory={InfraMonitoringEvents.HostEntity}
+							detailsQueryKeyPrefix="hosts"
 						/>
 					</div>
 				</div>

frontend/src/container/InfraMonitoringHostsV2/InfraMonitoringHosts.module.scss

@@ -48,24 +48,6 @@
 	width: 280px;
 	min-width: 280px;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
-	}
 
 	:global(.ant-collapse-header) {
 		border-bottom: 1px solid var(--l1-border);
@@ -80,28 +62,6 @@
 			padding-left: 18px;
 		}
 	}
-
-	:global(.quick-filters) {
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-			height: 0.1rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--accent-primary);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--accent-primary);
-		}
-	}
 }
 
 .quickFiltersContainerHeader {

frontend/src/container/InfraMonitoringHostsV2/table.config.tsx

@@ -130,12 +130,13 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		accessorFn: (row): string => row.status,
 		width: { min: 140 },
 		enableSort: false,
-		cell: ({ value, groupMeta, row }): React.ReactNode => {
+		cell: ({ value, groupMeta, row, rowId }): React.ReactNode => {
 			const status = value as InframonitoringtypesHostStatusDTO;
 
 			if (groupMeta) {
 				return (
 					<GroupedStatusCounts
+						rowId={rowId}
 						items={[
 							{
 								value: row.activeHostCount,
@@ -195,13 +196,13 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 			<ColumnHeader
 				tooltip="Excluding cache memory."
 				docPath="/infrastructure-monitoring/host-monitoring#memory-usage"
-				className={styles.memoryUsageHeader}
 			>
-				Memory Usage (WSS)
+				Memory Usage
+				<br /> (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.memory,
-		width: { min: 240 },
+		width: { min: 200 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const memory = value as number;
@@ -248,11 +249,12 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		id: 'load15',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#load-avg">
-				Load Avg (15min)
+				Load Avg
+				<br /> (15min)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.load15,
-		width: { min: 200 },
+		width: { min: 160 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const load15 = Number(value);
@@ -276,7 +278,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.diskUsage,
-		width: { min: 160 },
+		width: { min: 200 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const diskUsage = value as number;

frontend/src/container/InfraMonitoringHostsV2/table.module.scss

@@ -13,14 +13,6 @@
 	text-align: right;
 }
 
-.memoryUsageHeader {
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-2);
-	width: 100%;
-}
-
 .statusTag {
 	width: fit-content;
 	font-family: Inter, sans-serif;

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -1,148 +1,39 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button, Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
+import { Drawer } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
-import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import GetMinMax from 'lib/getMinMax';
 import {
-	BarChart,
-	ChevronsLeftRight,
-	Compass,
-	DraftingCompass,
-	ScrollText,
-	X,
-} from '@signozhq/icons';
-import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
-import {
-	LogsAggregatorOperator,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
+	GlobalTimeProvider,
+	NANO_SECOND_MULTIPLIER,
+	useGlobalTimeStore,
+} from 'store/globalTime';
 
-import { InfraMonitoringEntity, VIEW_TYPES } from '../constants';
-import EntityEvents from '../EntityDetailsUtils/EntityEvents';
-import EntityLogs from '../EntityDetailsUtils/EntityLogs';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
-import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
-import EntityTraces from '../EntityDetailsUtils/EntityTraces';
-import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
-import {
-	SelectedItemParams,
-	useInfraMonitoringEventsFilters,
-	useInfraMonitoringLogFilters,
-	useInfraMonitoringSelectedItemParams,
-	useInfraMonitoringTracesFilters,
-	useInfraMonitoringView,
-} from '../hooks';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
+import { useInfraMonitoringSelectedItemParams } from '../hooks';
 import LoadingContainer from '../LoadingContainer';
 
+import K8sBaseDetailsContent from './K8sBaseDetailsContent';
+import { K8sBaseDetailsProps } from './types';
+
 import '../EntityDetailsUtils/entityDetails.styles.scss';
-import { parseAsString, useQueryState } from 'nuqs';
-import {
-	EntityCountConfig,
-	EntityCountsSection,
-} from './components/EntityCountsSection/EntityCountsSection';
 
-const TimeRangeOffset = 1000000000;
+export type {
+	CustomTab,
+	CustomTabRenderProps,
+	K8sBaseDetailsProps,
+	K8sDetailsCountConfig,
+	K8sDetailsFilters,
+	K8sDetailsMetadataConfig,
+} from './types';
 
-export interface K8sDetailsMetadataConfig<T> {
-	label: string;
-	getValue: (entity: T) => string | number;
-	render?: (value: string | number, entity: T) => React.ReactNode;
-}
-
-export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
-
-export interface K8sDetailsFilters {
-	filter: { expression: string };
-	start: number;
-	end: number;
-}
-
-export interface CustomTabRenderProps<T> {
-	entity: T;
-	timeRange: { startTime: number; endTime: number };
-	selectedInterval: Time;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-export interface CustomTab<T> {
-	key: string;
-	label: string;
-	icon: React.ReactNode;
-	render: (props: CustomTabRenderProps<T>) => React.ReactNode;
-}
-
-export interface K8sBaseDetailsProps<T> {
-	category: InfraMonitoringEntity;
-	eventCategory: string;
-	// Data fetching configuration
-	getSelectedItemExpression: (params: SelectedItemParams) => string;
-	fetchEntityData: (
-		filters: K8sDetailsFilters,
-		signal?: AbortSignal,
-	) => Promise<{ data: T | null; error?: APIError | null }>;
-	// Entity configuration
-	getEntityName: (entity: T) => string;
-	getInitialLogTracesExpression: (entity: T) => string;
-	getInitialEventsExpression: (entity: T) => string;
-	metadataConfig: K8sDetailsMetadataConfig<T>[];
-	countsConfig?: K8sDetailsCountConfig<T>[];
-	getCountsFilterExpression?: (entity: T) => string;
-	entityWidgetInfo: {
-		title: string;
-		yAxisUnit: string;
-		docPath?: string;
-	}[];
-	getEntityQueryPayload: (
-		entity: T,
-		start: number,
-		end: number,
-		dotMetricsEnabled: boolean,
-	) => GetQueryResultsProps[];
-	queryKeyPrefix: string;
-	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
-	hideDetailViewTabs?: boolean;
-	tabsConfig?: {
-		showMetrics?: boolean;
-		showLogs?: boolean;
-		showTraces?: boolean;
-		showEvents?: boolean;
-	};
-	customTabs?: Array<CustomTab<T>>;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function K8sBaseDetails<T>({
 	category,
 	eventCategory,
@@ -163,7 +54,6 @@ export default function K8sBaseDetails<T>({
 }: K8sBaseDetailsProps<T>): JSX.Element {
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
 	const getAutoRefreshQueryKey = useGlobalTimeStore(
 		(s) => s.getAutoRefreshQueryKey,
 	);
@@ -237,86 +127,9 @@ export default function K8sBaseDetails<T>({
 
 	const entityName = entity ? getEntityName(entity) : '';
 
-	// Content state (previously in K8sBaseDetailsContent)
-	const tabVisibility = useMemo(
-		() => ({
-			showMetrics: true,
-			showLogs: true,
-			showTraces: true,
-			showEvents: true,
-			...tabsConfig,
-		}),
-		[tabsConfig],
-	);
-
-	const { startMs, endMs } = useMemo(
-		() => ({
-			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
-			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
-		}),
-		[lastComputedMinMax],
-	);
-
-	const [modalTimeRange, setModalTimeRange] = useState(() => ({
-		startTime: startMs,
-		endTime: endMs,
-	}));
-
-	// TODO(h4ad): Remove this and use context/zustand
-	const lastSelectedInterval = useRef<Time | null>(null);
-	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: isCustomTimeRange(selectedTime)
-				? DEFAULT_TIME_RANGE
-				: selectedTime,
-	);
-
-	const [selectedView, setSelectedView] = useInfraMonitoringView();
-	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
-
-	const validTabs = useMemo(() => {
-		const tabs: string[] = [];
-		if (tabVisibility.showMetrics) {
-			tabs.push(VIEW_TYPES.METRICS);
-		}
-		if (tabVisibility.showLogs) {
-			tabs.push(VIEW_TYPES.LOGS);
-		}
-		if (tabVisibility.showTraces) {
-			tabs.push(VIEW_TYPES.TRACES);
-		}
-		if (tabVisibility.showEvents) {
-			tabs.push(VIEW_TYPES.EVENTS);
-		}
-		if (customTabs) {
-			tabs.push(...customTabs.map((t) => t.key));
-		}
-		return tabs;
-	}, [tabVisibility, customTabs]);
-
-	useEffect(() => {
-		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
-			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
-			void setSelectedView(firstValid);
-		}
-	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
-
-	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
-	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
-	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
-	const [userLogsExpression] = useQueryState(
-		K8S_ENTITY_LOGS_EXPRESSION_KEY,
-		parseAsString,
-	);
-	const [userTracesExpression] = useQueryState(
-		K8S_ENTITY_TRACES_EXPRESSION_KEY,
-		parseAsString,
-	);
-
 	useEffect(() => {
 		if (entity) {
-			logEvent(InfraMonitoringEvents.PageVisited, {
+			void logEvent(InfraMonitoringEvents.PageVisited, {
 				entity: InfraMonitoringEvents.K8sEntity,
 				page: InfraMonitoringEvents.DetailedPage,
 				category: eventCategory,
@@ -324,136 +137,6 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
-	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		if (!isCustomTimeRange(currentSelectedInterval)) {
-			setSelectedInterval(currentSelectedInterval);
-			const { minTime, maxTime } = getMinMaxTime();
-
-			setModalTimeRange({
-				startTime: Math.floor(minTime / TimeRangeOffset),
-				endTime: Math.floor(maxTime / TimeRangeOffset),
-			});
-		}
-	}, [getMinMaxTime, selectedTime]);
-
-	const handleTabChange = (value: string | null): void => {
-		if (!value) {
-			return;
-		}
-		setSelectedView(value);
-		setLogFiltersParam(null);
-		setTracesFiltersParam(null);
-		setEventsFiltersParam(null);
-		logEvent(InfraMonitoringEvents.TabChanged, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: value,
-		});
-	};
-
-	const handleTimeChange = useCallback(
-		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
-			setSelectedInterval(interval as Time);
-
-			if (interval === 'custom' && dateTimeRange) {
-				setModalTimeRange({
-					startTime: Math.floor(dateTimeRange[0] / 1000),
-					endTime: Math.floor(dateTimeRange[1] / 1000),
-				});
-			} else {
-				const { maxTime, minTime } = GetMinMax(interval);
-
-				setModalTimeRange({
-					startTime: Math.floor(minTime / TimeRangeOffset),
-					endTime: Math.floor(maxTime / TimeRangeOffset),
-				});
-			}
-
-			logEvent(InfraMonitoringEvents.TimeUpdated, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.DetailedPage,
-				category: eventCategory,
-				interval,
-				view: effectiveView,
-			});
-		},
-		[eventCategory, effectiveView],
-	);
-
-	const handleExplorePagesRedirect = (): void => {
-		const urlQuery = new URLSearchParams();
-
-		if (selectedInterval !== 'custom') {
-			urlQuery.set(QueryParams.relativeTime, selectedInterval);
-		} else {
-			urlQuery.delete(QueryParams.relativeTime);
-			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
-			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
-		}
-
-		logEvent(InfraMonitoringEvents.ExploreClicked, {
-			entity: InfraMonitoringEvents.K8sEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-			category: eventCategory,
-			view: selectedView,
-		});
-
-		if (selectedView === VIEW_TYPES.LOGS) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userLogsExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.logs,
-							aggregateOperator: LogsAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
-			const fullExpression = combineInitialAndUserExpression(
-				logsAndTracesInitialExpression,
-				userTracesExpression || '',
-			);
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.traces,
-							aggregateOperator: TracesAggregatorOperator.NOOP,
-							expression: fullExpression,
-							filter: { expression: fullExpression },
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
-		}
-	};
-
 	return (
 		<Drawer
 			width="70%"
@@ -480,8 +163,9 @@ export default function K8sBaseDetails<T>({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			{isEntityLoading && <LoadingContainer />}
-			{(isEntityError || hasResponseError) && (
+			{(isEntityLoading || !selectedItem) && <LoadingContainer />}
+
+			{selectedItem && (isEntityError || hasResponseError) && (
 				<div className="entity-error-container">
 					<ErrorContent
 						error={
@@ -497,208 +181,34 @@ export default function K8sBaseDetails<T>({
 					/>
 				</div>
 			)}
-			{entity && !isEntityLoading && !hasResponseError && (
-				<>
-					<div className="entity-detail-drawer__entity">
-						<div className="entity-details-grid">
-							<div className="labels-row">
-								{metadataConfig.map((config) => (
-									<Typography.Text
-										key={config.label}
-										color="muted"
-										className="entity-details-metadata-label"
-									>
-										{config.label}
-									</Typography.Text>
-								))}
-							</div>
-
-							<div className="values-row">
-								{metadataConfig.map((config) => {
-									const value = config.getValue(entity);
-									const displayValue = String(value);
-									return (
-										<Typography.Text
-											key={config.label}
-											className="entity-details-metadata-value"
-										>
-											{config.render ? (
-												config.render(value, entity)
-											) : (
-												<Tooltip title={displayValue}>{displayValue}</Tooltip>
-											)}
-										</Typography.Text>
-									);
-								})}
-							</div>
-						</div>
-
-						{countsConfig &&
-							countsConfig.length > 0 &&
-							selectedItem &&
-							getCountsFilterExpression && (
-								<EntityCountsSection
-									entity={entity}
-									countsConfig={countsConfig}
-									selectedItem={selectedItem}
-									filterExpression={getCountsFilterExpression(entity)}
-									closeDrawer={handleClose}
-								/>
-							)}
-					</div>
-
-					{!hideDetailViewTabs && (
-						<div className="views-tabs-container">
-							<ToggleGroupSimple
-								type="single"
-								className="views-tabs"
-								onChange={handleTabChange}
-								value={selectedView}
-								items={[
-									...(tabVisibility.showMetrics
-										? [
-												{
-													value: VIEW_TYPES.METRICS,
-													label: (
-														<div className="view-title">
-															<BarChart size={14} />
-															Metrics
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showLogs
-										? [
-												{
-													value: VIEW_TYPES.LOGS,
-													label: (
-														<div className="view-title">
-															<ScrollText size={14} />
-															Logs
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showTraces
-										? [
-												{
-													value: VIEW_TYPES.TRACES,
-													label: (
-														<div className="view-title">
-															<DraftingCompass size={14} />
-															Traces
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showEvents
-										? [
-												{
-													value: VIEW_TYPES.EVENTS,
-													label: (
-														<div className="view-title">
-															<ChevronsLeftRight size={14} />
-															Events
-														</div>
-													),
-												},
-											]
-										: []),
-									...(customTabs?.map((tab) => ({
-										value: tab.key,
-										label: (
-											<div className="view-title">
-												{tab.icon}
-												{tab.label}
-											</div>
-										),
-									})) ?? []),
-								]}
-							/>
-
-							{selectedView === VIEW_TYPES.LOGS && (
-								<Tooltip title="Go to Logs Explorer" placement="left">
-									<Button
-										icon={<Compass size={18} />}
-										className="compass-button"
-										onClick={handleExplorePagesRedirect}
-									/>
-								</Tooltip>
-							)}
-							{selectedView === VIEW_TYPES.TRACES && (
-								<Tooltip title="Go to Traces Explorer" placement="left">
-									<Button
-										icon={<Compass size={18} />}
-										className="compass-button"
-										onClick={handleExplorePagesRedirect}
-									/>
-								</Tooltip>
-							)}
-						</div>
-					)}
-
-					{effectiveView === VIEW_TYPES.METRICS && (
-						<EntityMetrics<T>
-							entity={entity}
-							selectedInterval={selectedInterval}
-							timeRange={modalTimeRange}
-							handleTimeChange={handleTimeChange}
-							isModalTimeSelection
-							entityWidgetInfo={entityWidgetInfo}
-							getEntityQueryPayload={getEntityQueryPayload}
-							category={category}
-							queryKey={`${queryKeyPrefix}Metrics`}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.LOGS && (
-						<EntityLogs
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							queryKey={`${queryKeyPrefix}Logs`}
-							category={category}
-							initialExpression={logsAndTracesInitialExpression}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.TRACES && (
-						<EntityTraces
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							queryKey={`${queryKeyPrefix}Traces`}
-							category={category}
-							initialExpression={logsAndTracesInitialExpression}
-						/>
-					)}
-					{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
-						<EntityEvents
-							timeRange={modalTimeRange}
-							isModalTimeSelection
-							handleTimeChange={handleTimeChange}
-							selectedInterval={selectedInterval}
-							category={category}
-							queryKey={`${queryKeyPrefix}Events`}
-							initialExpression={eventsInitialExpression}
-						/>
-					)}
-					{customTabs?.map((tab) =>
-						selectedView === tab.key ? (
-							<React.Fragment key={tab.key}>
-								{tab.render({
-									entity,
-									timeRange: modalTimeRange,
-									selectedInterval,
-									handleTimeChange,
-								})}
-							</React.Fragment>
-						) : null,
-					)}
-				</>
+			{selectedItem && entity && !isEntityLoading && !hasResponseError && (
+				<GlobalTimeProvider
+					inheritGlobalTime
+					enableUrlParams={{
+						relativeTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+						startTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+						endTimeKey: INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+					}}
+				>
+					<K8sBaseDetailsContent<T>
+						entity={entity}
+						category={category}
+						eventCategory={eventCategory}
+						metadataConfig={metadataConfig}
+						countsConfig={countsConfig}
+						getCountsFilterExpression={getCountsFilterExpression}
+						selectedItem={selectedItem}
+						handleClose={handleClose}
+						entityWidgetInfo={entityWidgetInfo}
+						getEntityQueryPayload={getEntityQueryPayload}
+						queryKeyPrefix={queryKeyPrefix}
+						hideDetailViewTabs={hideDetailViewTabs}
+						tabsConfig={tabsConfig}
+						customTabs={customTabs}
+						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
+						eventsInitialExpression={eventsInitialExpression}
+					/>
+				</GlobalTimeProvider>
 			)}
 		</Drawer>
 	);

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -0,0 +1,401 @@
+import { Fragment, useEffect, useMemo } from 'react';
+import {
+	BarChart,
+	ChevronsLeftRight,
+	Compass,
+	DraftingCompass,
+	ScrollText,
+} from '@signozhq/icons';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { parseAsString, useQueryState } from 'nuqs';
+import {
+	LogsAggregatorOperator,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
+
+import { VIEW_TYPES } from '../constants';
+import { useEntityDetailsTime } from '../EntityDetailsUtils/EntityDateTimeSelector/useEntityDetailsTime';
+import EntityEvents from '../EntityDetailsUtils/EntityEvents';
+import EntityLogs from '../EntityDetailsUtils/EntityLogs';
+import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
+import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
+import EntityTraces from '../EntityDetailsUtils/EntityTraces';
+import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
+import {
+	useInfraMonitoringEventsFilters,
+	useInfraMonitoringLogFilters,
+	useInfraMonitoringTracesFilters,
+	useInfraMonitoringView,
+} from '../hooks';
+
+import { EntityCountsSection } from './components/EntityCountsSection/EntityCountsSection';
+import { K8sBaseDetailsContentProps } from './types';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export default function K8sBaseDetailsContent<T>({
+	entity,
+	category,
+	eventCategory,
+	metadataConfig,
+	countsConfig,
+	getCountsFilterExpression,
+	selectedItem,
+	handleClose,
+	entityWidgetInfo,
+	getEntityQueryPayload,
+	queryKeyPrefix,
+	hideDetailViewTabs,
+	tabsConfig,
+	customTabs,
+	logsAndTracesInitialExpression,
+	eventsInitialExpression,
+}: K8sBaseDetailsContentProps<T>): JSX.Element {
+	const { timeRange, selectedInterval, handleTimeChange } =
+		useEntityDetailsTime();
+
+	const tabVisibility = useMemo(
+		() => ({
+			showMetrics: true,
+			showLogs: true,
+			showTraces: true,
+			showEvents: true,
+			...tabsConfig,
+		}),
+		[tabsConfig],
+	);
+
+	const [selectedView, setSelectedView] = useInfraMonitoringView();
+
+	const validTabs = useMemo(() => {
+		const tabs: string[] = [];
+		if (tabVisibility.showMetrics) {
+			tabs.push(VIEW_TYPES.METRICS);
+		}
+		if (tabVisibility.showLogs) {
+			tabs.push(VIEW_TYPES.LOGS);
+		}
+		if (tabVisibility.showTraces) {
+			tabs.push(VIEW_TYPES.TRACES);
+		}
+		if (tabVisibility.showEvents) {
+			tabs.push(VIEW_TYPES.EVENTS);
+		}
+		if (customTabs) {
+			tabs.push(...customTabs.map((t) => t.key));
+		}
+		return tabs;
+	}, [tabVisibility, customTabs]);
+
+	useEffect(() => {
+		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
+			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
+			void setSelectedView(firstValid);
+		}
+	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
+
+	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
+
+	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
+	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
+	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
+	const [userLogsExpression] = useQueryState(
+		K8S_ENTITY_LOGS_EXPRESSION_KEY,
+		parseAsString,
+	);
+	const [userTracesExpression] = useQueryState(
+		K8S_ENTITY_TRACES_EXPRESSION_KEY,
+		parseAsString,
+	);
+
+	const handleTabChange = (value: string | null): void => {
+		if (!value) {
+			return;
+		}
+		void setSelectedView(value);
+		void setLogFiltersParam(null);
+		void setTracesFiltersParam(null);
+		void setEventsFiltersParam(null);
+		void logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: value,
+		});
+	};
+
+	const handleExplorePagesRedirect = (): void => {
+		const urlQuery = new URLSearchParams();
+
+		if (selectedInterval !== 'custom') {
+			urlQuery.set(QueryParams.relativeTime, selectedInterval);
+		} else {
+			urlQuery.delete(QueryParams.relativeTime);
+			// Explorer URL params are in milliseconds, timeRange is in seconds
+			urlQuery.set(QueryParams.startTime, (timeRange.startTime * 1000).toString());
+			urlQuery.set(QueryParams.endTime, (timeRange.endTime * 1000).toString());
+		}
+
+		void logEvent(InfraMonitoringEvents.ExploreClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: selectedView,
+		});
+
+		if (selectedView === VIEW_TYPES.LOGS) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userLogsExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.logs,
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+		} else if (selectedView === VIEW_TYPES.TRACES) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userTracesExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.traces,
+							aggregateOperator: TracesAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+		}
+	};
+
+	return (
+		<>
+			<div className="entity-detail-drawer__entity">
+				<div className="entity-details-grid">
+					<div className="labels-row">
+						{metadataConfig.map((config) => (
+							<Typography.Text
+								key={config.label}
+								color="muted"
+								className="entity-details-metadata-label"
+							>
+								{config.label}
+							</Typography.Text>
+						))}
+					</div>
+
+					<div className="values-row">
+						{metadataConfig.map((config) => {
+							const value = config.getValue(entity);
+							const displayValue = String(value);
+							return (
+								<Typography.Text
+									key={config.label}
+									className="entity-details-metadata-value"
+								>
+									{config.render ? (
+										config.render(value, entity)
+									) : (
+										<Tooltip title={displayValue}>{displayValue}</Tooltip>
+									)}
+								</Typography.Text>
+							);
+						})}
+					</div>
+				</div>
+
+				{countsConfig &&
+					countsConfig.length > 0 &&
+					selectedItem &&
+					getCountsFilterExpression && (
+						<EntityCountsSection
+							entity={entity}
+							countsConfig={countsConfig}
+							selectedItem={selectedItem}
+							filterExpression={getCountsFilterExpression(entity)}
+							closeDrawer={handleClose}
+						/>
+					)}
+			</div>
+
+			{!hideDetailViewTabs && (
+				<div className="views-tabs-container">
+					<ToggleGroupSimple
+						type="single"
+						className="views-tabs"
+						onChange={handleTabChange}
+						value={selectedView}
+						items={[
+							...(tabVisibility.showMetrics
+								? [
+										{
+											value: VIEW_TYPES.METRICS,
+											label: (
+												<div className="view-title">
+													<BarChart size={14} />
+													Metrics
+												</div>
+											),
+										},
+									]
+								: []),
+							...(tabVisibility.showLogs
+								? [
+										{
+											value: VIEW_TYPES.LOGS,
+											label: (
+												<div className="view-title">
+													<ScrollText size={14} />
+													Logs
+												</div>
+											),
+										},
+									]
+								: []),
+							...(tabVisibility.showTraces
+								? [
+										{
+											value: VIEW_TYPES.TRACES,
+											label: (
+												<div className="view-title">
+													<DraftingCompass size={14} />
+													Traces
+												</div>
+											),
+										},
+									]
+								: []),
+							...(tabVisibility.showEvents
+								? [
+										{
+											value: VIEW_TYPES.EVENTS,
+											label: (
+												<div className="view-title">
+													<ChevronsLeftRight size={14} />
+													Events
+												</div>
+											),
+										},
+									]
+								: []),
+							...(customTabs?.map((tab) => ({
+								value: tab.key,
+								label: (
+									<div className="view-title">
+										{tab.icon}
+										{tab.label}
+									</div>
+								),
+							})) ?? []),
+						]}
+					/>
+
+					{selectedView === VIEW_TYPES.LOGS && (
+						<Tooltip title="Go to Logs Explorer" placement="left">
+							<Button
+								icon={<Compass size={18} />}
+								className="compass-button"
+								onClick={handleExplorePagesRedirect}
+							/>
+						</Tooltip>
+					)}
+					{selectedView === VIEW_TYPES.TRACES && (
+						<Tooltip title="Go to Traces Explorer" placement="left">
+							<Button
+								icon={<Compass size={18} />}
+								className="compass-button"
+								onClick={handleExplorePagesRedirect}
+							/>
+						</Tooltip>
+					)}
+				</div>
+			)}
+
+			{effectiveView === VIEW_TYPES.METRICS && (
+				<EntityMetrics<T>
+					entity={entity}
+					eventEntity={eventCategory}
+					entityWidgetInfo={entityWidgetInfo}
+					getEntityQueryPayload={getEntityQueryPayload}
+					category={category}
+					queryKey={`${queryKeyPrefix}Metrics`}
+				/>
+			)}
+			{effectiveView === VIEW_TYPES.LOGS && (
+				<EntityLogs
+					eventEntity={eventCategory}
+					queryKey={`${queryKeyPrefix}Logs`}
+					category={category}
+					initialExpression={logsAndTracesInitialExpression}
+				/>
+			)}
+			{effectiveView === VIEW_TYPES.TRACES && (
+				<EntityTraces
+					eventEntity={eventCategory}
+					queryKey={`${queryKeyPrefix}Traces`}
+					category={category}
+					initialExpression={logsAndTracesInitialExpression}
+				/>
+			)}
+			{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
+				<EntityEvents
+					eventEntity={eventCategory}
+					queryKey={`${queryKeyPrefix}Events`}
+					initialExpression={eventsInitialExpression}
+					category={category}
+				/>
+			)}
+			{customTabs?.map((tab) =>
+				selectedView === tab.key ? (
+					<Fragment key={tab.key}>
+						{tab.render({
+							entity,
+							timeRange,
+							selectedInterval,
+							handleTimeChange,
+						})}
+					</Fragment>
+				) : null,
+			)}
+		</>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -74,14 +74,15 @@ export type K8sBaseListProps<
 		warning?: Querybuildertypesv5QueryWarnDataDTO | null;
 	}>;
 	/** Function to get the unique key for a row. */
-	getRowKey?: (record: T) => string;
+	getRowKey: (record: T) => string;
 	/** Function to get the item key used for selection. Can return string or SelectedItemParams. */
-	getItemKey?: (record: T) => TItemKey;
+	getItemKey: (record: T) => TItemKey;
 	eventCategory: InfraMonitoringEvents;
 	renderEmptyState?: (
 		context: K8sBaseListEmptyStateContext,
 	) => React.ReactNode | null;
 	extraQueryKeyParts?: string[];
+	detailsQueryKeyPrefix: string;
 };
 
 export function K8sBaseList<
@@ -98,6 +99,7 @@ export function K8sBaseList<
 	eventCategory,
 	renderEmptyState,
 	extraQueryKeyParts = [],
+	detailsQueryKeyPrefix,
 }: K8sBaseListProps<T, TItemKey>): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const expression = currentQuery.builder.queryData[0]?.filter?.expression || '';
@@ -234,17 +236,29 @@ export function K8sBaseList<
 	}, [eventCategory, totalCount]);
 
 	const handleRowClick = useCallback(
-		(_record: T, itemKey: TItemKey): void => {
+		(record: T, itemKey: TItemKey): void => {
 			if (groupBy.length === 0) {
-				if (typeof itemKey === 'object' && itemKey !== null) {
-					setSelectedItemParams(itemKey);
-				} else {
-					setSelectedItemParams({
-						selectedItem: itemKey,
-						clusterName: null,
-						namespaceName: null,
-					});
+				const params: SelectedItemParams =
+					typeof itemKey === 'object'
+						? itemKey
+						: {
+								selectedItem: itemKey,
+								clusterName: null,
+								namespaceName: null,
+							};
+
+				if (detailsQueryKeyPrefix) {
+					const detailQueryKey = getAutoRefreshQueryKey(
+						selectedTime,
+						`${detailsQueryKeyPrefix}EntityDetails`,
+						params.selectedItem,
+						params.clusterName,
+						params.namespaceName,
+					);
+					queryClient.setQueryData(detailQueryKey, { data: record });
 				}
+
+				setSelectedItemParams(params);
 			}
 
 			void logEvent(InfraMonitoringEvents.ItemClicked, {
@@ -253,7 +267,15 @@ export function K8sBaseList<
 				category: eventCategory,
 			});
 		},
-		[eventCategory, groupBy.length, setSelectedItemParams],
+		[
+			eventCategory,
+			groupBy.length,
+			setSelectedItemParams,
+			detailsQueryKeyPrefix,
+			getAutoRefreshQueryKey,
+			selectedTime,
+			queryClient,
+		],
 	);
 
 	const handleRowClickNewTab = useCallback(
@@ -403,7 +425,7 @@ export function K8sBaseList<
 						onRowClickNewTab={handleRowClickNewTab}
 						renderExpandedRow={isGroupedByAttribute ? renderExpandedRow : undefined}
 						getRowCanExpand={isGroupedByAttribute ? getRowCanExpand : undefined}
-						className={cx(styles.k8SListTable, expandedRowColumns)}
+						className={cx(styles.k8SListTable)}
 						enableQueryParams={{
 							page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
 							limit: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE_SIZE,

frontend/src/container/InfraMonitoringK8sV2/Base/K8sDynamicList.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+
+import { useInfraMonitoringCategory } from '../hooks';
+import { getEntityConfig } from './entity.registry';
+import { K8sBaseList } from './K8sBaseList';
+import K8sBaseDetails from './K8sBaseDetails';
+
+export interface K8sDynamicListProps {
+	controlListPrefix?: React.ReactNode;
+	leftFilters?: React.ReactNode;
+}
+
+export function K8sDynamicList({
+	controlListPrefix,
+	leftFilters,
+}: K8sDynamicListProps): JSX.Element | null {
+	const [selectedCategory] = useInfraMonitoringCategory();
+
+	const config = useMemo(
+		() => getEntityConfig(selectedCategory),
+		[selectedCategory],
+	);
+
+	if (!config) {
+		return null;
+	}
+
+	const { list, details } = config;
+
+	return (
+		<>
+			<K8sBaseList
+				{...list}
+				controlListPrefix={controlListPrefix}
+				leftFilters={leftFilters}
+			/>
+
+			<K8sBaseDetails {...details} />
+		</>
+	);
+}
+
+export default K8sDynamicList;

frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.tsx

@@ -245,6 +245,7 @@ function K8sHeader<TData>({
 						showAutoRefresh={showAutoRefresh}
 						showRefreshText={false}
 						hideShareModal
+						defaultRelativeTime="30m"
 					/>
 				</div>
 

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@signozhq/icons';
 import { screen } from '@testing-library/react';
+import { InfraMonitoringEvents } from 'constants/events';
 import userEvent from '@testing-library/user-event';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { act, render, waitFor } from 'tests/test-utils';
@@ -31,7 +32,7 @@ const mockEntity: TestEntity = {
 function createBaseProps() {
 	return {
 		category: InfraMonitoringEntity.PODS,
-		eventCategory: 'Pod',
+		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
 		fetchEntityData: jest
 			.fn()

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -175,8 +175,10 @@ function renderComponent<
 >({
 	queryParams,
 	onUrlUpdate,
+	detailsQueryKeyPrefix = 'testEntity',
 	...props
-}: K8sBaseListProps<T, TItemKey> & {
+}: Omit<K8sBaseListProps<T, TItemKey>, 'detailsQueryKeyPrefix'> & {
+	detailsQueryKeyPrefix?: string;
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 }) {
@@ -203,7 +205,10 @@ function renderComponent<
 										value={{ viewportHeight: 800, itemHeight: 50 }}
 									>
 										<TooltipProvider>
-											<K8sBaseList<T, TItemKey> {...props} />
+											<K8sBaseList<T, TItemKey>
+												{...props}
+												detailsQueryKeyPrefix={detailsQueryKeyPrefix}
+											/>
 										</TooltipProvider>
 									</VirtuosoMockContext.Provider>
 								</NuqsTestingAdapter>

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -52,7 +52,6 @@ export function EntityCountsSection<T>({
 			},
 		};
 
-		// TODO(H4ad): After https://github.com/SigNoz/signoz/pull/12038, inherit custom time of drawer to list
 		const urlParams = new URLSearchParams();
 		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
 		urlParams.set(
@@ -60,6 +59,44 @@ export function EntityCountsSection<T>({
 			encodeURIComponent(JSON.stringify(compositeQuery)),
 		);
 
+		const currentSearchParams = new URLSearchParams(window.location.search);
+		const detailRelativeTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+		);
+		const detailStartTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+		);
+		const detailEndTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+		);
+
+		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
+		const listStartTime = currentSearchParams.get(QueryParams.startTime);
+		const listEndTime = currentSearchParams.get(QueryParams.endTime);
+
+		if (listRelativeTime) {
+			urlParams.set(QueryParams.relativeTime, listRelativeTime);
+		} else if (listStartTime && listEndTime) {
+			urlParams.set(QueryParams.startTime, listStartTime);
+			urlParams.set(QueryParams.endTime, listEndTime);
+		}
+
+		if (detailRelativeTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+				detailRelativeTime,
+			);
+		} else if (detailStartTime && detailEndTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+				detailStartTime,
+			);
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+				detailEndTime,
+			);
+		}
+
 		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
 	};
 

frontend/src/container/InfraMonitoringK8sV2/Base/entity.config.types.ts

@@ -0,0 +1,21 @@
+import { SelectedItemParams } from '../hooks';
+import { K8sBaseListProps } from './K8sBaseList';
+import { K8sBaseDetailsProps } from './types';
+
+export type K8sEntityData = { meta?: Record<string, string> | null };
+
+export type K8sEntityListConfig<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+> = Omit<K8sBaseListProps<T, TItemKey>, 'controlListPrefix' | 'leftFilters'>;
+
+export type K8sEntityDetailsConfig<T extends K8sEntityData> =
+	K8sBaseDetailsProps<T>;
+
+export interface K8sEntityConfig<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+> {
+	list: K8sEntityListConfig<T, TItemKey>;
+	details: K8sEntityDetailsConfig<T>;
+}

frontend/src/container/InfraMonitoringK8sV2/Base/entity.registry.ts

@@ -0,0 +1,41 @@
+import { K8sCategories } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import { K8sEntityConfig, K8sEntityData } from './entity.config.types';
+
+import { podEntityConfig } from '../Pods/entity.config';
+import { nodeEntityConfig } from '../Nodes/entity.config';
+import { clusterEntityConfig } from '../Clusters/entity.config';
+import { deploymentEntityConfig } from '../Deployments/entity.config';
+import { namespaceEntityConfig } from '../Namespaces/entity.config';
+import { jobEntityConfig } from '../Jobs/entity.config';
+import { daemonSetEntityConfig } from '../DaemonSets/entity.config';
+import { statefulSetEntityConfig } from '../StatefulSets/entity.config';
+import { volumeEntityConfig } from '../Volumes/entity.config';
+
+type AnyEntityConfig = K8sEntityConfig<
+	K8sEntityData,
+	string | SelectedItemParams
+>;
+
+function registerConfig<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams,
+>(config: K8sEntityConfig<T, TItemKey>): AnyEntityConfig {
+	return config as unknown as AnyEntityConfig;
+}
+
+export const entityRegistry: Record<string, AnyEntityConfig> = {
+	[K8sCategories.PODS]: registerConfig(podEntityConfig),
+	[K8sCategories.NODES]: registerConfig(nodeEntityConfig),
+	[K8sCategories.CLUSTERS]: registerConfig(clusterEntityConfig),
+	[K8sCategories.DEPLOYMENTS]: registerConfig(deploymentEntityConfig),
+	[K8sCategories.NAMESPACES]: registerConfig(namespaceEntityConfig),
+	[K8sCategories.JOBS]: registerConfig(jobEntityConfig),
+	[K8sCategories.DAEMONSETS]: registerConfig(daemonSetEntityConfig),
+	[K8sCategories.STATEFULSETS]: registerConfig(statefulSetEntityConfig),
+	[K8sCategories.VOLUMES]: registerConfig(volumeEntityConfig),
+};
+
+export function getEntityConfig(category: string): AnyEntityConfig | undefined {
+	return entityRegistry[category];
+}

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -1,3 +1,18 @@
+import { ReactNode } from 'react';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { InfraMonitoringEvents } from 'constants/events';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import APIError from 'types/api/error';
+
+import { EntityCountConfig } from './components/EntityCountsSection/EntityCountsSection';
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+
+export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
+
 export type K8sBaseFilters = {
 	filter: {
 		expression: string;
@@ -33,3 +48,100 @@ export type K8sTableRowData<T> = T & {
 	/** Metadata about which attributes were used for grouping */
 	groupedByMeta?: Record<string, string>;
 };
+
+export interface K8sDetailsMetadataConfig<T> {
+	label: string;
+	getValue: (entity: T) => string | number;
+	render?: (value: string | number, entity: T) => ReactNode;
+}
+
+export interface K8sDetailsFilters {
+	filter: { expression: string };
+	start: number;
+	end: number;
+}
+
+export interface K8sDetailsWidgetInfo {
+	title: string;
+	yAxisUnit: string;
+}
+
+export type GetEntityQueryPayload<T> = (
+	entity: T,
+	start: number,
+	end: number,
+	dotMetricsEnabled: boolean,
+) => GetQueryResultsProps[];
+
+export interface K8sDetailsTabsConfig {
+	showMetrics?: boolean;
+	showLogs?: boolean;
+	showTraces?: boolean;
+	showEvents?: boolean;
+}
+
+export interface K8sDetailsCustomTabRenderProps<T> {
+	entity: T;
+	/** Time range in seconds — see useEntityDetailsTime */
+	timeRange: { startTime: number; endTime: number };
+	selectedInterval: Time;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+}
+
+export interface K8sDetailsCustomTab<T> {
+	key: string;
+	label: string;
+	icon: ReactNode;
+	render: (props: K8sDetailsCustomTabRenderProps<T>) => ReactNode;
+}
+
+export interface K8sBaseDetailsProps<T> {
+	category: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
+	// Data fetching configuration
+	getSelectedItemExpression: (params: SelectedItemParams) => string;
+	fetchEntityData: (
+		filters: K8sDetailsFilters,
+		signal?: AbortSignal,
+	) => Promise<{ data: T | null; error?: APIError | null }>;
+	// Entity configuration
+	getEntityName: (entity: T) => string;
+	getInitialLogTracesExpression: (entity: T) => string;
+	getInitialEventsExpression: (entity: T) => string;
+	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
+	entityWidgetInfo: K8sDetailsWidgetInfo[];
+	getEntityQueryPayload: GetEntityQueryPayload<T>;
+	queryKeyPrefix: string;
+	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
+	hideDetailViewTabs?: boolean;
+	tabsConfig?: K8sDetailsTabsConfig;
+	customTabs?: K8sDetailsCustomTab<T>[];
+}
+
+export interface K8sBaseDetailsContentProps<T> {
+	entity: T;
+	category: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
+	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
+	selectedItem: string | null;
+	handleClose: () => void;
+	entityWidgetInfo: K8sDetailsWidgetInfo[];
+	getEntityQueryPayload: GetEntityQueryPayload<T>;
+	queryKeyPrefix: string;
+	hideDetailViewTabs: boolean;
+	tabsConfig?: K8sDetailsTabsConfig;
+	customTabs?: K8sDetailsCustomTab<T>[];
+	logsAndTracesInitialExpression: string;
+	eventsInitialExpression: string;
+}
+
+// Aliases for backward compatibility
+export type CustomTab<T> = K8sDetailsCustomTab<T>;
+export type CustomTabRenderProps<T> = K8sDetailsCustomTabRenderProps<T>;

frontend/src/container/InfraMonitoringK8sV2/Clusters/K8sClustersList.tsx

@@ -1,153 +0,0 @@
-import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listClusters } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesClusterRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import {
-	clusterWidgetInfo,
-	getClusterMetricsQueryPayload,
-	k8sClusterDetailsCountsConfig,
-	k8sClusterDetailsMetadataConfig,
-	k8sClusterGetCountsFilterExpression,
-	k8sClusterGetEntityName,
-	k8sClusterGetSelectedItemExpression,
-	k8sClusterInitialEventsExpression,
-	k8sClusterInitialLogTracesExpression,
-} from './constants';
-import {
-	getK8sClusterItemKey,
-	getK8sClusterRowKey,
-	k8sClustersColumnsConfig,
-} from './table.config';
-
-function K8sClustersList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listClusters(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesClusterRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesClusterRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listClusters(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesClusterRecordDTO>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.CLUSTERS}
-				tableColumns={k8sClustersColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sClusterRowKey}
-				getItemKey={getK8sClusterItemKey}
-				eventCategory={InfraMonitoringEvents.Cluster}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesClusterRecordDTO>
-				category={InfraMonitoringEntity.CLUSTERS}
-				eventCategory={InfraMonitoringEvents.Cluster}
-				getSelectedItemExpression={k8sClusterGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sClusterGetEntityName}
-				getInitialLogTracesExpression={k8sClusterInitialLogTracesExpression}
-				getInitialEventsExpression={k8sClusterInitialEventsExpression}
-				metadataConfig={k8sClusterDetailsMetadataConfig}
-				countsConfig={k8sClusterDetailsCountsConfig}
-				getCountsFilterExpression={k8sClusterGetCountsFilterExpression}
-				entityWidgetInfo={clusterWidgetInfo}
-				getEntityQueryPayload={getClusterMetricsQueryPayload}
-				queryKeyPrefix="cluster"
-			/>
-		</>
-	);
-}
-
-export default K8sClustersList;

frontend/src/container/InfraMonitoringK8sV2/Clusters/entity.config.ts

@@ -0,0 +1,138 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listClusters } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesClusterRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import {
+	clusterWidgetInfo,
+	getClusterMetricsQueryPayload,
+	k8sClusterDetailsCountsConfig,
+	k8sClusterDetailsMetadataConfig,
+	k8sClusterGetCountsFilterExpression,
+	k8sClusterGetEntityName,
+	k8sClusterGetSelectedItemExpression,
+	k8sClusterInitialEventsExpression,
+	k8sClusterInitialLogTracesExpression,
+} from './constants';
+import {
+	getK8sClusterItemKey,
+	getK8sClusterRowKey,
+	k8sClustersColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<InframonitoringtypesClusterRecordDTO>['list']['fetchListData']
+> {
+	try {
+		const response = await listClusters(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesClusterRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<InframonitoringtypesClusterRecordDTO>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listClusters(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRecordDTO> =
+	{
+		list: {
+			entity: InfraMonitoringEntity.CLUSTERS,
+			eventCategory: InfraMonitoringEvents.Cluster,
+			tableColumns: k8sClustersColumnsConfig,
+			fetchListData,
+			getRowKey: getK8sClusterRowKey,
+			getItemKey: getK8sClusterItemKey,
+			detailsQueryKeyPrefix: 'cluster',
+		},
+		details: {
+			category: InfraMonitoringEntity.CLUSTERS,
+			eventCategory: InfraMonitoringEvents.Cluster,
+			queryKeyPrefix: 'cluster',
+			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,
+			fetchEntityData,
+			getEntityName: k8sClusterGetEntityName,
+			getInitialLogTracesExpression: k8sClusterInitialLogTracesExpression,
+			getInitialEventsExpression: k8sClusterInitialEventsExpression,
+			metadataConfig: k8sClusterDetailsMetadataConfig,
+			entityWidgetInfo: clusterWidgetInfo,
+			getEntityQueryPayload: getClusterMetricsQueryPayload,
+			countsConfig: k8sClusterDetailsCountsConfig,
+			getCountsFilterExpression: k8sClusterGetCountsFilterExpression,
+		},
+	};

frontend/src/container/InfraMonitoringK8sV2/Clusters/table.config.tsx

@@ -93,13 +93,14 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 			row.nodeCountsByReadiness,
 		width: { min: 180 },
 		enableSort: false,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			if (!row.nodeCountsByReadiness) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 
 			return (
 				<GroupedStatusCounts
+					rowId={rowId}
 					items={[
 						{
 							value: row.nodeCountsByReadiness.ready,
@@ -129,13 +130,16 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts
+					rowId={rowId}
+					items={getPodStatusItems(row.podCountsByStatus)}
+				/>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/K8sDaemonSetsList.tsx

@@ -1,158 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listDaemonSets } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesDaemonSetRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	daemonSetWidgetInfo,
-	getDaemonSetMetricsQueryPayload,
-	getDaemonSetPodMetricsQueryPayload,
-	k8sDaemonSetDetailsMetadataConfig,
-	k8sDaemonSetGetEntityName,
-	k8sDaemonSetGetSelectedItemExpression,
-	k8sDaemonSetInitialEventsExpression,
-	k8sDaemonSetInitialLogTracesExpression,
-} from './constants';
-import {
-	getK8sDaemonSetItemKey,
-	getK8sDaemonSetRowKey,
-	k8sDaemonSetsColumnsConfig,
-} from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
-function K8sDaemonSetsList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listDaemonSets(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesDaemonSetRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesDaemonSetRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listDaemonSets(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesDaemonSetRecordDTO>({
-				getQueryPayload: getDaemonSetPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.DAEMONSETS,
-				queryKey: 'daemonSetPodMetrics',
-			}),
-		],
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.DAEMONSETS}
-				tableColumns={k8sDaemonSetsColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sDaemonSetRowKey}
-				getItemKey={getK8sDaemonSetItemKey}
-				eventCategory={InfraMonitoringEvents.DaemonSet}
-			/>
-			<K8sBaseDetails<InframonitoringtypesDaemonSetRecordDTO>
-				category={InfraMonitoringEntity.DAEMONSETS}
-				eventCategory={InfraMonitoringEvents.DaemonSet}
-				getSelectedItemExpression={k8sDaemonSetGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sDaemonSetGetEntityName}
-				getInitialLogTracesExpression={k8sDaemonSetInitialLogTracesExpression}
-				getInitialEventsExpression={k8sDaemonSetInitialEventsExpression}
-				metadataConfig={k8sDaemonSetDetailsMetadataConfig}
-				entityWidgetInfo={daemonSetWidgetInfo}
-				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}
-				queryKeyPrefix="daemonset"
-				customTabs={customTabs}
-			/>
-		</>
-	);
-}
-export default K8sDaemonSetsList;

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/entity.config.ts

@@ -0,0 +1,153 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listDaemonSets } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesDaemonSetRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { createPodMetricsTab } from '../EntityDetailsUtils/createPodMetricsTab';
+import { SelectedItemParams } from '../hooks';
+import {
+	daemonSetWidgetInfo,
+	getDaemonSetMetricsQueryPayload,
+	getDaemonSetPodMetricsQueryPayload,
+	k8sDaemonSetDetailsMetadataConfig,
+	k8sDaemonSetGetEntityName,
+	k8sDaemonSetGetSelectedItemExpression,
+	k8sDaemonSetInitialEventsExpression,
+	k8sDaemonSetInitialLogTracesExpression,
+} from './constants';
+import {
+	getK8sDaemonSetItemKey,
+	getK8sDaemonSetRowKey,
+	k8sDaemonSetsColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesDaemonSetRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listDaemonSets(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesDaemonSetRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesDaemonSetRecordDTO,
+		SelectedItemParams
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listDaemonSets(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const daemonSetEntityConfig: K8sEntityConfig<
+	InframonitoringtypesDaemonSetRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.DAEMONSETS,
+		eventCategory: InfraMonitoringEvents.DaemonSet,
+		tableColumns: k8sDaemonSetsColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sDaemonSetRowKey,
+		getItemKey: getK8sDaemonSetItemKey,
+		detailsQueryKeyPrefix: 'daemonset',
+	},
+	details: {
+		category: InfraMonitoringEntity.DAEMONSETS,
+		eventCategory: InfraMonitoringEvents.DaemonSet,
+		queryKeyPrefix: 'daemonset',
+		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sDaemonSetGetEntityName,
+		getInitialLogTracesExpression: k8sDaemonSetInitialLogTracesExpression,
+		getInitialEventsExpression: k8sDaemonSetInitialEventsExpression,
+		metadataConfig: k8sDaemonSetDetailsMetadataConfig,
+		entityWidgetInfo: daemonSetWidgetInfo,
+		getEntityQueryPayload: getDaemonSetMetricsQueryPayload,
+		customTabs: [
+			createPodMetricsTab<InframonitoringtypesDaemonSetRecordDTO>({
+				getQueryPayload: getDaemonSetPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.DAEMONSETS,
+				queryKey: 'daemonSetPodMetrics',
+				docBasePath: '/infrastructure-monitoring/kubernetes/daemonsets/',
+			}),
+		],
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/table.config.tsx

@@ -121,12 +121,17 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+			return (
+				<GroupedStatusCounts
+					rowId={rowId}
+					items={getPodStatusItems(podCountsByStatus)}
+				/>
+			);
 		},
 	},
 	{
@@ -140,8 +145,9 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 210 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ row }): React.ReactNode => (
+		cell: ({ row, rowId }): React.ReactNode => (
 			<GroupedStatusCounts
+				rowId={rowId}
 				items={[
 					{
 						value: row.readyNodes,

frontend/src/container/InfraMonitoringK8sV2/Deployments/K8sDeploymentsList.tsx

@@ -1,164 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listDeployments } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesDeploymentRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	deploymentWidgetInfo,
-	getDeploymentMetricsQueryPayload,
-	getDeploymentPodMetricsQueryPayload,
-	k8sDeploymentDetailsMetadataConfig,
-	k8sDeploymentGetEntityName,
-	k8sDeploymentGetSelectedItemExpression,
-	k8sDeploymentInitialEventsExpression,
-	k8sDeploymentInitialLogTracesExpression,
-} from './constants';
-import {
-	getK8sDeploymentItemKey,
-	getK8sDeploymentRowKey,
-	k8sDeploymentsColumnsConfig,
-} from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
-function K8sDeploymentsList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listDeployments(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesDeploymentRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesDeploymentRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listDeployments(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesDeploymentRecordDTO>({
-				getQueryPayload: getDeploymentPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.DEPLOYMENTS,
-				queryKey: 'deploymentPodMetrics',
-			}),
-		],
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.DEPLOYMENTS}
-				tableColumns={k8sDeploymentsColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sDeploymentRowKey}
-				getItemKey={getK8sDeploymentItemKey}
-				eventCategory={InfraMonitoringEvents.Deployment}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesDeploymentRecordDTO>
-				category={InfraMonitoringEntity.DEPLOYMENTS}
-				eventCategory={InfraMonitoringEvents.Deployment}
-				getSelectedItemExpression={k8sDeploymentGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sDeploymentGetEntityName}
-				getInitialLogTracesExpression={k8sDeploymentInitialLogTracesExpression}
-				getInitialEventsExpression={k8sDeploymentInitialEventsExpression}
-				metadataConfig={k8sDeploymentDetailsMetadataConfig}
-				entityWidgetInfo={deploymentWidgetInfo}
-				getEntityQueryPayload={getDeploymentMetricsQueryPayload}
-				queryKeyPrefix="deployment"
-				customTabs={customTabs}
-			/>
-		</>
-	);
-}
-
-export default K8sDeploymentsList;

frontend/src/container/InfraMonitoringK8sV2/Deployments/entity.config.ts

@@ -0,0 +1,161 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listDeployments } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesDeploymentRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import {
+	K8sBaseFilters,
+	K8sDetailsCustomTab,
+	K8sDetailsFilters,
+} from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { createPodMetricsTab } from '../EntityDetailsUtils/createPodMetricsTab';
+import { SelectedItemParams } from '../hooks';
+import {
+	deploymentWidgetInfo,
+	getDeploymentMetricsQueryPayload,
+	getDeploymentPodMetricsQueryPayload,
+	k8sDeploymentDetailsMetadataConfig,
+	k8sDeploymentGetEntityName,
+	k8sDeploymentGetSelectedItemExpression,
+	k8sDeploymentInitialEventsExpression,
+	k8sDeploymentInitialLogTracesExpression,
+} from './constants';
+import {
+	getK8sDeploymentItemKey,
+	getK8sDeploymentRowKey,
+	k8sDeploymentsColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesDeploymentRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listDeployments(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesDeploymentRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesDeploymentRecordDTO,
+		SelectedItemParams
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listDeployments(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export function createCustomTabs(): K8sDetailsCustomTab<InframonitoringtypesDeploymentRecordDTO>[] {
+	return [
+		createPodMetricsTab<InframonitoringtypesDeploymentRecordDTO>({
+			getQueryPayload: getDeploymentPodMetricsQueryPayload,
+			category: InfraMonitoringEntity.DEPLOYMENTS,
+			queryKey: 'deploymentPodMetrics',
+			docBasePath: '/infrastructure-monitoring/kubernetes/deployments/',
+		}),
+	];
+}
+
+export const deploymentEntityConfig: K8sEntityConfig<
+	InframonitoringtypesDeploymentRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.DEPLOYMENTS,
+		eventCategory: InfraMonitoringEvents.Deployment,
+		tableColumns: k8sDeploymentsColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sDeploymentRowKey,
+		getItemKey: getK8sDeploymentItemKey,
+		detailsQueryKeyPrefix: 'deployment',
+	},
+	details: {
+		category: InfraMonitoringEntity.DEPLOYMENTS,
+		eventCategory: InfraMonitoringEvents.Deployment,
+		queryKeyPrefix: 'deployment',
+		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sDeploymentGetEntityName,
+		getInitialLogTracesExpression: k8sDeploymentInitialLogTracesExpression,
+		getInitialEventsExpression: k8sDeploymentInitialEventsExpression,
+		metadataConfig: k8sDeploymentDetailsMetadataConfig,
+		entityWidgetInfo: deploymentWidgetInfo,
+		getEntityQueryPayload: getDeploymentMetricsQueryPayload,
+		customTabs: createCustomTabs(),
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/Deployments/table.config.tsx

@@ -118,12 +118,17 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
-			cell: ({ row }): React.ReactNode => {
+			cell: ({ row, rowId }): React.ReactNode => {
 				const podCountsByStatus = row.podCountsByStatus;
 				if (!podCountsByStatus) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+				return (
+					<GroupedStatusCounts
+						rowId={rowId}
+						items={getPodStatusItems(podCountsByStatus)}
+					/>
+				);
 			},
 		},
 		{
@@ -137,8 +142,9 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			width: { min: 180 },
 			enableSort: false,
 			enableResize: true,
-			cell: ({ row }): React.ReactNode => (
+			cell: ({ row, rowId }): React.ReactNode => (
 				<GroupedStatusCounts
+					rowId={rowId}
 					items={[
 						{
 							value: row.availablePods,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/EntityDateTimeSelector.tsx

@@ -0,0 +1,78 @@
+import { useCallback } from 'react';
+import { Undo } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { InfraMonitoringEvents } from 'constants/events';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+
+import { useEntityDetailsTime } from './useEntityDetailsTime';
+
+interface EntityDateTimeSelectorProps {
+	eventEntity: string;
+	category: InfraMonitoringEntity;
+	view: string;
+}
+
+function EntityDateTimeSelector({
+	eventEntity,
+	category,
+	view,
+}: EntityDateTimeSelectorProps): JSX.Element {
+	const {
+		timeRange,
+		selectedInterval,
+		handleTimeChange,
+		handleResetToParentTime,
+		hasTimeChanged,
+	} = useEntityDetailsTime();
+
+	const onTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			void logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: eventEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category,
+				view,
+				interval,
+			});
+			handleTimeChange(interval, dateTimeRange);
+		},
+		[category, view, eventEntity, handleTimeChange],
+	);
+
+	return (
+		<div className="entity-date-time-selector">
+			{hasTimeChanged && (
+				<TooltipSimple title="Reset to list time" side="bottom">
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={handleResetToParentTime}
+						data-testid="reset-to-list-time-button"
+						prefix={<Undo size={14} />}
+					>
+						Reset
+					</Button>
+				</TooltipSimple>
+			)}
+			<DateTimeSelectionV2
+				showAutoRefresh
+				showRefreshText={false}
+				hideShareModal
+				isModalTimeSelection
+				onTimeChange={onTimeChange}
+				modalSelectedInterval={selectedInterval}
+				modalInitialStartTime={timeRange.startTime * 1000}
+				modalInitialEndTime={timeRange.endTime * 1000}
+			/>
+		</div>
+	);
+}
+
+export default EntityDateTimeSelector;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/useEntityDetailsTime.ts

@@ -0,0 +1,95 @@
+import { useCallback, useMemo } from 'react';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import {
+	createCustomTimeRange,
+	isCustomTimeRange,
+	NANO_SECOND_MULTIPLIER,
+	useGlobalTime,
+} from 'store/globalTime';
+
+export interface EntityDetailsTimeRange {
+	/** Unix timestamp in seconds — the unit API payload builders expect. Multiply by 1000 for ms-based UI (modals, URL params). */
+	startTime: number;
+	/** Unix timestamp in seconds — the unit API payload builders expect. Multiply by 1000 for ms-based UI (modals, URL params). */
+	endTime: number;
+}
+
+export interface UseEntityDetailsTimeResult {
+	/** Time range in seconds */
+	timeRange: EntityDetailsTimeRange;
+	selectedInterval: Time;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleResetToParentTime: () => boolean;
+	canResetToParent: boolean;
+	hasTimeChanged: boolean;
+}
+
+export function useEntityDetailsTime(): UseEntityDetailsTimeResult {
+	const selectedTime = useGlobalTime((s) => s.selectedTime);
+	const lastComputedMinMax = useGlobalTime((s) => s.lastComputedMinMax);
+	const setSelectedTime = useGlobalTime((s) => s.setSelectedTime);
+	const handleResetToParentTime = useGlobalTime((s) => s.resetToParentTime);
+	const parentStore = useGlobalTime((s) => s.parentStore);
+
+	const canResetToParent = !!parentStore;
+
+	const hasTimeChanged = useMemo(() => {
+		if (!parentStore) {
+			return false;
+		}
+		return selectedTime !== parentStore.getState().selectedTime;
+	}, [parentStore, selectedTime]);
+
+	const timeRange = useMemo<EntityDetailsTimeRange>(
+		() => ({
+			startTime: Math.floor(
+				lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER / 1000,
+			),
+			endTime: Math.floor(
+				lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER / 1000,
+			),
+		}),
+		[lastComputedMinMax],
+	);
+
+	const selectedInterval = useMemo<Time>(
+		() =>
+			isCustomTimeRange(selectedTime)
+				? ('custom' as Time)
+				: (selectedTime as Time),
+		[selectedTime],
+	);
+
+	const handleTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			if (interval === 'custom' && dateTimeRange) {
+				// DateTimeSelector delivers milliseconds; the store keys custom
+				// ranges by nanoseconds.
+				setSelectedTime(
+					createCustomTimeRange(
+						dateTimeRange[0] * NANO_SECOND_MULTIPLIER,
+						dateTimeRange[1] * NANO_SECOND_MULTIPLIER,
+					),
+				);
+			} else {
+				setSelectedTime(interval as Time);
+			}
+		},
+		[setSelectedTime],
+	);
+
+	return {
+		timeRange,
+		selectedInterval,
+		handleTimeChange,
+		handleResetToParentTime,
+		canResetToParent,
+		hasTimeChanged,
+	};
+}

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

@@ -21,17 +21,14 @@ import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { useQueryState } from 'nuqs';
 import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import { validateQuery } from 'utils/queryValidationUtils';
 
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
 import { EventContents } from './EventsContent';
@@ -53,16 +50,7 @@ interface EventDataType {
 }
 
 interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
@@ -77,13 +65,11 @@ const handleExpandRow = (record: EventDataType): JSX.Element => (
 );
 
 function EntityEventsContent({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	selectedInterval,
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
+	const { timeRange } = useEntityDetailsTime();
 	const expression = useExpression();
 	const inputExpression = useInputExpression();
 	const userExpression = useUserExpression();
@@ -131,8 +117,8 @@ function EntityEventsContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression || '');
 
-				logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: InfraMonitoringEvents.K8sEntity,
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: eventEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
 					view: InfraMonitoringEvents.EventsView,
@@ -141,7 +127,14 @@ function EntityEventsContent({
 				refetch();
 			}
 		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
+		[
+			inputExpression,
+			initialExpression,
+			refetch,
+			querySearchOnRun,
+			category,
+			eventEntity,
+		],
 	);
 
 	const queryData = useMemo(
@@ -229,16 +222,10 @@ function EntityEventsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.EventsView}
 					/>
 
 					<RunQueryBtn

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

@@ -29,25 +29,25 @@ function verifyEntityEventsV5Request({
 	expect(orderKeys).toContain('timestamp');
 }
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
 	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
 	),
 }));
 
+jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
+	useEntityDetailsTime: (): {
+		timeRange: { startTime: number; endTime: number };
+		selectedInterval: string;
+		handleTimeChange: jest.Mock;
+	} => ({
+		timeRange: { startTime: 1, endTime: 2 },
+		selectedInterval: '5m',
+		handleTimeChange: jest.fn(),
+	}),
+}));
+
 describe('EntityEvents', () => {
 	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
 
@@ -69,10 +69,7 @@ describe('EntityEvents', () => {
 					searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
 				>
 					<EntityEvents
-						timeRange={{ startTime: 1, endTime: 2 }}
-						isModalTimeSelection={false}
-						handleTimeChange={jest.fn()}
-						selectedInterval="5m"
+						eventEntity="test"
 						queryKey="test"
 						category={InfraMonitoringEntity.PODS}
 						initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.timeRange.test.tsx

@@ -0,0 +1,81 @@
+import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
+import { mockQueryRangeV5WithEventsResponse } from '__tests__/query_range_v5.util';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import {
+	createCustomTimeRange,
+	createGlobalTimeStore,
+	GlobalTimeContext,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime';
+import { act, render, waitFor } from 'tests/test-utils';
+import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
+
+import EntityEvents from '../EntityEvents';
+import { K8S_ENTITY_EVENTS_EXPRESSION_KEY } from '../hooks';
+
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
+	),
+}));
+
+const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
+const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
+
+describe('EntityEvents time range wiring', () => {
+	let capturedPayloads: QueryRangePayloadV5[] = [];
+
+	beforeEach(() => {
+		capturedPayloads = [];
+		mockQueryRangeV5WithEventsResponse({
+			onReceiveRequest: async (req) => {
+				const body = (await req.json()) as QueryRangePayloadV5;
+				capturedPayloads.push(body);
+				return {};
+			},
+		});
+		mockFieldsAPIsWithEmptyResponse();
+	});
+
+	it('should query the V5 API with the global time range converted to milliseconds', async () => {
+		const store = createGlobalTimeStore();
+		store
+			.getState()
+			.setSelectedTime(
+				createCustomTimeRange(
+					START_MS * NANO_SECOND_MULTIPLIER,
+					END_MS * NANO_SECOND_MULTIPLIER,
+				),
+			);
+
+		const expression = 'k8s.pod.name = "test-pod"';
+
+		act(() => {
+			render(
+				<GlobalTimeContext.Provider value={store}>
+					<NuqsTestingAdapter
+						searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=${encodeURIComponent(
+							expression,
+						)}`}
+					>
+						<EntityEvents
+							eventEntity="test"
+							queryKey="test"
+							category={InfraMonitoringEntity.PODS}
+							initialExpression={expression}
+						/>
+					</NuqsTestingAdapter>
+				</GlobalTimeContext.Provider>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(capturedPayloads).toHaveLength(1);
+		});
+
+		expect(capturedPayloads[0].start).toBe(START_MS);
+		expect(capturedPayloads[0].end).toBe(END_MS);
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -25,11 +25,6 @@ import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants'
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
 import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
@@ -38,6 +33,8 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource } from 'types/common/queryBuilder';
 import { validateQuery } from 'utils/queryValidationUtils';
 
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
 import { isKeyNotFoundError } from '../utils';
@@ -47,29 +44,18 @@ import { getEntityLogsQueryPayload } from './utils';
 import styles from './EntityLogs.module.scss';
 
 interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityLogsContent({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	selectedInterval,
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
+	const { timeRange } = useEntityDetailsTime();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
 
 	const expression = useExpression();
@@ -134,7 +120,7 @@ function EntityLogsContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression);
 
-				logEvent(InfraMonitoringEvents.FilterApplied, {
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
 					entity: InfraMonitoringEvents.K8sEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
@@ -239,16 +225,10 @@ function EntityLogsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.LogsView}
 					/>
 
 					<RunQueryBtn

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.test.tsx

@@ -50,25 +50,25 @@ jest.mock(
 		},
 );
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
 	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
 	),
 }));
 
+jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
+	useEntityDetailsTime: (): {
+		timeRange: { startTime: number; endTime: number };
+		selectedInterval: string;
+		handleTimeChange: jest.Mock;
+	} => ({
+		timeRange: { startTime: 1, endTime: 2 },
+		selectedInterval: '5m',
+		handleTimeChange: jest.fn(),
+	}),
+}));
+
 describe('EntityLogs', () => {
 	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
 	const itemHeight = 100;
@@ -94,10 +94,7 @@ describe('EntityLogs', () => {
 				>
 					<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
 						<EntityLogs
-							timeRange={{ startTime: 1, endTime: 2 }}
-							isModalTimeSelection={false}
-							handleTimeChange={jest.fn()}
-							selectedInterval="5m"
+							eventEntity="test"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.timeRange.test.tsx

@@ -0,0 +1,93 @@
+import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
+import { mockQueryRangeV5WithLogsResponse } from '__tests__/query_range_v5.util';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import {
+	createCustomTimeRange,
+	createGlobalTimeStore,
+	GlobalTimeContext,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime';
+import { act, render, waitFor } from 'tests/test-utils';
+import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
+
+import EntityLogs from '../EntityLogs';
+import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../hooks';
+
+jest.mock(
+	'components/OverlayScrollbar/OverlayScrollbar',
+	() =>
+		function MockOverlayScrollbar({
+			children,
+		}: {
+			children: React.ReactNode;
+		}): JSX.Element {
+			return <div>{children}</div>;
+		},
+);
+
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
+	),
+}));
+
+const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
+const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
+
+describe('EntityLogs time range wiring', () => {
+	let capturedPayloads: QueryRangePayloadV5[] = [];
+
+	beforeEach(() => {
+		capturedPayloads = [];
+		mockQueryRangeV5WithLogsResponse({
+			onReceiveRequest: async (req) => {
+				const body = (await req.json()) as QueryRangePayloadV5;
+				capturedPayloads.push(body);
+				return {};
+			},
+		});
+		mockFieldsAPIsWithEmptyResponse();
+	});
+
+	it('should query the V5 API with the global time range converted to milliseconds', async () => {
+		const store = createGlobalTimeStore();
+		store
+			.getState()
+			.setSelectedTime(
+				createCustomTimeRange(
+					START_MS * NANO_SECOND_MULTIPLIER,
+					END_MS * NANO_SECOND_MULTIPLIER,
+				),
+			);
+
+		const expression = 'k8s.pod.name = "test-pod"';
+
+		act(() => {
+			render(
+				<GlobalTimeContext.Provider value={store}>
+					<NuqsTestingAdapter
+						searchParams={`${K8S_ENTITY_LOGS_EXPRESSION_KEY}=${encodeURIComponent(
+							expression,
+						)}`}
+					>
+						<EntityLogs
+							eventEntity="test"
+							queryKey="test"
+							category={InfraMonitoringEntity.PODS}
+							initialExpression={expression}
+						/>
+					</NuqsTestingAdapter>
+				</GlobalTimeContext.Provider>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(capturedPayloads.length).toBeGreaterThanOrEqual(1);
+		});
+
+		expect(capturedPayloads[0].start).toBe(START_MS);
+		expect(capturedPayloads[0].end).toBe(END_MS);
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -2,15 +2,11 @@ import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
+import { InfraMonitoringEvents } from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -24,25 +20,17 @@ import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 import { buildEntityMetricsChartConfig } from './configBuilder';
 import ChartHeader from './ChartHeader';
 
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
 
 import styles from './EntityMetrics.module.scss';
 import { MetricsTable } from './MetricsTable';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 
 interface EntityMetricsProps<T> {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
 	entity: T;
+	eventEntity: string;
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
@@ -59,16 +47,16 @@ interface EntityMetricsProps<T> {
 }
 
 function EntityMetrics<T>({
-	selectedInterval,
 	entity,
-	timeRange,
-	handleTimeChange,
-	isModalTimeSelection,
+	eventEntity,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKey,
 	category,
 }: EntityMetricsProps<T>): JSX.Element {
+	const { timeRange, selectedInterval, handleTimeChange } =
+		useEntityDetailsTime();
+
 	const { visibilities, setElement } = useMultiIntersectionObserver(
 		entityWidgetInfo.length,
 		{ threshold: 0.1 },
@@ -91,10 +79,8 @@ function EntityMetrics<T>({
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			handleTimeChange('custom', [startTimestamp, endTimestamp]);
+			// UPlotConfigBuilder's setSelect hook already delivers milliseconds
+			handleTimeChange('custom', [Math.trunc(start), Math.trunc(end)]);
 		},
 		[handleTimeChange],
 	);
@@ -188,16 +174,10 @@ function EntityMetrics<T>({
 	return (
 		<>
 			<div className={styles.metricsHeader}>
-				<DateTimeSelectionV2
-					showAutoRefresh
-					showRefreshText={false}
-					hideShareModal
-					onTimeChange={handleTimeChange}
-					defaultRelativeTime={DEFAULT_TIME_RANGE}
-					isModalTimeSelection={isModalTimeSelection}
-					modalSelectedInterval={selectedInterval}
-					modalInitialStartTime={timeRange.startTime * 1000}
-					modalInitialEndTime={timeRange.endTime * 1000}
+				<EntityDateTimeSelector
+					eventEntity={eventEntity}
+					category={category}
+					view={InfraMonitoringEvents.MetricsView}
 				/>
 			</div>
 			<div className={styles.entityMetricsContainer}>

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

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import * as appContextHooks from 'providers/App/App';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
 import uPlot from 'uplot';
@@ -28,13 +27,28 @@ jest.mock('lib/uPlotV2/utils/dataUtils', () => ({
 	hasSingleVisiblePoint: jest.fn().mockReturnValue(false),
 }));
 
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
 	__esModule: true,
 	default: (): JSX.Element => (
 		<div data-testid="date-time-selection">Date Time</div>
 	),
 }));
 
+const mockTimeRange = { startTime: 1705315200, endTime: 1705318800 };
+let mockSelectedInterval = '5m';
+
+jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
+	useEntityDetailsTime: (): {
+		timeRange: { startTime: number; endTime: number };
+		selectedInterval: string;
+		handleTimeChange: jest.Mock;
+	} => ({
+		timeRange: mockTimeRange,
+		selectedInterval: mockSelectedInterval,
+		handleTimeChange: jest.fn(),
+	}),
+}));
+
 jest.mock(
 	'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries',
 	() => ({
@@ -144,13 +158,6 @@ const mockGetEntityQueryPayload = jest.fn().mockReturnValue([
 	},
 ]);
 
-const mockTimeRange = {
-	startTime: 1705315200,
-	endTime: 1705318800,
-};
-
-const mockHandleTimeChange = jest.fn();
-
 const mockQueries = [
 	{
 		data: {
@@ -283,10 +290,6 @@ const mockEmptyQueries = [
 
 const renderEntityMetrics = (overrides = {}): any => {
 	const defaultProps = {
-		timeRange: mockTimeRange,
-		isModalTimeSelection: false,
-		handleTimeChange: mockHandleTimeChange,
-		selectedInterval: '5m' as Time,
 		entity: mockEntity,
 		entityWidgetInfo: mockEntityWidgetInfo,
 		getEntityQueryPayload: mockGetEntityQueryPayload,
@@ -298,11 +301,8 @@ const renderEntityMetrics = (overrides = {}): any => {
 	return render(
 		<MemoryRouter>
 			<EntityMetrics
-				timeRange={defaultProps.timeRange}
-				isModalTimeSelection={defaultProps.isModalTimeSelection}
-				handleTimeChange={defaultProps.handleTimeChange}
-				selectedInterval={defaultProps.selectedInterval}
 				entity={defaultProps.entity}
+				eventEntity="test"
 				entityWidgetInfo={defaultProps.entityWidgetInfo}
 				getEntityQueryPayload={defaultProps.getEntityQueryPayload}
 				queryKey={defaultProps.queryKey}
@@ -344,6 +344,7 @@ const mockQueryPayloads = [
 describe('EntityMetrics', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		mockSelectedInterval = '5m';
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockQueries as any,
 			chartData: mockChartData,
@@ -454,7 +455,8 @@ describe('EntityMetrics', () => {
 	});
 
 	it('builds metrics explorer link with relativeTime when a relative interval is selected', () => {
-		renderEntityMetrics({ selectedInterval: '5m' as Time });
+		mockSelectedInterval = '5m';
+		renderEntityMetrics();
 		const href = screen
 			.getByTestId('open-metrics-explorer-0')
 			.getAttribute('href');
@@ -464,7 +466,8 @@ describe('EntityMetrics', () => {
 	});
 
 	it('builds metrics explorer link with absolute time range in milliseconds for custom interval', () => {
-		renderEntityMetrics({ selectedInterval: 'custom' as Time });
+		mockSelectedInterval = 'custom';
+		renderEntityMetrics();
 		const href = screen
 			.getByTestId('open-metrics-explorer-0')
 			.getAttribute('href');
@@ -478,7 +481,6 @@ describe('EntityMetrics', () => {
 		expect(mockUseEntityMetrics).toHaveBeenCalledWith(
 			expect.objectContaining({
 				queryKey: 'test-query-key',
-				timeRange: mockTimeRange,
 				entity: mockEntity,
 				category: InfraMonitoringEntity.PODS,
 			}),

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.timeRange.test.tsx

@@ -0,0 +1,119 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	createCustomTimeRange,
+	createGlobalTimeStore,
+	GlobalTimeContext,
+	GlobalTimeStoreApi,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime';
+import { act, render } from 'tests/test-utils';
+
+import { buildEntityMetricsChartConfig } from '../configBuilder';
+import EntityMetrics from '../EntityMetrics';
+
+jest.mock('../configBuilder', () => ({
+	buildEntityMetricsChartConfig: jest.fn().mockReturnValue({
+		getId: jest.fn().mockReturnValue('mock-id'),
+	}),
+}));
+
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+
+const mockBuildChartConfig = buildEntityMetricsChartConfig as jest.Mock;
+
+const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
+const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
+const START_SECONDS = 1705315200;
+const END_SECONDS = 1705318800;
+
+const entity = { id: 'test-entity-1' };
+
+// The jsdom IntersectionObserver polyfill never reports visibility, so the
+// queries stay disabled and no network request is issued.
+const queryPayload = {
+	graphType: PANEL_TYPES.TIME_SERIES,
+} as unknown as GetQueryResultsProps;
+
+function createStoreWithCustomRange(): GlobalTimeStoreApi {
+	const store = createGlobalTimeStore();
+	store
+		.getState()
+		.setSelectedTime(
+			createCustomTimeRange(
+				START_MS * NANO_SECOND_MULTIPLIER,
+				END_MS * NANO_SECOND_MULTIPLIER,
+			),
+		);
+	return store;
+}
+
+function renderEntityMetrics(store: GlobalTimeStoreApi): jest.Mock {
+	const getEntityQueryPayload = jest.fn().mockReturnValue([queryPayload]);
+	render(
+		<GlobalTimeContext.Provider value={store}>
+			<EntityMetrics
+				entity={entity}
+				eventEntity="test"
+				entityWidgetInfo={[{ title: 'CPU Usage', yAxisUnit: 'percentage' }]}
+				getEntityQueryPayload={getEntityQueryPayload}
+				queryKey="test-query-key"
+				category={InfraMonitoringEntity.PODS}
+			/>
+		</GlobalTimeContext.Provider>,
+	);
+	return getEntityQueryPayload;
+}
+
+describe('EntityMetrics time range wiring', () => {
+	beforeEach(() => {
+		mockBuildChartConfig.mockClear();
+	});
+
+	it('should build the metrics query payloads and chart config from the global time range in seconds', () => {
+		const store = createStoreWithCustomRange();
+
+		const getEntityQueryPayload = renderEntityMetrics(store);
+
+		expect(getEntityQueryPayload).toHaveBeenCalledWith(
+			entity,
+			START_SECONDS,
+			END_SECONDS,
+			false,
+		);
+		expect(mockBuildChartConfig).toHaveBeenCalledWith(
+			expect.objectContaining({
+				minTimeScale: START_SECONDS,
+				maxTimeScale: END_SECONDS,
+			}),
+		);
+	});
+
+	it('should store a drag selection (received in milliseconds) as the equivalent custom range', () => {
+		const store = createStoreWithCustomRange();
+
+		renderEntityMetrics(store);
+
+		const { onDragSelect } = mockBuildChartConfig.mock.calls[0][0];
+
+		// UPlotConfigBuilder's setSelect hook calls onDragSelect with milliseconds
+		const dragStartMs = 1705316000000;
+		const dragEndMs = 1705317000000;
+		act(() => {
+			onDragSelect(dragStartMs, dragEndMs);
+		});
+
+		expect(store.getState().selectedTime).toBe(
+			createCustomTimeRange(
+				dragStartMs * NANO_SECOND_MULTIPLIER,
+				dragEndMs * NANO_SECOND_MULTIPLIER,
+			),
+		);
+	});
+});

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

@@ -20,11 +20,6 @@ import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
 import { useQueryState } from 'nuqs';
@@ -32,10 +27,11 @@ import { DataSource } from 'types/common/queryBuilder';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import { validateQuery } from 'utils/queryValidationUtils';
 
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
 import EntityError from '../EntityError/EntityError';
-import { selectedEntityTracesColumns } from '../utils';
-import { isKeyNotFoundError } from '../utils';
+import { isKeyNotFoundError, selectedEntityTracesColumns } from '../utils';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY, useEntityTraces } from './hooks';
 import { getTraceListColumns } from './traceListColumns';
 import { getEntityTracesQueryPayload } from './utils';
@@ -44,29 +40,18 @@ import styles from './EntityTraces.module.scss';
 import { useTimezone } from 'providers/Timezone';
 
 interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityTracesContent({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	selectedInterval,
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
+	const { timeRange } = useEntityDetailsTime();
 	const expression = useExpression();
 	const inputExpression = useInputExpression();
 	const userExpression = useUserExpression();
@@ -114,8 +99,8 @@ function EntityTracesContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression || '');
 
-				logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: InfraMonitoringEvents.K8sEntity,
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: eventEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
 					view: InfraMonitoringEvents.TracesView,
@@ -124,7 +109,14 @@ function EntityTracesContent({
 				refetch();
 			}
 		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
+		[
+			inputExpression,
+			initialExpression,
+			refetch,
+			querySearchOnRun,
+			category,
+			eventEntity,
+		],
 	);
 
 	const queryData = useMemo(
@@ -152,7 +144,7 @@ function EntityTracesContent({
 	const hasAdditionalFilters = !!userExpression?.trim();
 
 	const handleRowClick = useCallback(() => {
-		logEvent(InfraMonitoringEvents.ItemClicked, {
+		void logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.K8sEntity,
 			category,
 			view: InfraMonitoringEvents.TracesView,
@@ -169,16 +161,10 @@ function EntityTracesContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.TracesView}
 					/>
 
 					<RunQueryBtn

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.default.test.tsx

@@ -34,10 +34,8 @@ describe('EntityTraces - Default Behavior', () => {
 	});
 
 	it('should pass time range to API (converted to milliseconds)', async () => {
-		const timeRange = { startTime: 1000, endTime: 2000 };
-
 		act(() => {
-			renderEntityTraces({ timeRange });
+			renderEntityTraces();
 		});
 
 		await waitFor(() => {
@@ -47,8 +45,8 @@ describe('EntityTraces - Default Behavior', () => {
 		verifyQueryPayload({
 			payload: capturedPayloads[0],
 			expectedTimeRange: {
-				start: timeRange.startTime * 1000,
-				end: timeRange.endTime * 1000,
+				start: 1 * 1000,
+				end: 2 * 1000,
 			},
 		});
 	});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.timeRange.test.tsx

@@ -0,0 +1,81 @@
+import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
+import { mockQueryRangeV5WithTracesResponse } from '__tests__/query_range_v5.util';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import {
+	createCustomTimeRange,
+	createGlobalTimeStore,
+	GlobalTimeContext,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime';
+import { act, render, waitFor } from 'tests/test-utils';
+import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
+
+import EntityTraces from '../EntityTraces';
+import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../hooks';
+
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
+	),
+}));
+
+const START_MS = 1705315200000; // 2024-01-15T10:40:00Z
+const END_MS = 1705318800000; // 2024-01-15T11:40:00Z
+
+describe('EntityTraces time range wiring', () => {
+	let capturedPayloads: QueryRangePayloadV5[] = [];
+
+	beforeEach(() => {
+		capturedPayloads = [];
+		mockQueryRangeV5WithTracesResponse({
+			onReceiveRequest: async (req) => {
+				const body = (await req.json()) as QueryRangePayloadV5;
+				capturedPayloads.push(body);
+				return {};
+			},
+		});
+		mockFieldsAPIsWithEmptyResponse();
+	});
+
+	it('should query the V5 API with the global time range converted to milliseconds', async () => {
+		const store = createGlobalTimeStore();
+		store
+			.getState()
+			.setSelectedTime(
+				createCustomTimeRange(
+					START_MS * NANO_SECOND_MULTIPLIER,
+					END_MS * NANO_SECOND_MULTIPLIER,
+				),
+			);
+
+		const expression = 'k8s.pod.name = "test-pod"';
+
+		act(() => {
+			render(
+				<GlobalTimeContext.Provider value={store}>
+					<NuqsTestingAdapter
+						searchParams={`${K8S_ENTITY_TRACES_EXPRESSION_KEY}=${encodeURIComponent(
+							expression,
+						)}`}
+					>
+						<EntityTraces
+							eventEntity="test"
+							queryKey="test"
+							category={InfraMonitoringEntity.PODS}
+							initialExpression={expression}
+						/>
+					</NuqsTestingAdapter>
+				</GlobalTimeContext.Provider>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(capturedPayloads).toHaveLength(1);
+		});
+
+		expect(capturedPayloads[0].start).toBe(START_MS);
+		expect(capturedPayloads[0].end).toBe(END_MS);
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/testUtils.tsx

@@ -1,7 +1,5 @@
-import { ENVIRONMENT } from 'constants/env';
+import { mockFieldsAPIsWithEmptyResponse } from '__tests__/fields_api.util';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, RenderResult } from 'tests/test-utils';
 import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
@@ -9,39 +7,19 @@ import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
 import EntityTraces from '../EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../hooks';
 
-// QuerySearch fires autocomplete requests on mount; without handlers MSW
-// passes them through to the real network and the resulting AxiosError fails
-// whichever test happens to be running.
 beforeEach(() => {
-	server.use(
-		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/values`, (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-	);
+	mockFieldsAPIsWithEmptyResponse();
 });
 
 export interface RenderEntityTracesOptions {
 	expression?: string;
-	timeRange?: { startTime: number; endTime: number };
 	category?: InfraMonitoringEntity;
-	selectedInterval?: '5m' | '15m' | '30m' | '1h';
 	pagination?: { offset: number; limit: number };
 }
 
 export function renderEntityTraces({
 	expression = 'k8s.pod.name = "test-pod"',
-	timeRange = { startTime: 1, endTime: 2 },
 	category = InfraMonitoringEntity.PODS,
-	selectedInterval = '5m',
 	pagination,
 }: RenderEntityTracesOptions = {}): RenderResult {
 	const encodedExpression = encodeURIComponent(expression);
@@ -55,10 +33,7 @@ export function renderEntityTraces({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<EntityTraces
-				timeRange={timeRange}
-				isModalTimeSelection={false}
-				handleTimeChange={jest.fn()}
-				selectedInterval={selectedInterval}
+				eventEntity="test"
 				queryKey="test"
 				category={category}
 				initialExpression={expression}
@@ -101,21 +76,21 @@ export function verifyQueryPayload({
 	expect(orderKeys).toContain('timestamp');
 }
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+jest.mock('../../EntityDateTimeSelector/EntityDateTimeSelector', () => ({
 	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
+	default: (): JSX.Element => (
+		<div data-testid="mock-datetime-selection">Date Time</div>
 	),
 }));
+
+jest.mock('../../EntityDateTimeSelector/useEntityDetailsTime', () => ({
+	useEntityDetailsTime: (): {
+		timeRange: { startTime: number; endTime: number };
+		selectedInterval: string;
+		handleTimeChange: jest.Mock;
+	} => ({
+		timeRange: { startTime: 1, endTime: 2 },
+		selectedInterval: '5m',
+		handleTimeChange: jest.fn(),
+	}),
+}));

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -1,4 +1,5 @@
 import { Container } from '@signozhq/icons';
+import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
 import { CustomTab } from '../Base/K8sBaseDetails';
@@ -10,6 +11,20 @@ import {
 
 import EntityMetrics from './EntityMetrics';
 
+const categoryToEventEntity: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.DAEMONSETS]: InfraMonitoringEvents.DaemonSet,
+	[InfraMonitoringEntity.DEPLOYMENTS]: InfraMonitoringEvents.Deployment,
+	[InfraMonitoringEntity.JOBS]: InfraMonitoringEvents.Job,
+	[InfraMonitoringEntity.NAMESPACES]: InfraMonitoringEvents.Namespace,
+	[InfraMonitoringEntity.STATEFULSETS]: InfraMonitoringEvents.StatefulSet,
+	[InfraMonitoringEntity.PODS]: InfraMonitoringEvents.Pod,
+	[InfraMonitoringEntity.NODES]: InfraMonitoringEvents.Node,
+	[InfraMonitoringEntity.CLUSTERS]: InfraMonitoringEvents.Cluster,
+	[InfraMonitoringEntity.VOLUMES]: InfraMonitoringEvents.Volume,
+	[InfraMonitoringEntity.HOSTS]: InfraMonitoringEvents.HostEntity,
+	[InfraMonitoringEntity.CONTAINERS]: 'container',
+};
+
 interface CreatePodMetricsTabParams<T> {
 	getQueryPayload: (
 		entity: T,
@@ -17,30 +32,38 @@ interface CreatePodMetricsTabParams<T> {
 		end: number,
 		dotMetricsEnabled: boolean,
 	) => GetQueryResultsProps[];
-	category: InfraMonitoringEntity;
 	queryKey: string;
+	category: InfraMonitoringEntity;
+	docBasePath?: string;
 }
 
 export function createPodMetricsTab<T>({
 	getQueryPayload,
-	category,
 	queryKey,
+	category,
+	docBasePath,
 }: CreatePodMetricsTabParams<T>): CustomTab<T> {
+	const eventEntity = categoryToEventEntity[category];
+
+	const widgetInfo = docBasePath
+		? podUtilizationByPodWidgetInfo.map((widget) => ({
+				...widget,
+				docPath: widget.docPath ? `${docBasePath}${widget.docPath}` : undefined,
+			}))
+		: podUtilizationByPodWidgetInfo;
+
 	return {
 		key: VIEW_TYPES.POD_METRICS,
 		label: 'Pod Metrics',
 		icon: <Container size={14} />,
-		render: ({ entity, timeRange, selectedInterval, handleTimeChange }) => (
+		render: ({ entity }) => (
 			<EntityMetrics
 				entity={entity}
-				selectedInterval={selectedInterval}
-				timeRange={timeRange}
-				handleTimeChange={handleTimeChange}
-				isModalTimeSelection
-				entityWidgetInfo={podUtilizationByPodWidgetInfo}
+				eventEntity={eventEntity}
+				entityWidgetInfo={widgetInfo}
 				getEntityQueryPayload={getQueryPayload}
-				category={category}
 				queryKey={queryKey}
+				category={category}
 			/>
 		),
 	};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.styles.scss

@@ -454,3 +454,9 @@
 		gap: 16px;
 	}
 }
+
+.entity-date-time-selector {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.module.scss

@@ -48,46 +48,6 @@
 	width: 280px;
 	min-width: 280px;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
-	}
-
-	:global(.quick-filters) {
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-			height: 0.1rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--accent-primary);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--accent-primary);
-		}
-	}
 }
 
 .quickFiltersContainerHeader {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -28,7 +28,7 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { FeatureKeys } from '../../constants/features';
 import { useAppContext } from '../../providers/App/App';
-import K8sClustersList from './Clusters/K8sClustersList';
+import { K8sDynamicList } from './Base/K8sDynamicList';
 import {
 	GetClustersQuickFiltersConfig,
 	GetDaemonsetsQuickFiltersConfig,
@@ -43,25 +43,18 @@ import {
 	K8sCategories,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
-import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
-import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
 import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
 	useInfraMonitoringSelectedItemParams,
 } from './hooks';
-import K8sJobsList from './Jobs/K8sJobsList';
-import K8sNamespacesList from './Namespaces/K8sNamespacesList';
-import K8sNodesList from './Nodes/K8sNodesList';
-import K8sPodLists from './Pods/K8sPodLists';
-import K8sStatefulSetsList from './StatefulSets/K8sStatefulSetsList';
-import K8sVolumesList from './Volumes/K8sVolumesList';
 
 import styles from './InfraMonitoringK8s.module.scss';
 import { InfraMonitoringEvents } from 'constants/events';
 import logEvent from 'api/common/logEvent';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -252,58 +245,62 @@ export default function InfraMonitoringK8s(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.categorySelectorSection}>
-								<div className={styles.sectionHeader} data-type="resource">
-									<Typography.Text className={styles.sectionLabel}>
-										Viewing · Resource
-									</Typography.Text>
-									<div className={styles.sectionLine} />
-									<Tooltip title="Collapse Filters">
-										<ArrowUpToLine
-											style={{ transform: 'rotate(270deg)' }}
-											onClick={handleFilterVisibilityChange}
-											size="md"
-										/>
-									</Tooltip>
-								</div>
-								<div className={styles.categoryCard}>
-									<div className={styles.categoryList}>
-										{categories.map((category) => (
-											<button
-												key={category.key}
-												type="button"
-												className={`${styles.categoryItem} ${
-													selectedCategory === category.key
-														? styles.categoryItemSelected
-														: ''
-												}`}
-												onClick={(): void => handleCategorySelect(category.key)}
-												data-testid={`category-${category.key}`}
-											>
-												{category.icon}
-												<Typography.Text>{category.label}</Typography.Text>
-											</button>
-										))}
+							<OverlayScrollbar>
+								<>
+									<div className={styles.categorySelectorSection}>
+										<div className={styles.sectionHeader} data-type="resource">
+											<Typography.Text className={styles.sectionLabel}>
+												Viewing · Resource
+											</Typography.Text>
+											<div className={styles.sectionLine} />
+											<Tooltip title="Collapse Filters">
+												<ArrowUpToLine
+													style={{ transform: 'rotate(270deg)' }}
+													onClick={handleFilterVisibilityChange}
+													size="md"
+												/>
+											</Tooltip>
+										</div>
+										<div className={styles.categoryCard}>
+											<div className={styles.categoryList}>
+												{categories.map((category) => (
+													<button
+														key={category.key}
+														type="button"
+														className={`${styles.categoryItem} ${
+															selectedCategory === category.key
+																? styles.categoryItemSelected
+																: ''
+														}`}
+														onClick={(): void => handleCategorySelect(category.key)}
+														data-testid={`category-${category.key}`}
+													>
+														{category.icon}
+														<Typography.Text>{category.label}</Typography.Text>
+													</button>
+												))}
+											</div>
+										</div>
 									</div>
-								</div>
-							</div>
 
-							<div className={styles.quickFiltersSection}>
-								<div className={styles.sectionHeader} data-type="filter">
-									<Typography.Text className={styles.sectionLabel}>
-										Filter by
-									</Typography.Text>
-									<div className={styles.sectionLine} />
-								</div>
-								{selectedCategoryConfig && (
-									<QuickFilters
-										source={QuickFiltersSource.INFRA_MONITORING}
-										config={selectedCategoryConfig}
-										handleFilterVisibilityChange={handleFilterVisibilityChange}
-										useFieldApis={selectedCategoryUseFieldApis}
-									/>
-								)}
-							</div>
+									<div className={styles.quickFiltersSection}>
+										<div className={styles.sectionHeader} data-type="filter">
+											<Typography.Text className={styles.sectionLabel}>
+												Filter by
+											</Typography.Text>
+											<div className={styles.sectionLine} />
+										</div>
+										{selectedCategoryConfig && (
+											<QuickFilters
+												source={QuickFiltersSource.INFRA_MONITORING}
+												config={selectedCategoryConfig}
+												handleFilterVisibilityChange={handleFilterVisibilityChange}
+												useFieldApis={selectedCategoryUseFieldApis}
+											/>
+										)}
+									</div>
+								</>
+							</OverlayScrollbar>
 						</div>
 					)}
 
@@ -312,41 +309,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 							showFilters ? styles.listContainerFiltersVisible : ''
 						}`}
 					>
-						{selectedCategory === K8sCategories.PODS && (
-							<K8sPodLists controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.NODES && (
-							<K8sNodesList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.CLUSTERS && (
-							<K8sClustersList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.DEPLOYMENTS && (
-							<K8sDeploymentsList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.NAMESPACES && (
-							<K8sNamespacesList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.STATEFULSETS && (
-							<K8sStatefulSetsList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.JOBS && (
-							<K8sJobsList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.DAEMONSETS && (
-							<K8sDaemonSetsList controlListPrefix={showFiltersComp} />
-						)}
-
-						{selectedCategory === K8sCategories.VOLUMES && (
-							<K8sVolumesList controlListPrefix={showFiltersComp} />
-						)}
+						<K8sDynamicList controlListPrefix={showFiltersComp} />
 					</div>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8sV2/Jobs/K8sJobsList.tsx

@@ -1,164 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listJobs } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesJobRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	getJobMetricsQueryPayload,
-	getJobPodMetricsQueryPayload,
-	jobWidgetInfo,
-	k8sJobDetailsMetadataConfig,
-	k8sJobGetEntityName,
-	k8sJobGetSelectedItemExpression,
-	k8sJobInitialEventsExpression,
-	k8sJobInitialLogTracesExpression,
-} from './constants';
-import {
-	getK8sJobItemKey,
-	getK8sJobRowKey,
-	k8sJobsColumnsConfig,
-} from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
-function K8sJobsList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listJobs(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesJobRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesJobRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listJobs(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesJobRecordDTO>({
-				getQueryPayload: getJobPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.JOBS,
-				queryKey: 'jobPodMetrics',
-			}),
-		],
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesJobRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.JOBS}
-				tableColumns={k8sJobsColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sJobRowKey}
-				getItemKey={getK8sJobItemKey}
-				eventCategory={InfraMonitoringEvents.Job}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesJobRecordDTO>
-				category={InfraMonitoringEntity.JOBS}
-				eventCategory={InfraMonitoringEvents.Job}
-				getSelectedItemExpression={k8sJobGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sJobGetEntityName}
-				getInitialLogTracesExpression={k8sJobInitialLogTracesExpression}
-				getInitialEventsExpression={k8sJobInitialEventsExpression}
-				metadataConfig={k8sJobDetailsMetadataConfig}
-				entityWidgetInfo={jobWidgetInfo}
-				getEntityQueryPayload={getJobMetricsQueryPayload}
-				queryKeyPrefix="job"
-				customTabs={customTabs}
-			/>
-		</>
-	);
-}
-
-export default K8sJobsList;

frontend/src/container/InfraMonitoringK8sV2/Jobs/entity.config.ts

@@ -0,0 +1,153 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listJobs } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesJobRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { createPodMetricsTab } from '../EntityDetailsUtils/createPodMetricsTab';
+import { SelectedItemParams } from '../hooks';
+import {
+	getJobMetricsQueryPayload,
+	getJobPodMetricsQueryPayload,
+	jobWidgetInfo,
+	k8sJobDetailsMetadataConfig,
+	k8sJobGetEntityName,
+	k8sJobGetSelectedItemExpression,
+	k8sJobInitialEventsExpression,
+	k8sJobInitialLogTracesExpression,
+} from './constants';
+import {
+	getK8sJobItemKey,
+	getK8sJobRowKey,
+	k8sJobsColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesJobRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listJobs(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesJobRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesJobRecordDTO,
+		SelectedItemParams
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listJobs(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const jobEntityConfig: K8sEntityConfig<
+	InframonitoringtypesJobRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.JOBS,
+		eventCategory: InfraMonitoringEvents.Job,
+		tableColumns: k8sJobsColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sJobRowKey,
+		getItemKey: getK8sJobItemKey,
+		detailsQueryKeyPrefix: 'job',
+	},
+	details: {
+		category: InfraMonitoringEntity.JOBS,
+		eventCategory: InfraMonitoringEvents.Job,
+		queryKeyPrefix: 'job',
+		getSelectedItemExpression: k8sJobGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sJobGetEntityName,
+		getInitialLogTracesExpression: k8sJobInitialLogTracesExpression,
+		getInitialEventsExpression: k8sJobInitialEventsExpression,
+		metadataConfig: k8sJobDetailsMetadataConfig,
+		entityWidgetInfo: jobWidgetInfo,
+		getEntityQueryPayload: getJobMetricsQueryPayload,
+		customTabs: [
+			createPodMetricsTab<InframonitoringtypesJobRecordDTO>({
+				getQueryPayload: getJobPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.JOBS,
+				queryKey: 'jobPodMetrics',
+				docBasePath: '/infrastructure-monitoring/kubernetes/jobs/',
+			}),
+		],
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/Jobs/table.config.tsx

@@ -113,12 +113,17 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+			return (
+				<GroupedStatusCounts
+					items={getPodStatusItems(podCountsByStatus)}
+					rowId={rowId}
+				/>
+			);
 		},
 	},
 	{
@@ -132,7 +137,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 210 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ row }): React.ReactNode => (
+		cell: ({ row, rowId }): React.ReactNode => (
 			<GroupedStatusCounts
 				items={[
 					{ value: row.activePods, label: 'Active', color: Color.BG_ROBIN_500 },
@@ -148,6 +153,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 						color: Color.BG_AMBER_500,
 					},
 				]}
+				rowId={rowId}
 			/>
 		),
 	},

frontend/src/container/InfraMonitoringK8sV2/Namespaces/K8sNamespacesList.tsx

@@ -1,168 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listNamespaces } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesNamespaceRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	getNamespaceMetricsQueryPayload,
-	getNamespacePodMetricsQueryPayload,
-	k8sNamespaceDetailsCountsConfig,
-	k8sNamespaceDetailsMetadataConfig,
-	k8sNamespaceGetCountsFilterExpression,
-	k8sNamespaceGetEntityName,
-	k8sNamespaceGetSelectedItemExpression,
-	k8sNamespaceInitialEventsExpression,
-	k8sNamespaceInitialLogTracesExpression,
-	namespaceWidgetInfo,
-} from './constants';
-import {
-	getK8sNamespaceItemKey,
-	getK8sNamespaceRowKey,
-	k8sNamespacesColumnsConfig,
-} from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
-function K8sNamespacesList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listNamespaces(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesNamespaceRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesNamespaceRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listNamespaces(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesNamespaceRecordDTO>({
-				getQueryPayload: getNamespacePodMetricsQueryPayload,
-				category: InfraMonitoringEntity.NAMESPACES,
-				queryKey: 'namespacePodMetrics',
-			}),
-		],
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.NAMESPACES}
-				tableColumns={k8sNamespacesColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sNamespaceRowKey}
-				getItemKey={getK8sNamespaceItemKey}
-				eventCategory={InfraMonitoringEvents.Namespace}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesNamespaceRecordDTO>
-				category={InfraMonitoringEntity.NAMESPACES}
-				eventCategory={InfraMonitoringEvents.Namespace}
-				getSelectedItemExpression={k8sNamespaceGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sNamespaceGetEntityName}
-				getInitialLogTracesExpression={k8sNamespaceInitialLogTracesExpression}
-				getInitialEventsExpression={k8sNamespaceInitialEventsExpression}
-				metadataConfig={k8sNamespaceDetailsMetadataConfig}
-				countsConfig={k8sNamespaceDetailsCountsConfig}
-				getCountsFilterExpression={k8sNamespaceGetCountsFilterExpression}
-				entityWidgetInfo={namespaceWidgetInfo}
-				getEntityQueryPayload={getNamespaceMetricsQueryPayload}
-				queryKeyPrefix="namespace"
-				customTabs={customTabs}
-			/>
-		</>
-	);
-}
-
-export default K8sNamespacesList;

frontend/src/container/InfraMonitoringK8sV2/Namespaces/entity.config.ts

@@ -0,0 +1,159 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listNamespaces } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesNamespaceRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	getNamespaceMetricsQueryPayload,
+	getNamespacePodMetricsQueryPayload,
+	k8sNamespaceDetailsCountsConfig,
+	k8sNamespaceDetailsMetadataConfig,
+	k8sNamespaceGetCountsFilterExpression,
+	k8sNamespaceGetEntityName,
+	k8sNamespaceGetSelectedItemExpression,
+	k8sNamespaceInitialEventsExpression,
+	k8sNamespaceInitialLogTracesExpression,
+	namespaceWidgetInfo,
+} from './constants';
+import {
+	getK8sNamespaceItemKey,
+	getK8sNamespaceRowKey,
+	k8sNamespacesColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesNamespaceRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listNamespaces(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesNamespaceRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesNamespaceRecordDTO,
+		SelectedItemParams
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listNamespaces(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+const namespaceCustomTabs = [
+	createPodMetricsTab<InframonitoringtypesNamespaceRecordDTO>({
+		getQueryPayload: getNamespacePodMetricsQueryPayload,
+		category: InfraMonitoringEntity.NAMESPACES,
+		queryKey: 'namespacePodMetrics',
+		docBasePath: '/infrastructure-monitoring/kubernetes/namespaces/',
+	}),
+];
+
+export const namespaceEntityConfig: K8sEntityConfig<
+	InframonitoringtypesNamespaceRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.NAMESPACES,
+		eventCategory: InfraMonitoringEvents.Namespace,
+		tableColumns: k8sNamespacesColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sNamespaceRowKey,
+		getItemKey: getK8sNamespaceItemKey,
+		detailsQueryKeyPrefix: 'namespace',
+	},
+	details: {
+		category: InfraMonitoringEntity.NAMESPACES,
+		eventCategory: InfraMonitoringEvents.Namespace,
+		queryKeyPrefix: 'namespace',
+		getSelectedItemExpression: k8sNamespaceGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sNamespaceGetEntityName,
+		getInitialLogTracesExpression: k8sNamespaceInitialLogTracesExpression,
+		getInitialEventsExpression: k8sNamespaceInitialEventsExpression,
+		metadataConfig: k8sNamespaceDetailsMetadataConfig,
+		countsConfig: k8sNamespaceDetailsCountsConfig,
+		getCountsFilterExpression: k8sNamespaceGetCountsFilterExpression,
+		entityWidgetInfo: namespaceWidgetInfo,
+		getEntityQueryPayload: getNamespaceMetricsQueryPayload,
+		customTabs: namespaceCustomTabs,
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/Namespaces/table.config.tsx

@@ -114,13 +114,16 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts
+					items={getPodStatusItems(row.podCountsByStatus)}
+					rowId={rowId}
+				/>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8sV2/Nodes/K8sNodesList.tsx

@@ -1,149 +0,0 @@
-import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listNodes } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesNodeRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import {
-	getNodeMetricsQueryPayload,
-	k8sNodeDetailsMetadataConfig,
-	k8sNodeGetEntityName,
-	k8sNodeGetSelectedItemExpression,
-	k8sNodeInitialEventsExpression,
-	k8sNodeInitialLogTracesExpression,
-	nodeWidgetInfo,
-} from './constants';
-import {
-	getK8sNodeItemKey,
-	getK8sNodeRowKey,
-	k8sNodesColumnsConfig,
-} from './table.config';
-
-function K8sNodesList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listNodes(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesNodeRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesNodeRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listNodes(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesNodeRecordDTO>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.NODES}
-				tableColumns={k8sNodesColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sNodeRowKey}
-				getItemKey={getK8sNodeItemKey}
-				eventCategory={InfraMonitoringEvents.Node}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesNodeRecordDTO>
-				category={InfraMonitoringEntity.NODES}
-				eventCategory={InfraMonitoringEvents.Node}
-				getSelectedItemExpression={k8sNodeGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sNodeGetEntityName}
-				getInitialLogTracesExpression={k8sNodeInitialLogTracesExpression}
-				getInitialEventsExpression={k8sNodeInitialEventsExpression}
-				metadataConfig={k8sNodeDetailsMetadataConfig}
-				entityWidgetInfo={nodeWidgetInfo}
-				getEntityQueryPayload={getNodeMetricsQueryPayload}
-				queryKeyPrefix="node"
-			/>
-		</>
-	);
-}
-
-export default K8sNodesList;

frontend/src/container/InfraMonitoringK8sV2/Nodes/entity.config.ts

@@ -0,0 +1,142 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listNodes } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesNodeRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import {
+	getNodeMetricsQueryPayload,
+	k8sNodeDetailsMetadataConfig,
+	k8sNodeGetEntityName,
+	k8sNodeGetSelectedItemExpression,
+	k8sNodeInitialEventsExpression,
+	k8sNodeInitialLogTracesExpression,
+	nodeWidgetInfo,
+} from './constants';
+import {
+	getK8sNodeItemKey,
+	getK8sNodeRowKey,
+	k8sNodesColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesNodeRecordDTO,
+		string
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listNodes(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesNodeRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesNodeRecordDTO,
+		string
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listNodes(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const nodeEntityConfig: K8sEntityConfig<
+	InframonitoringtypesNodeRecordDTO,
+	string
+> = {
+	list: {
+		entity: InfraMonitoringEntity.NODES,
+		eventCategory: InfraMonitoringEvents.Node,
+		tableColumns: k8sNodesColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sNodeRowKey,
+		getItemKey: getK8sNodeItemKey,
+		detailsQueryKeyPrefix: 'node',
+	},
+	details: {
+		category: InfraMonitoringEntity.NODES,
+		eventCategory: InfraMonitoringEvents.Node,
+		queryKeyPrefix: 'node',
+		getSelectedItemExpression: k8sNodeGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sNodeGetEntityName,
+		getInitialLogTracesExpression: k8sNodeInitialLogTracesExpression,
+		getInitialEventsExpression: k8sNodeInitialEventsExpression,
+		metadataConfig: k8sNodeDetailsMetadataConfig,
+		entityWidgetInfo: nodeWidgetInfo,
+		getEntityQueryPayload: getNodeMetricsQueryPayload,
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/Nodes/table.config.tsx

@@ -98,7 +98,7 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		accessorFn: (row): string => row.condition,
 		width: { min: 120 },
 		enableSort: false,
-		cell: ({ row, groupMeta }): React.ReactNode => {
+		cell: ({ row, groupMeta, rowId }): React.ReactNode => {
 			if (!groupMeta) {
 				const color =
 					NODE_CONDITION_COLORS[row.condition] || NODE_CONDITION_COLORS.no_data;
@@ -123,6 +123,7 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 							color: Color.BG_AMBER_500,
 						},
 					]}
+					rowId={rowId}
 				/>
 			);
 		},
@@ -138,13 +139,16 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts
+					items={getPodStatusItems(row.podCountsByStatus)}
+					rowId={rowId}
+				/>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8sV2/Pods/K8sPodLists.tsx

@@ -1,149 +0,0 @@
-import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listPods } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesPodRecordDTO,
-	InframonitoringtypesResponseTypeDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import {
-	getPodMetricsQueryPayload,
-	k8sPodDetailsMetadataConfig,
-	k8sPodGetEntityName,
-	k8sPodGetSelectedItemExpression,
-	k8sPodInitialEventsExpression,
-	k8sPodInitialLogTracesExpression,
-	podWidgetInfo,
-} from './constants';
-import {
-	getK8sPodItemKey,
-	getK8sPodRowKey,
-	k8sPodColumnsConfig,
-} from './table.config';
-
-function K8sPodsList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listPods(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesPodRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesPodRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listPods(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesPodRecordDTO>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.PODS}
-				tableColumns={k8sPodColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sPodRowKey}
-				getItemKey={getK8sPodItemKey}
-				eventCategory={InfraMonitoringEvents.Pod}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesPodRecordDTO>
-				category={InfraMonitoringEntity.PODS}
-				eventCategory={InfraMonitoringEvents.Pod}
-				getSelectedItemExpression={k8sPodGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sPodGetEntityName}
-				getInitialLogTracesExpression={k8sPodInitialLogTracesExpression}
-				getInitialEventsExpression={k8sPodInitialEventsExpression}
-				metadataConfig={k8sPodDetailsMetadataConfig}
-				entityWidgetInfo={podWidgetInfo}
-				getEntityQueryPayload={getPodMetricsQueryPayload}
-				queryKeyPrefix="pod"
-			/>
-		</>
-	);
-}
-
-export default K8sPodsList;

frontend/src/container/InfraMonitoringK8sV2/Pods/entity.config.ts

@@ -0,0 +1,134 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listPods } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesPodRecordDTO,
+	InframonitoringtypesResponseTypeDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import {
+	getPodMetricsQueryPayload,
+	k8sPodDetailsMetadataConfig,
+	k8sPodGetEntityName,
+	k8sPodGetSelectedItemExpression,
+	k8sPodInitialEventsExpression,
+	k8sPodInitialLogTracesExpression,
+	podWidgetInfo,
+} from './constants';
+import {
+	getK8sPodItemKey,
+	getK8sPodRowKey,
+	k8sPodColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<InframonitoringtypesPodRecordDTO>['list']['fetchListData']
+> {
+	try {
+		const response = await listPods(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesPodRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<InframonitoringtypesPodRecordDTO>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listPods(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO> =
+	{
+		list: {
+			entity: InfraMonitoringEntity.PODS,
+			eventCategory: InfraMonitoringEvents.Pod,
+			tableColumns: k8sPodColumnsConfig,
+			fetchListData,
+			getRowKey: getK8sPodRowKey,
+			getItemKey: getK8sPodItemKey,
+			detailsQueryKeyPrefix: 'pod',
+		},
+		details: {
+			category: InfraMonitoringEntity.PODS,
+			eventCategory: InfraMonitoringEvents.Pod,
+			queryKeyPrefix: 'pod',
+			getSelectedItemExpression: k8sPodGetSelectedItemExpression,
+			fetchEntityData,
+			getEntityName: k8sPodGetEntityName,
+			getInitialLogTracesExpression: k8sPodInitialLogTracesExpression,
+			getInitialEventsExpression: k8sPodInitialEventsExpression,
+			metadataConfig: k8sPodDetailsMetadataConfig,
+			entityWidgetInfo: podWidgetInfo,
+			getEntityQueryPayload: getPodMetricsQueryPayload,
+		},
+	};

frontend/src/container/InfraMonitoringK8sV2/Pods/table.config.tsx

@@ -131,13 +131,16 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		width: { min: 250 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-collapse',
-		cell: ({ row }): React.ReactNode => {
+		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts
+					items={getPodStatusItems(row.podCountsByStatus)}
+					rowId={rowId}
+				/>
 			);
 		},
 	},
@@ -171,7 +174,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podRestarts,
-		width: { min: 100 },
+		width: { min: 140 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const restarts = value as number;

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/K8sStatefulSetsList.tsx

@@ -1,164 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listStatefulSets } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesResponseTypeDTO,
-	InframonitoringtypesStatefulSetRecordDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	getStatefulSetMetricsQueryPayload,
-	getStatefulSetPodMetricsQueryPayload,
-	k8sStatefulSetDetailsMetadataConfig,
-	k8sStatefulSetGetEntityName,
-	k8sStatefulSetGetSelectedItemExpression,
-	k8sStatefulSetInitialEventsExpression,
-	k8sStatefulSetInitialLogTracesExpression,
-	statefulSetWidgetInfo,
-} from './constants';
-import {
-	getK8sStatefulSetItemKey,
-	getK8sStatefulSetRowKey,
-	k8sStatefulSetsColumnsConfig,
-} from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
-function K8sStatefulSetsList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listStatefulSets(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesStatefulSetRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesStatefulSetRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listStatefulSets(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesStatefulSetRecordDTO>({
-				getQueryPayload: getStatefulSetPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.STATEFULSETS,
-				queryKey: 'statefulSetPodMetrics',
-			}),
-		],
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.STATEFULSETS}
-				tableColumns={k8sStatefulSetsColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sStatefulSetRowKey}
-				getItemKey={getK8sStatefulSetItemKey}
-				eventCategory={InfraMonitoringEvents.StatefulSet}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesStatefulSetRecordDTO>
-				category={InfraMonitoringEntity.STATEFULSETS}
-				eventCategory={InfraMonitoringEvents.StatefulSet}
-				getSelectedItemExpression={k8sStatefulSetGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sStatefulSetGetEntityName}
-				getInitialLogTracesExpression={k8sStatefulSetInitialLogTracesExpression}
-				getInitialEventsExpression={k8sStatefulSetInitialEventsExpression}
-				metadataConfig={k8sStatefulSetDetailsMetadataConfig}
-				entityWidgetInfo={statefulSetWidgetInfo}
-				getEntityQueryPayload={getStatefulSetMetricsQueryPayload}
-				queryKeyPrefix="statefulSet"
-				customTabs={customTabs}
-			/>
-		</>
-	);
-}
-
-export default K8sStatefulSetsList;

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/entity.config.ts

@@ -0,0 +1,153 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listStatefulSets } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesResponseTypeDTO,
+	InframonitoringtypesStatefulSetRecordDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	getStatefulSetMetricsQueryPayload,
+	getStatefulSetPodMetricsQueryPayload,
+	k8sStatefulSetDetailsMetadataConfig,
+	k8sStatefulSetGetEntityName,
+	k8sStatefulSetGetSelectedItemExpression,
+	k8sStatefulSetInitialEventsExpression,
+	k8sStatefulSetInitialLogTracesExpression,
+	statefulSetWidgetInfo,
+} from './constants';
+import {
+	getK8sStatefulSetItemKey,
+	getK8sStatefulSetRowKey,
+	k8sStatefulSetsColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesStatefulSetRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listStatefulSets(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesStatefulSetRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesStatefulSetRecordDTO,
+		SelectedItemParams
+	>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listStatefulSets(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const statefulSetEntityConfig: K8sEntityConfig<
+	InframonitoringtypesStatefulSetRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.STATEFULSETS,
+		eventCategory: InfraMonitoringEvents.StatefulSet,
+		tableColumns: k8sStatefulSetsColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sStatefulSetRowKey,
+		getItemKey: getK8sStatefulSetItemKey,
+		detailsQueryKeyPrefix: 'statefulSet',
+	},
+	details: {
+		category: InfraMonitoringEntity.STATEFULSETS,
+		eventCategory: InfraMonitoringEvents.StatefulSet,
+		queryKeyPrefix: 'statefulSet',
+		getSelectedItemExpression: k8sStatefulSetGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sStatefulSetGetEntityName,
+		getInitialLogTracesExpression: k8sStatefulSetInitialLogTracesExpression,
+		getInitialEventsExpression: k8sStatefulSetInitialEventsExpression,
+		metadataConfig: k8sStatefulSetDetailsMetadataConfig,
+		entityWidgetInfo: statefulSetWidgetInfo,
+		getEntityQueryPayload: getStatefulSetMetricsQueryPayload,
+		customTabs: [
+			createPodMetricsTab<InframonitoringtypesStatefulSetRecordDTO>({
+				getQueryPayload: getStatefulSetPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.STATEFULSETS,
+				queryKey: 'statefulSetPodMetrics',
+				docBasePath: '/infrastructure-monitoring/kubernetes/statefulsets/',
+			}),
+		],
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/table.config.tsx

@@ -122,12 +122,17 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
-			cell: ({ row }): React.ReactNode => {
+			cell: ({ row, rowId }): React.ReactNode => {
 				const podCountsByStatus = row.podCountsByStatus;
 				if (!podCountsByStatus) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+				return (
+					<GroupedStatusCounts
+						items={getPodStatusItems(podCountsByStatus)}
+						rowId={rowId}
+					/>
+				);
 			},
 		},
 		{
@@ -141,7 +146,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			width: { min: 140 },
 			enableSort: false,
 			enableResize: true,
-			cell: ({ row }): React.ReactNode => (
+			cell: ({ row, rowId }): React.ReactNode => (
 				<GroupedStatusCounts
 					items={[
 						{
@@ -155,6 +160,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 							color: Color.BG_ROBIN_500,
 						},
 					]}
+					rowId={rowId}
 				/>
 			),
 		},

frontend/src/container/InfraMonitoringK8sV2/Volumes/K8sVolumesList.tsx

@@ -1,151 +0,0 @@
-import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { listVolumes } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import {
-	InframonitoringtypesResponseTypeDTO,
-	InframonitoringtypesVolumeRecordDTO,
-	Querybuildertypesv5OrderDirectionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
-import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
-import { K8sBaseList } from '../Base/K8sBaseList';
-import { K8sBaseFilters } from '../Base/types';
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-import {
-	getVolumeMetricsQueryPayload,
-	k8sVolumeDetailsMetadataConfig,
-	k8sVolumeGetEntityName,
-	k8sVolumeGetSelectedItemExpression,
-	k8sVolumeInitialEventsExpression,
-	k8sVolumeInitialLogTracesExpression,
-	volumeWidgetInfo,
-} from './constants';
-import {
-	getK8sVolumeItemKey,
-	getK8sVolumeRowKey,
-	k8sVolumesColumnsConfig,
-} from './table.config';
-
-function K8sVolumesList({
-	controlListPrefix,
-}: {
-	controlListPrefix?: React.ReactNode;
-}): JSX.Element {
-	const fetchListData = useCallback(
-		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
-			try {
-				const response = await listVolumes(
-					{
-						filter: { expression: filters.filter.expression },
-						groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
-						offset: filters.offset,
-						limit: filters.limit ?? 10,
-						start: filters.start,
-						end: filters.end,
-						orderBy: filters.orderBy
-							? {
-									key: { name: filters.orderBy.key.name },
-									direction:
-										filters.orderBy.direction === 'asc'
-											? Querybuildertypesv5OrderDirectionDTO.asc
-											: Querybuildertypesv5OrderDirectionDTO.desc,
-								}
-							: undefined,
-					},
-					signal,
-				);
-
-				const data = response.data;
-				return {
-					type:
-						data.type === InframonitoringtypesResponseTypeDTO.grouped_list
-							? ('grouped_list' as const)
-							: ('list' as const),
-					records: data.records,
-					total: data.total,
-					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
-				};
-			} catch (error) {
-				return {
-					type: 'list' as const,
-					records: [] as InframonitoringtypesVolumeRecordDTO[],
-					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	const fetchEntityData = useCallback(
-		async (
-			filters: K8sDetailsFilters,
-			signal?: AbortSignal,
-		): Promise<{
-			data: InframonitoringtypesVolumeRecordDTO | null;
-			error?: APIError | null;
-		}> => {
-			try {
-				const response = await listVolumes(
-					{
-						filter: { expression: filters.filter.expression },
-						start: filters.start,
-						end: filters.end,
-						limit: 1,
-						offset: 0,
-					},
-					signal,
-				);
-
-				return {
-					data: response.data.records.length > 0 ? response.data.records[0] : null,
-				};
-			} catch (error) {
-				return {
-					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
-				};
-			}
-		},
-		[],
-	);
-
-	return (
-		<>
-			<K8sBaseList<InframonitoringtypesVolumeRecordDTO, SelectedItemParams>
-				controlListPrefix={controlListPrefix}
-				entity={InfraMonitoringEntity.VOLUMES}
-				tableColumns={k8sVolumesColumnsConfig}
-				fetchListData={fetchListData}
-				getRowKey={getK8sVolumeRowKey}
-				getItemKey={getK8sVolumeItemKey}
-				eventCategory={InfraMonitoringEvents.Volumes}
-			/>
-
-			<K8sBaseDetails<InframonitoringtypesVolumeRecordDTO>
-				category={InfraMonitoringEntity.VOLUMES}
-				eventCategory={InfraMonitoringEvents.Volume}
-				getSelectedItemExpression={k8sVolumeGetSelectedItemExpression}
-				fetchEntityData={fetchEntityData}
-				getEntityName={k8sVolumeGetEntityName}
-				getInitialLogTracesExpression={k8sVolumeInitialLogTracesExpression}
-				getInitialEventsExpression={k8sVolumeInitialEventsExpression}
-				metadataConfig={k8sVolumeDetailsMetadataConfig}
-				entityWidgetInfo={volumeWidgetInfo}
-				getEntityQueryPayload={getVolumeMetricsQueryPayload}
-				queryKeyPrefix="volume"
-				hideDetailViewTabs
-			/>
-		</>
-	);
-}
-
-export default K8sVolumesList;

frontend/src/container/InfraMonitoringK8sV2/Volumes/entity.config.ts

@@ -0,0 +1,141 @@
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { listVolumes } from 'api/generated/services/inframonitoring';
+import {
+	InframonitoringtypesResponseTypeDTO,
+	InframonitoringtypesVolumeRecordDTO,
+	Querybuildertypesv5OrderDirectionDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
+
+import { K8sEntityConfig } from '../Base/entity.config.types';
+import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	getVolumeMetricsQueryPayload,
+	k8sVolumeDetailsMetadataConfig,
+	k8sVolumeGetEntityName,
+	k8sVolumeGetSelectedItemExpression,
+	k8sVolumeInitialEventsExpression,
+	k8sVolumeInitialLogTracesExpression,
+	volumeWidgetInfo,
+} from './constants';
+import {
+	getK8sVolumeItemKey,
+	getK8sVolumeRowKey,
+	k8sVolumesColumnsConfig,
+} from './table.config';
+
+async function fetchListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<
+		InframonitoringtypesVolumeRecordDTO,
+		SelectedItemParams
+	>['list']['fetchListData']
+> {
+	try {
+		const response = await listVolumes(
+			{
+				filter: { expression: filters.filter.expression },
+				groupBy: filters.groupBy?.map((g) => ({ name: g.name })),
+				offset: filters.offset,
+				limit: filters.limit ?? 10,
+				start: filters.start,
+				end: filters.end,
+				orderBy: filters.orderBy
+					? {
+							key: { name: filters.orderBy.key.name },
+							direction:
+								filters.orderBy.direction === 'asc'
+									? Querybuildertypesv5OrderDirectionDTO.asc
+									: Querybuildertypesv5OrderDirectionDTO.desc,
+						}
+					: undefined,
+			},
+			signal,
+		);
+
+		const data = response.data;
+		return {
+			type:
+				data.type === InframonitoringtypesResponseTypeDTO.grouped_list
+					? ('grouped_list' as const)
+					: ('list' as const),
+			records: data.records,
+			total: data.total,
+			endTimeBeforeRetention: data.endTimeBeforeRetention,
+			warning: data.warning,
+		};
+	} catch (error) {
+		return {
+			type: 'list' as const,
+			records: [] as InframonitoringtypesVolumeRecordDTO[],
+			total: 0,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+async function fetchEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): ReturnType<
+	K8sEntityConfig<InframonitoringtypesVolumeRecordDTO>['details']['fetchEntityData']
+> {
+	try {
+		const response = await listVolumes(
+			{
+				filter: { expression: filters.filter.expression },
+				start: filters.start,
+				end: filters.end,
+				limit: 1,
+				offset: 0,
+			},
+			signal,
+		);
+
+		return {
+			data: response.data.records.length > 0 ? response.data.records[0] : null,
+		};
+	} catch (error) {
+		return {
+			data: null,
+			error:
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+		};
+	}
+}
+
+export const volumeEntityConfig: K8sEntityConfig<
+	InframonitoringtypesVolumeRecordDTO,
+	SelectedItemParams
+> = {
+	list: {
+		entity: InfraMonitoringEntity.VOLUMES,
+		eventCategory: InfraMonitoringEvents.Volumes,
+		tableColumns: k8sVolumesColumnsConfig,
+		fetchListData,
+		getRowKey: getK8sVolumeRowKey,
+		getItemKey: getK8sVolumeItemKey,
+		detailsQueryKeyPrefix: 'volume',
+	},
+	details: {
+		category: InfraMonitoringEntity.VOLUMES,
+		eventCategory: InfraMonitoringEvents.Volume,
+		queryKeyPrefix: 'volume',
+		getSelectedItemExpression: k8sVolumeGetSelectedItemExpression,
+		fetchEntityData,
+		getEntityName: k8sVolumeGetEntityName,
+		getInitialLogTracesExpression: k8sVolumeInitialLogTracesExpression,
+		getInitialEventsExpression: k8sVolumeInitialEventsExpression,
+		metadataConfig: k8sVolumeDetailsMetadataConfig,
+		entityWidgetInfo: volumeWidgetInfo,
+		getEntityQueryPayload: getVolumeMetricsQueryPayload,
+		hideDetailViewTabs: true,
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/components/GroupedStatusCounts.module.scss

@@ -4,33 +4,24 @@
 	gap: 4px;
 }
 
-.itemWrapper {
-	display: flex;
+.item {
+	display: inline-flex;
 	align-items: center;
 	gap: 4px;
+	// 4ch value slot (old .valueWrapper) + 3px color bar + 4px gap
+	min-width: calc(4ch + 7px);
+	font-variant-numeric: tabular-nums;
+	text-align: left;
+	cursor: default;
 }
 
-.separator {
+.item::before {
+	content: '';
 	width: 3px;
 	height: 14px;
 	border-radius: 1px;
 	flex-shrink: 0;
-}
-
-.valueWrapper {
-	min-width: 4ch;
-}
-
-.valueWrapperTooltip {
-	display: block;
-	width: fit-content;
-}
-
-.value {
-	font-variant-numeric: tabular-nums;
-	text-align: left;
-	cursor: default;
-	min-width: min-content;
+	background-color: var(--gsc-color);
 }
 
 .tooltipContent {

frontend/src/container/InfraMonitoringK8sV2/components/GroupedStatusCounts.tsx

@@ -1,5 +1,3 @@
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
 import styles from './GroupedStatusCounts.module.scss';
 import TanStackTable from 'components/TanStackTableView';
 import { Typography } from '@signozhq/ui/typography';
@@ -18,6 +16,7 @@ export interface StatusCountItem {
 
 interface GroupedStatusCountsProps {
 	items: StatusCountItem[];
+	rowId: string;
 	showZeroValues?: boolean;
 }
 
@@ -62,6 +61,7 @@ function buildTooltipContent(item: StatusCountItem): React.ReactNode {
 
 export function GroupedStatusCounts({
 	items,
+	rowId,
 	showZeroValues = true,
 }: GroupedStatusCountsProps): JSX.Element {
 	const visibleItems =
@@ -74,21 +74,20 @@ export function GroupedStatusCounts({
 	return (
 		<div className={styles.container}>
 			{visibleItems.map((item) => (
-				<div key={item.label} className={styles.itemWrapper}>
-					<div
-						className={styles.separator}
-						style={{ backgroundColor: item.color }}
-					/>
-					<div className={styles.valueWrapper}>
-						<TooltipSimple title={buildTooltipContent(item)} arrow align="start">
-							<span className={styles.valueWrapperTooltip}>
-								<TanStackTable.Text className={styles.value}>
-									{item.value || '-'}
-								</TanStackTable.Text>
-							</span>
-						</TooltipSimple>
-					</div>
-				</div>
+				<TanStackTable.HoverTooltip
+					key={item.label}
+					rowId={rowId}
+					title={buildTooltipContent(item)}
+					arrow
+					align="start"
+				>
+					<TanStackTable.Text
+						className={styles.item}
+						style={{ '--gsc-color': item.color } as React.CSSProperties}
+					>
+						{item.value || '-'}
+					</TanStackTable.Text>
+				</TanStackTable.HoverTooltip>
 			))}
 		</div>
 	);

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -905,6 +905,9 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	SELECTED_ITEM: 'selectedItem',
 	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
 	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
+	DETAIL_RELATIVE_TIME: 'detailRelativeTime',
+	DETAIL_START_TIME: 'detailStartTime',
+	DETAIL_END_TIME: 'detailEndTime',
 };
 
 /** Metric namespace prefixes for /fields/keys and /fields/values APIs */
@@ -934,22 +937,27 @@ export const podUtilizationByPodWidgetInfo = [
 	{
 		title: 'CPU Limit Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
+		docPath: '#cpu-limit-utilization-by-pod-name',
 	},
 	{
 		title: 'CPU Request Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
+		docPath: '#cpu-request-utilization-by-pod-name',
 	},
 	{
 		title: 'Memory Limit Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
+		docPath: '#memory-limit-utilization-by-pod-name',
 	},
 	{
 		title: 'Memory Request Utilization By Pod Name',
 		yAxisUnit: 'percentunit',
+		docPath: '#memory-request-utilization-by-pod-name',
 	},
 	{
 		title: 'FileSystem Usage Percentage By Pod Name',
 		yAxisUnit: 'percentunit',
+		docPath: '#filesystem-usage-percentage-by-pod-name',
 	},
 ];
 

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -15,6 +15,18 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	},
 }));
 
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
+
+// Admin gating on the write controls flows through useAuthZ. Mock it directly
+// (synchronous) so the functional tests stay synchronous; the read-only block
+// below flips it to deny-all.
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 import {
 	GROUPS_ENDPOINT,
 	makeGroupsResponse,
@@ -102,6 +114,8 @@ describe('AttributeMappingsTab (integration)', () => {
 	beforeEach(() => {
 		// Reset URL state between tests — jsdom shares window.location across a file.
 		window.history.pushState(null, '', '/');
+		// Default to an admin; the read-only block overrides this.
+		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
@@ -507,4 +521,55 @@ describe('AttributeMappingsTab (integration)', () => {
 			).resolves.toBeInTheDocument();
 		});
 	});
+
+	// The write APIs (create/update/delete group & mapper) are Admin-only on the
+	// backend, so a non-admin gets a read-only view: the data renders, but every
+	// write control is hidden.
+	describe('read-only (non-admin)', () => {
+		beforeEach(() => {
+			mockedUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+		});
+
+		it('hides the "Add a new group" button', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(screen.queryByTestId('add-group-row')).not.toBeInTheDocument();
+		});
+
+		it('hides the group enable toggle and actions menu', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(
+				screen.queryByTestId('group-enabled-group-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('group-actions-group-1'),
+			).not.toBeInTheDocument();
+		});
+
+		it('renders mappers read-only: no "Add mapping" button or row actions', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			setupGroups();
+			setupMappers([makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model' })]);
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			await expandGroup(user);
+
+			// The mapper still renders...
+			await screen.findByTestId('mapper-target-mapper-1');
+			// ...but every write control is gone.
+			expect(screen.queryByTestId('add-mapper-group-1')).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('mapper-enabled-mapper-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: 'Mapping actions' }),
+			).not.toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,6 +1,7 @@
 import { Switch } from '@signozhq/ui/switch';
 
 import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';
 
@@ -16,7 +17,11 @@ function GroupHeaderActions({
 	onToggle,
 	onEdit,
 	onRemove,
-}: GroupHeaderActionsProps): JSX.Element {
+}: GroupHeaderActionsProps): JSX.Element | null {
+	const canManage = useCanManageAttributeMapping();
+	if (!canManage) {
+		return null;
+	}
 	return (
 		<div
 			className={styles.actions}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -11,6 +11,7 @@ import {
 	Mapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import { COLUMN_COUNT } from '../constants';
 import MapperRow from '../MapperRow/MapperRow';
 import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
@@ -39,6 +40,7 @@ function GroupMappers({
 	onEditMapper,
 }: GroupMappersProps): JSX.Element {
 	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
+	const canManage = useCanManageAttributeMapping();
 
 	const hasServerId = group.serverId !== null;
 	const { data, isLoading, isError } = useListSpanMappers(
@@ -144,16 +146,20 @@ function GroupMappers({
 		/>
 	));
 
-	// The add-mapping row trails every non-error state (including loading/empty).
+	// The add-mapping row trails every non-error state (including loading/empty),
+	// but only for users who can manage mappings — non-admins get a read-only view.
 	let rows: JSX.Element[];
 	if (isErrorMappers) {
 		rows = [errorRow];
 	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows, addMapperRow];
+		rows = [...skeletonRows];
 	} else if (mapperCount === 0) {
-		rows = [emptyRow, addMapperRow];
+		rows = [emptyRow];
 	} else {
-		rows = [...mapperRows, addMapperRow];
+		rows = [...mapperRows];
+	}
+	if (canManage && !isErrorMappers) {
+		rows.push(addMapperRow);
 	}
 
 	return (

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { motion } from 'motion/react';
 
 import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
 import styles from './MapperRow.module.scss';
 
@@ -30,6 +31,7 @@ function MapperRow({
 	onRemove,
 	onToggle,
 }: MapperRowProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
 	const sources = mapper.sources ?? [];
 	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
 	const remainingSources = sources.length - visibleSources.length;
@@ -101,14 +103,16 @@ function MapperRow({
 				)}
 			</td>
 			<td className={cx(styles.cell, styles.actionsCell)}>
-				<div className={styles.rowActions}>
-					<Switch
-						value={mapper.enabled}
-						onChange={(checked): void => onToggle(mapper.localId, checked)}
-						testId={`mapper-enabled-${mapper.localId}`}
-					/>
-					<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
-				</div>
+				{canManage && (
+					<div className={styles.rowActions}>
+						<Switch
+							value={mapper.enabled}
+							onChange={(checked): void => onToggle(mapper.localId, checked)}
+							testId={`mapper-enabled-${mapper.localId}`}
+						/>
+						<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
+					</div>
+				)}
 			</td>
 		</motion.tr>
 	);

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -11,6 +11,7 @@ import {
 	DraftMapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupHeader from './GroupHeader/GroupHeader';
 import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
 import GroupMappers from './GroupMappers/GroupMappers';
@@ -33,6 +34,7 @@ function MappingsTable({
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
 	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
 	const drawer = useMapperFormDrawer();
+	const canManage = useCanManageAttributeMapping();
 
 	const { upsertMapper, removeMapper } = editor;
 
@@ -120,18 +122,20 @@ function MappingsTable({
 
 	return (
 		<div className={styles.tableWrapper}>
-			<div className={styles.toolbar}>
-				<Button
-					variant="link"
-					color="primary"
-					prefix={<Plus size={14} />}
-					onClick={onAddGroup}
-					testId="add-group-row"
-					disabled={editor.isLoading}
-				>
-					Add a new group
-				</Button>
-			</div>
+			{canManage && (
+				<div className={styles.toolbar}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={onAddGroup}
+						testId="add-group-row"
+						disabled={editor.isLoading}
+					>
+						Add a new group
+					</Button>
+				</div>
+			)}
 
 			{isEmpty ? (
 				<div className={styles.tableState} data-testid="mapper-groups-empty">

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -8,6 +8,7 @@ import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
+import TestTab from './TestTab/TestTab';
 import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
 import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
 
@@ -44,9 +45,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 		{
 			key: 'test',
 			label: 'Test',
-			disabled: true,
-			disabledReason: 'Coming soon',
-			children: null,
+			children: <TestTab editor={editor} />,
 		},
 	];
 

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.module.scss

@@ -0,0 +1,54 @@
+.skeleton {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: var(--l1-background);
+}
+
+.line {
+	display: flex;
+	align-items: center;
+	height: 18px;
+}
+
+.lineNumber {
+	flex: 0 0 40px;
+	padding-right: var(--padding-3);
+	text-align: right;
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+	color: var(--l3-foreground);
+	opacity: 0.6;
+	user-select: none;
+}
+
+.lineContent {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.bar {
+	height: 8px;
+	border-radius: var(--radius-1);
+	background: var(--l2-border);
+	animation: jsonSkeletonPulse 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.bar {
+		animation: none;
+	}
+}
+
+@keyframes jsonSkeletonPulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.45;
+	}
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.tsx

@@ -0,0 +1,56 @@
+import styles from './JsonEditorSkeleton.module.scss';
+
+interface SkeletonLine {
+	indent: number;
+	barWidths: number[];
+}
+
+const SKELETON_LINES: SkeletonLine[] = [
+	{ indent: 0, barWidths: [10] },
+	{ indent: 1, barWidths: [90, 10] },
+	{ indent: 2, barWidths: [155, 190] },
+	{ indent: 2, barWidths: [135, 190] },
+	{ indent: 2, barWidths: [150, 50] },
+	{ indent: 2, barWidths: [180, 35] },
+	{ indent: 2, barWidths: [185, 200] },
+	{ indent: 1, barWidths: [14] },
+	{ indent: 1, barWidths: [75, 10] },
+	{ indent: 2, barWidths: [95, 90] },
+	{ indent: 2, barWidths: [170, 85] },
+	{ indent: 1, barWidths: [10] },
+	{ indent: 0, barWidths: [10] },
+];
+
+const INDENT_WIDTH_PX = 14;
+
+function JsonEditorSkeleton(): JSX.Element {
+	return (
+		<div
+			className={styles.skeleton}
+			data-testid="json-editor-skeleton"
+			aria-hidden="true"
+		>
+			{SKELETON_LINES.map((line, lineIndex) => (
+				// eslint-disable-next-line react/no-array-index-key
+				<div key={lineIndex} className={styles.line}>
+					<span className={styles.lineNumber}>{lineIndex + 1}</span>
+					<span
+						className={styles.lineContent}
+						style={{ paddingLeft: line.indent * INDENT_WIDTH_PX }}
+					>
+						{line.barWidths.map((width, barIndex) => (
+							<span
+								// eslint-disable-next-line react/no-array-index-key
+								key={barIndex}
+								className={styles.bar}
+								style={{ width }}
+							/>
+						))}
+					</span>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default JsonEditorSkeleton;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestResult.tsx

@@ -0,0 +1,121 @@
+import { Badge } from '@signozhq/ui/badge';
+import { SpantypesSpanMapperTestSpanDTO } from 'api/generated/services/sigNoz.schemas';
+import { useMemo } from 'react';
+
+import {
+	AttrChangeStatus,
+	AttrDiffEntry,
+	diffAttributeMaps,
+	formatAttributeValue,
+} from './testPayload';
+import styles from './TestTab.module.scss';
+import { TestTabAttributes, TestTabResource } from './useTestSpanMapper';
+
+interface TestResultProps {
+	index: number;
+	span: SpantypesSpanMapperTestSpanDTO;
+	inputAttributes: TestTabAttributes;
+	inputResource: TestTabResource;
+}
+
+const STATUS_BADGE: Partial<
+	Record<
+		AttrChangeStatus,
+		{ color: 'success' | 'robin' | 'sienna'; label: string }
+	>
+> = {
+	added: { color: 'success', label: 'populated' },
+	changed: { color: 'robin', label: 'remapped' },
+	removed: { color: 'sienna', label: 'moved out' },
+};
+
+const ROW_CLASS: Partial<Record<AttrChangeStatus, string>> = {
+	added: styles.added,
+	removed: styles.removed,
+};
+
+interface ResultSection {
+	key: string;
+	title: string;
+	entries: AttrDiffEntry[];
+}
+
+function TestResult({
+	index,
+	span,
+	inputAttributes,
+	inputResource,
+}: TestResultProps): JSX.Element {
+	const attributeEntries = useMemo(
+		() => diffAttributeMaps(inputAttributes, span.attributes ?? {}),
+		[inputAttributes, span.attributes],
+	);
+	const resourceEntries = useMemo(
+		() => diffAttributeMaps(inputResource, span.resource ?? {}),
+		[inputResource, span.resource],
+	);
+
+	const sections: ResultSection[] = [
+		{
+			key: 'attributes',
+			title: 'Resulting attributes',
+			entries: attributeEntries,
+		},
+	];
+	if (resourceEntries.length > 0) {
+		sections.push({
+			key: 'resource',
+			title: 'Resulting resource',
+			entries: resourceEntries,
+		});
+	}
+
+	return (
+		<div className={styles.resultCard} data-testid={`test-result-${index}`}>
+			{sections.map((section) => (
+				<div
+					key={section.key}
+					className={styles.resultSection}
+					data-testid={`test-result-${index}-${section.key}`}
+				>
+					<div className={styles.resultTitle}>{section.title}</div>
+
+					{section.entries.length === 0 ? (
+						<div className={styles.resultEmpty}>No keys in this map.</div>
+					) : (
+						<div className={styles.attrRows}>
+							{section.entries.map((entry) => {
+								const badge = STATUS_BADGE[entry.status];
+								return (
+									<div
+										key={entry.key}
+										className={`${styles.attrRow} ${ROW_CLASS[entry.status] ?? ''}`}
+									>
+										<span className={styles.attrKey} title={entry.key}>
+											{entry.key}
+										</span>
+										<span
+											className={styles.attrValue}
+											title={formatAttributeValue(entry.value)}
+										>
+											{formatAttributeValue(entry.value)}
+										</span>
+										{badge ? (
+											<Badge color={badge.color} variant="outline">
+												{badge.label}
+											</Badge>
+										) : (
+											<span />
+										)}
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default TestResult;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.module.scss

@@ -0,0 +1,171 @@
+.testTab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-6);
+}
+
+// Heading + description on the left, Run button pinned to the top-right.
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+}
+
+.headerText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.heading {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.description {
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	color: var(--l3-foreground);
+}
+
+.body {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+	height: calc(100vh - 320px);
+	min-height: 320px;
+}
+
+.editor {
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	overflow: hidden;
+}
+.validationCallout {
+	width: 100%;
+}
+
+// No top padding so results align with the editor's first line, which sits
+// flush against the top of its own panel.
+.resultsPanel {
+	height: 100%;
+	overflow-y: auto;
+	padding: var(--padding-4);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+// Pre-run empty state that fills the blank right half.
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-2);
+	height: 100%;
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.placeholderTitle {
+	font-weight: var(--font-weight-semibold);
+	color: var(--l2-foreground);
+}
+
+.error {
+	padding: var(--padding-3) var(--padding-4);
+	border-radius: var(--radius-2);
+	background: var(--callout-error-background);
+	color: var(--callout-error-title);
+	font-size: var(--periscope-font-size-base);
+}
+
+.results {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.resultCard {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+.resultSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.resultTitle {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.resultEmpty {
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.attrRows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.attrRow {
+	display: grid;
+	grid-template-columns: clamp(200px, 40%, 340px) minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--padding-3);
+	border-radius: var(--radius-2);
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+
+	&.added {
+		background: var(--callout-success-background);
+	}
+
+	&.removed {
+		opacity: 0.65;
+
+		.attrKey,
+		.attrValue {
+			text-decoration: line-through;
+		}
+	}
+}
+
+.attrKey,
+.attrValue {
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.attrKey {
+	font-weight: var(--font-weight-medium);
+}
+
+.attrValue {
+	color: var(--l3-foreground);
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx

@@ -0,0 +1,148 @@
+import MEditor from '@monaco-editor/react';
+import { Play } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import styles from './TestTab.module.scss';
+import JsonEditorSkeleton from './JsonEditorSkeleton';
+import TestResult from './TestResult';
+import { AttributeMappingEditor } from '../hooks/useAttributeMappingEditor';
+import {
+	defineSignozJsonTheme,
+	SIGNOZ_JSON_THEME_DARK,
+	SIGNOZ_JSON_THEME_LIGHT,
+} from './jsonEditorTheme';
+import { useTestSpanMapper } from './useTestSpanMapper';
+
+interface TestTabProps {
+	editor: AttributeMappingEditor;
+}
+
+function TestTab({ editor }: TestTabProps): JSX.Element {
+	const {
+		input,
+		setInput,
+		run,
+		isRunning,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+		validationError,
+	} = useTestSpanMapper(editor.snapshot, editor.groups);
+	const isDarkMode = useIsDarkMode();
+
+	function renderResults(): JSX.Element {
+		if (error) {
+			return (
+				<div className={styles.error} role="alert" data-testid="test-error">
+					{error}
+				</div>
+			);
+		}
+		if (result) {
+			if (result.length === 0) {
+				return (
+					<div className={styles.resultEmpty} data-testid="test-results-empty">
+						No spans returned. The mappers produced no output for this input.
+					</div>
+				);
+			}
+			return (
+				<div className={styles.results} data-testid="test-results">
+					{result.map((span, index) => (
+						<TestResult
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							index={index}
+							span={span}
+							inputAttributes={testedAttributes ?? {}}
+							inputResource={testedResource ?? {}}
+						/>
+					))}
+				</div>
+			);
+		}
+		return (
+			<div className={styles.placeholder} data-testid="test-results-placeholder">
+				<span className={styles.placeholderTitle}>No results yet</span>
+				<span>
+					Run the test to see which target attributes your mappers populate.
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.testTab} data-testid="test-tab">
+			<div className={styles.header}>
+				<div className={styles.headerText}>
+					<h3 className={styles.heading}>Test with sample span</h3>
+					<p className={styles.description}>
+						Paste a JSON span object to see which target attributes get populated and
+						which source key matched.
+					</p>
+				</div>
+
+				<Button
+					testId="run-test-button"
+					variant="solid"
+					color="primary"
+					prefix={<Play size={14} />}
+					onClick={run}
+					loading={isRunning}
+					disabled={isRunning || validationError !== null}
+				>
+					Run Test
+				</Button>
+			</div>
+
+			<div className={styles.body}>
+				<div
+					className={styles.editor}
+					data-testid="test-span-input"
+					aria-label="Sample span JSON"
+				>
+					<MEditor
+						language="json"
+						value={input}
+						onChange={(value): void => setInput(value ?? '')}
+						height="100%"
+						loading={<JsonEditorSkeleton />}
+						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
+						beforeMount={defineSignozJsonTheme}
+						options={{
+							minimap: { enabled: false },
+							fontSize: 12,
+							lineNumbers: 'on',
+							wordWrap: 'on',
+							scrollBeyondLastLine: false,
+							formatOnPaste: true,
+							tabSize: 2,
+							automaticLayout: true,
+							scrollbar: { alwaysConsumeMouseWheel: false },
+						}}
+					/>
+				</div>
+
+				<div className={styles.resultsPanel} data-testid="test-results-panel">
+					{renderResults()}
+				</div>
+			</div>
+
+			{validationError && (
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					title={validationError}
+					testId="test-input-error"
+					className={styles.validationCallout}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default TestTab;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts

@@ -0,0 +1,38 @@
+//TODO: This is a local theme for now, but ideally for the editor as well. Just like prettyViewer, we have a theme. We should have a theme for the editor as well.
+import { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+
+export const SIGNOZ_JSON_THEME_DARK = 'signoz-attr-mapping-json-dark';
+export const SIGNOZ_JSON_THEME_LIGHT = 'signoz-attr-mapping-json-light';
+
+const SHARED_THEME = {
+	inherit: true,
+	colors: {
+		'editor.background': '#00000000', // transparent — inherit the panel bg
+	},
+	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+	fontSize: 12,
+	fontWeight: 'normal',
+	lineHeight: 18,
+	letterSpacing: -0.06,
+};
+
+export function defineSignozJsonTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_DARK, {
+		...SHARED_THEME,
+		base: 'vs-dark',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_400 },
+			{ token: 'string.value.json', foreground: Color.BG_VANILLA_400 },
+		],
+	});
+
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_LIGHT, {
+		...SHARED_THEME,
+		base: 'vs',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_500 },
+			{ token: 'string.value.json', foreground: Color.BG_INK_400 },
+		],
+	});
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts

@@ -0,0 +1,145 @@
+import {
+	SpantypesPostableSpanMapperTestDTO,
+	SpantypesPostableSpanMapperTestGroupDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { isEqual } from 'lodash-es';
+
+import { DraftGroup } from '../types';
+import {
+	buildPostableGroup,
+	buildPostableMapper,
+	groupDraftFromNode,
+	mapperDraftFromNode,
+} from '../utils';
+
+function shouldSendMappers(
+	snap: DraftGroup | undefined,
+	group: DraftGroup,
+): boolean {
+	if (!snap) {
+		return true;
+	}
+	return !isEqual(snap.mappers, group.mappers);
+}
+
+export function buildTestGroups(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): SpantypesPostableSpanMapperTestGroupDTO[] {
+	const snapById = new Map(
+		snapshot
+			.filter((group) => group.serverId)
+			.map((group) => [group.serverId as string, group]),
+	);
+
+	return draft.map((group) => {
+		const base = buildPostableGroup(groupDraftFromNode(group));
+		const snap = group.serverId ? snapById.get(group.serverId) : undefined;
+		return {
+			...base,
+			mappers: shouldSendMappers(snap, group)
+				? group.mappers.map((mapper) =>
+						buildPostableMapper(mapperDraftFromNode(mapper)),
+					)
+				: null,
+		};
+	});
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
+	const keys = Object.keys(parsed);
+	return (
+		keys.length > 0 &&
+		keys.every((key) => key === 'attributes' || key === 'resource') &&
+		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
+	);
+}
+
+export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {
+	const trimmed = input.trim();
+	if (!trimmed) {
+		throw new Error('Paste a JSON span object to run the test.');
+	}
+
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(trimmed);
+	} catch {
+		throw new Error(
+			'Invalid JSON — check for trailing commas or missing quotes.',
+		);
+	}
+
+	if (!isPlainObject(parsed)) {
+		throw new Error('Span must be a JSON object of attribute key-value pairs.');
+	}
+
+	if (isSpanEnvelope(parsed)) {
+		return {
+			attributes: isPlainObject(parsed.attributes) ? parsed.attributes : {},
+			resource: isPlainObject(parsed.resource) ? parsed.resource : {},
+		};
+	}
+
+	return { attributes: parsed, resource: {} };
+}
+
+export function buildTestRequest(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+	input: string,
+): SpantypesPostableSpanMapperTestDTO {
+	return {
+		groups: buildTestGroups(snapshot, draft),
+		spans: [parseSpanInput(input)],
+	};
+}
+
+export type AttrChangeStatus = 'added' | 'changed' | 'unchanged' | 'removed';
+
+export interface AttrDiffEntry {
+	key: string;
+	value: unknown;
+	status: AttrChangeStatus;
+}
+
+// Renders a diff value for display: strings as-is, everything else JSON-encoded.
+export function formatAttributeValue(value: unknown): string {
+	if (typeof value === 'string') {
+		return value;
+	}
+	return JSON.stringify(value);
+}
+
+export function diffAttributeMaps(
+	inputAttributes: Record<string, unknown>,
+	resultAttributes: Record<string, unknown>,
+): AttrDiffEntry[] {
+	const added: AttrDiffEntry[] = [];
+	const changed: AttrDiffEntry[] = [];
+	const unchanged: AttrDiffEntry[] = [];
+	const removed: AttrDiffEntry[] = [];
+
+	Object.entries(resultAttributes).forEach(([key, value]) => {
+		if (!(key in inputAttributes)) {
+			added.push({ key, value, status: 'added' });
+		} else if (!isEqual(inputAttributes[key], value)) {
+			changed.push({ key, value, status: 'changed' });
+		} else {
+			unchanged.push({ key, value, status: 'unchanged' });
+		}
+	});
+
+	Object.entries(inputAttributes).forEach(([key, value]) => {
+		if (!(key in resultAttributes)) {
+			removed.push({ key, value, status: 'removed' });
+		}
+	});
+
+	return [...added, ...changed, ...unchanged, ...removed];
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/useTestSpanMapper.ts

@@ -0,0 +1,127 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+	RenderErrorResponseDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useTestSpanMappers } from 'api/generated/services/spanmapper';
+import { AxiosError } from 'axios';
+
+import { buildTestRequest, parseSpanInput } from './testPayload';
+import { DraftGroup } from '../types';
+
+export type TestTabAttributes = Record<string, unknown>;
+export type TestTabResource = Record<string, unknown>;
+
+export const SAMPLE_SPAN_JSON = `{
+  "attributes": {
+    "my_company.llm.input": "What is quantum computing?",
+    "llm.input_messages": "What is quantum computing?",
+    "gen_ai.request.model": "gpt-4",
+    "gen_ai.usage.total_tokens": 1250,
+    "gen_ai.content.completion": "Quantum computing leverages..."
+  },
+  "resource": {
+    "service.name": "llm-gateway",
+    "deployment.environment": "production"
+  }
+}`;
+
+function apiErrorMessage(error: unknown): string {
+	const axiosError = error as AxiosError<RenderErrorResponseDTO>;
+	return (
+		axiosError?.response?.data?.error?.message ??
+		(error instanceof Error ? error.message : 'Test failed. Please try again.')
+	);
+}
+
+export interface UseTestSpanMapper {
+	input: string;
+	setInput: (value: string) => void;
+	run: () => void;
+	reset: () => void;
+	isRunning: boolean;
+	validationError: string | null;
+	result: SpantypesSpanMapperTestSpanDTO[] | null;
+	testedAttributes: TestTabAttributes | null;
+	testedResource: TestTabResource | null;
+	error: string | null;
+}
+
+export function useTestSpanMapper(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): UseTestSpanMapper {
+	const [input, setInput] = useState<string>(SAMPLE_SPAN_JSON);
+	const [error, setError] = useState<string | null>(null);
+	const [result, setResult] = useState<SpantypesSpanMapperTestSpanDTO[] | null>(
+		null,
+	);
+	const [testedAttributes, setTestedAttributes] =
+		useState<TestTabAttributes | null>(null);
+	const [testedResource, setTestedResource] = useState<TestTabResource | null>(
+		null,
+	);
+
+	const { mutate, isLoading } = useTestSpanMappers();
+
+	const validationError = useMemo((): string | null => {
+		try {
+			parseSpanInput(input);
+			return null;
+		} catch (err) {
+			return err instanceof Error ? err.message : 'Invalid span JSON.';
+		}
+	}, [input]);
+
+	const reset = useCallback((): void => {
+		setError(null);
+		setResult(null);
+		setTestedAttributes(null);
+		setTestedResource(null);
+	}, []);
+
+	const run = useCallback((): void => {
+		reset();
+
+		let body;
+		try {
+			body = buildTestRequest(snapshot, draft, input);
+		} catch (parseError) {
+			setError(apiErrorMessage(parseError));
+			return;
+		}
+
+		const submittedSpan = body.spans?.[0];
+		const submittedAttributes = (submittedSpan?.attributes ??
+			{}) as TestTabAttributes;
+		const submittedResource = (submittedSpan?.resource ?? {}) as TestTabResource;
+
+		mutate(
+			{ data: body },
+			{
+				onSuccess: (response) => {
+					setTestedAttributes(submittedAttributes);
+					setTestedResource(submittedResource);
+					setResult(response.data?.spans ?? []);
+				},
+				onError: (mutationError) => {
+					setResult(null);
+					setError(apiErrorMessage(mutationError));
+				},
+			},
+		);
+	}, [snapshot, draft, input, mutate, reset]);
+
+	return {
+		input,
+		setInput,
+		run,
+		reset,
+		isRunning: isLoading,
+		validationError,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+	};
+}