test(e2e): retry clicks swallowed by dnd-kit and loading antd buttons (#13401)

#### Description

- `app-shell/sidenav` TC-03: dnd-kit stops every click for 50 ms after a
drop, so the Save click that follows the drag was sometimes lost and no
preference request went out. `saveShortcuts` now clicks again while the
dialog is still open.
- `messaging-queues/kafka` TC-01: the health check button is a `loading`
antd `Button` while its onboarding queries fetch, and a loading antd
button ignores clicks without being disabled. `openHealthCheck` now
clicks again until the dialog opens.
- Both tests came in with #13189 and have been failing or needing
retries in CI on unrelated PRs. Notes added to
`tests/e2e/docs/flake-notes.md`.

.github/workflows/e2eci.yaml

@@ -2,6 +2,9 @@ name: e2eci
 
 on:
   pull_request:
+  merge_group:
+    types:
+      - checks_requested
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -13,8 +16,12 @@ jobs:
     outputs:
       e2e: ${{ steps.changes.outputs.e2e }}
     steps:
+      - name: merge-queue-pass
+        if: github.event_name == 'merge_group'
+        run: echo "::notice::Merge queue run. E2E already gated the PR, so the required e2e check auto-passes."
       - name: changes
         id: changes
+        if: github.event_name == 'pull_request'
         env:
           GH_TOKEN: ${{ github.token }}
           PR_NUMBER: ${{ github.event.pull_request.number }}

docs/api/openapi.yml

@@ -2205,10 +2205,10 @@ components:
       type: object
     CloudintegrationtypesAWSConnectionArtifact:
       properties:
-        connectionUrl:
+        cliCommand:
           type: string
       required:
-      - connectionUrl
+      - cliCommand
       type: object
     CloudintegrationtypesAWSIntegrationConfig:
       properties:
@@ -2364,11 +2364,8 @@ components:
       properties:
         cliCommand:
           type: string
-        cloudPowerShellCommand:
-          type: string
       required:
       - cliCommand
-      - cloudPowerShellCommand
       type: object
     CloudintegrationtypesAzureIntegrationConfig:
       properties:
@@ -9565,9 +9562,9 @@ components:
     Querybuildertypesv5AggregationMeta:
       properties:
         buckets:
-          description: The ascending upper bounds of the value buckets, set for heatmap
-            and distribution results; each point then carries one count per bound
-            plus a trailing overflow count in values.
+          description: The ascending upper bounds of the value bands, set only for
+            heatmap results; each point then carries one count per bound plus a trailing
+            overflow count in values.
           items:
             format: double
             type: number
@@ -9722,56 +9719,6 @@ components:
           nullable: true
           type: array
       type: object
-    Querybuildertypesv5Distribution:
-      properties:
-        counts:
-          description: One count per bound in meta.buckets plus a trailing overflow
-            count, summed over every step of the requested time range.
-          items:
-            format: double
-            type: number
-          nullable: true
-          type: array
-        labels:
-          description: The group-by field values that identify this distribution.
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5Label'
-          type: array
-      type: object
-    Querybuildertypesv5DistributionAggregation:
-      properties:
-        alias:
-          description: The alias of the aggregation, or the internal name __result_N,
-            with N its index, when no alias was given.
-          type: string
-        distributions:
-          description: One distribution per group-by combination.
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5Distribution'
-          nullable: true
-          type: array
-        index:
-          description: The zero-based position of the aggregation in the query.
-          type: integer
-        meta:
-          allOf:
-          - $ref: '#/components/schemas/Querybuildertypesv5AggregationMeta'
-          description: Display metadata for the aggregation, including the bucket
-            upper bounds the counts are positional against.
-      type: object
-    Querybuildertypesv5DistributionData:
-      properties:
-        aggregations:
-          description: One entry per aggregation of the query. The order is not guaranteed;
-            match entries to aggregations by index.
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5DistributionAggregation'
-          nullable: true
-          type: array
-        queryName:
-          description: The name of the query that produced this result.
-          type: string
-      type: object
     Querybuildertypesv5ExecStats:
       description: 'Execution cost of the request: rows and bytes scanned and execution
         time. A measure of cost, not of whether data exists.'
@@ -10595,12 +10542,10 @@ components:
       - $ref: '#/components/schemas/Querybuildertypesv5TimeSeriesData'
       - $ref: '#/components/schemas/Querybuildertypesv5ScalarData'
       - $ref: '#/components/schemas/Querybuildertypesv5RawData'
-      - $ref: '#/components/schemas/Querybuildertypesv5DistributionData'
       properties:
         results:
           description: 'One result per enabled query, typed by the request type: TimeSeriesData
-            for time_series and heatmap, ScalarData for scalar, RawData for raw and
-            DistributionData for distribution requests.'
+            for time_series, ScalarData for scalar and RawData for raw requests.'
           items: {}
           nullable: true
           type: array
@@ -10790,9 +10735,8 @@ components:
       type: object
     Querybuildertypesv5QueryRangeResponse:
       description: 'Response from the v5 query range endpoint. The data.results array
-        contains typed results depending on the requestType: TimeSeriesData for time_series
-        and heatmap, ScalarData for scalar, RawData for raw, or DistributionData for
-        distribution requests.'
+        contains typed results depending on the requestType: TimeSeriesData for time_series,
+        ScalarData for scalar, or RawData for raw requests.'
       properties:
         data:
           allOf:
@@ -10889,7 +10833,6 @@ components:
       - raw_stream
       - trace
       - heatmap
-      - distribution
       type: string
     Querybuildertypesv5ScalarData:
       properties:
@@ -11001,8 +10944,8 @@ components:
           format: double
           type: number
         values:
-          description: The per-bucket counts for heatmap results, in the order of
-            meta.buckets plus a trailing overflow count.
+          description: The per-band counts for heatmap results, in the order of meta.buckets
+            plus a trailing overflow count.
           items:
             format: double
             type: number

docs/contributing/go/abstractions.md

@@ -28,7 +28,7 @@ func ConvertConfig(src ExternalConfig) (InternalConfig, error)
 // Over this:
 type ConfigAdapter struct { ... }
 func NewConfigAdapter(src ExternalConfig) *ConfigAdapter
-func (a *ConfigAdapter) ToInternal() (InternalConfig, error)
+func (adapter *ConfigAdapter) ToInternal() (InternalConfig, error)
 ```
 
 The two-step version is only justified when `ConfigAdapter` has multiple distinct consumers that use it in different ways.
@@ -66,10 +66,10 @@ A method on a structured type should not strip meaning from the structure it bel
 
 ```go
 // Problematic: callers cannot distinguish how items were related.
-func (o *Order) AllLineItems() []LineItem { ... }
+func (order *Order) AllLineItems() []LineItem { ... }
 
 // Better: the validation logic operates on the full structure.
-func ValidateOrder(o *Order) error { ... }
+func ValidateOrder(order *Order) error { ... }
 ```
 
 Public methods shape how a type is used. Once a lossy accessor exists, callers will depend on it, and the lost information becomes unrecoverable at those call sites.

docs/contributing/go/dslfilteringtosql.md

@@ -74,7 +74,7 @@ The `*Visitor` passed in provides everything needed to build predicates. Use the
 In the simplest case, keys map straight to columns and the resolver is a switch. The doc's running example, an imaginary `sample_entity` table:
 
 ```go
-func (r sampleEntityFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
+func (resolver sampleEntityFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
 	switch key {
 	case "created_by":
 		return v.BuildStringOperation(v.Sb, ctx, operation, "sample_entity.created_by", key)

docs/contributing/go/handler.md

@@ -82,7 +82,7 @@ In the module implementation, implement the new method. A typical implementation
 - Uses the `render` package to write responses or errors
 
 ```go
-func (h *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
+func (handler *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
     // Extract authentication and organization context from req.Context()
     claims, err := authtypes.ClaimsFromContext(req.Context())
     if err != nil {
@@ -98,7 +98,7 @@ func (h *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
     }
     
     // Call module functions
-    out, err := h.module.CreateThing(req.Context(), claims.OrgID, &in)
+    out, err := handler.module.CreateThing(req.Context(), claims.OrgID, &in)
     if err != nil {
         render.Error(rw, err)
         return

docs/contributing/go/packages.md

@@ -59,7 +59,8 @@ Follow these rules:
 
 ### Unexported symbols
 
-- Struct receivers: one or two characters (`c`, `f`, `br`).
+- Struct receivers: the lowercase name of the role the type plays, the same on every method of the type (`provider`, `module`, `handler`, `store`, `middleware`, `migration`). Never one or two characters: `c`, `h`, `m` say nothing at the call site and collide with local variables.
+- When the receiver name would shadow an imported package, alias the import, not the receiver (`pkghandler "github.com/SigNoz/signoz/pkg/http/handler"` with a `handler` receiver).
 - Helper functions: descriptive lowercase names (`parseToken`, `buildQuery`).
 
 ### Constants

docs/contributing/go/service.md

@@ -70,16 +70,16 @@ The instrumentation SDK (`pkg/instrumentation/sdk.go`) is idle while running but
 ```go
 // pkg/instrumentation/sdk.go
 
-func (i *SDK) Start(ctx context.Context) error {
-    <-i.startCh
+func (sdk *SDK) Start(ctx context.Context) error {
+    <-sdk.startCh
     return nil
 }
 
-func (i *SDK) Stop(ctx context.Context) error {
-    close(i.startCh)
+func (sdk *SDK) Stop(ctx context.Context) error {
+    close(sdk.startCh)
     return errors.Join(
-        i.sdk.Shutdown(ctx),
-        i.meterProviderShutdownFunc(ctx),
+        sdk.sdk.Shutdown(ctx),
+        sdk.meterProviderShutdownFunc(ctx),
     )
 }
 ```
@@ -197,8 +197,8 @@ A standalone service only has the `factory.Service` lifecycle i.e it does not se
         }
     }
 
-    func (s *service) Start(ctx context.Context) error { ... }
-    func (s *service) Stop(ctx context.Context) error { ... }
+    func (service *service) Start(ctx context.Context) error { ... }
+    func (service *service) Stop(ctx context.Context) error { ... }
     ```
 
 ### Provider that is also a service

docs/contributing/go/types.md

@@ -17,7 +17,7 @@ Two rules shape how the core type behaves:
     func NewGettableAuthDomainFromAuthDomain(d *AuthDomain, info *AuthNProviderInfo) *GettableAuthDomain
 
     // Receiver form
-    func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
+    func (maintenance *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
     ```
 - **`X` can double as the storage row** when the DB shape would be identical. `Channel` embeds `bun.BaseModel` directly, and there is no `StorableChannel`. This is the preferred shape when it works.
 
@@ -175,10 +175,10 @@ The rules that make the envelope work:
 
     ```go
     // Domain invariants: every write path re-runs these.
-    func (x *X) Validate() error { ... }
+    func (entity *X) Validate() error { ... }
 
     // Request-shape-only: checks that do not apply once the value is persisted.
-    func (p *PostableX) Validate() error { ... }
+    func (postable *PostableX) Validate() error { ... }
     ```
 - **Type aliases, not wrappers**, when two shapes are identical. `type GettableChannels = []*Channel` is correct because it adds no semantics beyond the underlying type.
 - **Serialization tags** follow [handler.md](handler.md): `required:"true"` means the JSON key must be present, `nullable:"true"` is required on any slice or map that may serialize as `null`, and types with a fixed value set must implement `Enum() []any`.

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/awscloudprovider.go

@@ -2,8 +2,6 @@ package implcloudprovider
 
 import (
 	"context"
-	"fmt"
-	"net/url"
 	"sort"
 
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
@@ -18,29 +16,14 @@ func NewAWSCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore)
 	return &awscloudprovider{serviceDefinitions: defStore}, nil
 }
 
-// TODO: move URL construction logic to cloudintegrationtypes and add unit tests for it.
 func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
-	baseURL := fmt.Sprintf(cloudintegrationtypes.CloudFormationQuickCreateBaseURL.StringValue(), req.Config.AWS.DeploymentRegion)
-	u, _ := url.Parse(baseURL)
-
-	q := u.Query()
-	q.Set("region", req.Config.AWS.DeploymentRegion)
-	u.Fragment = "/stacks/quickcreate"
-
-	u.RawQuery = q.Encode()
-
-	q = u.Query()
-	q.Set("stackName", cloudintegrationtypes.AgentCloudFormationBaseStackName.StringValue())
-	q.Set("templateURL", fmt.Sprintf(cloudintegrationtypes.AgentCloudFormationTemplateS3Path.StringValue(), req.Config.AgentVersion))
-	q.Set("param_SigNozIntegrationAgentVersion", req.Config.AgentVersion)
-	q.Set("param_SigNozApiUrl", req.Credentials.SigNozAPIURL)
-	q.Set("param_SigNozApiKey", req.Credentials.SigNozAPIKey)
-	q.Set("param_SigNozAccountId", account.ID.StringValue())
-	q.Set("param_IngestionUrl", req.Credentials.IngestionURL)
-	q.Set("param_IngestionKey", req.Credentials.IngestionKey)
+	connectionArtifact, err := cloudintegrationtypes.NewAWSConnectionArtifact(account.ID, req.Config.AgentVersion, req.Credentials, req.Config.AWS.DeploymentRegion)
+	if err != nil {
+		return nil, err
+	}
 
 	return &cloudintegrationtypes.ConnectionArtifact{
-		AWS: cloudintegrationtypes.NewAWSConnectionArtifact(u.String() + "?&" + q.Encode()), // this format is required by AWS
+		AWS: connectionArtifact,
 	}, nil
 }
 

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

@@ -3936,7 +3936,7 @@ export interface CloudintegrationtypesAWSConnectionArtifactDTO {
 	/**
 	 * @type string
 	 */
-	connectionUrl: string;
+	cliCommand: string;
 }
 
 export interface CloudintegrationtypesAWSLogsCollectionStrategyDTO {
@@ -4146,10 +4146,6 @@ export interface CloudintegrationtypesAzureConnectionArtifactDTO {
 	 * @type string
 	 */
 	cliCommand: string;
-	/**
-	 * @type string
-	 */
-	cloudPowerShellCommand: string;
 }
 
 export interface CloudintegrationtypesAzureLogsCollectionStrategyDTO {
@@ -6941,7 +6937,6 @@ export enum Querybuildertypesv5RequestTypeDTO {
 	raw_stream = 'raw_stream',
 	trace = 'trace',
 	heatmap = 'heatmap',
-	distribution = 'distribution',
 }
 /**
  * The query kind.
@@ -10978,7 +10973,7 @@ export interface Querybuildertypesv5TimeSeriesValueDTO {
 	value?: number;
 	/**
 	 * @type array
-	 * @description The per-bucket counts for heatmap results, in the order of meta.buckets plus a trailing overflow count.
+	 * @description The per-band counts for heatmap results, in the order of meta.buckets plus a trailing overflow count.
 	 */
 	values?: number[];
 }
@@ -11599,7 +11594,7 @@ export interface PromotetypesPostableIndexMaterializedPathsDTO {
 export interface Querybuildertypesv5AggregationMetaDTO {
 	/**
 	 * @type array
-	 * @description The ascending upper bounds of the value buckets, set for heatmap and distribution results; each point then carries one count per bound plus a trailing overflow count in values.
+	 * @description The ascending upper bounds of the value bands, set only for heatmap results; each point then carries one count per bound plus a trailing overflow count in values.
 	 */
 	buckets?: number[];
 	/**
@@ -11720,54 +11715,6 @@ export interface Querybuildertypesv5ColumnDescriptorDTO {
 	unit?: string;
 }
 
-export interface Querybuildertypesv5DistributionDTO {
-	/**
-	 * @type array,null
-	 * @description One count per bound in meta.buckets plus a trailing overflow count, summed over every step of the requested time range.
-	 */
-	counts?: number[] | null;
-	/**
-	 * @type array
-	 * @description The group-by field values that identify this distribution.
-	 */
-	labels?: Querybuildertypesv5LabelDTO[];
-}
-
-export interface Querybuildertypesv5DistributionAggregationDTO {
-	/**
-	 * @type string
-	 * @description The alias of the aggregation, or the internal name __result_N, with N its index, when no alias was given.
-	 */
-	alias?: string;
-	/**
-	 * @type array,null
-	 * @description One distribution per group-by combination.
-	 */
-	distributions?: Querybuildertypesv5DistributionDTO[] | null;
-	/**
-	 * @type integer
-	 * @description The zero-based position of the aggregation in the query.
-	 */
-	index?: number;
-	/**
-	 * @description Display metadata for the aggregation, including the bucket upper bounds the counts are positional against.
-	 */
-	meta?: Querybuildertypesv5AggregationMetaDTO;
-}
-
-export interface Querybuildertypesv5DistributionDataDTO {
-	/**
-	 * @type array,null
-	 * @description One entry per aggregation of the query. The order is not guaranteed; match entries to aggregations by index.
-	 */
-	aggregations?: Querybuildertypesv5DistributionAggregationDTO[] | null;
-	/**
-	 * @type string
-	 * @description The name of the query that produced this result.
-	 */
-	queryName?: string;
-}
-
 /**
  * The step interval in seconds that was used for each query, keyed by query name.
  */
@@ -12023,28 +11970,21 @@ export type Querybuildertypesv5QueryDataDTO =
 	| (Querybuildertypesv5TimeSeriesDataDTO & {
 			/**
 			 * @type array,null
-			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series and heatmap, ScalarData for scalar, RawData for raw and DistributionData for distribution requests.
+			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series, ScalarData for scalar and RawData for raw requests.
 			 */
 			results?: unknown[] | null;
 	  })
 	| (Querybuildertypesv5ScalarDataDTO & {
 			/**
 			 * @type array,null
-			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series and heatmap, ScalarData for scalar, RawData for raw and DistributionData for distribution requests.
+			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series, ScalarData for scalar and RawData for raw requests.
 			 */
 			results?: unknown[] | null;
 	  })
 	| (Querybuildertypesv5RawDataDTO & {
 			/**
 			 * @type array,null
-			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series and heatmap, ScalarData for scalar, RawData for raw and DistributionData for distribution requests.
-			 */
-			results?: unknown[] | null;
-	  })
-	| (Querybuildertypesv5DistributionDataDTO & {
-			/**
-			 * @type array,null
-			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series and heatmap, ScalarData for scalar, RawData for raw and DistributionData for distribution requests.
+			 * @description One result per enabled query, typed by the request type: TimeSeriesData for time_series, ScalarData for scalar and RawData for raw requests.
 			 */
 			results?: unknown[] | null;
 	  });
@@ -12178,7 +12118,7 @@ export interface Querybuildertypesv5QueryRangeRequestDTO {
 }
 
 /**
- * Response from the v5 query range endpoint. The data.results array contains typed results depending on the requestType: TimeSeriesData for time_series and heatmap, ScalarData for scalar, RawData for raw, or DistributionData for distribution requests.
+ * Response from the v5 query range endpoint. The data.results array contains typed results depending on the requestType: TimeSeriesData for time_series, ScalarData for scalar, or RawData for raw requests.
  */
 export interface Querybuildertypesv5QueryRangeResponseDTO {
 	/**

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -18,6 +18,7 @@ function InputWithLabel({
 	className,
 	closeIcon,
 	disabled,
+	sanitize,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -29,14 +30,17 @@ function InputWithLabel({
 	className?: string;
 	closeIcon?: React.ReactNode;
 	disabled?: boolean;
+	/** Rewrites the typed value before it is shown and reported. */
+	sanitize?: (value: string) => string;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
 	);
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.target.value);
-		onChange?.(e.target.value);
+		const value = sanitize ? sanitize(e.target.value) : e.target.value;
+		setInputValue(value);
+		onChange?.(value);
 	};
 
 	return (
@@ -78,6 +82,7 @@ InputWithLabel.defaultProps = {
 	initialValue: undefined,
 	className: undefined,
 	closeIcon: undefined,
+	sanitize: undefined,
 };
 
 export default InputWithLabel;

frontend/src/components/OverflowBadges/ItemBadge.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+
+interface ItemBadgeProps {
+	children: ReactNode;
+	testId?: string;
+}
+
+function ItemBadge({ children, testId }: ItemBadgeProps): JSX.Element {
+	return (
+		<Badge textTransform="none" variant="solid" color="secondary" testId={testId}>
+			{children}
+		</Badge>
+	);
+}
+
+export default ItemBadge;

frontend/src/components/OverflowBadges/OverflowBadges.module.scss

@@ -0,0 +1,32 @@
+.badges {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.overflow {
+	flex-shrink: 0;
+	--badge-max-width: none;
+}
+
+/* Lays every badge out at its natural width, off-screen, to size the visible row. */
+.measure {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: max-content;
+	visibility: hidden;
+	pointer-events: none;
+}
+
+.extraBadges {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-2);
+	max-width: 320px;
+}

frontend/src/components/OverflowBadges/OverflowBadges.tsx

@@ -0,0 +1,75 @@
+import { type CSSProperties, useRef } from 'react';
+import { Tooltip } from '@signozhq/ui/tooltip';
+
+import ItemBadge from './ItemBadge';
+import type { OverflowBadgeItem } from './types';
+import { useOverflowBadgesLayout } from './useOverflowBadgesLayout';
+
+import styles from './OverflowBadges.module.scss';
+
+interface OverflowBadgesProps {
+	items: OverflowBadgeItem[];
+}
+
+/**
+ * A row of badges: as many as fit the width inline, the rest revealed on hover
+ * of a "+N" badge. A lone badge too wide to fit truncates instead.
+ */
+function OverflowBadges({ items }: OverflowBadgesProps): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const measureRef = useRef<HTMLDivElement>(null);
+	const { visibleCount, firstMaxWidth, isMeasuring } = useOverflowBadgesLayout(
+		items,
+		containerRef,
+		measureRef,
+	);
+
+	const visible = items.slice(0, visibleCount);
+	const extra = items.slice(visibleCount);
+	// The app sets `--badge-max-width` globally, which outranks Badge's `maxWidth` prop.
+	const containerStyle =
+		firstMaxWidth === undefined
+			? undefined
+			: ({ '--badge-max-width': `${firstMaxWidth}px` } as CSSProperties);
+
+	return (
+		<div ref={containerRef} className={styles.badges} style={containerStyle}>
+			{visible.map(({ key, label }) => (
+				<ItemBadge key={key} testId="overflow-badges-item">
+					{label}
+				</ItemBadge>
+			))}
+			{extra.length > 0 && (
+				<Tooltip
+					side="bottom"
+					title={
+						<div className={styles.extraBadges}>
+							{extra.map(({ key, label }) => (
+								<ItemBadge key={key}>{label}</ItemBadge>
+							))}
+						</div>
+					}
+				>
+					{/* Stop the click so the "+N" badge doesn't trigger the row's click. */}
+					<span
+						role="presentation"
+						className={styles.overflow}
+						onClick={(e): void => e.stopPropagation()}
+					>
+						<ItemBadge testId="overflow-badges-more">+{extra.length}</ItemBadge>
+					</span>
+				</Tooltip>
+			)}
+			{isMeasuring && (
+				<div ref={measureRef} className={styles.measure} aria-hidden>
+					{items.map(({ key, label }) => (
+						<ItemBadge key={key}>{label}</ItemBadge>
+					))}
+					<ItemBadge>+{items.length}</ItemBadge>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default OverflowBadges;

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

@@ -0,0 +1,74 @@
+import { render, screen } from 'tests/test-utils';
+
+import OverflowBadges from '../OverflowBadges';
+import { computeOverflowBadgesLayout } from '../utils';
+
+const items = ['alpha', 'beta', 'gamma', 'delta'].map((label) => ({
+	key: label,
+	label,
+}));
+
+describe('computeOverflowBadgesLayout', () => {
+	it('fits as many badges as the width allows, keeping room for +N', () => {
+		// 50 + 4 + 50 + 4 + 30 (+N) = 138 fits; a third badge would not.
+		expect(
+			computeOverflowBadgesLayout(140, 4, [50, 50, 50, 50], 30),
+		).toStrictEqual({ visibleCount: 2 });
+	});
+
+	it('shows every badge without +N when all fit', () => {
+		expect(computeOverflowBadgesLayout(200, 4, [50, 50, 50], 30)).toStrictEqual({
+			visibleCount: 3,
+		});
+	});
+
+	it('truncates the first badge when even it does not fit', () => {
+		expect(computeOverflowBadgesLayout(100, 4, [300, 50], 30)).toStrictEqual({
+			visibleCount: 1,
+			firstMaxWidth: 66,
+		});
+	});
+
+	it('gives a lone too-wide badge the full width', () => {
+		expect(computeOverflowBadgesLayout(100, 4, [300], 30)).toStrictEqual({
+			visibleCount: 1,
+			firstMaxWidth: 100,
+		});
+	});
+
+	it('returns visibleCount 0 when badgeWidths is empty', () => {
+		expect(computeOverflowBadgesLayout(100, 4, [], 30)).toStrictEqual({
+			visibleCount: 0,
+		});
+	});
+});
+
+describe('OverflowBadges', () => {
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('collapses the badges that do not fit into +N', () => {
+		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(160);
+		jest
+			.spyOn(Element.prototype, 'getBoundingClientRect')
+			.mockReturnValue({ width: 50 } as DOMRect);
+
+		render(<OverflowBadges items={items} />);
+
+		expect(screen.getAllByTestId('overflow-badges-item')).toHaveLength(2);
+		expect(screen.getByTestId('overflow-badges-more')).toHaveTextContent('+2');
+	});
+
+	it('omits +N when every badge fits', () => {
+		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1000);
+		jest
+			.spyOn(Element.prototype, 'getBoundingClientRect')
+			.mockReturnValue({ width: 50 } as DOMRect);
+
+		render(<OverflowBadges items={items} />);
+
+		expect(screen.getAllByTestId('overflow-badges-item')).toHaveLength(4);
+		expect(screen.queryByTestId('overflow-badges-more')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/OverflowBadges/types.ts

@@ -0,0 +1,20 @@
+import type { Key, ReactNode } from 'react';
+
+export interface OverflowBadgeItem {
+	key: Key;
+	label: ReactNode;
+}
+
+export interface OverflowBadgesLayout {
+	visibleCount: number;
+	/** Set when even the first badge does not fit and must truncate. */
+	firstMaxWidth?: number;
+}
+
+export interface OverflowBadgesMeasurement {
+	/** The items these widths were measured for. */
+	itemsKey: string;
+	badgeWidths: number[];
+	overflowWidth: number;
+	gap: number;
+}

frontend/src/components/OverflowBadges/useOverflowBadgesLayout.ts

@@ -0,0 +1,71 @@
+import { type RefObject, useLayoutEffect, useMemo, useState } from 'react';
+
+import type {
+	OverflowBadgeItem,
+	OverflowBadgesLayout,
+	OverflowBadgesMeasurement,
+} from './types';
+import { computeOverflowBadgesLayout } from './utils';
+
+/**
+ * Fits the badges to the container's width, re-fitting on resize. Badge widths
+ * are measured once per set of items, from a measuring row holding every badge
+ * at its natural width followed by "+N", rendered only while `isMeasuring`.
+ */
+export function useOverflowBadgesLayout(
+	items: OverflowBadgeItem[],
+	containerRef: RefObject<HTMLElement>,
+	measureRef: RefObject<HTMLElement>,
+): OverflowBadgesLayout & { isMeasuring: boolean } {
+	const itemsKey = items.map((item) => String(item.key)).join('\u0000');
+	const [measurement, setMeasurement] =
+		useState<OverflowBadgesMeasurement | null>(null);
+	const [available, setAvailable] = useState(0);
+	const isMeasuring = items.length > 0 && measurement?.itemsKey !== itemsKey;
+
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		const measure = measureRef.current;
+		if (!isMeasuring || !container || !measure) {
+			return;
+		}
+		// Rounded up so sub-pixel widths never add up past the container.
+		const badgeWidths = Array.from(measure.children, (el) =>
+			Math.ceil(el.getBoundingClientRect().width),
+		);
+		const overflowWidth = badgeWidths.pop() ?? 0;
+		setMeasurement({
+			itemsKey,
+			badgeWidths,
+			overflowWidth,
+			gap: parseFloat(getComputedStyle(container).columnGap) || 0,
+		});
+	}, [isMeasuring, itemsKey, containerRef, measureRef]);
+
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return undefined;
+		}
+		const update = (): void => setAvailable(container.clientWidth);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(container);
+		return (): void => observer.disconnect();
+	}, [containerRef]);
+
+	const layout = useMemo(
+		(): OverflowBadgesLayout =>
+			isMeasuring || !measurement || available === 0
+				? { visibleCount: items.length }
+				: computeOverflowBadgesLayout(
+						available,
+						measurement.gap,
+						measurement.badgeWidths,
+						measurement.overflowWidth,
+					),
+		[isMeasuring, measurement, available, items.length],
+	);
+
+	return { ...layout, isMeasuring };
+}

frontend/src/components/OverflowBadges/utils.ts

@@ -0,0 +1,33 @@
+import type { OverflowBadgesLayout } from './types';
+
+/**
+ * How many badges fit `available` px, keeping room for the "+N" badge while any
+ * are left out. Always shows at least one, capped to truncate when too wide.
+ */
+export const computeOverflowBadgesLayout = (
+	available: number,
+	gap: number,
+	badgeWidths: number[],
+	overflowWidth: number,
+): OverflowBadgesLayout => {
+	if (badgeWidths.length === 0) {
+		return { visibleCount: 0 };
+	}
+
+	let used = 0;
+	let visibleCount = 0;
+	for (let i = 0; i < badgeWidths.length; i++) {
+		const next = used + (i > 0 ? gap : 0) + badgeWidths[i];
+		const reserve = i < badgeWidths.length - 1 ? gap + overflowWidth : 0;
+		if (next + reserve > available) {
+			break;
+		}
+		used = next;
+		visibleCount++;
+	}
+	if (visibleCount > 0) {
+		return { visibleCount };
+	}
+	const reserve = badgeWidths.length > 1 ? gap + overflowWidth : 0;
+	return { visibleCount: 1, firstMaxWidth: Math.max(available - reserve, 0) };
+};

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

@@ -26,6 +26,7 @@ import {
 	RAW_QUERY_FIELDS,
 	resolveQueryBuilderFields,
 } from '../../queryBuilderFields.utils';
+import { parseLimit, sanitizeLimit } from '../../utils';
 
 import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
@@ -278,7 +279,7 @@ function QueryAddOns({
 
 	const handleChangeLimit = useCallback(
 		(value: string) => {
-			handleChangeQueryData('limit', Number(value) || null);
+			handleChangeQueryData('limit', parseLimit(value));
 		},
 		[handleChangeQueryData],
 	);
@@ -374,6 +375,7 @@ function QueryAddOns({
 									label="Limit"
 									type="number"
 									onChange={handleChangeLimit}
+									sanitize={sanitizeLimit}
 									initialValue={query?.limit ?? undefined}
 									placeholder={placeholderOf(QueryBuilderField.Limit)}
 									onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -25,6 +25,8 @@ import {
 import '@testing-library/jest-dom';
 
 import { QueryBuilderV2 } from '../../QueryBuilderV2';
+import { QueryBuilderV2Provider } from '../../QueryBuilderV2Context';
+import { QueryV2 } from '../QueryV2';
 
 // Local mocks for domain-specific heavy child components
 jest.mock(
@@ -249,11 +251,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 
 	describe('query actions menu', () => {
 		const openQueryActions = async (): Promise<void> => {
-			const trigger = document.querySelector(
-				'.query-actions-container [aria-haspopup="menu"]',
-			) as HTMLElement;
-			expect(trigger).toBeInTheDocument();
-			await userEvent.click(trigger);
+			await userEvent.click(screen.getAllByTestId('query-actions')[0]);
 		};
 
 		it('Clone calls cloneQuery with the query', async () => {
@@ -261,7 +259,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 
 			await openQueryActions();
 			await userEvent.click(
-				await screen.findByRole('menuitem', { name: 'Clone' }),
+				await screen.findByTestId('query-actions-item-clone-query'),
 			);
 
 			expect(baseQBContext.cloneQuery).toHaveBeenCalledTimes(1);
@@ -275,41 +273,44 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
 
 			await openQueryActions();
-			await screen.findByRole('menuitem', { name: 'Clone' });
+			await screen.findByTestId('query-actions-item-clone-query');
 
 			expect(
-				screen.queryByRole('menuitem', { name: 'Delete' }),
+				screen.queryByTestId('query-actions-item-delete-query'),
 			).not.toBeInTheDocument();
 		});
 
 		it('shows Delete with more than one query and deletes on click', async () => {
-			const currentQueryBase = baseQBContext.currentQuery as Query;
-			const [queryA] = currentQueryBase.builder.queryData;
-			mockedUseQueryBuilder.mockReturnValue({
-				...baseQBContext,
-				currentQuery: {
-					...currentQueryBase,
-					builder: {
-						...currentQueryBase.builder,
-						queryData: [queryA, { ...queryA, queryName: 'B', legend: 'B' }],
-					},
-				},
-			});
+			const [queryA] = (baseQBContext.currentQuery as Query).builder.queryData;
 			const handleDeleteQuery = jest.fn();
 			mockedUseQueryOperations.mockReturnValue({
 				...mockedUseQueryOperations({} as Parameters<UseQueryOperations>[0]),
 				handleDeleteQuery,
 			});
 
-			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
+			render(
+				<QueryBuilderV2Provider>
+					<QueryV2
+						index={0}
+						query={queryA}
+						version="v4"
+						isAvailableToDisable={false}
+						isMultiQueryAllowed
+						queriesCount={2}
+						onSignalSourceChange={jest.fn()}
+						signalSourceChangeEnabled={false}
+						savePreviousQuery={false}
+					/>
+				</QueryBuilderV2Provider>,
+			);
 
 			await openQueryActions();
 			await userEvent.click(
-				await screen.findByRole('menuitem', { name: 'Delete' }),
+				await screen.findByTestId('query-actions-item-delete-query'),
 			);
 
 			expect(handleDeleteQuery).toHaveBeenCalledTimes(1);
-		});
+		}, 15000);
 	});
 
 	it('fx button is disabled when functions already exist', () => {

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -169,8 +169,15 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(input.value).toBe('5');
 
-		fireEvent.change(input, { target: { value: '10' } });
-		expect(mockHandleChangeQueryData).toHaveBeenCalledWith('limit', 10);
+		const user = userEvent.setup();
+		await user.clear(input);
+		await user.type(input, '10');
+		expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith('limit', 10);
+
+		await user.clear(input);
+		await user.type(input, '-5');
+		expect(input.value).toBe('5');
+		expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith('limit', 5);
 	});
 
 	it.each([

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

@@ -12,10 +12,62 @@ import {
 	convertExpressionToFilters,
 	convertFiltersToExpression,
 	convertFiltersToExpressionWithExistingQuery,
+	convertHavingToExpression,
 	formatValueForExpression,
+	parseLimit,
 	removeKeysFromExpression,
+	sanitizeLimit,
 } from '../utils';
 
+describe('convertHavingToExpression', () => {
+	it.each([
+		['COUNT()', 'count() > 5'],
+		['COUNT_DISTINCT(service.name)', 'count_distinct(service.name) > 5'],
+		['P99(duration_nano)', 'p99(duration_nano) > 5'],
+		['SUM(http.Request.Size)', 'sum(http.Request.Size) > 5'],
+		['count()', 'count() > 5'],
+	])('references %s by its lower-case function', (columnName, expected) => {
+		expect(
+			convertHavingToExpression([{ columnName, op: '>', value: 5 }]),
+		).toStrictEqual({ expression: expected });
+	});
+
+	it('joins several conditions and formats list values', () => {
+		expect(
+			convertHavingToExpression([
+				{ columnName: 'COUNT()', op: '>', value: 5 },
+				{ columnName: 'COUNT()', op: 'NOT IN', value: [1, 2] },
+			]),
+		).toStrictEqual({ expression: 'count() > 5 AND count() NOT IN [1, 2]' });
+	});
+});
+
+describe('sanitizeLimit', () => {
+	it.each([
+		['10', '10'],
+		['-10', '10'],
+		['2.5', '25'],
+		['1e3', '13'],
+		['', ''],
+	])('sanitizes %j to %j', (value, expected) => {
+		expect(sanitizeLimit(value)).toBe(expected);
+	});
+});
+
+describe('parseLimit', () => {
+	it.each([
+		['10', 10],
+		['1', 1],
+		['', null],
+		['0', null],
+		['-5', null],
+		['2.5', null],
+		['abc', null],
+	])('parses %j as %j', (value, expected) => {
+		expect(parseLimit(value)).toBe(expected);
+	});
+});
+
 describe('convertFiltersToExpression', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();

frontend/src/components/QueryBuilderV2/utils.ts

@@ -840,6 +840,16 @@ export const appendAndClause = (
 	return hasTopLevelOr ? `(${base}) AND ${clause}` : `${base} AND ${clause}`;
 };
 
+/** Strips everything but digits, so a limit input can't hold a sign or decimal. */
+export const sanitizeLimit = (value: string): string =>
+	value.replace(/\D/g, '');
+
+/** A query or formula limit: a positive integer, otherwise none. */
+export const parseLimit = (value: string): number | null => {
+	const limit = Number(value);
+	return Number.isInteger(limit) && limit > 0 ? limit : null;
+};
+
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value
@@ -871,7 +881,14 @@ export const convertHavingToExpression = (
 				formattedValue = String(value);
 			}
 
-			return `${columnName} ${op} ${formattedValue}`;
+			// The old having filter upper-cased the function (`COUNT()`); v5 only
+			// resolves the aggregation's own lower-case expression.
+			const reference = columnName.replace(
+				/^\s*([A-Za-z_]\w*)\(/,
+				(_, fn: string) => `${fn.toLowerCase()}(`,
+			);
+
+			return `${reference} ${op} ${formattedValue}`;
 		})
 		.filter((expression) => expression !== ''); // Remove empty expressions
 

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -4,6 +4,7 @@ import type {
 	TouchEvent as ReactTouchEvent,
 } from 'react';
 import { useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 import {
 	ArrowDown,
 	ArrowUp,
@@ -31,7 +32,7 @@ type TanStackHeaderRowProps<TData = unknown> = {
 	onRemoveColumn?: (columnId: string) => void;
 	orderBy?: SortState | null;
 	onSort?: (sort: SortState | null) => void;
-	/** Last column cannot be resized */
+	/** The fill column and any after it cannot be resized */
 	isLastColumn?: boolean;
 };
 
@@ -89,6 +90,19 @@ function TanStackHeaderRow<TData>({
 	): void => {
 		event.preventDefault();
 		event.stopPropagation();
+		// TanStack starts the drag from the configured size, which an auto or
+		// redistributed column does not render at.
+		const renderedWidth = Math.round(
+			event.currentTarget.closest('th')?.getBoundingClientRect().width ?? 0,
+		);
+		if (header && renderedWidth > 0 && renderedWidth !== header.getSize()) {
+			flushSync(() => {
+				header.getContext().table.setColumnSizing((sizing) => ({
+					...sizing,
+					[header.column.id]: renderedWidth,
+				}));
+			});
+		}
 		resizeHandler?.(event);
 	};
 	const {

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -53,7 +53,11 @@ import { useFlatItems } from './useFlatItems';
 import { useResetScroll } from './useResetScroll';
 import { useRowKeyData } from './useRowKeyData';
 import { useTableParams } from './useTableParams';
-import { buildPageSizeItems, buildTanstackColumnDef } from './utils';
+import {
+	buildPageSizeItems,
+	buildTanstackColumnDef,
+	getFillColumnIndex,
+} from './utils';
 import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
@@ -428,6 +432,9 @@ function TanStackTableInner<TData, TItemKey = string>(
 	);
 
 	const tableHeader = useCallback(() => {
+		const fillColumnIndex = getFillColumnIndex(
+			flatHeaders.map((header) => columnsById.get(header.id)),
+		);
 		return (
 			<DndContext
 				sensors={sensors}
@@ -453,7 +460,7 @@ function TanStackTableInner<TData, TItemKey = string>(
 									canRemoveColumn={canRemoveColumn}
 									orderBy={orderBy}
 									onSort={setOrderBy}
-									isLastColumn={index === flatHeaders.length - 1}
+									isLastColumn={index >= fillColumnIndex}
 								/>
 							);
 						})}

frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx

@@ -1,7 +1,7 @@
 import type { Table } from '@tanstack/react-table';
 
 import type { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
+import { getColumnWidthStyle, getFillColumnIndex } from './utils';
 
 export function VirtuosoTableColGroup<TData>({
 	columns,
@@ -13,6 +13,9 @@ export function VirtuosoTableColGroup<TData>({
 	const visibleTanstackColumns = table.getVisibleFlatColumns();
 	const columnDefsById = new Map(columns.map((c) => [c.id, c]));
 	const columnSizing = table.getState().columnSizing;
+	const fillColumnIndex = getFillColumnIndex(
+		visibleTanstackColumns.map((c) => columnDefsById.get(c.id)),
+	);
 
 	return (
 		<colgroup>
@@ -22,7 +25,7 @@ export function VirtuosoTableColGroup<TData>({
 					return <col key={tanstackCol.id} />;
 				}
 				const persistedWidth = columnSizing[tanstackCol.id];
-				const isLastColumn = index === visibleTanstackColumns.length - 1;
+				const isLastColumn = index === fillColumnIndex;
 				return (
 					<col
 						key={tanstackCol.id}

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

@@ -0,0 +1,51 @@
+import { screen } from '@testing-library/react';
+
+import type { TableColumnDef } from '../types';
+import { defaultColumns, renderTanStackTable, type TestRow } from './testUtils';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+const actionsColumn: TableColumnDef<TestRow> = {
+	id: 'actions',
+	header: 'Actions',
+	cell: (): string => 'act',
+	width: { fixed: '96px', passLastColumnFill: true },
+};
+
+const colWidths = (container: HTMLElement): string[] =>
+	Array.from(container.querySelectorAll('colgroup col')).map(
+		(col) => (col as HTMLElement).style.width,
+	);
+
+const isResizable = (headerText: string): boolean =>
+	Boolean(
+		screen
+			.getByText(headerText)
+			.closest('th')
+			?.querySelector('[title="Drag to resize column"]'),
+	);
+
+describe('TanStackTable column fill', () => {
+	it('fills and locks the last column by default', () => {
+		const { container } = renderTanStackTable();
+
+		expect(colWidths(container).at(-1)).toBe('100%');
+		expect(isResizable('Name')).toBe(true);
+		expect(isResizable('Value')).toBe(false);
+	});
+
+	it('hands the fill to the previous column when the last passes it on', () => {
+		const { container } = renderTanStackTable({
+			props: { columns: [...defaultColumns, actionsColumn] },
+		});
+
+		const widths = colWidths(container);
+		expect(widths.at(-2)).toBe('100%');
+		expect(widths.at(-1)).toBe('96px');
+		expect(isResizable('Name')).toBe(true);
+		expect(isResizable('Value')).toBe(false);
+		expect(isResizable('Actions')).toBe(false);
+	});
+});

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

@@ -0,0 +1,28 @@
+import type { TableColumnDef } from '../types';
+import { getFillColumnIndex } from '../utils';
+
+const column = (
+	id: string,
+	width?: TableColumnDef<unknown>['width'],
+): TableColumnDef<unknown> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+	width,
+});
+
+describe('getFillColumnIndex', () => {
+	it('fills the last column by default', () => {
+		expect(getFillColumnIndex([column('a'), column('b')])).toBe(1);
+	});
+
+	it('fills the previous column when the last passes it on', () => {
+		expect(
+			getFillColumnIndex([
+				column('a'),
+				column('b'),
+				column('actions', { fixed: '96px', passLastColumnFill: true }),
+			]),
+		).toBe(1);
+	});
+});

frontend/src/components/TanStackTableView/types.ts

@@ -74,6 +74,8 @@ export type TableColumnDef<
 		default?: number | string;
 		max?: number | string;
 		ignoreLastColumnFill?: boolean;
+		/** When last, hand the fill to the previous column instead of taking it. */
+		passLastColumnFill?: boolean;
 	};
 };
 

frontend/src/components/TanStackTableView/utils.ts

@@ -63,6 +63,19 @@ export const getColumnWidthStyle = <TData>(
 	};
 };
 
+/**
+ * Index of the column that fills spare width: the last one, or the one before
+ * it when the last sets `width.passLastColumnFill`.
+ */
+export const getFillColumnIndex = <TData>(
+	columns: (TableColumnDef<TData> | undefined)[],
+): number => {
+	const lastIndex = columns.length - 1;
+	return columns[lastIndex]?.width?.passLastColumnFill
+		? lastIndex - 1
+		: lastIndex;
+};
+
 const isSkeletonRow = (row: unknown): boolean => {
 	const r = row as Record<string, unknown>;
 	return typeof r?.id === 'string' && r.id.startsWith('skeleton-');

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -26,6 +26,7 @@ import {
 } from 'api/ai-assistant/chat';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
+import { buildExplorerNavigationUrl } from 'utils/buildExplorerNavigationUrl';
 import { openInNewTab } from 'utils/navigation';
 import {
 	ArchiveRestore,
@@ -47,6 +48,10 @@ import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from './utils/getPanelTypeForRequestType';
 import { openSavedViewByKey } from './utils/openSavedView';
 import {
 	isSavedViewOpenAction,
@@ -333,6 +338,11 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		);
 		return;
 	}
+	// Read before toUrlCompositeQuery, which drops the requestType envelope.
+	const panelType = getPanelTypeForRequestType(
+		requestTypeFromActionQuery(action.query),
+		action.signal,
+	);
 	const normalized = withDerivedFilterExpressions(urlQuery as unknown as Query);
 	// eslint-disable-next-line no-console
 	console.log('[apply_filter] normalized', normalized);
@@ -342,7 +352,9 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		normalized.builder.queryData.forEach((q, i) => {
 			deps.handleSetQueryData(i, q);
 		});
-		deps.redirectWithQueryBuilderData(normalized);
+		deps.redirectWithQueryBuilderData(normalized, {
+			[QueryParams.panelTypes]: panelType,
+		});
 		return;
 	}
 	const base = explorerRouteForSignal(action.signal);
@@ -353,8 +365,10 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 	}
 	// eslint-disable-next-line no-console
 	console.log('[apply_filter] off-page → navigate', base);
-	const encoded = encodeURIComponent(JSON.stringify(normalized));
-	navigate(`${base}?${QueryParams.compositeQuery}=${encoded}`);
+	const url = buildExplorerNavigationUrl(base, normalized, {
+		[QueryParams.panelTypes]: panelType,
+	});
+	navigate(url);
 }
 
 /** Picks the right rollback API call for a given action kind. */
@@ -613,6 +627,7 @@ export default function ActionsSection({
 							disabled={isSuccess}
 							loading={isLoading}
 							aria-label={action.label}
+							testId={`ai-action-chip-${action.kind}`}
 							prefix={icon}
 						>
 							<span className={styles.chipLabel}>{action.label}</span>

frontend/src/container/AIAssistant/components/ActionsSection/__tests__/ActionsSection.test.tsx

@@ -1,7 +1,16 @@
 import { undoExecution } from 'api/ai-assistant/chat';
 import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { MessageActionKindDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import {
+	ApplyFilterSignalDTO,
+	MessageActionKindDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { getCurrentLocation } from 'lib/router/navigation';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import ActionsSection from '../ActionsSection';
 
@@ -28,6 +37,37 @@ function renderUndoChip(): HTMLElement {
 	return screen.getByRole('button', { name: 'Undo change' });
 }
 
+// Labels differ per test: auto-applied filters are deduped module-wide by label.
+function countByServiceAction(label: string): MessageActionDTO {
+	return {
+		kind: MessageActionKindDTO.apply_filter,
+		label,
+		signal: ApplyFilterSignalDTO.logs,
+		query: {
+			requestType: Querybuildertypesv5RequestTypeDTO.scalar,
+			compositeQuery: {
+				queries: [
+					{
+						type: 'builder_query',
+						spec: {
+							name: 'A',
+							signal: 'logs',
+							aggregations: [{ expression: 'count()' }],
+							groupBy: [{ name: 'service.name' }],
+						},
+					},
+				],
+			},
+		},
+	};
+}
+
+function currentPanelTypesParam(): string | null {
+	return new URLSearchParams(getCurrentLocation().search).get(
+		QueryParams.panelTypes,
+	);
+}
+
 describe('ActionsSection rollback chip', () => {
 	beforeEach(() => {
 		mockUndo.mockReset();
@@ -81,3 +121,52 @@ describe('ActionsSection rollback chip', () => {
 		).resolves.toBeInTheDocument();
 	});
 });
+
+describe('ActionsSection apply_filter', () => {
+	it('opens the explorer in the Table view when the chip is clicked from another page', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ActionsSection
+				actions={[countByServiceAction('Open in Logs Explorer')]}
+				messageId="message-1"
+			/>,
+			undefined,
+			{ initialRoute: ROUTES.HOME },
+		);
+
+		await user.click(screen.getByTestId('ai-action-chip-apply_filter'));
+
+		await waitFor(() =>
+			expect(getCurrentLocation().pathname).toBe(ROUTES.LOGS_EXPLORER),
+		);
+		expect(currentPanelTypesParam()).toBe(JSON.stringify(PANEL_TYPES.TABLE));
+	});
+
+	it('switches the open explorer to the Table view when applied on it', async () => {
+		const redirectWithQueryBuilderData = jest.fn() as jest.MockedFunction<
+			QueryBuilderContextType['redirectWithQueryBuilderData']
+		>;
+		const handleSetQueryData = jest.fn() as jest.MockedFunction<
+			QueryBuilderContextType['handleSetQueryData']
+		>;
+		render(
+			<ActionsSection
+				actions={[countByServiceAction('Apply on Logs Explorer')]}
+				messageId="message-2"
+			/>,
+			undefined,
+			{
+				initialRoute: ROUTES.LOGS_EXPLORER,
+				queryBuilderOverrides: { redirectWithQueryBuilderData, handleSetQueryData },
+			},
+		);
+
+		await waitFor(() =>
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1),
+		);
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+			expect.objectContaining({ builder: expect.anything() }),
+			{ [QueryParams.panelTypes]: PANEL_TYPES.TABLE },
+		);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/getPanelTypeForRequestType.test.ts

@@ -0,0 +1,106 @@
+import { ApplyFilterSignalDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from '../getPanelTypeForRequestType';
+
+describe('getPanelTypeForRequestType', () => {
+	it.each([
+		[
+			Querybuildertypesv5RequestTypeDTO.scalar,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.TABLE,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.time_series,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.TIME_SERIES,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.raw,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.LIST,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.traces,
+			PANEL_TYPES.TRACE,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.LIST,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.metrics,
+			PANEL_TYPES.LIST,
+		],
+	])('maps %s on the %s signal to the %s view', (requestType, signal, view) => {
+		expect(getPanelTypeForRequestType(requestType, signal)).toBe(view);
+	});
+
+	it.each([
+		undefined,
+		null,
+		'',
+		Querybuildertypesv5RequestTypeDTO.raw_stream,
+		Querybuildertypesv5RequestTypeDTO.heatmap,
+		'distribution',
+		'nonsense',
+		'toString',
+		'constructor',
+		42,
+		{},
+	])(
+		'falls back to the List view for unmapped or invalid requestType (%p)',
+		(value) => {
+			expect(getPanelTypeForRequestType(value, ApplyFilterSignalDTO.traces)).toBe(
+				PANEL_TYPES.LIST,
+			);
+		},
+	);
+});
+
+describe('requestTypeFromActionQuery', () => {
+	it('reads the requestType envelope field and returns undefined when absent', () => {
+		expect(
+			requestTypeFromActionQuery({
+				requestType: 'scalar',
+				schemaVersion: 'v5',
+				compositeQuery: { queries: [] },
+			}),
+		).toBe('scalar');
+		expect(requestTypeFromActionQuery({})).toBeUndefined();
+		expect(requestTypeFromActionQuery(null)).toBeUndefined();
+		expect(requestTypeFromActionQuery(undefined)).toBeUndefined();
+	});
+
+	it('maps a grouped count() payload to the Table view', () => {
+		const query = {
+			requestType: 'scalar',
+			schemaVersion: 'v5',
+			compositeQuery: {
+				queries: [
+					{
+						type: 'builder_query',
+						spec: {
+							signal: 'logs',
+							aggregations: [{ expression: 'count()' }],
+							groupBy: [{ name: 'service.name' }],
+						},
+					},
+				],
+			},
+		};
+		expect(
+			getPanelTypeForRequestType(
+				requestTypeFromActionQuery(query),
+				ApplyFilterSignalDTO.logs,
+			),
+		).toBe(PANEL_TYPES.TABLE);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/getPanelTypeForRequestType.ts

@@ -0,0 +1,30 @@
+import {
+	ApplyFilterSignalDTO,
+	type MessageActionDTOQuery,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+export function getPanelTypeForRequestType(
+	requestType: unknown,
+	signal: ApplyFilterSignalDTO,
+): PANEL_TYPES {
+	switch (requestType) {
+		case Querybuildertypesv5RequestTypeDTO.scalar:
+			return PANEL_TYPES.TABLE;
+		case Querybuildertypesv5RequestTypeDTO.time_series:
+			return PANEL_TYPES.TIME_SERIES;
+		case Querybuildertypesv5RequestTypeDTO.trace:
+			return signal === ApplyFilterSignalDTO.traces
+				? PANEL_TYPES.TRACE
+				: PANEL_TYPES.LIST;
+		default:
+			return PANEL_TYPES.LIST;
+	}
+}
+
+export function requestTypeFromActionQuery(
+	query: MessageActionDTOQuery | undefined,
+): unknown {
+	return query?.requestType;
+}

frontend/src/container/Integrations/CloudIntegration/AgentSetupCommand/AgentSetupCommand.module.scss

@@ -10,10 +10,6 @@
 	gap: var(--spacing-3);
 }
 
-.mono {
-	composes: mono from '../shared.module.scss';
-}
-
 // CodeBlock renders the copy button's wrapper first and the highlighted code last;
 // the code theme sets the block's margin and padding inline, hence !important.
 .command {

frontend/src/container/Integrations/CloudIntegration/AgentSetupCommand/AgentSetupCommand.tsx

@@ -1,27 +1,28 @@
+import { ReactNode } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import CodeBlock from 'components/CodeBlock/CodeBlock';
 
 import styles from './AgentSetupCommand.module.scss';
 
 interface AgentSetupCommandProps {
-	deploymentProjectId: string;
+	description: ReactNode;
 	command: string;
+	testId: string;
 }
 
 function AgentSetupCommand({
-	deploymentProjectId,
+	description,
 	command,
+	testId,
 }: AgentSetupCommandProps): JSX.Element {
 	return (
-		<div className={styles.commands} data-testid="gcp-agent-command">
+		<div className={styles.commands} data-testid={testId}>
 			<div className={styles.commandsHead}>
 				<Typography.Text weight="bold" size="base">
 					Deploy the SigNoz agent
 				</Typography.Text>
 				<Typography.Text as="p" size="small" color="muted">
-					Run this command in Google Cloud Shell, or in a terminal where gcloud is
-					signed in to <span className={styles.mono}>{deploymentProjectId}</span>. It
-					contains your SigNoz keys, so do not share it.
+					{description}
 				</Typography.Text>
 			</div>
 			<CodeBlock language="bash" code={command} className={styles.command} />

frontend/src/container/Integrations/CloudIntegration/AlertMessage.tsx

@@ -15,14 +15,7 @@ function AlertMessage({
 				<Callout
 					title={
 						<div className="cloud-account-setup-form__alert-message">
-							<Spin
-								indicator={
-									<LoaderCircle
-										size={14}
-										className="anticon anticon-loading anticon-spin ant-spin-dot"
-									/>
-								}
-							/>
+							<Spin indicator={<LoaderCircle size={14} className="animate-spin" />} />
 							Waiting for connection, retrying in{' '}
 							<span className="retry-time">10</span> secs...
 						</div>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss

@@ -12,6 +12,13 @@
 		overflow: hidden;
 	}
 
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+	}
+
 	&__content {
 		flex: 1;
 		overflow-y: auto;
@@ -144,52 +151,6 @@
 		}
 	}
 
-	.cloud-account-setup-form__code-block-tabs {
-		padding: 8px;
-		border-radius: 4px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-
-		&-header {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-
-			margin-bottom: 12px;
-
-			&-title {
-				color: var(--l1-foreground);
-				font-size: 14px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-
-			&-description {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-		}
-
-		[role='tablist'] {
-			gap: 8px !important;
-		}
-
-		[role='tabpanel'] {
-			padding: 0 !important;
-		}
-
-		[data-slot='tabs-item'] {
-			padding: 4px 24px !important;
-			border: none !important;
-			background-color: transparent !important;
-			font-size: 12px !important;
-		}
-	}
-
 	@keyframes cloud-account-setup-accordion-reveal {
 		from {
 			opacity: 0;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
-import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
-import { SquareArrowOutUpRight } from '@signozhq/icons';
 
 import {
 	ActiveViewEnum,
 	IntegrationModalProps,
 	ModalStateEnum,
 } from '../../../HeroSection/types';
+import CloseSetupConfirm from '../../CloseSetupConfirm/CloseSetupConfirm';
+import { useCloseSetupConfirm } from '../../CloseSetupConfirm/useCloseSetupConfirm';
 import { RegionForm } from '../RegionForm/RegionForm';
 
 import './CloudAccountSetupModal.style.scss';
@@ -24,22 +24,24 @@ function CloudAccountSetupModal({
 		activeView,
 		selectedRegions,
 		includeAllRegions,
-		isGeneratingUrl,
+		isGeneratingCommand,
+		connectionCommand,
 		setSelectedRegions,
 		setIncludeAllRegions,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
-		accountId,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
+		checkConnectionAgain,
 	} = useIntegrationModal({ onClose });
 
+	const { isConfirmOpen, setIsConfirmOpen, requestClose } = useCloseSetupConfirm(
+		{ shouldConfirm: Boolean(connectionCommand), onClose: handleClose },
+	);
+
 	const renderContent = useCallback(() => {
 		return (
 			<div className="cloud-account-setup-modal__content">
@@ -50,15 +52,12 @@ function CloudAccountSetupModal({
 					includeAllRegions={includeAllRegions}
 					onRegionSelect={handleRegionSelect}
 					onSubmit={handleSubmit}
-					accountId={accountId}
+					connectionCommand={connectionCommand}
 					handleRegionChange={handleRegionChange}
 					connectionParams={connectionParams}
 					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
-					onConnectionSuccess={handleConnectionSuccess}
-					onConnectionTimeout={handleConnectionTimeout}
-					onConnectionError={handleConnectionError}
 				/>
 			</div>
 		);
@@ -69,38 +68,50 @@ function CloudAccountSetupModal({
 		includeAllRegions,
 		handleRegionSelect,
 		handleSubmit,
-		accountId,
+		connectionCommand,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
 	]);
 
 	const footer = (
 		<div className="cloud-account-setup-modal__footer">
 			<Button
-				disabledTooltip={
-					selectedRegions.length === 0
-						? 'Select at least one region'
-						: 'Waiting for the account to connect'
-				}
 				size="md"
-				variant="solid"
-				color="primary"
-				prefix={<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />}
-				onClick={handleSubmit}
-				testId="aws-launch-cfn-btn"
-				disabled={
-					selectedRegions.length === 0 || modalState === ModalStateEnum.WAITING
-				}
-				loading={isLoading || isGeneratingUrl}
+				variant="outlined"
+				color="secondary"
+				onClick={requestClose}
+				testId="aws-cancel-btn"
 			>
-				Launch Cloud Formation Template
+				Cancel
 			</Button>
+			{!connectionCommand && (
+				<Button
+					disabledTooltip="Select at least one region"
+					size="md"
+					variant="solid"
+					color="primary"
+					onClick={handleSubmit}
+					disabled={selectedRegions.length === 0}
+					loading={isLoading || isGeneratingCommand}
+					testId="aws-generate-command-btn"
+				>
+					Generate Command
+				</Button>
+			)}
+			{modalState === ModalStateEnum.ERROR && connectionCommand && (
+				<Button
+					size="md"
+					variant="solid"
+					color="primary"
+					onClick={checkConnectionAgain}
+					testId="aws-check-connection-btn"
+				>
+					Check Again
+				</Button>
+			)}
 		</div>
 	);
 
@@ -113,22 +124,17 @@ function CloudAccountSetupModal({
 		const viewConfigs = {
 			[ActiveViewEnum.FORM]: {
 				title: 'Add AWS Account',
-				okText: (
-					<div className="cloud-account-setup-form__submit-button-content">
-						Launch Cloud Formation Template{' '}
-						<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
-					</div>
-				),
+				okText: 'Generate Command',
 				onOk: handleSubmit,
 				disabled:
-					isLoading || isGeneratingUrl || modalState === ModalStateEnum.WAITING,
+					isLoading || isGeneratingCommand || modalState === ModalStateEnum.WAITING,
 				cancelButtonProps: { style: { display: 'none' } },
 			},
 			[ActiveViewEnum.SELECT_REGIONS]: {
 				title: 'Which regions do you want to monitor?',
 				okText: `Confirm Selection (${getSelectedRegionsCount()})`,
 				onOk: (): void => setActiveView(ActiveViewEnum.FORM),
-				isLoading: isLoading || isGeneratingUrl,
+				isLoading: isLoading || isGeneratingCommand,
 				cancelButtonProps: { style: { display: 'block' } },
 				disabled: false,
 			},
@@ -140,7 +146,7 @@ function CloudAccountSetupModal({
 		handleSubmit,
 		getSelectedRegionsCount,
 		isLoading,
-		isGeneratingUrl,
+		isGeneratingCommand,
 		activeView,
 		setActiveView,
 	]);
@@ -149,23 +155,32 @@ function CloudAccountSetupModal({
 
 	const handleDrawerOpenChange = (open: boolean): void => {
 		if (!open) {
-			handleClose();
+			requestClose();
 		}
 	};
 
 	return (
-		<DrawerWrapper
-			open={true}
-			className="cloud-account-setup-modal"
-			onOpenChange={handleDrawerOpenChange}
-			direction="right"
-			showCloseButton
-			title={modalConfig.title}
-			width="wide"
-			footer={footer}
-		>
-			{renderContent()}
-		</DrawerWrapper>
+		<>
+			<DrawerWrapper
+				open={true}
+				className="cloud-account-setup-modal"
+				onOpenChange={handleDrawerOpenChange}
+				direction="right"
+				showCloseButton
+				title={modalConfig.title}
+				width="wide"
+				footer={footer}
+			>
+				{renderContent()}
+			</DrawerWrapper>
+			<CloseSetupConfirm
+				providerName="AWS"
+				testIdPrefix="aws"
+				open={isConfirmOpen}
+				onOpenChange={setIsConfirmOpen}
+				onConfirm={handleClose}
+			/>
+		</>
 	);
 }
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/IntegrateNowFormSections.tsx

@@ -11,11 +11,9 @@ import { RegionSelector } from './RegionForm/RegionSelector';
 function RegionDeploymentSection({
 	regions,
 	handleRegionChange,
-	isFormDisabled,
 }: {
 	regions: Region[];
 	handleRegionChange: (value: string) => void;
-	isFormDisabled: boolean;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -36,7 +34,6 @@ function RegionDeploymentSection({
 					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 					className="cloud-account-setup-form__select integrations-select"
 					onChange={handleRegionChange}
-					disabled={isFormDisabled}
 					getPopupContainer={popupContainer}
 				>
 					{regions.flatMap((region) =>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RegionForm.tsx

@@ -1,14 +1,8 @@
-import { useRef } from 'react';
 import { Form } from 'antd';
-import { useGetAccount } from 'api/generated/services/cloudintegration';
-import cx from 'classnames';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import {
-	ModalStateEnum,
-	RegionFormProps,
-} from 'container/Integrations/HeroSection/types';
+import { RegionFormProps } from 'container/Integrations/HeroSection/types';
 import { regions } from 'utils/regions';
 
+import AgentSetupCommand from '../../AgentSetupCommand/AgentSetupCommand';
 import AlertMessage from '../../AlertMessage';
 import {
 	ComplianceNote,
@@ -22,56 +16,13 @@ export function RegionForm({
 	modalState,
 	selectedRegions,
 	onSubmit,
-	accountId,
+	connectionCommand,
 	handleRegionChange,
 	connectionParams,
 	isConnectionParamsLoading,
 	setSelectedRegions,
 	setIncludeAllRegions,
-	onConnectionSuccess,
-	onConnectionTimeout,
-	onConnectionError,
 }: RegionFormProps): JSX.Element {
-	const startTimeRef = useRef(Date.now());
-	const refetchInterval = 10 * 1000;
-	const errorTimeout = 10 * 60 * 1000;
-
-	const { isLoading: isAccountStatusLoading } = useGetAccount(
-		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
-			id: accountId ?? '',
-		},
-		{
-			query: {
-				refetchInterval,
-				enabled: !!accountId && modalState === ModalStateEnum.WAITING,
-				onSuccess: (response) => {
-					const isConnected =
-						Boolean(response.data.providerAccountId) &&
-						response.data.removedAt === null;
-
-					if (isConnected) {
-						const cloudAccountId =
-							response.data.providerAccountId ?? response.data.id;
-
-						onConnectionSuccess({
-							cloudAccountId,
-							status: response.data.agentReport,
-						});
-					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-						onConnectionTimeout({ id: accountId });
-					}
-				},
-				onError: () => {
-					onConnectionError();
-				},
-			},
-		},
-	);
-
-	const isFormDisabled =
-		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
-
 	return (
 		<Form
 			form={form}
@@ -79,28 +30,30 @@ export function RegionForm({
 			layout="vertical"
 			onFinish={onSubmit}
 		>
-			<div
-				className={cx(`cloud-account-setup-form__content`, {
-					disabled: isFormDisabled,
-				})}
-			>
-				<RegionDeploymentSection
-					regions={regions}
-					handleRegionChange={handleRegionChange}
-					isFormDisabled={isFormDisabled}
+			{connectionCommand ? (
+				<AgentSetupCommand
+					description="Run this command in AWS CloudShell, or in a terminal where the AWS CLI is signed in to the account you want to monitor. It contains your SigNoz keys, so do not share it."
+					command={connectionCommand}
+					testId="aws-agent-command"
 				/>
-				<MonitoringRegionsSection
-					selectedRegions={selectedRegions}
-					setSelectedRegions={setSelectedRegions}
-					setIncludeAllRegions={setIncludeAllRegions}
-				/>
-				<ComplianceNote />
-				<RenderConnectionFields
-					isConnectionParamsLoading={isConnectionParamsLoading}
-					connectionParams={connectionParams}
-					isFormDisabled={isFormDisabled}
-				/>
-			</div>
+			) : (
+				<div className="cloud-account-setup-form__content">
+					<RegionDeploymentSection
+						regions={regions}
+						handleRegionChange={handleRegionChange}
+					/>
+					<MonitoringRegionsSection
+						selectedRegions={selectedRegions}
+						setSelectedRegions={setSelectedRegions}
+						setIncludeAllRegions={setIncludeAllRegions}
+					/>
+					<ComplianceNote />
+					<RenderConnectionFields
+						isConnectionParamsLoading={isConnectionParamsLoading}
+						connectionParams={connectionParams}
+					/>
+				</div>
+			)}
 
 			<div className="cloud-account-setup-form__alert">
 				<AlertMessage modalState={modalState} />

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -5,11 +5,9 @@ import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigN
 function RenderConnectionFields({
 	isConnectionParamsLoading,
 	connectionParams,
-	isFormDisabled,
 }: {
 	isConnectionParamsLoading?: boolean;
 	connectionParams?: CloudintegrationtypesCredentialsDTO | null;
-	isFormDisabled?: boolean;
 }): JSX.Element | null {
 	if (
 		isConnectionParamsLoading ||
@@ -29,7 +27,7 @@ function RenderConnectionFields({
 					label="Ingestion URL"
 					rules={[{ required: true, message: 'Please enter ingestion URL' }]}
 				>
-					<Input placeholder="Enter ingestion URL" disabled={isFormDisabled} />
+					<Input placeholder="Enter ingestion URL" />
 				</Form.Item>
 			)}
 			{!connectionParams?.ingestionKey && (
@@ -38,7 +36,7 @@ function RenderConnectionFields({
 					label="Ingestion Key"
 					rules={[{ required: true, message: 'Please enter ingestion key' }]}
 				>
-					<Input placeholder="Enter ingestion key" disabled={isFormDisabled} />
+					<Input placeholder="Enter ingestion key" />
 				</Form.Item>
 			)}
 			{!connectionParams?.sigNozApiUrl && (
@@ -47,7 +45,7 @@ function RenderConnectionFields({
 					label="SigNoz API URL"
 					rules={[{ required: true, message: 'Please enter SigNoz API URL' }]}
 				>
-					<Input placeholder="Enter SigNoz API URL" disabled={isFormDisabled} />
+					<Input placeholder="Enter SigNoz API URL" />
 				</Form.Item>
 			)}
 			{!connectionParams?.sigNozApiKey && (
@@ -56,7 +54,7 @@ function RenderConnectionFields({
 					label="SigNoz API KEY"
 					rules={[{ required: true, message: 'Please enter SigNoz API Key' }]}
 				>
-					<Input placeholder="Enter SigNoz API Key" disabled={isFormDisabled} />
+					<Input placeholder="Enter SigNoz API Key" />
 				</Form.Item>
 			)}
 		</Form.Item>
@@ -65,7 +63,6 @@ function RenderConnectionFields({
 
 RenderConnectionFields.defaultProps = {
 	connectionParams: null,
-	isFormDisabled: false,
 	isConnectionParamsLoading: false,
 };
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/CloudAccountSetupModal.test.tsx

@@ -0,0 +1,168 @@
+import { ComponentProps } from 'react';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { rest, server } from 'mocks-server/server';
+import { RestRequest } from 'msw';
+import type logEvent from '../../../../../api/common/logEvent';
+
+import CloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
+
+// `useIntegrationModal` imports logEvent by relative path, which the
+// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
+// not intercept, so mock the resolved module directly.
+jest.mock('../../../../../api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn() as jest.MockedFunction<typeof logEvent>,
+}));
+
+// The form flow drives antd selects and typing, which outruns the 5s default on CI.
+jest.setTimeout(15_000);
+
+type OnClose = ComponentProps<typeof CloudAccountSetupModal>['onClose'];
+
+const mockOnClose = (): jest.MockedFunction<OnClose> =>
+	jest.fn() as jest.MockedFunction<OnClose>;
+
+const AWS_CREDENTIALS_URL =
+	'http://localhost/api/v1/cloud_integrations/aws/credentials';
+const AWS_ACCOUNTS_URL =
+	'http://localhost/api/v1/cloud_integrations/aws/accounts';
+const ACCOUNT_ID = 'ci-aws-1234';
+
+const credentials = {
+	sigNozApiUrl: 'https://signoz.example.com',
+	sigNozApiKey: 'signoz-api-key',
+	ingestionUrl: 'https://ingest.example.com',
+	ingestionKey: 'ingestion-key',
+};
+
+const cliCommand = `curl -fsSL 'https://signoz.io/foundry.sh' | bash -s -- cloudintegration aws cloudformation --region 'us-east-1'`;
+
+const mockApi = ({ failFirstPoll = false } = {}): {
+	createAccountPayload: unknown;
+	pollCount: () => number;
+} => {
+	let polls = 0;
+	const api = {
+		createAccountPayload: null as unknown,
+		pollCount: (): number => polls,
+	};
+
+	server.use(
+		rest.get(AWS_CREDENTIALS_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: credentials })),
+		),
+		rest.post(AWS_ACCOUNTS_URL, async (req: RestRequest, res, ctx) => {
+			api.createAccountPayload = await req.json();
+			return res(
+				ctx.status(201),
+				ctx.json({
+					status: 'success',
+					data: { id: ACCOUNT_ID, connectionArtifact: { aws: { cliCommand } } },
+				}),
+			);
+		}),
+		rest.get(`${AWS_ACCOUNTS_URL}/${ACCOUNT_ID}`, (_req, res, ctx) => {
+			polls += 1;
+			if (failFirstPoll && polls === 1) {
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						id: ACCOUNT_ID,
+						providerAccountId: null,
+						agentReport: null,
+						removedAt: null,
+					},
+				}),
+			);
+		}),
+	);
+
+	return api;
+};
+
+describe('AWS CloudAccountSetupModal', () => {
+	it('creates the account and shows its setup command', async () => {
+		const api = mockApi();
+		const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
+		const user = userEvent.setup();
+		const onClose = mockOnClose();
+
+		render(<CloudAccountSetupModal onClose={onClose} />);
+
+		await user.click(await screen.findByRole('combobox'));
+		await user.click(await screen.findByText('US East (N. Virginia)'));
+		await user.click(await screen.findByRole('checkbox', { name: /us-east-1/i }));
+		await user.click(screen.getByTestId('aws-generate-command-btn'));
+
+		await waitFor(() => {
+			expect(screen.getByTestId('aws-agent-command')).toHaveTextContent(
+				cliCommand,
+			);
+		});
+
+		expect(api.createAccountPayload).toStrictEqual({
+			config: { aws: { deploymentRegion: 'us-east-1', regions: ['us-east-1'] } },
+			credentials,
+		});
+		expect(
+			screen.queryByTestId('aws-generate-command-btn'),
+		).not.toBeInTheDocument();
+		expect(screen.queryAllByRole('combobox')).toHaveLength(0);
+		expect(screen.getByText(/waiting for connection/i)).toBeInTheDocument();
+		expect(openSpy).not.toHaveBeenCalled();
+
+		openSpy.mockRestore();
+
+		await user.click(screen.getByTestId('aws-cancel-btn'));
+		await user.click(await screen.findByTestId('aws-continue-setup-btn'));
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('aws-continue-setup-btn'),
+			).not.toBeInTheDocument();
+		});
+		expect(onClose).not.toHaveBeenCalled();
+
+		await user.click(screen.getByTestId('aws-cancel-btn'));
+		await user.click(await screen.findByTestId('aws-close-setup-btn'));
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it('closes without asking before a setup command exists', async () => {
+		mockApi();
+		const user = userEvent.setup();
+		const onClose = mockOnClose();
+
+		render(<CloudAccountSetupModal onClose={onClose} />);
+
+		await user.click(await screen.findByTestId('aws-cancel-btn'));
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+		expect(screen.queryByTestId('aws-close-setup-btn')).not.toBeInTheDocument();
+	});
+
+	it('resumes polling with Check Again after the connection check fails', async () => {
+		const api = mockApi({ failFirstPoll: true });
+		const user = userEvent.setup();
+
+		render(<CloudAccountSetupModal onClose={mockOnClose()} />);
+
+		await user.click(await screen.findByRole('combobox'));
+		await user.click(await screen.findByText('US East (N. Virginia)'));
+		await user.click(await screen.findByRole('checkbox', { name: /us-east-1/i }));
+		await user.click(screen.getByTestId('aws-generate-command-btn'));
+
+		await user.click(await screen.findByTestId('aws-check-connection-btn'));
+
+		await waitFor(() => expect(api.pollCount()).toBe(2));
+
+		await screen.findByText(/waiting for connection/i);
+		expect(
+			screen.queryByTestId('aws-check-connection-btn'),
+		).not.toBeInTheDocument();
+		expect(screen.getByTestId('aws-agent-command')).toHaveTextContent(cliCommand);
+	});
+});

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -1,23 +1,10 @@
-import { useCallback, useRef, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import {
-	ChevronDown,
-	ChevronRight,
-	LoaderCircle,
-	SquareArrowOutUpRight,
-} from '@signozhq/icons';
+import { useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight, LoaderCircle } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Tabs } from '@signozhq/ui/tabs';
 import { Form, Select, Spin } from 'antd';
-import { useGetAccount } from 'api/generated/services/cloudintegration';
-import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
-import CodeBlock from 'components/CodeBlock/CodeBlock';
-import {
-	AZURE_REGIONS,
-	INTEGRATION_TYPES,
-} from 'container/Integrations/constants';
+import { AZURE_REGIONS } from 'container/Integrations/constants';
 import {
 	IntegrationModalProps,
 	ModalStateEnum,
@@ -25,15 +12,13 @@ import {
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { useIntegrationModal } from '../../../../../hooks/integration/azure/useIntegrationModal';
+import AgentSetupCommand from '../../AgentSetupCommand/AgentSetupCommand';
+import CloseSetupConfirm from '../../CloseSetupConfirm/CloseSetupConfirm';
+import { useCloseSetupConfirm } from '../../CloseSetupConfirm/useCloseSetupConfirm';
 import RenderConnectionFields from '../../AmazonWebServices/RegionForm/RenderConnectionParams';
 
 import '../../AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss';
 
-const AZURE_CLI_DESC =
-	'Paste the following command if you have Azure CLI setup locally on your machine or use BASH CloudShell on Azure portal with above mentioned permissions.';
-const AZURE_POWERSHELL_DESC =
-	'Paste the following command in PowerShell CloudShell on Azure portal, you can switch to PowerShell on Azure portal.';
-
 function CloudAccountSetupModal({
 	onClose,
 }: IntegrationModalProps): JSX.Element {
@@ -41,53 +26,19 @@ function CloudAccountSetupModal({
 		form,
 		modalState,
 		isLoading,
-		accountId,
-		connectionCommands,
+		connectionCommand,
 		handleSubmit,
 		handleClose,
 		connectionParams,
 		isConnectionParamsLoading,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
+		checkConnectionAgain,
 	} = useIntegrationModal({ onClose });
 
-	const startTimeRef = useRef(Date.now());
-	const refetchInterval = 10 * 1000;
-	const errorTimeout = 10 * 60 * 1000;
+	const { isConfirmOpen, setIsConfirmOpen, requestClose } = useCloseSetupConfirm(
+		{ shouldConfirm: Boolean(connectionCommand), onClose: handleClose },
+	);
 
 	const [isHowItWorksOpen, setIsHowItWorksOpen] = useState(true);
-	const [activeTab, setActiveTab] = useState('cli');
-
-	useGetAccount(
-		{
-			cloudProvider: INTEGRATION_TYPES.AZURE,
-			id: accountId ?? '',
-		},
-		{
-			query: {
-				enabled: Boolean(accountId) && modalState === ModalStateEnum.WAITING,
-				refetchInterval,
-				select: (response): CloudintegrationtypesAccountDTO => response.data,
-				onSuccess: (account) => {
-					const isConnected =
-						Boolean(account.providerAccountId) && account.removedAt === null;
-
-					if (isConnected) {
-						handleConnectionSuccess({
-							cloudAccountId: account.providerAccountId ?? account.id,
-							status: account.agentReport,
-						});
-					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-						handleConnectionTimeout({ id: accountId });
-					}
-				},
-				onError: () => {
-					handleConnectionError();
-				},
-			},
-		},
-	);
 
 	const renderAlert = useCallback((): JSX.Element | null => {
 		if (modalState === ModalStateEnum.WAITING) {
@@ -96,14 +47,7 @@ function CloudAccountSetupModal({
 					<Callout
 						title={
 							<div className="cloud-account-setup-form__alert-message">
-								<Spin
-									indicator={
-										<LoaderCircle
-											size={14}
-											className="anticon anticon-loading anticon-spin ant-spin-dot"
-										/>
-									}
-								/>
+								<Spin indicator={<LoaderCircle size={14} className="animate-spin" />} />
 								Waiting for Azure account connection, retrying in{' '}
 								<span className="retry-time">10</span> secs...
 							</div>
@@ -136,234 +80,233 @@ function CloudAccountSetupModal({
 
 	const footer = (
 		<div className="cloud-account-setup-modal__footer">
-			{modalState === ModalStateEnum.FORM && (
+			<Button
+				size="md"
+				variant="outlined"
+				color="secondary"
+				onClick={requestClose}
+				testId="azure-cancel-btn"
+			>
+				Cancel
+			</Button>
+			{!connectionCommand && (
 				<Button
 					size="md"
 					variant="solid"
 					color="primary"
-					prefix={<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />}
 					onClick={handleSubmit}
 					loading={isLoading}
+					testId="azure-generate-command-btn"
 				>
-					Generate Azure Setup Commands
+					Generate Command
+				</Button>
+			)}
+			{modalState === ModalStateEnum.ERROR && connectionCommand && (
+				<Button
+					size="md"
+					variant="solid"
+					color="primary"
+					onClick={checkConnectionAgain}
+					testId="azure-check-connection-btn"
+				>
+					Check Again
 				</Button>
 			)}
 		</div>
 	);
 
 	return (
-		<DrawerWrapper
-			open={true}
-			className="cloud-account-setup-modal"
-			onOpenChange={(open): void => {
-				if (!open) {
-					handleClose();
-				}
-			}}
-			direction="right"
-			showCloseButton
-			title="Add Azure Account"
-			width="wide"
-			footer={footer}
-		>
-			<div className="cloud-account-setup-modal__content">
-				<div className="cloud-account-setup-prerequisites">
-					<div className="cloud-account-setup-prerequisites__title">
-						Prerequisites
+		<>
+			<DrawerWrapper
+				open={true}
+				className="cloud-account-setup-modal"
+				onOpenChange={(open): void => {
+					if (!open) {
+						requestClose();
+					}
+				}}
+				direction="right"
+				showCloseButton
+				title="Add Azure Account"
+				width="wide"
+				footer={footer}
+			>
+				<div className="cloud-account-setup-modal__content">
+					<div className="cloud-account-setup-prerequisites">
+						<div className="cloud-account-setup-prerequisites__title">
+							Prerequisites
+						</div>
+
+						<ul className="cloud-account-setup-prerequisites__list">
+							<li className="cloud-account-setup-prerequisites__list-item">
+								<span className="cloud-account-setup-prerequisites__list-item-bullet">
+									—
+								</span>{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-text">
+									Ensure that you&apos;re logged in to the Azure workspace which you want
+									to monitor.
+								</span>
+							</li>
+							<li className="cloud-account-setup-prerequisites__list-item">
+								<span className="cloud-account-setup-prerequisites__list-item-bullet">
+									—
+								</span>{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-text">
+									Ensure that you either have the{' '}
+									<span className="cloud-account-setup-prerequisites__list-item-highlight">
+										Owner
+									</span>{' '}
+									role OR
+								</span>
+							</li>
+							<li className="cloud-account-setup-prerequisites__list-item">
+								<span className="cloud-account-setup-prerequisites__list-item-bullet">
+									—
+								</span>{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-text">
+									Both the{' '}
+									<span className="cloud-account-setup-prerequisites__list-item-highlight">
+										Contributor
+									</span>{' '}
+									and{' '}
+									<span className="cloud-account-setup-prerequisites__list-item-highlight">
+										user access admin
+									</span>{' '}
+									roles
+								</span>
+							</li>
+						</ul>
 					</div>
 
-					<ul className="cloud-account-setup-prerequisites__list">
-						<li className="cloud-account-setup-prerequisites__list-item">
-							<span className="cloud-account-setup-prerequisites__list-item-bullet">
-								—
-							</span>{' '}
-							<span className="cloud-account-setup-prerequisites__list-item-text">
-								Ensure that you&apos;re logged in to the Azure workspace which you want
-								to monitor.
-							</span>
-						</li>
-						<li className="cloud-account-setup-prerequisites__list-item">
-							<span className="cloud-account-setup-prerequisites__list-item-bullet">
-								—
-							</span>{' '}
-							<span className="cloud-account-setup-prerequisites__list-item-text">
-								Ensure that you either have the{' '}
-								<span className="cloud-account-setup-prerequisites__list-item-highlight">
-									Owner
-								</span>{' '}
-								role OR
-							</span>
-						</li>
-						<li className="cloud-account-setup-prerequisites__list-item">
-							<span className="cloud-account-setup-prerequisites__list-item-bullet">
-								—
-							</span>{' '}
-							<span className="cloud-account-setup-prerequisites__list-item-text">
-								Both the{' '}
-								<span className="cloud-account-setup-prerequisites__list-item-highlight">
-									Contributor
-								</span>{' '}
-								and{' '}
-								<span className="cloud-account-setup-prerequisites__list-item-highlight">
-									user access admin
-								</span>{' '}
-								roles
-							</span>
-						</li>
-					</ul>
-				</div>
-
-				<div className="cloud-account-setup-how-it-works-accordion">
-					<div
-						className={`cloud-account-setup-how-it-works-accordion__title ${
-							isHowItWorksOpen ? 'open' : ''
-						}`}
-					>
-						<Button
-							size="md"
-							variant="link"
-							color="secondary"
-							icon
-							aria-label="How it works"
-							onClick={(): void => setIsHowItWorksOpen(!isHowItWorksOpen)}
+					<div className="cloud-account-setup-how-it-works-accordion">
+						<div
+							className={`cloud-account-setup-how-it-works-accordion__title ${
+								isHowItWorksOpen ? 'open' : ''
+							}`}
 						>
-							{isHowItWorksOpen ? <ChevronDown /> : <ChevronRight />}
-						</Button>
-
-						<span className="cloud-account-setup-how-it-works-accordion__title-text">
-							How it works?
-						</span>
-					</div>
-					{isHowItWorksOpen && (
-						<div className="cloud-account-setup-how-it-works-accordion__description">
-							<div className="cloud-account-setup-how-it-works-accordion__description-item">
-								SigNoz will create new resource-group to manage the resources required
-								for this integration. The following steps will create a User-Assigned
-								Managed Identity with the necessary permissions and follows the
-								Principle of Least Privilege.
-							</div>
-							<div className="cloud-account-setup-how-it-works__description-item">
-								Once the Integration template is deployed, you can enable the services
-								you want to monitor right here in Signoz dashboard.
-							</div>
-						</div>
-					)}
-				</div>
-
-				<Form
-					form={form}
-					className="cloud-account-setup-form"
-					layout="vertical"
-					initialValues={{ resourceGroups: [] }}
-				>
-					<div className="cloud-account-setup-form__content">
-						<div className="cloud-account-setup-form__form-group">
-							<div className="cloud-account-setup-form__title">
-								Where should we deploy the SigNoz collector resources?
-							</div>
-							<div className="cloud-account-setup-form__description">
-								Choose the Azure region for deployment.
-							</div>
-							<Form.Item
-								name="region"
-								rules={[{ required: true, message: 'Please select a region' }]}
-								className="cloud-account-setup-form__form-item"
+							<Button
+								size="md"
+								variant="link"
+								color="secondary"
+								icon
+								aria-label="How it works"
+								onClick={(): void => setIsHowItWorksOpen(!isHowItWorksOpen)}
 							>
-								<Select
-									placeholder="e.g. East US"
-									options={AZURE_REGIONS.map((region) => ({
-										label: `${region.label} (${region.value})`,
-										value: region.value,
-									}))}
-									getPopupContainer={popupContainer}
-									disabled={modalState === ModalStateEnum.WAITING}
-								/>
-							</Form.Item>
+								{isHowItWorksOpen ? <ChevronDown /> : <ChevronRight />}
+							</Button>
+
+							<span className="cloud-account-setup-how-it-works-accordion__title-text">
+								How it works?
+							</span>
 						</div>
-
-						<div className="cloud-account-setup-form__form-group">
-							<div className="cloud-account-setup-form__title">
-								Which resource groups do you want to monitor?
-							</div>
-							<div className="cloud-account-setup-form__description">
-								Add one or more Azure resource group names.
-							</div>
-							<Form.Item
-								name="resourceGroups"
-								rules={[
-									{
-										required: true,
-										type: 'array',
-										min: 1,
-										message: 'Please add at least one resource group',
-									},
-								]}
-								className="cloud-account-setup-form__form-item"
-							>
-								<Select
-									mode="tags"
-									placeholder="e.g. prod-platform-rg"
-									tokenSeparators={[',']}
-									disabled={modalState === ModalStateEnum.WAITING}
-								/>
-							</Form.Item>
-						</div>
-
-						<RenderConnectionFields
-							isConnectionParamsLoading={isConnectionParamsLoading}
-							connectionParams={connectionParams}
-							isFormDisabled={modalState === ModalStateEnum.WAITING}
-						/>
-
-						{connectionCommands && (
-							<div className="cloud-account-setup-form__code-block-tabs-container">
-								<div className="cloud-account-setup-form__code-block-tabs-header">
-									<div className="cloud-account-setup-form__code-block-tabs-header-title">
-										Deploy Agent
-									</div>
-									<div className="cloud-account-setup-form__code-block-tabs-header-description">
-										{activeTab === 'cli' ? AZURE_CLI_DESC : AZURE_POWERSHELL_DESC}
-									</div>
+						{isHowItWorksOpen && (
+							<div className="cloud-account-setup-how-it-works-accordion__description">
+								<div className="cloud-account-setup-how-it-works-accordion__description-item">
+									SigNoz will create new resource-group to manage the resources required
+									for this integration. The following steps will create a User-Assigned
+									Managed Identity with the necessary permissions and follows the
+									Principle of Least Privilege.
+								</div>
+								<div className="cloud-account-setup-how-it-works__description-item">
+									Once the Integration template is deployed, you can enable the services
+									you want to monitor right here in Signoz dashboard.
 								</div>
-								<Tabs
-									orientation="horizontal"
-									alignment="start"
-									className="cloud-account-setup-form__code-block-tabs"
-									items={[
-										{
-											key: 'cli',
-											label: 'CLI',
-											children: <CodeBlock code={connectionCommands?.cliCommand || ''} />,
-										},
-										{
-											key: 'powershell',
-											label: 'PowerShell',
-											children: (
-												<CodeBlock
-													code={connectionCommands?.cloudPowerShellCommand || ''}
-												/>
-											),
-										},
-									]}
-									value={activeTab}
-									onChange={(key): void => setActiveTab(key)}
-									variant="primary"
-								/>
-							</div>
-						)}
-
-						{renderAlert()}
-
-						{modalState === ModalStateEnum.WAITING && (
-							<div className="cloud-account-setup-status-message">
-								After running the command, return here and wait for automatic connection
-								detection.
 							</div>
 						)}
 					</div>
-				</Form>
-			</div>
-		</DrawerWrapper>
+
+					<Form
+						form={form}
+						className="cloud-account-setup-form"
+						layout="vertical"
+						initialValues={{ resourceGroups: [] }}
+					>
+						<div className="cloud-account-setup-form__content">
+							{connectionCommand ? (
+								<AgentSetupCommand
+									description="Run this command in Azure Cloud Shell (Bash), or in a terminal where the Azure CLI is signed in to the subscription you want to monitor. It contains your SigNoz keys, so do not share it."
+									command={connectionCommand}
+									testId="azure-agent-command"
+								/>
+							) : (
+								<>
+									<div className="cloud-account-setup-form__form-group">
+										<div className="cloud-account-setup-form__title">
+											Where should we deploy the SigNoz collector resources?
+										</div>
+										<div className="cloud-account-setup-form__description">
+											Choose the Azure region for deployment.
+										</div>
+										<Form.Item
+											name="region"
+											rules={[{ required: true, message: 'Please select a region' }]}
+											className="cloud-account-setup-form__form-item"
+										>
+											<Select
+												placeholder="e.g. East US"
+												options={AZURE_REGIONS.map((region) => ({
+													label: `${region.label} (${region.value})`,
+													value: region.value,
+												}))}
+												getPopupContainer={popupContainer}
+											/>
+										</Form.Item>
+									</div>
+
+									<div className="cloud-account-setup-form__form-group">
+										<div className="cloud-account-setup-form__title">
+											Which resource groups do you want to monitor?
+										</div>
+										<div className="cloud-account-setup-form__description">
+											Add one or more Azure resource group names.
+										</div>
+										<Form.Item
+											name="resourceGroups"
+											rules={[
+												{
+													required: true,
+													type: 'array',
+													min: 1,
+													message: 'Please add at least one resource group',
+												},
+											]}
+											className="cloud-account-setup-form__form-item"
+										>
+											<Select
+												mode="tags"
+												placeholder="e.g. prod-platform-rg"
+												tokenSeparators={[',']}
+											/>
+										</Form.Item>
+									</div>
+
+									<RenderConnectionFields
+										isConnectionParamsLoading={isConnectionParamsLoading}
+										connectionParams={connectionParams}
+									/>
+								</>
+							)}
+
+							{renderAlert()}
+
+							{modalState === ModalStateEnum.WAITING && (
+								<div className="cloud-account-setup-status-message">
+									After running the command, return here and wait for automatic
+									connection detection.
+								</div>
+							)}
+						</div>
+					</Form>
+				</div>
+			</DrawerWrapper>
+			<CloseSetupConfirm
+				providerName="Azure"
+				testIdPrefix="azure"
+				open={isConfirmOpen}
+				onOpenChange={setIsConfirmOpen}
+				onConfirm={handleClose}
+			/>
+		</>
 	);
 }
 

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/__tests__/CloudAccountSetupModal.test.tsx

@@ -0,0 +1,175 @@
+import { ComponentProps } from 'react';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { rest, server } from 'mocks-server/server';
+import { RestRequest } from 'msw';
+import type logEvent from '../../../../../api/common/logEvent';
+
+import CloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
+
+// `useIntegrationModal` imports logEvent by relative path, which the
+// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
+// not intercept, so mock the resolved module directly.
+jest.mock('../../../../../api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn() as jest.MockedFunction<typeof logEvent>,
+}));
+
+// The form flow drives antd selects and typing, which outruns the 5s default on CI.
+jest.setTimeout(15_000);
+
+type OnClose = ComponentProps<typeof CloudAccountSetupModal>['onClose'];
+
+const mockOnClose = (): jest.MockedFunction<OnClose> =>
+	jest.fn() as jest.MockedFunction<OnClose>;
+
+const AZURE_CREDENTIALS_URL =
+	'http://localhost/api/v1/cloud_integrations/azure/credentials';
+const AZURE_ACCOUNTS_URL =
+	'http://localhost/api/v1/cloud_integrations/azure/accounts';
+const ACCOUNT_ID = 'ci-azure-1234';
+
+const credentials = {
+	sigNozApiUrl: 'https://signoz.example.com',
+	sigNozApiKey: 'signoz-api-key',
+	ingestionUrl: 'https://ingest.example.com',
+	ingestionKey: 'ingestion-key',
+};
+
+const cliCommand = `curl -fsSL 'https://signoz.io/foundry.sh' | bash -s -- cloudintegration azure bicep --region 'australiaeast'`;
+
+const mockApi = ({ failFirstPoll = false } = {}): {
+	createAccountPayload: unknown;
+	pollCount: () => number;
+} => {
+	let polls = 0;
+	const api = {
+		createAccountPayload: null as unknown,
+		pollCount: (): number => polls,
+	};
+
+	server.use(
+		rest.get(AZURE_CREDENTIALS_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: credentials })),
+		),
+		rest.post(AZURE_ACCOUNTS_URL, async (req: RestRequest, res, ctx) => {
+			api.createAccountPayload = await req.json();
+			return res(
+				ctx.status(201),
+				ctx.json({
+					status: 'success',
+					data: { id: ACCOUNT_ID, connectionArtifact: { azure: { cliCommand } } },
+				}),
+			);
+		}),
+		rest.get(`${AZURE_ACCOUNTS_URL}/${ACCOUNT_ID}`, (_req, res, ctx) => {
+			polls += 1;
+			if (failFirstPoll && polls === 1) {
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						id: ACCOUNT_ID,
+						providerAccountId: null,
+						agentReport: null,
+						removedAt: null,
+					},
+				}),
+			);
+		}),
+	);
+
+	return api;
+};
+
+describe('Azure CloudAccountSetupModal', () => {
+	it('creates the account and shows its setup command', async () => {
+		const api = mockApi();
+		const user = userEvent.setup();
+		const onClose = mockOnClose();
+
+		render(<CloudAccountSetupModal onClose={onClose} />);
+
+		const [region, resourceGroups] = await screen.findAllByRole('combobox');
+		await user.click(region);
+		await user.click(await screen.findByText('Australia East (australiaeast)'));
+		await user.type(resourceGroups, 'prod-platform-rg{Enter}');
+		await user.click(screen.getByTestId('azure-generate-command-btn'));
+
+		await waitFor(() => {
+			expect(screen.getByTestId('azure-agent-command')).toHaveTextContent(
+				cliCommand,
+			);
+		});
+
+		expect(api.createAccountPayload).toStrictEqual({
+			config: {
+				azure: {
+					deploymentRegion: 'australiaeast',
+					resourceGroups: ['prod-platform-rg'],
+				},
+			},
+			credentials,
+		});
+		expect(
+			screen.queryByTestId('azure-generate-command-btn'),
+		).not.toBeInTheDocument();
+		expect(screen.queryAllByRole('combobox')).toHaveLength(0);
+		expect(
+			screen.getByText(/waiting for azure account connection/i),
+		).toBeInTheDocument();
+
+		await user.click(screen.getByTestId('azure-cancel-btn'));
+		await user.click(await screen.findByTestId('azure-continue-setup-btn'));
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('azure-continue-setup-btn'),
+			).not.toBeInTheDocument();
+		});
+		expect(onClose).not.toHaveBeenCalled();
+
+		await user.click(screen.getByTestId('azure-cancel-btn'));
+		await user.click(await screen.findByTestId('azure-close-setup-btn'));
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it('closes without asking before a setup command exists', async () => {
+		mockApi();
+		const user = userEvent.setup();
+		const onClose = mockOnClose();
+
+		render(<CloudAccountSetupModal onClose={onClose} />);
+
+		await user.click(await screen.findByTestId('azure-cancel-btn'));
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+		expect(screen.queryByTestId('azure-close-setup-btn')).not.toBeInTheDocument();
+	});
+
+	it('resumes polling with Check Again after the connection check fails', async () => {
+		const api = mockApi({ failFirstPoll: true });
+		const user = userEvent.setup();
+
+		render(<CloudAccountSetupModal onClose={mockOnClose()} />);
+
+		const [region, resourceGroups] = await screen.findAllByRole('combobox');
+		await user.click(region);
+		await user.click(await screen.findByText('Australia East (australiaeast)'));
+		await user.type(resourceGroups, 'prod-platform-rg{Enter}');
+		await user.click(screen.getByTestId('azure-generate-command-btn'));
+
+		await user.click(await screen.findByTestId('azure-check-connection-btn'));
+
+		await waitFor(() => expect(api.pollCount()).toBe(2));
+
+		await screen.findByText(/waiting for azure account connection/i);
+		expect(
+			screen.queryByTestId('azure-check-connection-btn'),
+		).not.toBeInTheDocument();
+		expect(screen.getByTestId('azure-agent-command')).toHaveTextContent(
+			cliCommand,
+		);
+	});
+});

frontend/src/container/Integrations/CloudIntegration/CloseSetupConfirm/CloseSetupConfirm.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Typography } from '@signozhq/ui/typography';
+
+interface CloseSetupConfirmProps {
+	/** Provider name as shown in the title, e.g. `AWS`. */
+	providerName: string;
+	/** Prefix for the dialog's test ids, e.g. `aws`. */
+	testIdPrefix: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: () => void;
+}
+
+function CloseSetupConfirm({
+	providerName,
+	testIdPrefix,
+	open,
+	onOpenChange,
+	onConfirm,
+}: CloseSetupConfirmProps): JSX.Element {
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={onOpenChange}
+			title={`Close ${providerName} agent setup?`}
+			testId={`${testIdPrefix}-close-setup-confirm`}
+			footer={
+				<>
+					<Button
+						size="md"
+						variant="solid"
+						color="highlight-danger"
+						onClick={onConfirm}
+						testId={`${testIdPrefix}-close-setup-btn`}
+					>
+						Close Setup
+					</Button>
+					<Button
+						size="md"
+						variant="solid"
+						color="primary"
+						onClick={(): void => onOpenChange(false)}
+						testId={`${testIdPrefix}-continue-setup-btn`}
+					>
+						Continue Setup
+					</Button>
+				</>
+			}
+		>
+			<Typography>
+				The agent has not connected yet. If you close now, you will have to start
+				the installation process again with a new setup command.
+			</Typography>
+		</DialogWrapper>
+	);
+}
+
+export default CloseSetupConfirm;

frontend/src/container/Integrations/CloudIntegration/CloseSetupConfirm/useCloseSetupConfirm.ts

@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react';
+
+interface UseCloseSetupConfirmProps {
+	/** True once closing would lose a pending setup, i.e. a setup command exists. */
+	shouldConfirm: boolean;
+	onClose: () => void;
+}
+
+interface UseCloseSetupConfirm {
+	isConfirmOpen: boolean;
+	setIsConfirmOpen: (open: boolean) => void;
+	requestClose: () => void;
+}
+
+export function useCloseSetupConfirm({
+	shouldConfirm,
+	onClose,
+}: UseCloseSetupConfirmProps): UseCloseSetupConfirm {
+	const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+
+	const requestClose = useCallback((): void => {
+		if (shouldConfirm) {
+			setIsConfirmOpen(true);
+			return;
+		}
+		onClose();
+	}, [shouldConfirm, onClose]);
+
+	return { isConfirmOpen, setIsConfirmOpen, requestClose };
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/AgentSetup/AgentSetup.module.scss

@@ -3,3 +3,7 @@
 	align-items: center;
 	gap: var(--spacing-4);
 }
+
+.mono {
+	composes: mono from '../shared.module.scss';
+}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/AgentSetup/AgentSetup.tsx

@@ -6,6 +6,7 @@ import { ModalStateEnum } from 'container/Integrations/HeroSection/types';
 import { useAgentAccountSetup } from 'hooks/integration/gcp/useAgentAccountSetup';
 import { useForm } from 'react-hook-form';
 
+import AgentSetupCommand from 'container/Integrations/CloudIntegration/AgentSetupCommand/AgentSetupCommand';
 import ConnectionMethodSelector from '../ConnectionMethodSelector';
 import ConnectionSecretsFields from '../ConnectionSecretsFields';
 import { AGENT_SETUP_GUIDE, DEFAULT_SETUP_FORM_VALUES } from '../constants';
@@ -15,7 +16,6 @@ import SetupDrawerFooter from '../SetupDrawerFooter';
 import SetupGuideCallout from '../SetupGuideCallout';
 import { GcpSetupFormValues } from '../types';
 import { usePrefillCredentials } from '../usePrefillCredentials';
-import AgentSetupCommand from './AgentSetupCommand';
 
 import styles from './AgentSetup.module.scss';
 
@@ -67,8 +67,15 @@ function AgentSetup({
 			{connectionCommand ? (
 				<>
 					<AgentSetupCommand
-						deploymentProjectId={commandProjectId}
+						description={
+							<>
+								Run this command in Google Cloud Shell, or in a terminal where gcloud is
+								signed in to <span className={styles.mono}>{commandProjectId}</span>. It
+								contains your SigNoz keys, so do not share it.
+							</>
+						}
 						command={connectionCommand}
+						testId="gcp-agent-command"
 					/>
 					{modalState === ModalStateEnum.WAITING && (
 						<Callout

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer.tsx

@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
 import { CloudintegrationtypesGCPConnectionMethodDTO } from 'api/generated/services/sigNoz.schemas';
 import { IntegrationModalProps } from 'container/Integrations/HeroSection/types';
 
+import CloseSetupConfirm from '../../CloseSetupConfirm/CloseSetupConfirm';
+import { useCloseSetupConfirm } from '../../CloseSetupConfirm/useCloseSetupConfirm';
 import AgentSetup from './AgentSetup/AgentSetup';
 import ManualSetup from './ManualSetup/ManualSetup';
 import SetupDrawerLayout from './SetupDrawerLayout';
@@ -18,15 +17,9 @@ function CloudAccountSetupDrawer({
 		);
 	// Set once the agent command exists; closing after that loses the pending setup.
 	const [hasGeneratedCommand, setHasGeneratedCommand] = useState(false);
-	const [isCloseConfirmOpen, setIsCloseConfirmOpen] = useState(false);
-
-	const requestClose = (): void => {
-		if (hasGeneratedCommand) {
-			setIsCloseConfirmOpen(true);
-			return;
-		}
-		onClose();
-	};
+	const { isConfirmOpen, setIsConfirmOpen, requestClose } = useCloseSetupConfirm(
+		{ shouldConfirm: hasGeneratedCommand, onClose },
+	);
 
 	return (
 		<>
@@ -49,39 +42,13 @@ function CloudAccountSetupDrawer({
 					)
 				}
 			</SetupDrawerLayout>
-			<DialogWrapper
-				open={isCloseConfirmOpen}
-				onOpenChange={setIsCloseConfirmOpen}
-				title="Close GCP agent setup?"
-				testId="gcp-close-setup-confirm"
-				footer={
-					<>
-						<Button
-							size="md"
-							variant="solid"
-							color="highlight-danger"
-							onClick={onClose}
-							testId="gcp-close-setup-btn"
-						>
-							Close Setup
-						</Button>
-						<Button
-							size="md"
-							variant="solid"
-							color="primary"
-							onClick={(): void => setIsCloseConfirmOpen(false)}
-							testId="gcp-continue-setup-btn"
-						>
-							Continue Setup
-						</Button>
-					</>
-				}
-			>
-				<Typography>
-					The agent has not connected yet. If you close now, you will have to start
-					the installation process again with a new setup command.
-				</Typography>
-			</DialogWrapper>
+			<CloseSetupConfirm
+				providerName="GCP"
+				testIdPrefix="gcp"
+				open={isConfirmOpen}
+				onOpenChange={setIsConfirmOpen}
+				onConfirm={onClose}
+			/>
 		</>
 	);
 }

frontend/src/container/Integrations/HeroSection/types.ts

@@ -20,18 +20,12 @@ export interface RegionFormProps {
 	includeAllRegions: boolean;
 	onRegionSelect: () => void;
 	onSubmit: () => Promise<void>;
-	accountId?: string;
+	connectionCommand: string | null;
 	handleRegionChange: (value: string) => void;
 	connectionParams?: CloudintegrationtypesCredentialsDTO;
 	isConnectionParamsLoading?: boolean;
 	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
 	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
-	onConnectionSuccess: (payload: {
-		cloudAccountId: string;
-		status?: unknown;
-	}) => void;
-	onConnectionTimeout: (payload: { id?: string }) => void;
-	onConnectionError: () => void;
 }
 
 export interface IntegrationModalProps {

frontend/src/container/PlannedDowntime/PlannedDowntime.module.scss

@@ -121,13 +121,6 @@
 	font-size: 13px;
 }
 
-.badges {
-	display: flex;
-	gap: var(--spacing-2);
-	overflow: hidden;
-	white-space: nowrap;
-}
-
 .timeText {
 	display: inline-block;
 	white-space: nowrap;

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -5,6 +5,7 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { navigate } from 'lib/router/navigation';
 import { Plus, Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -53,6 +54,7 @@ export function PlannedDowntime(): JSX.Element {
 		data: alertsData,
 		isError,
 		isLoading,
+		isFetching: isFetchingAlerts,
 	} = useListRules({
 		query: { cacheTime: 0 },
 	});
@@ -60,6 +62,7 @@ export function PlannedDowntime(): JSX.Element {
 	const [form] = Form.useForm();
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
+	const location = useAppLocation();
 	const urlQuery = useUrlQuery();
 
 	const [initialValues, setInitialValues] =
@@ -83,20 +86,31 @@ export function PlannedDowntime(): JSX.Element {
 		}
 	}, [form, isOpen]);
 
-	const [searchValue, setSearchValue] = React.useState<string>(
-		urlQuery.get('search') || '',
-	);
+	const [searchValue, setSearchValue] = React.useState<string>(() => {
+		const searchFromUrlQuery = urlQuery.get('search');
+		if (searchFromUrlQuery) {
+			return searchFromUrlQuery;
+		}
+		const search =
+			(typeof window !== 'undefined' && window.location.search) ||
+			location.search ||
+			'';
+		return new URLSearchParams(search).get('search') || '';
+	});
 	const [deleteData, setDeleteData] = useState<{ id: string; name: string }>();
 	const [isEditMode, setEditMode] = useState<boolean>(false);
 
 	const updateUrlWithSearch = useDebouncedFn((value) => {
-		const searchValue = value as string;
-		if (searchValue) {
-			urlQuery.set('search', searchValue);
+		const nextSearch = value as string;
+		const search =
+			(typeof window !== 'undefined' && window.location.search) || location.search;
+		const params = new URLSearchParams(search);
+		if (nextSearch) {
+			params.set('search', nextSearch);
 		} else {
-			urlQuery.delete('search');
+			params.delete('search');
 		}
-		const url = `/alerts?${urlQuery.toString()}`;
+		const url = `/alerts?${params.toString()}`;
 		navigate(url, { replace: true });
 	}, 300);
 
@@ -127,9 +141,11 @@ export function PlannedDowntime(): JSX.Element {
 
 	const canEdit = user?.role !== USER_ROLES.VIEWER;
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const isAlertsLoading = isLoading || (!alertsData && isFetchingAlerts);
 	const columns = React.useMemo(
-		() => getPlannedDowntimeColumns(formatTimezoneAdjustedTimestamp),
-		[formatTimezoneAdjustedTimestamp],
+		() =>
+			getPlannedDowntimeColumns(formatTimezoneAdjustedTimestamp, isAlertsLoading),
+		[formatTimezoneAdjustedTimestamp, isAlertsLoading],
 	);
 
 	const handleCreate = useCallback((): void => {
@@ -204,7 +220,7 @@ export function PlannedDowntime(): JSX.Element {
 				<div className={styles.commandHeader}>
 					<div className={styles.headingBlock}>
 						<Typography.Title className={styles.title}>
-							Planned Downtime
+							All planned downtimes
 						</Typography.Title>
 						<span className={styles.countPill}>{totalDowntimes}</span>
 					</div>
@@ -226,7 +242,7 @@ export function PlannedDowntime(): JSX.Element {
 						disabledTooltip="You need edit permissions to create a planned downtime"
 						testId="planned-downtime-create"
 					>
-						New downtime
+						New Downtime
 					</Button>
 					<TextToolTip
 						text="More details on how to schedule planned downtime"

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -10,8 +10,7 @@ import {
 	AlertmanagertypesRepeatTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
-import { mockLocation } from 'container/RoutingPolicies/__tests__/testUtils';
-import { mockAppLocation } from 'tests/router-mocks';
+import { mockAppLocation, mockNavigate } from 'tests/router-mocks';
 import { render, userEvent } from 'tests/test-utils';
 import { USER_ROLES } from 'types/roles';
 
@@ -102,8 +101,6 @@ const mockDowntimeQueryResult: Partial<DowntimeQueryResult> = {
 
 let mockUrlQuery: URLSearchParams;
 
-mockAppLocation({ pathname: '/alerts' });
-
 jest.mock('hooks/useUrlQuery', () => ({
 	__esModule: true,
 	default: (): URLSearchParams => mockUrlQuery,
@@ -127,29 +124,44 @@ jest.mock('api/generated/services/downtimeschedules', () => ({
 		isLoading: false,
 	}),
 }));
+
+let mockRulesState: {
+	data?: { data: Array<{ id: number | string; alert: string }> };
+	isError: boolean;
+	isLoading: boolean;
+	isFetching: boolean;
+} = {
+	data: { data: [] },
+	isError: false,
+	isLoading: false,
+	isFetching: false,
+};
+
 jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): {
-		data: { data: [] };
-		isError: false;
-		isLoading: false;
-	} => ({
-		data: { data: [] },
-		isError: false,
-		isLoading: false,
-	}),
+	useListRules: (): typeof mockRulesState => mockRulesState,
 }));
 
 describe('PlannedDowntime Component', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockUrlQuery = new URLSearchParams();
-		mockLocation('/alerts');
+		mockAppLocation({
+			pathname: '/alerts',
+			search: '',
+		});
+		mockDowntimeQueryResult.data = MOCK_DOWNTIME_RESPONSE;
+		mockRulesState = {
+			data: { data: [] },
+			isError: false,
+			isLoading: false,
+			isFetching: false,
+		};
 	});
 
 	it('renders the header, search and create action', () => {
 		renderPage();
 
-		expect(screen.getByText('Planned Downtime')).toBeInTheDocument();
+		expect(screen.getByText('All planned downtimes')).toBeInTheDocument();
 		expect(screen.getByTestId(SEARCH_TEST_ID)).toBeInTheDocument();
 		expect(screen.getByTestId(CREATE_TEST_ID)).toHaveAttribute(
 			'aria-disabled',
@@ -193,14 +205,14 @@ describe('PlannedDowntime Component', () => {
 		expect(screen.getByText(MOCK_DOWNTIME_3_NAME)).toBeInTheDocument();
 	});
 
-	it('shows the key schedule details and hides secondary columns by default', async () => {
+	it('shows the key schedule details, timezone and duration, and hides secondary columns by default', async () => {
 		renderPage();
 
 		await screen.findByText(MOCK_DOWNTIME_1_NAME);
 		expect(screen.getByText(/\(Asia\/Kolkata\)$/)).toBeInTheDocument();
 		expect(screen.getByText('Weekly on Mon · 2h')).toBeInTheDocument();
-		expect(screen.queryByText('Asia/Kolkata')).not.toBeInTheDocument();
-		expect(screen.queryByText('2h')).not.toBeInTheDocument();
+		expect(screen.getAllByText('Asia/Kolkata').length).toBeGreaterThan(0);
+		expect(screen.getAllByText('2h').length).toBeGreaterThan(0);
 		expect(screen.queryByText('Database maintenance')).not.toBeInTheDocument();
 		expect(screen.queryByText('creator@signoz.io')).not.toBeInTheDocument();
 		expect(screen.queryByText('editor@signoz.io')).not.toBeInTheDocument();
@@ -219,7 +231,9 @@ describe('PlannedDowntime Component', () => {
 			'Downtime',
 			'Status',
 			'Schedule',
+			'Timezone',
 			'Repeats',
+			'Duration',
 			'Alerts Silenced',
 		]);
 	});
@@ -290,4 +304,116 @@ describe('PlannedDowntime Component', () => {
 		await screen.findByText(MOCK_DOWNTIME_1_NAME);
 		expect(screen.queryByTestId('downtime-actions-1')).not.toBeInTheDocument();
 	});
+
+	it('preserves existing query parameters such as sort and pagination when typing in search (Bug 54)', async () => {
+		jest.useFakeTimers();
+		mockAppLocation({
+			pathname: '/alerts',
+			search:
+				'?tab=Configuration&subTab=planned-downtime&orderBy=name&order=asc&page=2&limit=20',
+		});
+		const navigateSpy = mockNavigate();
+
+		renderPage();
+
+		fireEvent.change(screen.getByTestId(SEARCH_TEST_ID), {
+			target: { value: 'query' },
+		});
+
+		jest.advanceTimersByTime(350);
+
+		expect(navigateSpy).toHaveBeenCalled();
+		const callArg = navigateSpy.mock.calls[0][0];
+		expect(callArg).toContain('tab=Configuration');
+		expect(callArg).toContain('subTab=planned-downtime');
+		expect(callArg).toContain('orderBy=name');
+		expect(callArg).toContain('order=asc');
+		expect(callArg).toContain('page=2');
+		expect(callArg).toContain('limit=20');
+		expect(callArg).toContain('search=query');
+
+		jest.useRealTimers();
+	});
+
+	it('shows skeleton while alert rules are loading for scoped downtime (Bug 56)', async () => {
+		mockRulesState = {
+			data: undefined,
+			isError: false,
+			isLoading: true,
+			isFetching: true,
+		};
+		const scopedDowntime = createMockDowntime({
+			id: 'scoped-1',
+			name: 'Scoped Downtime Loading',
+			schedule: buildSchedule({ startTime: MOCK_DATE_1 }),
+			alertIds: ['rule-1'],
+		});
+		mockDowntimeQueryResult.data = {
+			data: [scopedDowntime],
+			status: 'success',
+		};
+
+		renderPage();
+
+		await screen.findByText('Scoped Downtime Loading');
+		expect(screen.getByTestId('alerts-silenced-skeleton')).toBeInTheDocument();
+		expect(screen.queryByText('All alert rules')).not.toBeInTheDocument();
+	});
+
+	it('shows "Unknown rule" when scoped rule IDs cannot be resolved (Bug 56)', async () => {
+		mockRulesState = {
+			data: { data: [] },
+			isError: false,
+			isLoading: false,
+			isFetching: false,
+		};
+		const scopedDowntime = createMockDowntime({
+			id: 'scoped-2',
+			name: 'Scoped Downtime Deleted Rule',
+			schedule: buildSchedule({ startTime: MOCK_DATE_1 }),
+			alertIds: ['deleted-rule-id'],
+		});
+		mockDowntimeQueryResult.data = {
+			data: [scopedDowntime],
+			status: 'success',
+		};
+
+		renderPage();
+
+		await screen.findByText('Scoped Downtime Deleted Rule');
+		expect(screen.getByText('Unknown rule')).toBeInTheDocument();
+		expect(screen.queryByText('All alert rules')).not.toBeInTheDocument();
+	});
+
+	it('shows resolved alert rule name when scoped rule ID exists', async () => {
+		mockRulesState = {
+			data: {
+				data: [
+					{
+						id: 'rule-42',
+						alert: 'Disk Space High',
+					} as any,
+				],
+			},
+			isError: false,
+			isLoading: false,
+			isFetching: false,
+		};
+		const scopedDowntime = createMockDowntime({
+			id: 'scoped-3',
+			name: 'Scoped Downtime Resolved',
+			schedule: buildSchedule({ startTime: MOCK_DATE_1 }),
+			alertIds: ['rule-42'],
+		});
+		mockDowntimeQueryResult.data = {
+			data: [scopedDowntime],
+			status: 'success',
+		};
+
+		renderPage();
+
+		await screen.findByText('Scoped Downtime Resolved');
+		expect(screen.getByText('Disk Space High')).toBeInTheDocument();
+		expect(screen.queryByText('All alert rules')).not.toBeInTheDocument();
+	});
 });

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

@@ -1,6 +1,8 @@
 import { Badge } from '@signozhq/ui/badge';
+import { Skeleton } from '@signozhq/ui/skeleton';
 import { AlertmanagertypesMaintenanceStatusDTO } from 'api/generated/services/sigNoz.schemas';
 import type { TableColumnDef } from 'components/TanStackTableView';
+import OverflowBadges from 'components/OverflowBadges/OverflowBadges';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { toRelativeTime } from 'pages/AlertList/NotificationChannels/utils/relativeTime';
@@ -31,8 +33,11 @@ const STATUS_BADGE: Record<
 	},
 };
 
+const COLUMN_WIDTH = { default: 'auto', min: '120px' };
+
 export function getPlannedDowntimeColumns(
 	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
+	isAlertsLoading?: boolean,
 ): TableColumnDef<DowntimeSchedulesTableData>[] {
 	const textCell = (value: string | undefined): JSX.Element => (
 		<TanStackTable.Text title={value || undefined}>
@@ -66,7 +71,7 @@ export function getPlannedDowntimeColumns(
 			id: 'name',
 			header: 'Downtime',
 			accessorKey: 'name',
-			width: { default: '100%', min: '200px' },
+			width: COLUMN_WIDTH,
 			enableSort: true,
 			enableResize: true,
 			enableRemove: false,
@@ -84,7 +89,7 @@ export function getPlannedDowntimeColumns(
 			id: 'status',
 			header: 'Status',
 			accessorKey: 'status',
-			width: { default: '110px', min: '100px' },
+			width: COLUMN_WIDTH,
 			enableSort: true,
 			enableResize: true,
 			enableMove: false,
@@ -103,7 +108,7 @@ export function getPlannedDowntimeColumns(
 			id: 'window',
 			header: 'Schedule',
 			accessorFn: (row) => row.schedule?.startTime,
-			width: { default: '340px', min: '220px' },
+			width: COLUMN_WIDTH,
 			enableSort: true,
 			enableResize: true,
 			enableMove: false,
@@ -113,8 +118,7 @@ export function getPlannedDowntimeColumns(
 			id: 'timezone',
 			header: 'Timezone',
 			accessorFn: (row) => row.schedule?.timezone,
-			width: { default: '130px', min: '110px' },
-			defaultVisibility: false,
+			width: COLUMN_WIDTH,
 			enableSort: false,
 			enableResize: true,
 			enableMove: false,
@@ -124,7 +128,7 @@ export function getPlannedDowntimeColumns(
 			id: 'repeats',
 			header: 'Repeats',
 			accessorFn: (row) => row.schedule?.recurrence?.repeatType,
-			width: { default: '180px', min: '120px' },
+			width: COLUMN_WIDTH,
 			enableSort: false,
 			enableResize: true,
 			enableMove: false,
@@ -134,8 +138,7 @@ export function getPlannedDowntimeColumns(
 			id: 'duration',
 			header: 'Duration',
 			accessorFn: (row) => row.schedule?.recurrence?.duration,
-			width: { default: '110px', min: '90px' },
-			defaultVisibility: false,
+			width: COLUMN_WIDTH,
 			enableSort: false,
 			enableResize: true,
 			enableMove: false,
@@ -146,42 +149,46 @@ export function getPlannedDowntimeColumns(
 			id: 'alertsSilenced',
 			header: 'Alerts Silenced',
 			accessorKey: 'alertIds',
-			width: { default: '200px', min: '140px' },
+			width: COLUMN_WIDTH,
 			enableSort: false,
 			enableResize: true,
 			enableMove: false,
-			cell: ({ row }): JSX.Element =>
-				row.alertOptions.length ? (
-					<div
-						className={styles.badges}
-						title={row.alertOptions
-							.flatMap((alert) =>
-								typeof alert.label === 'string' ? [alert.label] : [],
-							)
-							.join(', ')}
-					>
-						{row.alertOptions.map((alert) => (
-							<Badge
-								key={alert.value}
-								textTransform="none"
-								variant="solid"
-								color="secondary"
-							>
-								{alert.label}
-							</Badge>
-						))}
-					</div>
-				) : (
-					<Badge textTransform="none" variant="solid" color="secondary">
-						All alert rules
-					</Badge>
-				),
+			cell: ({ row }): JSX.Element => {
+				const hasScopedAlerts = Boolean(row.alertIds && row.alertIds.length > 0);
+				if (!hasScopedAlerts) {
+					return (
+						<Badge textTransform="none" variant="solid" color="secondary">
+							All alert rules
+						</Badge>
+					);
+				}
+
+				if (isAlertsLoading) {
+					return (
+						<Skeleton.Input
+							testId="alerts-silenced-skeleton"
+							active
+							size="small"
+							style={{ width: 100, height: 22 }}
+						/>
+					);
+				}
+
+				return (
+					<OverflowBadges
+						items={row.alertOptions.map((alert) => ({
+							key: String(alert.value),
+							label: alert.label,
+						}))}
+					/>
+				);
+			},
 		},
 		{
 			id: 'description',
 			header: 'Description',
 			accessorKey: 'description',
-			width: { default: '200px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: false,
 			enableResize: true,
@@ -192,7 +199,7 @@ export function getPlannedDowntimeColumns(
 			id: 'createdBy',
 			header: 'Created By',
 			accessorKey: 'createdBy',
-			width: { default: '180px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: false,
 			enableResize: true,
@@ -203,7 +210,7 @@ export function getPlannedDowntimeColumns(
 			id: 'createdAt',
 			header: 'Created At',
 			accessorKey: 'createdAt',
-			width: { default: '150px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: true,
 			enableResize: true,
@@ -214,7 +221,7 @@ export function getPlannedDowntimeColumns(
 			id: 'updatedBy',
 			header: 'Updated By',
 			accessorKey: 'updatedBy',
-			width: { default: '180px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: false,
 			enableResize: true,
@@ -225,7 +232,7 @@ export function getPlannedDowntimeColumns(
 			id: 'updatedAt',
 			header: 'Updated At',
 			accessorKey: 'updatedAt',
-			width: { default: '150px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: true,
 			enableResize: true,

frontend/src/container/PlannedDowntime/usePlannedDowntimeTable.ts

@@ -5,7 +5,6 @@ import type { SortState } from 'components/TanStackTableView/types';
 import { useCalculatedPageSize } from 'components/TanStackTableView/useCalculatedPageSize';
 import { useTableParams } from 'components/TanStackTableView/useTableParams';
 
-import { getAlertOptionsFromIds } from './PlannedDowntimeutils';
 import { DowntimeAlertOption, DowntimeSchedulesTableData } from './types';
 
 export const PLANNED_DOWNTIME_QUERY_PARAMS = {
@@ -72,16 +71,38 @@ function usePlannedDowntimeTable(
 
 	const filteredDowntimes = useMemo(() => {
 		const search = searchValue.toLowerCase();
+		const alertOptionsMap = new Map<string, DowntimeAlertOption>();
+		alertOptions.forEach((option) => {
+			if (option?.value != null) {
+				alertOptionsMap.set(String(option.value), option);
+			}
+		});
+
 		return downtimes
 			.filter(
 				(downtime) =>
 					downtime.name.toLowerCase().includes(search) ||
 					downtime.id === searchValue,
 			)
-			.map((downtime) => ({
-				...downtime,
-				alertOptions: getAlertOptionsFromIds(downtime.alertIds || [], alertOptions),
-			}));
+			.map((downtime) => {
+				const resolvedAlertOptions: DowntimeAlertOption[] = (
+					downtime.alertIds || []
+				).map((id) => {
+					const found = alertOptionsMap.get(String(id));
+					if (found) {
+						return found;
+					}
+					return {
+						label: 'Unknown rule',
+						value: id,
+					};
+				});
+
+				return {
+					...downtime,
+					alertOptions: resolvedAlertOptions,
+				};
+			});
 	}, [downtimes, alertOptions, searchValue]);
 
 	const pagedDowntimes = useMemo(() => {

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import BucketOptions from 'components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions';
+import { parseLimit, sanitizeLimit } from 'components/QueryBuilderV2/utils';
 import { LEGEND } from 'constants/global';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 // ** Hooks
@@ -171,7 +172,8 @@ export function Formula({
 								<InputWithLabel
 									label="Limit"
 									type="number"
-									onChange={(value): void => handleChangeLimit(Number(value))}
+									onChange={(value): void => handleChangeLimit(parseLimit(value))}
+									sanitize={sanitizeLimit}
 									initialValue={formula?.limit ?? undefined}
 									placeholder="Enter limit"
 								/>

frontend/src/container/RoutingPolicies/RoutingPolicies.module.scss

@@ -121,13 +121,6 @@
 	font-size: 13px;
 }
 
-.badges {
-	display: flex;
-	gap: var(--spacing-2);
-	overflow: hidden;
-	white-space: nowrap;
-}
-
 .timeText {
 	display: inline-block;
 	white-space: nowrap;

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -102,7 +102,7 @@ function RoutingPolicies(): JSX.Element {
 				<div className={styles.commandHeader}>
 					<div className={styles.headingBlock}>
 						<Typography.Title className={styles.title}>
-							Routing Policies
+							All routing policies
 						</Typography.Title>
 						<span className={styles.countPill}>{routingPoliciesData.length}</span>
 					</div>
@@ -124,7 +124,7 @@ function RoutingPolicies(): JSX.Element {
 						disabledTooltip="You need edit permissions to create a routing policy"
 						testId="routing-policies-create"
 					>
-						New routing policy
+						New Routing Policy
 					</Button>
 					<TextToolTip
 						text="More details on how to configure routing policies"

frontend/src/container/RoutingPolicies/__tests__/RoutingPolicies.test.tsx

@@ -50,7 +50,7 @@ describe('RoutingPolicies', () => {
 
 	it('should render components properly', () => {
 		render(<RoutingPolicies />);
-		expect(screen.getByText('Routing Policies')).toBeInTheDocument();
+		expect(screen.getByText('All routing policies')).toBeInTheDocument();
 		expect(screen.getByTestId(SEARCH_TEST_ID)).toBeInTheDocument();
 		expect(screen.getByTestId(CREATE_TEST_ID)).toBeInTheDocument();
 		expect(screen.getByTestId('routing-policy-list')).toBeInTheDocument();

frontend/src/container/RoutingPolicies/__tests__/RoutingPoliciesList.test.tsx

@@ -71,7 +71,7 @@ describe('RoutingPolicyList', () => {
 		const resizable = Array.from(document.querySelectorAll('th'))
 			.filter((th) => th.querySelector('[title="Drag to resize column"]'))
 			.map((th) => th.textContent?.trim());
-		expect(resizable).toStrictEqual(['Routing Policy', 'Expression', 'Channels']);
+		expect(resizable).toStrictEqual(['Routing Policy', 'Channels', 'Expression']);
 	});
 
 	it('opens the policy on row click', async () => {

frontend/src/container/RoutingPolicies/__tests__/useRoutingPolicies.test.tsx

@@ -202,6 +202,39 @@ describe('useRoutingPolicies', () => {
 		expect(callArg).toContain('search=test+search');
 	});
 
+	it('should preserve existing query parameters such as sort and pagination when updating search (Bug 54)', async () => {
+		const { result } = renderHookWithWrapper(
+			'/alerts?tab=Configuration&subTab=routing-policies',
+		);
+		// nuqs writes sort and pagination to the URL before the router location catches up
+		window.history.replaceState(
+			null,
+			'',
+			'/alerts?tab=Configuration&subTab=routing-policies&orderBy=name&order=asc&page=2&limit=20',
+		);
+
+		try {
+			act(() => {
+				result.current.setSearchTerm('policy');
+			});
+
+			await waitFor(() => {
+				expect(mockNavigate).toHaveBeenCalled();
+			});
+		} finally {
+			window.history.replaceState(null, '', '/');
+		}
+
+		const callArg = mockNavigate.mock.calls[0][0];
+		expect(callArg).toContain('tab=Configuration');
+		expect(callArg).toContain('subTab=routing-policies');
+		expect(callArg).toContain('orderBy=name');
+		expect(callArg).toContain('order=asc');
+		expect(callArg).toContain('page=2');
+		expect(callArg).toContain('limit=20');
+		expect(callArg).toContain('search=policy');
+	});
+
 	it('should remove search param from URL when search is cleared', async () => {
 		const { result } = renderHookWithWrapper('/alerts?search=existing');
 

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

@@ -1,5 +1,5 @@
-import { Badge } from '@signozhq/ui/badge';
 import type { TableColumnDef } from 'components/TanStackTableView';
+import OverflowBadges from 'components/OverflowBadges/OverflowBadges';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { toRelativeTime } from 'pages/AlertList/NotificationChannels/utils/relativeTime';
@@ -7,6 +7,8 @@ import { toRelativeTime } from 'pages/AlertList/NotificationChannels/utils/relat
 import styles from './RoutingPolicies.module.scss';
 import { RoutingPolicy } from './types';
 
+const COLUMN_WIDTH = { default: 'auto', min: '120px' };
+
 export function getRoutingPolicyColumns(
 	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
 ): TableColumnDef<RoutingPolicy>[] {
@@ -42,7 +44,7 @@ export function getRoutingPolicyColumns(
 			id: 'name',
 			header: 'Routing Policy',
 			accessorKey: 'name',
-			width: { default: '100%', min: '220px' },
+			width: COLUMN_WIDTH,
 			enableSort: true,
 			enableResize: true,
 			enableRemove: false,
@@ -56,11 +58,31 @@ export function getRoutingPolicyColumns(
 				</TanStackTable.Text>
 			),
 		},
+		{
+			id: 'channels',
+			header: 'Channels',
+			accessorKey: 'channels',
+			width: COLUMN_WIDTH,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element =>
+				row.channels?.length ? (
+					<OverflowBadges
+						items={row.channels.map((channel) => ({
+							key: channel,
+							label: channel,
+						}))}
+					/>
+				) : (
+					<TanStackTable.Text>-</TanStackTable.Text>
+				),
+		},
 		{
 			id: 'expression',
 			header: 'Expression',
 			accessorKey: 'expression',
-			width: { default: '260px', min: '160px' },
+			width: COLUMN_WIDTH,
 			enableSort: false,
 			enableResize: true,
 			enableMove: false,
@@ -70,37 +92,11 @@ export function getRoutingPolicyColumns(
 				</TanStackTable.Text>
 			),
 		},
-		{
-			id: 'channels',
-			header: 'Channels',
-			accessorKey: 'channels',
-			width: { default: '220px', min: '140px' },
-			enableSort: false,
-			enableResize: true,
-			enableMove: false,
-			cell: ({ row }): JSX.Element =>
-				row.channels?.length ? (
-					<div className={styles.badges} title={row.channels.join(', ')}>
-						{row.channels.map((channel) => (
-							<Badge
-								key={channel}
-								textTransform="none"
-								variant="solid"
-								color="secondary"
-							>
-								{channel}
-							</Badge>
-						))}
-					</div>
-				) : (
-					<TanStackTable.Text>-</TanStackTable.Text>
-				),
-		},
 		{
 			id: 'createdBy',
 			header: 'Created By',
 			accessorKey: 'createdBy',
-			width: { default: '180px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: false,
 			enableResize: true,
@@ -111,7 +107,7 @@ export function getRoutingPolicyColumns(
 			id: 'createdAt',
 			header: 'Created At',
 			accessorKey: 'createdAt',
-			width: { default: '150px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: true,
 			enableResize: true,
@@ -122,7 +118,7 @@ export function getRoutingPolicyColumns(
 			id: 'updatedBy',
 			header: 'Updated By',
 			accessorKey: 'updatedBy',
-			width: { default: '180px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: false,
 			enableResize: true,
@@ -133,7 +129,7 @@ export function getRoutingPolicyColumns(
 			id: 'updatedAt',
 			header: 'Updated At',
 			accessorKey: 'updatedAt',
-			width: { default: '150px', min: '120px' },
+			width: COLUMN_WIDTH,
 			defaultVisibility: false,
 			enableSort: true,
 			enableResize: true,

frontend/src/container/RoutingPolicies/useRoutingPolicies.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { navigate } from 'lib/router/navigation';
 import { toast } from '@signozhq/ui/sonner';
 import { GetRoutingPoliciesResponse } from 'api/routingPolicies/getRoutingPolicies';
@@ -30,9 +31,20 @@ import './styles.scss';
 function useRoutingPolicies(): UseRoutingPoliciesReturn {
 	const queryClient = useQueryClient();
 	const urlQuery = useUrlQuery();
+	const location = useAppLocation();
 
 	// Local state
-	const [searchTerm, setSearchTerm] = useState(urlQuery.get('search') || '');
+	const [searchTerm, setSearchTerm] = useState(() => {
+		const searchFromUrlQuery = urlQuery.get('search');
+		if (searchFromUrlQuery) {
+			return searchFromUrlQuery;
+		}
+		const search =
+			(typeof window !== 'undefined' && window.location.search) ||
+			location.search ||
+			'';
+		return new URLSearchParams(search).get('search') || '';
+	});
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 	const [policyDetailsModalState, setPolicyDetailsModalState] =
 		useState<PolicyDetailsModalState>({
@@ -44,12 +56,15 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 
 	const updateUrlWithSearch = useDebouncedFn((value) => {
 		const searchValue = value as string;
+		const search =
+			(typeof window !== 'undefined' && window.location.search) || location.search;
+		const params = new URLSearchParams(search);
 		if (searchValue) {
-			urlQuery.set('search', searchValue);
+			params.set('search', searchValue);
 		} else {
-			urlQuery.delete('search');
+			params.delete('search');
 		}
-		const url = `/alerts?${urlQuery.toString()}`;
+		const url = `/alerts?${params.toString()}`;
 		navigate(url, { replace: true });
 	}, 300);
 

frontend/src/hooks/__tests__/useDebouncedFunction.test.ts

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react';
+
+import useDebouncedFn from '../useDebouncedFunction';
+
+describe('useDebouncedFn', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('should debounce function execution', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() => useDebouncedFn(callback, 300));
+
+		result.current('first');
+		result.current('second');
+
+		expect(callback).not.toHaveBeenCalled();
+
+		jest.advanceTimersByTime(299);
+		expect(callback).not.toHaveBeenCalled();
+
+		jest.advanceTimersByTime(1);
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(callback).toHaveBeenCalledWith('second');
+	});
+
+	it('should cancel pending execution when unmounted (Bug 55)', () => {
+		const callback = jest.fn();
+		const { result, unmount } = renderHook(() => useDebouncedFn(callback, 300));
+
+		result.current('pending');
+		expect(callback).not.toHaveBeenCalled();
+
+		unmount();
+
+		jest.advanceTimersByTime(500);
+		expect(callback).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/integration/__tests__/useAgentConnectionPolling.test.tsx

@@ -22,6 +22,7 @@ const renderPolling = (): void => {
 	renderHook(
 		() =>
 			useAgentConnectionPolling({
+				cloudProvider: 'gcp',
 				accountId: ACCOUNT_ID,
 				enabled: true,
 				...callbacks,

frontend/src/hooks/integration/__tests__/useAgentConnectionPollingWindow.test.tsx

@@ -21,6 +21,7 @@ const renderPolling = (
 	const { rerender } = renderHook(
 		({ enabled }: { enabled: boolean }) =>
 			useAgentConnectionPolling({
+				cloudProvider: 'gcp',
 				accountId: ACCOUNT_ID,
 				enabled,
 				...callbacks,

frontend/src/hooks/integration/aws/useIntegrationModal.ts

@@ -14,9 +14,10 @@ import {
 	GetConnectionCredentialsQueryResult,
 	invalidateListAccounts,
 	useCreateAccount,
+	useGetConnectionCredentials,
 } from 'api/generated/services/cloudintegration';
-import { useGetConnectionCredentials } from 'api/generated/services/cloudintegration';
 import {
+	CloudintegrationtypesAccountDTO,
 	CloudintegrationtypesCredentialsDTO,
 	CloudintegrationtypesPostableAccountDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -29,6 +30,7 @@ import useAxiosError from 'hooks/useAxiosError';
 import { regions } from 'utils/regions';
 
 import logEvent from '../../../api/common/logEvent';
+import { useAgentConnectionPolling } from '../useAgentConnectionPolling';
 
 interface UseIntegrationModalProps {
 	onClose: () => void;
@@ -42,7 +44,8 @@ interface UseIntegrationModal {
 	activeView: ActiveViewEnum;
 	selectedRegions: string[];
 	includeAllRegions: boolean;
-	isGeneratingUrl: boolean;
+	isGeneratingCommand: boolean;
+	connectionCommand: string | null;
 	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
 	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
 	handleRegionSelect: () => void;
@@ -50,17 +53,11 @@ interface UseIntegrationModal {
 	handleClose: () => void;
 	setActiveView: (view: ActiveViewEnum) => void;
 	allRegions: string[];
-	accountId?: string;
 	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
 	connectionParams?: CloudintegrationtypesCredentialsDTO;
 	isConnectionParamsLoading: boolean;
-	handleConnectionSuccess: (payload: {
-		cloudAccountId: string;
-		status?: unknown;
-	}) => void;
-	handleConnectionTimeout: (payload: { id?: string }) => void;
-	handleConnectionError: () => void;
+	checkConnectionAgain: () => void;
 }
 
 export function useIntegrationModal({
@@ -73,6 +70,9 @@ export function useIntegrationModal({
 	);
 	const [isLoading, setIsLoading] = useState(false);
 	const [accountId, setAccountId] = useState<string | undefined>();
+	const [connectionCommand, setConnectionCommand] = useState<string | null>(
+		null,
+	);
 	const [activeView, setActiveView] = useState<ActiveViewEnum>(
 		ActiveViewEnum.FORM,
 	);
@@ -103,14 +103,15 @@ export function useIntegrationModal({
 		setSelectedRegions([]);
 		setIncludeAllRegions(false);
 		setModalState(ModalStateEnum.FORM);
+		setConnectionCommand(null);
 		onClose();
 	}, [onClose]);
 
 	const handleConnectionSuccess = useCallback(
-		(payload: { cloudAccountId: string; status?: unknown }): void => {
+		(account: CloudintegrationtypesAccountDTO): void => {
 			void logEvent('AWS Integration: Account connected', {
-				cloudAccountId: payload.cloudAccountId,
-				status: payload.status,
+				cloudAccountId: account.providerAccountId ?? account.id,
+				status: account.agentReport,
 			});
 			toast.success('AWS account connected successfully', {
 				position: 'bottom-right',
@@ -123,21 +124,32 @@ export function useIntegrationModal({
 		[handleClose, queryClient],
 	);
 
-	const handleConnectionTimeout = useCallback(
-		(payload: { id?: string }): void => {
-			setModalState(ModalStateEnum.ERROR);
-			void logEvent('AWS Integration: Account connection attempt timed out', {
-				id: payload.id,
-			});
-		},
-		[],
-	);
+	const handleConnectionTimeout = useCallback((): void => {
+		setModalState(ModalStateEnum.ERROR);
+		void logEvent('AWS Integration: Account connection attempt timed out', {
+			id: accountId,
+		});
+	}, [accountId]);
 
 	const handleConnectionError = useCallback((): void => {
 		setModalState(ModalStateEnum.ERROR);
 	}, []);
 
-	const { mutate: generateUrl, isLoading: isGeneratingUrl } = useCreateAccount();
+	const checkConnectionAgain = useCallback((): void => {
+		setModalState(ModalStateEnum.WAITING);
+	}, []);
+
+	useAgentConnectionPolling({
+		cloudProvider: INTEGRATION_TYPES.AWS,
+		accountId: accountId ?? '',
+		enabled: modalState === ModalStateEnum.WAITING && accountId !== undefined,
+		onConnected: handleConnectionSuccess,
+		onTimeout: handleConnectionTimeout,
+		onError: handleConnectionError,
+	});
+
+	const { mutate: createAccount, isLoading: isGeneratingCommand } =
+		useCreateAccount();
 
 	const handleError = useAxiosError();
 	const { data: connectionParams, isLoading: isConnectionParamsLoading } =
@@ -152,9 +164,9 @@ export function useIntegrationModal({
 			},
 		);
 
-	const handleGenerateUrl = useCallback(
+	const handleGenerateCommand = useCallback(
 		(payload: CloudintegrationtypesPostableAccountDTO): void => {
-			generateUrl(
+			createAccount(
 				{
 					pathParams: { cloudProvider: INTEGRATION_TYPES.AWS },
 					data: payload,
@@ -162,17 +174,19 @@ export function useIntegrationModal({
 				{
 					onSuccess: (response: CreateAccountMutationResult) => {
 						const accountId = response.data.id;
-						const connectionUrl =
-							response.data.connectionArtifact.aws?.connectionUrl ?? '';
+						const command = response.data.connectionArtifact.aws?.cliCommand;
+						if (!command) {
+							setModalState(ModalStateEnum.ERROR);
+							toast.error('Failed to generate the AWS setup command', {
+								position: 'bottom-right',
+							});
+							return;
+						}
 
-						void logEvent(
-							'AWS Integration: Account connection attempt redirected to AWS',
-							{
-								id: accountId,
-							},
-						);
-						// oxlint-disable-next-line signoz/no-raw-absolute-path -- connectionUrl is an external AWS console URL, not an internal path
-						window.open(connectionUrl, '_blank');
+						void logEvent('AWS Integration: Account connection command generated', {
+							id: accountId,
+						});
+						setConnectionCommand(command);
 						setModalState(ModalStateEnum.WAITING);
 						setAccountId(accountId);
 					},
@@ -185,7 +199,7 @@ export function useIntegrationModal({
 				},
 			);
 		},
-		[generateUrl],
+		[createAccount],
 	);
 
 	const handleSubmit = useCallback(async (): Promise<void> => {
@@ -208,13 +222,13 @@ export function useIntegrationModal({
 				},
 			};
 
-			handleGenerateUrl(payload);
+			handleGenerateCommand(payload);
 		} catch (error) {
 			console.error('Form submission failed:', error);
 		} finally {
 			setIsLoading(false);
 		}
-	}, [form, selectedRegions, handleGenerateUrl, connectionParams]);
+	}, [form, selectedRegions, handleGenerateCommand, connectionParams]);
 
 	return {
 		form,
@@ -223,7 +237,8 @@ export function useIntegrationModal({
 		activeView,
 		selectedRegions,
 		includeAllRegions,
-		isGeneratingUrl,
+		isGeneratingCommand,
+		connectionCommand,
 		setSelectedRegions,
 		setIncludeAllRegions,
 		handleRegionSelect,
@@ -231,7 +246,6 @@ export function useIntegrationModal({
 		handleClose,
 		setActiveView,
 		allRegions,
-		accountId,
 		setModalState,
 		selectedDeploymentRegion,
 		handleRegionChange,
@@ -239,8 +253,6 @@ export function useIntegrationModal({
 			| CloudintegrationtypesCredentialsDTO
 			| undefined,
 		isConnectionParamsLoading,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
+		checkConnectionAgain,
 	};
 }

frontend/src/hooks/integration/azure/useIntegrationModal.ts

@@ -10,6 +10,7 @@ import {
 	useGetConnectionCredentials,
 } from 'api/generated/services/cloudintegration';
 import {
+	CloudintegrationtypesAccountDTO,
 	CloudintegrationtypesCredentialsDTO,
 	CloudintegrationtypesPostableAccountDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -18,6 +19,7 @@ import { ModalStateEnum } from 'container/Integrations/HeroSection/types';
 import useAxiosError from 'hooks/useAxiosError';
 
 import logEvent from '../../../api/common/logEvent';
+import { useAgentConnectionPolling } from '../useAgentConnectionPolling';
 
 interface UseIntegrationModalProps {
 	onClose: () => void;
@@ -27,22 +29,13 @@ interface UseAzureIntegrationModal {
 	form: FormInstance;
 	modalState: ModalStateEnum;
 	isLoading: boolean;
-	accountId?: string;
-	connectionCommands: {
-		cliCommand: string;
-		cloudPowerShellCommand: string;
-	} | null;
+	connectionCommand: string | null;
 	setModalState: Dispatch<SetStateAction<ModalStateEnum>>;
 	handleSubmit: () => Promise<void>;
 	handleClose: () => void;
 	connectionParams?: CloudintegrationtypesCredentialsDTO;
 	isConnectionParamsLoading: boolean;
-	handleConnectionSuccess: (payload: {
-		cloudAccountId: string;
-		status?: unknown;
-	}) => void;
-	handleConnectionTimeout: (payload: { id?: string }) => void;
-	handleConnectionError: () => void;
+	checkConnectionAgain: () => void;
 }
 
 export function useIntegrationModal({
@@ -55,22 +48,21 @@ export function useIntegrationModal({
 	);
 	const [isLoading, setIsLoading] = useState(false);
 	const [accountId, setAccountId] = useState<string | undefined>(undefined);
-	const [connectionCommands, setConnectionCommands] = useState<{
-		cliCommand: string;
-		cloudPowerShellCommand: string;
-	} | null>(null);
+	const [connectionCommand, setConnectionCommand] = useState<string | null>(
+		null,
+	);
 
 	const handleClose = useCallback((): void => {
 		setModalState(ModalStateEnum.FORM);
-		setConnectionCommands(null);
+		setConnectionCommand(null);
 		onClose();
 	}, [onClose]);
 
 	const handleConnectionSuccess = useCallback(
-		(payload: { cloudAccountId: string; status?: unknown }): void => {
-			logEvent('Azure Integration: Account connected', {
-				cloudAccountId: payload.cloudAccountId,
-				status: payload.status,
+		(account: CloudintegrationtypesAccountDTO): void => {
+			void logEvent('Azure Integration: Account connected', {
+				cloudAccountId: account.providerAccountId ?? account.id,
+				status: account.agentReport,
 			});
 			toast.success('Azure account connected successfully', {
 				position: 'bottom-right',
@@ -83,20 +75,30 @@ export function useIntegrationModal({
 		[handleClose, queryClient],
 	);
 
-	const handleConnectionTimeout = useCallback(
-		(payload: { id?: string }): void => {
-			setModalState(ModalStateEnum.ERROR);
-			logEvent('Azure Integration: Account connection attempt timed out', {
-				id: payload.id,
-			});
-		},
-		[],
-	);
+	const handleConnectionTimeout = useCallback((): void => {
+		setModalState(ModalStateEnum.ERROR);
+		void logEvent('Azure Integration: Account connection attempt timed out', {
+			id: accountId,
+		});
+	}, [accountId]);
 
 	const handleConnectionError = useCallback((): void => {
 		setModalState(ModalStateEnum.ERROR);
 	}, []);
 
+	const checkConnectionAgain = useCallback((): void => {
+		setModalState(ModalStateEnum.WAITING);
+	}, []);
+
+	useAgentConnectionPolling({
+		cloudProvider: INTEGRATION_TYPES.AZURE,
+		accountId: accountId ?? '',
+		enabled: modalState === ModalStateEnum.WAITING && accountId !== undefined,
+		onConnected: handleConnectionSuccess,
+		onTimeout: handleConnectionTimeout,
+		onError: handleConnectionError,
+	});
+
 	const { mutate: createAccount } = useCreateAccount();
 	const handleError = useAxiosError();
 
@@ -140,16 +142,20 @@ export function useIntegrationModal({
 				{
 					onSuccess: (response: CreateAccountMutationResult) => {
 						const nextAccountId = response.data.id;
-						const artifact = response.data.connectionArtifact.azure;
+						const command = response.data.connectionArtifact.azure?.cliCommand;
+						if (!command) {
+							setModalState(ModalStateEnum.ERROR);
+							toast.error('Failed to generate the Azure setup command', {
+								position: 'bottom-right',
+							});
+							return;
+						}
 
-						logEvent('Azure Integration: Account connection commands generated', {
+						void logEvent('Azure Integration: Account connection command generated', {
 							id: nextAccountId,
 						});
 
-						setConnectionCommands({
-							cliCommand: artifact?.cliCommand || '',
-							cloudPowerShellCommand: artifact?.cloudPowerShellCommand || '',
-						});
+						setConnectionCommand(command);
 						setModalState(ModalStateEnum.WAITING);
 						setAccountId(nextAccountId);
 					},
@@ -172,8 +178,7 @@ export function useIntegrationModal({
 		form,
 		modalState,
 		isLoading,
-		accountId,
-		connectionCommands,
+		connectionCommand,
 		setModalState,
 		handleSubmit,
 		handleClose,
@@ -181,8 +186,6 @@ export function useIntegrationModal({
 			| CloudintegrationtypesCredentialsDTO
 			| undefined,
 		isConnectionParamsLoading,
-		handleConnectionSuccess,
-		handleConnectionTimeout,
-		handleConnectionError,
+		checkConnectionAgain,
 	};
 }

frontend/src/hooks/integration/gcp/useAgentAccountSetup.ts

@@ -5,10 +5,11 @@ import {
 	CloudintegrationtypesGCPConnectionMethodDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { GcpSetupFormValues } from 'container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/types';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import { ModalStateEnum } from 'container/Integrations/HeroSection/types';
 
 import logEvent from '../../../api/common/logEvent';
-import { useAgentConnectionPolling } from './useAgentConnectionPolling';
+import { useAgentConnectionPolling } from '../useAgentConnectionPolling';
 import { useGcpAccountSetup } from './useGcpAccountSetup';
 
 const GENERATE_COMMAND_ERROR = 'Failed to generate the GCP setup command';
@@ -116,6 +117,7 @@ export function useAgentAccountSetup({
 	}, []);
 
 	useAgentConnectionPolling({
+		cloudProvider: INTEGRATION_TYPES.GCP,
 		accountId: accountId ?? '',
 		enabled: modalState === ModalStateEnum.WAITING && accountId !== null,
 		onConnected: handleAgentConnected,

frontend/src/hooks/integration/useAgentConnectionPolling.ts

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
 import { useGetAccount } from 'api/generated/services/cloudintegration';
 import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 
 export const POLL_INTERVAL_MS = 10 * 1000;
 export const CONNECTION_TIMEOUT_MS = 10 * 60 * 1000;
 
 interface UseAgentConnectionPollingProps {
+	cloudProvider: string;
 	accountId: string;
 	/** Polls exactly while true; the caller decides when there is an account to poll. */
 	enabled: boolean;
@@ -16,10 +16,11 @@ interface UseAgentConnectionPollingProps {
 }
 
 /**
- * Polls a GCP agent account until the agent checks in. The timeout is measured
- * from when polling gets enabled, so re-enabling it starts a fresh window.
+ * Polls a cloud integration account until its agent checks in. The timeout is
+ * measured from when polling gets enabled, so re-enabling it starts a fresh window.
  */
 export function useAgentConnectionPolling({
+	cloudProvider,
 	accountId,
 	enabled,
 	onConnected,
@@ -33,7 +34,7 @@ export function useAgentConnectionPolling({
 	}, [enabled]);
 
 	useGetAccount(
-		{ cloudProvider: INTEGRATION_TYPES.GCP, id: accountId },
+		{ cloudProvider, id: accountId },
 		{
 			query: {
 				enabled,

frontend/src/hooks/useDebouncedFunction.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import debounce from 'lodash-es/debounce';
 
 export interface DebouncedFunc<T extends (...args: unknown[]) => unknown> {
@@ -28,10 +28,19 @@ const useDebouncedFn = <T extends (...args: Array<unknown>) => unknown>(
 	const fnRef = useRef(fn);
 	fnRef.current = fn;
 
-	return useMemo(
+	const debounced = useMemo(
 		() => debounce(((...args) => fnRef.current(...args)) as T, wait, options),
 		[options, wait],
 	);
+
+	useEffect(
+		() => (): void => {
+			debounced.cancel();
+		},
+		[debounced],
+	);
+
+	return debounced;
 };
 
 export default useDebouncedFn;

frontend/src/pages/AlertList/PlannedDowntime/stories/PlannedDowntime.stories.tsx

@@ -111,7 +111,7 @@ export const NewDowntimeRecurring: Story = {
 			await screen.findByRole('combobox', { name: 'Repeats every' }),
 		);
 		await userEvent.click(await screen.findByText('Weekly'));
-		await screen.findByText('Duration');
+		await within(await screen.findByRole('dialog')).findByText('Duration');
 	},
 };
 

frontend/src/pages/AlertList/PlannedDowntime/stories/__story_mockdata__/plannedDowntime.ts

@@ -47,7 +47,15 @@ const SEEDS: DowntimeSeed[] = [
 		timezone: 'UTC',
 		startsInMs: -2 * HOUR,
 		lastsMs: 6 * HOUR,
-		alertIds: ['rule-5', 'rule-3'],
+		alertIds: [
+			'rule-5',
+			'rule-3',
+			'rule-1',
+			'rule-2',
+			'rule-4',
+			'rule-6',
+			'rule-7',
+		],
 	},
 	{
 		name: 'Nightly ETL window',

frontend/src/pages/AlertList/RoutingPolicies/stories/__story_mockdata__/routingPolicies.ts

@@ -26,7 +26,7 @@ const SEEDS: PolicySeed[] = [
 		name: 'Critical production to on-call',
 		description: 'Anything critical in prod pages whoever is on call.',
 		expression: 'severity = "critical" AND env = "prod"',
-		channels: [1, 0],
+		channels: [1, 0, 3, 4, 2, 5],
 	},
 	{
 		name: 'Payments team ownership',

frontend/src/pages/ChannelsEdit/ChannelsEdit.module.scss

@@ -3,5 +3,8 @@
 }
 
 .page {
-	padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: var(--spacing-4) var(--spacing-6) 0;
 }

frontend/src/pages/ChannelsNew/styles.module.scss

@@ -3,5 +3,8 @@
 }
 
 .page {
-	padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: var(--spacing-4) var(--spacing-6) 0;
 }

frontend/src/pages/IntegrationsDetailsPage/CloudIntegration/stories/CloudIntegration.stories.mocks.tsx

@@ -144,7 +144,7 @@ export const cloudIntegrationMocks = defineStoryMocks({
 		newAccountCheckIn: choiceControl<NewAccountCheckIn>('New account check-in', {
 			group: MUTATIONS,
 			description:
-				'How the poll for the account the connect flow just created answers. `checked-in` connects it on the first poll and the drawer closes with the success toast, `pending` keeps the drawer waiting on the agent (the GCP agent setup command stays up), `error` fails the poll so the drawer reports it could not connect.',
+				'How the poll for the account the connect flow just created answers. `checked-in` connects it on the first poll and the drawer closes with the success toast, `pending` keeps the drawer waiting on the agent with the AWS, Azure or GCP agent setup command up, `error` fails the poll so the drawer reports it could not connect.',
 			options: NEW_ACCOUNT_CHECK_INS,
 			value: 'checked-in',
 		}),
@@ -319,7 +319,7 @@ export const connectAwsAccount = async (
 		await screen.findByRole('checkbox', { name: /us-east-1/i }),
 	);
 	await userEvent.click(
-		await screen.findByRole('button', { name: /launch cloud formation/i }),
+		await screen.findByRole('button', { name: /generate command/i }),
 	);
 };
 
@@ -339,7 +339,7 @@ export const connectAzureAccount = async (
 	);
 	await userEvent.type(resourceGroups, 'prod-platform-rg{Enter}');
 	await userEvent.click(
-		await screen.findByRole('button', { name: /generate azure setup commands/i }),
+		await screen.findByRole('button', { name: /generate command/i }),
 	);
 };
 

frontend/src/pages/IntegrationsDetailsPage/CloudIntegration/stories/CloudIntegration.stories.tsx

@@ -173,8 +173,8 @@ export const TooltipsInDataCollected: Story = {
 };
 
 /**
- * Connecting an AWS account: region and monitored regions picked, the template
- * launched, and the first poll finds the account connected. Set Account
+ * Connecting an AWS account: region and monitored regions picked, the setup
+ * command generated, and the first poll finds the account connected. Set Account
  * connection to `error` for the failure toast.
  */
 export const AwsAccountConnectedToast: Story = {
@@ -198,7 +198,7 @@ export const AwsAccountConnectionErrorToast: Story = {
 	},
 };
 
-/** Connecting an Azure subscription through the generated setup commands. */
+/** Connecting an Azure subscription through the generated setup command. */
 export const AzureAccountConnectedToast: Story = {
 	args: { provider: 'azure', accounts: 0 },
 	play: async ({ canvasElement, args }): Promise<void> => {
@@ -220,6 +220,89 @@ export const AzureAccountConnectionErrorToast: Story = {
 	},
 };
 
+/**
+ * The AWS setup command, with the drawer waiting for the account to connect.
+ * Set New account check-in to `checked-in` or `error` to see it connect or fail.
+ */
+export const AwsAgentCommand: Story = {
+	args: { accounts: 0, newAccountCheckIn: 'pending' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAwsAccount(canvasElement);
+		await screen.findByTestId('aws-agent-command', undefined, untilLoaded);
+	},
+};
+
+/**
+ * The connection poll fails, so the drawer reports it could not connect and
+ * offers Check Again.
+ */
+export const AwsAgentConnectionError: Story = {
+	args: { accounts: 0, newAccountCheckIn: 'error' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAwsAccount(canvasElement);
+		await screen.findByTestId('aws-check-connection-btn', undefined, untilLoaded);
+	},
+};
+
+/**
+ * Leaving the drawer while the agent has not connected yet, which asks first
+ * because closing means starting the installation again.
+ */
+export const AwsAgentCloseConfirm: Story = {
+	args: { accounts: 0, newAccountCheckIn: 'pending' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAwsAccount(canvasElement);
+		await userEvent.click(
+			await screen.findByTestId('aws-cancel-btn', undefined, untilLoaded),
+		);
+		await screen.findByTestId('aws-close-setup-btn', undefined, untilLoaded);
+	},
+};
+
+/**
+ * The Azure setup command, with the drawer waiting for the subscription to
+ * connect. Set New account check-in to `checked-in` or `error` to see it connect
+ * or fail.
+ */
+export const AzureAgentCommand: Story = {
+	args: { provider: 'azure', accounts: 0, newAccountCheckIn: 'pending' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAzureAccount(canvasElement);
+		await screen.findByTestId('azure-agent-command', undefined, untilLoaded);
+	},
+};
+
+/**
+ * The connection poll fails, so the drawer reports it could not connect and
+ * offers Check Again.
+ */
+export const AzureAgentConnectionError: Story = {
+	args: { provider: 'azure', accounts: 0, newAccountCheckIn: 'error' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAzureAccount(canvasElement);
+		await screen.findByTestId(
+			'azure-check-connection-btn',
+			undefined,
+			untilLoaded,
+		);
+	},
+};
+
+/**
+ * Leaving the drawer while the agent has not connected yet, which asks first
+ * because closing means starting the installation again.
+ */
+export const AzureAgentCloseConfirm: Story = {
+	args: { provider: 'azure', accounts: 0, newAccountCheckIn: 'pending' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await connectAzureAccount(canvasElement);
+		await userEvent.click(
+			await screen.findByTestId('azure-cancel-btn', undefined, untilLoaded),
+		);
+		await screen.findByTestId('azure-close-setup-btn', undefined, untilLoaded);
+	},
+};
+
 /**
  * Connecting a GCP account manually: the account is created and the story's
  * check-in stands in for the agent. A failure at either step shows inline in the

frontend/src/pages/IntegrationsDetailsPage/CloudIntegration/stories/__story_mockdata__/cloudIntegration.ts

@@ -366,6 +366,30 @@ export const accountResponse = (
 	};
 };
 
+/** The backend's command template, filled in for the story's region. */
+const AWS_AGENT_COMMAND = {
+	cliCommand: `curl -fsSL 'https://signoz.io/foundry.sh' | bash -s -- cloudintegration aws cloudformation \\
+  --region 'us-east-1' \\
+  --integration-account-id 'aws-account-new' \\
+  --signoz-api-url 'https://story.us.signoz.cloud' \\
+  --signoz-api-key 'story-api-key-8b7d02' \\
+  --ingestion-url 'https://ingest.us.signoz.cloud:443' \\
+  --ingestion-key 'story-ingestion-key-2f9c41' \\
+  --agent-version 'v0.0.8'`,
+};
+
+/** The backend's command template, filled in for the story's region. */
+const AZURE_AGENT_COMMAND = {
+	cliCommand: `curl -fsSL 'https://signoz.io/foundry.sh' | bash -s -- cloudintegration azure bicep \\
+  --region 'australiaeast' \\
+  --integration-account-id 'azure-account-new' \\
+  --signoz-api-url 'https://story.us.signoz.cloud' \\
+  --signoz-api-key 'story-api-key-8b7d02' \\
+  --ingestion-url 'https://ingest.us.signoz.cloud:443' \\
+  --ingestion-key 'story-ingestion-key-2f9c41' \\
+  --agent-version 'v0.0.8'`,
+};
+
 /** The backend's command template, filled in for the story's project and region. */
 const GCP_AGENT_COMMAND = {
 	cliCommand: `curl -fsSL 'https://signoz.io/foundry.sh' | bash -s -- cloudintegration gcp terraform \\
@@ -613,9 +637,8 @@ export const credentialsResponse = (): GetConnectionCredentials200 => ({
 });
 
 /**
- * The connection URL is what the setup flow opens in a new tab, which the story
- * reports through the navigation overlay rather than following. GCP returns its
- * setup command only for an agent connection; a manual one gets none.
+ * GCP returns its setup command only for an agent connection; a manual one gets
+ * none.
  */
 export const createdAccountResponse = (
 	provider: CloudProvider,
@@ -625,15 +648,8 @@ export const createdAccountResponse = (
 	data: {
 		id: newAccountId(provider),
 		connectionArtifact: {
-			aws: {
-				connectionUrl: `https://console.aws.amazon.com/cloudformation/home#/stacks/create?templateURL=https://signoz.io/${provider}.yaml`,
-			},
-			azure: {
-				cliCommand:
-					'az deployment sub create --template-uri https://signoz.io/azure.json',
-				cloudPowerShellCommand:
-					'New-AzSubscriptionDeployment -TemplateUri https://signoz.io/azure.json',
-			},
+			aws: AWS_AGENT_COMMAND,
+			azure: AZURE_AGENT_COMMAND,
 			...(gcpConnectionMethod ===
 				CloudintegrationtypesGCPConnectionMethodDTO.agent && {
 				gcp: GCP_AGENT_COMMAND,

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsTabs.tsx

@@ -1,6 +1,9 @@
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { useAppParams } from 'lib/router/useAppParams';
 
 import { TraceDetailsTab } from '../constants';
+import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
+import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
 
 import styles from './TraceDetailsHeader.module.scss';
@@ -19,9 +22,15 @@ const TAB_ITEMS = [
 ];
 
 function TraceDetailsTabs(): JSX.Element {
+	const { id: traceId = '' } = useAppParams<'id'>();
 	const [tab, setTab] = useTraceDetailsTab();
+	const logTraceEvent = useTraceDetailLogEvent('v3', traceId);
 
 	const handleChange = (value: string): void => {
+		logTraceEvent(TraceDetailEvents.DetailsTabChanged, {
+			[TraceDetailEventKeys.From]: tab,
+			[TraceDetailEventKeys.To]: value,
+		});
 		// Pushed so the thread's "Go back" returns to the previous tab, not the previous page.
 		void setTab(value as TraceDetailsTab, { history: 'push' });
 	};

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -1,12 +1,17 @@
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import logEvent from 'api/common/logEvent';
 import type { SpantypesGettableTraceSummaryDTO } from 'api/generated/services/sigNoz.schemas';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import ROUTES from 'constants/routes';
 import { fireEvent, render, screen, userEvent } from 'tests/test-utils';
 
+import { TraceDetailsTab } from '../../constants';
+import { TraceDetailEvents } from '../../events';
 import TraceDetailsHeader from '../TraceDetailsHeader';
 import { useTraceSummary } from '../useTraceSummary';
 
+jest.mock('api/common/logEvent');
+
 jest.mock('../useTraceSummary', () => ({
 	useTraceSummary: jest.fn(() => ({ data: undefined, isLoading: false })),
 }));
@@ -416,4 +421,23 @@ describe('TraceDetailsHeader – tabs', () => {
 			'false',
 		);
 	});
+
+	it('logs the tab change with the previous and next tab', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderHeader();
+		jest.mocked(logEvent).mockClear();
+
+		await user.click(screen.getByTestId('trace-details-tab-overview'));
+		expect(logEvent).not.toHaveBeenCalled();
+
+		await user.click(screen.getByTestId('trace-details-tab-thread'));
+
+		expect(logEvent).toHaveBeenCalledTimes(1);
+		expect(logEvent).toHaveBeenCalledWith(TraceDetailEvents.DetailsTabChanged, {
+			view: 'v3',
+			traceId: 'trace-123',
+			from: TraceDetailsTab.Overview,
+			to: TraceDetailsTab.Thread,
+		});
+	});
 });

frontend/src/pages/TraceDetailsV3/TraceDetailsOverview/TraceDetailsOverview.tsx

@@ -27,7 +27,9 @@ import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchPa
 import { ResizableBox } from 'periscope/components/ResizableBox';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
+import { TraceDetailsTab } from '../constants';
 import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
+import { useSpanDetailsOpenedEvent } from '../hooks/useSpanDetailsOpenedEvent';
 import { useSpanDetailVariant } from '../hooks/useSpanDetailVariant';
 import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import NoData from '../NoData/NoData';
@@ -106,6 +108,12 @@ function TraceDetailsOverview({
 		entityId: selectedSpanId,
 		onClose: handleSpanDetailsClose,
 	});
+	useSpanDetailsOpenedEvent({
+		isOpen: panelState.isOpen,
+		spanId: selectedSpan?.span_id,
+		detailsTab: TraceDetailsTab.Overview,
+		logTraceEvent,
+	});
 
 	const allSpansRef = useRef<SpanV3[]>([]);
 	const deepLinkResolvedRef = useRef(false);
@@ -199,6 +207,7 @@ function TraceDetailsOverview({
 		dataLoadedFiredForRef.current = traceId;
 		const numServices = new Set(payload.spans.map((s) => s['service.name'])).size;
 		logTraceEvent(TraceDetailEvents.DataLoaded, {
+			[TraceDetailEventKeys.DetailsTab]: TraceDetailsTab.Overview,
 			[TraceDetailEventKeys.TotalSpansCount]: totalSpansCount,
 			[TraceDetailEventKeys.NumServices]: numServices,
 			[TraceDetailEventKeys.TraceDurationMs]:

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/TraceDetailsThread.tsx

@@ -1,11 +1,15 @@
+import { MutableRefObject } from 'react';
 import { Callout } from '@signozhq/ui/callout';
 import { back, hasInAppHistory } from 'lib/router/navigation';
 import { useAppParams } from 'lib/router/useAppParams';
 
 import { TraceDetailsTab } from '../constants';
+import { useSpanDetailsOpenedEvent } from '../hooks/useSpanDetailsOpenedEvent';
 import { useSpanDetailVariant } from '../hooks/useSpanDetailVariant';
+import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
 import { SpanDetailVariant } from '../SpanDetailsPanel/constants';
+import { useThreadDataLoadedEvent } from './hooks/useThreadDataLoadedEvent';
 import { useThreadSpanSelection } from './hooks/useThreadSpanSelection';
 import { useThreadView } from './hooks/useThreadView';
 import { useTraceThread } from './hooks/useTraceThread';
@@ -23,7 +27,14 @@ import styles from './TraceDetailsThread.module.scss';
 
 const INITIAL_LOADER_COUNT = 4;
 
-function TraceDetailsThread(): JSX.Element {
+interface TraceDetailsThreadProps {
+	// Owned by the page so the load event fires once per trace, not per tab visit.
+	dataLoadedFiredForRef: MutableRefObject<string>;
+}
+
+function TraceDetailsThread({
+	dataLoadedFiredForRef,
+}: TraceDetailsThreadProps): JSX.Element {
 	const { id: traceId } = useAppParams<'id'>();
 	const [, setTab] = useTraceDetailsTab();
 	const [view, setView] = useThreadView();
@@ -62,6 +73,21 @@ function TraceDetailsThread(): JSX.Element {
 	const [spanDetailVariant, setSpanDetailVariant] = useSpanDetailVariant();
 	const isBottomDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
 
+	const logTraceEvent = useTraceDetailLogEvent('v3', traceId || '');
+	useThreadDataLoadedEvent({
+		traceId: traceId || '',
+		hasSpans: spans.length > 0,
+		spanPanelVariant: spanDetailVariant,
+		firedForRef: dataLoadedFiredForRef,
+		logTraceEvent,
+	});
+	useSpanDetailsOpenedEvent({
+		isOpen: panelState.isOpen,
+		spanId: selectedSpan?.span_id,
+		detailsTab: TraceDetailsTab.Thread,
+		logTraceEvent,
+	});
+
 	const spanDetails = panelState.isOpen && selectedSpan && (
 		<ThreadSpanDetails
 			panelState={panelState}

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/useThreadDataLoadedEvent.test.tsx

@@ -0,0 +1,174 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import {
+	GetTraceSummary200,
+	SpantypesGettableTraceSummaryDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getGetTraceSummaryQueryKey } from 'api/generated/services/tracedetail';
+import { rest, server } from 'mocks-server/server';
+import { renderHook, waitFor } from 'tests/test-utils';
+
+import { TraceDetailsTab } from '../../../constants';
+import { TraceDetailEvents } from '../../../events';
+import { TraceDetailLogEvent } from '../../../hooks/useTraceDetailLogEvent';
+import { SpanDetailVariant } from '../../../SpanDetailsPanel/constants';
+import { useThreadDataLoadedEvent } from '../useThreadDataLoadedEvent';
+
+const SUMMARIES: Record<string, SpantypesGettableTraceSummaryDTO> = {
+	'trace-a': {
+		startTimestampMillis: 1_000,
+		endTimestampMillis: 4_000,
+		totalSpansCount: 12,
+		totalErrorSpansCount: 2,
+		hasMissingSpans: false,
+		rootServiceEntryPoint: 'POST /chat',
+		rootServiceName: 'agent',
+		rootSpanStatusCode: 'STATUS_CODE_ERROR',
+	},
+	'trace-b': {
+		startTimestampMillis: 5_000,
+		endTimestampMillis: 5_500,
+		totalSpansCount: 3,
+		totalErrorSpansCount: 0,
+		hasMissingSpans: false,
+		rootServiceEntryPoint: 'POST /chat',
+		rootServiceName: 'agent',
+		rootSpanStatusCode: 'STATUS_CODE_OK',
+	},
+};
+
+interface HookProps {
+	traceId: string;
+	hasSpans: boolean;
+	spanPanelVariant?: SpanDetailVariant;
+}
+
+function renderDataLoadedEvent(
+	initialProps: HookProps,
+	firedForRef: MutableRefObject<string> = { current: '' },
+): {
+	logTraceEvent: jest.MockedFunction<TraceDetailLogEvent>;
+	rerender: (props: HookProps) => void;
+	queryClient: QueryClient;
+} {
+	const logTraceEvent = jest.fn() as jest.MockedFunction<TraceDetailLogEvent>;
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+	const { rerender } = renderHook(
+		({ traceId, hasSpans, spanPanelVariant }: HookProps) =>
+			useThreadDataLoadedEvent({
+				traceId,
+				hasSpans,
+				spanPanelVariant: spanPanelVariant ?? SpanDetailVariant.DOCKED_RIGHT,
+				firedForRef,
+				logTraceEvent,
+			}),
+		{ initialProps, wrapper },
+	);
+	return { logTraceEvent, rerender, queryClient };
+}
+
+describe('useThreadDataLoadedEvent', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get('*/api/v1/traces/:traceId/summary', (req, res, ctx) => {
+				const body: GetTraceSummary200 = {
+					status: 'success',
+					data: SUMMARIES[req.params.traceId as string],
+				};
+				return res(ctx.status(200), ctx.json(body));
+			}),
+		);
+	});
+
+	it('waits for the trace summary, then reports it as a thread load', async () => {
+		const { logTraceEvent } = renderDataLoadedEvent({
+			traceId: 'trace-a',
+			hasSpans: true,
+		});
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+		expect(logTraceEvent).toHaveBeenCalledWith(TraceDetailEvents.DataLoaded, {
+			detailsTab: TraceDetailsTab.Thread,
+			totalSpansCount: 12,
+			traceDurationMs: 3_000,
+			hadErrors: true,
+			spanPanelVariant: SpanDetailVariant.DOCKED_RIGHT,
+		});
+	});
+
+	it('waits for the thread spans even when the summary is already loaded', async () => {
+		const { logTraceEvent, rerender, queryClient } = renderDataLoadedEvent({
+			traceId: 'trace-a',
+			hasSpans: false,
+		});
+		await waitFor(() =>
+			expect(
+				queryClient.getQueryData(
+					getGetTraceSummaryQueryKey({ traceID: 'trace-a' }),
+				),
+			).toBeDefined(),
+		);
+		rerender({ traceId: 'trace-a', hasSpans: false });
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		rerender({ traceId: 'trace-a', hasSpans: true });
+
+		expect(logTraceEvent).toHaveBeenCalledTimes(1);
+	});
+
+	it('reports a trace once, including when the tab is visited again', async () => {
+		const firedForRef = { current: '' };
+		const firstVisit = renderDataLoadedEvent(
+			{ traceId: 'trace-a', hasSpans: true },
+			firedForRef,
+		);
+		await waitFor(() =>
+			expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1),
+		);
+		firstVisit.rerender({
+			traceId: 'trace-a',
+			hasSpans: true,
+			spanPanelVariant: SpanDetailVariant.DOCKED,
+		});
+
+		const secondVisit = renderDataLoadedEvent(
+			{ traceId: 'trace-a', hasSpans: true },
+			firedForRef,
+		);
+		await waitFor(() =>
+			expect(
+				secondVisit.queryClient.getQueryData(
+					getGetTraceSummaryQueryKey({ traceID: 'trace-a' }),
+				),
+			).toBeDefined(),
+		);
+		secondVisit.rerender({ traceId: 'trace-a', hasSpans: true });
+
+		expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1);
+		expect(secondVisit.logTraceEvent).not.toHaveBeenCalled();
+	});
+
+	it('reports the next trace with its own summary', async () => {
+		const { logTraceEvent, rerender } = renderDataLoadedEvent({
+			traceId: 'trace-a',
+			hasSpans: true,
+		});
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+
+		rerender({ traceId: 'trace-b', hasSpans: true });
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(2));
+		expect(logTraceEvent).toHaveBeenLastCalledWith(
+			TraceDetailEvents.DataLoaded,
+			expect.objectContaining({ totalSpansCount: 3, traceDurationMs: 500 }),
+		);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/useThreadDataLoadedEvent.ts

@@ -0,0 +1,45 @@
+import { MutableRefObject, useEffect } from 'react';
+import { useGetTraceSummary } from 'api/generated/services/tracedetail';
+
+import { TraceDetailsTab } from '../../constants';
+import { TraceDetailEventKeys, TraceDetailEvents } from '../../events';
+import { TraceDetailLogEvent } from '../../hooks/useTraceDetailLogEvent';
+import { SpanDetailVariant } from '../../SpanDetailsPanel/constants';
+
+interface ThreadDataLoadedEventArgs {
+	traceId: string;
+	hasSpans: boolean;
+	spanPanelVariant: SpanDetailVariant;
+	firedForRef: MutableRefObject<string>;
+	logTraceEvent: TraceDetailLogEvent;
+}
+
+export function useThreadDataLoadedEvent({
+	traceId,
+	hasSpans,
+	spanPanelVariant,
+	firedForRef,
+	logTraceEvent,
+}: ThreadDataLoadedEventArgs): void {
+	// No keepPreviousData: a previous trace's summary must not be reported for this one.
+	const { data } = useGetTraceSummary(
+		{ traceID: traceId },
+		{ query: { enabled: !!traceId, refetchOnMount: false } },
+	);
+	const summary = data?.data;
+
+	useEffect(() => {
+		if (!traceId || firedForRef.current === traceId || !hasSpans || !summary) {
+			return;
+		}
+		firedForRef.current = traceId;
+		logTraceEvent(TraceDetailEvents.DataLoaded, {
+			[TraceDetailEventKeys.DetailsTab]: TraceDetailsTab.Thread,
+			[TraceDetailEventKeys.TotalSpansCount]: summary.totalSpansCount,
+			[TraceDetailEventKeys.TraceDurationMs]:
+				summary.endTimestampMillis - summary.startTimestampMillis,
+			[TraceDetailEventKeys.HadErrors]: summary.totalErrorSpansCount > 0,
+			[TraceDetailEventKeys.SpanPanelVariant]: spanPanelVariant,
+		});
+	}, [traceId, hasSpans, summary, spanPanelVariant, firedForRef, logTraceEvent]);
+}

frontend/src/pages/TraceDetailsV3/events.ts

@@ -12,6 +12,8 @@ export enum TraceDetailEvents {
 	SpanPercentileTimeRangeChanged = 'Trace Detail: Span percentile time range changed',
 	SpanPercentileAttributesSelectorToggled = 'Trace Detail: Span percentile attributes selector toggled',
 	SpanPercentileAttributeChanged = 'Trace Detail: Span percentile attribute changed',
+	SpanDetailsOpened = 'Trace Detail: Span details opened',
+	DetailsTabChanged = 'Trace Detail: Details tab changed',
 }
 
 export enum TraceDetailEventKeys {
@@ -28,7 +30,7 @@ export enum TraceDetailEventKeys {
 	SpanPanelVariant = 'spanPanelVariant',
 	ColorByField = 'colorByField',
 	PreviewFieldsCount = 'previewFieldsCount',
-	// View switched
+	// View switched / details tab changed
 	From = 'from',
 	To = 'to',
 	DwellMs = 'dwellMs',
@@ -44,6 +46,8 @@ export enum TraceDetailEventKeys {
 	PercentileValue = 'percentileValue',
 	ResourceAttributeKey = 'resourceAttributeKey',
 	Selected = 'selected',
+	// Data loaded / span details opened: which tab the user is on
+	DetailsTab = 'detailsTab',
 }
 
 export type TraceDetailView = 'v2' | 'v3';

frontend/src/pages/TraceDetailsV3/hooks/__tests__/useSpanDetailsOpenedEvent.test.tsx

@@ -0,0 +1,90 @@
+import { renderHook } from 'tests/test-utils';
+
+import { TraceDetailsTab } from '../../constants';
+import { TraceDetailEvents } from '../../events';
+import { useSpanDetailsOpenedEvent } from '../useSpanDetailsOpenedEvent';
+import { TraceDetailLogEvent } from '../useTraceDetailLogEvent';
+
+interface PanelProps {
+	isOpen: boolean;
+	spanId?: string;
+}
+
+function renderOpenedEvent(initialProps: PanelProps): {
+	logTraceEvent: jest.MockedFunction<TraceDetailLogEvent>;
+	rerender: (props: PanelProps) => void;
+} {
+	const logTraceEvent = jest.fn() as jest.MockedFunction<TraceDetailLogEvent>;
+	const { rerender } = renderHook(
+		({ isOpen, spanId }: PanelProps) =>
+			useSpanDetailsOpenedEvent({
+				isOpen,
+				spanId,
+				detailsTab: TraceDetailsTab.Thread,
+				logTraceEvent,
+			}),
+		{ initialProps },
+	);
+	return { logTraceEvent, rerender };
+}
+
+function openedSpanIds(
+	logTraceEvent: jest.MockedFunction<TraceDetailLogEvent>,
+): unknown[] {
+	return logTraceEvent.mock.calls.map(([, attributes]) => attributes?.spanId);
+}
+
+describe('useSpanDetailsOpenedEvent', () => {
+	it('waits for the panel to be open on a span, then reports it with the tab', () => {
+		const { logTraceEvent, rerender } = renderOpenedEvent({ isOpen: false });
+		rerender({ isOpen: true });
+		rerender({ isOpen: false, spanId: 'span-1' });
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		rerender({ isOpen: true, spanId: 'span-1' });
+
+		expect(logTraceEvent).toHaveBeenCalledTimes(1);
+		expect(logTraceEvent).toHaveBeenCalledWith(
+			TraceDetailEvents.SpanDetailsOpened,
+			{ spanId: 'span-1', detailsTab: TraceDetailsTab.Thread },
+		);
+	});
+
+	it('does not repeat while the same span stays open', () => {
+		const { logTraceEvent, rerender } = renderOpenedEvent({
+			isOpen: true,
+			spanId: 'span-1',
+		});
+		rerender({ isOpen: true, spanId: 'span-1' });
+		rerender({ isOpen: true, spanId: 'span-1' });
+
+		expect(logTraceEvent).toHaveBeenCalledTimes(1);
+	});
+
+	it('reports the same span again after the panel is closed and reopened', () => {
+		const { logTraceEvent, rerender } = renderOpenedEvent({
+			isOpen: true,
+			spanId: 'span-1',
+		});
+		rerender({ isOpen: false });
+		rerender({ isOpen: true, spanId: 'span-1' });
+
+		expect(openedSpanIds(logTraceEvent)).toStrictEqual(['span-1', 'span-1']);
+	});
+
+	it('reports each span selected while the panel stays open', () => {
+		const { logTraceEvent, rerender } = renderOpenedEvent({
+			isOpen: true,
+			spanId: 'span-1',
+		});
+		rerender({ isOpen: true, spanId: 'span-2' });
+		rerender({ isOpen: true, spanId: 'span-3' });
+
+		expect(openedSpanIds(logTraceEvent)).toStrictEqual([
+			'span-1',
+			'span-2',
+			'span-3',
+		]);
+	});
+});

frontend/src/pages/TraceDetailsV3/hooks/useSpanDetailsOpenedEvent.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { TraceDetailsTab } from '../constants';
+import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
+import { TraceDetailLogEvent } from './useTraceDetailLogEvent';
+
+interface SpanDetailsOpenedEventArgs {
+	isOpen: boolean;
+	spanId: string | undefined;
+	detailsTab: TraceDetailsTab;
+	logTraceEvent: TraceDetailLogEvent;
+}
+
+// Fires once per span shown in the details panel; resets when the panel closes.
+export function useSpanDetailsOpenedEvent({
+	isOpen,
+	spanId,
+	detailsTab,
+	logTraceEvent,
+}: SpanDetailsOpenedEventArgs): void {
+	useEffect(() => {
+		if (!isOpen || !spanId) {
+			return;
+		}
+		logTraceEvent(TraceDetailEvents.SpanDetailsOpened, {
+			[TraceDetailEventKeys.SpanId]: spanId,
+			[TraceDetailEventKeys.DetailsTab]: detailsTab,
+		});
+	}, [isOpen, spanId, detailsTab, logTraceEvent]);
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -16,6 +16,7 @@ function TraceDetailsV3(): JSX.Element {
 	// Tracks which traceId the load event already fired for, so navigating
 	// between traces (the route component stays mounted) re-fires it once each.
 	const dataLoadedFiredForRef = useRef<string>('');
+	const threadDataLoadedFiredForRef = useRef<string>('');
 
 	const handleFilteredSpansChange = useCallback(
 		(spanIds: string[], isActive: boolean): void => {
@@ -39,7 +40,7 @@ function TraceDetailsV3(): JSX.Element {
 					dataLoadedFiredForRef={dataLoadedFiredForRef}
 				/>
 			) : (
-				<TraceDetailsThread />
+				<TraceDetailsThread dataLoadedFiredForRef={threadDataLoadedFiredForRef} />
 			)}
 		</TraceDetailsWrapper>
 	);

frontend/src/providers/QueryBuilder.tsx

@@ -475,12 +475,17 @@ export function QueryBuilderProvider({
 	const createNewBuilderQuery = useCallback(
 		(queries: IBuilderQuery[]): IBuilderQuery => {
 			const existNames = queries.map((item) => item.queryName);
+			// Hosts without a fixed data source (the panel editor) continue the
+			// previous query's signal rather than resetting to metrics.
+			const previous = queries[queries.length - 1];
 			const initialBuilderQuery =
-				initialQueryBuilderFormValuesMap[initialDataSource || DataSource.METRICS];
+				initialQueryBuilderFormValuesMap[
+					initialDataSource || previous?.dataSource || DataSource.METRICS
+				];
 
 			const newQuery: IBuilderQuery = {
 				...initialBuilderQuery,
-				source: queries?.[0]?.source || '',
+				source: previous?.source || '',
 				builderQueryType: queries?.[0]?.builderQueryType,
 				queryName: createNewBuilderItemName({ existNames, sourceNames: alphabet }),
 				expression: createNewBuilderItemName({

frontend/src/providers/__tests__/QueryBuilder.createNewBuilderQuery.dataSource.test.tsx

@@ -0,0 +1,104 @@
+import {
+	initialQueriesMap,
+	initialQueryBuilderFormValuesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { act, AllTheProviders, renderHook } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+const renderQueryBuilder = (
+	initialQuery: Query,
+): ReturnType<
+	typeof renderHook<ReturnType<typeof useQueryBuilder>, unknown>
+> => {
+	const hook = renderHook(() => useQueryBuilder(), {
+		wrapper: AllTheProviders,
+	});
+
+	act(() => {
+		hook.result.current.initQueryBuilderData(initialQuery);
+	});
+
+	return hook;
+};
+
+describe('createNewBuilderQuery data source', () => {
+	it.each([DataSource.LOGS, DataSource.TRACES, DataSource.METRICS])(
+		'continues the previous %s query when the host fixes no data source',
+		(dataSource) => {
+			const { result } = renderQueryBuilder(initialQueriesMap[dataSource]);
+
+			act(() => {
+				result.current.addNewBuilderQuery();
+			});
+
+			const [, added] = result.current.currentQuery.builder.queryData;
+			expect(added.dataSource).toBe(dataSource);
+			expect(added.aggregations).toStrictEqual(
+				initialQueryBuilderFormValuesMap[dataSource].aggregations,
+			);
+		},
+	);
+
+	it('follows the last query when queries mix signals', () => {
+		const { result } = renderQueryBuilder(initialQueriesMap.logs);
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+		act(() => {
+			result.current.handleSetQueryData(1, {
+				...initialQueryBuilderFormValuesMap.traces,
+				queryName: 'B',
+				expression: 'B',
+			});
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[2].dataSource).toBe(
+			DataSource.TRACES,
+		);
+	});
+
+	it('takes the source from the last query, not the first', () => {
+		const [metricsQuery] = initialQueriesMap.metrics.builder.queryData;
+		const { result } = renderQueryBuilder({
+			...initialQueriesMap.metrics,
+			builder: {
+				...initialQueriesMap.metrics.builder,
+				queryData: [
+					{ ...metricsQuery, source: '' },
+					{ ...metricsQuery, queryName: 'B', expression: 'B', source: 'meter' },
+				],
+			},
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[2]).toMatchObject({
+			dataSource: DataSource.METRICS,
+			source: 'meter',
+		});
+	});
+
+	it('uses the host’s fixed data source over the previous query', () => {
+		const { result } = renderQueryBuilder(initialQueriesMap.metrics);
+		act(() => {
+			result.current.handleSetConfig(PANEL_TYPES.TIME_SERIES, DataSource.LOGS);
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[1].dataSource).toBe(
+			DataSource.LOGS,
+		);
+	});
+});

frontend/src/utils/__tests__/buildExplorerNavigationUrl.test.ts

@@ -1,6 +1,7 @@
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
 
 import { buildExplorerNavigationUrl } from '../buildExplorerNavigationUrl';
 
@@ -19,4 +20,14 @@ describe('buildExplorerNavigationUrl', () => {
 		expect(url).toContain(`${QueryParams.compositeQuery}=`);
 		expect(url).toContain(`${QueryParams.viewKey}=`);
 	});
+
+	it('JSON-encodes panelTypes so the explorer opens the right view', () => {
+		const url = buildExplorerNavigationUrl(
+			ROUTES.LOGS_EXPLORER,
+			initialQueriesMap[DataSource.LOGS],
+			{ [QueryParams.panelTypes]: PANEL_TYPES.TABLE },
+		);
+
+		expect(url).toContain(`${QueryParams.panelTypes}=%22table%22`);
+	});
 });

pkg/modules/llmpricingrule/impllmpricingrule/module.go

@@ -4,9 +4,13 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"log/slog"
+	"maps"
+	"sync"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
@@ -22,12 +26,14 @@ import (
 const unmappedModelsLookback = time.Hour
 
 type module struct {
-	store   llmpricingruletypes.Store
-	querier querier.Querier
+	store                  llmpricingruletypes.Store
+	querier                querier.Querier
+	telemetryMetadataStore telemetrytypes.MetadataStore
+	logger                 *slog.Logger
 }
 
-func NewModule(store llmpricingruletypes.Store, querier querier.Querier) llmpricingrule.Module {
-	return &module{store: store, querier: querier}
+func NewModule(store llmpricingruletypes.Store, querier querier.Querier, telemetryMetadataStore telemetrytypes.MetadataStore, providerSettings factory.ProviderSettings) llmpricingrule.Module {
+	return &module{store: store, querier: querier, telemetryMetadataStore: telemetryMetadataStore, logger: providerSettings.Logger}
 }
 
 func (module *module) List(ctx context.Context, orgID valuer.UUID, offset, limit int, search string, isOverride *bool) ([]*llmpricingruletypes.LLMPricingRule, int, error) {
@@ -51,13 +57,47 @@ func (module *module) ListUnmappedModels(ctx context.Context, orgID valuer.UUID)
 		return nil, err
 	}
 
-	unmapped := make([]*llmpricingruletypes.UnmappedModel, 0, len(models))
-	for _, m := range models {
-		if !llmpricingruletypes.ModelMatchesAnyRule(m.ModelName, rules) {
-			unmapped = append(unmapped, m)
+	return llmpricingruletypes.UnmappedModels(models, rules), nil
+}
+
+// Collect keeps the rule counts even when ClickHouse is unreachable: the
+// counts that depend on it are skipped so the reporter retains their last value.
+// Models come from the traces tag table rather than a span scan, so the
+// unmapped count covers the metadata lookback instead of the last hour.
+func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
+	rules, err := module.listAllRules(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+	stats := llmpricingruletypes.NewStatsFromRules(rules)
+
+	selectors := aiobservabilitytypes.StatsFieldValueSelectors(time.Now())
+	results := make([]*telemetrytypes.TelemetryFieldValues, len(selectors))
+	var lookups sync.WaitGroup
+	for i, selector := range selectors {
+		lookups.Go(func() {
+			fieldValues, _, err := module.telemetryMetadataStore.GetAllValues(ctx, orgID, selector)
+			if err != nil {
+				module.logger.DebugContext(ctx, "failed to collect gen_ai attribute stats", slog.String("key", selector.Name), errors.Attr(err))
+				return
+			}
+			results[i] = fieldValues
+		})
+	}
+	lookups.Wait()
+
+	values := make(map[string]*telemetrytypes.TelemetryFieldValues, len(selectors))
+	for i, selector := range selectors {
+		if results[i] != nil {
+			values[selector.Name] = results[i]
 		}
 	}
-	return unmapped, nil
+	maps.Copy(stats, aiobservabilitytypes.NewStatsFromFieldValues(values))
+	if models := values[aiobservabilitytypes.GenAIRequestModel]; models != nil {
+		maps.Copy(stats, llmpricingruletypes.NewStatsFromModels(models.StringValues, rules))
+	}
+
+	return stats, nil
 }
 
 // CreateOrUpdate saves a batch of pricing rules. isOverride decides how a rule

pkg/modules/llmpricingrule/llmpricingrule.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	"github.com/SigNoz/signoz/pkg/statsreporter"
 	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
@@ -13,6 +14,8 @@ type Module interface {
 	// Since this module interacts with OpAMP, it must implement the AgentFeature interface.
 	agentConf.AgentFeature
 
+	statsreporter.StatsCollector
+
 	List(ctx context.Context, orgID valuer.UUID, offset, limit int, search string, isOverride *bool) ([]*llmpricingruletypes.LLMPricingRule, int, error)
 	Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*llmpricingruletypes.LLMPricingRule, error)
 	CreateOrUpdate(ctx context.Context, orgID valuer.UUID, userEmail string, rules []*llmpricingruletypes.UpdatableLLMPricingRule) (err error)

pkg/querier/bucket_cache.go

@@ -481,7 +481,8 @@ func (bc *bucketCache) mergeBuckets(ctx context.Context, buckets []*qbtypes.Cach
 
 	// Merge values based on type
 	var mergedValue any
-	if resultType.IsBuiltFromTimeSeries() {
+	switch resultType {
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		mergedValue = bc.mergeTimeSeriesValues(ctx, buckets)
 		// Raw and Scalar types are not cached, so no merge needed
 	}
@@ -628,8 +629,8 @@ func (bc *bucketCache) isEmptyResult(result *qbtypes.Result) (isEmpty bool, isFi
 		return true, false
 	}
 
-	switch {
-	case result.Type.IsBuiltFromTimeSeries():
+	switch result.Type {
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
 			// No aggregations at all means truly empty
 			if len(tsData.Aggregations) == 0 {
@@ -664,7 +665,7 @@ func (bc *bucketCache) isEmptyResult(result *qbtypes.Result) (isEmpty bool, isFi
 			return !hasValues, !hasValues && totalSeries > 0
 		}
 
-	default:
+	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeScalar, qbtypes.RequestTypeTrace:
 		// Raw and scalar data are not cached
 		return true, false
 	}
@@ -767,8 +768,8 @@ func (bc *bucketCache) trimResultToFluxBoundary(result *qbtypes.Result, fluxBoun
 		Warnings: result.Warnings,
 	}
 
-	switch {
-	case result.Type.IsBuiltFromTimeSeries():
+	switch result.Type {
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		// Trim time series data
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok && tsData != nil {
 			trimmedData := &qbtypes.TimeSeriesData{}
@@ -811,7 +812,7 @@ func (bc *bucketCache) trimResultToFluxBoundary(result *qbtypes.Result, fluxBoun
 			trimmedResult.Value = trimmedData
 		}
 
-	default:
+	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeScalar, qbtypes.RequestTypeTrace:
 		// Don't cache raw or scalar data
 		return nil
 	}
@@ -853,8 +854,8 @@ func (bc *bucketCache) filterResultToTimeRange(result *qbtypes.Result, q qbtypes
 		}
 	}
 
-	switch {
-	case result.Type.IsBuiltFromTimeSeries():
+	switch result.Type {
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
 			filteredData := &qbtypes.TimeSeriesData{
 				Aggregations: make([]*qbtypes.AggregationBucket, 0, len(tsData.Aggregations)),

pkg/querier/builder_query.go

@@ -428,10 +428,10 @@ func (q *builderQuery[T]) narrowWindowByTraceID(ctx context.Context, fromMS, toM
 // emptyResultFor returns an empty result payload appropriate for the given kind.
 func emptyResultFor(kind qbtypes.RequestType, queryName string) *qbtypes.Result {
 	var value any
-	switch {
-	case kind.IsBuiltFromTimeSeries():
+	switch kind {
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		value = &qbtypes.TimeSeriesData{QueryName: queryName}
-	case kind == qbtypes.RequestTypeScalar:
+	case qbtypes.RequestTypeScalar:
 		value = &qbtypes.ScalarData{QueryName: queryName}
 	default:
 		value = &qbtypes.RawData{QueryName: queryName}
@@ -484,7 +484,7 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 	kind := q.kind
 	// all metric queries are time series then reduced if required, except
 	// heatmaps, whose statement returns a row per bucket rather than per point
-	if q.spec.Signal == telemetrytypes.SignalMetrics && !kind.CountsIntoBuckets() {
+	if q.spec.Signal == telemetrytypes.SignalMetrics && kind != qbtypes.RequestTypeHeatmap {
 		kind = qbtypes.RequestTypeTimeSeries
 	}
 

pkg/querier/consume.go

@@ -82,7 +82,7 @@ func labelValue(val any) string {
 // * Time-series - *qbtypes.TimeSeriesData
 // * Scalar      - *qbtypes.ScalarData
 // * Raw         - *qbtypes.RawData
-// * Heatmap and distribution - *qbtypes.TimeSeriesData with one count per bucket at each point.
+// * Distribution- *qbtypes.DistributionData.
 func consume(rows driver.Rows, kind qbtypes.RequestType, queryWindow *qbtypes.TimeRange, step qbtypes.Step, queryName string) (any, error) {
 	var (
 		payload any
@@ -94,7 +94,7 @@ func consume(rows driver.Rows, kind qbtypes.RequestType, queryWindow *qbtypes.Ti
 		payload, err = readAsTimeSeries(rows, queryWindow, step, queryName)
 	case qbtypes.RequestTypeScalar:
 		payload, err = readAsScalar(rows, queryName)
-	case qbtypes.RequestTypeHeatmap, qbtypes.RequestTypeDistribution:
+	case qbtypes.RequestTypeHeatmap:
 		payload, err = readAsHeatmap(rows, queryWindow, step, queryName)
 	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeTrace, qbtypes.RequestTypeRawStream:
 		payload, err = readAsRaw(rows, queryName)

pkg/querier/postprocess.go

@@ -98,15 +98,6 @@ func (q *querier) postProcessResults(ctx context.Context, orgID valuer.UUID, res
 	// Filter out disabled queries
 	typedResults = q.filterDisabledQueries(typedResults, req)
 
-	// Summed only once the bucket axis is final.
-	if req.RequestType == qbtypes.RequestTypeDistribution {
-		for _, result := range typedResults {
-			if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
-				result.Value = tsData.ToDistributionData()
-			}
-		}
-	}
-
 	// Apply table formatting for UI if requested
 	if req.FormatOptions != nil && req.FormatOptions.FormatTableResultForUI && req.RequestType == qbtypes.RequestTypeScalar {
 
@@ -234,7 +225,7 @@ func postProcessMetricQuery(
 		}
 	}
 
-	if req.RequestType.CountsIntoBuckets() && config.HeatmapBucketing != nil {
+	if req.RequestType == qbtypes.RequestTypeHeatmap && config.HeatmapBucketing != nil {
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
 			resolveHeatmapBucketAxis(tsData, *config.HeatmapBucketing)
 		}
@@ -369,7 +360,7 @@ func (q *querier) applyFormulas(ctx context.Context, results map[string]*qbtypes
 				result = q.applySeriesLimit(result, formula.Limit, formula.Order)
 				results[name] = result
 			}
-		case qbtypes.RequestTypeHeatmap, qbtypes.RequestTypeDistribution:
+		case qbtypes.RequestTypeHeatmap:
 			// The queries a formula reads were run as time series, so what
 			// arrives here is one value per group per timestamp.
 			result := q.processTimeSeriesFormula(ctx, results, formula, req)