fix: draft

conf/example.yaml

@@ -13,8 +13,6 @@ global:
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
   # mcp_url: <unset>
-  # the url of the SigNoz AI Assistant server. when unset, the AI Assistant is hidden in the frontend.
-  # ai_assistant_url: <unset>
 
 ##################### Version #####################
 version:

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.121.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.121.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.121.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.121.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -96,122 +96,6 @@ components:
       - createdAt
       - updatedAt
       type: object
-    AlertmanagertypesPostableChannel:
-      oneOf:
-      - required:
-        - discord_configs
-      - required:
-        - email_configs
-      - required:
-        - incidentio_configs
-      - required:
-        - pagerduty_configs
-      - required:
-        - slack_configs
-      - required:
-        - webhook_configs
-      - required:
-        - opsgenie_configs
-      - required:
-        - wechat_configs
-      - required:
-        - pushover_configs
-      - required:
-        - victorops_configs
-      - required:
-        - sns_configs
-      - required:
-        - telegram_configs
-      - required:
-        - webex_configs
-      - required:
-        - msteams_configs
-      - required:
-        - msteamsv2_configs
-      - required:
-        - jira_configs
-      - required:
-        - rocketchat_configs
-      - required:
-        - mattermost_configs
-      properties:
-        discord_configs:
-          items:
-            $ref: '#/components/schemas/ConfigDiscordConfig'
-          type: array
-        email_configs:
-          items:
-            $ref: '#/components/schemas/ConfigEmailConfig'
-          type: array
-        incidentio_configs:
-          items:
-            $ref: '#/components/schemas/ConfigIncidentioConfig'
-          type: array
-        jira_configs:
-          items:
-            $ref: '#/components/schemas/ConfigJiraConfig'
-          type: array
-        mattermost_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMattermostConfig'
-          type: array
-        msteams_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsConfig'
-          type: array
-        msteamsv2_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
-          type: array
-        name:
-          type: string
-        opsgenie_configs:
-          items:
-            $ref: '#/components/schemas/ConfigOpsGenieConfig'
-          type: array
-        pagerduty_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPagerdutyConfig'
-          type: array
-        pushover_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPushoverConfig'
-          type: array
-        rocketchat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigRocketchatConfig'
-          type: array
-        slack_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSlackConfig'
-          type: array
-        sns_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSNSConfig'
-          type: array
-        telegram_configs:
-          items:
-            $ref: '#/components/schemas/ConfigTelegramConfig'
-          type: array
-        victorops_configs:
-          items:
-            $ref: '#/components/schemas/ConfigVictorOpsConfig'
-          type: array
-        webex_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebexConfig'
-          type: array
-        webhook_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebhookConfig'
-          type: array
-        wechat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWechatConfig'
-          type: array
-      required:
-      - name
-      type: object
     AlertmanagertypesPostableRoutePolicy:
       properties:
         channels:
@@ -249,10 +133,6 @@ components:
           type: string
       type: object
     AuthtypesAuthDomainConfig:
-      oneOf:
-      - $ref: '#/components/schemas/AuthtypesSamlConfig'
-      - $ref: '#/components/schemas/AuthtypesGoogleConfig'
-      - $ref: '#/components/schemas/AuthtypesOIDCConfig'
       properties:
         googleAuthConfig:
           $ref: '#/components/schemas/AuthtypesGoogleConfig'
@@ -265,15 +145,8 @@ components:
         ssoEnabled:
           type: boolean
         ssoType:
-          $ref: '#/components/schemas/AuthtypesAuthNProvider'
+          type: string
       type: object
-    AuthtypesAuthNProvider:
-      enum:
-      - google_auth
-      - saml
-      - email_password
-      - oidc
-      type: string
     AuthtypesAuthNProviderInfo:
       properties:
         relayStatePath:
@@ -296,15 +169,11 @@ components:
     AuthtypesCallbackAuthNSupport:
       properties:
         provider:
-          $ref: '#/components/schemas/AuthtypesAuthNProvider'
+          type: string
         url:
           type: string
       type: object
     AuthtypesGettableAuthDomain:
-      oneOf:
-      - $ref: '#/components/schemas/AuthtypesSamlConfig'
-      - $ref: '#/components/schemas/AuthtypesGoogleConfig'
-      - $ref: '#/components/schemas/AuthtypesOIDCConfig'
       properties:
         authNProviderInfo:
           $ref: '#/components/schemas/AuthtypesAuthNProviderInfo'
@@ -328,7 +197,7 @@ components:
         ssoEnabled:
           type: boolean
         ssoType:
-          $ref: '#/components/schemas/AuthtypesAuthNProvider'
+          type: string
         updatedAt:
           format: date-time
           type: string
@@ -454,7 +323,7 @@ components:
     AuthtypesPasswordAuthNSupport:
       properties:
         provider:
-          $ref: '#/components/schemas/AuthtypesAuthNProvider'
+          type: string
       type: object
     AuthtypesPatchableObjects:
       properties:
@@ -2494,9 +2363,6 @@ components:
       type: object
     GlobaltypesConfig:
       properties:
-        ai_assistant_url:
-          nullable: true
-          type: string
         external_url:
           type: string
         identN:
@@ -2510,7 +2376,6 @@ components:
       - external_url
       - ingestion_url
       - mcp_url
-      - ai_assistant_url
       type: object
     GlobaltypesIdentNConfig:
       properties:
@@ -5800,7 +5665,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostableChannel'
+              $ref: '#/components/schemas/ConfigReceiver'
       responses:
         "201":
           content:
@@ -7177,63 +7042,6 @@ paths:
       summary: Delete auth domain
       tags:
       - authdomains
-    get:
-      deprecated: false
-      description: This endpoint returns an auth domain by ID
-      operationId: GetAuthDomain
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AuthtypesGettableAuthDomain'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get auth domain by ID
-      tags:
-      - authdomains
     put:
       deprecated: false
       description: This endpoint updates an auth domain

ee/querier/handler.go

@@ -105,6 +105,10 @@ func (h *handler) QueryRawStream(rw http.ResponseWriter, req *http.Request) {
 	h.community.QueryRawStream(rw, req)
 }
 
+func (h *handler) QueryRangePreview(rw http.ResponseWriter, req *http.Request) {
+	h.community.QueryRangePreview(rw, req)
+}
+
 func (h *handler) ReplaceVariables(rw http.ResponseWriter, req *http.Request) {
 	h.community.ReplaceVariables(rw, req)
 }

frontend/knip.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "project": ["src/**/*.ts", "src/**/*.tsx"],
-  "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"]
+  "ignore": ["src/api/generated/**/*.ts"]
 }

frontend/package.json

@@ -198,7 +198,6 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.1",
-    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
     "eslint-plugin-sonarjs": "4.0.2",
@@ -232,7 +231,6 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
-    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",
@@ -242,7 +240,7 @@
     "*.(js|jsx|ts|tsx)": [
       "oxlint --fix",
       "oxfmt --write",
-      "sh -c tsgo --noEmit"
+      "sh scripts/typecheck-staged.sh"
     ],
     "*.(scss|css)": [
       "stylelint"
@@ -268,4 +266,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/scripts/typecheck-staged.sh

@@ -0,0 +1,25 @@
+files="";
+
+# lint-staged will pass all files in $1 $2 $3 etc. iterate and concat.
+for var in "$@"
+do
+    files="$files \"$var\","
+done
+
+# create temporary tsconfig which includes only passed files
+str="{
+  \"extends\": \"./tsconfig.json\",
+  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
+}"
+echo $str > tsconfig.tmp
+
+# run typecheck using temp config
+tsc -p ./tsconfig.tmp
+
+# capture exit code of tsc
+code=$?
+
+# delete temp config
+rm ./tsconfig.tmp
+
+exit $code

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

@@ -22,8 +22,6 @@ import type {
 	AuthtypesUpdateableAuthDomainDTO,
 	CreateAuthDomain200,
 	DeleteAuthDomainPathParameters,
-	GetAuthDomain200,
-	GetAuthDomainPathParameters,
 	ListAuthDomains200,
 	RenderErrorResponseDTO,
 	UpdateAuthDomainPathParameters,
@@ -279,109 +277,6 @@ export const useDeleteAuthDomain = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint returns an auth domain by ID
- * @summary Get auth domain by ID
- */
-export const getAuthDomain = (
-	{ id }: GetAuthDomainPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetAuthDomain200>({
-		url: `/api/v1/domains/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAuthDomainQueryKey = ({
-	id,
-}: GetAuthDomainPathParameters) => {
-	return [`/api/v1/domains/${id}`] as const;
-};
-
-export const getGetAuthDomainQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAuthDomain>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetAuthDomainPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAuthDomain>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetAuthDomainQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAuthDomain>>> = ({
-		signal,
-	}) => getAuthDomain({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getAuthDomain>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAuthDomainQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAuthDomain>>
->;
-export type GetAuthDomainQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get auth domain by ID
- */
-
-export function useGetAuthDomain<
-	TData = Awaited<ReturnType<typeof getAuthDomain>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetAuthDomainPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAuthDomain>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAuthDomainQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get auth domain by ID
- */
-export const invalidateGetAuthDomain = async (
-	queryClient: QueryClient,
-	{ id }: GetAuthDomainPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAuthDomainQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint updates an auth domain
  * @summary Update auth domain

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

@@ -18,7 +18,6 @@ import type {
 } from 'react-query';
 
 import type {
-	AlertmanagertypesPostableChannelDTO,
 	ConfigReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
@@ -123,14 +122,14 @@ export const invalidateListChannels = async (
  * @summary Create notification channel
  */
 export const createChannel = (
-	alertmanagertypesPostableChannelDTO: BodyType<AlertmanagertypesPostableChannelDTO>,
+	configReceiverDTO: BodyType<ConfigReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateChannel201>({
 		url: `/api/v1/channels`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableChannelDTO,
+		data: configReceiverDTO,
 		signal,
 	});
 };
@@ -142,13 +141,13 @@ export const getCreateChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
+		{ data: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
+	{ data: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	const mutationKey = ['createChannel'];
@@ -162,7 +161,7 @@ export const getCreateChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<AlertmanagertypesPostableChannelDTO> }
+		{ data: BodyType<ConfigReceiverDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -175,8 +174,7 @@ export const getCreateChannelMutationOptions = <
 export type CreateChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createChannel>>
 >;
-export type CreateChannelMutationBody =
-	BodyType<AlertmanagertypesPostableChannelDTO>;
+export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
 export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -189,13 +187,13 @@ export const useCreateChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
+		{ data: BodyType<ConfigReceiverDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
+	{ data: BodyType<ConfigReceiverDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateChannelMutationOptions(options);

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

@@ -437,16 +437,11 @@ export function convertTraceOperatorToV5(
 				panelType,
 			);
 
-			// Skip aggregation for raw request type. Force dataSource to traces so
-			// createAggregation never takes the metrics branch (which would emit a
-			// metricName field the backend rejects for trace operators).
+			// Skip aggregation for raw request type
 			const aggregations =
 				requestType === 'raw'
 					? undefined
-					: createAggregation(
-							{ ...traceOperatorData, dataSource: DataSource.TRACES },
-							panelType,
-						);
+					: createAggregation(traceOperatorData, panelType);
 
 			const spec: QueryEnvelope['spec'] = {
 				name: queryName,

frontend/src/components/Common/Common.styles.scss

@@ -0,0 +1,33 @@
+.error-state-container {
+	height: 240px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+
+	border-radius: 3px;
+
+	.error-state-container-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.error-state-text {
+			font-size: 14px;
+			font-weight: 500;
+		}
+
+		.error-state-additional-messages {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+
+			.error-state-additional-text {
+				font-size: 12px;
+				font-weight: 400;
+				margin-left: 8px;
+			}
+		}
+	}
+}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -0,0 +1,59 @@
+import { Typography } from 'antd';
+
+import APIError from '../../types/api/error';
+
+import './Common.styles.scss';
+
+interface ErrorStateComponentProps {
+	message?: string;
+	error?: APIError;
+}
+
+const defaultProps: Partial<ErrorStateComponentProps> = {
+	message: undefined,
+	error: undefined,
+};
+
+function ErrorStateComponent({
+	message,
+	error,
+}: ErrorStateComponentProps): JSX.Element {
+	// Handle API Error object
+	if (error) {
+		const mainMessage = error.getErrorMessage();
+		const additionalErrors = error.getErrorDetails().error.errors || [];
+
+		return (
+			<div className="error-state-container">
+				<div className="error-state-container-content">
+					<Typography className="error-state-text">{mainMessage}</Typography>
+					{additionalErrors.length > 0 && (
+						<div className="error-state-additional-messages">
+							{additionalErrors.map((additionalError) => (
+								<Typography
+									key={`error-${additionalError.message}`}
+									className="error-state-additional-text"
+								>
+									• {additionalError.message}
+								</Typography>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	// Handle simple string message (backwards compatibility)
+	return (
+		<div className="error-state-container">
+			<div className="error-state-container-content">
+				<Typography className="error-state-text">{message}</Typography>
+			</div>
+		</div>
+	);
+}
+
+ErrorStateComponent.defaultProps = defaultProps;
+
+export default ErrorStateComponent;

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

@@ -0,0 +1,4 @@
+.custom-date-picker {
+	display: flex;
+	flex-direction: column;
+}

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -0,0 +1,105 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { DatePicker } from 'antd';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import {
+	CustomTimeType,
+	LexicalContext,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import dayjs, { Dayjs } from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import './RangePickerModal.styles.scss';
+
+interface RangePickerModalProps {
+	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
+	setIsOpen: Dispatch<SetStateAction<boolean>>;
+	onCustomDateHandler: (
+		dateTimeRange: DateTimeRangeType,
+		lexicalContext?: LexicalContext | undefined,
+	) => void;
+	selectedTime: string;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+}
+
+function RangePickerModal(props: RangePickerModalProps): JSX.Element {
+	const {
+		setCustomDTPickerVisible,
+		setIsOpen,
+		onCustomDateHandler,
+		selectedTime,
+		onTimeChange,
+	} = props;
+	const { RangePicker } = DatePicker;
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// Using any type here because antd's DatePicker expects its own internal Dayjs type
+	// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
+	const disabledDate = (current: any): boolean => {
+		const currentDay = dayjs(current);
+		return currentDay.isAfter(dayjs());
+	};
+
+	const onPopoverClose = (visible: boolean): void => {
+		if (!visible) {
+			setCustomDTPickerVisible(false);
+		}
+		setIsOpen(visible);
+	};
+
+	const onModalOkHandler = (date_time: any): void => {
+		if (date_time?.[1]) {
+			onPopoverClose(false);
+		}
+		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
+	};
+	const { timezone } = useTimezone();
+
+	const rangeValue: [Dayjs, Dayjs] = useMemo(
+		() => [
+			dayjs(minTime / 1000_000).tz(timezone.value),
+			dayjs(maxTime / 1000_000).tz(timezone.value),
+		],
+		[maxTime, minTime, timezone.value],
+	);
+
+	return (
+		<div className="custom-date-picker">
+			<RangePicker
+				disabledDate={disabledDate}
+				allowClear
+				showTime
+				format={(date: Dayjs): string =>
+					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
+				}
+				onOk={onModalOkHandler}
+				data-1p-ignore
+				{...(selectedTime === 'custom' &&
+					!onTimeChange && {
+						value: rangeValue,
+					})}
+				// use default value if onTimeChange is provided
+				{...(selectedTime === 'custom' &&
+					onTimeChange && {
+						defaultValue: rangeValue,
+					})}
+			/>
+		</div>
+	);
+}
+
+RangePickerModal.defaultProps = {
+	onTimeChange: undefined,
+};
+
+export default RangePickerModal;

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -0,0 +1,93 @@
+.details-drawer {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--l1-border);
+	}
+	.ant-drawer-header {
+		background: var(--l2-background);
+		border-bottom: 1px solid var(--l1-border);
+
+		.ant-drawer-header-title {
+			display: flex;
+			align-items: center;
+
+			.ant-drawer-close {
+				margin-inline-end: 0px;
+				padding: 0px;
+				padding-right: 16px;
+				border-right: 1px solid var(--l1-border);
+			}
+
+			.ant-drawer-title {
+				padding-left: 16px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+	.ant-drawer-body {
+		padding: 16px;
+		background: var(--l2-background);
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.details-drawer-tabs {
+		margin-top: 32px;
+
+		.ant-tabs-tab {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 114px;
+			height: 32px;
+			flex-shrink: 0;
+			padding: 7px 20px;
+			border-radius: 2px 0px 0px 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+			letter-spacing: -0.06px;
+
+			.ant-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0px;
+			}
+
+			.ant-btn:hover {
+				background: unset;
+			}
+		}
+
+		.ant-tabs-tab-active {
+			background: var(--l3-background);
+		}
+
+		.ant-tabs-tab + .ant-tabs-tab {
+			margin-left: 0px;
+		}
+
+		.ant-tabs-nav::before {
+			border-bottom: 0px;
+		}
+
+		.ant-tabs-ink-bar {
+			background: none;
+		}
+	}
+}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -0,0 +1,57 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Drawer, Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
+
+import './DetailsDrawer.styles.scss';
+
+interface IDetailsDrawerProps {
+	open: boolean;
+	setOpen: Dispatch<SetStateAction<boolean>>;
+	title: string;
+	descriptiveContent: JSX.Element;
+	defaultActiveKey: string;
+	items: TabsProps['items'];
+	detailsDrawerClassName?: string;
+	tabBarExtraContent?: JSX.Element;
+}
+
+function DetailsDrawer(props: IDetailsDrawerProps): JSX.Element {
+	const {
+		open,
+		setOpen,
+		title,
+		descriptiveContent,
+		defaultActiveKey,
+		detailsDrawerClassName,
+		items,
+		tabBarExtraContent,
+	} = props;
+	return (
+		<Drawer
+			width="60%"
+			open={open}
+			afterOpenChange={setOpen}
+			mask={false}
+			title={title}
+			onClose={(): void => setOpen(false)}
+			className="details-drawer"
+		>
+			<div>{descriptiveContent}</div>
+			<Tabs
+				items={items}
+				addIcon
+				defaultActiveKey={defaultActiveKey}
+				animated
+				className={cx('details-drawer-tabs', detailsDrawerClassName)}
+				tabBarExtraContent={tabBarExtraContent}
+			/>
+		</Drawer>
+	);
+}
+
+DetailsDrawer.defaultProps = {
+	detailsDrawerClassName: '',
+	tabBarExtraContent: null,
+};
+
+export default DetailsDrawer;

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { Button } from 'antd';
+
+import { withErrorBoundary } from './index';
+
+/**
+ * Example component that can throw errors
+ */
+function ProblematicComponent(): JSX.Element {
+	const [shouldThrow, setShouldThrow] = useState(false);
+
+	if (shouldThrow) {
+		throw new Error('This is a test error from ProblematicComponent!');
+	}
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<h3>Problematic Component</h3>
+			<p>This component can throw errors when the button is clicked.</p>
+			<Button type="primary" onClick={(): void => setShouldThrow(true)} danger>
+				Trigger Error
+			</Button>
+		</div>
+	);
+}
+
+/**
+ * Basic usage - wraps component with default error boundary
+ */
+export const SafeProblematicComponent = withErrorBoundary(ProblematicComponent);
+
+/**
+ * Usage with custom fallback component
+ */
+function CustomErrorFallback(): JSX.Element {
+	return (
+		<div
+			style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}
+		>
+			<h4 style={{ color: 'red' }}>Custom Error Fallback</h4>
+			<p>Something went wrong in this specific component!</p>
+			<Button onClick={(): void => window.location.reload()}>Reload Page</Button>
+		</div>
+	);
+}
+
+export const SafeProblematicComponentWithCustomFallback = withErrorBoundary(
+	ProblematicComponent,
+	{
+		fallback: <CustomErrorFallback />,
+	},
+);
+
+/**
+ * Usage with custom error handler
+ */
+export const SafeProblematicComponentWithErrorHandler = withErrorBoundary(
+	ProblematicComponent,
+	{
+		onError: (error, errorInfo) => {
+			console.error('Custom error handler:', error);
+			console.error('Error info:', errorInfo);
+			// You could also send to analytics, logging service, etc.
+		},
+		sentryOptions: {
+			tags: {
+				section: 'dashboard',
+				priority: 'high',
+			},
+			level: 'error',
+		},
+	},
+);
+
+/**
+ * Example of wrapping an existing component from the codebase
+ */
+function ExistingComponent({
+	title,
+	data,
+}: {
+	title: string;
+	data: any[];
+}): JSX.Element {
+	// This could be any existing component that might throw errors
+	return (
+		<div>
+			<h4>{title}</h4>
+			<ul>
+				{data.map((item, index) => (
+					// eslint-disable-next-line react/no-array-index-key
+					<li key={index}>{item.name}</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+
+export const SafeExistingComponent = withErrorBoundary(ExistingComponent, {
+	sentryOptions: {
+		tags: {
+			component: 'ExistingComponent',
+			feature: 'data-display',
+		},
+	},
+});
+
+/**
+ * Usage examples in a container component
+ */
+export function ErrorBoundaryExamples(): JSX.Element {
+	const sampleData = [
+		{ name: 'Item 1' },
+		{ name: 'Item 2' },
+		{ name: 'Item 3' },
+	];
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<h2>Error Boundary HOC Examples</h2>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>1. Basic Usage</h3>
+				<SafeProblematicComponent />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>2. With Custom Fallback</h3>
+				<SafeProblematicComponentWithCustomFallback />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>3. With Custom Error Handler</h3>
+				<SafeProblematicComponentWithErrorHandler />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>4. Wrapped Existing Component</h3>
+				<SafeExistingComponent title="Sample Data" data={sampleData} />
+			</div>
+		</div>
+	);
+}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -0,0 +1,13 @@
+.query-builder-search-wrapper {
+	margin-top: 10px;
+	border: 1px solid var(--l1-border);
+	border-bottom: none;
+
+	.ant-select-selector {
+		border: none !important;
+
+		input {
+			font-size: 12px;
+		}
+	}
+}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -0,0 +1,79 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { ILog } from 'types/api/logs/log';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import './QueryBuilderSearchWrapper.styles.scss';
+
+function QueryBuilderSearchWrapper({
+	log,
+	filters,
+	contextQuery,
+	isEdit,
+	suffixIcon,
+	setFilters,
+	setContextQuery,
+}: QueryBuilderSearchWraperProps): JSX.Element {
+	const initialContextQuery = useInitialQuery(log);
+
+	useEffect(() => {
+		setContextQuery(initialContextQuery);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleSearch = (tagFilters: TagFilter): void => {
+		const tagFiltersLength = tagFilters.items.length;
+
+		if (
+			(!tagFiltersLength && (!filters || !filters.items.length)) ||
+			tagFiltersLength === filters?.items.length ||
+			!contextQuery
+		) {
+			return;
+		}
+
+		const nextQuery: Query = {
+			...contextQuery,
+			builder: {
+				...contextQuery.builder,
+				queryData: contextQuery.builder.queryData.map((item) => ({
+					...item,
+					filters: tagFilters,
+				})),
+			},
+		};
+
+		setFilters({ ...tagFilters });
+		setContextQuery({ ...nextQuery });
+	};
+
+	if (!contextQuery || !isEdit) {
+		return <></>;
+	}
+
+	return (
+		<QueryBuilderSearch
+			query={contextQuery?.builder.queryData[0]}
+			onChange={handleSearch}
+			className="query-builder-search-wrapper"
+			suffixIcon={suffixIcon}
+		/>
+	);
+}
+
+interface QueryBuilderSearchWraperProps {
+	log: ILog;
+	isEdit: boolean;
+	contextQuery: Query | undefined;
+	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
+	filters: TagFilter | null;
+	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
+	suffixIcon?: React.ReactNode;
+}
+
+QueryBuilderSearchWrapper.defaultProps = {
+	suffixIcon: undefined,
+};
+
+export default QueryBuilderSearchWrapper;

frontend/src/components/Logs/RawLogView/config.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export const rawLineStyle: CSSProperties = {};

frontend/src/components/Logs/styles.ts

@@ -0,0 +1,8 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const ButtonContainer = styled(Button)`
+	&&& {
+		padding-left: 0;
+	}
+`;

frontend/src/components/NewSelect/CustomMultiSelect.scss

@@ -0,0 +1,13 @@
+.custom-multiselect-dropdown {
+	.divider {
+		height: 1px;
+		background-color: #e8e8e8;
+		margin: 4px 0;
+	}
+
+	.all-option {
+		font-weight: 500;
+		border-bottom: 1px solid #f0f0f0;
+		margin-bottom: 8px;
+	}
+}

frontend/src/components/PanelDataLoading/PanelDataLoading.styles.scss

@@ -0,0 +1,19 @@
+.loading-panel-data {
+	padding: 24px 0;
+	height: 240px;
+
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+
+	.loading-panel-data-content {
+		display: flex;
+		align-items: flex-start;
+		flex-direction: column;
+
+		.loading-gif {
+			height: 72px;
+			margin-left: -24px;
+		}
+	}
+}

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -0,0 +1,17 @@
+import { Typography } from 'antd';
+
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
+import './PanelDataLoading.styles.scss';
+
+export function PanelDataLoading(): JSX.Element {
+	return (
+		<div className="loading-panel-data">
+			<div className="loading-panel-data-content">
+				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+
+				<Typography.Text>Fetching data...</Typography.Text>
+			</div>
+		</div>
+	);
+}

frontend/src/components/Styled/styles.ts

@@ -0,0 +1,41 @@
+import { css, FlattenSimpleInterpolation } from 'styled-components';
+
+const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
+	key &&
+	value &&
+	css`
+		${key}: ${value};
+	`;
+
+interface IFlexProps {
+	flexDirection?: string; // Need to replace this with exact css props. Not able to find any :(
+	flex?: number | string;
+}
+export const Flex = ({
+	flexDirection,
+	flex,
+}: IFlexProps): FlattenSimpleInterpolation => css`
+	${cssProperty('flex-direction', flexDirection)}
+	${cssProperty('flex', flex)}
+`;
+
+interface IDisplayProps {
+	display?: string;
+}
+export const Display = ({
+	display,
+}: IDisplayProps): FlattenSimpleInterpolation => css`
+	${cssProperty('display', display)}
+`;
+
+interface ISpacingProps {
+	margin?: string;
+	padding?: string;
+}
+export const Spacing = ({
+	margin,
+	padding,
+}: ISpacingProps): FlattenSimpleInterpolation => css`
+	${cssProperty('margin', margin)}
+	${cssProperty('padding', padding)}
+`;

frontend/src/components/TabLabel/TabLabel.interfaces.ts

@@ -0,0 +1,5 @@
+export type TabLabelProps = {
+	isDisabled: boolean;
+	label: string;
+	tooltipText?: string;
+};

frontend/src/components/TabLabel/index.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { Tooltip } from 'antd';
+
+import { TabLabelProps } from './TabLabel.interfaces';
+
+function TabLabel({
+	label,
+	isDisabled,
+	tooltipText,
+}: TabLabelProps): JSX.Element {
+	const currentLabel = <span data-testid={`${label}`}>{label}</span>;
+
+	if (isDisabled) {
+		return (
+			<Tooltip
+				trigger="hover"
+				autoAdjustOverflow
+				placement="top"
+				title={tooltipText}
+			>
+				{currentLabel}
+			</Tooltip>
+		);
+	}
+
+	return currentLabel;
+}
+
+export default memo(TabLabel);

frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss

@@ -0,0 +1,5 @@
+.tab-title {
+	display: flex;
+	gap: 4px;
+	align-items: center;
+}

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd/lib';
+import { History, Table } from 'lucide-react';
+
+import { ALERT_TABS } from '../constants';
+
+import './Tabs.styles.scss';
+
+export function Tabs(): JSX.Element {
+	const [selectedTab, setSelectedTab] = useState('overview');
+
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedTab(e.target.value);
+	};
+
+	return (
+		<Radio.Group className="tabs" onChange={handleTabChange} value={selectedTab}>
+			<Radio.Button
+				className={
+					selectedTab === ALERT_TABS.OVERVIEW ? 'selected_view tab' : 'tab'
+				}
+				value={ALERT_TABS.OVERVIEW}
+			>
+				<div className="tab-title">
+					<Table size={14} />
+					Overview
+				</div>
+			</Radio.Button>
+			<Radio.Button
+				className={selectedTab === ALERT_TABS.HISTORY ? 'selected_view tab' : 'tab'}
+				value={ALERT_TABS.HISTORY}
+			>
+				<div className="tab-title">
+					<History size={14} />
+					History
+				</div>
+			</Radio.Button>
+		</Radio.Group>
+	);
+}

frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss

@@ -0,0 +1,18 @@
+@mixin flex-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tabs-and-filters {
+	@include flex-center;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	.filters {
+		@include flex-center;
+		gap: 16px;
+		.reset-button {
+			@include flex-center;
+		}
+	}
+}

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -0,0 +1,16 @@
+import { Filters } from 'components/AlertDetailsFilters/Filters';
+
+import { Tabs } from './Tabs/Tabs';
+
+import './TabsAndFilters.styles.scss';
+
+function TabsAndFilters(): JSX.Element {
+	return (
+		<div className="tabs-and-filters">
+			<Tabs />
+			<Filters />
+		</div>
+	);
+}
+
+export default TabsAndFilters;

frontend/src/components/TabsAndFilters/constants.ts

@@ -0,0 +1,5 @@
+export const ALERT_TABS = {
+	OVERVIEW: 'OVERVIEW',
+	HISTORY: 'HISTORY',
+	ACTIVITY: 'ACTIVITY',
+} as const;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -47,16 +47,10 @@ function TanStackCustomTableRow<TData>({
 	const isActive = context?.isRowActive?.(rowData) ?? false;
 	const extraClass = context?.getRowClassName?.(rowData) ?? '';
 	const rowStyle = context?.getRowStyle?.(rowData);
-	const enableAlternatingRowColors =
-		context?.enableAlternatingRowColors ?? false;
 
 	const rowClassName = cx(
 		tableStyles.tableRow,
 		isActive && tableStyles.tableRowActive,
-		enableAlternatingRowColors &&
-			(item.row.index % 2 === 0
-				? tableStyles.tableRowEven
-				: tableStyles.tableRowOdd),
 		extraClass,
 	);
 
@@ -111,12 +105,6 @@ function areTableRowPropsEqual<TData>(
 	if (prev.context?.columnVisibilityKey !== next.context?.columnVisibilityKey) {
 		return false;
 	}
-	if (
-		prev.context?.enableAlternatingRowColors !==
-		next.context?.enableAlternatingRowColors
-	) {
-		return false;
-	}
 
 	if (prev.context !== next.context) {
 		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -2,10 +2,7 @@
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	padding: var(--tanstack-cell-padding-top, 0.3rem)
-		var(--tanstack-cell-padding-right, 0.3rem)
-		var(--tanstack-cell-padding-bottom, 0.3rem)
-		var(--tanstack-cell-padding-left, 0.3rem);
+	padding: 0.3rem;
 	transform: translate3d(
 		var(--tanstack-header-translate-x, 0px),
 		var(--tanstack-header-translate-y, 0px),
@@ -22,17 +19,7 @@
 	}
 
 	border: none !important;
-	background-color: var(
-		--tanstack-table-header-cell-bg,
-		var(--l2-background)
-	) !important;
-
-	&:first-child {
-		background-color: var(
-			--tanstack-first-column-header-bg,
-			var(--tanstack-table-header-cell-bg, var(--l2-background))
-		) !important;
-	}
+	background-color: var(--l2-background) !important;
 }
 
 .tanstackHeaderContent {
@@ -74,7 +61,7 @@
 	width: 12px;
 	height: 12px;
 	cursor: grab;
-	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
+	color: var(--l2-foreground);
 	opacity: 1;
 	touch-action: none;
 }
@@ -87,7 +74,7 @@
 	height: 20px;
 	cursor: pointer;
 	flex-shrink: 0;
-	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
+	color: var(--l2-foreground);
 
 	margin-left: auto;
 }
@@ -95,9 +82,8 @@
 .tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
-	background: var(--tanstack-table-header-cell-bg, var(--l2-background));
-	border: 1px solid
-		var(--tanstack-table-header-cell-actions-border-color, var(--l2-border));
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
 	border-radius: 4px;
 	box-shadow: none;
 }
@@ -151,7 +137,7 @@
 }
 
 .tanstackHeaderCell.isResizing .cursorColResize {
-	background: var(--tanstack-table-resize-active-bg, var(--bg-robin-300));
+	background: var(--bg-robin-300);
 }
 
 .tanstackResizeHandleLine {
@@ -161,7 +147,7 @@
 	left: 50%;
 	width: 4px;
 	transform: translateX(-50%);
-	background: var(--tanstack-table-resize-handle-bg, var(--l2-background));
+	background: var(--l2-background);
 	opacity: 1;
 	pointer-events: none;
 	transition:
@@ -169,34 +155,13 @@
 		width 120ms ease;
 }
 
-.tanstackHeaderCell:first-child .tanstackResizeHandleLine {
-	background: var(
-		--tanstack-first-column-header-bg,
-		var(--tanstack-table-resize-handle-bg, var(--l2-background))
-	);
-}
-
 .cursorColResize:hover .tanstackResizeHandleLine {
-	background: var(--tanstack-table-resize-handle-hover-bg, var(--l2-border));
-}
-
-.tanstackHeaderCell:first-child
-	.cursorColResize:hover
-	.tanstackResizeHandleLine {
-	background: color-mix(
-		in srgb,
-		var(
-				--tanstack-first-column-header-bg,
-				var(--tanstack-table-resize-handle-bg, var(--l2-background))
-			)
-			60%,
-		black
-	);
+	background: var(--l2-border);
 }
 
 .tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
-	background: var(--tanstack-table-resize-handle-active-bg, var(--bg-robin-500));
+	background: var(--bg-robin-500);
 	transition: none;
 }
 
@@ -248,12 +213,7 @@
 	flex-shrink: 0;
 	width: 14px;
 	height: 14px;
-	color: var(--l3-foreground);
-
-	&[data-sort-direction='asc'],
-	&[data-sort-direction='desc'] {
-		color: var(--primary);
-	}
+	color: var(--l2-foreground);
 }
 
 .isSortable {

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -9,7 +9,7 @@ import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
-import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from 'lucide-react';
+import { ChevronDown, ChevronUp, GripVertical } from 'lucide-react';
 
 import { SortState, TableColumnDef } from './types';
 
@@ -177,17 +177,12 @@ function TanStackHeaderRow<TData>({
 									? column.header()
 									: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 						</span>
-						<span
-							className={headerStyles.tanstackSortIndicator}
-							data-sort-direction={currentSortDirection || 'none'}
-						>
+						<span className={headerStyles.tanstackSortIndicator}>
 							{currentSortDirection === 'asc' ? (
-								<ArrowUp size={SORT_ICON_SIZE} />
+								<ChevronUp size={SORT_ICON_SIZE} />
 							) : currentSortDirection === 'desc' ? (
-								<ArrowDown size={SORT_ICON_SIZE} />
-							) : (
-								<ArrowUpDown size={SORT_ICON_SIZE} />
-							)}
+								<ChevronDown size={SORT_ICON_SIZE} />
+							) : null}
 						</span>
 					</button>
 				) : (

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -1,22 +1,4 @@
 .tanStackTable {
-	--tanstack-cell-padding: var(--tanstack-cell-padding-override, 0.3rem);
-	--tanstack-cell-padding-left: var(
-		--tanstack-cell-padding-left-override,
-		var(--tanstack-cell-padding)
-	);
-	--tanstack-cell-padding-right: var(
-		--tanstack-cell-padding-right-override,
-		var(--tanstack-cell-padding)
-	);
-	--tanstack-cell-padding-top: var(
-		--tanstack-cell-padding-top-override,
-		var(--tanstack-cell-padding)
-	);
-	--tanstack-cell-padding-bottom: var(
-		--tanstack-cell-padding-bottom-override,
-		var(--tanstack-cell-padding)
-	);
-
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
@@ -44,7 +26,7 @@
 	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--tanstack-table-cell-color, var(--l2-foreground));
+	color: var(--l2-foreground);
 	max-width: 100%;
 	word-break: break-all;
 }
@@ -60,35 +42,13 @@
 }
 
 .tableCell {
-	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
-		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: var(--tanstack-table-row-height, auto);
+	padding: 0.3rem;
 	font-style: normal;
 	font-weight: 400;
 	letter-spacing: -0.07px;
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--tanstack-table-cell-color, var(--l2-foreground));
-	background-color: var(--tanstack-table-cell-bg, transparent);
-
-	&:first-child {
-		padding: var(
-				--tanstack-cell-padding-top-first-column,
-				var(--tanstack-cell-padding-top)
-			)
-			var(
-				--tanstack-cell-padding-right-first-column,
-				var(--tanstack-cell-padding-right)
-			)
-			var(
-				--tanstack-cell-padding-bottom-first-column,
-				var(--tanstack-cell-padding-bottom)
-			)
-			var(
-				--tanstack-cell-padding-left-first-column,
-				var(--tanstack-cell-padding-left)
-			);
-	}
+	color: var(--l2-foreground);
 }
 
 .tableRow {
@@ -98,69 +58,19 @@
 
 	&:hover {
 		.tableCell {
-			background-color: var(
-				--tanstack-table-row-hover-bg,
-				var(--row-hover-bg)
-			) !important;
+			background-color: var(--row-hover-bg) !important;
 		}
 	}
 
 	&.tableRowActive {
 		.tableCell {
-			background-color: var(
-				--tanstack-table-row-active-bg,
-				var(--row-active-bg)
-			) !important;
+			background-color: var(--row-active-bg) !important;
 		}
 	}
-
-	&.tableRowOdd {
-		.tableCell {
-			background-color: var(--tanstack-table-row-odd-bg, transparent);
-		}
-	}
-
-	&.tableRowEven {
-		.tableCell {
-			background-color: var(--tanstack-table-row-even-bg, transparent);
-		}
-	}
-
-	.tableCell:first-child {
-		background-color: var(
-			--tanstack-first-column-bg,
-			var(--tanstack-table-cell-bg, transparent)
-		);
-		color: var(
-			--tanstack-first-column-color,
-			var(--tanstack-table-cell-color, var(--l2-foreground))
-		);
-	}
-
-	&.tableRowOdd .tableCell:first-child {
-		background-color: var(
-			--tanstack-first-column-odd-bg,
-			var(
-				--tanstack-first-column-bg,
-				var(--tanstack-table-row-odd-bg, transparent)
-			)
-		);
-	}
-
-	&.tableRowEven .tableCell:first-child {
-		background-color: var(
-			--tanstack-first-column-even-bg,
-			var(
-				--tanstack-first-column-bg,
-				var(--tanstack-table-row-even-bg, transparent)
-			)
-		);
-	}
 }
 
 .tableHeaderCell {
-	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
-		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
+	padding: 0.3rem;
 	height: 36px;
 	text-align: left;
 	font-size: 14px;
@@ -168,40 +78,20 @@
 	font-weight: 400;
 	line-height: 18px;
 	letter-spacing: -0.07px;
-	color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
-	background: var(--tanstack-table-header-cell-bg, var(--l1-background));
-	border-bottom: 1px solid var(--tanstack-table-header-border-color, transparent);
+	color: var(--l1-foreground);
+
+	// TODO: Remove this once background color (l1) is matching the actual background color of the page
+	&[data-dark-mode='true'] {
+		background: #0b0c0d;
+	}
+
+	&[data-dark-mode='false'] {
+		background: #fdfdfd;
+	}
 }
 
 .tableRowExpansion {
 	display: table-row;
-
-	.tableCellExpansion {
-		background-color: var(--tanstack-table-header-cell-bg, var(--l1-background));
-		color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
-	}
-
-	& > td {
-		padding: 0;
-	}
-
-	& thead th:first-child {
-		padding-left: var(
-			--tanstack-expansion-first-col-padding-left,
-			calc(var(--spacing-3) - 1px)
-		);
-	}
-
-	& tbody td:first-child {
-		padding-left: var(
-			--tanstack-expansion-first-col-padding-left,
-			calc(var(--spacing-20) + var(--spacing-4))
-		);
-	}
-
-	:global(thead) {
-		position: unset !important;
-	}
 }
 
 .tableCellExpansion {

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -90,7 +90,6 @@ function TanStackTableInner<TData>(
 		skeletonRowCount = 10,
 		enableQueryParams,
 		pagination,
-		paginationClassname,
 		onEndReached,
 		getRowKey,
 		getItemKey,
@@ -113,17 +112,9 @@ function TanStackTableInner<TData>(
 		testId,
 		prefixPaginationContent,
 		suffixPaginationContent,
-		enableAlternatingRowColors,
-		disableVirtualScroll,
 	}: TanStackTableProps<TData>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
-	if (disableVirtualScroll && onEndReached) {
-		throw new Error(
-			'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
-		);
-	}
-
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -230,15 +221,6 @@ function TanStackTableInner<TData>(
 		[getRowCanExpand],
 	);
 
-	const isExpandEnabled = Boolean(renderExpandedRow);
-	useEffect(() => {
-		const hasExpanded =
-			typeof expanded === 'boolean' ? expanded : Object.keys(expanded).length > 0;
-		if (!isExpandEnabled && hasExpanded) {
-			setExpanded({});
-		}
-	}, [isExpandEnabled, expanded, setExpanded]);
-
 	const table = useReactTable({
 		data: effectiveData,
 		columns: tanstackColumns,
@@ -247,7 +229,7 @@ function TanStackTableInner<TData>(
 		columnResizeMode: 'onChange',
 		getCoreRowModel: getCoreRowModel(),
 		getRowId,
-		enableExpanding: isExpandEnabled,
+		enableExpanding: Boolean(renderExpandedRow),
 		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
 		onColumnSizingChange: handleColumnSizingChange,
 		onColumnVisibilityChange: noopColumnVisibility,
@@ -351,7 +333,6 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
-			enableAlternatingRowColors,
 		}),
 		[
 			getRowStyle,
@@ -369,7 +350,6 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
-			enableAlternatingRowColors,
 		],
 	);
 
@@ -520,10 +500,7 @@ function TanStackTableInner<TData>(
 	);
 
 	return (
-		<div
-			className={cx(viewStyles.tanstackTableViewWrapper, className)}
-			data-has-group-by={(groupBy?.length || 0) > 0}
-		>
+		<div className={cx(viewStyles.tanstackTableViewWrapper, className)}>
 			<TanStackTableStateProvider>
 				<TableLoadingSync
 					isLoading={isLoading}
@@ -531,53 +508,23 @@ function TanStackTableInner<TData>(
 				/>
 				<ColumnVisibilitySync visibility={effectiveVisibility} />
 				<TooltipProvider>
-					{disableVirtualScroll ? (
-						<div
-							className={virtuosoClassName}
-							{...restTableScrollerProps}
-							data-testid={testId}
-						>
-							<table className={tableStyles.tanStackTable} style={virtuosoTableStyle}>
-								<VirtuosoTableColGroup columns={effectiveColumns} table={table} />
-								<thead>{tableHeader()}</thead>
-								<tbody>
-									{(isLoading && data.length === 0
-										? flatItems.slice(0, skeletonRowCount)
-										: flatItems
-									).map((item, index) => (
-										<TanStackCustomTableRow
-											key={
-												item.kind === 'expansion' ? `${item.row.id}-expansion` : item.row.id
-											}
-											item={item}
-											context={virtuosoContext}
-											data-index={index}
-											data-item-index={index}
-											data-known-size={0}
-										/>
-									))}
-								</tbody>
-							</table>
-						</div>
-					) : (
-						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
-							className={virtuosoClassName}
-							ref={virtuosoRef}
-							{...restTableScrollerProps}
-							data={flatItems}
-							totalCount={flatItems.length}
-							context={virtuosoContext}
-							increaseViewportBy={INCREASE_VIEWPORT_BY}
-							initialTopMostItemIndex={
-								flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
-							}
-							fixedHeaderContent={tableHeader}
-							style={virtuosoTableStyle}
-							components={virtuosoComponents}
-							endReached={onEndReached ? handleEndReached : undefined}
-							data-testid={testId}
-						/>
-					)}
+					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						className={virtuosoClassName}
+						ref={virtuosoRef}
+						{...restTableScrollerProps}
+						data={flatItems}
+						totalCount={flatItems.length}
+						context={virtuosoContext}
+						increaseViewportBy={INCREASE_VIEWPORT_BY}
+						initialTopMostItemIndex={
+							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+						}
+						fixedHeaderContent={tableHeader}
+						style={virtuosoTableStyle}
+						components={virtuosoComponents}
+						endReached={onEndReached ? handleEndReached : undefined}
+						data-testid={testId}
+					/>
 					{showInfiniteScrollLoader && (
 						<div
 							className={viewStyles.tanstackLoadingOverlay}
@@ -587,7 +534,7 @@ function TanStackTableInner<TData>(
 						</div>
 					)}
 					{showPagination && pagination && (
-						<div className={cx(viewStyles.paginationContainer, paginationClassname)}>
+						<div className={viewStyles.paginationContainer}>
 							{prefixPaginationContent}
 							<Pagination
 								current={page}

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import type { ColumnSizingState } from '@tanstack/react-table';
+import { Skeleton } from 'antd';
+
+import { TableColumnDef } from './types';
+import { getColumnWidthStyle } from './utils';
+
+import tableStyles from './TanStackTable.module.scss';
+import styles from './TanStackTableSkeleton.module.scss';
+
+type TanStackTableSkeletonProps<TData> = {
+	columns: TableColumnDef<TData>[];
+	rowCount: number;
+	isDarkMode: boolean;
+	columnSizing?: ColumnSizingState;
+};
+
+export function TanStackTableSkeleton<TData>({
+	columns,
+	rowCount,
+	isDarkMode,
+	columnSizing,
+}: TanStackTableSkeletonProps<TData>): JSX.Element {
+	const rows = useMemo(
+		() => Array.from({ length: rowCount }, (_, i) => i),
+		[rowCount],
+	);
+
+	return (
+		<table className={tableStyles.tanStackTable}>
+			<colgroup>
+				{columns.map((column, index) => (
+					<col
+						key={column.id}
+						style={getColumnWidthStyle(
+							column,
+							columnSizing?.[column.id],
+							index === columns.length - 1,
+						)}
+					/>
+				))}
+			</colgroup>
+			<thead>
+				<tr>
+					{columns.map((column) => (
+						<th
+							key={column.id}
+							className={tableStyles.tableHeaderCell}
+							data-dark-mode={isDarkMode}
+						>
+							{typeof column.header === 'function' ? (
+								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
+							) : (
+								column.header
+							)}
+						</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{rows.map((rowIndex) => (
+					<tr key={rowIndex} className={tableStyles.tableRow}>
+						{columns.map((column) => (
+							<td key={column.id} className={tableStyles.tableCell}>
+								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -49,8 +49,7 @@
 	width: 100%;
 	overflow-x: auto;
 	scrollbar-width: thin;
-	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-slate-300))
-		transparent;
+	scrollbar-color: var(--bg-slate-300) transparent;
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -66,12 +65,12 @@
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--tanstack-table-scrollbar-color, var(--bg-slate-300));
+		background: var(--bg-slate-300);
 		border-radius: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--tanstack-table-scrollbar-hover-color, var(--bg-slate-200));
+		background: var(--bg-slate-200);
 	}
 
 	&.cellTypographySmall {
@@ -136,25 +135,18 @@
 	z-index: 3;
 	border-radius: 8px;
 	padding: 8px 16px;
-	background: var(--tanstack-table-loading-overlay-bg, var(--l1-background));
-	box-shadow: var(
-		--tanstack-table-loading-overlay-shadow,
-		0 2px 8px rgba(0, 0, 0, 0.15)
-	);
+	background: var(--l1-background);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 :global(.lightMode) .tanstackTableVirtuosoScroll {
-	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300))
-		transparent;
+	scrollbar-color: var(--bg-vanilla-300) transparent;
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300));
+		background: var(--bg-vanilla-300);
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(
-			--tanstack-table-scrollbar-hover-color,
-			var(--bg-vanilla-100)
-		);
+		background: var(--bg-vanilla-100);
 	}
 }

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

@@ -389,101 +389,6 @@ describe('TanStackTableView Integration', () => {
 			// by checking the table renders without errors
 			expect(screen.getByRole('table')).toBeInTheDocument();
 		});
-
-		it('renders without errors when expanded state exists but expansion is disabled', async () => {
-			// This tests that the table handles the case where URL has expanded state
-			// but renderExpandedRow is undefined (expansion disabled).
-			// The table's useEffect should reset expanded state automatically.
-			renderTanStackTable({
-				props: {
-					enableQueryParams: true,
-					// renderExpandedRow is undefined - expansion disabled
-				},
-				queryParams: { expanded: '["1"]' },
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Table should render without any expanded rows
-			expect(screen.queryByTestId('expanded-content')).not.toBeInTheDocument();
-		});
-
-		it('renders expanded rows with unique keys in non-virtualized mode', async () => {
-			// This tests that row and expansion items have unique keys to avoid
-			// React's "duplicate key" warning when disableVirtualScroll is true
-			renderTanStackTable({
-				props: {
-					disableVirtualScroll: true,
-					enableQueryParams: true,
-					renderExpandedRow: (row) => (
-						<div data-testid={`expanded-${row.id}`}>Expanded: {row.name}</div>
-					),
-					getRowCanExpand: () => true,
-					getRowKey: (row) => row.id,
-				},
-				queryParams: { expanded: '["1"]' },
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Both the row and its expansion content should be rendered
-			expect(screen.getByTestId('expanded-1')).toBeInTheDocument();
-			expect(screen.getByText('Expanded: Item 1')).toBeInTheDocument();
-
-			// Verify all 3 data rows plus 1 expansion row = 4 tr elements in tbody
-			const tbody = screen.getByRole('table').querySelector('tbody');
-			expect(tbody?.querySelectorAll('tr')).toHaveLength(4);
-		});
-	});
-
-	describe('disableVirtualScroll', () => {
-		it('throws error when used with onEndReached', () => {
-			expect(() => {
-				renderTanStackTable({
-					props: {
-						disableVirtualScroll: true,
-						onEndReached: jest.fn(),
-					},
-				});
-			}).toThrow(
-				'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
-			);
-		});
-
-		it('renders all rows without virtualization', async () => {
-			renderTanStackTable({
-				props: {
-					disableVirtualScroll: true,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-				expect(screen.getByText('Item 2')).toBeInTheDocument();
-				expect(screen.getByText('Item 3')).toBeInTheDocument();
-			});
-
-			// Verify table structure exists
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-
-		it('renders column headers without virtualization', async () => {
-			renderTanStackTable({
-				props: {
-					disableVirtualScroll: true,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('ID')).toBeInTheDocument();
-				expect(screen.getByText('Name')).toBeInTheDocument();
-				expect(screen.getByText('Value')).toBeInTheDocument();
-			});
-		});
 	});
 
 	describe('infinite scroll', () => {

frontend/src/components/TanStackTableView/__tests__/useTableParams.test.tsx

@@ -138,10 +138,7 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 
 	it('reads initial page from URL params', () => {
 		const wrapper = createNuqsWrapper({ page: '3' });
-		// Pass matching default to prevent reset on mount (page resets when orderBy changes)
-		const { result } = renderHook(() => useTableParams(true, { page: 3 }), {
-			wrapper,
-		});
+		const { result } = renderHook(() => useTableParams(true), { wrapper });
 		expect(result.current.page).toBe(3);
 	});
 
@@ -252,294 +249,3 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 		expect(result.current.orderBy).toBeNull();
 	});
 });
-
-describe('useTableParams (selective URL mode — partial config object)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('syncs only page to URL when only page is configured', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams({ page: 'myPage' }), {
-			wrapper,
-		});
-
-		// Update page - should sync to URL
-		act(() => {
-			result.current.setPage(5);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(5);
-		const lastPage = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('myPage'))
-			.filter(Boolean)
-			.pop();
-		expect(lastPage).toBe('5');
-
-		// Update limit - should stay local (not in URL)
-		act(() => {
-			result.current.setLimit(100);
-			jest.runAllTimers();
-		});
-		expect(result.current.limit).toBe(100);
-		const limitInUrl = onUrlUpdate.mock.calls.some(
-			(call) => call[0].searchParams.get('limit') !== null,
-		);
-		expect(limitInUrl).toBe(false);
-
-		// Update orderBy - should stay local (not in URL)
-		act(() => {
-			result.current.setOrderBy({ columnName: 'test', order: 'asc' });
-			jest.runAllTimers();
-		});
-		expect(result.current.orderBy).toStrictEqual({
-			columnName: 'test',
-			order: 'asc',
-		});
-		const orderByInUrl = onUrlUpdate.mock.calls.some(
-			(call) => call[0].searchParams.get('order_by') !== null,
-		);
-		expect(orderByInUrl).toBe(false);
-	});
-
-	it('syncs only orderBy to URL when only orderBy is configured', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams({ orderBy: 'mySort' }), {
-			wrapper,
-		});
-
-		// Update orderBy - should sync to URL
-		act(() => {
-			result.current.setOrderBy({ columnName: 'cpu', order: 'desc' });
-			jest.runAllTimers();
-		});
-		expect(result.current.orderBy).toStrictEqual({
-			columnName: 'cpu',
-			order: 'desc',
-		});
-		const lastOrderBy = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('mySort'))
-			.filter(Boolean)
-			.pop();
-		expect(lastOrderBy).toBeDefined();
-		expect(JSON.parse(lastOrderBy!)).toStrictEqual({
-			columnName: 'cpu',
-			order: 'desc',
-		});
-
-		// Update page - should stay local
-		act(() => {
-			result.current.setPage(3);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(3);
-		const pageInUrl = onUrlUpdate.mock.calls.some(
-			(call) => call[0].searchParams.get('page') !== null,
-		);
-		expect(pageInUrl).toBe(false);
-	});
-
-	it('syncs only limit to URL when only limit is configured', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams({ limit: 'myLimit' }), {
-			wrapper,
-		});
-
-		// Update limit - should sync to URL
-		act(() => {
-			result.current.setLimit(25);
-			jest.runAllTimers();
-		});
-		expect(result.current.limit).toBe(25);
-		const lastLimit = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('myLimit'))
-			.filter(Boolean)
-			.pop();
-		expect(lastLimit).toBe('25');
-
-		// Update page - should stay local
-		act(() => {
-			result.current.setPage(2);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(2);
-		const pageInUrl = onUrlUpdate.mock.calls.some(
-			(call) => call[0].searchParams.get('page') !== null,
-		);
-		expect(pageInUrl).toBe(false);
-	});
-
-	it('syncs only expanded to URL when only expanded is configured', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(
-			() => useTableParams({ expanded: 'myExpanded' }),
-			{ wrapper },
-		);
-
-		// Update expanded - should sync to URL
-		act(() => {
-			result.current.setExpanded({ 'row-1': true, 'row-2': true });
-			jest.runAllTimers();
-		});
-		expect(result.current.expanded).toStrictEqual({
-			'row-1': true,
-			'row-2': true,
-		});
-		const lastExpanded = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('myExpanded'))
-			.filter(Boolean)
-			.pop();
-		expect(lastExpanded).toBeDefined();
-		expect(JSON.parse(lastExpanded!)).toEqual(
-			expect.arrayContaining(['row-1', 'row-2']),
-		);
-
-		// Update page - should stay local
-		act(() => {
-			result.current.setPage(4);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(4);
-		const pageInUrl = onUrlUpdate.mock.calls.some(
-			(call) => call[0].searchParams.get('page') !== null,
-		);
-		expect(pageInUrl).toBe(false);
-	});
-
-	it('syncs page and orderBy to URL but keeps limit and expanded local', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(
-			() => useTableParams({ page: 'p', orderBy: 'sort' }),
-			{ wrapper },
-		);
-
-		// Update limit and expanded first (should stay local)
-		act(() => {
-			result.current.setLimit(75);
-			result.current.setExpanded({ 'row-5': true });
-			jest.runAllTimers();
-		});
-
-		expect(result.current.limit).toBe(75);
-		expect(result.current.expanded).toStrictEqual({ 'row-5': true });
-
-		// Update page (should sync to URL)
-		act(() => {
-			result.current.setPage(2);
-			jest.runAllTimers();
-		});
-
-		expect(result.current.page).toBe(2);
-		const lastPage = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('p'))
-			.filter(Boolean)
-			.pop();
-		expect(lastPage).toBe('2');
-
-		// Update orderBy (should sync to URL, and resets page to default)
-		act(() => {
-			result.current.setOrderBy({ columnName: 'name', order: 'asc' });
-			jest.runAllTimers();
-		});
-
-		expect(result.current.orderBy).toStrictEqual({
-			columnName: 'name',
-			order: 'asc',
-		});
-		const lastOrderBy = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('sort'))
-			.filter(Boolean)
-			.pop();
-		expect(lastOrderBy).toBeDefined();
-
-		// limit should NOT be in URL
-		const limitInUrl = onUrlUpdate.mock.calls.some(
-			(call) =>
-				call[0].searchParams.get('limit') !== null ||
-				call[0].searchParams.get('myLimit') !== null,
-		);
-		expect(limitInUrl).toBe(false);
-
-		// expanded should NOT be in URL
-		const expandedInUrl = onUrlUpdate.mock.calls.some(
-			(call) =>
-				call[0].searchParams.get('expanded') !== null ||
-				call[0].searchParams.get('myExpanded') !== null,
-		);
-		expect(expandedInUrl).toBe(false);
-	});
-
-	it('reads initial values from URL for configured params only', () => {
-		const wrapper = createNuqsWrapper({
-			customPage: '7',
-			limit: '999', // This should be ignored since limit is not configured
-		});
-		const { result } = renderHook(
-			// Pass page default matching URL to prevent reset on mount
-			() => useTableParams({ page: 'customPage' }, { page: 7 }),
-			{ wrapper },
-		);
-
-		// Page should come from URL
-		expect(result.current.page).toBe(7);
-		// Limit should be default (not from URL since it's not configured)
-		expect(result.current.limit).toBe(50);
-	});
-
-	it('supports updater function for expanded state', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams({ expanded: 'exp' }), {
-			wrapper,
-		});
-
-		// Set initial expanded state
-		act(() => {
-			result.current.setExpanded({ 'row-1': true });
-		});
-		expect(result.current.expanded).toStrictEqual({ 'row-1': true });
-
-		// Use updater function to add another row
-		act(() => {
-			result.current.setExpanded((prev) => ({
-				...(typeof prev === 'boolean' ? {} : prev),
-				'row-2': true,
-			}));
-		});
-		expect(result.current.expanded).toStrictEqual({
-			'row-1': true,
-			'row-2': true,
-		});
-	});
-
-	it('supports updater function for local expanded state', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-
-		// Set initial expanded state
-		act(() => {
-			result.current.setExpanded({ 'row-a': true });
-		});
-		expect(result.current.expanded).toStrictEqual({ 'row-a': true });
-
-		// Use updater function
-		act(() => {
-			result.current.setExpanded((prev) => ({
-				...(typeof prev === 'boolean' ? {} : prev),
-				'row-b': true,
-			}));
-		});
-		expect(result.current.expanded).toStrictEqual({
-			'row-a': true,
-			'row-b': true,
-		});
-	});
-});

frontend/src/components/TanStackTableView/index.tsx

@@ -171,27 +171,6 @@ export * from './useTableParams';
  *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-scroller' }}
  * />
  * ```
- *
- * @example Disable virtual scroll — useful for nested tables inside expanded rows.
- * Virtual scroll requires a fixed height container, which is problematic for nested tables
- * that need dynamic height. Use `disableVirtualScroll` when rendering tables inside
- * `renderExpandedRow` to allow the nested table to grow based on content.
- * Note: Cannot be combined with `onEndReached` (infinite scroll requires virtualization).
- * ```tsx
- * // Parent table with expandable rows
- * <TanStackTable
- *   data={parentData}
- *   columns={parentColumns}
- *   renderExpandedRow={(row) => (
- *     // Nested table without virtualization — height adapts to content
- *     <TanStackTable
- *       data={row.children}
- *       columns={childColumns}
- *       disableVirtualScroll
- *     />
- *   )}
- * />
- * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/types.ts

@@ -107,8 +107,6 @@ export type TableRowContext<TData> = {
 	columnOrderKey: string;
 	/** Column visibility key for memo invalidation on visibility change */
 	columnVisibilityKey: string;
-	/** Enable alternating row background colors (zebra striping) */
-	enableAlternatingRowColors?: boolean;
 };
 
 export type PaginationProps = {
@@ -118,10 +116,10 @@ export type PaginationProps = {
 };
 
 export type TanstackTableQueryParamsConfig = {
-	page?: string;
-	limit?: string;
-	orderBy?: string;
-	expanded?: string;
+	page: string;
+	limit: string;
+	orderBy: string;
+	expanded: string;
 };
 
 export type TanStackTableProps<TData> = {
@@ -139,7 +137,6 @@ export type TanStackTableProps<TData> = {
 	skeletonRowCount?: number;
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig;
 	pagination?: PaginationProps;
-	paginationClassname?: string;
 	onEndReached?: (index: number) => void;
 	/** Function to get the unique key for a row (before duplicate handling).
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
@@ -179,10 +176,6 @@ export type TanStackTableProps<TData> = {
 	prefixPaginationContent?: ReactNode;
 	/** Content rendered after the pagination controls */
 	suffixPaginationContent?: ReactNode;
-	/** Enable alternating row background colors (zebra striping) */
-	enableAlternatingRowColors?: boolean;
-	/** Disable virtual scrolling and render all rows at once. Cannot be used with onEndReached. */
-	disableVirtualScroll?: boolean;
 };
 
 export type TanStackTableHandle = TableVirtuosoHandle & {

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -8,12 +8,6 @@ import { SortState, TanstackTableQueryParamsConfig } from './types';
 const NUQS_OPTIONS = { history: 'push' as const };
 const DEFAULT_PAGE = 1;
 const DEFAULT_LIMIT = 50;
-const URL_KEYS_DEFAULT = {
-	page: 'page',
-	limit: 'limit',
-	orderBy: 'order_by',
-	expanded: 'expanded',
-} as const;
 
 type Defaults = {
 	page?: number;
@@ -55,49 +49,30 @@ export function useTableParams(
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig,
 	defaults?: Defaults,
 ): TableParamsResult {
-	// Determine which params should sync to URL vs use local state
-	const isObjectConfig = typeof enableQueryParams === 'object';
-	const useUrlForPage =
-		enableQueryParams === true ||
-		typeof enableQueryParams === 'string' ||
-		(isObjectConfig && enableQueryParams.page !== undefined);
-	const useUrlForLimit =
-		enableQueryParams === true ||
-		typeof enableQueryParams === 'string' ||
-		(isObjectConfig && enableQueryParams.limit !== undefined);
-	const useUrlForOrderBy =
-		enableQueryParams === true ||
-		typeof enableQueryParams === 'string' ||
-		(isObjectConfig && enableQueryParams.orderBy !== undefined);
-	const useUrlForExpanded =
-		enableQueryParams === true ||
-		typeof enableQueryParams === 'string' ||
-		(isObjectConfig && enableQueryParams.expanded !== undefined);
-
 	const pageQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_${URL_KEYS_DEFAULT.page}`
-			: isObjectConfig
-				? (enableQueryParams.page ?? URL_KEYS_DEFAULT.page)
-				: URL_KEYS_DEFAULT.page;
+			? `${enableQueryParams}_page`
+			: typeof enableQueryParams === 'object'
+				? enableQueryParams.page
+				: 'page';
 	const limitQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_${URL_KEYS_DEFAULT.limit}`
-			: isObjectConfig
-				? (enableQueryParams.limit ?? URL_KEYS_DEFAULT.limit)
-				: URL_KEYS_DEFAULT.limit;
+			? `${enableQueryParams}_limit`
+			: typeof enableQueryParams === 'object'
+				? enableQueryParams.limit
+				: 'limit';
 	const orderByQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_${URL_KEYS_DEFAULT.orderBy}`
-			: isObjectConfig
-				? (enableQueryParams.orderBy ?? URL_KEYS_DEFAULT.orderBy)
-				: URL_KEYS_DEFAULT.orderBy;
+			? `${enableQueryParams}_order_by`
+			: typeof enableQueryParams === 'object'
+				? enableQueryParams.orderBy
+				: 'order_by';
 	const expandedQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_${URL_KEYS_DEFAULT.expanded}`
-			: isObjectConfig
-				? (enableQueryParams.expanded ?? URL_KEYS_DEFAULT.expanded)
-				: URL_KEYS_DEFAULT.expanded;
+			? `${enableQueryParams}_expanded`
+			: typeof enableQueryParams === 'object'
+				? enableQueryParams.expanded
+				: 'expanded';
 	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
 	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
 	const orderByDefault = defaults?.orderBy ?? null;
@@ -174,29 +149,45 @@ export function useTableParams(
 
 	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
+	const isEnabledQueryParams =
+		typeof enableQueryParams === 'string' ||
+		typeof enableQueryParams === 'object';
 
 	useEffect(() => {
-		if (useUrlForPage) {
+		if (isEnabledQueryParams) {
 			setUrlPage(pageDefault);
 		} else {
 			setLocalPage(pageDefault);
 		}
 	}, [
-		useUrlForPage,
+		isEnabledQueryParams,
 		orderByDefaultMemoKey,
 		orderByUrlMemoKey,
 		pageDefault,
 		setUrlPage,
 	]);
 
+	if (enableQueryParams) {
+		return {
+			page: urlPage,
+			limit: urlLimit,
+			orderBy: urlOrderBy as SortState | null,
+			expanded: urlExpanded,
+			setPage: setUrlPage,
+			setLimit: setUrlLimit,
+			setOrderBy: setUrlOrderBy,
+			setExpanded: setUrlExpanded,
+		};
+	}
+
 	return {
-		page: useUrlForPage ? urlPage : localPage,
-		limit: useUrlForLimit ? urlLimit : localLimit,
-		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
-		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
-		setPage: useUrlForPage ? setUrlPage : setLocalPage,
-		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimit,
-		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
-		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,
+		page: localPage,
+		limit: localLimit,
+		orderBy: localOrderBy,
+		expanded: localExpanded,
+		setPage: setLocalPage,
+		setLimit: setLocalLimit,
+		setOrderBy: setLocalOrderBy,
+		setExpanded: handleSetLocalExpanded,
 	};
 }

frontend/src/components/TanStackTableView/utils.ts

@@ -35,10 +35,7 @@ export const getColumnWidthStyle = <TData>(
 ): CSSProperties => {
 	// Last column always fills remaining space
 	if (isLastColumn) {
-		return {
-			width: '100%',
-			minWidth: persistedWidth ?? column?.width?.min,
-		};
+		return { width: '100%' };
 	}
 
 	const { width } = column;
@@ -62,19 +59,10 @@ export const getColumnWidthStyle = <TData>(
 	};
 };
 
-const isSkeletonRow = (row: unknown): boolean => {
-	const r = row as Record<string, unknown>;
-	return typeof r?.id === 'string' && r.id.startsWith('skeleton-');
-};
-
 const buildAccessorFn = <TData>(
 	colDef: TableColumnDef<TData>,
 ): ((row: TData) => unknown) => {
 	return (row: TData): unknown => {
-		// Skip accessor for skeleton rows to avoid errors with missing properties
-		if (isSkeletonRow(row)) {
-			return undefined;
-		}
 		if (colDef.accessorFn) {
 			return colDef.accessorFn(row);
 		}

frontend/src/components/TimePreferenceDropDown/styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+interface TextContainerProps {
+	noButtonMargin?: boolean;
+}
+
+export const TextContainer = styled.div<TextContainerProps>`
+	display: flex;
+
+	> button {
+		margin-left: ${({ noButtonMargin }): string =>
+			noButtonMargin ? '0' : '0.5rem'}
+`;

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -0,0 +1,42 @@
+import { ReactChild } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, Space, Typography } from 'antd';
+
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
+import { Container, LeftContainer, Logo } from './styles';
+
+const { Title } = Typography;
+
+function WelcomeLeftContainer({
+	version,
+	children,
+}: WelcomeLeftContainerProps): JSX.Element {
+	const { t } = useTranslation();
+
+	return (
+		<Container>
+			<LeftContainer direction="vertical">
+				<Space align="center">
+					<Logo src={signozBrandLogoUrl} alt="logo" />
+					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
+				</Space>
+				<Typography>{t('monitor_signup')}</Typography>
+				<Card
+					style={{ width: 'max-content' }}
+					bodyStyle={{ padding: '1px 8px', width: '100%' }}
+				>
+					SigNoz {version}
+				</Card>
+			</LeftContainer>
+			{children}
+		</Container>
+	);
+}
+
+interface WelcomeLeftContainerProps {
+	version: string;
+	children: ReactChild;
+}
+
+export default WelcomeLeftContainer;

frontend/src/components/WelcomeLeftContainer/styles.ts

@@ -0,0 +1,23 @@
+import { Space } from 'antd';
+import styled from 'styled-components';
+
+export const LeftContainer = styled(Space)`
+	flex: 1;
+`;
+
+export const Logo = styled.img`
+	width: 60px;
+`;
+
+export const Container = styled.div`
+	&&& {
+		display: flex;
+		justify-content: center;
+		gap: 16px;
+		align-items: center;
+		min-height: 100vh;
+
+		max-width: 1024px;
+		margin: 0 auto;
+	}
+`;

frontend/src/container/AlertHistory/Timeline/Table/types.ts

@@ -0,0 +1,9 @@
+import {
+	AlertRuleTimelineTableResponse,
+	AlertRuleTimelineTableResponsePayload,
+} from 'types/api/alerts/def';
+
+export type TimelineTableProps = {
+	timelineData: AlertRuleTimelineTableResponse[];
+	totalItems: AlertRuleTimelineTableResponsePayload['data']['total'];
+};

frontend/src/container/AlertHistory/Timeline/constants.ts

@@ -0,0 +1,2 @@
+// setting to 25 hours because we want to display the horizontal graph when the user selects 'Last 1 day' from date and time selector
+export const HORIZONTAL_GRAPH_HOURS_THRESHOLD = 25;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointDetailsZeroState.tsx

@@ -0,0 +1,42 @@
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
+import EndPointsDropDown from './EndPointsDropDown';
+
+function EndPointDetailsZeroState({
+	setSelectedEndPointName,
+	endPointDropDownDataQuery,
+}: {
+	setSelectedEndPointName: (endPointName: string) => void;
+	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>>;
+}): JSX.Element {
+	return (
+		<div className="end-point-details-zero-state-wrapper">
+			<div className="end-point-details-zero-state-content">
+				<img
+					src={noDataUrl}
+					alt="no-data"
+					width={32}
+					height={32}
+					className="end-point-details-zero-state-icon"
+				/>
+				<div className="end-point-details-zero-state-content-wrapper">
+					<div className="end-point-details-zero-state-text-content">
+						<div className="title">No endpoint selected yet</div>
+						<div className="description">Select an endpoint to see the details</div>
+					</div>
+					<EndPointsDropDown
+						setSelectedEndPointName={setSelectedEndPointName}
+						endPointDropDownDataQuery={endPointDropDownDataQuery}
+						parentContainerDiv=".end-point-details-zero-state-wrapper"
+						dropdownStyle={{ width: '60%' }}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default EndPointDetailsZeroState;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ExpandedRow.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin, Table } from 'antd';
+import type { ColumnType } from 'antd/lib/table';
+import logEvent from 'api/common/logEvent';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	createFiltersForSelectedRowData,
+	EndPointsTableRowData,
+	formatEndPointsDataForTable,
+	getEndPointsColumnsConfig,
+	getEndPointsQueryPayload,
+} from 'container/ApiMonitoring/utils';
+import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { VIEW_TYPES, VIEWS } from '../constants';
+
+function ExpandedRow({
+	domainName,
+	selectedRowData,
+	setSelectedEndPointName,
+	setSelectedView,
+	orderBy,
+}: {
+	domainName: string;
+	selectedRowData: EndPointsTableRowData;
+	setSelectedEndPointName: (name: string) => void;
+	setSelectedView: (view: VIEWS) => void;
+	orderBy: OrderByPayload | null;
+}): JSX.Element {
+	const nestedColumns = useMemo(() => getEndPointsColumnsConfig(false, []), []);
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const groupedByRowDataQueryPayload = useMemo(() => {
+		if (!selectedRowData) {
+			return null;
+		}
+
+		const filters = createFiltersForSelectedRowData(selectedRowData);
+
+		const baseQueryPayload = getEndPointsQueryPayload(
+			[],
+			domainName,
+			Math.floor(minTime / 1e9),
+			Math.floor(maxTime / 1e9),
+		);
+
+		return baseQueryPayload.map((currentQueryPayload) => ({
+			...currentQueryPayload,
+			query: {
+				...currentQueryPayload.query,
+				builder: {
+					...currentQueryPayload.query.builder,
+					queryData: currentQueryPayload.query.builder.queryData.map(
+						(queryData) => ({
+							...queryData,
+							filters: {
+								items: [...(queryData.filters?.items || []), ...(filters?.items || [])],
+								op: 'AND',
+							},
+						}),
+					),
+				},
+			},
+		}));
+	}, [domainName, minTime, maxTime, selectedRowData]);
+
+	const groupedByRowQueries = useQueries(
+		groupedByRowDataQueryPayload
+			? groupedByRowDataQueryPayload.map((payload) => ({
+					queryKey: [
+						`${REACT_QUERY_KEY.GET_NESTED_ENDPOINTS_LIST}-${domainName}-${selectedRowData?.key}`,
+						payload,
+						ENTITY_VERSION_V4,
+						selectedRowData?.key,
+					],
+					queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+						GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+					enabled: !!payload && !!selectedRowData,
+				}))
+			: [],
+	);
+
+	const groupedByRowQuery = groupedByRowQueries[0];
+	return (
+		<div className="expanded-table-container">
+			{groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading ? (
+				<LoadingContainer />
+			) : (
+				<div className="expanded-table">
+					<Table
+						columns={nestedColumns as ColumnType<EndPointsTableRowData>[]}
+						dataSource={
+							groupedByRowQuery?.data
+								? formatEndPointsDataForTable(
+										groupedByRowQuery.data?.payload.data.result[0].table?.rows,
+										[],
+										orderBy,
+									)
+								: []
+						}
+						pagination={false}
+						scroll={{ x: true }}
+						tableLayout="fixed"
+						showHeader={false}
+						loading={{
+							spinning: groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading,
+							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+						}}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
+								setSelectedEndPointName(record.endpointName);
+								setSelectedView(VIEW_TYPES.ENDPOINT_STATS);
+								logEvent('API Monitoring: Endpoint name row clicked', {});
+							},
+							className: 'expanded-clickable-row',
+						})}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExpandedRow;

frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx

@@ -0,0 +1,33 @@
+import { PureComponent } from 'react';
+
+interface State {
+	hasError: boolean;
+}
+
+interface Props {
+	children: JSX.Element;
+}
+
+class ErrorLink extends PureComponent<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(): State {
+		return { hasError: true };
+	}
+
+	render(): JSX.Element {
+		const { children } = this.props;
+		const { hasError } = this.state;
+
+		if (hasError) {
+			return <div />;
+		}
+
+		return children;
+	}
+}
+
+export default ErrorLink;

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
+	const isInternalLink = href.startsWith('/');
+
+	if (isInternalLink) {
+		return <Link to={href}>{children}</Link>;
+	}
+
+	return (
+		<a rel="noreferrer" target="_blank" href={href}>
+			{children}
+		</a>
+	);
+}
+
+interface LinkContainerProps {
+	children: ReactNode;
+	href: string;
+}
+
+export default LinkContainer;

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -0,0 +1,49 @@
+import { lazy, Suspense, useMemo } from 'react';
+import { Menu, Space } from 'antd';
+import Spinner from 'components/Spinner';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
+import { lazyRetry } from 'utils/lazyWithRetries';
+
+import ErrorLink from './ErrorLink';
+import LinkContainer from './Link';
+
+function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
+	const sortedConfig = useMemo(
+		() => config.components.sort((a, b) => a.position - b.position),
+		[config.components],
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const items = sortedConfig.map((item) => {
+		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
+
+		const Component = lazy(() =>
+			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
+		);
+		return {
+			key: item.text + item.href,
+			label: (
+				<ErrorLink key={item.text + item.href}>
+					<Suspense fallback={<Spinner height="5vh" />}>
+						<LinkContainer href={item.href}>
+							<Space size="small" align="start">
+								<Component />
+								{item.text}
+							</Space>
+						</LinkContainer>
+					</Suspense>
+				</ErrorLink>
+			),
+		};
+	});
+
+	return <Menu items={items} />;
+}
+
+interface HelpToolTipProps {
+	config: ConfigProps;
+}
+
+export default HelpToolTip;

frontend/src/container/ConfigDropdown/index.tsx

@@ -0,0 +1,76 @@
+import { useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import {
+	CaretDownFilled,
+	CaretUpFilled,
+	QuestionCircleFilled,
+	QuestionCircleOutlined,
+} from '@ant-design/icons';
+import { Space } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { AppState } from 'store/reducers';
+import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
+import AppReducer from 'types/reducer/app';
+
+import HelpToolTip from './Config';
+import { ConfigDropdown } from './styles';
+
+function DynamicConfigDropdown({
+	frontendId,
+}: DynamicConfigDropdownProps): JSX.Element {
+	const { configs } = useSelector<AppState, AppReducer>((state) => state.app);
+	const isDarkMode = useIsDarkMode();
+	const [isHelpDropDownOpen, setIsHelpDropDownOpen] = useState<boolean>(false);
+
+	const config = useMemo(
+		() =>
+			Object.values(configs).find(
+				(config) => config.frontendPositionId === frontendId,
+			),
+		[frontendId, configs],
+	);
+
+	const onToggleHandler = (): void => {
+		setIsHelpDropDownOpen(!isHelpDropDownOpen);
+	};
+
+	const menu = useMemo(
+		() => ({
+			items: [
+				{
+					key: '1',
+					label: <HelpToolTip config={config as ConfigProps} />,
+				},
+			],
+		}),
+		[config],
+	);
+
+	if (!config) {
+		return <div />;
+	}
+
+	const Icon = isDarkMode ? QuestionCircleOutlined : QuestionCircleFilled;
+	const DropDownIcon = isHelpDropDownOpen ? CaretUpFilled : CaretDownFilled;
+
+	return (
+		<ConfigDropdown
+			onOpenChange={onToggleHandler}
+			trigger={['click']}
+			menu={menu}
+			open={isHelpDropDownOpen}
+		>
+			<Space align="center">
+				<Icon style={{ fontSize: 26, color: 'white', paddingTop: 26 }} />
+				<DropDownIcon style={{ color: 'white' }} />
+			</Space>
+		</ConfigDropdown>
+	);
+}
+
+interface DynamicConfigDropdownProps {
+	frontendId: string;
+}
+
+export default DynamicConfigDropdown;

frontend/src/container/ConfigDropdown/styles.ts

@@ -0,0 +1,6 @@
+import { Dropdown } from 'antd';
+import styled from 'styled-components';
+
+export const ConfigDropdown = styled(Dropdown)`
+	cursor: pointer;
+`;

frontend/src/container/CreateAlertV2/EvaluationSettings/index.ts

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

frontend/src/container/CreateAlertV2/Footer/utils.tsx

@@ -220,7 +220,6 @@ export function buildCreateThresholdAlertRulePayload(
 		builderQueries: {
 			...mapQueryDataToApi(query.builder.queryData, 'queryName').data,
 			...mapQueryDataToApi(query.builder.queryFormulas, 'queryName').data,
-			...mapQueryDataToApi(query.builder.queryTraceOperator, 'queryName').data,
 		},
 		promQueries: mapQueryDataToApi(query.promql, 'name').data,
 		chQueries: mapQueryDataToApi(query.clickhouse_sql, 'name').data,

frontend/src/container/DashboardContainer/DashboardDescription/DashboardName/index.tsx

@@ -0,0 +1,27 @@
+import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
+import Input from 'components/Input';
+
+function DashboardName({ setName, name }: DashboardNameProps): JSX.Element {
+	const onChangeHandler = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => {
+			setName(e.target.value);
+		},
+		[setName],
+	);
+
+	return (
+		<Input
+			size="middle"
+			placeholder="Title"
+			value={name}
+			onChangeHandler={onChangeHandler}
+		/>
+	);
+}
+
+interface DashboardNameProps {
+	name: string;
+	setName: Dispatch<SetStateAction<string>>;
+}
+
+export default DashboardName;

frontend/src/container/DashboardContainer/DashboardDescription/ShareModal.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import { CopyFilled, DownloadOutlined } from '@ant-design/icons';
+import { Button, Modal } from 'antd';
+import Editor from 'components/Editor';
+import { useNotifications } from 'hooks/useNotifications';
+import { DashboardData } from 'types/api/dashboard/getAll';
+
+import { downloadObjectAsJson } from './utils';
+
+function ShareModal({
+	isJSONModalVisible,
+	onToggleHandler,
+	selectedData,
+}: ShareModalProps): JSX.Element {
+	const getParsedValue = (): string => JSON.stringify(selectedData, null, 2);
+
+	const [jsonValue, setJSONValue] = useState<string>(getParsedValue());
+	const { t } = useTranslation(['dashboard', 'common']);
+	const [state, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	useEffect(() => {
+		if (state.error) {
+			notifications.error({
+				message: t('something_went_wrong', {
+					ns: 'common',
+				}),
+			});
+		}
+
+		if (state.value) {
+			notifications.success({
+				message: t('success', {
+					ns: 'common',
+				}),
+			});
+		}
+	}, [state.error, state.value, t, notifications]);
+
+	const GetFooterComponent = useMemo(() => {
+		return (
+			<>
+				<Button
+					style={{
+						marginTop: '16px',
+					}}
+					onClick={(): void => setCopy(jsonValue)}
+					type="primary"
+					size="small"
+				>
+					<CopyFilled /> {t('copy_to_clipboard')}
+				</Button>
+
+				<Button
+					type="primary"
+					size="small"
+					onClick={(): void => {
+						downloadObjectAsJson(selectedData, selectedData.title);
+					}}
+				>
+					<DownloadOutlined /> {t('download_json')}
+				</Button>
+			</>
+		);
+	}, [jsonValue, selectedData, setCopy, t]);
+
+	return (
+		<Modal
+			open={isJSONModalVisible}
+			onCancel={(): void => {
+				onToggleHandler();
+			}}
+			width="80vw"
+			centered
+			title={t('share', {
+				ns: 'common',
+			})}
+			okText={t('download_json')}
+			cancelText={t('cancel')}
+			destroyOnClose
+			footer={GetFooterComponent}
+		>
+			<Editor
+				height="70vh"
+				onChange={(value): void => setJSONValue(value)}
+				value={jsonValue}
+			/>
+		</Modal>
+	);
+}
+
+interface ShareModalProps {
+	isJSONModalVisible: boolean;
+	onToggleHandler: VoidFunction;
+	selectedData: DashboardData;
+}
+
+export default ShareModal;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/index.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
+import { Input } from 'antd';
+
+import { Container } from './styles';
+
+const { TextArea } = Input;
+
+function Description({
+	description,
+	setDescription,
+}: DescriptionProps): JSX.Element {
+	const onChangeHandler = useCallback(
+		(e: ChangeEvent<HTMLTextAreaElement>) => {
+			setDescription(e.target.value);
+		},
+		[setDescription],
+	);
+
+	return (
+		<Container>
+			<TextArea
+				placeholder="Description of the dashboard"
+				onChange={onChangeHandler}
+				value={description}
+			/>
+		</Container>
+	);
+}
+
+interface DescriptionProps {
+	description: string;
+	setDescription: Dispatch<SetStateAction<string>>;
+}
+
+export default Description;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	margin-top: 1rem;
+`;

frontend/src/container/DownloadV2/DownloadV2.styles.scss

@@ -0,0 +1,59 @@
+.download-logs-popover {
+	.ant-popover-inner {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 12px 18px 12px 14px;
+
+		.download-logs-content {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			align-items: flex-start;
+
+			.action-btns {
+				padding: 4px 0px !important;
+				width: 159px;
+				display: flex;
+				align-items: center;
+				color: var(--l2-foreground);
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				gap: 6px;
+
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+
+			.action-btns:hover {
+				&.ant-btn-text {
+					background-color: color-mix(
+						in srgb,
+						var(--bg-robin-200) 4%,
+						transparent
+					) !important;
+				}
+			}
+
+			.export-heading {
+				color: var(--muted-foreground);
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.88px;
+				text-transform: uppercase;
+			}
+		}
+	}
+}

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Button, Popover, Typography } from 'antd';
+import { FileDigit, FileDown, Sheet } from 'lucide-react';
+import { unparse } from 'papaparse';
+
+import { DownloadProps } from './DownloadV2.types';
+
+import './DownloadV2.styles.scss';
+
+function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
+	const [isDownloading, setIsDownloading] = useState(false);
+
+	const downloadExcelFile = async (): Promise<void> => {
+		setIsDownloading(true);
+
+		try {
+			const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
+				const updatedTitle = item
+					.split('_')
+					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+					.join(' ');
+				return {
+					title: updatedTitle,
+					dataIndex: item,
+				};
+			});
+			const excelLib = await import('antd-table-saveas-excel');
+			const excel = new excelLib.Excel();
+			excel
+				.addSheet(fileName)
+				.addColumns(headers)
+				.addDataSource(data, {
+					str2Percent: true,
+				})
+				.saveAs(`${fileName}.xlsx`);
+		} finally {
+			setIsDownloading(false);
+		}
+	};
+
+	const downloadCsvFile = (): void => {
+		const csv = unparse(data);
+		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		const csvUrl = URL.createObjectURL(csvBlob);
+		const downloadLink = document.createElement('a');
+		downloadLink.href = csvUrl;
+		downloadLink.download = `${fileName}.csv`;
+		downloadLink.click();
+		downloadLink.remove();
+	};
+
+	return (
+		<Popover
+			trigger={['click']}
+			placement="bottomRight"
+			rootClassName="download-logs-popover"
+			arrow={false}
+			content={
+				<div className="download-logs-content">
+					<Typography.Text className="export-heading">Export As</Typography.Text>
+					<Button
+						icon={<Sheet size={14} />}
+						type="text"
+						onClick={downloadExcelFile}
+						className="action-btns"
+						loading={isDownloading}
+					>
+						Excel (.xlsx)
+					</Button>
+					<Button
+						icon={<FileDigit size={14} />}
+						type="text"
+						onClick={downloadCsvFile}
+						className="action-btns"
+					>
+						CSV
+					</Button>
+				</div>
+			}
+		>
+			<Button
+				className="periscope-btn ghost"
+				loading={isLoading}
+				icon={<FileDown size={14} />}
+			/>
+		</Popover>
+	);
+}
+
+Download.defaultProps = {
+	isLoading: undefined,
+};
+
+export default Download;

frontend/src/container/DownloadV2/DownloadV2.types.ts

@@ -0,0 +1,10 @@
+export type DownloadOptions = {
+	isDownloadEnabled: boolean;
+	fileName: string;
+};
+
+export type DownloadProps = {
+	data: Record<string, string>[];
+	isLoading?: boolean;
+	fileName: string;
+};

frontend/src/container/EditRules/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const ButtonContainer = styled.div`
+	&&& {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+
+		margin-top: 2rem;
+	}
+`;

frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts

@@ -0,0 +1,8 @@
+import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+
+export type ExplorerControlPanelProps = {
+	selectedOptionFormat: string;
+	isShowPageSize: boolean;
+	isLoading: boolean;
+	optionsMenuConfig?: OptionsMenuConfig;
+};

frontend/src/container/ExplorerControlPanel/index.tsx

@@ -0,0 +1,33 @@
+import { Col, Row } from 'antd';
+import OptionsMenu from 'container/OptionsMenu';
+import PageSizeSelect from 'container/PageSizeSelect';
+
+import { ExplorerControlPanelProps } from './ExplorerControlPanel.interfaces';
+import { ContainerStyled } from './styles';
+
+function ExplorerControlPanel({
+	selectedOptionFormat,
+	isLoading,
+	isShowPageSize,
+	optionsMenuConfig,
+}: ExplorerControlPanelProps): JSX.Element {
+	return (
+		<ContainerStyled>
+			<Row justify="end" gutter={30}>
+				{optionsMenuConfig && (
+					<Col>
+						<OptionsMenu
+							selectedOptionFormat={selectedOptionFormat}
+							config={optionsMenuConfig}
+						/>
+					</Col>
+				)}
+				<Col>
+					<PageSizeSelect isLoading={isLoading} isShow={isShowPageSize} />
+				</Col>
+			</Row>
+		</ContainerStyled>
+	);
+}
+
+export default ExplorerControlPanel;

frontend/src/container/ExplorerControlPanel/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ContainerStyled = styled.div`
+	margin-bottom: 0.3rem;
+`;

frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx

@@ -0,0 +1,61 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Form, Input, Select } from 'antd';
+import { LabelFilterStatement } from 'container/CreateAlertChannels/config';
+
+const { Option } = Select;
+
+// LabelFilterForm supports filters or matchers on alert notifications
+// presently un-used but will be introduced to the channel creation at some
+// point
+function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
+	return (
+		<Form.Item name="label_filter" label="Notify When (Optional)">
+			<Input.Group compact>
+				<Select
+					defaultValue="Severity"
+					style={{ width: '15%' }}
+					onChange={(event): void => {
+						setFilter((value) => {
+							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
+							first.name = event;
+							return [first];
+						});
+					}}
+				>
+					<Option value="severity">Severity</Option>
+					<Option value="service">Service</Option>
+				</Select>
+				<Select
+					defaultValue="="
+					onChange={(event): void => {
+						setFilter((value) => {
+							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
+							first.comparator = event;
+							return [first];
+						});
+					}}
+				>
+					<Option value="=">=</Option>
+					<Option value="!=">!=</Option>
+				</Select>
+				<Input
+					style={{ width: '20%' }}
+					placeholder="enter a text here"
+					onChange={(event): void => {
+						setFilter((value) => {
+							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
+							first.value = event.target.value;
+							return [first];
+						});
+					}}
+				/>
+			</Input.Group>
+		</Form.Item>
+	);
+}
+
+export interface LabelFilterProps {
+	setFilter: Dispatch<SetStateAction<Partial<Array<LabelFilterStatement>>>>;
+}
+
+export default LabelFilterForm;

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

@@ -0,0 +1,164 @@
+import { Trans, useTranslation } from 'react-i18next';
+import { Col, Row, Typography } from 'antd';
+import TextToolTip from 'components/TextToolTip';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	StyledList,
+	StyledListItem,
+	StyledMainContainer,
+	StyledTopic,
+} from './styles';
+
+function UserGuide({ queryType }: UserGuideProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const renderStep1QB = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
+				<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
+				<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+	const renderStep2QB = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderStep3QB = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderGuideForQB = (): JSX.Element => (
+		<>
+			{renderStep1QB()}
+			{renderStep2QB()}
+			{renderStep3QB()}
+		</>
+	);
+	const renderStep1PQL = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+	const renderStep2PQL = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderStep3PQL = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderGuideForPQL = (): JSX.Element => (
+		<>
+			{renderStep1PQL()}
+			{renderStep2PQL()}
+			{renderStep3PQL()}
+		</>
+	);
+
+	const renderStep1CH = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>
+					<Trans
+						i18nKey="user_guide_ch_step1a"
+						t={t}
+						components={[
+							<a
+								key={1}
+								target="_blank"
+								href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
+							/>,
+						]}
+					/>
+				</StyledListItem>
+				<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+	const renderStep2CH = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderStep3CH = (): JSX.Element => (
+		<>
+			<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
+			<StyledList>
+				<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
+				<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
+			</StyledList>
+		</>
+	);
+
+	const renderGuideForCH = (): JSX.Element => (
+		<>
+			{renderStep1CH()}
+			{renderStep2CH()}
+			{renderStep3CH()}
+		</>
+	);
+	return (
+		<StyledMainContainer>
+			<Row>
+				<Col flex="auto">
+					<Typography.Paragraph> {t('user_guide_headline')} </Typography.Paragraph>
+				</Col>
+				<Col flex="none">
+					<TextToolTip
+						text={t('user_tooltip_more_help')}
+						url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
+					/>
+				</Col>
+			</Row>
+			{queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()}
+			{queryType === EQueryType.PROM && renderGuideForPQL()}
+			{queryType === EQueryType.CLICKHOUSE && renderGuideForCH()}
+		</StyledMainContainer>
+	);
+}
+
+interface UserGuideProps {
+	queryType: EQueryType;
+}
+
+export default UserGuide;

frontend/src/container/FormAlertRules/UserGuide/styles.ts

@@ -0,0 +1,17 @@
+import { Card, Typography } from 'antd';
+import styled from 'styled-components';
+
+export const StyledMainContainer = styled(Card)``;
+
+export const StyledTopic = styled(Typography.Paragraph)`
+	font-weight: 600;
+`;
+
+export const StyledList = styled.ul`
+	padding-left: 18px;
+`;
+
+export const StyledListItem = styled.li`
+	font-style: italic;
+	padding-bottom: 0.5rem;
+`;

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

@@ -0,0 +1,158 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Button, Input } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { ResizeTable } from 'components/ResizeTable';
+import { useNotifications } from 'hooks/useNotifications';
+import {
+	selectIsDashboardLocked,
+	useDashboardStore,
+} from 'providers/Dashboard/store/useDashboardStore';
+
+import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
+import { ExtendedChartDataset, GraphManagerProps } from './types';
+import {
+	getDefaultTableDataSet,
+	saveLegendEntriesToLocalStorage,
+} from './utils';
+
+import './WidgetFullView.styles.scss';
+
+function GraphManager({
+	data,
+	name,
+	yAxisUnit,
+	onToggleModelHandler,
+	setGraphsVisibilityStates,
+	graphsVisibilityStates = [], // not trimed
+	lineChartRef,
+	parentChartRef,
+	options,
+}: GraphManagerProps): JSX.Element {
+	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(
+		getDefaultTableDataSet(options, data),
+	);
+
+	useEffect(() => {
+		setTableDataSet(getDefaultTableDataSet(options, data));
+	}, [data, options]);
+
+	const { notifications } = useNotifications();
+	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+
+	const checkBoxOnChangeHandler = useCallback(
+		(e: CheckboxChangeEvent, index: number): void => {
+			const newStates = [...graphsVisibilityStates];
+			newStates[index] = e.target.checked;
+			lineChartRef?.current?.toggleGraph(index, e.target.checked);
+			parentChartRef?.current?.toggleGraph(index, e.target.checked);
+			setGraphsVisibilityStates([...newStates]);
+		},
+		[
+			graphsVisibilityStates,
+			lineChartRef,
+			parentChartRef,
+			setGraphsVisibilityStates,
+		],
+	);
+
+	const labelClickedHandler = useCallback(
+		(labelIndex: number): void => {
+			const newGraphVisibilityStates = Array<boolean>(data.length).fill(false);
+			newGraphVisibilityStates[labelIndex] = true;
+
+			newGraphVisibilityStates.forEach((state, index) => {
+				lineChartRef?.current?.toggleGraph(index, state);
+				parentChartRef?.current?.toggleGraph(index, state);
+			});
+			setGraphsVisibilityStates(newGraphVisibilityStates);
+		},
+		[data.length, lineChartRef, parentChartRef, setGraphsVisibilityStates],
+	);
+
+	const columns = getGraphManagerTableColumns({
+		tableDataSet,
+		checkBoxOnChangeHandler,
+		graphVisibilityState: graphsVisibilityStates,
+		labelClickedHandler,
+		yAxisUnit,
+		isGraphDisabled: isDashboardLocked,
+	});
+
+	const filterHandler = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = event.target.value.toString().toLowerCase();
+			const updatedDataSet = tableDataSet.map((item) => {
+				if (item.label?.toLocaleLowerCase().includes(value)) {
+					return { ...item, show: true };
+				}
+				return { ...item, show: false };
+			});
+			setTableDataSet(updatedDataSet);
+		},
+		[tableDataSet],
+	);
+
+	const saveHandler = useCallback((): void => {
+		saveLegendEntriesToLocalStorage({
+			options,
+			graphVisibilityState: graphsVisibilityStates || [],
+			name,
+		});
+		notifications.success({
+			message: 'The updated graphs & legends are saved',
+		});
+		if (onToggleModelHandler) {
+			onToggleModelHandler();
+		}
+	}, [
+		graphsVisibilityStates,
+		name,
+		notifications,
+		onToggleModelHandler,
+		options,
+	]);
+
+	const dataSource = tableDataSet.filter(
+		(item, index) => index !== 0 && item.show,
+	);
+
+	return (
+		<div className="graph-manager-container">
+			<div className="graph-manager-header">
+				<Input onChange={filterHandler} placeholder="Filter Series" />
+				<div className="save-cancel-container">
+					<span className="save-cancel-button">
+						<Button type="default" onClick={onToggleModelHandler}>
+							Cancel
+						</Button>
+					</span>
+					<span className="save-cancel-button">
+						<Button type="primary" onClick={saveHandler}>
+							Save
+						</Button>
+					</span>
+				</div>
+			</div>
+
+			<div className="legends-list-container">
+				<ResizeTable
+					columns={columns}
+					dataSource={dataSource}
+					rowKey="index"
+					pagination={false}
+					style={{
+						maxHeight: 200,
+						overflowX: 'hidden',
+						overflowY: 'auto',
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+GraphManager.defaultProps = {
+	graphVisibilityStateHandler: undefined,
+};
+
+export default memo(GraphManager);

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx

@@ -0,0 +1,18 @@
+import { TableColumnType as ColumnType } from 'antd';
+
+import { DataSetProps } from '../types';
+import Label from './Label';
+
+export const getLabel = (
+	labelClickedHandler: (labelIndex: number) => void,
+	disabled?: boolean,
+): ColumnType<DataSetProps> => ({
+	render: (label: string, record): JSX.Element => (
+		<Label
+			label={label}
+			labelIndex={record.index}
+			labelClickedHandler={labelClickedHandler}
+			disabled={disabled}
+		/>
+	),
+});

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx

@@ -0,0 +1,85 @@
+import { TableColumnType as ColumnType } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+
+import { ColumnsKeyAndDataIndex, ColumnsTitle } from '../contants';
+import { DataSetProps, ExtendedChartDataset } from '../types';
+import { getGraphManagerTableHeaderTitle } from '../utils';
+import CustomCheckBox from './CustomCheckBox';
+import { getLabel } from './GetLabel';
+
+export const getGraphManagerTableColumns = ({
+	tableDataSet,
+	checkBoxOnChangeHandler,
+	graphVisibilityState,
+	labelClickedHandler,
+	yAxisUnit,
+	isGraphDisabled,
+}: GetGraphManagerTableColumnsProps): ColumnType<DataSetProps>[] => [
+	{
+		title: '',
+		width: 50,
+		dataIndex: ColumnsKeyAndDataIndex.Index,
+		key: ColumnsKeyAndDataIndex.Index,
+		render: (_: string, record: DataSetProps): JSX.Element => (
+			<CustomCheckBox
+				data={tableDataSet}
+				index={record.index}
+				checkBoxOnChangeHandler={checkBoxOnChangeHandler}
+				graphVisibilityState={graphVisibilityState}
+				disabled={isGraphDisabled}
+			/>
+		),
+	},
+	{
+		title: ColumnsTitle[ColumnsKeyAndDataIndex.Label],
+		width: 300,
+		dataIndex: ColumnsKeyAndDataIndex.Label,
+		key: ColumnsKeyAndDataIndex.Label,
+		...getLabel(labelClickedHandler, isGraphDisabled),
+	},
+	{
+		title: getGraphManagerTableHeaderTitle(
+			ColumnsTitle[ColumnsKeyAndDataIndex.Avg],
+			yAxisUnit,
+		),
+		width: 90,
+		dataIndex: ColumnsKeyAndDataIndex.Avg,
+		key: ColumnsKeyAndDataIndex.Avg,
+	},
+	{
+		title: getGraphManagerTableHeaderTitle(
+			ColumnsTitle[ColumnsKeyAndDataIndex.Sum],
+			yAxisUnit,
+		),
+		width: 90,
+		dataIndex: ColumnsKeyAndDataIndex.Sum,
+		key: ColumnsKeyAndDataIndex.Sum,
+	},
+	{
+		title: getGraphManagerTableHeaderTitle(
+			ColumnsTitle[ColumnsKeyAndDataIndex.Max],
+			yAxisUnit,
+		),
+		width: 90,
+		dataIndex: ColumnsKeyAndDataIndex.Max,
+		key: ColumnsKeyAndDataIndex.Max,
+	},
+	{
+		title: getGraphManagerTableHeaderTitle(
+			ColumnsTitle[ColumnsKeyAndDataIndex.Min],
+			yAxisUnit,
+		),
+		width: 90,
+		dataIndex: ColumnsKeyAndDataIndex.Min,
+		key: ColumnsKeyAndDataIndex.Min,
+	},
+];
+
+interface GetGraphManagerTableColumnsProps {
+	tableDataSet: ExtendedChartDataset[];
+	checkBoxOnChangeHandler: (e: CheckboxChangeEvent, index: number) => void;
+	labelClickedHandler: (labelIndex: number) => void;
+	graphVisibilityState: boolean[];
+	yAxisUnit?: string;
+	isGraphDisabled?: boolean;
+}

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/Label.tsx

@@ -0,0 +1,34 @@
+import { Tooltip } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { LabelContainer } from '../styles';
+import { LabelProps } from '../types';
+import { getAbbreviatedLabel } from '../utils';
+
+function Label({
+	labelClickedHandler,
+	labelIndex,
+	label,
+	disabled = false,
+}: LabelProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	const onClickHandler = (): void => {
+		labelClickedHandler(labelIndex);
+	};
+
+	return (
+		<LabelContainer
+			isDarkMode={isDarkMode}
+			type="button"
+			disabled={disabled}
+			onClick={onClickHandler}
+		>
+			<Tooltip title={label} placement="topLeft">
+				{getAbbreviatedLabel(label)}
+			</Tooltip>
+		</LabelContainer>
+	);
+}
+
+export default Label;

frontend/src/container/GridCardLayout/GridCard/__mock__/mockChartData.ts

@@ -0,0 +1,15 @@
+import { ChartData } from 'chart.js';
+
+export const mockTestData: ChartData = {
+	labels: ['test1', 'test2'],
+	datasets: [
+		{
+			label: 'customer',
+			data: [481.60377358490564, 730.0000000000002],
+		},
+		{
+			label: 'demo-app',
+			data: [4471.4285714285725],
+		},
+	],
+};

frontend/src/container/GridCardLayout/GridCard/__mock__/mockLegendEntryData.ts

@@ -0,0 +1,12 @@
+import { LegendEntryProps } from '../FullView/types';
+
+export const mocklegendEntryResult: LegendEntryProps[] = [
+	{
+		label: 'customer',
+		show: true,
+	},
+	{
+		label: 'demo-app',
+		show: false,
+	},
+];

frontend/src/container/GridValueComponent/config.ts

@@ -0,0 +1,3 @@
+import { GridValueComponentProps } from './types';
+
+export const GridValueConfig: Pick<GridValueComponentProps, 'title'> = {};

frontend/src/container/Home/index.tsx

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

frontend/src/container/HostMetricsLoading/HostMetricsLoading.styles.scss

@@ -0,0 +1,19 @@
+.loading-host-metrics {
+	padding: 24px 0;
+	height: 600px;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.loading-host-metrics-content {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		.loading-gif {
+			height: 72px;
+			margin-left: -24px;
+		}
+	}
+}

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import { Typography } from 'antd';
+import { DataSource } from 'types/common/queryBuilder';
+
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
+import './HostMetricsLoading.styles.scss';
+
+export function HostMetricsLoading(): JSX.Element {
+	const { t } = useTranslation('common');
+	return (
+		<div className="loading-host-metrics">
+			<div className="loading-host-metrics-content">
+				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+
+				<Typography>
+					{t('pending_data_placeholder', {
+						dataSource: `host ${DataSource.METRICS}`,
+					})}
+				</Typography>
+			</div>
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -11,8 +11,8 @@ import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import {
-	useInfraMonitoringFiltersK8s,
-	useInfraMonitoringPageListing,
+	useInfraMonitoringCurrentPage,
+	useInfraMonitoringFilters,
 } from 'container/InfraMonitoringK8s/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -32,9 +32,9 @@ import {
 	hostWidgetInfo,
 } from './constants';
 import {
-	getHostItemKey,
-	getHostRowKey,
+	hostColumns,
 	hostColumnsConfig,
+	hostRenderRowData,
 } from './table.config';
 import { getHostsQuickFiltersConfig } from './utils';
 
@@ -42,8 +42,8 @@ import styles from './InfraMonitoringHosts.module.scss';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
+	const [, setCurrentPage] = useInfraMonitoringCurrentPage();
+	const [urlFilters, setUrlFilters] = useInfraMonitoringFilters();
 
 	const { featureFlags } = useAppContext();
 	const dotMetricsEnabled =
@@ -170,10 +170,10 @@ function Hosts(): JSX.Element {
 						<K8sBaseList
 							controlListPrefix={controlListPrefix}
 							entity={InfraMonitoringEntity.HOSTS}
+							tableColumnsDefinitions={hostColumns}
 							tableColumns={hostColumnsConfig}
 							fetchListData={fetchListData}
-							getRowKey={getHostRowKey}
-							getItemKey={getHostItemKey}
+							renderRowData={hostRenderRowData}
 							eventCategory={InfraMonitoringEvents.HostEntity}
 						/>
 					</div>

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -0,0 +1,190 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { render, waitFor } from '@testing-library/react';
+import * as getHostListsApi from 'api/infraMonitoring/getHostLists';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import * as useQueryBuilderHooks from 'hooks/queryBuilder/useQueryBuilder';
+import * as useQueryBuilderOperations from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { withNuqsTestingAdapter } from 'nuqs/adapters/testing';
+import * as appContextHooks from 'providers/App/App';
+import * as timezoneHooks from 'providers/Timezone';
+import store from 'store';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+
+import Hosts from '../Hosts';
+
+jest.mock('lib/getMinMax', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(() => ({
+		minTime: 1713734400000,
+		maxTime: 1713738000000,
+		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
+	})),
+	getMinMaxForSelectedTime: jest.fn().mockReturnValue({
+		minTime: 1713734400000000000,
+		maxTime: 1713738000000000000,
+	}),
+}));
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({ onSelect, selectedTime, selectedValue }: any): JSX.Element => (
+		<div data-testid="custom-time-picker">
+			<button onClick={(): void => onSelect('custom')}>
+				{selectedTime} - {selectedValue}
+			</button>
+		</div>
+	),
+}));
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retry: false,
+		},
+	},
+});
+
+jest.mock('react-router-dom', () => {
+	const ROUTES = jest.requireActual('constants/routes').default;
+	return {
+		...jest.requireActual('react-router-dom'),
+		useLocation: jest.fn().mockReturnValue({
+			pathname: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		}),
+	};
+});
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
+	timezone: {
+		offset: 0,
+	},
+	browserTimezone: {
+		offset: 0,
+	},
+} as any);
+
+jest.spyOn(getHostListsApi, 'getHostLists').mockResolvedValue({
+	statusCode: 200,
+	error: null,
+	message: 'Success',
+	payload: {
+		status: 'success',
+		data: {
+			type: 'list',
+			records: [
+				{
+					hostName: 'test-host',
+					active: true,
+					os: 'linux',
+					cpu: 0.75,
+					cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					memory: 0.65,
+					memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					wait: 0.03,
+					waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
+					load15: 0.5,
+					load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
+				},
+			],
+			groups: null,
+			total: 1,
+			sentAnyHostMetricsData: true,
+			isSendingK8SAgentMetrics: false,
+			endTimeBeforeRetention: false,
+		},
+	},
+	params: {} as any,
+});
+
+jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+	user: {
+		role: 'admin',
+	},
+	featureFlags: [],
+	activeLicenseV3: {
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		license: {
+			license_key: 'test-license-key',
+			license_type: 'trial',
+			org_id: 'test-org-id',
+			plan_id: 'test-plan-id',
+			plan_name: 'test-plan-name',
+			plan_type: 'trial',
+			plan_version: 'test-plan-version',
+		},
+	},
+} as any);
+
+jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
+	currentQuery: initialQueriesMap.metrics,
+	setSupersetQuery: jest.fn(),
+	setLastUsedQuery: jest.fn(),
+	handleSetConfig: jest.fn(),
+	resetQuery: jest.fn(),
+	updateAllQueriesOperators: jest.fn(),
+} as any);
+
+jest.spyOn(useQueryBuilderOperations, 'useQueryOperations').mockReturnValue({
+	handleChangeQueryData: jest.fn(),
+} as any);
+
+const Wrapper = withNuqsTestingAdapter({ searchParams: {} });
+
+describe('Hosts', () => {
+	beforeEach(() => {
+		queryClient.clear();
+	});
+
+	it('renders hosts list table', async () => {
+		const { container } = render(
+			<Wrapper>
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter>
+						<Provider store={store}>
+							<Hosts />
+						</Provider>
+					</MemoryRouter>
+				</QueryClientProvider>
+			</Wrapper>,
+		);
+		await waitFor(() => {
+			expect(container.querySelector('.ant-table')).toBeInTheDocument();
+		});
+	});
+
+	it('renders filters', async () => {
+		const { container } = render(
+			<Wrapper>
+				<QueryClientProvider client={queryClient}>
+					<MemoryRouter>
+						<Provider store={store}>
+							<Hosts />
+						</Provider>
+					</MemoryRouter>
+				</QueryClientProvider>
+			</Wrapper>,
+		);
+		await waitFor(() => {
+			expect(container.querySelector('.filters')).toBeInTheDocument();
+		});
+	});
+});

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

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react';
+import { HostData, TimeSeries } from 'api/infraMonitoring/getHostLists';
+
+import { hostRenderRowData } from '../table.config';
+import { getHostsQuickFiltersConfig, HostnameCell } from '../utils';
+
+const emptyTimeSeries: TimeSeries = {
+	labels: {},
+	labelsArray: [],
+	values: [],
+};
+
+describe('InfraMonitoringHosts utils', () => {
+	describe('hostRenderRowData', () => {
+		it('should format host data correctly', () => {
+			const host: HostData = {
+				hostName: 'test-host',
+				active: true,
+				cpu: 0.95,
+				memory: 0.85,
+				wait: 0.05,
+				load15: 2.5,
+				os: 'linux',
+				cpuTimeSeries: emptyTimeSeries,
+				memoryTimeSeries: emptyTimeSeries,
+				waitTimeSeries: emptyTimeSeries,
+				load15TimeSeries: emptyTimeSeries,
+			};
+
+			const result = hostRenderRowData(host, []);
+
+			expect(result.wait).toBe('5%');
+			expect(result.load15).toBe(2.5);
+			expect(result.itemKey).toBe('test-host');
+			expect(result.hostName).toBe('test-host');
+
+			const activeTag = render(result.active as JSX.Element);
+			expect(activeTag.container.textContent).toBe('ACTIVE');
+			expect(activeTag.getByText('ACTIVE')).toBeTruthy();
+
+			const cpuProgress = render(result.cpu as JSX.Element);
+			expect(cpuProgress.container.querySelector('.ant-progress')).toBeTruthy();
+
+			const memoryProgress = render(result.memory as JSX.Element);
+			expect(memoryProgress.container.querySelector('.ant-progress')).toBeTruthy();
+		});
+
+		it('should handle inactive hosts', () => {
+			const host: HostData = {
+				hostName: 'test-host',
+				active: false,
+				cpu: 0.3,
+				memory: 0.4,
+				wait: 0.02,
+				load15: 1.2,
+				os: 'linux',
+				cpuTimeSeries: emptyTimeSeries,
+				memoryTimeSeries: emptyTimeSeries,
+				waitTimeSeries: emptyTimeSeries,
+				load15TimeSeries: emptyTimeSeries,
+			};
+
+			const result = hostRenderRowData(host, []);
+
+			const inactiveTag = render(result.active as JSX.Element);
+			expect(inactiveTag.container.textContent).toBe('INACTIVE');
+			expect(inactiveTag.getByText('INACTIVE')).toBeTruthy();
+		});
+
+		it('should use empty itemKey when host has no hostname', () => {
+			const host: HostData = {
+				hostName: '',
+				active: true,
+				cpu: 0.5,
+				memory: 0.4,
+				wait: 0.01,
+				load15: 1.0,
+				os: 'linux',
+				cpuTimeSeries: emptyTimeSeries,
+				memoryTimeSeries: emptyTimeSeries,
+				waitTimeSeries: emptyTimeSeries,
+				load15TimeSeries: emptyTimeSeries,
+			};
+
+			const result = hostRenderRowData(host, []);
+			expect(result.itemKey).toBe('');
+		});
+	});
+
+	describe('HostnameCell', () => {
+		it('should render hostname when present (case A: no icon)', () => {
+			const { container } = render(<HostnameCell hostName="gke-prod-1" />);
+			expect(container.querySelector('.hostname-column-value')).toBeTruthy();
+			expect(container.textContent).toBe('gke-prod-1');
+			expect(container.querySelector('.hostname-cell-missing')).toBeFalsy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeFalsy();
+		});
+
+		it('should render placeholder and icon when hostName is empty (case B)', () => {
+			const { container } = render(<HostnameCell hostName="" />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			const iconWrapper = container.querySelector('.hostname-cell-warning-icon');
+			expect(iconWrapper).toBeTruthy();
+			expect(iconWrapper?.getAttribute('aria-label')).toBe(
+				'Missing host.name metadata',
+			);
+			expect(iconWrapper?.getAttribute('tabindex')).toBe('0');
+		});
+
+		it('should render placeholder and icon when hostName is whitespace only (case C)', () => {
+			const { container } = render(<HostnameCell hostName="   " />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
+
+		it('should render placeholder and icon when hostName is undefined (case D)', () => {
+			const { container } = render(<HostnameCell hostName={undefined} />);
+			expect(screen.getByText('-')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-missing')).toBeTruthy();
+			expect(container.querySelector('.hostname-cell-warning-icon')).toBeTruthy();
+		});
+	});
+
+	describe('getHostsQuickFiltersConfig', () => {
+		it('should return correct config when dotMetricsEnabled is true', () => {
+			const result = getHostsQuickFiltersConfig(true);
+
+			expect(result[0].attributeKey.key).toBe('host.name');
+			expect(result[1].attributeKey.key).toBe('os.type');
+			expect(result[0].aggregateAttribute).toBe('system.cpu.load_average.15m');
+		});
+
+		it('should return correct config when dotMetricsEnabled is false', () => {
+			const result = getHostsQuickFiltersConfig(false);
+
+			expect(result[0].attributeKey.key).toBe('host_name');
+			expect(result[1].attributeKey.key).toBe('os_type');
+			expect(result[0].aggregateAttribute).toBe('system_cpu_load_average_15m');
+		});
+	});
+});

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

@@ -1,22 +1,160 @@
 import React from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tag, Tooltip } from 'antd';
+import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
 import { HostData } from 'api/infraMonitoring/getHostLists';
-import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
-import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
+import { K8sRenderedRowData } from 'container/InfraMonitoringK8s/Base/types';
+import { IEntityColumn } from 'container/InfraMonitoringK8s/Base/useInfraMonitoringTableColumnsStore';
 import {
-	EntityProgressBar,
-	ExpandButtonWrapper,
-	ValidateColumnValueWrapper,
-} from 'container/InfraMonitoringK8s/components';
+	getGroupByEl,
+	getGroupedByMeta,
+	getRowKey,
+} from 'container/InfraMonitoringK8s/Base/utils';
+import { ValidateColumnValueWrapper } from 'container/InfraMonitoringK8s/commonUtils';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { useInfraMonitoringGroupBy } from 'container/InfraMonitoringK8s/hooks';
-import EntityGroupHeader from 'container/InfraMonitoringK8s/Base/EntityGroupHeader';
+import { Group } from 'lucide-react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+import { getMemoryProgressColor, getProgressColor } from './constants';
 import { HostnameCell } from './utils';
 
 import styles from './table.module.scss';
-import { Container } from 'lucide-react';
+
+export const hostColumns: IEntityColumn[] = [
+	{
+		label: 'Host group',
+		value: 'hostGroup',
+		id: 'hostGroup',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'hidden-on-collapse',
+	},
+	{
+		label: 'Hostname',
+		value: 'hostName',
+		id: 'hostName',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'hidden-on-expand',
+	},
+	{
+		label: 'Status',
+		value: 'active',
+		id: 'active',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'always-visible',
+	},
+	{
+		label: 'CPU Usage',
+		value: 'cpu',
+		id: 'cpu',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'always-visible',
+	},
+	{
+		label: 'Memory Usage',
+		value: 'memory',
+		id: 'memory',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'always-visible',
+	},
+	{
+		label: 'IOWait',
+		value: 'wait',
+		id: 'wait',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'always-visible',
+	},
+	{
+		label: 'Load Avg',
+		value: 'load15',
+		id: 'load15',
+		canBeHidden: false,
+		defaultVisibility: true,
+		behavior: 'always-visible',
+	},
+];
+
+export const hostColumnsConfig: ColumnType<K8sRenderedRowData>[] = [
+	{
+		title: (
+			<div className={styles.entityGroupHeader}>
+				<Group size={14} /> HOST GROUP
+			</div>
+		),
+		dataIndex: 'hostGroup',
+		key: 'hostGroup',
+		ellipsis: true,
+		width: 180,
+		sorter: false,
+	},
+	{
+		title: <div className={styles.hostnameColumnHeader}>Hostname</div>,
+		dataIndex: 'hostName',
+		key: 'hostName',
+		width: 250,
+		render: (_value, record): React.ReactNode => (
+			<HostnameCell
+				hostName={typeof record.hostName === 'string' ? record.hostName : ''}
+			/>
+		),
+	},
+	{
+		title: (
+			<div className={styles.statusHeader}>
+				Status
+				<Tooltip title="Sent system metrics in last 10 mins">
+					<InfoCircleOutlined />
+				</Tooltip>
+			</div>
+		),
+		dataIndex: 'active',
+		key: 'active',
+		width: 100,
+	},
+	{
+		title: <div className={styles.columnHeaderRight}>CPU Usage</div>,
+		dataIndex: 'cpu',
+		key: 'cpu',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
+	{
+		title: (
+			<div className={`${styles.columnHeaderRight} ${styles.memoryUsageHeader}`}>
+				Memory Usage
+				<Tooltip title="Excluding cache memory">
+					<InfoCircleOutlined />
+				</Tooltip>
+			</div>
+		),
+		dataIndex: 'memory',
+		key: 'memory',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
+	{
+		title: <div className={styles.columnHeaderRight}>IOWait</div>,
+		dataIndex: 'wait',
+		key: 'wait',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
+	{
+		title: <div className={styles.columnHeaderRight}>Load Avg</div>,
+		dataIndex: 'load15',
+		key: 'load15',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
+];
 
 function hostRowSource(host: HostData): { meta: Record<string, string> } {
 	return {
@@ -30,154 +168,67 @@ function hostRowSource(host: HostData): { meta: Record<string, string> } {
 	};
 }
 
-export function getHostRowKey(host: HostData): string {
-	return host.hostName || 'unknown';
-}
+export const hostRenderRowData = (
+	host: HostData,
+	groupBy: BaseAutocompleteData[],
+): K8sRenderedRowData => {
+	const synthetic = hostRowSource(host);
+	const rowKey = getRowKey(synthetic, () => host.hostName || 'unknown', groupBy);
+	const groupedByMeta = getGroupedByMeta(synthetic, groupBy);
+	const cpuPercent = Number((host.cpu * 100).toFixed(1));
+	const memoryPercent = Number((host.memory * 100).toFixed(1));
 
-export function getHostItemKey(host: HostData): string {
-	return host.hostName ?? '';
-}
-
-function HostGroupCell({ row }: { row: HostData }): JSX.Element {
-	const [groupBy] = useInfraMonitoringGroupBy();
-	const synthetic = hostRowSource(row);
-	return getGroupByEl(synthetic, groupBy) as JSX.Element;
-}
-
-export const hostColumnsConfig: TableColumnDef<HostData>[] = [
-	{
-		id: 'hostGroup',
-		header: (): React.ReactNode => <EntityGroupHeader title="HOST GROUP" />,
-		accessorFn: (row): string => row.hostName ?? '',
-		width: { min: 300 },
-		enableSort: false,
-		enableRemove: false,
-		enableMove: false,
-		pin: 'left',
-		visibilityBehavior: 'hidden-on-collapse',
-		cell: ({ row, isExpanded, toggleExpanded }): React.ReactNode => (
-			<ExpandButtonWrapper isExpanded={isExpanded} toggleExpanded={toggleExpanded}>
-				<HostGroupCell row={row} />
-			</ExpandButtonWrapper>
+	return {
+		key: rowKey,
+		itemKey: host.hostName ?? '',
+		groupedByMeta,
+		meta: synthetic.meta,
+		hostGroup: getGroupByEl(synthetic, groupBy),
+		...synthetic.meta,
+		hostName: host.hostName ?? '',
+		active: (
+			<Tag
+				bordered
+				className={`${styles.statusTag} ${
+					host.active ? styles.statusTagActive : styles.statusTagInactive
+				}`}
+			>
+				{host.active ? 'ACTIVE' : 'INACTIVE'}
+			</Tag>
 		),
-	},
-	{
-		id: 'hostName',
-		header: (): React.ReactNode => (
-			<EntityGroupHeader title="Hostname" icon={<Container size={14} />} />
-		),
-		accessorFn: (row): string => row.hostName ?? '',
-		width: { min: 290 },
-		enableSort: false,
-		enableRemove: false,
-		enableMove: false,
-		pin: 'left',
-		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => (
-			<HostnameCell hostName={value as string} />
-		),
-	},
-	{
-		id: 'active',
-		header: (): React.ReactNode => (
-			<div className={styles.statusHeader}>
-				Status
-				<Tooltip title="Sent system metrics in last 10 mins">
-					<InfoCircleOutlined />
-				</Tooltip>
-			</div>
-		),
-		accessorFn: (row): boolean => row.active,
-		width: { min: 150, default: 150 },
-		enableSort: false,
-		cell: ({ value }): React.ReactNode => {
-			const active = value as boolean;
-			return (
-				<Tag
-					bordered
-					className={`${styles.statusTag} ${
-						active ? styles.statusTagActive : styles.statusTagInactive
-					}`}
+		cpu: (
+			<div className={styles.progressContainer}>
+				<ValidateColumnValueWrapper
+					value={host.cpu}
+					entity={InfraMonitoringEntity.HOSTS}
 				>
-					{active ? 'ACTIVE' : 'INACTIVE'}
-				</Tag>
-			);
-		},
-	},
-	{
-		id: 'cpu',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>CPU Usage</div>
-		),
-		accessorFn: (row): number => row.cpu,
-		width: { min: 220 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const cpu = value as number;
-			return (
-				<div className={styles.progressContainer}>
-					<ValidateColumnValueWrapper
-						value={cpu}
-						entity={InfraMonitoringEntity.HOSTS}
-					>
-						<EntityProgressBar value={cpu} type="cpu" />
-					</ValidateColumnValueWrapper>
-				</div>
-			);
-		},
-	},
-	{
-		id: 'memory',
-		header: (): React.ReactNode => (
-			<div className={`${styles.columnHeaderRight} ${styles.memoryUsageHeader}`}>
-				Memory Usage
-				<Tooltip title="Excluding cache memory">
-					<InfoCircleOutlined />
-				</Tooltip>
+					<Progress
+						percent={cpuPercent}
+						strokeLinecap="butt"
+						size="small"
+						strokeColor={getProgressColor(cpuPercent)}
+						className={styles.progressBar}
+					/>
+				</ValidateColumnValueWrapper>
 			</div>
 		),
-		accessorFn: (row): number => row.memory,
-		width: { min: 220 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const memory = value as number;
-			return (
-				<div className={styles.progressContainer}>
-					<ValidateColumnValueWrapper
-						value={memory}
-						entity={InfraMonitoringEntity.HOSTS}
-					>
-						<EntityProgressBar value={memory} type="memory" />
-					</ValidateColumnValueWrapper>
-				</div>
-			);
-		},
-	},
-	{
-		id: 'wait',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>IOWait</div>
+		memory: (
+			<div className={styles.progressContainer}>
+				<ValidateColumnValueWrapper
+					value={host.memory}
+					entity={InfraMonitoringEntity.HOSTS}
+				>
+					<Progress
+						percent={memoryPercent}
+						strokeLinecap="butt"
+						size="small"
+						strokeColor={getMemoryProgressColor(memoryPercent)}
+						className={styles.progressBar}
+					/>
+				</ValidateColumnValueWrapper>
+			</div>
 		),
-		accessorFn: (row): number => row.wait,
-		width: { min: 100, default: 100 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const wait = value as number;
-			return (
-				<TanStackTable.Text>{`${Number((wait * 100).toFixed(1))}%`}</TanStackTable.Text>
-			);
-		},
-	},
-	{
-		id: 'load15',
-		header: (): React.ReactNode => (
-			<div className={styles.columnHeaderRight}>Load Avg</div>
-		),
-		accessorFn: (row): number => row.load15,
-		width: { min: 100, default: 100 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => (
-			<TanStackTable.Text>{value as number}</TanStackTable.Text>
-		),
-	},
-];
+		wait: `${Number((host.wait * 100).toFixed(1))}%`,
+		load15: host.load15,
+	};
+};

frontend/src/container/InfraMonitoringK8s/Base/EntityGroupHeader.tsx

@@ -1,21 +0,0 @@
-import { Group } from 'lucide-react';
-
-import styles from './EntityGroupHeader.module.scss';
-
-interface EntityGroupHeaderProps {
-	title: string;
-	icon?: React.ReactNode;
-}
-
-function EntityGroupHeader({
-	title,
-	icon,
-}: EntityGroupHeaderProps): JSX.Element {
-	return (
-		<div className={styles.entityGroupHeader}>
-			{icon || <Group size={14} data-hide-expanded="true" />} {title}
-		</div>
-	);
-}
-
-export default EntityGroupHeader;

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

@@ -37,7 +37,10 @@ import {
 	X,
 } from 'lucide-react';
 import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -187,19 +190,16 @@ function K8sBaseDetails<T>({
 	);
 
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
-	const { startMs, endMs } = useMemo(
-		() => ({
-			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
-			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
-		}),
-		[lastComputedMinMax],
-	);
+	const { startMs, endMs } = useMemo(() => {
+		const { minTime: startNs, maxTime: endNs } = getMinMaxTime(selectedTime);
+
+		return {
+			startMs: Math.floor(startNs / NANO_SECOND_MULTIPLIER),
+			endMs: Math.floor(endNs / NANO_SECOND_MULTIPLIER),
+		};
+	}, [getMinMaxTime, selectedTime]);
 
 	const [modalTimeRange, setModalTimeRange] = useState(() => ({
 		startTime: startMs,
@@ -246,7 +246,7 @@ function K8sBaseDetails<T>({
 				`${queryKeyPrefix}EntityDetails`,
 				selectedItem,
 			),
-		[getAutoRefreshQueryKey, queryKeyPrefix, selectedItem, selectedTime],
+		[queryKeyPrefix, selectedItem, selectedTime],
 	);
 
 	const {

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.module.scss

@@ -1,40 +1,175 @@
-.emptyStateContainer {
-	display: flex;
-	flex: 1;
-	align-items: center;
-	justify-content: center;
-	min-height: 400px;
+.clickableRow {
+	cursor: pointer;
 }
 
 .k8SListTable {
-	padding-left: var(--spacing-2);
-	--tanstack-table-header-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-color: var(--l2-foreground);
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-cell-color: var(--l2-foreground);
-	--tanstack-table-row-hover-bg: var(--l2-background-hover);
-	--tanstack-table-row-active-bg: var(--l2-background-active);
-	--tanstack-table-resize-handle-bg: var(--l2-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
-	--tanstack-table-row-height: 42px;
+	--k8s-base-list-pagination-offset: 64px;
 
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-left-override: 5px;
-	--tanstack-cell-padding-right-override: 5px;
+	display: flex;
+	flex-direction: column;
 
-	--tanstack-expansion-first-col-padding-left: 30px;
+	:global(.ant-spin-nested-loading) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
 
-	&[data-has-group-by='false'] {
-		--tanstack-cell-padding-left-first-column: 28px;
+	:global(.ant-spin-container) {
+		position: relative;
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		padding-bottom: var(--k8s-base-list-pagination-offset);
+	}
+
+	:global(.ant-table-container) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	:global(.ant-table-header) {
+		flex-shrink: 0;
+	}
+
+	:global(.ant-table-body) {
+		flex: 1;
+		min-height: 0;
+		overflow: auto !important;
+	}
+
+	:global(.ant-table) {
+		flex: 1;
+		background: var(--l1-background) !important;
+
+		:global(.ant-table-thead > tr > th) {
+			padding: 12px;
+			font-weight: 500;
+			font-size: 12px;
+			line-height: 18px;
+
+			border-bottom: none;
+
+			color: var(--l2-foreground);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 18px;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+			background: var(--l1-background) !important;
+
+			&::before {
+				background: transparent !important;
+			}
+		}
+
+		:global(.ant-table-cell) {
+			padding: 12px;
+			font-size: 13px;
+			line-height: 20px;
+			color: var(--l1-foreground);
+			background: var(--l1-background);
+			border-bottom: none;
+
+			&:before,
+			&:after {
+				display: none;
+			}
+		}
+
+		:global(.progress-container) {
+			:global(.ant-progress-bg) {
+				height: 8px !important;
+				border-radius: 4px;
+			}
+		}
+
+		:global(.ant-table-tbody > tr:hover > td) {
+			background: var(--l1-background-hover);
+		}
+
+		:global(.ant-table-tbody > tr:not(.ant-table-expanded-row):hover > td) {
+			background: var(--l1-background-hover) !important;
+		}
+
+		:global(.ant-table-tbody > tr.ant-table-expanded-row:hover > td) {
+			background: var(--l1-background);
+		}
+
+		:global(.ant-table-tbody > tr > td) {
+			border-bottom: none;
+		}
+
+		:global(.ant-empty-normal) {
+			visibility: hidden;
+		}
+
+		:global(.ant-table-cell) {
+			min-width: 180px !important;
+			max-width: 180px !important;
+		}
+
+		:global(.ant-table-cell:first-of-type):not(
+			:global(.ant-table-row-expand-icon-cell)
+		) {
+			min-width: 250px !important;
+			max-width: 250px !important;
+		}
+
+		:global(.ant-table-row-expand-icon-cell) {
+			min-width: 40px !important;
+			max-width: 40px !important;
+		}
+
+		:global(.ant-table-content) {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			&::-webkit-scrollbar {
+				width: 4px;
+				height: 4px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--accent-primary);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: color-mix(var(--accent-primary), transparent 40%);
+			}
+		}
 	}
 }
 
-.paginationContainer {
-	padding-bottom: var(--spacing-8);
-	padding-right: var(--spacing-8);
+.paginationDock {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	width: calc(100% - 340px) !important;
+	margin: 0 !important;
+	padding: 16px;
+	background-color: var(--l1-background);
+	z-index: 1;
 
-	ul {
-		margin: 0;
+	:global(.ant-pagination-item) {
+		border-radius: 4px;
+	}
+
+	:global(.ant-pagination-item-active) {
+		background: var(--l2-background);
+		border-color: var(--l2-border);
+
+		a {
+			color: var(--l1-foreground) !important;
+		}
 	}
 }

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

@@ -1,36 +1,48 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Typography } from 'antd';
+// eslint-disable-next-line no-restricted-imports
+import { LoadingOutlined } from '@ant-design/icons';
+import {
+	Button,
+	Spin,
+	Table,
+	TableColumnType as ColumnType,
+	TablePaginationConfig,
+	TableProps,
+} from 'antd';
+import type { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
-import TanStackTable, {
-	TableColumnDef,
-	useHiddenColumnIds,
-} from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
+import { InfraMonitoringEntity } from '../constants';
 import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-import {
-	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringCurrentPage,
+	useInfraMonitoringFilters,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
-	useInfraMonitoringPageListing,
-	useInfraMonitoringPageSizeListing,
 } from '../hooks';
+import { usePageSize } from '../utils';
 import { K8sEmptyState } from './K8sEmptyState';
 import { K8sExpandedRow } from './K8sExpandedRow';
 import K8sHeader from './K8sHeader';
-import { K8sBaseFilters } from './types';
-import { getGroupedByMeta } from './utils';
+import { K8sBaseFilters, K8sRenderedRowData } from './types';
+import {
+	IEntityColumn,
+	useInfraMonitoringTableColumnsForPage,
+	useInfraMonitoringTableColumnsStore,
+} from './useInfraMonitoringTableColumnsStore';
 
 import styles from './K8sBaseList.module.scss';
-import cx from 'classnames';
 
 export type K8sBaseListEmptyStateContext = {
 	isError: boolean;
@@ -41,13 +53,11 @@ export type K8sBaseListEmptyStateContext = {
 	rawData?: unknown;
 };
 
-/** Base type constraint for K8s entity data */
-export type K8sEntityData = { meta?: Record<string, string> };
-
-export type K8sBaseListProps<T extends K8sEntityData> = {
+export type K8sBaseListProps<T = unknown> = {
 	controlListPrefix?: React.ReactNode;
 	entity: InfraMonitoringEntity;
-	tableColumns: TableColumnDef<T>[];
+	tableColumnsDefinitions: IEntityColumn[];
+	tableColumns: ColumnType<K8sRenderedRowData>[];
 	fetchListData: (
 		filters: K8sBaseFilters,
 		signal?: AbortSignal,
@@ -57,63 +67,69 @@ export type K8sBaseListProps<T extends K8sEntityData> = {
 		error?: string | null;
 		rawData?: unknown;
 	}>;
-	/** Function to get the unique key for a row. */
-	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	renderRowData: (
+		record: T,
+		groupBy: BaseAutocompleteData[],
+	) => K8sRenderedRowData;
 	eventCategory: InfraMonitoringEvents;
 	renderEmptyState?: (
 		context: K8sBaseListEmptyStateContext,
 	) => React.ReactNode | null;
 };
 
-export function K8sBaseList<T extends K8sEntityData>({
+export function K8sBaseList<T>({
 	controlListPrefix,
 	entity,
+	tableColumnsDefinitions,
 	tableColumns,
 	fetchListData,
-	getRowKey,
-	getItemKey,
+	renderRowData,
 	eventCategory,
 	renderEmptyState,
 }: K8sBaseListProps<T>): JSX.Element {
-	const [queryFilters] = useInfraMonitoringFiltersK8s();
-	const [currentPage] = useInfraMonitoringPageListing();
-	const [currentPageSize] = useInfraMonitoringPageSizeListing();
+	const [queryFilters] = useInfraMonitoringFilters();
+	const [currentPage, setCurrentPage] = useInfraMonitoringCurrentPage();
 	const [groupBy] = useInfraMonitoringGroupBy();
-	const [orderBy] = useInfraMonitoringOrderBy();
+	const [orderBy, setOrderBy] = useInfraMonitoringOrderBy();
+	const [initialOrderBy] = useState(orderBy);
 	const [selectedItem, setSelectedItem] = useQueryState(
 		'selectedItem',
 		parseAsString,
 	);
 
-	const columnStorageKey = `k8s-${entity}-columns`;
-	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
+	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
+	useEffect(() => {
+		setExpandedRowKeys([]);
+	}, [groupBy, currentPage]);
+	const { pageSize, setPageSize } = usePageSize(entity);
+
+	const initializeTableColumns = useInfraMonitoringTableColumnsStore(
+		(state) => state.initializePageColumns,
+	);
+	useEffect(() => {
+		initializeTableColumns(entity, tableColumnsDefinitions);
+	}, [initializeTableColumns, entity, tableColumnsDefinitions]);
 
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
 		return getAutoRefreshQueryKey(
 			selectedTime,
 			'k8sBaseList',
 			entity,
-			String(currentPageSize),
+			String(pageSize),
 			String(currentPage),
 			JSON.stringify(queryFilters),
 			JSON.stringify(orderBy),
 			JSON.stringify(groupBy),
 		);
 	}, [
-		getAutoRefreshQueryKey,
 		selectedTime,
 		entity,
-		currentPageSize,
+		pageSize,
 		currentPage,
 		queryFilters,
 		orderBy,
@@ -127,8 +143,8 @@ export function K8sBaseList<T extends K8sEntityData>({
 
 			return fetchListData(
 				{
-					limit: currentPageSize,
-					offset: (currentPage - 1) * currentPageSize,
+					limit: pageSize,
+					offset: (currentPage - 1) * pageSize,
 					filters: queryFilters || { items: [], op: 'AND' },
 					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
 					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
@@ -141,14 +157,62 @@ export function K8sBaseList<T extends K8sEntityData>({
 		refetchInterval: isRefreshEnabled ? refreshInterval : false,
 	});
 
-	const pageData = data?.data ?? [];
+	const pageData = data?.data;
 	const totalCount = data?.total || 0;
 	const hasFilters = (queryFilters?.items?.length ?? 0) > 0;
 
-	const getGroupKeyFn = useCallback(
-		(item: T) => getGroupedByMeta(item, groupBy),
-		[groupBy],
-	);
+	const formattedItemsData = useMemo(() => {
+		if (!pageData) {
+			return undefined;
+		}
+
+		const rows = pageData.map((item) => renderRowData(item, groupBy));
+
+		// Without handling duplicated keys, the table became unpredictable/unstable
+		const keyCount = new Map<string, number>();
+		return rows.map(
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			(row): K8sRenderedRowData => {
+				const count = keyCount.get(row.key) || 0;
+				keyCount.set(row.key, count + 1);
+
+				if (count > 0) {
+					return { ...row, key: `${row.key}-${count}` };
+				}
+				return row;
+			},
+		);
+	}, [pageData, renderRowData, groupBy]);
+
+	const handleTableChange: TableProps<K8sRenderedRowData>['onChange'] =
+		useCallback(
+			(
+				pagination: TablePaginationConfig,
+				_filters: Record<string, (string | number | boolean)[] | null>,
+				sorter:
+					| SorterResult<K8sRenderedRowData>
+					| SorterResult<K8sRenderedRowData>[],
+			): void => {
+				if (pagination.current) {
+					setCurrentPage(pagination.current);
+					logEvent(InfraMonitoringEvents.PageNumberChanged, {
+						entity: InfraMonitoringEvents.K8sEntity,
+						page: InfraMonitoringEvents.ListPage,
+						category: eventCategory,
+					});
+				}
+
+				if ('field' in sorter && sorter.order) {
+					setOrderBy({
+						columnName: sorter.field as string,
+						order: (sorter.order === 'ascend' ? 'asc' : 'desc') as 'asc' | 'desc',
+					});
+				} else {
+					setOrderBy(null);
+				}
+			},
+			[eventCategory, setCurrentPage, setOrderBy],
+		);
 
 	useEffect(() => {
 		logEvent(InfraMonitoringEvents.PageVisited, {
@@ -159,137 +223,214 @@ export function K8sBaseList<T extends K8sEntityData>({
 		});
 	}, [eventCategory, totalCount]);
 
-	const handleRowClick = useCallback(
-		(_record: T, itemKey: string): void => {
-			if (groupBy.length === 0) {
-				setSelectedItem(itemKey);
-			}
+	const handleGroupByRowClick = (record: K8sRenderedRowData): void => {
+		if (expandedRowKeys.includes(record.key)) {
+			setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key));
+		} else {
+			setExpandedRowKeys([record.key]);
+		}
+	};
 
-			logEvent(InfraMonitoringEvents.ItemClicked, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: eventCategory,
-			});
-		},
-		[eventCategory, groupBy.length, setSelectedItem],
+	const openItemInNewTab = (record: K8sRenderedRowData): void => {
+		const newParams = new URLSearchParams(document.location.search);
+		newParams.set('selectedItem', record.itemKey);
+		openInNewTab(
+			buildAbsolutePath({
+				relativePath: '',
+				urlQueryString: newParams.toString(),
+			}),
+		);
+	};
+
+	const handleRowClick = (
+		record: K8sRenderedRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			openItemInNewTab(record);
+			return;
+		}
+		if (groupBy.length === 0) {
+			setSelectedItem(record.itemKey);
+		} else {
+			handleGroupByRowClick(record);
+		}
+
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.ListPage,
+			category: eventCategory,
+		});
+	};
+
+	const [columnsDefinitions, columnsHidden] =
+		useInfraMonitoringTableColumnsForPage(entity);
+
+	const hiddenColumnIdsOnList = useMemo(
+		() =>
+			columnsDefinitions
+				.filter(
+					(col) =>
+						(groupBy?.length > 0 && col.behavior === 'hidden-on-expand') ||
+						(!groupBy?.length && col.behavior === 'hidden-on-collapse'),
+				)
+				.map((col) => col.id),
+		[columnsDefinitions, groupBy?.length],
 	);
 
-	const handleRowClickNewTab = useCallback(
-		(_record: T, itemKey: string): void => {
-			if (groupBy.length > 0) {
-				return;
+	const mapDefaultSort = useCallback(
+		(
+			tableColumn: ColumnType<K8sRenderedRowData>,
+		): ColumnType<K8sRenderedRowData> => {
+			if (tableColumn.key === initialOrderBy?.columnName) {
+				return {
+					...tableColumn,
+					defaultSortOrder: initialOrderBy?.order === 'asc' ? 'ascend' : 'descend',
+				};
 			}
 
-			// Build URL with selectedItem param
-			const url = new URL(window.location.href);
-			url.searchParams.set('selectedItem', itemKey);
-			openInNewTab(url.pathname + url.search);
-
-			logEvent(InfraMonitoringEvents.ItemClicked, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: eventCategory,
-			});
+			return tableColumn;
 		},
-		[eventCategory, groupBy.length],
+		[initialOrderBy?.columnName, initialOrderBy?.order],
+	);
+
+	const columns = useMemo(
+		() =>
+			tableColumns
+				.filter(
+					(c) =>
+						!hiddenColumnIdsOnList.includes(c.key?.toString() || '') &&
+						!columnsHidden.includes(c.key?.toString() || ''),
+				)
+				.map(mapDefaultSort),
+		[columnsHidden, hiddenColumnIdsOnList, mapDefaultSort, tableColumns],
 	);
 
 	const isGroupedByAttribute = groupBy.length > 0;
 
-	// Filter columns for expanded row based on parent's hidden columns
-	const expandedRowColumns = useMemo(
-		() => tableColumns.filter((col) => !hiddenColumnIds.includes(col.id)),
-		[tableColumns, hiddenColumnIds],
+	const expandedRowRender = (record: K8sRenderedRowData): JSX.Element => (
+		<K8sExpandedRow<T>
+			record={record}
+			entity={entity}
+			tableColumns={tableColumns}
+			fetchListData={fetchListData}
+			renderRowData={renderRowData}
+		/>
 	);
 
-	const renderExpandedRow = useCallback(
-		(
-			_record: T,
-			rowKey: string,
-			groupMeta?: Record<string, string>,
-		): JSX.Element => (
-			<K8sExpandedRow<T>
-				rowKey={rowKey}
-				groupMeta={groupMeta}
-				entity={entity}
-				tableColumns={expandedRowColumns}
-				fetchListData={fetchListData}
-				getRowKey={getRowKey}
-				getItemKey={getItemKey}
-			/>
-		),
-		[entity, fetchListData, getRowKey, getItemKey, expandedRowColumns],
-	);
+	const expandRowIconRenderer = ({
+		expanded,
+		onExpand,
+		record,
+	}: {
+		expanded: boolean;
+		onExpand: (
+			record: K8sRenderedRowData,
+			e: React.MouseEvent<HTMLButtonElement>,
+		) => void;
+		record: K8sRenderedRowData;
+	}): JSX.Element | null => {
+		if (!isGroupedByAttribute) {
+			return null;
+		}
 
-	const getRowCanExpand = useCallback(
-		(): boolean => isGroupedByAttribute,
-		[isGroupedByAttribute],
-	);
+		return expanded ? (
+			<Button
+				className="periscope-btn ghost"
+				onClick={(e: React.MouseEvent<HTMLButtonElement>): void =>
+					onExpand(record, e)
+				}
+				role="button"
+			>
+				<ChevronDown size={14} />
+			</Button>
+		) : (
+			<Button
+				className="periscope-btn ghost"
+				onClick={(e: React.MouseEvent<HTMLButtonElement>): void =>
+					onExpand(record, e)
+				}
+				role="button"
+			>
+				<ChevronRight size={14} />
+			</Button>
+		);
+	};
+
+	const onPaginationChange = (page: number, pageSize: number): void => {
+		setCurrentPage(page);
+		setPageSize(pageSize);
+		logEvent(InfraMonitoringEvents.PageNumberChanged, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.ListPage,
+			category: eventCategory,
+		});
+	};
 
 	const showTableLoadingState = isLoading;
 
-	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
-		isError,
+	const emptyStateContext: K8sBaseListEmptyStateContext = {
+		isError: isError || !!data?.error,
 		error: data?.error,
 		totalCount,
 		hasFilters,
 		isLoading: showTableLoadingState,
 		rawData: data?.rawData,
-	}) || (
+	};
+
+	const emptyTableMessage: React.ReactNode = renderEmptyState?.(
+		emptyStateContext,
+	) || (
 		<K8sEmptyState
-			isError={isError}
-			error={data?.error}
-			isLoading={showTableLoadingState}
-			rawData={data?.rawData}
+			isError={emptyStateContext.isError}
+			error={emptyStateContext.error}
+			isLoading={emptyStateContext.isLoading}
+			rawData={emptyStateContext.rawData}
 		/>
 	);
 
-	const showEmptyState = !showTableLoadingState && pageData.length === 0;
-
 	return (
 		<>
 			<K8sHeader
 				controlListPrefix={controlListPrefix}
 				entity={entity}
 				showAutoRefresh={!selectedItem}
-				columns={tableColumns}
-				columnStorageKey={columnStorageKey}
 			/>
-			{isError && (
-				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
-			)}
-
-			{showEmptyState ? (
-				<div className={styles.emptyStateContainer}>{emptyTableMessage}</div>
-			) : (
-				<TanStackTable<T>
-					data={pageData}
-					columns={tableColumns}
-					columnStorageKey={columnStorageKey}
-					isLoading={showTableLoadingState}
-					getRowKey={getRowKey}
-					getItemKey={getItemKey}
-					groupBy={groupBy}
-					getGroupKey={getGroupKeyFn}
-					onRowClick={handleRowClick}
-					onRowClickNewTab={handleRowClickNewTab}
-					renderExpandedRow={isGroupedByAttribute ? renderExpandedRow : undefined}
-					getRowCanExpand={isGroupedByAttribute ? getRowCanExpand : undefined}
-					className={cx(styles.k8SListTable, expandedRowColumns)}
-					enableQueryParams={{
-						page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
-						limit: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE_SIZE,
-						orderBy: INFRA_MONITORING_K8S_PARAMS_KEYS.ORDER_BY,
-						expanded: INFRA_MONITORING_K8S_PARAMS_KEYS.EXPANDED,
-					}}
-					pagination={{
-						total: totalCount,
-						defaultLimit: 10,
-						defaultPage: 1,
-					}}
-					paginationClassname={styles.paginationContainer}
-				/>
-			)}
+			<Table
+				className={styles.k8SListTable}
+				dataSource={showTableLoadingState ? [] : formattedItemsData}
+				columns={columns}
+				pagination={{
+					current: currentPage,
+					pageSize,
+					total: totalCount,
+					showSizeChanger: true,
+					hideOnSinglePage: false,
+					onChange: onPaginationChange,
+					className: styles.paginationDock,
+				}}
+				loading={{
+					spinning: showTableLoadingState,
+					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+				}}
+				locale={{
+					emptyText: showTableLoadingState ? null : emptyTableMessage,
+				}}
+				scroll={{ x: true }}
+				tableLayout="fixed"
+				onChange={handleTableChange}
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+					className: styles.clickableRow,
+				})}
+				expandable={{
+					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+					expandIcon: expandRowIconRenderer,
+					expandedRowKeys,
+				}}
+			/>
 		</>
 	);
 }

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.module.scss

@@ -21,7 +21,6 @@
 .title {
 	font-weight: 500;
 	margin: 0;
-	font-size: var(--periscope-font-size-medium);
 }
 
 .message {

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -7,7 +7,7 @@ import { AlertTriangle, LifeBuoy } from 'lucide-react';
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
 
-import type { K8sBaseListEmptyStateContext } from './K8sBaseList';
+import { K8sBaseListEmptyStateContext } from './K8sBaseList';
 
 import styles from './K8sEmptyState.module.scss';
 

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.module.scss

@@ -1,35 +1,28 @@
-.expandedTableContainer {
-	overflow-x: auto;
+.expandedClickableRow {
+	cursor: pointer;
 }
 
-.expandedTable {
-	--tanstack-table-header-cell-bg: var(--l1-background);
-	--tanstack-table-header-cell-color: var(--l1-foreground);
-	--tanstack-table-cell-bg: var(--l1-background);
-	--tanstack-table-cell-color: var(--l1-foreground);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-	--tanstack-table-row-active-bg: var(--l1-background-active);
-	--tanstack-table-resize-handle-bg: var(--l1-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l1-border);
-	--tanstack-table-row-height: 36px;
+.expandedTableContainer {
+	border: 1px solid var(--l1-border);
+	overflow-x: auto;
+	padding-left: 48px;
 
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	& [data-hide-expanded='true'] {
-		display: none;
+	:global(.ant-table-tbody > tr:hover > td) {
+		background: none !important;
 	}
 }
 
 .expandedTableFooter {
 	display: flex;
 	justify-content: flex-start;
-	gap: var(--spacing-4);
-	background-color: var(--l1-background);
+	gap: 8px;
+	padding: 8px;
+	padding-left: 42px;
+	margin-top: 8px;
 }
 
 .viewAllButton {
 	display: flex;
 	align-items: center;
-	margin: var(--spacing-4);
+	gap: var(--spacing-2);
 }

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.tsx

@@ -1,40 +1,43 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Button } from '@signozhq/ui';
-import { Typography } from 'antd';
-import TanStackTable, {
-	SortState,
-	TableColumnDef,
-	TanStackTableStateProvider,
-} from 'components/TanStackTableView';
+// eslint-disable-next-line no-restricted-imports
+import { LoadingOutlined } from '@ant-design/icons';
+import {
+	Button,
+	Spin,
+	Table,
+	TableColumnType as ColumnType,
+	Typography,
+} from 'antd';
 import { CornerDownRight } from 'lucide-react';
-import { useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import { InfraMonitoringEntity } from '../constants';
 import {
-	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringCurrentPage,
+	useInfraMonitoringFilters,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
-	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItem,
 } from '../hooks';
-import { K8sBaseFilters } from './types';
+import LoadingContainer from '../LoadingContainer';
+import { K8sBaseFilters, K8sRenderedRowData } from './types';
+import { useInfraMonitoringTableColumnsForPage } from './useInfraMonitoringTableColumnsStore';
 
 import styles from './K8sExpandedRow.module.scss';
 
-const EXPANDED_ROW_LIMIT = 10;
-
 export type K8sExpandedRowProps<T> = {
-	/** Pre-computed row key from parent table (includes group prefix + duplicate handling) */
-	rowKey: string;
-	/** Group metadata for building filters */
-	groupMeta?: Record<string, string>;
+	record: K8sRenderedRowData;
 	entity: InfraMonitoringEntity;
-	tableColumns: TableColumnDef<T>[];
+	tableColumns: ColumnType<K8sRenderedRowData>[];
 	fetchListData: (
 		filters: K8sBaseFilters,
 		signal?: AbortSignal,
@@ -44,46 +47,47 @@ export type K8sExpandedRowProps<T> = {
 		error?: string | null;
 		rawData?: unknown;
 	}>;
-	/** Function to get the unique key for a row. */
-	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	renderRowData: (
+		record: T,
+		groupBy: BaseAutocompleteData[],
+	) => K8sRenderedRowData;
 };
 
+export const MAX_ITEMS_TO_FETCH_WHEN_GROUP_BY = 10;
+
 export function K8sExpandedRow<T>({
-	rowKey,
-	groupMeta,
+	record,
 	entity,
 	tableColumns,
 	fetchListData,
-	getRowKey,
-	getItemKey,
+	renderRowData,
 }: K8sExpandedRowProps<T>): JSX.Element {
-	const [, setGroupBy] = useInfraMonitoringGroupBy();
-	const [, setCurrentPage] = useInfraMonitoringPageListing();
-	const [queryFilters, setFilters] = useInfraMonitoringFiltersK8s();
+	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
+	const [orderBy, setOrderBy] = useInfraMonitoringOrderBy();
+	const [, setCurrentPage] = useInfraMonitoringCurrentPage();
+	const [queryFilters, setFilters] = useInfraMonitoringFilters();
 	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
-	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
 
-	const orderByParamKey = useMemo(
-		() => `orderBy_${rowKey.replace(/[^a-zA-Z0-9]/g, '_')}`,
-		[rowKey],
-	);
-	const [orderBy, setOrderBy] = useQueryState(
-		orderByParamKey,
-		parseAsJsonNoValidate<SortState | null>()
-			.withDefault(null as never)
-			.withOptions({
-				history: 'push',
-			}),
-	);
-	useEffect(() => {
-		return (): void => {
-			void setOrderBy(null);
-		};
-	}, [setOrderBy]);
+	const [columnsDefinitions, columnsHidden] =
+		useInfraMonitoringTableColumnsForPage(entity);
 
-	const storageKey = `k8s-${entity}-columns-expanded`;
+	const hiddenColumnIdsForNested = useMemo(
+		() =>
+			columnsDefinitions
+				.filter((col) => col.behavior === 'hidden-on-collapse')
+				.map((col) => col.id),
+		[columnsDefinitions],
+	);
+
+	const nestedColumns = useMemo(
+		() =>
+			tableColumns.filter(
+				(c) =>
+					!columnsHidden.includes(c.key?.toString() || '') &&
+					!hiddenColumnIdsForNested.includes(c.key?.toString() || ''),
+			),
+		[tableColumns, columnsHidden, hiddenColumnIdsForNested],
+	);
 
 	const createFiltersForRecord = useCallback((): NonNullable<
 		IBuilderQuery['filters']
@@ -93,64 +97,45 @@ export function K8sExpandedRow<T>({
 			op: 'and',
 		};
 
-		const metaKeys = groupMeta ?? {};
+		const { groupedByMeta } = record;
 
-		for (const key of Object.keys(metaKeys)) {
-			const value = metaKeys[key];
-			// Skip empty values to avoid creating invalid filters
-			if (value === '' || value === undefined || value === null) {
-				continue;
-			}
+		for (const key of Object.keys(groupedByMeta)) {
 			baseFilters.items.push({
 				key: {
 					key,
-					type: 'resource',
+					type: null,
 				},
 				op: '=',
-				value,
+				value: groupedByMeta[key],
 				id: key,
 			});
 		}
 
 		return baseFilters;
-	}, [queryFilters?.items, groupMeta]);
+	}, [queryFilters?.items, record]);
 
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
-		return getAutoRefreshQueryKey(
-			selectedTime,
-			entity,
+		return getAutoRefreshQueryKey(selectedTime, [
 			'k8sExpandedRow',
-			JSON.stringify(groupMeta),
-			rowKey,
+			record.key,
 			JSON.stringify(queryFilters),
 			JSON.stringify(orderBy),
-		);
-	}, [
-		getAutoRefreshQueryKey,
-		selectedTime,
-		entity,
-		groupMeta,
-		rowKey,
-		queryFilters,
-		orderBy,
-	]);
+		]);
+	}, [selectedTime, record.key, queryFilters, orderBy]);
 
-	const { data, isLoading, isError } = useQuery({
+	const { data, isFetching, isLoading, isError } = useQuery({
 		queryKey,
-		queryFn: async ({ signal }) => {
+		queryFn: ({ signal }) => {
 			const { minTime, maxTime } = getMinMaxTime();
 
-			return await fetchListData(
+			return fetchListData(
 				{
-					limit: EXPANDED_ROW_LIMIT,
+					limit: MAX_ITEMS_TO_FETCH_WHEN_GROUP_BY,
 					offset: 0,
 					filters: createFiltersForRecord(),
 					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
@@ -161,45 +146,48 @@ export function K8sExpandedRow<T>({
 				signal,
 			);
 		},
-		staleTime: 1000 * 60 * 30,
 		refetchInterval: isRefreshEnabled ? refreshInterval : false,
 	});
 
-	const expandedData = data?.data ?? [];
+	const formattedData = useMemo(() => {
+		if (!data?.data) {
+			return undefined;
+		}
 
-	const handleRowClick = useCallback(
-		(_row: T, itemKey: string): void => {
-			setSelectedItem(itemKey);
-		},
-		[setSelectedItem],
-	);
+		const rows = data.data.map((item) => renderRowData(item, groupBy));
+
+		// Without handling duplicated keys, the table became unpredictable/unstable
+		const keyCount = new Map<string, number>();
+		return rows.map((row): K8sRenderedRowData => {
+			const count = keyCount.get(row.key) || 0;
+			keyCount.set(row.key, count + 1);
+
+			if (count > 0) {
+				return { ...row, key: `${row.key}-${count}` };
+			}
+			return row;
+		});
+	}, [data?.data, renderRowData, groupBy]);
+
+	const openRecordInNewTab = (rowRecord: K8sRenderedRowData): void => {
+		const newParams = new URLSearchParams(document.location.search);
+		newParams.set('selectedItem', rowRecord.itemKey);
+		openInNewTab(
+			buildAbsolutePath({
+				relativePath: '',
+				urlQueryString: newParams.toString(),
+			}),
+		);
+	};
 
 	const handleViewAllClick = (): void => {
 		const filters = createFiltersForRecord();
-		setGroupBy([]);
-		setCurrentPage(1);
 		setFilters(filters);
-		if (orderBy) {
-			setMainOrderBy(orderBy);
-		}
+		setCurrentPage(1);
+		setGroupBy([]);
+		setOrderBy(null);
 	};
 
-	const total = data?.total ?? 0;
-	const hasMoreItems = total > EXPANDED_ROW_LIMIT;
-
-	const footerContent = hasMoreItems ? (
-		<Button
-			type="button"
-			color="secondary"
-			variant="outlined"
-			className={styles.viewAllButton}
-			onClick={handleViewAllClick}
-			prefix={<CornerDownRight size={14} />}
-		>
-			View All
-		</Button>
-	) : null;
-
 	return (
 		<div
 			className={styles.expandedTableContainer}
@@ -209,30 +197,50 @@ export function K8sExpandedRow<T>({
 				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
 			)}
 
-			<div data-testid="expanded-table">
-				<TanStackTableStateProvider>
-					<TanStackTable<T>
-						data={expandedData}
-						columns={tableColumns}
-						columnStorageKey={storageKey}
-						isLoading={isLoading}
-						getRowKey={getRowKey}
-						getItemKey={getItemKey}
-						onRowClick={handleRowClick}
-						enableQueryParams={{
-							orderBy: orderByParamKey,
+			{isFetching || isLoading ? (
+				<LoadingContainer />
+			) : (
+				<div data-testid="expanded-table">
+					<Table
+						columns={nestedColumns}
+						dataSource={formattedData}
+						pagination={false}
+						scroll={{ x: true }}
+						tableLayout="fixed"
+						showHeader={false}
+						loading={{
+							spinning: isFetching || isLoading,
+							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
-						tableScrollerProps={{
-							className: styles.expandedTable,
-						}}
-						disableVirtualScroll
-						cellTypographySize="medium"
+						onRow={(
+							rowRecord: K8sRenderedRowData,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									openRecordInNewTab(rowRecord);
+									return;
+								}
+								setSelectedItem(rowRecord.itemKey);
+							},
+							className: styles.expandedClickableRow,
+						})}
 					/>
-				</TanStackTableStateProvider>
-				{!isLoading && expandedData.length > 0 && (
-					<div className={styles.expandedTableFooter}>{footerContent}</div>
-				)}
-			</div>
+
+					{data?.total && data?.total > MAX_ITEMS_TO_FETCH_WHEN_GROUP_BY && (
+						<div className={styles.expandedTableFooter}>
+							<Button
+								type="default"
+								size="small"
+								className={styles.viewAllButton}
+								onClick={handleViewAllClick}
+							>
+								<CornerDownRight size={14} />
+								View All
+							</Button>
+						</div>
+					)}
+				</div>
+			)}
 		</div>
 	);
 }