fix(dashboard-v2): a no-op close of the variable list commits nothing

The shared control reads a selection covering every option as ALL, so opening and
closing the dropdown without touching it promoted an explicit pick into a standing
ALL whenever the current window offered only the selected values — and rewrote a
dynamic ALL's `__all__` into concrete values. A close that left the list as it
opened now commits nothing.

The commit rule (fallback when empty, ALL when exactly the options, typed values
marked) moves to a resolver in utils, out of the component.

.github/workflows/integrationci.yaml

@@ -39,6 +39,8 @@ jobs:
       matrix:
         suite:
           - alerts
+          - alertmanager
+          - alertmanagerrotation
           - basepath
           - callbackauthn
           - cloudintegrations
@@ -53,6 +55,7 @@ jobs:
           - queriermetrics
           - querierscalar
           - queriercommon
+          - querierai
           - rawexportdata
           - promqlconformance
           - querierauthz

docs/api/openapi.yml

@@ -6902,6 +6902,7 @@ components:
     Querybuildertypesv5QueryEnvelope:
       discriminator:
         mapping:
+          builder_ai_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
           builder_formula: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
           builder_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
           builder_trace_operator: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
@@ -6910,6 +6911,7 @@ components:
         propertyName: type
       oneOf:
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
@@ -6924,6 +6926,15 @@ components:
       required:
       - type
       type: object
+    Querybuildertypesv5QueryEnvelopeBuilderAI:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      required:
+      - type
+      type: object
     Querybuildertypesv5QueryEnvelopeClickHouseSQL:
       properties:
         spec:
@@ -7037,6 +7048,7 @@ components:
     Querybuildertypesv5QueryType:
       enum:
       - builder_query
+      - builder_ai_query
       - builder_formula
       - builder_trace_operator
       - clickhouse_sql
@@ -15477,6 +15489,72 @@ paths:
       summary: Lock dashboard (v2)
       tags:
       - dashboard
+  /api/v2/dashboards/{id}/migrate:
+    post:
+      deprecated: false
+      description: 'This endpoint retries the v1→v2 (Perses) migration on a dashboard
+        still stored in the v1 schema and returns the v2-shape result. It is idempotent:
+        a dashboard already in the v2 schema is returned unchanged.'
+      operationId: MigrateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Migrate dashboard to v2
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

docs/contributing/tests/e2e.md

@@ -232,14 +232,11 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
-# Single sub-area
-npx playwright test tests/alerts/history/ --project=chromium
-
 # Single file
-npx playwright test tests/alerts/page.spec.ts --project=chromium
+npx playwright test tests/alerts/alerts.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "AL-01"
+npx playwright test --project=chromium -g "TC-01"
 ```
 
 ### Iterative modes
@@ -273,14 +270,7 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
-
-```bash
-# runs against a locally served frontend, not whatever .env.local points at
-SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
-```
-
-This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
+Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
 
 ### Playwright options
 

ee/modules/dashboard/impldashboard/module.go

@@ -276,6 +276,10 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) MigrateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.MigrateV2(ctx, orgID, id)
+}
+
 func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
 }

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

@@ -80,15 +80,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	fineGrainedAuthz := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseFineGrainedAuthz, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureUseFineGrainedAuthz.String()),
-		Active:     fineGrainedAuthz,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
 	featureSet = append(featureSet, &licensetypes.Feature{
 		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),
@@ -107,15 +98,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	infraMonitoringV2 := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseInfraMonitoringV2, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureUseInfraMonitoringV2.String()),
-		Active:     infraMonitoringV2,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

frontend/public/locales/en-GB/channels.json

@@ -24,6 +24,8 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -24,6 +24,8 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

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

@@ -52,6 +52,8 @@ import type {
 	ListDashboardsV2200,
 	ListDashboardsV2Params,
 	LockDashboardV2PathParameters,
+	MigrateDashboardV2200,
+	MigrateDashboardV2PathParameters,
 	PatchDashboardV2200,
 	PatchDashboardV2PathParameters,
 	PinDashboardV2PathParameters,
@@ -1804,6 +1806,85 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
+/**
+ * This endpoint retries the v1→v2 (Perses) migration on a dashboard still stored in the v1 schema and returns the v2-shape result. It is idempotent: a dashboard already in the v2 schema is returned unchanged.
+ * @summary Migrate dashboard to v2
+ */
+export const migrateDashboardV2 = (
+	{ id }: MigrateDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<MigrateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}/migrate`,
+		method: 'POST',
+		signal,
+	});
+};
+
+export const getMigrateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof migrateDashboardV2>>,
+		TError,
+		{ pathParams: MigrateDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof migrateDashboardV2>>,
+	TError,
+	{ pathParams: MigrateDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['migrateDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof migrateDashboardV2>>,
+		{ pathParams: MigrateDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return migrateDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type MigrateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof migrateDashboardV2>>
+>;
+
+export type MigrateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Migrate dashboard to v2
+ */
+export const useMigrateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof migrateDashboardV2>>,
+		TError,
+		{ pathParams: MigrateDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof migrateDashboardV2>>,
+	TError,
+	{ pathParams: MigrateDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getMigrateDashboardV2MutationOptions(options));
+};
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -4301,6 +4301,18 @@ export interface Querybuildertypesv5QueryEnvelopeBuilderDTO {
 	type: Querybuildertypesv5QueryEnvelopeBuilderDTOType;
 }
 
+export enum Querybuildertypesv5QueryEnvelopeBuilderAIDTOType {
+	builder_ai_query = 'builder_ai_query',
+}
+export interface Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO;
+	/**
+	 * @type string
+	 * @enum builder_ai_query
+	 */
+	type: Querybuildertypesv5QueryEnvelopeBuilderAIDTOType;
+}
+
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	/**
 	 * @type boolean
@@ -4484,6 +4496,7 @@ export interface Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO {
 
 export type Querybuildertypesv5QueryEnvelopeDTO =
 	| Querybuildertypesv5QueryEnvelopeBuilderDTO
+	| Querybuildertypesv5QueryEnvelopeBuilderAIDTO
 	| Querybuildertypesv5QueryEnvelopeFormulaDTO
 	| Querybuildertypesv5QueryEnvelopeTraceOperatorDTO
 	| Querybuildertypesv5QueryEnvelopePromQLDTO
@@ -8287,6 +8300,7 @@ export interface Querybuildertypesv5QueryRangeResponseDTO {
 
 export enum Querybuildertypesv5QueryTypeDTO {
 	builder_query = 'builder_query',
+	builder_ai_query = 'builder_ai_query',
 	builder_formula = 'builder_formula',
 	builder_trace_operator = 'builder_trace_operator',
 	clickhouse_sql = 'clickhouse_sql',
@@ -11164,6 +11178,17 @@ export type UnlockDashboardV2PathParameters = {
 export type LockDashboardV2PathParameters = {
 	id: string;
 };
+export type MigrateDashboardV2PathParameters = {
+	id: string;
+};
+export type MigrateDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/constants/events.ts

@@ -1,9 +1,3 @@
-import logEvent from 'api/common/logEvent';
-import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { getNavigationReferrer } from 'lib/navigation';
-import { extractQueryPairs } from 'utils/queryContextUtils';
-import { isCustomTimeRange } from 'store/globalTime';
-
 export enum Events {
 	UPDATE_GRAPH_VISIBILITY_STATE = 'UPDATE_GRAPH_VISIBILITY_STATE',
 	UPDATE_GRAPH_MANAGER_TABLE = 'UPDATE_GRAPH_MANAGER_TABLE',
@@ -45,155 +39,3 @@ export enum InfraMonitoringEvents {
 	StatefulSet = 'statefulSet',
 	Volumes = 'volumes',
 }
-
-export function logInfraFilterCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	source: 'quick_filter' | 'search' | 'host_status_toggle',
-	expression: string,
-	extraKeys?: string[],
-): void {
-	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
-		(pair) => pair.key,
-	);
-
-	if (extraKeys) {
-		extraKeys.forEach((key) => expressionKeys.push(key));
-	}
-
-	if (expressionKeys.length === 0) {
-		return;
-	}
-
-	void logEvent('infra_filter_customized', {
-		entity_type: entityType,
-		source,
-		expression_keys: [...new Set(expressionKeys)],
-	});
-}
-
-export function logInfraMonitoringListViewedEvent(
-	entity: InfraMonitoringEntity,
-): void {
-	const referrer = getNavigationReferrer();
-
-	void logEvent('infra_list_viewed', {
-		entity,
-		referrer,
-	});
-}
-
-export function logInfraTimeRangeCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	rangeLabel: string,
-): void {
-	void logEvent('infra_time_range_customized', {
-		entity_type: entityType,
-		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
-	});
-}
-
-export function logInfraColumnCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	columnsList: string[],
-	fontSize: string,
-	maxLinesPerRow: number,
-	source: 'list' | 'expanded',
-): void {
-	void logEvent('infra_column_customized', {
-		entity_type: entityType,
-		columns_list: columnsList,
-		font_size: fontSize,
-		max_lines_per_row: maxLinesPerRow,
-		source,
-	});
-}
-
-export function logInfraColumnSortedEvent(
-	entityType: InfraMonitoringEntity,
-	columnKey: string,
-	direction: 'asc' | 'desc',
-	source: 'list' | 'expanded',
-): void {
-	void logEvent('infra_column_sorted', {
-		entity_type: entityType,
-		column_key: columnKey,
-		direction,
-		source,
-	});
-}
-
-export function logInfraDrawerTimeRangeCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	rangeLabel: string,
-): void {
-	void logEvent('infra_drawer_time_range_customized', {
-		entity_type: entityType,
-		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
-	});
-}
-
-export function logInfraDrawerFilterCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
-	expression: string,
-	filterSource: 'search' | 'logs',
-): void {
-	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
-		(pair) => pair.key,
-	);
-
-	if (expressionKeys.length === 0) {
-		return;
-	}
-
-	void logEvent('infra_drawer_filter_customized', {
-		entity_type: entityType,
-		tab,
-		expression_keys: [...new Set(expressionKeys)],
-		filter_source: filterSource,
-	});
-}
-
-export function logInfraGroupByCustomizedEvent(
-	entityType: InfraMonitoringEntity,
-	groupByKeysList: string[],
-): void {
-	void logEvent('infra_group_by_customized', {
-		entity_type: entityType,
-		group_by_keys_list: groupByKeysList,
-	});
-}
-
-export function logInfraDrawerTabViewedEvent(
-	entityType: InfraMonitoringEntity,
-	tab: string,
-	isDefaultTab: boolean,
-): void {
-	void logEvent('infra_drawer_tab_viewed', {
-		entity_type: entityType,
-		tab,
-		is_default_tab: isDefaultTab,
-	});
-}
-
-export function logInfraExplorerNavigatedEvent(params: {
-	entityType: InfraMonitoringEntity;
-	destination:
-		| 'metrics_explorer'
-		| 'logs_explorer'
-		| 'traces_explorer'
-		| 'k8s_list';
-	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
-	tab: string;
-	sourceKey: string | null;
-	drawerDurationMsAtNavigation: number | null;
-}): void {
-	void logEvent('infra_explorer_navigated', {
-		entity_type: params.entityType,
-		destination: params.destination,
-		source: params.source,
-		tab: params.tab,
-		source_key: params.sourceKey,
-		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
-	});
-}

frontend/src/constants/features.ts

@@ -9,8 +9,6 @@ export enum FeatureKeys {
 	ANOMALY_DETECTION = 'anomaly_detection',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
-	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
-	USE_INFRA_MONITORING_V2 = 'use_infra_monitoring_v2',
 	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -29,7 +29,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -41,7 +40,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -26,10 +26,7 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--success"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--success">
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -41,10 +38,7 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--error"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--error">
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -56,10 +50,7 @@ function ChangePercentage({
 	}
 
 	return (
-		<div
-			className="change-percentage change-percentage--no-previous-data"
-			data-testid="stats-card-change"
-		>
+		<div className="change-percentage change-percentage--no-previous-data">
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -112,12 +103,7 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div
-			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
-			data-testid="stats-card"
-			data-stats-title={title}
-			data-empty={isEmpty ? 'true' : 'false'}
-		>
+		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -137,7 +123,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label" data-testid="stats-card-value">
+				<div className="count-label">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx

@@ -81,11 +81,7 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div
-			style={{ height: '100%', width: '100%' }}
-			ref={graphRef}
-			data-testid="stats-card-sparkline"
-		>
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -48,16 +48,11 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card" data-testid="top-contributors-card">
+			<div className="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button
-							type="text"
-							className="view-all"
-							onClick={toggleViewAllDrawer}
-							data-testid="top-contributors-view-all"
-						>
+						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -68,10 +68,7 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div
-						className="total-contribution"
-						data-testid="top-contributors-row-count"
-					>
+					<div className="total-contribution">
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -81,10 +78,7 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'top-contributors-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -31,10 +31,7 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div
-				className="top-contributors-card--view-all"
-				data-testid="top-contributors-drawer"
-			>
+			<div className="top-contributors-card--view-all">
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);
 
 	return (
-		<div className="timeline-graph" data-testid="timeline-graph">
-			<div className="timeline-graph__title" data-testid="timeline-graph-title">
+		<div className="timeline-graph">
+			<div className="timeline-graph__title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -118,10 +118,7 @@ function TimelineTableContent(): JSX.Element {
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'timeline-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -131,15 +128,12 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table" data-testid="timeline-table">
+		<div className="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div
-							className="timeline-table__filter-search"
-							data-testid="timeline-filter-search"
-						>
+						<div className="timeline-table__filter-search">
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -161,7 +155,6 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
-						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -179,17 +172,14 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error" data-testid="timeline-error">
+							<div className="timeline-table__error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div
-							className="timeline-table__pagination-info"
-							data-testid="timeline-footer-range"
-						>
+						<div className="timeline-table__pagination-info">
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -21,7 +21,7 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state" data-testid="timeline-row-state">
+			<div className="alert-rule-state">
 				<AlertState state={value} showLabel />
 			</div>
 		),
@@ -30,7 +30,7 @@ export const timelineTableColumns = ({
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels" data-testid="timeline-row-labels">
+			<div className="alert-rule-labels">
 				<AlertLabels labels={labels} />
 			</div>
 		),
@@ -40,10 +40,7 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div
-				className="alert-rule__created-at"
-				data-testid="timeline-row-created-at"
-			>
+			<div className="alert-rule__created-at">
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -56,7 +53,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled data-testid="timeline-row-actions">
+						<Button type="text" ghost disabled>
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -68,7 +65,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost data-testid="timeline-row-actions">
+					<Button type="text" ghost>
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -23,7 +23,6 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
-			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -34,7 +33,6 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
-			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -59,17 +57,14 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
-			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
-			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
-			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,18 +1,28 @@
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
+import { GoogleChatInitialConfig } from 'container/CreateAlertChannels/defaults';
 import {
+	googleChatDescriptionDefaultValue,
+	googleChatTitleDefaultValue,
 	opsGenieDescriptionDefaultValue,
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
+	pagerDutyDescriptionDefaultValue,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
 } from 'mocks-server/__mockdata__/alerts';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 
 import { testLabelInputAndHelpValue } from './testUtils';
 
@@ -225,7 +235,7 @@ describe('Create Alert Channel', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
+					pagerDutyDescriptionDefaultValue,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
@@ -419,5 +429,150 @@ describe('Create Alert Channel', () => {
 				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
 			});
 		});
+		describe('Google Chat', () => {
+			const validWebhookUrl =
+				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
+				expect(screen.getByText('Google Chat')).toBeInTheDocument();
+			});
+
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+
+			it('Should check if Title contains the google chat template', () => {
+				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+					googleChatTitleDefaultValue,
+				);
+			});
+
+			it('Should check if Description contains the google chat template', () => {
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
+				const user = userEvent.setup();
+
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'gchat-channel',
+				);
+				await user.type(
+					screen.getByTestId('webhook-url-textbox'),
+					'https://example.com/webhook',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'google_chat_webhook_url_invalid',
+					}),
+				);
+			});
+
+			it('Should check if saving sends a googlechat_configs payload', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'gchat-channel',
+				);
+				await user.type(screen.getByTestId('webhook-url-textbox'), validWebhookUrl);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'gchat-channel',
+					googlechat_configs: [
+						{
+							webhook_url: validWebhookUrl,
+							title: GoogleChatInitialConfig.title,
+							text: GoogleChatInitialConfig.text,
+							send_resolved: true,
+						},
+					],
+				});
+			});
+		});
+		describe('Changing the channel type', () => {
+			async function selectType(
+				user: ReturnType<typeof userEvent.setup>,
+				optionText: string,
+			): Promise<void> {
+				// the type dropdown opens on the inner search input of the antd select
+				await user.click(screen.getByRole('combobox'));
+				await user.click(await screen.findByTitle(optionText));
+			}
+
+			it('Should check if switching to Google Chat and back swaps the prefilled templates', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Slack} />);
+
+				await selectType(user, 'Google Chat');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						googleChatTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+
+				await selectType(user, 'Slack');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						slackTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					slackDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if switching to Pagerduty prefills the pagerduty description and not the opsgenie one', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
+
+				await selectType(user, 'Pagerduty');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('pager-description-textarea')).toHaveTextContent(
+						pagerDutyDescriptionDefaultValue,
+					),
+				);
+			});
+		});
 	});
 });

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -5,7 +5,7 @@ import {
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
+	pagerDutyDescriptionDefaultValue,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
@@ -150,7 +150,7 @@ describe('Create Alert Channel (Normal User)', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
+					pagerDutyDescriptionDefaultValue,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {

frontend/src/container/CreateAlertChannels/config.ts

@@ -104,6 +104,7 @@ export enum ChannelType {
 	Pagerduty = 'pagerduty',
 	Opsgenie = 'opsgenie',
 	MsTeams = 'msteams',
+	GoogleChat = 'googlechat',
 }
 
 // LabelFilterStatement will be used for preparing filter conditions / matchers
@@ -125,3 +126,11 @@ export interface MsTeamsChannel extends Channel {
 	title?: string;
 	text?: string;
 }
+
+export interface GoogleChatChannel extends Channel {
+	// incoming webhook url of the google chat space, must be an
+	// https url on chat.googleapis.com
+	webhook_url?: string;
+	title?: string;
+	text?: string;
+}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -1,4 +1,51 @@
-import { EmailChannel, OpsgenieChannel, PagerChannel } from './config';
+import {
+	ChannelType,
+	EmailChannel,
+	GoogleChatChannel,
+	MsTeamsChannel,
+	OpsgenieChannel,
+	PagerChannel,
+	SlackChannel,
+	WebhookChannel,
+} from './config';
+
+// shared by slack and ms teams, both render the same title / description boxes
+export const SlackInitialConfig: Partial<SlackChannel> = {
+	text: `{{ range .Alerts -}}
+     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
+
+     *Summary:* {{ .Annotations.summary }}
+     *Description:* {{ .Annotations.description }}
+     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
+     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
+
+     *Details:*
+       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
+       {{ end }}
+     {{ end }}`,
+	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
+       {{" "}}(
+       {{- with .CommonLabels.Remove .GroupLabels.Names }}
+         {{- range $index, $label := .SortedPairs -}}
+           {{ if $index }}, {{ end }}
+           {{- $label.Name }}="{{ $label.Value -}}"
+         {{- end }}
+       {{- end -}}
+       )
+     {{- end }}`,
+};
+
+// mirrors DefaultGoogleChatReceiverConfig in pkg/types/alertmanagertypes/googlechat.go,
+// which the backend applies when title / text are left empty
+export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
+	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+	text: `{{ range .Alerts -}}
+**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }}
+**Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }}
+**Description:** {{ .Annotations.description }}{{ end }}
+{{ end }}`,
+};
 
 export const PagerInitialConfig: Partial<PagerChannel> = {
 	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
@@ -446,3 +493,26 @@ export const EmailInitialConfig: Partial<EmailChannel> = {
 	</body>
   </html>`,
 };
+
+// prefilled values of every channel type, keyed by type so the form can apply
+// exactly one set of defaults and swap it when the type changes
+export const ChannelInitialConfig: Record<
+	ChannelType,
+	Partial<
+		SlackChannel &
+			WebhookChannel &
+			PagerChannel &
+			MsTeamsChannel &
+			OpsgenieChannel &
+			EmailChannel &
+			GoogleChatChannel
+	>
+> = {
+	[ChannelType.Slack]: SlackInitialConfig,
+	[ChannelType.MsTeams]: SlackInitialConfig,
+	[ChannelType.GoogleChat]: GoogleChatInitialConfig,
+	[ChannelType.Pagerduty]: PagerInitialConfig,
+	[ChannelType.Opsgenie]: OpsgenieInitialConfig,
+	[ChannelType.Email]: EmailInitialConfig,
+	[ChannelType.Webhook]: {},
+};

frontend/src/container/CreateAlertChannels/index.tsx

@@ -14,16 +14,24 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
+import {
+	useCreateChannel,
+	useTestChannel,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
 
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -31,12 +39,12 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from './config';
+import { ChannelInitialConfig } from './defaults';
 import {
-	EmailInitialConfig,
-	OpsgenieInitialConfig,
-	PagerInitialConfig,
-} from './defaults';
-import { isChannelType } from './utils';
+	isChannelType,
+	isValidGoogleChatWebhookURL,
+	prepareGoogleChatRequest,
+} from './utils';
 
 import './CreateAlertChannels.styles.scss';
 
@@ -60,69 +68,38 @@ function CreateAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel
+				EmailChannel &
+				GoogleChatChannel
 		>
-	>({
+	>(() => ({
 		send_resolved: true,
-		text: `{{ range .Alerts -}}
-     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
-
-     *Summary:* {{ .Annotations.summary }}
-     *Description:* {{ .Annotations.description }}
-     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
-     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
-
-     *Details:*
-       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
-       {{ end }}
-     {{ end }}`,
-		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
-     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
-       {{" "}}(
-       {{- with .CommonLabels.Remove .GroupLabels.Names }}
-         {{- range $index, $label := .SortedPairs -}}
-           {{ if $index }}, {{ end }}
-           {{- $label.Name }}="{{ $label.Value -}}"
-         {{- end }}
-       {{- end -}}
-       )
-     {{- end }}`,
-	});
+		...ChannelInitialConfig[preType],
+	}));
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
+	const { mutateAsync: createChannel } = useCreateChannel();
+	const { mutateAsync: testChannel } = useTestChannel();
+
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
 		(value: string) => {
-			const currentType = type;
-			setType(value as ChannelType);
-
-			if (value === ChannelType.Pagerduty && currentType !== value) {
-				// reset config to pager defaults
-				setSelectedConfig({
-					name: selectedConfig?.name,
-					send_resolved: selectedConfig.send_resolved,
-					...PagerInitialConfig,
-				});
+			const nextType = value as ChannelType;
+			if (nextType === type) {
+				return;
 			}
 
-			if (value === ChannelType.Opsgenie && currentType !== value) {
-				setSelectedConfig((selectedConfig) => ({
-					...selectedConfig,
-					...OpsgenieInitialConfig,
-				}));
-			}
+			setType(nextType);
 
-			// reset config to email defaults
-			if (value === ChannelType.Email && currentType !== value) {
-				setSelectedConfig((selectedConfig) => ({
-					...selectedConfig,
-					...EmailInitialConfig,
-				}));
-			}
+			// the fields the types share (title, text, description) keep the value of
+			// the type that was selected before, so the new type's defaults have to be
+			// written to both the config and the form
+			const defaults = ChannelInitialConfig[nextType];
+			setSelectedConfig((selectedConfig) => ({ ...selectedConfig, ...defaults }));
+			formInstance.setFieldsValue(defaults);
 		},
-		[type, selectedConfig],
+		[type, formInstance],
 	);
 
 	const prepareSlackRequest = useCallback(
@@ -407,6 +384,56 @@ function CreateAlertChannels({
 		showErrorModal,
 	]);
 
+	const validateGoogleChatConfig = useCallback((): boolean => {
+		if (!selectedConfig.webhook_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return false;
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			notifications.error({
+				message: 'Error',
+				description: t('google_chat_webhook_url_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig.webhook_url, notifications, t]);
+
+	const onGoogleChatHandler = useCallback(async () => {
+		if (!validateGoogleChatConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			if (!selectedConfig.name) {
@@ -424,6 +451,7 @@ function CreateAlertChannels({
 				[ChannelType.Opsgenie]: onOpsgenieHandler,
 				[ChannelType.MsTeams]: onMsTeamsHandler,
 				[ChannelType.Email]: onEmailHandler,
+				[ChannelType.GoogleChat]: onGoogleChatHandler,
 			};
 
 			if (isChannelType(value)) {
@@ -455,6 +483,7 @@ function CreateAlertChannels({
 			onOpsgenieHandler,
 			onMsTeamsHandler,
 			onEmailHandler,
+			onGoogleChatHandler,
 			notifications,
 			t,
 		],
@@ -492,6 +521,13 @@ function CreateAlertChannels({
 						request = prepareEmailRequest();
 						await testEmail(request);
 						break;
+					case ChannelType.GoogleChat:
+						if (!validateGoogleChatConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
 					default:
 						notifications.error({
 							message: 'Error',
@@ -513,7 +549,11 @@ function CreateAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				showErrorModal(error as APIError);
+				showErrorModal(
+					error instanceof APIError
+						? error
+						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
+				);
 
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
@@ -535,6 +575,8 @@ function CreateAlertChannels({
 			prepareSlackRequest,
 			prepareMsTeamsRequest,
 			prepareEmailRequest,
+			validateGoogleChatConfig,
+			testChannel,
 			notifications,
 		],
 	);
@@ -562,9 +604,6 @@ function CreateAlertChannels({
 					initialValue: {
 						type,
 						...selectedConfig,
-						...PagerInitialConfig,
-						...OpsgenieInitialConfig,
-						...EmailInitialConfig,
 					},
 				}}
 			/>

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,4 +1,39 @@
-import { ChannelType } from './config';
+import {
+	AlertmanagertypesPostableChannelDTO,
+	ConfigSecretURLDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelType, GoogleChatChannel } from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
+
+const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
+
+// the backend enforces the same two rules, this is only for a nicer error experience
+export const isValidGoogleChatWebhookURL = (url: string): boolean => {
+	try {
+		const { protocol, hostname } = new URL(url);
+		return (
+			protocol === 'https:' && hostname.toLowerCase() === GOOGLE_CHAT_WEBHOOK_HOST
+		);
+	} catch {
+		return false;
+	}
+};
+
+// create, update and test all send the same body shape
+export const prepareGoogleChatRequest = (
+	config: Partial<GoogleChatChannel>,
+): AlertmanagertypesPostableChannelDTO => ({
+	name: config.name || '',
+	googlechat_configs: [
+		{
+			// the generated type models go's config.SecretURL as an object, the api takes a string
+			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
+			title: config.title || '',
+			text: config.text || '',
+			send_resolved: config.send_resolved || false,
+		},
+	],
+});

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -34,7 +34,6 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
-									testId="send-notification-if-data-is-missing-input"
 								/>
 								<Typography.Text>Minutes</Typography.Text>
 							</div>
@@ -67,7 +66,6 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
-									testId="enforce-minimum-datapoints-input"
 								/>
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -66,7 +66,6 @@ function EvaluationWindowPopover({
 						tabIndex={0}
 						data-value={option.value}
 						data-section-id={sectionId}
-						data-testid={`${sectionId}-option-${option.value}`}
 						onClick={(): void => onChange(option.value)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {

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

@@ -186,7 +186,6 @@ function Footer(): JSX.Element {
 				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
-				testId="save-alert-rule-button"
 			>
 				{isCreatingAlertRule || isUpdatingAlertRule ? (
 					<Loader data-testid="save-alert-rule-loader-icon" size={14} />
@@ -219,7 +218,6 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
-				testId="test-notification-button"
 			>
 				{isTestingAlertRule ? (
 					<Loader data-testid="test-notification-loader-icon" size={14} />
@@ -251,7 +249,6 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleDiscard}
 				disabled={disableButtons}
-				testId="discard-alert-rule-button"
 			>
 				<X size={14} /> Discard
 			</Button>

frontend/src/container/EditAlertChannels/index.tsx

@@ -14,10 +14,17 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
+import {
+	useTestChannel,
+	useUpdateChannelByID,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -25,10 +32,15 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
+import {
+	isValidGoogleChatWebhookURL,
+	prepareGoogleChatRequest,
+} from 'container/CreateAlertChannels/utils';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
 
 function EditAlertChannels({
 	initialValue,
@@ -45,7 +57,8 @@ function EditAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel
+				EmailChannel &
+				GoogleChatChannel
 		>
 	>({
 		...initialValue,
@@ -54,6 +67,26 @@ function EditAlertChannels({
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
+	const { mutateAsync: updateChannel } = useUpdateChannelByID();
+	const { mutateAsync: testChannel } = useTestChannel();
+
+	const notifyError = useCallback(
+		(error: unknown): APIError => {
+			const apiError =
+				error instanceof APIError
+					? error
+					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
+
+			notifications.error({
+				message: apiError.getErrorCode(),
+				description: apiError.getErrorMessage(),
+			});
+
+			return apiError;
+		},
+		[notifications],
+	);
+
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
 	);
@@ -364,6 +397,61 @@ function EditAlertChannels({
 		}
 	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
 
+	const validateGoogleChatConfig = useCallback((): string => {
+		if (!selectedConfig?.webhook_url) {
+			return t('webhook_url_required');
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			return t('google_chat_webhook_url_invalid');
+		}
+
+		return '';
+	}, [selectedConfig, t]);
+
+	const onGoogleChatEditHandler = useCallback(async () => {
+		const validationError = validateGoogleChatConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareGoogleChatRequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			let result;
@@ -379,6 +467,8 @@ function EditAlertChannels({
 				result = await onOpsgenieEditHandler();
 			} else if (value === ChannelType.Email) {
 				result = await onEmailEditHandler();
+			} else if (value === ChannelType.GoogleChat) {
+				result = await onGoogleChatEditHandler();
 			}
 			logEvent('Alert Channel: Save channel', {
 				type: value,
@@ -397,6 +487,7 @@ function EditAlertChannels({
 			onMsTeamsEditHandler,
 			onOpsgenieEditHandler,
 			onEmailEditHandler,
+			onGoogleChatEditHandler,
 		],
 	);
 
@@ -438,6 +529,19 @@ function EditAlertChannels({
 							await testEmail(request);
 						}
 						break;
+					case ChannelType.GoogleChat: {
+						const validationError = validateGoogleChatConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
+					}
 					default:
 						notifications.error({
 							message: 'Error',
@@ -459,10 +563,7 @@ function EditAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				notifications.error({
-					message: (error as APIError).getErrorCode(),
-					description: (error as APIError).getErrorMessage(),
-				});
+				notifyError(error);
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
 					sendResolvedAlert: selectedConfig?.send_resolved,
@@ -476,6 +577,9 @@ function EditAlertChannels({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			t,
+			notifyError,
+			validateGoogleChatConfig,
+			testChannel,
 			prepareWebhookRequest,
 			preparePagerRequest,
 			prepareSlackRequest,

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

@@ -0,0 +1,82 @@
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form, Input } from 'antd';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+
+import { GoogleChatChannel } from '../../CreateAlertChannels/config';
+import { isValidGoogleChatWebhookURL } from '../../CreateAlertChannels/utils';
+
+function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
+	const { t } = useTranslation('channels');
+
+	return (
+		<>
+			<Form.Item
+				name="webhook_url"
+				label={t('field_webhook_url')}
+				required
+				rules={[
+					{
+						validator: (_, value: string): Promise<void> =>
+							!value || isValidGoogleChatWebhookURL(value)
+								? Promise.resolve()
+								: Promise.reject(new Error(t('google_chat_webhook_url_invalid'))),
+					},
+				]}
+				tooltip={{
+					title: (
+						<MarkdownRenderer
+							markdownContent={t('tooltip_google_chat_url')}
+							variables={{}}
+						/>
+					),
+					overlayInnerStyle: { maxWidth: 400 },
+					placement: 'right',
+				}}
+			>
+				<Input
+					onChange={(event): void => {
+						setSelectedConfig((value) => ({
+							...value,
+							webhook_url: event.target.value,
+						}));
+					}}
+					data-testid="webhook-url-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item name="title" label={t('field_slack_title')}>
+				<Input.TextArea
+					rows={4}
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							title: event.target.value,
+						}))
+					}
+					data-testid="title-textarea"
+				/>
+			</Form.Item>
+
+			<Form.Item name="text" label={t('field_slack_description')}>
+				<Input.TextArea
+					rows={4}
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							text: event.target.value,
+						}))
+					}
+					data-testid="description-textarea"
+					placeholder={t('placeholder_slack_description')}
+				/>
+			</Form.Item>
+		</>
+	);
+}
+
+interface GoogleChatProps {
+	setSelectedConfig: Dispatch<SetStateAction<Partial<GoogleChatChannel>>>;
+}
+
+export default GoogleChat;

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,6 +9,7 @@ import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
+	GoogleChatChannel,
 	OpsgenieChannel,
 	PagerChannel,
 	SlackChannel,
@@ -17,6 +18,7 @@ import {
 import history from 'lib/history';
 
 import EmailSettings from './Settings/Email';
+import GoogleChatSettings from './Settings/GoogleChat';
 import MsTeamsSettings from './Settings/MsTeams';
 import OpsgenieSettings from './Settings/Opsgenie';
 import PagerSettings from './Settings/Pager';
@@ -49,6 +51,8 @@ function FormAlertChannels({
 				return <PagerSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.MsTeams:
 				return <MsTeamsSettings setSelectedConfig={setSelectedConfig} />;
+			case ChannelType.GoogleChat:
+				return <GoogleChatSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Opsgenie:
 				return <OpsgenieSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Email:
@@ -129,6 +133,14 @@ function FormAlertChannels({
 						<Select.Option value="msteams" key="msteams" data-testid="select-option">
 							Microsoft Teams
 						</Select.Option>
+
+						<Select.Option
+							value="googlechat"
+							key="googlechat"
+							data-testid="select-option"
+						>
+							Google Chat
+						</Select.Option>
 					</Select>
 				</Form.Item>
 
@@ -176,7 +188,8 @@ interface FormAlertChannelsProps {
 					WebhookChannel &
 					PagerChannel &
 					OpsgenieChannel &
-					EmailChannel
+					EmailChannel &
+					GoogleChatChannel
 			>
 		>
 	>;

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -119,7 +119,6 @@ function BasicInfo({
 					<SeveritySelect
 						getPopupContainer={popupContainer}
 						defaultValue="critical"
-						data-testid="alert-severity-select"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
@@ -148,7 +147,6 @@ function BasicInfo({
 					]}
 				>
 					<InputSmall
-						data-testid="alert-name-input-v1"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
@@ -163,7 +161,6 @@ function BasicInfo({
 					name={['annotations', 'description']}
 				>
 					<TextareaMedium
-						data-testid="alert-description-input"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -105,7 +105,7 @@ function QuerySection({
 		{
 			label: (
 				<Tooltip title="Query Builder">
-					<Button className="nav-btns" data-testid="query-builder-tab">
+					<Button className="nav-btns">
 						<Atom size={14} />
 						<Typography.Text>Query Builder</Typography.Text>
 					</Button>
@@ -122,11 +122,7 @@ function QuerySection({
 							: 'ClickHouse'
 					}
 				>
-					<Button
-						className="nav-btns"
-						disabled={isAnomalyDetection}
-						data-testid="clickhouse-tab"
-					>
+					<Button className="nav-btns" disabled={isAnomalyDetection}>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
@@ -166,11 +162,7 @@ function QuerySection({
 								: 'ClickHouse'
 						}
 					>
-						<Button
-							className="nav-btns"
-							disabled={isAnomalyDetection}
-							data-testid="clickhouse-tab"
-						>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
@@ -188,11 +180,7 @@ function QuerySection({
 								: 'PromQL'
 						}
 					>
-						<Button
-							className="nav-btns"
-							disabled={isAnomalyDetection}
-							data-testid="promql-tab"
-						>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -80,7 +80,6 @@ function RuleOptions({
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
-			data-testid="alert-threshold-op-select"
 			onChange={(value: string | unknown): void => {
 				const newOp = (value as string) || '';
 
@@ -117,7 +116,6 @@ function RuleOptions({
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
-			data-testid="alert-threshold-match-type-select-v1"
 			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
@@ -179,7 +177,6 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
-			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -197,7 +194,6 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
-			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -399,7 +395,6 @@ function RuleOptions({
 									value={alertDef?.condition?.target}
 									onChange={onChange}
 									type="number"
-									data-testid="alert-threshold-target-input"
 									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>

frontend/src/container/FormAlertRules/index.tsx

@@ -844,6 +844,8 @@ function FormAlertRules({
 
 	return (
 		<>
+			{Element}
+
 			<div
 				id="top"
 				className={`form-alert-rules-container ${
@@ -966,7 +968,6 @@ function FormAlertRules({
 								!isChannelConfigurationValid ||
 								queryStatus === 'error'
 							}
-							data-testid="alert-save-button"
 						>
 							{isNewRule ? t('button_createrule') : t('button_savechanges')}
 						</ActionButton>
@@ -980,7 +981,6 @@ function FormAlertRules({
 							}
 							type="default"
 							onClick={onTestRuleHandler}
-							data-testid="alert-test-button"
 						>
 							{' '}
 							{t('button_testrule')}
@@ -989,7 +989,6 @@ function FormAlertRules({
 							disabled={loading || false}
 							type="default"
 							onClick={onCancelHandler}
-							data-testid="alert-cancel-button"
 						>
 							{isNewRule && t('button_cancelchanges')}
 							{ruleId && !isEmpty(ruleId) && t('button_discard')}
@@ -999,7 +998,6 @@ function FormAlertRules({
 			</div>
 
 			<ConfirmDialog
-				testId="alert-save-confirm-dialog"
 				open={isConfirmSaveOpen}
 				onOpenChange={setIsConfirmSaveOpen}
 				title={t('confirm_save_title')}

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

@@ -174,7 +174,6 @@ function LabelSelect({
 
 			<div style={{ display: 'flex', width: '100%' }}>
 				<Input
-					data-testid="alert-labels-input-v1"
 					placeholder={renderPlaceholder()}
 					onChange={handleLabelChange}
 					onKeyUp={(e): void => {

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -17,11 +17,7 @@ import {
 	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import {
-	InfraMonitoringEvents,
-	logInfraFilterCustomizedEvent,
-	logInfraMonitoringListViewedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
@@ -57,6 +53,10 @@ import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import {
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+} from 'container/InfraMonitoringK8sV2/Base/events';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

frontend/src/container/InfraMonitoringHostsV2/StatusFilter.tsx

@@ -1,5 +1,4 @@
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
-import { logInfraFilterCustomizedEvent } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import {
 	StatusFilterValue,
@@ -9,6 +8,7 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
 import styles from './StatusFilter.module.scss';
+import { logInfraFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 const statusOptions: Array<{
 	label: string;

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Progress } from '@signozhq/ui/progress';
 import {
@@ -10,6 +9,7 @@ import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';
+import { getStrokeColorForPercent } from 'container/InfraMonitoringK8sV2/components/EntityProgressBar.utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
@@ -18,26 +18,6 @@ import {
 
 import infraHostsStyles from './InfraMonitoringHosts.module.scss';
 
-export function getProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_SAKURA_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
-export function getMemoryProgressColor(percent: number): string {
-	if (percent >= 90) {
-		return Color.BG_CHERRY_500;
-	}
-	if (percent >= 60) {
-		return Color.BG_AMBER_500;
-	}
-	return Color.BG_FOREST_500;
-}
-
 export type HostDetailMetadataConfigType =
 	K8sDetailsMetadataConfig<InframonitoringtypesHostRecordDTO>;
 export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
@@ -79,7 +59,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getProgressColor(Number(value))}
+				strokeColor={getStrokeColorForPercent('cpu', Number(value))}
 				showInfo
 			/>
 		),
@@ -90,7 +70,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getMemoryProgressColor(Number(value))}
+				strokeColor={getStrokeColorForPercent('memory', Number(value))}
 				showInfo
 			/>
 		),

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

@@ -9,6 +9,7 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8sV2/Base/utils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	ExpandButtonWrapper,
 	GroupedStatusCounts,
 	ValidateColumnValueWrapper,
@@ -98,7 +99,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 	},
 	{
-		id: 'hostName',
+		id: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Hostname"
@@ -108,7 +109,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 		accessorFn: (row): string => row.hostName ?? '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -168,7 +169,10 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 	{
 		id: 'cpu',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#cpu-usage">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/host-monitoring#cpu-usage"
+				tooltip={<EntityProgressThresholds type="cpu" />}
+			>
 				CPU Usage
 			</ColumnHeader>
 		),
@@ -195,7 +199,9 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader
-				tooltip="Excluding cache memory."
+				tooltip={
+					<EntityProgressThresholds type="memory" note="Excluding cache memory." />
+				}
 				docPath="/infrastructure-monitoring/host-monitoring#memory-usage"
 			>
 				Memory Usage (WSS)
@@ -221,9 +227,12 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		},
 	},
 	{
-		id: 'diskUsage',
+		id: 'disk_usage',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#disk-usage">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/host-monitoring#disk-usage"
+				tooltip={<EntityProgressThresholds type="disk" />}
+			>
 				Disk Usage
 			</ColumnHeader>
 		),

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

@@ -3,13 +3,14 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 import styles from './ColumnHeader.module.scss';
 import cx from 'classnames';
+import { MouseEventHandler } from 'react';
 
 const DOCS_BASE_URL = `${process.env.DOCS_BASE_URL}/docs`;
 
 interface ColumnHeaderProps {
 	children?: React.ReactNode;
 	docPath?: string;
-	tooltip?: string;
+	tooltip?: React.ReactNode;
 	className?: string;
 }
 
@@ -19,6 +20,9 @@ function ColumnHeader({
 	tooltip,
 	className,
 }: ColumnHeaderProps): JSX.Element {
+	const stopPropagationHandler: MouseEventHandler = (e): void =>
+		e.stopPropagation();
+
 	const renderContent = (): React.ReactNode => {
 		if (children) {
 			return children;
@@ -30,21 +34,25 @@ function ColumnHeader({
 	const renderInfoIcon = (): React.ReactNode => {
 		if (docPath) {
 			const tooltipTitle = tooltip || 'Not sure what this means?';
+			const isJustStringTitle = typeof tooltipTitle === 'string';
+
 			return (
 				<TooltipSimple
 					arrow
 					title={
-						<>
+						<div onClick={stopPropagationHandler}>
 							{tooltipTitle}{' '}
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
 								rel="noopener"
-								onClick={(e): void => e.stopPropagation()}
+								onClick={stopPropagationHandler}
 							>
-								Learn more.
+								{isJustStringTitle
+									? 'Learn more.'
+									: 'Check the documentation to learn more.'}
 							</a>
-						</>
+						</div>
 					}
 				>
 					<div className={styles.infoIcon}>
@@ -56,7 +64,9 @@ function ColumnHeader({
 
 		if (tooltip) {
 			return (
-				<TooltipSimple title={tooltip}>
+				<TooltipSimple
+					title={<div onClick={stopPropagationHandler}>{tooltip}</div>}
+				>
 					<div className={styles.infoIcon}>
 						<Info size="md" />
 					</div>

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

@@ -12,11 +12,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import {
-	InfraMonitoringEvents,
-	logInfraDrawerTabViewedEvent,
-	logInfraExplorerNavigatedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -50,6 +46,8 @@ import { K8sBaseDetailsContentProps } from './types';
 import { getDrawerDurationMs } from './useDrawerLifecycleStore';
 
 import styles from '../EntityDetailsUtils/entityDetails.module.scss';
+import { logInfraDrawerTabViewedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
+import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function K8sBaseDetailsContent<T>({

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

@@ -9,11 +9,7 @@ import TanStackTable, {
 	useHiddenColumnIds,
 	useTableParams,
 } from 'components/TanStackTableView';
-import {
-	InfraMonitoringEvents,
-	logInfraColumnSortedEvent,
-	logInfraTimeRangeCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
@@ -48,6 +44,10 @@ import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentation
 
 import styles from './K8sBaseList.module.scss';
 import cx from 'classnames';
+import {
+	logInfraColumnSortedEvent,
+	logInfraTimeRangeCustomizedEvent,
+} from 'container/InfraMonitoringK8sV2/Base/events';
 
 export type K8sBaseListEmptyStateContext = {
 	isError: boolean;
@@ -128,6 +128,8 @@ export function K8sBaseList<
 
 	const { containerRef, calculatedPageSize } = useCalculatedPageSize({
 		rowHeight: 42,
+		headerHeight: 58,
+		paginationHeight: 52,
 	});
 
 	const {
@@ -436,16 +438,17 @@ export function K8sBaseList<
 				isFetching={isFetching}
 				cancelQuery={cancelQuery}
 			/>
+
+			<K8sInstrumentationChecksCallout entity={entity} />
+
+			<K8sTableToolbar
+				entity={entity}
+				eventCategory={eventCategory}
+				leftFilters={leftFilters}
+				onOpenOptionsDrawer={handleOpenOptionsDrawer}
+			/>
+
 			<div ref={containerRef} className={styles.tableContainer}>
-				<K8sInstrumentationChecksCallout entity={entity} />
-
-				<K8sTableToolbar
-					entity={entity}
-					eventCategory={eventCategory}
-					leftFilters={leftFilters}
-					onOpenOptionsDrawer={handleOpenOptionsDrawer}
-				/>
-
 				{isError && (
 					<Typography>
 						{data?.error?.toString() || 'Something went wrong'}

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

@@ -13,7 +13,7 @@
 	--tanstack-table-resize-handle-hover-bg: var(--l1-border);
 	--tanstack-table-row-height: 36px;
 
-	--tanstack-cell-padding-left-override: 15px;
+	--tanstack-cell-padding-left-override: 26px;
 	--tanstack-cell-padding-right-override: 15px;
 
 	& [data-hide-expanded='true'] {

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

@@ -10,19 +10,19 @@ import TanStackTable, {
 	TableColumnDef,
 	TanStackTableStateProvider,
 } from 'components/TanStackTableView';
-import { QueryParams } from 'constants/query';
 import { CornerDownRight } from '@signozhq/icons';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { v4 as uuid } from 'uuid';
 import { useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 
-import { logInfraColumnSortedEvent } from 'constants/events';
-import { InfraMonitoringEntity } from '../constants';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
 import {
 	SelectedItemParams,
 	useInfraMonitoringGroupBy,
@@ -36,6 +36,9 @@ import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferences
 
 import styles from './K8sExpandedRow.module.scss';
 import { buildExpressionFromGroupMeta } from './utils';
+import { logInfraColumnSortedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
+import { getUnstableCurrentSearchParams } from 'container/TopNav/DateTimeSelectionV2/utils/getUnstableCurrentSearchParams';
+import { QueryParams } from 'constants/query';
 
 const EXPANDED_ROW_LIMIT = 10;
 
@@ -92,7 +95,6 @@ export function K8sExpandedRow<
 	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
 	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
 	const { safeNavigate } = useSafeNavigate();
-	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const queryClient = useQueryClient();
 
@@ -258,13 +260,26 @@ export function K8sExpandedRow<
 			},
 		};
 
-		const newUrlQuery = new URLSearchParams(urlQuery.toString());
-		newUrlQuery.set(
+		const searchParams = getUnstableCurrentSearchParams();
+
+		searchParams.set(
 			QueryParams.compositeQuery,
 			encodeURIComponent(JSON.stringify(updatedQuery)),
 		);
 
-		safeNavigate(`${location.pathname}?${newUrlQuery.toString()}`);
+		searchParams.delete(INFRA_MONITORING_K8S_PARAMS_KEYS.GROUP_BY);
+		searchParams.delete(INFRA_MONITORING_K8S_PARAMS_KEYS.EXPANDED);
+		searchParams.delete(orderByParamKey);
+		searchParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE, '1');
+
+		if (orderBy) {
+			searchParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.ORDER_BY,
+				JSON.stringify(orderBy),
+			);
+		}
+
+		safeNavigate(`${location.pathname}?${searchParams.toString()}`);
 	};
 
 	const total = data?.total ?? 0;
@@ -276,6 +291,7 @@ export function K8sExpandedRow<
 			color="secondary"
 			variant="outlined"
 			className={styles.viewAllButton}
+			data-testid="expanded-row-view-all"
 			onClick={handleViewAllClick}
 			prefix={<CornerDownRight size={14} />}
 		>

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

@@ -2,10 +2,7 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import logEvent from 'api/common/logEvent';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import {
-	InfraMonitoringEvents,
-	logInfraFilterCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -24,6 +21,7 @@ import {
 import { useInfraMonitoringPageListing } from '../hooks';
 
 import styles from './K8sHeader.module.scss';
+import { logInfraFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 interface K8sHeaderProps {
 	controlListPrefix?: React.ReactNode;

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

@@ -4,19 +4,34 @@ import { Select } from 'antd';
 import { Download, SlidersVertical } from '@signozhq/icons';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
-import {
-	InfraMonitoringEvents,
-	logInfraGroupByCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 
-import { InfraMonitoringEntity } from '../constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
 import {
 	useInfraMonitoringGroupBy,
+	useInfraMonitoringOrderBy,
 	useInfraMonitoringPageListing,
 } from '../hooks';
 import { useInfraMonitoringGroupByData } from './useInfraMonitoringGroupByData';
 
 import styles from './K8sTableToolbar.module.scss';
+import { logInfraGroupByCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
+
+const NAME_COLUMN_KEYS: Set<string> = new Set([
+	INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+]);
 
 interface K8sTableToolbarProps {
 	entity: InfraMonitoringEntity;
@@ -37,11 +52,17 @@ function K8sTableToolbar({
 		useInfraMonitoringGroupByData(entity);
 
 	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
+	const [orderBy, setOrderBy] = useInfraMonitoringOrderBy();
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 
 	const handleGroupByChange = useCallback(
 		(value: string[]) => {
 			void setCurrentPage(1);
+
+			if (orderBy && NAME_COLUMN_KEYS.has(orderBy.columnName)) {
+				void setOrderBy(null);
+			}
+
 			void setGroupBy(value);
 
 			void logEvent(InfraMonitoringEvents.GroupByChanged, {
@@ -52,15 +73,16 @@ function K8sTableToolbar({
 
 			logInfraGroupByCustomizedEvent(entity, value);
 		},
-		[entity, eventCategory, setCurrentPage, setGroupBy],
+		[entity, eventCategory, orderBy, setCurrentPage, setOrderBy, setGroupBy],
 	);
 
 	return (
 		<div className={styles.toolbar}>
-			<div className={styles.groupByContainer}>
+			<div className={styles.groupByContainer} data-testid="k8s-table-group-by">
 				<div className={styles.groupByLabel}>Group by</div>
 				<Select
 					className={styles.groupBySelect}
+					data-testid="k8s-table-group-by-select"
 					loading={isLoadingGroupByFilters}
 					mode="multiple"
 					value={groupBy}

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

@@ -1370,4 +1370,127 @@ describe('K8sBaseList', () => {
 			).resolves.toBeInTheDocument();
 		});
 	});
+
+	describe('groupBy change clears orderBy', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [{ id: 'item-1' }],
+				total: 1,
+				error: null,
+			});
+
+			server.use(
+				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
+					res(ctx.json({ status: 'success', data: { ready: true } })),
+				),
+				rest.get('http://localhost/api/v1/fields/keys', (_, res, ctx) =>
+					res(
+						ctx.json({
+							status: 'success',
+							data: {
+								keys: {
+									resource: [{ name: 'k8s.namespace.name' }],
+								},
+							},
+						}),
+					),
+				),
+			);
+		});
+
+		it('should clear orderBy for name columns when groupBy is changed', async () => {
+			const user = userEvent.setup();
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {
+					// k8s.pod.name is a name column - should be cleared
+					orderBy: JSON.stringify({ columnName: 'k8s.pod.name', order: 'desc' }),
+				},
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByTestId('k8s-table-group-by')).toBeInTheDocument();
+			});
+
+			// Open group by dropdown using testId
+			const groupByContainer = screen.getByTestId('k8s-table-group-by-select');
+			const groupBySelect = groupByContainer.querySelector(
+				'.ant-select-selector',
+			) as Element;
+			await user.click(groupBySelect);
+
+			// Wait for options to load and click on the namespace option
+			const namespaceOption = await screen.findByTitle('k8s.namespace.name');
+			await user.click(namespaceOption);
+
+			// Verify orderBy was cleared (set to null) for name column
+			await waitFor(() => {
+				const orderByCalls = onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('orderBy'))
+					.filter((v) => v !== undefined);
+
+				const hasOrderByCleared = orderByCalls.some((v) => v === null);
+				expect(hasOrderByCleared).toBe(true);
+			});
+		});
+
+		it('should keep orderBy for non-name columns when groupBy is changed', async () => {
+			const user = userEvent.setup();
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {
+					// cpu is NOT a name column - should be kept
+					orderBy: JSON.stringify({ columnName: 'cpu', order: 'desc' }),
+				},
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByTestId('k8s-table-group-by')).toBeInTheDocument();
+			});
+
+			// Open group by dropdown using testId
+			const groupByContainer = screen.getByTestId('k8s-table-group-by-select');
+			const groupBySelect = groupByContainer.querySelector(
+				'.ant-select-selector',
+			) as Element;
+			await user.click(groupBySelect);
+
+			// Wait for options to load and click on the namespace option
+			const namespaceOption = await screen.findByTitle('k8s.namespace.name');
+			await user.click(namespaceOption);
+
+			// Verify orderBy was NOT cleared for non-name column
+			await waitFor(() => {
+				const orderByCalls = onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('orderBy'))
+					.filter((v) => v !== undefined);
+
+				// orderBy should never be set to null
+				const hasOrderByCleared = orderByCalls.some((v) => v === null);
+				expect(hasOrderByCleared).toBe(false);
+			});
+		});
+	});
 });

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

@@ -1,13 +1,13 @@
 /* eslint-disable no-restricted-syntax */
 import { act, renderHook } from '@testing-library/react';
 import { TableColumnDef, useColumnStore } from 'components/TanStackTableView';
-import { logInfraColumnCustomizedEvent } from 'constants/events';
 
 import { InfraMonitoringEntity } from '../../constants';
 import { useInfraMonitoringTablePreferencesStore } from '../useInfraMonitoringTablePreferencesStore';
 import { useLogEventForColumnCustomized } from '../useLogEventForColumnCustomized';
+import { logInfraColumnCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
-jest.mock('constants/events', () => ({
+jest.mock('container/InfraMonitoringK8sV2/Base/events', () => ({
 	logInfraColumnCustomizedEvent: jest.fn(),
 }));
 

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

@@ -3,7 +3,6 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
 import { TextNoData } from '../../../components/TextNoData';
-import { logInfraExplorerNavigatedEvent } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -17,6 +16,7 @@ import {
 } from '../../../constants';
 import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
 import styles from './EntityCountsSection.module.scss';
+import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 export interface EntityCountConfig<T> {
 	label: string;

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

@@ -0,0 +1,113 @@
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import logEvent from 'api/common/logEvent';
+import { getNavigationReferrer } from 'lib/navigation';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+import { isCustomTimeRange } from 'store/globalTime';
+
+export function logInfraFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	source: 'quick_filter' | 'search' | 'host_status_toggle',
+	expression: string,
+	extraKeys?: string[],
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (extraKeys) {
+		extraKeys.forEach((key) => expressionKeys.push(key));
+	}
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_filter_customized', {
+		entity_type: entityType,
+		source,
+		expression_keys: [...new Set(expressionKeys)],
+	});
+}
+
+export function logInfraMonitoringListViewedEvent(
+	entity: InfraMonitoringEntity,
+): void {
+	const referrer = getNavigationReferrer();
+
+	void logEvent('infra_list_viewed', {
+		entity,
+		referrer,
+	});
+}
+
+export function logInfraTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraColumnCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	columnsList: string[],
+	fontSize: string,
+	maxLinesPerRow: number,
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_customized', {
+		entity_type: entityType,
+		columns_list: columnsList,
+		font_size: fontSize,
+		max_lines_per_row: maxLinesPerRow,
+		source,
+	});
+}
+
+export function logInfraColumnSortedEvent(
+	entityType: InfraMonitoringEntity,
+	columnKey: string,
+	direction: 'asc' | 'desc',
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_sorted', {
+		entity_type: entityType,
+		column_key: columnKey,
+		direction,
+		source,
+	});
+}
+
+export function logInfraGroupByCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	groupByKeysList: string[],
+): void {
+	void logEvent('infra_group_by_customized', {
+		entity_type: entityType,
+		group_by_keys_list: groupByKeysList,
+	});
+}
+
+export function logInfraExplorerNavigatedEvent(params: {
+	entityType: InfraMonitoringEntity;
+	destination:
+		| 'metrics_explorer'
+		| 'logs_explorer'
+		| 'traces_explorer'
+		| 'k8s_list';
+	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
+	tab: string;
+	sourceKey: string | null;
+	drawerDurationMsAtNavigation: number | null;
+}): void {
+	void logEvent('infra_explorer_navigated', {
+		entity_type: params.entityType,
+		destination: params.destination,
+		source: params.source,
+		tab: params.tab,
+		source_key: params.sourceKey,
+		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
+	});
+}

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

@@ -4,7 +4,6 @@ import {
 	useColumnOrder,
 	useHiddenColumnIds,
 } from 'components/TanStackTableView';
-import { logInfraColumnCustomizedEvent } from 'constants/events';
 
 import { InfraMonitoringEntity } from '../constants';
 
@@ -13,6 +12,7 @@ import {
 	useInfraMonitoringLineClamp,
 } from './useInfraMonitoringTablePreferencesStore';
 import { sortByColumnOrder } from './utils';
+import { logInfraColumnCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 interface UseEmitColumnCustomizedParams<TData> {
 	entity: InfraMonitoringEntity;

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

@@ -60,7 +60,7 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'clusterName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Cluster Name"
@@ -70,7 +70,7 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		),
 		accessorFn: (row): string => row.clusterName || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',

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

@@ -10,6 +10,7 @@ import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	GroupedStatusCounts,
 	TextNoData,
 	ValidateColumnValueWrapper,
@@ -69,7 +70,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'daemonsetName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="DaemonSet Name"
@@ -80,7 +81,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -174,7 +175,10 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 	{
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-req-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-request" />}
+			>
 				CPU Request Usage (%)
 			</ColumnHeader>
 		),
@@ -192,7 +196,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="CPU Request"
 				>
-					<EntityProgressBar value={cpuRequest} type="request" />
+					<EntityProgressBar value={cpuRequest} type="cpu-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -200,7 +204,10 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 	{
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-limit-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-limit" />}
+			>
 				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -217,7 +224,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="CPU Limit"
 				>
-					<EntityProgressBar value={cpuLimit} type="limit" />
+					<EntityProgressBar value={cpuLimit} type="cpu-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -251,7 +258,10 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 	{
 		id: 'memory_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-req-usage-"
+				tooltip={<EntityProgressThresholds type="memory-request" />}
+			>
 				Memory Request Usage (%)
 			</ColumnHeader>
 		),
@@ -269,7 +279,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="Memory Request"
 				>
-					<EntityProgressBar value={memoryRequest} type="request" />
+					<EntityProgressBar value={memoryRequest} type="memory-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -277,7 +287,10 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 	{
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-limit-usage-"
+				tooltip={<EntityProgressThresholds type="memory-limit" />}
+			>
 				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -294,7 +307,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="Memory Limit"
 				>
-					<EntityProgressBar value={memoryLimit} type="limit" />
+					<EntityProgressBar value={memoryLimit} type="memory-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},

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

@@ -10,6 +10,7 @@ import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	GroupedStatusCounts,
 	TextNoData,
 	ValidateColumnValueWrapper,
@@ -70,7 +71,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			},
 		},
 		{
-			id: 'deploymentName',
+			id: INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
 			header: (): React.ReactNode => (
 				<EntityGroupHeader
 					title="Deployment Name"
@@ -81,7 +82,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			accessorFn: (row): string =>
 				row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] || '',
 			width: { min: 290 },
-			enableSort: false,
+			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
 			pin: 'left',
@@ -162,7 +163,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 		{
 			id: 'cpu_request',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-req-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-req-usage-"
+					tooltip={<EntityProgressThresholds type="cpu-request" />}
+				>
 					CPU Request Usage (%)
 				</ColumnHeader>
 			),
@@ -180,7 +184,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="CPU Request"
 					>
-						<EntityProgressBar value={cpuRequest} type="request" />
+						<EntityProgressBar value={cpuRequest} type="cpu-request" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -188,7 +192,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 		{
 			id: 'cpu_limit',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-limit-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-limit-usage-"
+					tooltip={<EntityProgressThresholds type="cpu-limit" />}
+				>
 					CPU Limit Usage (%)
 				</ColumnHeader>
 			),
@@ -205,7 +212,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="CPU Limit"
 					>
-						<EntityProgressBar value={cpuLimit} type="limit" />
+						<EntityProgressBar value={cpuLimit} type="cpu-limit" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -238,7 +245,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 		{
 			id: 'memory_request',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#mem-req-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/deployments#mem-req-usage-"
+					tooltip={<EntityProgressThresholds type="memory-request" />}
+				>
 					Memory Request Usage (%)
 				</ColumnHeader>
 			),
@@ -256,7 +266,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="Memory Request"
 					>
-						<EntityProgressBar value={memoryRequest} type="request" />
+						<EntityProgressBar value={memoryRequest} type="memory-request" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -264,7 +274,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 		{
 			id: 'memory_limit',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#mem-limit-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/deployments#mem-limit-usage-"
+					tooltip={<EntityProgressThresholds type="memory-limit" />}
+				>
 					Memory Limit Usage (%)
 				</ColumnHeader>
 			),
@@ -281,7 +294,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="Memory Limit"
 					>
-						<EntityProgressBar value={memoryLimit} type="limit" />
+						<EntityProgressBar value={memoryLimit} type="memory-limit" />
 					</ValidateColumnValueWrapper>
 				);
 			},

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

@@ -3,10 +3,7 @@ import { Undo } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
-import {
-	InfraMonitoringEvents,
-	logInfraDrawerTimeRangeCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -17,6 +14,7 @@ import {
 import { useEntityDetailsTime } from './useEntityDetailsTime';
 
 import styles from './EntityDateTimeSelector.module.scss';
+import { logInfraDrawerTimeRangeCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface EntityDateTimeSelectorProps {
 	eventEntity: string;

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

@@ -16,10 +16,7 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import {
-	InfraMonitoringEvents,
-	logInfraDrawerFilterCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
@@ -41,6 +38,7 @@ import { getEntityEventsQueryPayload, isEventsKeyNotFoundError } from './utils';
 
 import styles from './EntityEvents.module.scss';
 import { useTimezone } from 'providers/Timezone';
+import { logInfraDrawerFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface EventDataType {
 	key: string;

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

@@ -20,10 +20,7 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import {
-	InfraMonitoringEvents,
-	logInfraDrawerFilterCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -53,6 +50,7 @@ import { isModifierKeyPressed } from 'utils/app';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { logInfraDrawerFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface Props {
 	eventEntity: string;

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

@@ -2,10 +2,7 @@ import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
-import {
-	InfraMonitoringEvents,
-	logInfraExplorerNavigatedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
@@ -35,6 +32,7 @@ import { isKeyNotFoundError } from '../utils';
 
 import styles from './EntityMetrics.module.scss';
 import { MetricsTable } from './MetricsTable';
+import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 interface EntityMetricsProps<T> {
 	entity: T;

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

@@ -16,10 +16,7 @@ import {
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { ResizeTable } from 'components/ResizeTable';
-import {
-	InfraMonitoringEvents,
-	logInfraDrawerFilterCustomizedEvent,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -41,6 +38,7 @@ import { getEntityTracesQueryPayload } from './utils';
 
 import styles from './EntityTraces.module.scss';
 import { useTimezone } from 'providers/Timezone';
+import { logInfraDrawerFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface Props {
 	eventEntity: string;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/events.ts

@@ -0,0 +1,48 @@
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import logEvent from 'api/common/logEvent';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+import { isCustomTimeRange } from 'store/globalTime';
+
+export function logInfraDrawerTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_drawer_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraDrawerFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
+	expression: string,
+	filterSource: 'search' | 'logs',
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_drawer_filter_customized', {
+		entity_type: entityType,
+		tab,
+		expression_keys: [...new Set(expressionKeys)],
+		filter_source: filterSource,
+	});
+}
+
+export function logInfraDrawerTabViewedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: string,
+	isDefaultTab: boolean,
+): void {
+	void logEvent('infra_drawer_tab_viewed', {
+		entity_type: entityType,
+		tab,
+		is_default_tab: isDefaultTab,
+	});
+}

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -51,14 +51,14 @@ import {
 } from './hooks';
 
 import styles from './InfraMonitoringK8s.module.scss';
-import {
-	logInfraFilterCustomizedEvent,
-	logInfraMonitoringListViewedEvent,
-	InfraMonitoringEvents,
-} from 'constants/events';
+import { InfraMonitoringEvents } from 'constants/events';
 import logEvent from 'api/common/logEvent';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import {
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+} from 'container/InfraMonitoringK8sV2/Base/events';
 
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

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

@@ -10,6 +10,7 @@ import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	GroupedStatusCounts,
 	TextNoData,
 	ValidateColumnValueWrapper,
@@ -63,7 +64,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'jobName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Job Name"
@@ -74,7 +75,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -158,7 +159,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 	{
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-req-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-request" />}
+			>
 				CPU Request Usage (%)
 			</ColumnHeader>
 		),
@@ -176,7 +180,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					attribute="CPU Request"
 					rowId={rowId}
 				>
-					<EntityProgressBar value={cpuRequest} type="request" />
+					<EntityProgressBar value={cpuRequest} type="cpu-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -184,7 +188,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 	{
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-limit-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-limit" />}
+			>
 				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -201,7 +208,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					attribute="CPU Limit"
 					rowId={rowId}
 				>
-					<EntityProgressBar value={cpuLimit} type="limit" />
+					<EntityProgressBar value={cpuLimit} type="cpu-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -234,7 +241,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 	{
 		id: 'memory_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#mem-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/jobs#mem-req-usage-"
+				tooltip={<EntityProgressThresholds type="memory-request" />}
+			>
 				Memory Request Usage (%)
 			</ColumnHeader>
 		),
@@ -252,7 +262,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					attribute="Memory Request"
 					rowId={rowId}
 				>
-					<EntityProgressBar value={memoryRequest} type="request" />
+					<EntityProgressBar value={memoryRequest} type="memory-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -260,7 +270,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 	{
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#mem-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/jobs#mem-limit-usage-"
+				tooltip={<EntityProgressThresholds type="memory-limit" />}
+			>
 				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -277,7 +290,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					attribute="Memory Limit"
 					rowId={rowId}
 				>
-					<EntityProgressBar value={memoryLimit} type="limit" />
+					<EntityProgressBar value={memoryLimit} type="memory-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},

frontend/src/container/InfraMonitoringK8sV2/Namespaces/constants.ts

@@ -111,7 +111,8 @@ export const namespaceWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
-		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores-1',
 	},
 	{
 		title: 'Memory Usage (bytes)',

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

@@ -66,7 +66,7 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'namespaceName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Namespace Name"
@@ -76,7 +76,7 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		),
 		accessorFn: (row): string => row.namespaceName || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',

frontend/src/container/InfraMonitoringK8sV2/Nodes/constants.ts

@@ -57,7 +57,7 @@ export const nodeWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
-		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores-1',
 	},
 	{
 		title: 'Memory Usage (bytes)',

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

@@ -68,7 +68,7 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'nodeName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Node Name"
@@ -78,7 +78,7 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		),
 		accessorFn: (row): string => row.nodeName || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',

frontend/src/container/InfraMonitoringK8sV2/Pods/constants.ts

@@ -67,7 +67,7 @@ export const podWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
-		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',

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

@@ -17,6 +17,7 @@ import {
 } from '../commonUtils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	GroupedStatusCounts,
 	TextNoData,
 	ValidateColumnValueWrapper,
@@ -68,7 +69,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'podName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Pod Name"
@@ -79,7 +80,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -96,7 +97,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 			</ColumnHeader>
 		),
 		accessorFn: (row): string => row.podStatus,
-		width: { min: 160 },
+		width: { min: 250 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ row }): React.ReactNode => {
@@ -175,7 +176,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		),
 		accessorFn: (row): number => row.podRestarts,
 		width: { min: 140 },
-		enableSort: true,
+		enableSort: false,
 		cell: ({ value, rowId }): React.ReactNode => {
 			const restarts = value as number;
 			return (
@@ -193,7 +194,10 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	{
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#cpu-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/pods#cpu-req-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-request" />}
+			>
 				CPU Request Usage (%)
 			</ColumnHeader>
 		),
@@ -210,7 +214,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.PODS}
 					attribute="CPU Request"
 				>
-					<EntityProgressBar value={cpuRequest} type="request" />
+					<EntityProgressBar value={cpuRequest} type="cpu-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -218,7 +222,10 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	{
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#cpu-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/pods#cpu-limit-usage-"
+				tooltip={<EntityProgressThresholds type="cpu-limit" />}
+			>
 				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -234,7 +241,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.PODS}
 					attribute="CPU Limit"
 				>
-					<EntityProgressBar value={cpuLimit} type="limit" />
+					<EntityProgressBar value={cpuLimit} type="cpu-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -266,7 +273,10 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	{
 		id: 'memory_request',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#mem-req-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/pods#mem-req-usage-"
+				tooltip={<EntityProgressThresholds type="memory-request" />}
+			>
 				Memory Request Usage (%)
 			</ColumnHeader>
 		),
@@ -283,7 +293,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.PODS}
 					attribute="Memory Request"
 				>
-					<EntityProgressBar value={memoryRequest} type="request" />
+					<EntityProgressBar value={memoryRequest} type="memory-request" />
 				</ValidateColumnValueWrapper>
 			);
 		},
@@ -291,7 +301,10 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	{
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#mem-limit-usage-">
+			<ColumnHeader
+				docPath="/infrastructure-monitoring/kubernetes/pods#mem-limit-usage-"
+				tooltip={<EntityProgressThresholds type="memory-limit" />}
+			>
 				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
@@ -307,7 +320,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 					entity={InfraMonitoringEntity.PODS}
 					attribute="Memory Limit"
 				>
-					<EntityProgressBar value={memoryLimit} type="limit" />
+					<EntityProgressBar value={memoryLimit} type="memory-limit" />
 				</ValidateColumnValueWrapper>
 			);
 		},

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

@@ -10,6 +10,7 @@ import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	EntityProgressBar,
+	EntityProgressThresholds,
 	GroupedStatusCounts,
 	TextNoData,
 	ValidateColumnValueWrapper,
@@ -70,7 +71,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			},
 		},
 		{
-			id: 'statefulsetName',
+			id: INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
 			header: (): React.ReactNode => (
 				<EntityGroupHeader
 					title="StatefulSet Name"
@@ -81,7 +82,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			accessorFn: (row): string =>
 				row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] || '',
 			width: { min: 290 },
-			enableSort: false,
+			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
 			pin: 'left',
@@ -165,7 +166,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 		{
 			id: 'cpu_request',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-req-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-req-usage-"
+					tooltip={<EntityProgressThresholds type="cpu-request" />}
+				>
 					CPU Request Usage (%)
 				</ColumnHeader>
 			),
@@ -183,7 +187,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="CPU Request"
 					>
-						<EntityProgressBar value={cpuRequest} type="request" />
+						<EntityProgressBar value={cpuRequest} type="cpu-request" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -191,7 +195,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 		{
 			id: 'cpu_limit',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-limit-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-limit-usage-"
+					tooltip={<EntityProgressThresholds type="cpu-limit" />}
+				>
 					CPU Limit Usage (%)
 				</ColumnHeader>
 			),
@@ -208,7 +215,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="CPU Limit"
 					>
-						<EntityProgressBar value={cpuLimit} type="limit" />
+						<EntityProgressBar value={cpuLimit} type="cpu-limit" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -242,7 +249,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 		{
 			id: 'memory_request',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-req-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-req-usage-"
+					tooltip={<EntityProgressThresholds type="memory-request" />}
+				>
 					Memory Request Usage (%)
 				</ColumnHeader>
 			),
@@ -260,7 +270,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="Memory Request"
 					>
-						<EntityProgressBar value={memoryRequest} type="request" />
+						<EntityProgressBar value={memoryRequest} type="memory-request" />
 					</ValidateColumnValueWrapper>
 				);
 			},
@@ -268,7 +278,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 		{
 			id: 'memory_limit',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-limit-usage-">
+				<ColumnHeader
+					docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-limit-usage-"
+					tooltip={<EntityProgressThresholds type="memory-limit" />}
+				>
 					Memory Limit Usage (%)
 				</ColumnHeader>
 			),
@@ -285,7 +298,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="Memory Limit"
 					>
-						<EntityProgressBar value={memoryLimit} type="limit" />
+						<EntityProgressBar value={memoryLimit} type="memory-limit" />
 					</ValidateColumnValueWrapper>
 				);
 			},

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

@@ -64,7 +64,7 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'pvcName',
+		id: INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="PVC Name"
@@ -74,7 +74,7 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		),
 		accessorFn: (row): string => row.persistentVolumeClaimName || '',
 		width: { min: 290 },
-		enableSort: false,
+		enableSort: true,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -195,7 +195,7 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'inodesUsed',
+		id: 'inodes_used',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/volumes#volume-inodes-used">
 				Inodes Used
@@ -219,7 +219,7 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'inodesFree',
+		id: 'inodes_free',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/volumes#volume-inodes-free">
 				Inodes Free

frontend/src/container/InfraMonitoringK8sV2/commonUtils.tsx

@@ -26,48 +26,6 @@ export function formatBytes(bytes: number, decimals = 2): string {
 	return `${parseFloat((bytes / k ** i).toFixed(decimals))} ${sizes[i]}`;
 }
 
-/**
- * Returns stroke color for request utilization parameters according to current value
- */
-export function getStrokeColorForRequestUtilization(value: number): string {
-	const percent = Number((value * 100).toFixed(1));
-	// Orange
-	if (percent <= 50) {
-		return Color.BG_AMBER_500;
-	}
-	// Green
-	if (percent > 50 && percent <= 100) {
-		return Color.BG_FOREST_500;
-	}
-	// Regular Red
-	if (percent > 100 && percent <= 150) {
-		return Color.BG_SAKURA_500;
-	}
-	// Dark Red
-	return Color.BG_CHERRY_600;
-}
-
-/**
- * Returns stroke color for limit utilization parameters according to current value
- */
-export function getStrokeColorForLimitUtilization(value: number): string {
-	const percent = Number((value * 100).toFixed(1));
-	// Green
-	if (percent <= 60) {
-		return Color.BG_FOREST_500;
-	}
-	// Yellow
-	if (percent > 60 && percent <= 80) {
-		return Color.BG_AMBER_200;
-	}
-	// Orange
-	if (percent > 80 && percent <= 95) {
-		return Color.BG_AMBER_500;
-	}
-	// Red
-	return Color.BG_SAKURA_500;
-}
-
 export const POD_STATUS_COLORS: Record<
 	InframonitoringtypesPodStatusDTO,
 	BadgeColor

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

@@ -1,35 +1,11 @@
 import { Progress } from '@signozhq/ui/progress';
 import TanStackTable from 'components/TanStackTableView';
-import {
-	getMemoryProgressColor,
-	getProgressColor,
-} from 'container/InfraMonitoringHostsV2/constants';
-
-import {
-	getStrokeColorForLimitUtilization,
-	getStrokeColorForRequestUtilization,
-} from '../commonUtils';
 
 import styles from './EntityProgressBar.module.scss';
-
-type EntityProgressBarType = 'request' | 'limit' | 'cpu' | 'memory' | 'disk';
-
-function getStrokeColor(type: EntityProgressBarType, value: number): string {
-	switch (type) {
-		case 'limit':
-			return getStrokeColorForLimitUtilization(value);
-		case 'request':
-			return getStrokeColorForRequestUtilization(value);
-		case 'cpu':
-			return getProgressColor(Number((value * 100).toFixed(1)));
-		case 'memory':
-			return getMemoryProgressColor(Number((value * 100).toFixed(1)));
-		case 'disk':
-			return getProgressColor(Number((value * 100).toFixed(1)));
-		default:
-			return getStrokeColorForRequestUtilization(value);
-	}
-}
+import {
+	EntityProgressBarType,
+	getStrokeColor,
+} from './EntityProgressBar.utils';
 
 export function EntityProgressBar({
 	value,

frontend/src/container/InfraMonitoringK8sV2/components/EntityProgressBar.utils.ts

@@ -0,0 +1,254 @@
+import { Color } from '@signozhq/design-tokens';
+
+export type EntityProgressBarType =
+	| 'cpu-request'
+	| 'cpu-limit'
+	| 'memory-request'
+	| 'memory-limit'
+	| 'cpu'
+	| 'memory'
+	| 'disk';
+
+export interface EntityProgressThreshold {
+	matches: (percent: number) => boolean;
+	color: string;
+	range: string;
+	label: string;
+	description: string;
+}
+
+const CPU_REQUEST_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent <= 50,
+		color: Color.BG_AMBER_500,
+		range: '≤ 50%',
+		label: 'Over-requested',
+		description:
+			'CPU usage is at most half of the request. The rest of the request stays reserved on the node.',
+	},
+	{
+		matches: (percent): boolean => percent <= 100,
+		color: Color.BG_FOREST_500,
+		range: '> 50% - 100%',
+		label: 'Right-sized',
+		description: 'CPU usage is close to the request and stays within it.',
+	},
+	{
+		matches: (percent): boolean => percent <= 150,
+		color: Color.BG_SAKURA_500,
+		range: '> 100% - 150%',
+		label: 'Over request',
+		description:
+			'CPU usage is above the request. The extra CPU is not guaranteed and depends on spare node capacity.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_CHERRY_600,
+		range: '> 150%',
+		label: 'Request badly undersized',
+		description:
+			'CPU usage is more than 1.5x the request, so most of the CPU in use is not guaranteed.',
+	},
+];
+
+const CPU_LIMIT_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent <= 60,
+		color: Color.BG_FOREST_500,
+		range: '≤ 60%',
+		label: 'Healthy',
+		description: 'CPU usage is well below the limit.',
+	},
+	{
+		matches: (percent): boolean => percent <= 80,
+		color: Color.BG_AMBER_200,
+		range: '> 60% - 80%',
+		label: 'Watch',
+		description: 'CPU usage is approaching the limit.',
+	},
+	{
+		matches: (percent): boolean => percent <= 95,
+		color: Color.BG_AMBER_500,
+		range: '> 80% - 95%',
+		label: 'Near limit',
+		description:
+			'CPU usage is close to the limit. Usage above the limit is throttled.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_SAKURA_500,
+		range: '> 95%',
+		label: 'At limit',
+		description:
+			'CPU usage is at the limit, so the container is likely being throttled.',
+	},
+];
+
+const MEMORY_REQUEST_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent <= 50,
+		color: Color.BG_AMBER_500,
+		range: '≤ 50%',
+		label: 'Over-requested',
+		description:
+			'Memory usage is at most half of the request. The rest of the request stays reserved on the node.',
+	},
+	{
+		matches: (percent): boolean => percent <= 100,
+		color: Color.BG_FOREST_500,
+		range: '> 50% - 100%',
+		label: 'Right-sized',
+		description: 'Memory usage is close to the request and stays within it.',
+	},
+	{
+		matches: (percent): boolean => percent <= 150,
+		color: Color.BG_SAKURA_500,
+		range: '> 100% - 150%',
+		label: 'Over request',
+		description:
+			'Memory usage is above the request. The extra memory is not guaranteed and is reclaimed first under node memory pressure.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_CHERRY_600,
+		range: '> 150%',
+		label: 'Request badly undersized',
+		description:
+			'Memory usage is more than 1.5x the request, so most of the memory in use is not guaranteed.',
+	},
+];
+
+const MEMORY_LIMIT_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent <= 60,
+		color: Color.BG_FOREST_500,
+		range: '≤ 60%',
+		label: 'Healthy',
+		description: 'Memory usage is well below the limit.',
+	},
+	{
+		matches: (percent): boolean => percent <= 80,
+		color: Color.BG_AMBER_200,
+		range: '> 60% - 80%',
+		label: 'Watch',
+		description: 'Memory usage is approaching the limit.',
+	},
+	{
+		matches: (percent): boolean => percent <= 95,
+		color: Color.BG_AMBER_500,
+		range: '> 80% - 95%',
+		label: 'Near limit',
+		description:
+			'Memory usage is close to the limit. Unlike CPU, memory is not throttled: reaching the limit ends in an OOM kill.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_SAKURA_500,
+		range: '> 95%',
+		label: 'At limit',
+		description:
+			'Memory usage is at the limit, so an OOM kill and container restart are likely.',
+	},
+];
+
+const CPU_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent < 60,
+		color: Color.BG_FOREST_500,
+		range: '< 60%',
+		label: 'Healthy',
+		description: 'CPU usage is well below the available capacity.',
+	},
+	{
+		matches: (percent): boolean => percent < 90,
+		color: Color.BG_AMBER_500,
+		range: '60% - 89.9%',
+		label: 'Elevated',
+		description: 'CPU usage is high relative to the available capacity.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_SAKURA_500,
+		range: '≥ 90%',
+		label: 'Critical',
+		description: 'CPU usage is close to the available capacity.',
+	},
+];
+
+const MEMORY_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent < 60,
+		color: Color.BG_FOREST_500,
+		range: '< 60%',
+		label: 'Healthy',
+		description: 'Memory usage is well below the available capacity.',
+	},
+	{
+		matches: (percent): boolean => percent < 90,
+		color: Color.BG_AMBER_500,
+		range: '60% - 89.9%',
+		label: 'Elevated',
+		description: 'Memory usage is high relative to the available capacity.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_CHERRY_500,
+		range: '≥ 90%',
+		label: 'Critical',
+		description:
+			'Memory usage is close to the available capacity. Unlike CPU, memory is not throttled: running out ends in an OOM kill.',
+	},
+];
+
+const DISK_THRESHOLDS: EntityProgressThreshold[] = [
+	{
+		matches: (percent): boolean => percent < 60,
+		color: Color.BG_FOREST_500,
+		range: '< 60%',
+		label: 'Healthy',
+		description: 'Most of the volume is still free.',
+	},
+	{
+		matches: (percent): boolean => percent < 90,
+		color: Color.BG_AMBER_500,
+		range: '60% - 89.9%',
+		label: 'Elevated',
+		description: 'Used space is high relative to the volume capacity.',
+	},
+	{
+		matches: (): boolean => true,
+		color: Color.BG_SAKURA_500,
+		range: '≥ 90%',
+		label: 'Critical',
+		description: 'The volume is nearly full. Writes fail once no space is left.',
+	},
+];
+
+export const THRESHOLDS_BY_TYPE: Record<
+	EntityProgressBarType,
+	EntityProgressThreshold[]
+> = {
+	'cpu-request': CPU_REQUEST_THRESHOLDS,
+	'cpu-limit': CPU_LIMIT_THRESHOLDS,
+	'memory-request': MEMORY_REQUEST_THRESHOLDS,
+	'memory-limit': MEMORY_LIMIT_THRESHOLDS,
+	cpu: CPU_THRESHOLDS,
+	memory: MEMORY_THRESHOLDS,
+	disk: DISK_THRESHOLDS,
+};
+
+export function getStrokeColorForPercent(
+	type: EntityProgressBarType,
+	percent: number,
+): string {
+	const thresholds = THRESHOLDS_BY_TYPE[type];
+	const match = thresholds.find((threshold) => threshold.matches(percent));
+	return (match ?? thresholds[thresholds.length - 1]).color;
+}
+
+export function getStrokeColor(
+	type: EntityProgressBarType,
+	value: number,
+): string {
+	return getStrokeColorForPercent(type, Number((value * 100).toFixed(1)));
+}

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

@@ -0,0 +1,39 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	max-width: 320px;
+	text-align: left;
+	text-wrap: wrap;
+	margin-bottom: var(--spacing-1);
+}
+
+.threshold {
+	display: flex;
+	align-items: stretch;
+	gap: var(--spacing-4);
+}
+
+.swatch {
+	width: 3px;
+	border-radius: 1px;
+	flex-shrink: 0;
+	background-color: var(--ept-color);
+}
+
+.thresholdBody {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.thresholdHeading {
+	display: flex;
+	align-items: baseline;
+	gap: var(--spacing-2);
+}
+
+.range {
+	white-space: nowrap;
+	font-variant-numeric: tabular-nums;
+}

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

@@ -0,0 +1,56 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import {
+	EntityProgressBarType,
+	THRESHOLDS_BY_TYPE,
+} from './EntityProgressBar.utils';
+import styles from './EntityProgressThresholds.module.scss';
+
+interface EntityProgressThresholdsProps {
+	type: EntityProgressBarType;
+	note?: string;
+}
+
+export function EntityProgressThresholds({
+	type,
+	note,
+}: EntityProgressThresholdsProps): JSX.Element {
+	return (
+		<div
+			className={styles.container}
+			data-testid={`entity-progress-thresholds-${type}`}
+		>
+			{note && (
+				<Typography.Text as="p" size="small">
+					{note}
+				</Typography.Text>
+			)}
+			{THRESHOLDS_BY_TYPE[type].map((threshold) => (
+				<div key={threshold.range} className={styles.threshold}>
+					<span
+						className={styles.swatch}
+						style={{ '--ept-color': threshold.color } as React.CSSProperties}
+					/>
+					<div className={styles.thresholdBody}>
+						<div className={styles.thresholdHeading}>
+							<Typography.Text as="span" size="small" weight="medium">
+								{threshold.label}
+							</Typography.Text>
+							<Typography.Text
+								as="span"
+								size="small"
+								color="muted"
+								className={styles.range}
+							>
+								{threshold.range}
+							</Typography.Text>
+						</div>
+						<Typography.Text as="p" size="small" color="muted">
+							{threshold.description}
+						</Typography.Text>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/components/__tests__/EntityProgressThresholds.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+
+import { THRESHOLDS_BY_TYPE } from '../EntityProgressBar.utils';
+import { EntityProgressThresholds } from '../EntityProgressThresholds';
+
+describe('EntityProgressThresholds', () => {
+	it('renders every threshold band for the given type', () => {
+		render(<EntityProgressThresholds type="cpu-limit" />);
+
+		expect(
+			screen.getByTestId('entity-progress-thresholds-cpu-limit'),
+		).toBeInTheDocument();
+
+		THRESHOLDS_BY_TYPE['cpu-limit'].forEach((threshold) => {
+			expect(screen.getByText(threshold.label)).toBeInTheDocument();
+			expect(screen.getByText(threshold.range)).toBeInTheDocument();
+			expect(screen.getByText(threshold.description)).toBeInTheDocument();
+		});
+	});
+
+	it('renders the note above the threshold bands when provided', () => {
+		render(
+			<EntityProgressThresholds type="memory" note="Excluding cache memory." />,
+		);
+
+		expect(screen.getByText('Excluding cache memory.')).toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/components/index.ts

@@ -1,4 +1,5 @@
 export { EntityProgressBar } from './EntityProgressBar';
+export { EntityProgressThresholds } from './EntityProgressThresholds';
 export { ValidateColumnValueWrapper } from './ValidateColumnValueWrapper';
 export { ExpandButtonWrapper } from './ExpandButtonWrapper';
 export {

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateEditRolePage.featureGate.test.tsx

@@ -1,8 +1,7 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { FeatureKeys } from 'constants/features';
 import { server } from 'mocks-server/server';
-import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
 	setupAuthzAdmin,
@@ -59,23 +58,6 @@ function renderEditPage(
 
 describe('CreateEditRolePage - Feature Gate', () => {
 	describe('create mode - feature disabled', () => {
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			renderCreatePage({
-				featureFlags: defaultFeatureFlags.map((f) =>
-					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-						? { ...f, active: false }
-						: f,
-				),
-			});
-
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
 		it('shows error when license is invalid', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
@@ -113,23 +95,6 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		const ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 		const ROLE_NAME = 'test-role';
 
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			renderEditPage(ROLE_ID, ROLE_NAME, {
-				featureFlags: defaultFeatureFlags.map((f) =>
-					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-						? { ...f, active: false }
-						: f,
-				),
-			});
-
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
 		it('shows error when license is invalid', async () => {
 			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.featureGate.test.tsx

@@ -1,7 +1,6 @@
 import * as roleApi from 'api/generated/services/role';
-import { FeatureKeys } from 'constants/features';
 import { server } from 'mocks-server/server';
-import { defaultFeatureFlags, render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
 import {
 	invalidLicense,
 	setupAuthzAdmin,
@@ -33,26 +32,6 @@ describe('ViewRolePage - Feature Gate', () => {
 	});
 
 	describe('feature disabled', () => {
-		it('shows error when fine-grained authz flag is inactive', async () => {
-			render(<ViewRolePage />, undefined, {
-				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
-				appContextOverrides: {
-					featureFlags: defaultFeatureFlags.map((f) =>
-						f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-							? { ...f, active: false }
-							: f,
-					),
-				},
-			});
-
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText(/Custom roles feature is not available/i),
-			).resolves.toBeInTheDocument();
-		});
-
 		it('shows error when license is invalid', async () => {
 			render(<ViewRolePage />, undefined, {
 				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),

frontend/src/container/RolesSettings/__tests__/RolesSettings.authz.test.tsx

@@ -4,13 +4,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import {
-	defaultFeatureFlags,
-	render,
-	screen,
-	userEvent,
-} from 'tests/test-utils';
-import { FeatureKeys } from 'constants/features';
+import { render, screen, userEvent } from 'tests/test-utils';
 import {
 	invalidLicense,
 	setupAuthzAdmin,
@@ -191,30 +185,6 @@ describe('RolesSettings', () => {
 		}
 	});
 
-	it('hides the create button and disables row clicks when fine-grained authz flag is inactive', async () => {
-		render(<RolesSettings />, undefined, {
-			appContextOverrides: {
-				featureFlags: defaultFeatureFlags.map((f) =>
-					f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ
-						? { ...f, active: false }
-						: f,
-				),
-			},
-		});
-
-		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
-
-		expect(
-			screen.queryByRole('button', { name: /custom role/i }),
-		).not.toBeInTheDocument();
-
-		const rows = document.querySelectorAll('.roles-table-row');
-		rows.forEach((row) => {
-			expect(row).not.toHaveClass('roles-table-row--clickable');
-			expect(row.getAttribute('role')).not.toBe('button');
-		});
-	});
-
 	it('hides the create button and disables row clicks when license is not valid', async () => {
 		render(<RolesSettings />, undefined, {
 			appContextOverrides: { activeLicense: invalidLicense },

frontend/src/container/TopNav/DateTimeSelectionV2/utils/getUnstableCurrentSearchParams.ts

@@ -2,10 +2,15 @@
  * This was introduced to fix a sync bug between Nuqs and react-router-dom
  *
  * We are using the wrong adapter for nuqs because the correct one only supports v6/v7,
- * and we are at version v5. This causes the nuqs/react-router-dom to be out of sync.
+ * and we are at version v5. Nuqs writes params straight to the History API, which
+ * react-router v5 never observes, so `useLocation().search` (and `useUrlQuery()`) can
+ * be several nuqs updates behind the real URL.
  *
- * We can revert this commit once we migrate react-router-dom to v6, or once we migrate
- * to DateTimeSelectionV3
+ * Use this whenever you need to build a navigation target on top of the current
+ * params, otherwise stale values get republished and nuqs adopts them back on its
+ * next flush (it snapshots `window.location.search`).
+ *
+ * We can revert this once we migrate react-router-dom to v6.
  */
 
 /**

frontend/src/hooks/useIsInfraMonitoringV2.ts

@@ -1,11 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { useAppContext } from 'providers/App/App';
-
-export function useIsInfraMonitoringV2(): boolean {
-	const { featureFlags } = useAppContext();
-	return Boolean(
-		featureFlags?.find(
-			(flag) => flag.name === FeatureKeys.USE_INFRA_MONITORING_V2,
-		)?.active,
-	);
-}

frontend/src/hooks/useRolesFeatureGate.ts

@@ -1,4 +1,3 @@
-import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 
@@ -6,22 +5,12 @@ export const useRolesFeatureGate = (): {
 	isRolesEnabled: boolean;
 	isLoading: boolean;
 } => {
-	const {
-		activeLicense,
-		featureFlags,
-		isFetchingActiveLicense,
-		isFetchingFeatureFlags,
-	} = useAppContext();
+	const { activeLicense, isFetchingActiveLicense } = useAppContext();
 
 	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
-	const isFineGrainedAuthzEnabled =
-		featureFlags?.find((f) => f.name === FeatureKeys.USE_FINE_GRAINED_AUTHZ)
-			?.active ?? false;
 
 	return {
-		isRolesEnabled: isValidLicense && isFineGrainedAuthzEnabled,
-		isLoading:
-			(isFetchingActiveLicense && !activeLicense) ||
-			(isFetchingFeatureFlags && !featureFlags),
+		isRolesEnabled: isValidLicense,
+		isLoading: isFetchingActiveLicense && !activeLicense,
 	};
 };

frontend/src/lib/getMinMax.ts

@@ -7,7 +7,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import getMinAgo from './getStartAndEndTime/getMinAgo';
 
-const validCustomTimeRegex = /^(\d+)([mhdw])$/;
+const validCustomTimeRegex = /^(\d+)(months?|[mhdw])$/;
 
 export const isValidShortHandDateTimeFormat = (time: string): boolean =>
 	validCustomTimeRegex.test(time);

frontend/src/mocks-server/__mockdata__/alerts.ts

@@ -27,9 +27,13 @@ export const slackTitleDefaultValue = `[{{ .Status | toUpper }}{{ if eq .Status
 
 export const slackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }} *Summary:* {{ .Annotations.summary }} *Description:* {{ .Annotations.description }} *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}} *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}} *Details:* {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }} {{ end }} {{ end }}`;
 
+export const googleChatTitleDefaultValue = `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`;
+
+export const googleChatDescriptionDefaultValue = `{{ range .Alerts -}} **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }} **Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }} **Description:** {{ .Annotations.description }}{{ end }} {{ end }}`;
+
 export const editSlackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }} dummy_summary *Summary:* {{ .Annotations.summary }} *Description:* {{ .Annotations.description }} *Details:* {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }} {{ end }} {{ end }}`;
 
-export const pagerDutyDescriptionDefaultVaule = `{{ if gt (len .Alerts.Firing) 0 -}} Alerts Firing: {{ range .Alerts.Firing }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }} {{ if gt (len .Alerts.Resolved) 0 -}} Alerts Resolved: {{ range .Alerts.Resolved }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }}`;
+export const pagerDutyDescriptionDefaultValue = `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }} {{- if gt (len .CommonLabels) (len .GroupLabels) -}} {{" "}}( {{- with .CommonLabels.Remove .GroupLabels.Names }} {{- range $index, $label := .SortedPairs -}} {{ if $index }}, {{ end }} {{- $label.Name }}="{{ $label.Value -}}" {{- end }} {{- end -}} ) {{- end }}`;
 
 export const pagerDutyAdditionalDetailsDefaultValue = JSON.stringify({
 	firing: `{{ .Alerts.Firing | toJson }}`,

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -94,8 +94,6 @@ function AlertDetails(): JSX.Element {
 		>
 			<div
 				className={classNames('alert-details', { 'alert-details-v2': isV2Alert })}
-				data-testid="alert-details-root"
-				data-schema-version={isV2Alert ? NEW_ALERT_SCHEMA_VERSION : 'v1'}
 			>
 				<AlertBreadcrumb
 					className="alert-details__breadcrumb"

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -117,11 +117,7 @@ function AlertActionButtons({
 			<div className="alert-action-buttons">
 				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
 					{isAlertRuleDisabled !== undefined && (
-						<Switch
-							onChange={toggleAlertRule}
-							value={!isAlertRuleDisabled}
-							testId="alert-actions-toggle"
-						/>
+						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
 					)}
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />
@@ -133,7 +129,6 @@ function AlertActionButtons({
 						<Tooltip title="More options">
 							<Button
 								type="text"
-								data-testid="alert-actions-menu"
 								icon={
 									<Ellipsis
 										size={16}

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -47,29 +47,21 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 		<div className="alert-info__info-wrapper">
 			<div className="top-section">
 				<div className="alert-title-wrapper">
-					<div data-testid="alert-header-state">
-						<AlertState state={alertRuleState ?? state ?? ''} />
-					</div>
-					<div className="alert-title" data-testid="alert-header-title">
+					<AlertState state={alertRuleState ?? state ?? ''} />
+					<div className="alert-title">
 						<LineClampedText text={displayName || ''} />
 					</div>
 				</div>
 			</div>
 			<div className="bottom-section">
-				{labels?.severity && (
-					<div data-testid="alert-header-severity">
-						<AlertSeverity severity={labels.severity} />
-					</div>
-				)}
+				{labels?.severity && <AlertSeverity severity={labels.severity} />}
 
 				{/* // TODO(shaheer): Get actual data when we are able to get alert firing from state from API */}
 				{/* <AlertStatus
 						status="firing"
 						timestamp={dayjs().subtract(1, 'd').valueOf()}
 					/> */}
-				<div data-testid="alert-header-labels">
-					<AlertLabels labels={labelsWithoutSeverity} />
-				</div>
+				<AlertLabels labels={labelsWithoutSeverity} />
 			</div>
 		</div>
 	);

frontend/src/pages/AlertDetails/hooks.tsx

@@ -127,7 +127,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: EditRules,
 			name: (
-				<div className="tab-item" data-testid="alert-details-tab-overview">
+				<div className="tab-item">
 					<Table size={14} />
 					Overview
 				</div>
@@ -138,7 +138,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: AlertHistory,
 			name: (
-				<div className="tab-item" data-testid="alert-details-tab-history">
+				<div className="tab-item">
 					<History size={14} />
 					History
 					<BetaTag />

frontend/src/pages/ChannelsEdit/index.tsx

@@ -10,6 +10,7 @@ import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
+	GoogleChatChannel,
 	MsTeamsChannel,
 	PagerChannel,
 	SlackChannel,
@@ -59,11 +60,20 @@ function ChannelsEdit(): JSX.Element {
 
 	const prepChannelConfig = (): {
 		type: string;
-		channel: SlackChannel & WebhookChannel & PagerChannel & MsTeamsChannel;
+		channel: SlackChannel &
+			WebhookChannel &
+			PagerChannel &
+			MsTeamsChannel &
+			GoogleChatChannel;
 	} => {
-		let channel: SlackChannel & WebhookChannel & PagerChannel & MsTeamsChannel = {
+		let channel: SlackChannel &
+			WebhookChannel &
+			PagerChannel &
+			MsTeamsChannel &
+			GoogleChatChannel = {
 			name: '',
 		};
+
 		if (value && 'slack_configs' in value) {
 			const slackConfig = value.slack_configs[0];
 			channel = slackConfig;
@@ -81,6 +91,16 @@ function ChannelsEdit(): JSX.Element {
 				channel,
 			};
 		}
+
+		if (value && 'googlechat_configs' in value) {
+			const [googleChatConfig] = value.googlechat_configs;
+			channel = googleChatConfig;
+			return {
+				type: ChannelType.GoogleChat,
+				channel,
+			};
+		}
+
 		if (value && 'pagerduty_configs' in value) {
 			const pagerConfig = value.pagerduty_configs[0];
 			channel = pagerConfig;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/ValueSelector.test.tsx

@@ -182,4 +182,56 @@ describe('ValueSelector', () => {
 			});
 		});
 	});
+
+	describe('opening and closing without touching the list', () => {
+		function renderWith(
+			selection: VariableSelection,
+			options: string[],
+		): jest.Mock {
+			const onChange = jest.fn();
+			render(
+				<TooltipProvider>
+					<ValueSelector
+						options={options}
+						variableType="dynamic"
+						multiSelect
+						showAllOption
+						selection={selection}
+						onChange={onChange}
+						emptyFallback={{ value: [], allSelected: false }}
+						testId="variable-select-env"
+					/>
+				</TooltipProvider>,
+			);
+			return onChange;
+		}
+
+		async function openThenClose(): Promise<void> {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			const control = screen.getByTestId('variable-select-env');
+			await user.click(control.querySelector('input') as HTMLInputElement);
+			await user.keyboard('{Escape}');
+		}
+
+		it('does not promote a pick that covers every available option to ALL', async () => {
+			// A narrow time range can leave only the selected value in the list. That is
+			// still an explicit pick, not "everything, always".
+			const onChange = renderWith(
+				{ value: ['checkout-service-prod'], allSelected: false },
+				['checkout-service-prod'],
+			);
+
+			await openThenClose();
+
+			expect(onChange).not.toHaveBeenCalled();
+		});
+
+		it('does not rewrite a dynamic ALL into concrete values', async () => {
+			const onChange = renderWith({ value: null, allSelected: true }, OPTIONS);
+
+			await openThenClose();
+
+			expect(onChange).not.toHaveBeenCalled();
+		});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/resolveVariableSelection.test.ts

@@ -145,6 +145,133 @@ describe('reconcileWithOptions', () => {
 			),
 		).toBeNull();
 	});
+
+	describe('preserveSelection (options moved on their own — time range, reload)', () => {
+		const multi = model({
+			type: 'DYNAMIC',
+			multiSelect: true,
+			showAllOption: true,
+			dynamicAttribute: 'service.name',
+		});
+
+		it('keeps a multi-select pick the new option list no longer offers', () => {
+			expect(
+				reconcileWithOptions(multi, { value: ['frontend'], allSelected: false }, [
+					'backend',
+					'cart',
+				]),
+			).toStrictEqual({ value: null, allSelected: true });
+
+			expect(
+				reconcileWithOptions(
+					multi,
+					{ value: ['frontend'], allSelected: false },
+					['backend', 'cart'],
+					{ preserveSelection: true },
+				),
+			).toBeNull();
+		});
+
+		it('still materializes ALL, which must track the option list', () => {
+			expect(
+				reconcileWithOptions(
+					model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
+					{ value: ['a'], allSelected: true },
+					['a', 'b'],
+					{ preserveSelection: true },
+				),
+			).toStrictEqual({ value: ['a', 'b'], allSelected: true });
+		});
+
+		it('still fills the default when nothing is selected yet', () => {
+			expect(
+				reconcileWithOptions(multi, { value: [], allSelected: false }, ['a', 'b'], {
+					preserveSelection: true,
+				}),
+			).toStrictEqual({ value: null, allSelected: true });
+		});
+	});
+
+	// A typed value is in no option list, so no refetch can invalidate it.
+	describe('customValues (typed in, never offered by the data)', () => {
+		const multi = model({
+			type: 'DYNAMIC',
+			multiSelect: true,
+			showAllOption: true,
+			dynamicAttribute: 'service.name',
+		});
+
+		it('keeps them through a re-scope that drops a fetched value', () => {
+			expect(
+				reconcileWithOptions(
+					multi,
+					{
+						value: ['frontend', 'typed-in'],
+						allSelected: false,
+						customValues: ['typed-in'],
+					},
+					['backend', 'cart'],
+				),
+			).toStrictEqual({
+				value: ['typed-in'],
+				allSelected: false,
+				customValues: ['typed-in'],
+			});
+		});
+
+		it('never re-defaults a selection made only of them', () => {
+			expect(
+				reconcileWithOptions(
+					multi,
+					{ value: ['typed-in'], allSelected: false, customValues: ['typed-in'] },
+					['backend', 'cart'],
+				),
+			).toBeNull();
+		});
+
+		// An inert marker is not worth a store write + dependent refetch to prune.
+		it('leaves a stale marker alone when it drops nothing', () => {
+			expect(
+				reconcileWithOptions(
+					multi,
+					{
+						value: ['frontend', 'typed-in'],
+						allSelected: false,
+						customValues: ['typed-in', 'removed-earlier'],
+					},
+					['frontend'],
+				),
+			).toBeNull();
+		});
+
+		it('prunes markers for values it does drop', () => {
+			expect(
+				reconcileWithOptions(
+					multi,
+					{
+						value: ['stale', 'typed-in'],
+						allSelected: false,
+						customValues: ['typed-in'],
+					},
+					['frontend'],
+				),
+			).toStrictEqual({
+				value: ['typed-in'],
+				allSelected: false,
+				customValues: ['typed-in'],
+			});
+		});
+
+		it('still drops an unmarked value the list no longer offers', () => {
+			expect(
+				reconcileWithOptions(
+					multi,
+					{ value: ['frontend', 'stale'], allSelected: false },
+					['frontend'],
+				),
+			).toStrictEqual({ value: ['frontend'], allSelected: false });
+		});
+	});
 });
 
 describe('configuredDefaultValue', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/selectionUtils.test.ts

@@ -0,0 +1,91 @@
+import type { VariableSelection } from '../selectionTypes';
+import { selectionFromCommittedValues } from '../utils/selectionUtils';
+
+const OPTIONS = ['checkout', 'payments', 'cart'];
+const FALLBACK: VariableSelection = { value: null, allSelected: true };
+
+function commit(
+	values: string[],
+	overrides: Partial<Parameters<typeof selectionFromCommittedValues>[0]> = {},
+): VariableSelection {
+	return selectionFromCommittedValues({
+		values,
+		options: OPTIONS,
+		showAllOption: true,
+		emptyFallback: FALLBACK,
+		...overrides,
+	});
+}
+
+// What a multi-select commit resolves to. The option list is known only here, so this
+// is the one place a typed value can be recognised.
+describe('selectionFromCommittedValues', () => {
+	it('marks values the option list did not offer as typed in', () => {
+		expect(commit(['checkout', 'typed-in'])).toStrictEqual({
+			value: ['checkout', 'typed-in'],
+			allSelected: false,
+			customValues: ['typed-in'],
+		});
+	});
+
+	it('marks a selection made only of typed-in values', () => {
+		expect(commit(['a', 'b'])).toStrictEqual({
+			value: ['a', 'b'],
+			allSelected: false,
+			customValues: ['a', 'b'],
+		});
+	});
+
+	it('records no marker when every pick came from the list', () => {
+		expect(commit(['checkout', 'cart'])).toStrictEqual({
+			value: ['checkout', 'cart'],
+			allSelected: false,
+		});
+	});
+
+	it('reads a set covering every option as ALL', () => {
+		expect(commit(OPTIONS)).toStrictEqual({
+			value: OPTIONS,
+			allSelected: true,
+		});
+	});
+
+	// ALL re-materializes to the option set, so recording this as ALL would drop the
+	// typed value on the next refetch.
+	it('does not read every option PLUS a typed value as ALL', () => {
+		expect(commit([...OPTIONS, 'typed-in'])).toStrictEqual({
+			value: [...OPTIONS, 'typed-in'],
+			allSelected: false,
+			customValues: ['typed-in'],
+		});
+	});
+
+	// Derived from the values + options at commit time, never from the old selection.
+	it('recomputes the marker: a typed value the data now offers is a normal pick', () => {
+		expect(
+			commit(['checkout', 'was-typed'], {
+				options: [...OPTIONS, 'was-typed'],
+			}),
+		).toStrictEqual({ value: ['checkout', 'was-typed'], allSelected: false });
+	});
+
+	it('does not read it as ALL when the variable offers no ALL', () => {
+		expect(commit(OPTIONS, { showAllOption: false })).toStrictEqual({
+			value: OPTIONS,
+			allSelected: false,
+		});
+	});
+
+	it('resolves an empty commit to the variable fallback', () => {
+		expect(commit([])).toBe(FALLBACK);
+	});
+
+	it('marks everything while the options have not arrived', () => {
+		// Nothing to judge against yet; erring this way keeps a value rather than dropping it.
+		expect(commit(['typed-in'], { options: [] })).toStrictEqual({
+			value: ['typed-in'],
+			allSelected: false,
+			customValues: ['typed-in'],
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useAutoSelect.test.tsx

@@ -4,6 +4,8 @@ import {
 	emptyVariableFormModel,
 	type VariableFormModel,
 } from '../../DashboardSettings/Variables/variableFormModel';
+import { VariableCycleReason } from '../../store/slices/variableFetchSlice';
+import { useDashboardStore } from '../../store/useDashboardStore';
 import type { VariableSelection } from '../selectionTypes';
 import { useAutoSelect } from '../hooks/useAutoSelect';
 
@@ -15,7 +17,11 @@ function run(
 	variable: VariableFormModel,
 	options: string[],
 	selection: VariableSelection,
+	cycleReason?: VariableCycleReason,
 ): VariableSelection | undefined {
+	useDashboardStore.setState({
+		variableCycleReasons: cycleReason ? { [variable.name]: cycleReason } : {},
+	});
 	const onAutoSelect = jest.fn();
 	renderHook(() => useAutoSelect(variable, options, selection, onAutoSelect));
 	return onAutoSelect.mock.calls[0]?.[0];
@@ -70,11 +76,13 @@ describe('useAutoSelect', () => {
 		expect(next).toStrictEqual({ value: ['a', 'b'], allSelected: true });
 	});
 
-	it('falls back to ALL, not the first option, when every selected value is gone', () => {
+	// Re-scoped options only — a time-range refetch must NOT re-default; see below.
+	it('re-scoped: falls back to ALL, not the first option, when every selected value is gone', () => {
 		const next = run(
 			model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
 			['x', 'y'],
 			{ value: ['a', 'b'], allSelected: false },
+			VariableCycleReason.ValueCascade,
 		);
 		expect(next).toStrictEqual({ value: ['x', 'y'], allSelected: true });
 	});
@@ -102,20 +110,23 @@ describe('useAutoSelect', () => {
 		expect(next).toStrictEqual({ value: ['b'], allSelected: false });
 	});
 
-	it('keeps the still-valid subset of a multi-select when options re-scope', () => {
+	it('re-scoped: keeps the still-valid subset of a multi-select', () => {
 		const next = run(
 			model({ type: 'QUERY', multiSelect: true }),
 			['a', 'b', 'd'],
 			{ value: ['a', 'b', 'c'], allSelected: false },
+			VariableCycleReason.ValueCascade,
 		);
 		expect(next).toStrictEqual({ value: ['a', 'b'], allSelected: false });
 	});
 
-	it('re-defaults a multi-select when none of the selected values remain', () => {
-		const next = run(model({ type: 'QUERY', multiSelect: true }), ['x', 'y'], {
-			value: ['a', 'b'],
-			allSelected: false,
-		});
+	it('re-scoped: re-defaults a multi-select when none of the selected values remain', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true }),
+			['x', 'y'],
+			{ value: ['a', 'b'], allSelected: false },
+			VariableCycleReason.ValueCascade,
+		);
 		expect(next).toStrictEqual({ value: ['x'], allSelected: false });
 	});
 
@@ -151,4 +162,45 @@ describe('useAutoSelect', () => {
 		});
 		expect(next).toBeUndefined();
 	});
+
+	describe('by cycle reason', () => {
+		const service = model({
+			name: 'service',
+			type: 'DYNAMIC',
+			multiSelect: true,
+			showAllOption: true,
+			dynamicAttribute: 'service.name',
+		});
+		const gone: VariableSelection = { value: ['frontend'], allSelected: false };
+
+		it('keeps the selection when a full cycle refetched the options', () => {
+			// The new window has no data for the selected service — no reason to widen to ALL.
+			const next = run(
+				service,
+				['backend', 'cart'],
+				gone,
+				VariableCycleReason.FullCycle,
+			);
+			expect(next).toBeUndefined();
+		});
+
+		it('re-scopes the selection when a value cascade refetched the options', () => {
+			const next = run(
+				service,
+				['backend', 'cart'],
+				gone,
+				VariableCycleReason.ValueCascade,
+			);
+			expect(next).toStrictEqual({ value: null, allSelected: true });
+		});
+
+		it('reconciles a variable with no cycle of its own (custom definition change)', () => {
+			const next = run(
+				model({ name: 'env', type: 'CUSTOM', multiSelect: true }),
+				['staging', 'prod'],
+				{ value: ['dev'], allSelected: false },
+			);
+			expect(next).toStrictEqual({ value: ['staging'], allSelected: false });
+		});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useVariableSelection.test.tsx

@@ -13,11 +13,11 @@ jest.mock('nuqs', () => ({
 	useQueryState: (): unknown => [null, jest.fn()],
 }));
 
+const mockGlobalTime = { minTime: 1, maxTime: 2, selectedTime: '5m' };
+
 jest.mock('react-redux', () => ({
 	useSelector: (selector: (state: unknown) => unknown): unknown =>
-		selector({
-			globalTime: { minTime: 1, maxTime: 2, selectedTime: '5m' },
-		}),
+		selector({ globalTime: mockGlobalTime }),
 }));
 
 jest.mock('../../DashboardSettings/Variables/variableAdapters', () => ({
@@ -150,3 +150,57 @@ describe('useVariableSelection — setSelection', () => {
 		expect(svcCycleId()).toBe(before + 1);
 	});
 });
+
+describe('useVariableSelection — what a time-range change enqueues', () => {
+	// Longer than FETCH_CYCLE_DEBOUNCE_MS, which the hook keeps private.
+	const PAST_DEBOUNCE = 400;
+
+	function reasons(): Record<string, string> {
+		return useDashboardStore.getState().variableCycleReasons;
+	}
+
+	beforeEach(() => {
+		jest.useFakeTimers();
+		mockGlobalTime.selectedTime = '5m';
+		useDashboardStore.setState({
+			variableValues: {},
+			variableFetchStates: {},
+			variableLastUpdated: {},
+			variableCycleIds: {},
+			variableCycleReasons: {},
+			variableResolvedEmpty: {},
+			variableFetchContext: null,
+			lastFetchAllKey: null,
+		});
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	// The tag is what stops the reconcile re-defaulting a user's selection.
+	it('tags every variable as a full cycle, overriding an earlier cascade tag', () => {
+		const { result, rerender } = renderHook(() =>
+			useVariableSelection(dashboard),
+		);
+
+		act(() => {
+			jest.advanceTimersByTime(PAST_DEBOUNCE);
+		});
+		expect(reasons()).toStrictEqual({ env: 'full-cycle', svc: 'full-cycle' });
+
+		// A value change re-scopes the dependent's options: it may drop what no longer applies.
+		act(() => {
+			result.current.setSelection('env', { value: ['prod'], allSelected: false });
+		});
+		expect(reasons().svc).toBe('value-cascade');
+
+		mockGlobalTime.selectedTime = '30m';
+		rerender();
+		act(() => {
+			jest.advanceTimersByTime(PAST_DEBOUNCE);
+		});
+
+		expect(reasons()).toStrictEqual({ env: 'full-cycle', svc: 'full-cycle' });
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/components/selectors/ValueSelector.tsx

@@ -6,6 +6,7 @@ import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
 
 import type { VariableSelection } from '../../selectionTypes';
 import { areSelectionsEqual } from '../../utils/resolveVariableSelection';
+import { selectionFromCommittedValues } from '../../utils/selectionUtils';
 import OverflowValuesTooltip from './OverflowValuesTooltip';
 import styles from '../../VariablesBar.module.scss';
 
@@ -75,13 +76,23 @@ function ValueSelector({
 		options.every((option) => draft.includes(option));
 
 	const commit = (values: string[]): void => {
-		// CustomMultiSelect emits the full value set when ALL is picked.
-		const isAll =
-			showAllOption &&
-			options.length > 0 &&
-			options.every((option) => values.includes(option));
-		const next: VariableSelection =
-			values.length === 0 ? emptyFallback : { value: values, allSelected: isAll };
+		// A close that left the list as it opened commits nothing — else a pick covering
+		// every option this window offers would be promoted to a standing ALL.
+		if (
+			areSelectionsEqual(
+				{ value: values, allSelected: false },
+				{ value: committedValues, allSelected: false },
+			)
+		) {
+			return;
+		}
+
+		const next = selectionFromCommittedValues({
+			values,
+			options,
+			showAllOption,
+			emptyFallback,
+		});
 
 		// Closing without actually changing the selection must not re-fire onChange —
 		// that would needlessly re-cascade to dependent variables/panels.

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/hooks/useAutoSelect.ts

@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 
 import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+import {
+	selectVariableCycleReason,
+	VariableCycleReason,
+} from '../../store/slices/variableFetchSlice';
+import { useDashboardStore } from '../../store/useDashboardStore';
 import { reconcileWithOptions } from '../utils/resolveVariableSelection';
 import type { VariableSelection } from '../selectionTypes';
 
@@ -9,6 +14,9 @@ import type { VariableSelection } from '../selectionTypes';
  * `onAutoSelect` only when the value must change. The reconcile rule lives in
  * {@link reconcileWithOptions} (shared with seed + payload defaulting) so the bar
  * and the panel query can never disagree about a variable's default.
+ *
+ * Only a value cascade may re-default the selection; a full cycle (time range,
+ * reload) leaves the user's pick alone. Types with no cycle of their own reconcile.
  */
 export function useAutoSelect(
 	variable: VariableFormModel,
@@ -16,8 +24,14 @@ export function useAutoSelect(
 	selection: VariableSelection,
 	onAutoSelect: (selection: VariableSelection) => void,
 ): void {
+	const cycleReason = useDashboardStore(
+		selectVariableCycleReason(variable.name),
+	);
+
 	useEffect(() => {
-		const next = reconcileWithOptions(variable, selection, options);
+		const next = reconcileWithOptions(variable, selection, options, {
+			preserveSelection: cycleReason === VariableCycleReason.FullCycle,
+		});
 		if (next) {
 			onAutoSelect(next);
 		}