fix(dashboards): restore a percentile when a histogram leaves a heatmap

Switching into a heatmap swaps a histogram's percentile for sum, and picking
the metric there defaults to sum. Nothing undid it on the way out, so a panel
switched to time series sat on a value its own selector does not offer.

Mirror the transform: on a first visit to any other kind, a histogram holding
sum goes back to p90. Other metric types keep theirs, since sum is a real
choice for a sum or a gauge.

Assisted-by: Claude Opus 5

cmd/authz.go

@@ -97,6 +97,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

ee/licensing/httplicensing/api.go

@@ -1,85 +0,0 @@
-package httplicensing
-
-import (
-	"context"
-	"encoding/json"
-	"net/http"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/licensetypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type licensingAPI struct {
-	licensing licensing.Licensing
-}
-
-func NewLicensingAPI(licensing licensing.Licensing) licensing.API {
-	return &licensingAPI{licensing: licensing}
-}
-
-func (api *licensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	req := new(licensetypes.PostableSubscription)
-	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	gettableSubscription, err := api.licensing.Checkout(ctx, orgID, req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusCreated, gettableSubscription)
-}
-
-func (api *licensingAPI) Portal(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	req := new(licensetypes.PostableSubscription)
-	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	gettableSubscription, err := api.licensing.Portal(ctx, orgID, req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusCreated, gettableSubscription)
-}

ee/licensing/httplicensing/provider.go

@@ -2,12 +2,9 @@ package httplicensing
 
 import (
 	"context"
-	"encoding/json"
 	"log/slog"
 	"time"
 
-	"github.com/tidwall/gjson"
-
 	"github.com/SigNoz/signoz/ee/licensing/licensingstore/sqllicensingstore"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -228,47 +225,6 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 	return nil
 }
 
-func (provider *provider) Checkout(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
-	activeLicense, err := provider.GetActive(ctx, organizationID)
-	if err != nil {
-		return nil, err
-	}
-
-	body, err := json.Marshal(postableSubscription)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal checkout payload")
-	}
-
-	response, err := provider.zeus.GetCheckoutURL(ctx, activeLicense.Key, body)
-	if err != nil {
-		if errors.Ast(err, errors.TypeAlreadyExists) {
-			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
-		}
-		return nil, err
-	}
-
-	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
-}
-
-func (provider *provider) Portal(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
-	activeLicense, err := provider.GetActive(ctx, organizationID)
-	if err != nil {
-		return nil, err
-	}
-
-	body, err := json.Marshal(postableSubscription)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal portal payload")
-	}
-
-	response, err := provider.zeus.GetPortalURL(ctx, activeLicense.Key, body)
-	if err != nil {
-		return nil, err
-	}
-
-	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
-}
-
 func (provider *provider) GetFeatureFlags(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.Feature, error) {
 	license, err := provider.GetActive(ctx, organizationID)
 	if err != nil {

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

@@ -4,7 +4,6 @@ import (
 	"net/http"
 	"time"
 
-	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
@@ -42,7 +41,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		IntegrationsController:        opts.IntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
-		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
 	}, config)
@@ -72,10 +70,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
 
-	router.HandleFunc("/api/v1/checkout", am.AdminAccess(ah.LicensingAPI.Checkout)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
-
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 

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

@@ -1,76 +0,0 @@
-package api
-
-import (
-	"encoding/json"
-	"fmt"
-	"net/http"
-
-	"github.com/SigNoz/signoz/ee/query-service/model"
-)
-
-type DayWiseBreakdown struct {
-	Type      string        `json:"type"`
-	Breakdown []DayWiseData `json:"breakdown"`
-}
-
-type DayWiseData struct {
-	Timestamp int64   `json:"timestamp"`
-	Count     float64 `json:"count"`
-	Size      float64 `json:"size"`
-	UnitPrice float64 `json:"unitPrice"`
-	Quantity  float64 `json:"quantity"`
-	Total     float64 `json:"total"`
-}
-
-type tierBreakdown struct {
-	UnitPrice float64 `json:"unitPrice"`
-	Quantity  float64 `json:"quantity"`
-	TierStart int64   `json:"tierStart"`
-	TierEnd   int64   `json:"tierEnd"`
-	TierCost  float64 `json:"tierCost"`
-}
-
-type usageResponse struct {
-	Type             string           `json:"type"`
-	Unit             string           `json:"unit"`
-	Tiers            []tierBreakdown  `json:"tiers"`
-	DayWiseBreakdown DayWiseBreakdown `json:"dayWiseBreakdown"`
-}
-
-type details struct {
-	Total     float64         `json:"total"`
-	Breakdown []usageResponse `json:"breakdown"`
-	BaseFee   float64         `json:"baseFee"`
-	BillTotal float64         `json:"billTotal"`
-}
-
-type billingData struct {
-	BillingPeriodStart int64   `json:"billingPeriodStart"`
-	BillingPeriodEnd   int64   `json:"billingPeriodEnd"`
-	Details            details `json:"details"`
-	Discount           float64 `json:"discount"`
-	SubscriptionStatus string  `json:"subscriptionStatus"`
-}
-
-func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
-	licenseKey := r.URL.Query().Get("licenseKey")
-
-	if licenseKey == "" {
-		RespondError(w, model.BadRequest(fmt.Errorf("license key is required")), nil)
-		return
-	}
-
-	data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
-	if err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-
-	var billing billingData
-	if err := json.Unmarshal(data, &billing); err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-
-	ah.Respond(w, billing)
-}

frontend/__mocks__/uplotMock.ts

@@ -2,6 +2,8 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
+	/** Consumers read `root.parentElement` to detect a re-mounted container. */
+	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -17,13 +19,20 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: jest.fn(),
-	setSize: jest.fn(),
-	destroy: jest.fn(),
-	redraw: jest.fn(),
-	setSeries: jest.fn(),
-});
+const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
+	const root = document.createElement('div');
+	// Real uPlot mounts its root inside the target; without it a re-render reads
+	// `root.parentElement` off undefined and throws.
+	target?.appendChild(root);
+	return {
+		root,
+		setData: jest.fn(),
+		setSize: jest.fn(),
+		destroy: jest.fn(),
+		redraw: jest.fn(),
+		setSeries: jest.fn(),
+	};
+};
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -53,14 +62,16 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	_target: HTMLElement,
+	target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance();
+	return createMockUPlotInstance(target);
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/src/AppRoutes/Private.tsx

@@ -169,12 +169,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	// Check for workspace blocked (trial expired)
 	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
 		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(pathname === ROUTES.SETTINGS ||
-				pathname === ROUTES.ORG_SETTINGS ||
-				pathname === ROUTES.MEMBERS_SETTINGS ||
-				pathname === ROUTES.BILLING ||
-				pathname === ROUTES.MY_SETTINGS);
+			pathname === ROUTES.SETTINGS ||
+			pathname === ROUTES.BILLING ||
+			(isAdmin &&
+				(pathname === ROUTES.ORG_SETTINGS ||
+					pathname === ROUTES.MEMBERS_SETTINGS ||
+					pathname === ROUTES.MY_SETTINGS));
 
 		if (
 			pathname !== ROUTES.WORKSPACE_LOCKED &&

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -739,7 +739,7 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});
 
-		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
+		it('should allow VIEWER to access /settings when workspace is blocked', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -752,10 +752,10 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
-		it('should redirect VIEWER to workspace locked when trying to access billing', async () => {
+		it('should allow VIEWER to access /settings/billing when workspace is blocked', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.BILLING,
 				appContext: {
@@ -768,7 +768,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});
 
 		it('should redirect VIEWER to workspace locked when trying to access org-settings', async () => {
@@ -819,7 +819,7 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should redirect EDITOR to workspace locked when trying to access settings', async () => {
+		it('should allow EDITOR to access /settings when workspace is blocked', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -832,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});
 
 		it('should not redirect when already on workspace locked page', () => {
@@ -1626,6 +1626,7 @@ describe('PrivateRoute', () => {
 				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
 				deniedRoles: DENIED_ROLES,
 			},
+			BILLING: { path: ROUTES.BILLING, deniedRoles: DENIED_ROLES },
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/api/billing/getUsage.ts

@@ -1,59 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-export interface DayBreakdownEntry {
-	timestamp: number;
-	total: number;
-	quantity: number;
-	count: number;
-	size: number;
-}
-
-export interface TierEntry {
-	quantity: number;
-	unitPrice: number;
-	tierCost: number;
-}
-
-export interface BreakdownEntry {
-	type: string;
-	unit: string;
-	dayWiseBreakdown: {
-		breakdown: DayBreakdownEntry[];
-	};
-	tiers?: TierEntry[];
-}
-
-export interface UsageResponsePayloadProps {
-	billingPeriodStart: number;
-	billingPeriodEnd: number;
-	details: {
-		total: number;
-		baseFee: number;
-		breakdown: BreakdownEntry[];
-		billTotal: number;
-	};
-	discount: number;
-	subscriptionStatus?: string;
-}
-
-const getUsage = async (
-	licenseKey: string,
-): Promise<SuccessResponse<UsageResponsePayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/billing?licenseKey=${licenseKey}`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getUsage;

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

@@ -4914,6 +4914,83 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesListPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+}
+export enum DashboardtypesHeatmapYScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
+export interface DashboardtypesHeatmapAxesDTO {
+	yScale?: DashboardtypesHeatmapYScaleDTO;
+}
+
+export enum DashboardtypesHeatmapColorModeDTO {
+	palette = 'palette',
+	opacity = 'opacity',
+}
+export enum DashboardtypesHeatmapPaletteDTO {
+	ice = 'ice',
+	moss = 'moss',
+	rust = 'rust',
+	graphite = 'graphite',
+	ember = 'ember',
+	lagoon = 'lagoon',
+	orchid = 'orchid',
+	verdant = 'verdant',
+	lava = 'lava',
+	beacon = 'beacon',
+}
+export enum DashboardtypesHeatmapColorScaleDTO {
+	log = 'log',
+	sqrt = 'sqrt',
+	linear = 'linear',
+}
+export interface DashboardtypesHeatmapColorsDTO {
+	/**
+	 * @type string
+	 */
+	fill?: string;
+	/**
+	 * @type number,null
+	 */
+	maxCount?: number | null;
+	/**
+	 * @type number,null
+	 */
+	minCount?: number | null;
+	mode?: DashboardtypesHeatmapColorModeDTO;
+	palette?: DashboardtypesHeatmapPaletteDTO;
+	scale?: DashboardtypesHeatmapColorScaleDTO;
+	/**
+	 * @type integer
+	 */
+	steps?: number;
+}
+
+export interface DashboardtypesHeatmapChartAppearanceDTO {
+	colors?: DashboardtypesHeatmapColorsDTO;
+}
+
+export interface DashboardtypesHeatmapPanelSpecDTO {
+	axes?: DashboardtypesHeatmapAxesDTO;
+	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
+	/**
+	 * @enum signoz/HeatmapPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
+	spec: DashboardtypesHeatmapPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -4921,7 +4998,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -4929,6 +5007,7 @@ export enum Querybuildertypesv5RequestTypeDTO {
 	raw = 'raw',
 	raw_stream = 'raw_stream',
 	trace = 'trace',
+	heatmap = 'heatmap',
 }
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
@@ -5843,6 +5922,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable
@@ -8542,16 +8622,7 @@ export interface Querybuildertypesv5LabelDTO {
 	value?: Querybuildertypesv5LabelDTOValue;
 }
 
-export interface Querybuildertypesv5BucketDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	step?: number;
-}
-
 export interface Querybuildertypesv5TimeSeriesValueDTO {
-	bucket?: Querybuildertypesv5BucketDTO;
 	/**
 	 * @type boolean
 	 */
@@ -9102,12 +9173,16 @@ export interface PromotetypesPromotePathDTO {
 	promote?: boolean;
 }
 
-export type Querybuildertypesv5AggregationBucketDTOMeta = {
+export interface Querybuildertypesv5AggregationMetaDTO {
+	/**
+	 * @type array
+	 */
+	buckets?: number[];
 	/**
 	 * @type string
 	 */
 	unit?: string;
-};
+}
 
 export interface Querybuildertypesv5AggregationBucketDTO {
 	/**
@@ -9126,10 +9201,7 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	 * @type array
 	 */
 	lowerBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
-	/**
-	 * @type object
-	 */
-	meta?: Querybuildertypesv5AggregationBucketDTOMeta;
+	meta?: Querybuildertypesv5AggregationMetaDTO;
 	/**
 	 * @type array
 	 */
@@ -9144,6 +9216,57 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	upperBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
 }
 
+export enum Querybuildertypesv5BucketOptionsLinearDTOKind {
+	linear = 'linear',
+}
+export interface Querybuildertypesv5LinearBucketsSpecDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	maxValue: number;
+	/**
+	 * @type integer
+	 */
+	numBuckets?: number;
+}
+
+export interface Querybuildertypesv5BucketOptionsLinearDTO {
+	/**
+	 * @type string
+	 * @enum linear
+	 */
+	kind: Querybuildertypesv5BucketOptionsLinearDTOKind;
+	spec: Querybuildertypesv5LinearBucketsSpecDTO;
+}
+
+export enum Querybuildertypesv5BucketOptionsLogDTOKind {
+	log = 'log',
+}
+export interface Querybuildertypesv5LogBucketsSpecDTO {
+	/**
+	 * @type integer,null
+	 */
+	scale?: number | null;
+}
+
+export interface Querybuildertypesv5BucketOptionsLogDTO {
+	/**
+	 * @type string
+	 * @enum log
+	 */
+	kind: Querybuildertypesv5BucketOptionsLogDTOKind;
+	spec: Querybuildertypesv5LogBucketsSpecDTO;
+}
+
+export type Querybuildertypesv5BucketOptionsDTO =
+	| Querybuildertypesv5BucketOptionsLinearDTO
+	| Querybuildertypesv5BucketOptionsLogDTO;
+
+export enum Querybuildertypesv5BucketsKindDTO {
+	linear = 'linear',
+	log = 'log',
+}
 export type Querybuildertypesv5ColumnDescriptorDTOMeta = {
 	/**
 	 * @type string
@@ -9493,6 +9616,7 @@ export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
  * Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.
  */
 export interface Querybuildertypesv5QueryRangeRequestDTO {
+	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	compositeQuery?: Querybuildertypesv5CompositeQueryDTO;
 	/**
 	 * @type integer

frontend/src/api/v1/checkout/create.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	CheckoutRequestPayloadProps,
-	CheckoutSuccessPayloadProps,
-	PayloadProps,
-} from 'types/api/billing/checkout';
-
-const updateCreditCardApi = async (
-	props: CheckoutRequestPayloadProps,
-): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/checkout', {
-			url: props.url,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default updateCreditCardApi;

frontend/src/api/v1/portal/create.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	CheckoutRequestPayloadProps,
-	CheckoutSuccessPayloadProps,
-	PayloadProps,
-} from 'types/api/billing/checkout';
-
-const manageCreditCardApi = async (
-	props: CheckoutRequestPayloadProps,
-): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/portal', {
-			url: props.url,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default manageCreditCardApi;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -4,11 +4,12 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import updateCreditCardApi from 'api/v1/checkout/create';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import { SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -18,9 +19,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -38,7 +37,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -94,18 +93,23 @@ export default function ChatSupportGateway(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<Button
+					<AuthZTooltip
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
 					>
-						Add Credit Card
-					</Button>,
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -17,6 +17,7 @@ function InputWithLabel({
 	onChange,
 	className,
 	closeIcon,
+	disabled,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -27,6 +28,7 @@ function InputWithLabel({
 	onChange: (value: string) => void;
 	className?: string;
 	closeIcon?: React.ReactNode;
+	disabled?: boolean;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -53,6 +55,7 @@ function InputWithLabel({
 				type={type}
 				value={inputValue}
 				onChange={handleChange}
+				disabled={disabled}
 				name={label.toLowerCase()}
 				data-testid={`input-${label}`}
 			/>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -4,16 +4,17 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import updateCreditCardApi from 'api/v1/checkout/create';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
 import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -118,9 +119,7 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -138,7 +137,7 @@ function LaunchChatSupport({
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -193,18 +192,23 @@ function LaunchChatSupport({
 					>
 						Cancel
 					</Button>,
-					<Button
+					<AuthZTooltip
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
 					>
-						Add Credit Card
-					</Button>,
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,11 +1,18 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { QueryBuilderField } from './queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+} from './queryBuilderFields.utils';
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import { clearPreviousQuery } from './QueryV2/previousQuery.utils';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
@@ -14,12 +21,18 @@ import TraceOperator from './QueryV2/TraceOperator/TraceOperator';
 
 import './QueryBuilderV2.styles.scss';
 
+// Raw rows come from logs or spans; metrics only exist aggregated.
+const RAW_QUERY_SIGNALS = [
+	TelemetrytypesSignalDTO.logs,
+	TelemetrytypesSignalDTO.traces,
+];
+
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
 	panelType: newPanelType,
-	filterConfigs = {},
-	queryComponents,
-	isListViewPanel = false,
+	fieldsConfig,
+	allowedDataSources,
+	isRawQuery = false,
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
@@ -71,55 +84,48 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		};
 	}, []);
 
-	const isMultiQueryAllowed = useMemo(
-		() => !isListViewPanel || showTraceOperator,
-		[showTraceOperator, isListViewPanel],
+	const resolvedConfig = useMemo(
+		() =>
+			mergeQueryBuilderFieldsConfig(
+				isRawQuery ? RAW_QUERY_FIELDS : undefined,
+				fieldsConfig,
+			),
+		[isRawQuery, fieldsConfig],
 	);
 
-	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const additionalQueries = useMemo(
+		() =>
+			resolveQueryBuilderField(
+				QueryBuilderField.AdditionalQueries,
+				resolvedConfig,
+			),
+		[resolvedConfig],
+	);
 
-			return config;
-		}, []);
+	const formula = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Formula, resolvedConfig),
+		[resolvedConfig],
+	);
 
-	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				limit: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const isMultiQueryAllowed = useMemo(
+		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
+		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+	);
 
-			return config;
-		}, []);
+	const queryDataSources = useMemo(
+		() => allowedDataSources ?? (isRawQuery ? RAW_QUERY_SIGNALS : undefined),
+		[allowedDataSources, isRawQuery],
+	);
 
-	const queryFilterConfigs = useMemo(() => {
-		if (isListViewPanel) {
-			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
-				? listViewTracesFilterConfigs
-				: listViewLogFilterConfigs;
-		}
-
-		return filterConfigs;
-	}, [
-		isListViewPanel,
-		filterConfigs,
-		currentQuery.builder.queryData,
-		listViewLogFilterConfigs,
-		listViewTracesFilterConfigs,
-	]);
+	// What the editor renders. A single-query builder edits the first query alone, so
+	// the query list beside it must not advertise ones there is no way to reach.
+	const renderedQueries = useMemo(
+		() =>
+			isMultiQueryAllowed
+				? currentQuery.builder.queryData
+				: currentQuery.builder.queryData.slice(0, 1),
+		[isMultiQueryAllowed, currentQuery.builder.queryData],
+	);
 
 	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
 		if (
@@ -145,31 +151,46 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
-	const shouldShowFooter = useMemo(
-		() =>
-			(!showOnlyWhereClause && !isListViewPanel) ||
-			(currentDataSource === DataSource.TRACES && showTraceOperator),
-		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
-	);
-
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
-		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
+		[isRawQuery, showOnlyWhereClause, showTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
+		if (formula.hidden) {
+			return false;
+		}
+
 		if (currentDataSource === DataSource.TRACES) {
-			return !isListViewPanel;
+			return !isRawQuery;
 		}
 
 		return true;
-	}, [isListViewPanel, currentDataSource]);
+	}, [formula.hidden, isRawQuery, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
 		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
+	// Nothing left to add means no footer at all, rather than an empty bar under the
+	// last query.
+	const shouldShowFooter = useMemo(
+		() =>
+			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
+			((!showOnlyWhereClause && !isRawQuery) ||
+				(currentDataSource === DataSource.TRACES && showTraceOperator)),
+		[
+			additionalQueries.hidden,
+			showFormula,
+			showAddTraceOperator,
+			isRawQuery,
+			showTraceOperator,
+			showOnlyWhereClause,
+			currentDataSource,
+		],
+	);
+
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLDivElement>): void => {
 			const target = e.target as HTMLElement | null;
@@ -199,8 +220,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							key={currentQuery.builder.queryData[0].queryName}
 							index={0}
 							query={currentQuery.builder.queryData[0]}
-							filterConfigs={queryFilterConfigs}
-							queryComponents={queryComponents}
+							fieldsConfig={fieldsConfig}
+							allowedDataSources={queryDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
 							showTraceOperator={showTraceOperator}
 							hasTraceOperator={hasTraceOperator}
@@ -208,7 +229,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
-							isListViewPanel={isListViewPanel}
+							isRawQuery={isRawQuery}
 							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -216,14 +237,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							savePreviousQuery={savePreviousQuery}
 						/>
 					) : (
-						currentQuery.builder.queryData.map((query, index) => (
+						renderedQueries.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
 								key={query.queryName}
 								index={index}
 								query={query}
-								filterConfigs={queryFilterConfigs}
-								queryComponents={queryComponents}
+								fieldsConfig={fieldsConfig}
+								allowedDataSources={queryDataSources}
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
@@ -231,7 +252,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
-								isListViewPanel={isListViewPanel}
+								isRawQuery={isRawQuery}
 								signalSource={query.source as 'meter' | ''}
 								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 								signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -251,14 +272,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 									return (
 										<div key={formula.queryName} className="qb-formula">
-											<Formula
-												filterConfigs={filterConfigs}
-												query={query}
-												formula={formula}
-												index={index}
-												isAdditionalFilterEnable={false}
-												isQBV2
-											/>
+											<Formula query={query} formula={formula} index={index} isQBV2 />
 										</div>
 									);
 								})}
@@ -267,8 +281,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{shouldShowFooter && (
 						<QueryFooter
+							showAddQuery={!additionalQueries.hidden}
 							showAddFormula={showFormula}
+							addFormulaDisabled={formula.disabled}
+							addFormulaDisabledReason={formula.reason}
 							addNewBuilderQuery={addNewBuilderQuery}
+							addQueryDisabled={additionalQueries.disabled}
+							addQueryDisabledReason={additionalQueries.reason}
 							addNewFormula={addNewFormula}
 							addTraceOperator={addTraceOperator}
 							showAddTraceOperator={showAddTraceOperator}
@@ -277,7 +296,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{hasTraceOperator && (
 						<TraceOperator
-							isListViewPanel={isListViewPanel}
+							isRawQuery={isRawQuery}
+							fieldsConfig={resolvedConfig}
 							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
@@ -285,7 +305,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 				{showQueryList && (
 					<div className="query-names-section">
-						{currentQuery.builder.queryData.map((query) => (
+						{renderedQueries.map((query) => (
 							<div key={query.queryName} className="query-name">
 								{query.queryName}
 							</div>

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

@@ -23,6 +23,11 @@
 		align-items: center;
 		justify-content: center;
 		gap: var(--margin-2);
+
+		&--disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
 	}
 }
 

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

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -14,6 +15,16 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
+import {
+	QueryBuilderField,
+	QueryBuilderFieldsConfig,
+} from '../../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderFields,
+} from '../../queryBuilderFields.utils';
+
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -22,34 +33,25 @@ import './QueryAddOns.styles.scss';
 interface AddOn {
 	icon: React.ReactNode;
 	label: string;
-	key: string;
+	key: QueryBuilderField;
 	description?: string;
 	docLink?: string;
 }
 
-const ADD_ONS_KEYS = {
-	GROUP_BY: 'group_by',
-	HAVING: 'having',
-	ORDER_BY: 'order_by',
-	LIMIT: 'limit',
-	LEGEND_FORMAT: 'legend_format',
-	REDUCE_TO: 'reduce_to',
+const ADD_ONS_KEYS_TO_QUERY_PATH: Partial<Record<QueryBuilderField, string>> = {
+	[QueryBuilderField.GroupBy]: 'groupBy',
+	[QueryBuilderField.Having]: 'having.expression',
+	[QueryBuilderField.OrderBy]: 'orderBy',
+	[QueryBuilderField.Limit]: 'limit',
+	[QueryBuilderField.Legend]: 'legend',
+	[QueryBuilderField.ReduceTo]: 'reduceTo',
 };
 
-const ADD_ONS_KEYS_TO_QUERY_PATH = {
-	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
-	[ADD_ONS_KEYS.HAVING]: 'having.expression',
-	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
-	[ADD_ONS_KEYS.LIMIT]: 'limit',
-	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
-	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
-};
-
-const ADD_ONS = [
+const ADD_ONS: AddOn[] = [
 	{
 		icon: <BarChart size={14} />,
 		label: 'Group By',
-		key: ADD_ONS_KEYS.GROUP_BY,
+		key: QueryBuilderField.GroupBy,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
@@ -57,7 +59,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: ADD_ONS_KEYS.HAVING,
+		key: QueryBuilderField.Having,
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -66,7 +68,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: ADD_ONS_KEYS.ORDER_BY,
+		key: QueryBuilderField.OrderBy,
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -75,7 +77,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: ADD_ONS_KEYS.LIMIT,
+		key: QueryBuilderField.Limit,
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -84,7 +86,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: ADD_ONS_KEYS.LEGEND_FORMAT,
+		key: QueryBuilderField.Legend,
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -92,10 +94,10 @@ const ADD_ONS = [
 	},
 ];
 
-const REDUCE_TO = {
+const REDUCE_TO: AddOn = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: ADD_ONS_KEYS.REDUCE_TO,
+	key: QueryBuilderField.ReduceTo,
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
@@ -154,26 +156,26 @@ function TooltipContent({
 function QueryAddOns({
 	query,
 	version,
-	isListViewPanel,
+	isRawQuery,
 	showReduceTo,
 	panelType,
 	index,
+	fieldsConfig,
 	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
-	isListViewPanel: boolean;
+	isRawQuery: boolean;
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 	isForTraceOperator?: boolean;
 }): JSX.Element {
-	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
-
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
 	const initializedRef = useRef(false);
-	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
+	const prevAvailableKeysRef = useRef<Set<QueryBuilderField> | null>(null);
 
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
@@ -184,40 +186,62 @@ function QueryAddOns({
 
 	const { handleSetQueryData } = useQueryBuilder();
 
-	useEffect(() => {
-		if (isListViewPanel) {
-			setAddOns([]);
+	const supportedAddOns = useMemo((): AddOn[] => {
+		let addOns: AddOn[];
 
-			setSelectedViews([
-				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
-			]);
-
-			return;
-		}
-
-		let filteredAddOns: AddOn[];
 		if (panelType === PANEL_TYPES.VALUE) {
-			// Filter out all add-ons except legend format
-			filteredAddOns = ADD_ONS.filter(
-				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
-			);
+			addOns = ADD_ONS.filter((addOn) => addOn.key === QueryBuilderField.Legend);
+		} else if (query.dataSource === DataSource.METRICS) {
+			// Group by for metrics is offered by MetricsAggregateSection instead.
+			addOns = ADD_ONS.filter((addOn) => addOn.key !== QueryBuilderField.GroupBy);
 		} else {
-			filteredAddOns = Object.values(ADD_ONS);
-
-			if (query.dataSource === DataSource.METRICS) {
-				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
-				filteredAddOns = filteredAddOns.filter(
-					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
-				);
-			}
+			addOns = [...ADD_ONS];
 		}
 
-		if (showReduceTo) {
-			filteredAddOns = [...filteredAddOns, REDUCE_TO];
-		}
-		setAddOns(filteredAddOns);
+		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
+	}, [panelType, query.dataSource, showReduceTo]);
 
-		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
+	const resolvedFields = useMemo(
+		() =>
+			resolveQueryBuilderFields(
+				supportedAddOns.map((addOn) => addOn.key),
+				mergeQueryBuilderFieldsConfig(
+					isRawQuery ? RAW_QUERY_FIELDS : undefined,
+					fieldsConfig,
+				),
+			),
+		[supportedAddOns, fieldsConfig, isRawQuery],
+	);
+
+	const offeredAddOns = useMemo(
+		() =>
+			supportedAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.hidden),
+		[supportedAddOns, resolvedFields],
+	);
+
+	const pinnedAddOns = useMemo(
+		() => offeredAddOns.filter((addOn) => resolvedFields.get(addOn.key)?.pinned),
+		[offeredAddOns, resolvedFields],
+	);
+
+	const togglableAddOns = useMemo(
+		() => offeredAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.pinned),
+		[offeredAddOns, resolvedFields],
+	);
+
+	const isPinned = useCallback(
+		(key: QueryBuilderField): boolean => Boolean(resolvedFields.get(key)?.pinned),
+		[resolvedFields],
+	);
+
+	const isDisabled = useCallback(
+		(key: QueryBuilderField): boolean =>
+			Boolean(resolvedFields.get(key)?.disabled),
+		[resolvedFields],
+	);
+
+	useEffect(() => {
+		const availableAddOnKeys = new Set(offeredAddOns.map((a) => a.key));
 		const previousKeys = prevAvailableKeysRef.current;
 		const hasAvailabilityItemsChanged =
 			previousKeys !== null &&
@@ -231,27 +255,39 @@ function QueryAddOns({
 			const activeAddOnKeys = new Set(
 				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
 					.filter(([, path]) => hasValue(get(query, path)))
-					.map(([key]) => key),
+					.map(([key]) => key as QueryBuilderField),
 			);
 
-			// Initial seeding from query values on mount
+			// Initial seeding from query values on mount. A disabled field never opens.
 			setSelectedViews(
-				filteredAddOns.filter(
-					(addOn) =>
-						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
-				),
+				offeredAddOns.filter((addOn) => {
+					const resolved = resolvedFields.get(addOn.key);
+
+					return (
+						resolved?.pinned ||
+						(activeAddOnKeys.has(addOn.key) && !resolved?.disabled)
+					);
+				}),
 			);
 			return;
 		}
 
-		setSelectedViews((prev) =>
-			prev.filter((view) =>
-				filteredAddOns.some((addOn) => addOn.key === view.key),
-			),
-		);
-	}, [panelType, isListViewPanel, query, showReduceTo]);
+		setSelectedViews((prev) => {
+			const kept = prev.filter((view) => availableAddOnKeys.has(view.key));
+
+			const reopenedPinned = pinnedAddOns.filter(
+				(addOn) => !kept.some((view) => view.key === addOn.key),
+			);
+
+			return [...kept, ...reopenedPinned];
+		});
+	}, [offeredAddOns, pinnedAddOns, query]);
 
 	const handleOptionClick = (clickedAddOn: AddOn): void => {
+		if (isDisabled(clickedAddOn.key)) {
+			return;
+		}
+
 		const isAlreadySelected = selectedViews.some(
 			(view) => view.key === clickedAddOn.key,
 		);
@@ -265,7 +301,7 @@ function QueryAddOns({
 			// and existing group-by keys, prefill the legend using all group-by keys.
 			// This keeps existing custom legends intact and only helps seed a sensible default.
 			if (
-				clickedAddOn.key === ADD_ONS_KEYS.LEGEND_FORMAT &&
+				clickedAddOn.key === QueryBuilderField.Legend &&
 				isEmpty(query?.legend) &&
 				Array.isArray(query.groupBy) &&
 				query.groupBy.length > 0
@@ -310,9 +346,16 @@ function QueryAddOns({
 		[handleSetQueryData, index, query],
 	);
 
-	const handleRemoveView = useCallback((key: string): void => {
-		setSelectedViews((prev) => prev.filter((view) => view.key !== key));
-	}, []);
+	const handleRemoveView = useCallback(
+		(key: QueryBuilderField): void => {
+			if (isPinned(key)) {
+				return;
+			}
+
+			setSelectedViews((prev) => prev.filter((view) => view.key !== key));
+		},
+		[isPinned],
+	);
 
 	const handleChangeQueryLegend = useCallback(
 		(value: string) => {
@@ -341,7 +384,7 @@ function QueryAddOns({
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
-					{selectedViews.find((view) => view.key === 'group_by') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
 						<div className="add-on-content" data-testid="group-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -369,15 +412,17 @@ function QueryAddOns({
 										onChange={handleChangeGroupByKeys}
 									/>
 								</div>
-								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<ChevronUp size={16} />}
-									onClick={(): void => handleRemoveView('group_by')}
-								/>
+								{!isPinned(QueryBuilderField.GroupBy) && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
+									/>
+								)}
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'having') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
 						<div className="add-on-content" data-testid="having-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -397,11 +442,7 @@ function QueryAddOns({
 								</Tooltip>
 								<div className="input">
 									<HavingFilter
-										onClose={(): void => {
-											setSelectedViews((prev) =>
-												prev.filter((view) => view.key !== 'having'),
-											);
-										}}
+										onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
 										onChange={handleChangeHaving}
 										queryData={query}
 									/>
@@ -409,7 +450,7 @@ function QueryAddOns({
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'limit') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
 						<div className="add-on-content" data-testid="limit-content">
 							<InputWithLabel
 								label="Limit"
@@ -417,16 +458,12 @@ function QueryAddOns({
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
 								placeholder="Enter limit"
-								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'limit'),
-									);
-								}}
+								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'order_by') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
 						<div className="add-on-content" data-testid="order-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -449,22 +486,22 @@ function QueryAddOns({
 										entityVersion={version}
 										query={query}
 										onChange={handleChangeOrderByKeys}
-										isListViewPanel={isListViewPanel}
+										isRawQuery={isRawQuery}
 										isNewQueryV2
 									/>
 								</div>
-								{!isListViewPanel && (
+								{!isPinned(QueryBuilderField.OrderBy) && (
 									<Button
 										className="close-btn periscope-btn ghost"
 										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView('order_by')}
+										onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
 									/>
 								)}
 							</div>
 						</div>
 					)}
 
-					{selectedViews.find((view) => view.key === 'reduce_to') &&
+					{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
 						showReduceTo && (
 							<div className="add-on-content" data-testid="reduce-to-content">
 								<div className="periscope-input-with-label">
@@ -487,27 +524,25 @@ function QueryAddOns({
 										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 									</div>
 
-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView('reduce_to')}
-									/>
+									{!isPinned(QueryBuilderField.ReduceTo) && (
+										<Button
+											className="close-btn periscope-btn ghost"
+											icon={<ChevronUp size={16} />}
+											onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
+										/>
+									)}
 								</div>
 							</div>
 						)}
 
-					{selectedViews.find((view) => view.key === 'legend_format') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
 						<div className="add-on-content" data-testid="legend-format-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"
 								onChange={handleChangeQueryLegend}
 								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'legend_format'),
-									);
-								}}
+								onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
@@ -520,42 +555,49 @@ function QueryAddOns({
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
-					const oldKeys = selectedViews.map((view) => view.key);
+					const oldKeys: string[] = selectedViews.map((view) => view.key);
 					const toggledKey =
-						newKeys.find((k) => !oldKeys.includes(k)) ??
-						oldKeys.find((k) => !newKeys.includes(k));
+						newKeys.find((key) => !oldKeys.includes(key)) ??
+						oldKeys.find((key) => !newKeys.includes(key));
 					if (!toggledKey) {
 						return;
 					}
-					const clickedAddOn = addOns.find((a) => a.key === toggledKey);
+					const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
 					if (clickedAddOn) {
 						handleOptionClick(clickedAddOn);
 					}
 				}}
-				items={addOns.map((addOn) => ({
-					value: addOn.key,
-					label: (
-						<Tooltip
-							title={
-								<TooltipContent
-									label={addOn.label}
-									description={addOn.description}
-									docLink={addOn.docLink}
-								/>
-							}
-							placement="top"
-							mouseEnterDelay={0.5}
-						>
-							<span
-								className="add-on-tab-title"
-								data-testid={`query-add-on-${addOn.key}`}
+				items={togglableAddOns.map((addOn) => {
+					const resolved = resolvedFields.get(addOn.key);
+
+					return {
+						value: addOn.key,
+						label: (
+							<Tooltip
+								title={
+									<TooltipContent
+										label={addOn.label}
+										description={resolved?.reason ?? addOn.description}
+										docLink={resolved?.disabled ? undefined : addOn.docLink}
+									/>
+								}
+								placement="top"
+								mouseEnterDelay={0.5}
 							>
-								{addOn.icon}
-								{addOn.label}
-							</span>
-						</Tooltip>
-					),
-				}))}
+								<span
+									className={cx('add-on-tab-title', {
+										'add-on-tab-title--disabled': resolved?.disabled,
+									})}
+									aria-disabled={resolved?.disabled}
+									data-testid={`query-add-on-${addOn.key}`}
+								>
+									{addOn.icon}
+									{addOn.label}
+								</span>
+							</Tooltip>
+						),
+					};
+				})}
 			/>
 		</div>
 	);

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

@@ -8,6 +8,12 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import {
+	QueryBuilderField,
+	QueryBuilderFieldsConfig,
+} from '../../queryBuilderFields.types';
+import { resolveQueryBuilderField } from '../../queryBuilderFields.utils';
+
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -18,24 +24,32 @@ function QueryAggregationOptions({
 	onAggregationIntervalChange,
 	onChange,
 	queryData,
+	fieldsConfig,
 }: {
 	dataSource: DataSource;
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
 	queryData: IBuilderQuery | IBuilderTraceOperator;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
-	const showAggregationInterval = useMemo(() => {
+	const stepInterval = useMemo(() => {
 		if (panelType === PANEL_TYPES.VALUE) {
-			return false;
+			return { hidden: true, disabled: false, reason: undefined };
 		}
 
-		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
-			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
+		const isNonMetricSource =
+			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
+
+		if (
+			isNonMetricSource &&
+			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
+		) {
+			return { hidden: true, disabled: false, reason: undefined };
 		}
 
-		return true;
-	}, [dataSource, panelType]);
+		return resolveQueryBuilderField(QueryBuilderField.StepInterval, fieldsConfig);
+	}, [dataSource, panelType, fieldsConfig]);
 
 	const handleAggregationIntervalChange = (value: string): void => {
 		onAggregationIntervalChange(Number(value));
@@ -57,22 +71,24 @@ function QueryAggregationOptions({
 					}
 				/>
 
-				{showAggregationInterval && (
+				{!stepInterval.hidden && (
 					<div className="query-aggregation-interval">
 						<Tooltip
 							title={
-								<div>
-									Set the time interval for aggregation
-									<br />
-									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
-										target="_blank"
-										rel="noopener noreferrer"
-										style={{ color: '#1890ff', textDecoration: 'underline' }}
-									>
-										Learn about step intervals
-									</a>
-								</div>
+								stepInterval.reason ?? (
+									<div>
+										Set the time interval for aggregation
+										<br />
+										<a
+											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											target="_blank"
+											rel="noopener noreferrer"
+											style={{ color: '#1890ff', textDecoration: 'underline' }}
+										>
+											Learn about step intervals
+										</a>
+									</div>
+								)
 							}
 							placement="top"
 						>
@@ -92,6 +108,7 @@ function QueryAggregationOptions({
 								placeholder="Auto"
 								type="number"
 								onChange={handleAggregationIntervalChange}
+								disabled={stepInterval.disabled}
 								labelAfter
 							/>
 						</div>
@@ -105,6 +122,7 @@ function QueryAggregationOptions({
 QueryAggregationOptions.defaultProps = {
 	panelType: null,
 	onChange: undefined,
+	fieldsConfig: undefined,
 };
 
 export default QueryAggregationOptions;

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

@@ -17,13 +17,13 @@ function TraceOperatorSection({
 	const { currentQuery, panelType } = useQueryBuilder();
 
 	const showTraceOperatorWarning = useMemo(() => {
-		const isListViewPanel =
+		const isRawQueryPanel =
 			panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
 		const hasMultipleQueries = currentQuery.builder.queryData.length > 1;
 		const hasTraceOperator =
 			currentQuery.builder.queryTraceOperator &&
 			currentQuery.builder.queryTraceOperator.length > 0;
-		return isListViewPanel && hasMultipleQueries && !hasTraceOperator;
+		return isRawQueryPanel && hasMultipleQueries && !hasTraceOperator;
 	}, [
 		currentQuery?.builder?.queryData,
 		currentQuery?.builder?.queryTraceOperator,
@@ -77,50 +77,74 @@ export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
 	addTraceOperator,
+	showAddQuery = true,
 	showAddFormula = true,
 	showAddTraceOperator = false,
+	addQueryDisabled = false,
+	addQueryDisabledReason,
+	addFormulaDisabled = false,
+	addFormulaDisabledReason,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
 	addTraceOperator?: () => void;
 	showAddTraceOperator: boolean;
+	showAddQuery?: boolean;
 	showAddFormula?: boolean;
+	addQueryDisabled?: boolean;
+	addQueryDisabledReason?: string;
+	addFormulaDisabled?: boolean;
+	addFormulaDisabledReason?: string;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
 			<div className="qb-footer-container">
-				<div className="qb-add-new-query">
-					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
-						<Button
-							className="add-new-query-button periscope-btn "
-							icon={<Plus size={16} />}
-							onClick={addNewBuilderQuery}
-						/>
-					</Tooltip>
-				</div>
+				{showAddQuery && (
+					<div className="qb-add-new-query">
+						<Tooltip
+							title={
+								addQueryDisabledReason ?? (
+									<div style={{ textAlign: 'center' }}>Add New Query</div>
+								)
+							}
+						>
+							<Button
+								className="add-new-query-button periscope-btn "
+								data-testid="add-new-query-button"
+								icon={<Plus size={16} />}
+								onClick={addNewBuilderQuery}
+								disabled={addQueryDisabled}
+							/>
+						</Tooltip>
+					</div>
+				)}
 
 				{showAddFormula && (
 					<div className="qb-add-formula">
 						<Tooltip
 							title={
-								<div style={{ textAlign: 'center' }}>
-									Add New Formula
-									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
-										target="_blank"
-										style={{ textDecoration: 'underline' }}
-									>
-										{' '}
-										<br />
-										Learn more
-									</Typography.Link>
-								</div>
+								addFormulaDisabledReason ?? (
+									<div style={{ textAlign: 'center' }}>
+										Add New Formula
+										<Typography.Link
+											href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+											target="_blank"
+											style={{ textDecoration: 'underline' }}
+										>
+											{' '}
+											<br />
+											Learn more
+										</Typography.Link>
+									</div>
+								)
 							}
 						>
 							<Button
 								className="add-formula-button periscope-btn "
+								data-testid="add-formula-button"
 								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
+								disabled={addFormulaDisabled}
 							>
 								Add Formula
 							</Button>

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

@@ -20,6 +20,13 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { QueryBuilderField } from '../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+} from '../queryBuilderFields.utils';
+
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -31,8 +38,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		index,
 		queryVariant,
 		query,
-		filterConfigs,
-		isListViewPanel = false,
+		isRawQuery = false,
 		showTraceOperator = false,
 		hasTraceOperator = false,
 		version,
@@ -43,6 +49,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 		signalSourceChangeEnabled = false,
 		queriesCount = 1,
 		savePreviousQuery = false,
+		fieldsConfig,
+		allowedDataSources,
 	}: QueryProps & {
 		onSignalSourceChange: (value: string) => void;
 		signalSourceChangeEnabled: boolean;
@@ -53,7 +61,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 ): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
-	const showFunctions = query?.functions?.length > 0;
+	const hasQueryFunctions = query?.functions?.length > 0;
 	const { dataSource, builderQueryType } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
@@ -66,8 +74,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	} = useQueryOperations({
 		index,
 		query,
-		filterConfigs,
-		isListViewPanel,
+		isRawQuery,
 		entityVersion: version,
 		savePreviousQuery,
 	});
@@ -99,14 +106,31 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, builderQueryType],
 	);
 
+	const resolvedConfig = useMemo(
+		() =>
+			mergeQueryBuilderFieldsConfig(
+				isRawQuery ? RAW_QUERY_FIELDS : undefined,
+				fieldsConfig,
+			),
+		[isRawQuery, fieldsConfig],
+	);
+
+	const aggregation = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Aggregation, resolvedConfig),
+		[resolvedConfig],
+	);
+
+	const functions = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Functions, resolvedConfig),
+		[resolvedConfig],
+	);
+
 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
 			return false;
 		}
-		return (
-			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
-		);
-	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
+		return dataSource === DataSource.TRACES && (hasTraceOperator || isRawQuery);
+	}, [hasTraceOperator, isRawQuery, showTraceOperator, dataSource]);
 
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@@ -149,12 +173,15 @@ export const QueryV2 = forwardRef(function QueryV2(
 									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
-										(version && version === ENTITY_VERSION_V4) ||
-										query.dataSource === DataSource.LOGS ||
-										query.dataSource === DataSource.METRICS ||
-										showFunctions ||
-										false
+										!functions.hidden &&
+										((version && version === ENTITY_VERSION_V4) ||
+											query.dataSource === DataSource.LOGS ||
+											query.dataSource === DataSource.METRICS ||
+											hasQueryFunctions ||
+											false)
 									}
+									functionsDisabled={functions.disabled}
+									functionsDisabledReason={functions.reason}
 									isCollapsed={isCollapsed}
 									showTraceOperator={showTraceOperator}
 									entityType="query"
@@ -167,7 +194,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
 									showDeleteButton={false}
 									showCloneOption={false}
-									isListViewPanel={isListViewPanel}
+									isRawQuery={isRawQuery}
+									allowedDataSources={allowedDataSources}
 									index={index}
 									queryVariant={queryVariant}
 									onChangeDataSource={handleChangeDataSource}
@@ -267,7 +295,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 						</div>
 
 						{!showOnlyWhereClause &&
-							!isListViewPanel &&
+							!aggregation.hidden &&
 							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
@@ -277,6 +305,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onAggregationIntervalChange={handleChangeAggregateEvery}
 									onChange={handleChangeAggregation}
 									queryData={query}
+									fieldsConfig={fieldsConfig}
 								/>
 							)}
 
@@ -297,9 +326,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 									index={index}
 									query={query}
 									version="v3"
-									isListViewPanel={isListViewPanel}
+									isRawQuery={isRawQuery}
 									showReduceTo={showReduceTo}
 									panelType={panelType}
+									fieldsConfig={fieldsConfig}
 								/>
 							)}
 					</div>

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

@@ -11,6 +11,7 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { QueryBuilderFieldsConfig } from '../../queryBuilderFields.types';
 import QueryAddOns from '../QueryAddOns/QueryAddOns';
 import QueryAggregation from '../QueryAggregation/QueryAggregation';
 import TraceOperatorEditor from './TraceOperatorEditor';
@@ -19,10 +20,12 @@ import './TraceOperator.styles.scss';
 
 export default function TraceOperator({
 	traceOperator,
-	isListViewPanel = false,
+	isRawQuery = false,
+	fieldsConfig,
 }: {
 	traceOperator: IBuilderTraceOperator;
-	isListViewPanel?: boolean;
+	isRawQuery?: boolean;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
 	const { panelType, removeTraceOperator } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -58,12 +61,12 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
+		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(
 						'qb-trace-operator-label-with-input',
-						!isListViewPanel && 'qb-trace-operator-arrow',
+						!isRawQuery && 'qb-trace-operator-arrow',
 					)}
 				>
 					<Typography.Text className="label">Trace Operator</Typography.Text>
@@ -76,9 +79,9 @@ export default function TraceOperator({
 					</div>
 				</div>
 
-				{!isListViewPanel && (
+				{!isRawQuery && (
 					<div className="qb-trace-operator-aggregation-container">
-						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
+						<div className={cx(!isRawQuery && 'qb-trace-operator-arrow')}>
 							<QueryAggregation
 								dataSource={DataSource.TRACES}
 								key={`query-search-${traceOperator.queryName}`}
@@ -86,12 +89,13 @@ export default function TraceOperator({
 								onAggregationIntervalChange={handleChangeAggregateEvery}
 								onChange={handleChangeAggregation}
 								queryData={traceOperator}
+								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 						<div
 							className={cx(
 								'qb-trace-operator-add-ons-container',
-								!isListViewPanel && 'qb-trace-operator-arrow',
+								!isRawQuery && 'qb-trace-operator-arrow',
 							)}
 						>
 							<QueryAddOns
@@ -99,9 +103,10 @@ export default function TraceOperator({
 								query={traceOperator}
 								version="v3"
 								isForTraceOperator
-								isListViewPanel={false}
+								isRawQuery={false}
 								showReduceTo={false}
 								panelType={panelType}
+								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 					</div>

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

@@ -142,7 +142,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			isMetricsDataSource: false,
 			operators: [],
 			spaceAggregationOptions: [],
-			listOfAdditionalFilters: [],
 			handleChangeOperator: jest.fn(),
 			handleSpaceAggregationChange: jest.fn(),
 			handleChangeAggregatorAttribute: jest.fn(),
@@ -152,7 +151,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 				jest.fn() as unknown as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
 			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
-			listOfAdditionalFormulaFilters: [],
 		});
 	});
 

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

@@ -95,7 +95,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.VALUE}
 				index={0}
@@ -119,7 +119,7 @@ describe('QueryAddOns', () => {
 					groupBy: ['service.name'],
 				})}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -135,7 +135,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel
+				isRawQuery
 				showReduceTo={false}
 				panelType={PANEL_TYPES.LIST}
 				index={0}
@@ -151,7 +151,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -176,7 +176,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -195,7 +195,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -211,7 +211,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ reduceTo: ReduceOperators.SUM })}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -234,7 +234,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -286,7 +286,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -314,7 +314,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}

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

@@ -0,0 +1,46 @@
+import { render, screen } from 'tests/test-utils';
+
+import QueryFooter from '../QueryV2/QueryFooter/QueryFooter';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): {
+		currentQuery: { builder: { queryData: unknown[] } };
+		panelType: string;
+	} => ({
+		currentQuery: { builder: { queryData: [] } },
+		panelType: 'time_series',
+	}),
+}));
+
+const noop = (): void => {};
+
+describe('QueryFooter', () => {
+	it('offers both buttons by default', () => {
+		render(
+			<QueryFooter
+				addNewBuilderQuery={noop}
+				addNewFormula={noop}
+				showAddTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.getByTestId('add-new-query-button')).toBeInTheDocument();
+		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
+	});
+
+	// A kind whose request takes a single query (Heatmap) hides the button outright
+	// rather than disabling it — a query it adds is one the builder cannot render.
+	it('drops the Add New Query button when the caller withholds it', () => {
+		render(
+			<QueryFooter
+				addNewBuilderQuery={noop}
+				addNewFormula={noop}
+				showAddQuery={false}
+				showAddTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.queryByTestId('add-new-query-button')).not.toBeInTheDocument();
+		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,140 @@
+import { QueryBuilderField } from '../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+	resolveQueryBuilderFields,
+} from '../queryBuilderFields.utils';
+
+const SUPPORTED = [
+	QueryBuilderField.GroupBy,
+	QueryBuilderField.Having,
+	QueryBuilderField.OrderBy,
+	QueryBuilderField.Limit,
+	QueryBuilderField.Legend,
+];
+
+describe('resolveQueryBuilderField', () => {
+	it('leaves an unconfigured field available', () => {
+		expect(resolveQueryBuilderField(QueryBuilderField.Having)).toStrictEqual({
+			hidden: false,
+			disabled: false,
+			pinned: false,
+		});
+	});
+
+	it('hides a field configured hidden', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
+			[QueryBuilderField.Having]: { state: 'hidden' },
+		});
+
+		expect(resolved.hidden).toBe(true);
+		expect(resolved.disabled).toBe(false);
+	});
+
+	it('carries the reason through on a disabled field', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
+			[QueryBuilderField.Having]: {
+				state: 'disabled',
+				reason: 'Having filters aggregated results.',
+			},
+		});
+
+		expect(resolved).toStrictEqual({
+			hidden: false,
+			disabled: true,
+			reason: 'Having filters aggregated results.',
+			pinned: false,
+		});
+	});
+
+	it('pins a field configured pinned', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.OrderBy, {
+			[QueryBuilderField.OrderBy]: { state: 'pinned' },
+		});
+
+		expect(resolved.pinned).toBe(true);
+		expect(resolved.hidden).toBe(false);
+	});
+
+	it('only ever resolves one state at a time', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
+			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },
+		});
+
+		expect([resolved.hidden, resolved.disabled, resolved.pinned]).toStrictEqual([
+			false,
+			true,
+			false,
+		]);
+	});
+});
+
+describe('resolveQueryBuilderFields', () => {
+	it('resolves every supported field and nothing else', () => {
+		const resolved = resolveQueryBuilderFields(SUPPORTED);
+
+		expect([...resolved.keys()]).toStrictEqual(SUPPORTED);
+	});
+
+	it('cannot widen beyond what the builder supports', () => {
+		const resolved = resolveQueryBuilderFields([QueryBuilderField.Legend], {
+			[QueryBuilderField.ReduceTo]: { state: 'pinned' },
+		});
+
+		expect(resolved.has(QueryBuilderField.ReduceTo)).toBe(false);
+	});
+});
+
+describe('mergeQueryBuilderFieldsConfig', () => {
+	it('returns the override when there is no baseline', () => {
+		const override = { [QueryBuilderField.Limit]: { state: 'hidden' } } as const;
+
+		expect(mergeQueryBuilderFieldsConfig(undefined, override)).toBe(override);
+	});
+
+	it('returns the baseline when there is no override', () => {
+		expect(mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, undefined)).toBe(
+			RAW_QUERY_FIELDS,
+		);
+	});
+
+	it('lets the override win per field, leaving the rest of the baseline intact', () => {
+		const merged = mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, {
+			[QueryBuilderField.Having]: { state: 'disabled', reason: 'no aggregation' },
+		});
+
+		expect(merged?.[QueryBuilderField.Having]).toStrictEqual({
+			state: 'disabled',
+			reason: 'no aggregation',
+		});
+		expect(merged?.[QueryBuilderField.GroupBy]).toStrictEqual({
+			state: 'hidden',
+		});
+		expect(merged?.[QueryBuilderField.OrderBy]).toStrictEqual({
+			state: 'pinned',
+		});
+	});
+});
+
+describe('RAW_QUERY_FIELDS', () => {
+	it('reduces an aggregate surface to a pinned order by', () => {
+		const resolved = resolveQueryBuilderFields(SUPPORTED, RAW_QUERY_FIELDS);
+
+		const visible = [...resolved.entries()]
+			.filter(([, field]) => !field.hidden)
+			.map(([key]) => key);
+
+		expect(visible).toStrictEqual([QueryBuilderField.OrderBy]);
+		expect(resolved.get(QueryBuilderField.OrderBy)?.pinned).toBe(true);
+	});
+
+	it('leaves additional queries alone, so trace matching still allows several', () => {
+		expect(
+			resolveQueryBuilderField(
+				QueryBuilderField.AdditionalQueries,
+				RAW_QUERY_FIELDS,
+			).hidden,
+		).toBe(false);
+	});
+});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -0,0 +1,36 @@
+/**
+ * Everything the query builder can surface.
+ *
+ * The per-query values double as the add-on identities the builder renders
+ * (`data-testid="query-add-on-<value>"`), so they are part of the DOM contract and must
+ * not be renamed to match the member names.
+ */
+export enum QueryBuilderField {
+	// Per query
+	Aggregation = 'aggregation',
+	StepInterval = 'step_interval',
+	Functions = 'functions',
+	GroupBy = 'group_by',
+	Having = 'having',
+	OrderBy = 'order_by',
+	Limit = 'limit',
+	Legend = 'legend_format',
+	ReduceTo = 'reduce_to',
+	// Builder level
+	Formula = 'formula',
+	AdditionalQueries = 'additional_queries',
+}
+
+/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
+export type QueryBuilderFieldRule =
+	| { state: 'hidden' }
+	| { state: 'disabled'; reason: string }
+	| { state: 'pinned' };
+
+/**
+ * A caller's narrowing of the builder's surface. The builder works out which fields suit
+ * the current data source and panel type first; this can only take away from that set.
+ */
+export type QueryBuilderFieldsConfig = Partial<
+	Record<QueryBuilderField, QueryBuilderFieldRule>
+>;

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -0,0 +1,88 @@
+import {
+	QueryBuilderField,
+	QueryBuilderFieldRule,
+	QueryBuilderFieldsConfig,
+} from './queryBuilderFields.types';
+
+export interface ResolvedQueryBuilderField {
+	hidden: boolean;
+	disabled: boolean;
+	reason?: string;
+	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
+	pinned: boolean;
+}
+
+const AVAILABLE: ResolvedQueryBuilderField = {
+	hidden: false,
+	disabled: false,
+	pinned: false,
+};
+
+function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
+	switch (rule.state) {
+		case 'hidden':
+			return { hidden: true, disabled: false, pinned: false };
+		case 'disabled':
+			return {
+				hidden: false,
+				disabled: true,
+				reason: rule.reason,
+				pinned: false,
+			};
+		case 'pinned':
+			return { hidden: false, disabled: false, pinned: true };
+		default:
+			return AVAILABLE;
+	}
+}
+
+export function resolveQueryBuilderField(
+	field: QueryBuilderField,
+	config?: QueryBuilderFieldsConfig,
+): ResolvedQueryBuilderField {
+	const rule = config?.[field];
+
+	return rule ? fromRule(rule) : AVAILABLE;
+}
+
+/**
+ * Fields absent from `supported` are hidden whatever the config says, so a config can
+ * only ever take away.
+ */
+export function resolveQueryBuilderFields(
+	supported: readonly QueryBuilderField[],
+	config?: QueryBuilderFieldsConfig,
+): Map<QueryBuilderField, ResolvedQueryBuilderField> {
+	return new Map(
+		supported.map((field) => [field, resolveQueryBuilderField(field, config)]),
+	);
+}
+
+/**
+ * The surface a raw-row builder starts from, layered under a caller's own config.
+ * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
+ * queries when trace matching is on.
+ */
+export const RAW_QUERY_FIELDS: QueryBuilderFieldsConfig = {
+	[QueryBuilderField.Aggregation]: { state: 'hidden' },
+	[QueryBuilderField.StepInterval]: { state: 'hidden' },
+	[QueryBuilderField.Functions]: { state: 'hidden' },
+	[QueryBuilderField.GroupBy]: { state: 'hidden' },
+	[QueryBuilderField.Having]: { state: 'hidden' },
+	[QueryBuilderField.Limit]: { state: 'hidden' },
+	[QueryBuilderField.Legend]: { state: 'hidden' },
+	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
+	[QueryBuilderField.Formula]: { state: 'hidden' },
+	[QueryBuilderField.OrderBy]: { state: 'pinned' },
+};
+
+export function mergeQueryBuilderFieldsConfig(
+	baseline: QueryBuilderFieldsConfig | undefined,
+	override: QueryBuilderFieldsConfig | undefined,
+): QueryBuilderFieldsConfig | undefined {
+	if (!baseline) {
+		return override;
+	}
+
+	return override ? { ...baseline, ...override } : baseline;
+}

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -4,14 +4,18 @@ import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
 	type,
 	className,
+	withPortal,
 }: {
 	type?: 'button' | 'text' | 'tooltip';
 	className?: string;
+	withPortal?: false;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicense, activeLicenseRefetch } = useAppContext();
@@ -36,17 +40,25 @@ function RefreshPaymentStatus({
 	};
 
 	const button = (
-		<Button
-			variant="link"
-			color={type === 'text' ? 'none' : 'secondary'}
-			size="md"
-			className={className}
-			onClick={handleRefreshPaymentStatus}
-			prefix={<RefreshCcw size={14} />}
-			loading={isLoading}
+		<AuthZTooltip
+			checks={
+				activeLicense ? [buildLicenseUpdatePermission(activeLicense.id)] : []
+			}
+			enabled={!!activeLicense}
+			withPortal={withPortal}
 		>
-			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-		</Button>
+			<Button
+				variant="link"
+				color={type === 'text' ? 'none' : 'secondary'}
+				size="md"
+				className={className}
+				onClick={handleRefreshPaymentStatus}
+				prefix={<RefreshCcw size={14} />}
+				loading={isLoading}
+			>
+				{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+			</Button>
+		</AuthZTooltip>
 	);
 
 	return (
@@ -62,6 +74,7 @@ function RefreshPaymentStatus({
 RefreshPaymentStatus.defaultProps = {
 	type: 'button',
 	className: undefined,
+	withPortal: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/constants/panelTypes.ts

@@ -31,6 +31,8 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
+		// V2-only kind; it renders through the V2 panel registry.
+		[PANEL_TYPES.HEATMAP]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -32,7 +32,6 @@ import {
 	MeterAggregateOperator,
 	MetricAggregateOperator,
 	NumberOperators,
-	QueryAdditionalFilter,
 	QueryBuilderData,
 	ReduceOperators,
 	StringOperators,
@@ -104,43 +103,6 @@ export const metricsSpaceAggregationOperatorsByType = {
 	ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
 };
 
-export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
-	metrics: [
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-		{ text: 'Having', field: 'having' },
-	],
-	logs: [
-		{ text: 'Order by', field: 'orderBy' },
-		{ text: 'Limit', field: 'limit' },
-		{ text: 'Having', field: 'having' },
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-	],
-	traces: [
-		{ text: 'Order by', field: 'orderBy' },
-		{ text: 'Limit', field: 'limit' },
-		{ text: 'Having', field: 'having' },
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-	],
-};
-
-const commonFormulaFilters: QueryAdditionalFilter[] = [
-	{
-		text: 'Having',
-		field: 'having',
-	},
-	{ text: 'Order by', field: 'orderBy' },
-	{ text: 'Limit', field: 'limit' },
-];
-
-export const mapOfFormulaToFilters: Record<
-	DataSource,
-	QueryAdditionalFilter[]
-> = {
-	metrics: commonFormulaFilters,
-	logs: commonFormulaFilters,
-	traces: commonFormulaFilters,
-};
-
 export const REDUCE_TO_VALUES: SelectOption<ReduceOperators, string>[] = [
 	{ value: ReduceOperators.LAST, label: 'Latest of values in timeframe' },
 	{ value: ReduceOperators.SUM, label: 'Sum of values in timeframe' },
@@ -376,6 +338,7 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
+	HEATMAP = 'heatmap',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 
@@ -623,6 +586,7 @@ export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
 	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
 	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
+	[PANEL_TYPES.HEATMAP]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };
 

frontend/src/constants/queryBuilderOperators.ts

@@ -527,6 +527,21 @@ export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
 	},
 ];
 
+/**
+ * A heatmap's Y axis is the `le` labels themselves, so every percentile draws the grid a
+ * count already draws. Sum is also what the statement builder forces on a histogram
+ * heatmap whatever is asked for, so it is the only honest option to offer.
+ */
+export const metricsHeatmapHistogramSpaceAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.SUM,
+		label: 'Sum',
+	},
+];
+
 export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
 	string,
 	string

frontend/src/constants/reactQueryKeys.ts

@@ -15,7 +15,6 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
 	GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
 	DASHBOARD_BY_ID: 'DASHBOARD_BY_ID',
-	GET_BILLING_USAGE: 'GET_BILLING_USAGE',
 	GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',

frontend/src/container/AppLayout/index.tsx

@@ -16,11 +16,13 @@ import * as Sentry from '@sentry/react';
 import { Toaster } from '@signozhq/ui/sonner';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Flex } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
 import logEvent from 'api/common/logEvent';
-import manageCreditCardApi from 'api/v1/portal/create';
+import { updateSubscription } from 'api/generated/services/subscriptions';
+import type { UpdateSubscription200 } from 'api/generated/services/sigNoz.schemas';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import getUserVersion from 'api/v1/version/get';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
@@ -30,6 +32,8 @@ import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
@@ -63,8 +67,7 @@ import {
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
-import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	ChangelogSchema,
 	DeploymentType,
@@ -77,7 +80,6 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
-import { USER_ROLES } from 'types/roles';
 import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
@@ -166,9 +168,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		return Math.abs(currentDate.diff(userCreationDate, 'day'));
 	}, [user.createdAt]);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: UpdateSubscription200): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -186,7 +186,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	};
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(manageCreditCardApi, {
+		useMutation(updateSubscription, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -469,10 +469,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		if (user.role === USER_ROLES.ADMIN) {
-			history.push(ROUTES.BILLING);
-		}
-	}, [user.role]);
+		history.push(ROUTES.BILLING);
+	}, []);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
@@ -586,25 +584,21 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<div>
 						Our systems are taking longer than expected for your trial workspace.
 						Please{' '}
-						{user.role === USER_ROLES.ADMIN ? (
-							<span>
-								<a
-									className="upgrade-link"
-									onClick={(): void => {
-										notifications.destroy('slow-api-warning');
+						<span>
+							<a
+								className="upgrade-link"
+								onClick={(): void => {
+									notifications.destroy('slow-api-warning');
 
-										logEvent(`Slow API Banner: Upgrade clicked`, {});
+									logEvent(`Slow API Banner: Upgrade clicked`, {});
 
-										handleUpgrade();
-									}}
-								>
-									upgrade
-								</a>
-								your workspace for a smoother experience.
-							</span>
-						) : (
-							'contact your administrator for upgrading to a paid plan for a smoother experience.'
-						)}
+									handleUpgrade();
+								}}
+							>
+								upgrade
+							</a>
+							your workspace for a smoother experience.
+						</span>
 					</div>
 				),
 				duration: 60000,
@@ -794,22 +788,18 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 							<div className="trial-expiry-banner">
 								You are in free trial period. Your free trial will end on{' '}
 								<span>{getFormattedDate(trialInfo?.trialEnd || Date.now())}.</span>
-								{user.role === USER_ROLES.ADMIN ? (
-									<span>
+								<span>
+									{' '}
+									Please{' '}
+									<a className="upgrade-link" onClick={handleUpgrade}>
+										upgrade
+									</a>
+									to continue using SigNoz features.
+									<span className="refresh-payment-status">
 										{' '}
-										Please{' '}
-										<a className="upgrade-link" onClick={handleUpgrade}>
-											upgrade
-										</a>
-										to continue using SigNoz features.
-										<span className="refresh-payment-status">
-											{' '}
-											| Already upgraded? <RefreshPaymentStatus type="text" />
-										</span>
+										| Already upgraded? <RefreshPaymentStatus type="text" />
 									</span>
-								) : (
-									'Please contact your administrator for upgrading to a paid plan.'
-								)}
+								</span>
 							</div>
 						)}
 
@@ -826,22 +816,25 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 									)}
 									.
 								</span>
-								{user.role === USER_ROLES.ADMIN ? (
-									<span>
-										{' '}
-										Please{' '}
-										<a className="upgrade-link" onClick={handleFailedPayment}>
+								<span>
+									{' '}
+									Please{' '}
+									<AuthZTooltip checks={SubscriptionManagePermissions}>
+										<Button
+											variant="link"
+											color="none"
+											className="upgrade-link"
+											onClick={handleFailedPayment}
+										>
 											pay the bill
-										</a>
-										to continue using SigNoz features.
-										<span className="refresh-payment-status">
-											{' '}
-											| Already paid? <RefreshPaymentStatus type="text" />
-										</span>
+										</Button>
+									</AuthZTooltip>
+									to continue using SigNoz features.
+									<span className="refresh-payment-status">
+										{' '}
+										| Already paid? <RefreshPaymentStatus type="text" />
 									</span>
-								) : (
-									' Please contact your administrator to pay the bill.'
-								)}
+								</span>
 							</div>
 						)}
 					</div>

frontend/src/container/BillingContainer/BillingContainer.authz.test.tsx

@@ -0,0 +1,113 @@
+import {
+	SubscriptionCreatePermission,
+	SubscriptionReadPermission,
+	SubscriptionUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzAllow,
+	setupAuthzDeny,
+} from 'lib/authz/utils/authz-test-utils';
+import { trialConvertedToSubscriptionResponse } from 'mocks-server/__mockdata__/licenses';
+import { server } from 'mocks-server/server';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import BillingContainer from './BillingContainer';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('BillingContainer - AuthZ', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders usage and enables actions when all subscription permissions are granted', async () => {
+		server.use(setupAuthzAdmin());
+
+		render(<BillingContainer />);
+
+		await expect(
+			screen.findByRole('columnheader', { name: /data ingested/i }),
+		).resolves.toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeEnabled();
+		});
+		expect(screen.queryByText(/not authorized/i)).not.toBeInTheDocument();
+	});
+
+	it('blocks the usage section when subscription read is denied', async () => {
+		server.use(setupAuthzDeny(SubscriptionReadPermission));
+
+		render(<BillingContainer />);
+
+		await expect(
+			screen.findByText(/not authorized/i),
+		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('header-billing-button')).toBeInTheDocument();
+		expect(
+			screen.queryByRole('columnheader', { name: /data ingested/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('disables upgrade when subscription create is denied', async () => {
+		server.use(setupAuthzAllow(SubscriptionReadPermission));
+
+		render(<BillingContainer />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+		expect(screen.getByTestId('upgrade-plan-button')).toBeDisabled();
+	});
+
+	it('disables manage billing when subscription update is denied', async () => {
+		server.use(
+			setupAuthzAllow(SubscriptionReadPermission, SubscriptionCreatePermission),
+		);
+
+		render(
+			<BillingContainer />,
+			{},
+			{
+				appContextOverrides: {
+					trialInfo: trialConvertedToSubscriptionResponse.data,
+				},
+			},
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+		expect(screen.queryByTestId('upgrade-plan-button')).not.toBeInTheDocument();
+	});
+
+	it('disables manage billing when subscription list is denied', async () => {
+		server.use(
+			setupAuthzAllow(
+				SubscriptionReadPermission,
+				SubscriptionCreatePermission,
+				SubscriptionUpdatePermission,
+			),
+		);
+
+		render(
+			<BillingContainer />,
+			{},
+			{
+				appContextOverrides: {
+					trialInfo: trialConvertedToSubscriptionResponse.data,
+				},
+			},
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+	});
+});

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -4,7 +4,7 @@
 	margin: 0 auto var(--spacing-20);
 
 	.pageHeader {
-		margin-bottom: var(--spacing-8);
+		margin-bottom: var(--spacing-4);
 
 		.pageHeaderTitle {
 			font-weight: var(--label-medium-500-font-weight);
@@ -41,6 +41,8 @@
 	}
 
 	.pageInfo {
+		margin-bottom: var(--spacing-4);
+
 		:global(.ant-card) {
 			padding: var(--padding-3);
 		}
@@ -59,7 +61,7 @@
 	}
 
 	.billingDetails {
-		margin: var(--spacing-12) 0;
+		margin: var(--spacing-4) 0;
 		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		overflow: hidden;
@@ -128,7 +130,7 @@
 	}
 
 	.upgradePlanBenefits {
-		margin: 0 var(--spacing-4);
+		margin: 0;
 		border: 1px solid var(--l1-border);
 		border-radius: 5px;
 		padding: 0 var(--padding-12);
@@ -176,7 +178,7 @@
 	}
 
 	.billingUpdateNote {
-		margin-top: var(--spacing-8);
+		margin-top: var(--spacing-4);
 		font-family: var(--font-family-inter);
 		font-size: var(--font-size-sm);
 		font-style: normal;

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -1,9 +1,11 @@
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { billingSuccessResponse } from 'mocks-server/__mockdata__/billing';
 import {
 	licensesSuccessResponse,
 	notOfTrailResponse,
 	trialConvertedToSubscriptionResponse,
 } from 'mocks-server/__mockdata__/licenses';
+import { server } from 'mocks-server/server';
 import { act, render, screen, getAppContextMock } from 'tests/test-utils';
 import APIError from 'types/api/error';
 import {
@@ -15,11 +17,6 @@ import { getFormattedDate } from 'utils/timeUtils';
 
 import BillingContainer from './BillingContainer';
 
-jest.mock('hooks/useActiveLicenseKey/useActiveLicenseKey', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({ licenseKey: 'test-key', isLoading: false })),
-}));
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
@@ -31,14 +28,22 @@ window.ResizeObserver =
 describe('BillingContainer', () => {
 	jest.setTimeout(30000);
 
+	beforeEach(() => {
+		server.use(setupAuthzAdmin());
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
 	it('Component should render', async () => {
 		render(<BillingContainer />);
 
-		const dataInjection = screen.getByRole('columnheader', {
+		const dataInjection = await screen.findByRole('columnheader', {
 			name: /data ingested/i,
 		});
 		expect(dataInjection).toBeInTheDocument();
-		const pricePerUnit = screen.getByRole('columnheader', {
+		const pricePerUnit = await screen.findByRole('columnheader', {
 			name: /price per unit/i,
 		});
 		expect(pricePerUnit).toBeInTheDocument();
@@ -49,13 +54,15 @@ describe('BillingContainer', () => {
 
 		const dayRemainingInBillingPeriod = await screen.findByText(
 			/Please upgrade plan now to retain your data./i,
+			{},
+			{ timeout: 5000 },
 		);
 		expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 
 		const upgradePlanButton = screen.getByTestId('upgrade-plan-button');
 		expect(upgradePlanButton).toBeInTheDocument();
 
-		const dollar = await screen.findByText(/\$1,278.3/i);
+		const dollar = await screen.findByText(/\$1,278.3/i, {}, { timeout: 5000 });
 		expect(dollar).toBeInTheDocument();
 
 		const currentBill = await screen.findByText('billing');
@@ -86,7 +93,9 @@ describe('BillingContainer', () => {
 
 			await expect(screen.findByText('Free Trial')).resolves.toBeInTheDocument();
 			await expect(screen.findByText('billing')).resolves.toBeInTheDocument();
-			await expect(screen.findByText(/\$0/i)).resolves.toBeInTheDocument();
+			await expect(
+				screen.findByText(/\$0/i, {}, { timeout: 5000 }),
+			).resolves.toBeInTheDocument();
 
 			await expect(
 				screen.findByText(
@@ -132,7 +141,7 @@ describe('BillingContainer', () => {
 			const currentBill = await screen.findByText('billing');
 			expect(currentBill).toBeInTheDocument();
 
-			const dollar0 = await screen.findByText(/\$0/i);
+			const dollar0 = await screen.findByText(/\$0/i, {}, { timeout: 5000 });
 			expect(dollar0).toBeInTheDocument();
 
 			const onTrail = await screen.findByText(
@@ -250,7 +259,11 @@ describe('BillingContainer', () => {
 			billingSuccessResponse.data.billingPeriodStart,
 		)} to ${getFormattedDate(billingSuccessResponse.data.billingPeriodEnd)}`;
 
-		const billingPeriod = await findByText(billingPeriodText);
+		const billingPeriod = await findByText(
+			billingPeriodText,
+			{},
+			{ timeout: 5000 },
+		);
 		expect(billingPeriod).toBeInTheDocument();
 
 		const currentBill = await screen.findByText('billing');

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -3,7 +3,7 @@ import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
 	Card,
@@ -15,25 +15,35 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, {
-	BreakdownEntry,
-	UsageResponsePayloadProps,
-} from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
-import updateCreditCardApi from 'api/v1/checkout/create';
-import manageCreditCardApi from 'api/v1/portal/create';
+import type {
+	CreateSubscription201,
+	GetSubscription200,
+	SubscriptiontypesGettableSubscriptionUsageDTO,
+	SubscriptiontypesSubscriptionUsageBreakdownDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	createSubscription,
+	updateSubscription,
+	useGetSubscription,
+} from 'api/generated/services/subscriptions';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useAxiosError from 'hooks/useAxiosError';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
-import useActiveLicenseKey from 'hooks/useActiveLicenseKey/useActiveLicenseKey';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+import {
+	SubscriptionCreatePermission,
+	SubscriptionManagePermissions,
+	SubscriptionReadPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useAppContext } from 'providers/App/App';
-import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
@@ -135,7 +145,7 @@ export default function BillingContainer(): JSX.Element {
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
 	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
-		Partial<UsageResponsePayloadProps>
+		Partial<SubscriptiontypesGettableSubscriptionUsageDTO>
 	>({});
 
 	const {
@@ -146,7 +156,8 @@ export default function BillingContainer(): JSX.Element {
 		activeLicense,
 		activeLicenseFetchError,
 	} = useAppContext();
-	const { licenseKey } = useActiveLicenseKey();
+	const { allowed: canReadSubscription, error: subscriptionAuthZError } =
+		useAuthZ([SubscriptionReadPermission]);
 	const { notifications } = useNotifications();
 
 	const handleError = useAxiosError();
@@ -154,33 +165,34 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
-			if (isEmpty(data?.payload)) {
+		(response: GetSubscription200): void => {
+			const usage = response?.data;
+			if (isEmpty(usage)) {
 				return;
 			}
-			const {
-				details: { breakdown = [], billTotal },
-				billingPeriodStart,
-				billingPeriodEnd,
-			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const breakdown = usage.details?.breakdown ?? [];
+			const billTotal = usage.details?.billTotal ?? 0;
+			const billingPeriodStart = usage.billingPeriodStart ?? 0;
+			const billingPeriodEnd = usage.billingPeriodEnd ?? 0;
 			const formattedUsageData: DataType[] = [];
 
-			if (breakdown && Array.isArray(breakdown)) {
-				for (let index = 0; index < breakdown.length; index += 1) {
-					const element: BreakdownEntry = breakdown[index];
-
-					element?.tiers?.forEach((tier, i: number) => {
+			breakdown.forEach(
+				(
+					element: SubscriptiontypesSubscriptionUsageBreakdownDTO,
+					index: number,
+				) => {
+					element?.tiers?.forEach((tier, tierIndex: number) => {
 						formattedUsageData.push({
-							key: `${index}${i}`,
-							name: i === 0 ? element?.type : '',
+							key: `${index}${tierIndex}`,
+							name: tierIndex === 0 ? (element?.type ?? '') : '',
 							unit: element?.unit ?? '',
 							dataIngested: `${tier.quantity} ${element?.unit}`,
 							pricePerUnit: String(tier.unitPrice),
 							cost: `$ ${tier.tierCost}`,
 						});
 					});
-				}
-			}
+				},
+			);
 
 			setData(formattedUsageData);
 
@@ -196,7 +208,7 @@ export default function BillingContainer(): JSX.Element {
 				setBillAmount(billTotal);
 			}
 
-			setApiResponse(data?.payload || {});
+			setApiResponse(usage);
 		},
 		[trialInfo?.onTrial],
 	);
@@ -208,11 +220,12 @@ export default function BillingContainer(): JSX.Element {
 		isLoading,
 		isFetching: isFetchingBillingData,
 		data: billingData,
-	} = useQuery([REACT_QUERY_KEY.GET_BILLING_USAGE, user?.id], {
-		queryFn: () => getUsage(licenseKey || ''),
-		onError: handleError,
-		enabled: !!licenseKey,
-		onSuccess: processUsageData,
+	} = useGetSubscription({
+		query: {
+			enabled: canReadSubscription || !!subscriptionAuthZError,
+			onError: handleError,
+			onSuccess: processUsageData,
+		},
 	});
 
 	useEffect(() => {
@@ -284,9 +297,7 @@ export default function BillingContainer(): JSX.Element {
 		/>
 	);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -303,7 +314,7 @@ export default function BillingContainer(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -313,7 +324,7 @@ export default function BillingContainer(): JSX.Element {
 	);
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(manageCreditCardApi, {
+		useMutation(updateSubscription, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -348,15 +359,21 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);
 
+	const billingActionPermissions = trialInfo?.trialConvertedToSubscription
+		? SubscriptionManagePermissions
+		: [SubscriptionCreatePermission];
+
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
-			<Typography.Link
-				onClick={handleBilling}
-				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
-			>
-				{t('here')}
-			</Typography.Link>
+			<AuthZTooltip checks={billingActionPermissions}>
+				<Typography.Link
+					onClick={handleBilling}
+					style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
+				>
+					{t('here')}
+				</Typography.Link>
+			</AuthZTooltip>
 			{` if your payment information has changed. Email us at `}
 			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
@@ -411,11 +428,7 @@ export default function BillingContainer(): JSX.Element {
 				</Typography.Text>
 			</Flex>
 
-			<Card
-				bordered={false}
-				style={{ minHeight: 150, marginBottom: 16 }}
-				className={styles.pageInfo}
-			>
+			<Card bordered={false} className={styles.pageInfo}>
 				<Flex justify="space-between" align="center">
 					<Flex vertical gap={8}>
 						<p className={styles.pageInfoTitle}>
@@ -423,13 +436,14 @@ export default function BillingContainer(): JSX.Element {
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</p>
 
-						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
+						{billingData && !isFetchingBillingData && !showGracePeriodMessage ? (
 							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
 							</p>
 						) : null}
 					</Flex>
-					<Button
+					<AuthZButton
+						checks={billingActionPermissions}
 						testId="header-billing-button"
 						variant="solid"
 						color="secondary"
@@ -443,7 +457,7 @@ export default function BillingContainer(): JSX.Element {
 						{trialInfo?.trialConvertedToSubscription
 							? t('manage_billing')
 							: t('upgrade_plan')}
-					</Button>
+					</AuthZButton>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -495,66 +509,73 @@ export default function BillingContainer(): JSX.Element {
 					))}
 			</Card>
 
-			<div className={styles.billingGraphSection}>
-				{!isLoading && !isFetchingBillingData ? (
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-				) : (
-					<Card className={styles.emptyGraphCard} bordered={false}>
-						<Spinner size="large" tip="Loading..." height="35vh" />
-					</Card>
-				)}
-				{!isLoading && !isFetchingBillingData && (
-					<div className={styles.billingGraphFooter}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="md"
-							onClick={handleCsvDownload}
-							prefix={<MonitorDown size={14} />}
-							testId="download-csv-button"
-							className={styles.billingFooterBtn}
-						>
-							Download CSV
-						</Button>
-						<RefreshPaymentStatus type="button" className={styles.billingFooterBtn} />
+			<AuthZGuardContent checks={[SubscriptionReadPermission]}>
+				<>
+					<div className={styles.billingGraphSection}>
+						{!isLoading && !isFetchingBillingData ? (
+							<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+						) : (
+							<Card className={styles.emptyGraphCard} bordered={false}>
+								<Spinner size="large" tip="Loading..." height="35vh" />
+							</Card>
+						)}
+						{!isLoading && !isFetchingBillingData && (
+							<div className={styles.billingGraphFooter}>
+								<Button
+									variant="outlined"
+									color="secondary"
+									size="md"
+									onClick={handleCsvDownload}
+									prefix={<MonitorDown size={14} />}
+									testId="download-csv-button"
+									className={styles.billingFooterBtn}
+								>
+									Download CSV
+								</Button>
+								<RefreshPaymentStatus
+									type="button"
+									className={styles.billingFooterBtn}
+								/>
+							</div>
+						)}
 					</div>
-				)}
-			</div>
-			{!isLoading && !isFetchingBillingData && (
-				<Callout type="info" size="small" className={styles.billingUpdateNote}>
-					Billing metrics are updated once every 24 hours.
-				</Callout>
-			)}
+					{!isLoading && !isFetchingBillingData && (
+						<Callout type="info" size="small" className={styles.billingUpdateNote}>
+							Billing metrics are updated once every 24 hours.
+						</Callout>
+					)}
 
-			<div className={styles.billingDetails}>
-				{!isLoading && !isFetchingBillingData && (
-					<Table
-						columns={columns}
-						dataSource={data}
-						pagination={false}
-						bordered={false}
-						components={{
-							header: {
-								cell: ({
-									style,
-									...props
-								}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
-									const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
-									return (
-										<th
-											{...props}
-											style={safeStyle}
-											className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
-										/>
-									);
-								},
-							},
-						}}
-					/>
-				)}
+					<div className={styles.billingDetails}>
+						{!isLoading && !isFetchingBillingData && (
+							<Table
+								columns={columns}
+								dataSource={data}
+								pagination={false}
+								bordered={false}
+								components={{
+									header: {
+										cell: ({
+											style,
+											...props
+										}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
+											const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
+											return (
+												<th
+													{...props}
+													style={safeStyle}
+													className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
+												/>
+											);
+										},
+									},
+								}}
+							/>
+						)}
 
-				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
-			</div>
+						{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
+					</div>
+				</>
+			</AuthZGuardContent>
 
 			{isCloudUserVal && activeLicense?.state === LicenseState.ACTIVATED && (
 				<CancelSubscriptionBanner />
@@ -597,7 +618,8 @@ export default function BillingContainer(): JSX.Element {
 							</Typography.Text>
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
-							<Button
+							<AuthZButton
+								checks={[SubscriptionCreatePermission]}
 								testId="upgrade-plan-button"
 								variant="solid"
 								color="primary"
@@ -606,7 +628,7 @@ export default function BillingContainer(): JSX.Element {
 								onClick={handleBilling}
 							>
 								{t('upgrade_plan')}
-							</Button>
+							</AuthZButton>
 						</Col>
 					</Row>
 				</div>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -12,7 +12,7 @@ import {
 } from 'lib/uPlotV2/components/types';
 import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import type uPlot from 'uplot';
-import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import type { SubscriptiontypesGettableSubscriptionUsageDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { BillingBarChartTooltip } from './BillingBarChartTooltip';
 import { prepareBillingBarConfig } from './prepareBillingBarConfig';
@@ -25,7 +25,7 @@ import {
 import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<UsageResponsePayloadProps>;
+	data: Partial<SubscriptiontypesGettableSubscriptionUsageDTO>;
 	billAmount: number;
 }
 
@@ -55,7 +55,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
 					const nextDay = {
 						...currentDay,
-						timestamp: currentDay.timestamp + 86400,
+						timestamp: (currentDay.timestamp ?? 0) + 86400,
 						count: 0,
 						size: 0,
 						quantity: 0,
@@ -94,7 +94,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 
 	const { startTime, endTime } = useMemo(
 		() =>
-			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
+			calculateStartEndTime(
+				normalizedData as Partial<SubscriptiontypesGettableSubscriptionUsageDTO>,
+			),
 		[normalizedData],
 	);
 

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,4 +1,4 @@
-import { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import { SubscriptiontypesGettableSubscriptionUsageDTO } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
@@ -117,7 +117,9 @@ export function csvFileName(csvData: QuantityData[]): string {
 	return `billing_usage_(${startDate}-${endDate}).csv`;
 }
 
-export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
+export function prepareCsvData(
+	data: Partial<SubscriptiontypesGettableSubscriptionUsageDTO>,
+): {
 	csvData: string;
 	fileName: string;
 } {
@@ -135,12 +137,14 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 }
 
 export function calculateStartEndTime(
-	data: Partial<UsageResponsePayloadProps>,
+	data: Partial<SubscriptiontypesGettableSubscriptionUsageDTO>,
 ): { startTime: number | undefined; endTime: number | undefined } {
 	const timestamps: number[] = [];
 	data?.details?.breakdown?.forEach((breakdown) => {
 		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
-			timestamps.push(entry.timestamp);
+			if (typeof entry.timestamp === 'number') {
+				timestamps.push(entry.timestamp);
+			}
 		});
 	});
 

frontend/src/container/BillingContainer/CancelSubscriptionBanner.module.scss

@@ -6,7 +6,7 @@
 	border-radius: 4px;
 	border: 1px solid var(--l1-border);
 	background-color: var(--l2-background);
-	margin: var(--spacing-4) 0 var(--spacing-12);
+	margin: var(--spacing-4) 0;
 }
 
 .info {

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -1,3 +1,9 @@
+import { SubscriptionDeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzDeny,
+} from 'lib/authz/utils/authz-test-utils';
+import { server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
@@ -36,10 +42,24 @@ function mockMailto(): {
 }
 
 describe('CancelSubscriptionBanner', () => {
+	beforeEach(() => {
+		server.use(setupAuthzAdmin());
+	});
+
 	afterEach(() => {
+		server.resetHandlers();
 		jest.restoreAllMocks();
 	});
 
+	it('disables Cancel Subscription when subscription delete is denied', async () => {
+		server.use(setupAuthzDeny(SubscriptionDeletePermission));
+		render(<CancelSubscriptionBanner />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeDisabled();
+		});
+	});
+
 	it('renders banner with title and subtitle', () => {
 		render(<CancelSubscriptionBanner />);
 		expect(
@@ -56,9 +76,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		expect(
@@ -76,9 +97,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		const confirmButton = screen.getByTestId('cancel-subscription-confirm-btn');
 		expect(confirmButton).toBeDisabled();
@@ -95,9 +117,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		const input = screen.getByTestId('cancel-confirm-input');
 		await user.type(input, 'cancel');
@@ -107,9 +130,10 @@ describe('CancelSubscriptionBanner', () => {
 			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
 		);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		expect(screen.getByTestId('cancel-confirm-input')).toHaveValue('');
 	});
 
@@ -119,9 +143,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -151,9 +176,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -172,9 +198,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -192,9 +219,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -11,6 +11,8 @@ import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { SubscriptionDeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCopyToClipboard } from 'react-use';
@@ -178,15 +180,17 @@ function CancelSubscriptionBanner(): JSX.Element {
 						immediately and removed from our servers.
 					</span>
 				</div>
-				<Button
+				<AuthZButton
+					checks={[SubscriptionDeletePermission]}
 					variant="solid"
 					color="secondary"
 					prefix={<X size={12} />}
 					onClick={handleOpenCancelDialog}
 					className={styles.cancelButton}
+					testId="cancel-subscription-btn"
 				>
 					Cancel Subscription
-				</Button>
+				</AuthZButton>
 			</div>
 			<DialogWrapper
 				open={dialogView !== null}

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,35 +1,23 @@
 import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
-		() => ({
-			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: false, isDisabled: true },
-			having: { isHidden: false, isDisabled: true },
-		}),
-		[],
-	);
-
-	const isListViewPanel = useMemo(
+	const isRawQuery = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isListViewPanel={isListViewPanel}
+			isRawQuery={isRawQuery}
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			panelType={panelTypes}
-			filterConfigs={filterConfigs}
-			showOnlyWhereClause={isListViewPanel}
+			showOnlyWhereClause={isRawQuery}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LogExplorerQuerySection/index.tsx

@@ -1,13 +1,6 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import {
-	initialQueriesMap,
-	OPERATORS,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -36,42 +29,11 @@ function LogExplorerQuerySection({
 
 	useShareBuilderUrl({ defaultValue });
 
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isTable = panelTypes === PANEL_TYPES.TABLE;
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: isTable, isDisabled: false },
-			having: { isHidden: isList, isDisabled: true },
-			filters: {
-				customKey: 'body',
-				customOp: OPERATORS.CONTAINS,
-			},
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps): JSX.Element => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
-		[],
-	);
-
-	const queryComponents = useMemo(
-		(): QueryBuilderProps['queryComponents'] => ({
-			...(panelTypes === PANEL_TYPES.LIST ? { renderOrderBy } : {}),
-		}),
-		[panelTypes, renderOrderBy],
-	);
-
 	return (
 		<QueryBuilderV2
-			isListViewPanel={panelTypes === PANEL_TYPES.LIST}
+			isRawQuery={panelTypes === PANEL_TYPES.LIST}
 			config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
 			panelType={panelTypes}
-			filterConfigs={filterConfigs}
-			queryComponents={queryComponents}
 			showOnlyWhereClause={selectedView === ExplorerViews.LIST}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>

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

@@ -11,7 +11,6 @@ import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -118,11 +117,6 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
-	const queryComponents = useMemo(
-		(): QueryBuilderProps['queryComponents'] => ({}),
-		[],
-	);
-
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div
@@ -178,7 +172,6 @@ function Explorer(): JSX.Element {
 								signalSource: 'meter',
 							}}
 							panelType={PANEL_TYPES.TIME_SERIES}
-							queryComponents={queryComponents}
 							showFunctions={false}
 							version="v3"
 						/>

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -12,7 +12,6 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -323,11 +322,6 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
-	const queryComponents = useMemo(
-		(): QueryBuilderProps['queryComponents'] => ({}),
-		[],
-	);
-
 	const [warning, setWarning] = useState<Warning | undefined>();
 
 	const oneChartPerQueryDisabledTooltip = useMemo(() => {
@@ -381,7 +375,6 @@ function Explorer(): JSX.Element {
 				<QueryBuilderV2
 					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
 					panelType={PANEL_TYPES.TIME_SERIES}
-					queryComponents={queryComponents}
 					showFunctions={false}
 					version="v3"
 				/>

frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts

@@ -1,22 +1,9 @@
 import { ReactNode } from 'react';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryBuilderFieldsConfig } from 'components/QueryBuilderV2/queryBuilderFields.types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';
-
-export type WhereClauseConfig = {
-	customKey: string;
-	customOp: string;
-};
-
-type FilterConfigs = {
-	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
-		isHidden: boolean;
-		isDisabled: boolean;
-	};
-} & { filters: WhereClauseConfig };
-
 export type QueryBuilderConfig =
 	| {
 			queryVariant: 'static';
@@ -29,9 +16,16 @@ export type QueryBuilderProps = {
 	config?: QueryBuilderConfig;
 	panelType: PANEL_TYPES;
 	actions?: ReactNode;
-	filterConfigs?: Partial<FilterConfigs>;
-	queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
-	isListViewPanel?: boolean;
+	fieldsConfig?: QueryBuilderFieldsConfig;
+	/**
+	 * The builder edits raw rows rather than an aggregation: a single query unless trace
+	 * matching is on, no formulas, data-source switches reset to the raw-query template,
+	 * and order by resolves keys without an aggregate attribute. Supplies the defaults for
+	 * `fieldsConfig` and `allowedDataSources`, which override it per field.
+	 */
+	isRawQuery?: boolean;
+	/** Defaults to every signal. */
+	allowedDataSources?: TelemetrytypesSignalDTO[];
 	showFunctions?: boolean;
 	showOnlyWhereClause?: boolean;
 	showOnlyTraceOperator?: boolean;

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export type AdditionalFiltersProps = {
-	listOfAdditionalFilter: string[];
-	children: ReactNode;
-};

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styled.ts

@@ -1,38 +0,0 @@
-import { SquareMinus, SquarePlus } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
-import { Col } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import styled, { css } from 'styled-components';
-
-const IconCss = css`
-	margin-right: 0.6875rem;
-	transition: all 0.2s ease;
-`;
-
-export const StyledIconOpen = styled(SquarePlus)`
-	${IconCss}
-`;
-
-export const StyledIconClose = styled(SquareMinus)`
-	${IconCss}
-`;
-
-export const StyledInner = styled(Col)`
-	width: fit-content;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 0.875rem;
-	min-height: 1.375rem;
-	cursor: pointer;
-	&:hover {
-		${StyledIconOpen}, ${StyledIconClose} {
-			opacity: 0.7;
-		}
-	}
-`;
-
-export const StyledLink = styled(Typography.Link)`
-	pointer-events: none;
-	color: ${Color.BG_ROBIN_400} !important;
-`;

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styles.scss

@@ -1,15 +0,0 @@
-.filter-toggler {
-	margin-right: 8px;
-}
-
-.additinal-filters-container {
-	.action-btn {
-		background: var(--primary-background);
-		width: 16px;
-		height: 16px;
-		border-radius: 3px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}

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

@@ -1,66 +0,0 @@
-import { Fragment, memo, ReactNode, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Col, Row } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Minus, Plus } from '@signozhq/icons';
-
-// ** Types
-import { AdditionalFiltersProps } from './AdditionalFiltersToggler.interfaces';
-// ** Styles
-import { StyledInner, StyledLink } from './AdditionalFiltersToggler.styled';
-
-import './AdditionalFiltersToggler.styles.scss';
-
-export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
-	children,
-	listOfAdditionalFilter,
-}: AdditionalFiltersProps): JSX.Element {
-	const [isOpenedFilters, setIsOpenedFilters] = useState<boolean>(false);
-
-	const handleToggleOpenFilters = (): void => {
-		setIsOpenedFilters((prevState) => !prevState);
-	};
-
-	const filtersTexts: ReactNode = listOfAdditionalFilter?.map((str, index) => {
-		const isNextLast = index + 1 === listOfAdditionalFilter.length - 1;
-
-		if (index === listOfAdditionalFilter.length - 1) {
-			return (
-				<Fragment key={str}>
-					{listOfAdditionalFilter?.length > 1 && 'and'}{' '}
-					<StyledLink>{str.toUpperCase()}</StyledLink>
-				</Fragment>
-			);
-		}
-
-		return (
-			<span key={str}>
-				<StyledLink>{str.toUpperCase()}</StyledLink>
-				{isNextLast ? ' ' : ', '}
-			</span>
-		);
-	});
-
-	return (
-		<Row className="additinal-filters-container">
-			<Col span={24}>
-				<StyledInner onClick={handleToggleOpenFilters} style={{ marginBottom: 0 }}>
-					{isOpenedFilters ? (
-						<span className="action-btn">
-							<Minus size={14} color={Color.BG_INK_500} />
-						</span>
-					) : (
-						<span className="action-btn">
-							<Plus size={14} color={Color.BG_INK_500} />
-						</span>
-					)}
-
-					{!isOpenedFilters && (
-						<Typography>Add conditions for {filtersTexts}</Typography>
-					)}
-				</StyledInner>
-			</Col>
-			{isOpenedFilters && <Col span={24}>{children}</Col>}
-		</Row>
-	);
-});

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/index.ts

@@ -1 +0,0 @@
-export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.interfaces.ts

@@ -1,8 +1,10 @@
 import { SelectProps } from 'antd';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 
 export type QueryLabelProps = {
 	onChange: (value: DataSource) => void;
-	isListViewPanel?: boolean;
+	/** Defaults to every signal. */
+	allowedDataSources?: TelemetrytypesSignalDTO[];
 	'data-testid'?: string;
 } & Omit<SelectProps, 'onChange'>;

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

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { Select } from 'antd';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 // ** Helpers
@@ -7,25 +8,24 @@ import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 // ** Types
 import { QueryLabelProps } from './DataSourceDropdown.interfaces';
+import { signalsToDataSources } from './DataSourceDropdown.utils';
 
-const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES];
-
-const exploreDataSourceMap = [DataSource.LOGS, DataSource.TRACES];
+const ALL_SIGNALS = [
+	TelemetrytypesSignalDTO.logs,
+	TelemetrytypesSignalDTO.metrics,
+	TelemetrytypesSignalDTO.traces,
+];
 
 export const DataSourceDropdown = memo(function DataSourceDropdown(
 	props: QueryLabelProps,
 ): JSX.Element {
-	const { onChange, value, style, isListViewPanel = false } = props;
+	const { onChange, value, style, allowedDataSources = ALL_SIGNALS } = props;
 
-	const dataSourceOptions: SelectOption<DataSource, string>[] = isListViewPanel
-		? exploreDataSourceMap.map((source) => ({
-				label: transformToUpperCase(source),
-				value: source,
-			}))
-		: dataSourceMap.map((source) => ({
-				label: transformToUpperCase(source),
-				value: source,
-			}));
+	const dataSourceOptions: SelectOption<DataSource, string>[] =
+		signalsToDataSources(allowedDataSources).map((source) => ({
+			label: transformToUpperCase(source),
+			value: source,
+		}));
 
 	return (
 		<Select

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.utils.ts

@@ -0,0 +1,20 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+// Partial because the signal enum also carries an empty "unset" member, which is not a
+// data source a query can be built against.
+const SIGNAL_TO_DATA_SOURCE: Partial<
+	Record<TelemetrytypesSignalDTO, DataSource>
+> = {
+	[TelemetrytypesSignalDTO.logs]: DataSource.LOGS,
+	[TelemetrytypesSignalDTO.metrics]: DataSource.METRICS,
+	[TelemetrytypesSignalDTO.traces]: DataSource.TRACES,
+};
+
+export function signalsToDataSources(
+	signals: readonly TelemetrytypesSignalDTO[],
+): DataSource[] {
+	return signals
+		.map((signal) => SIGNAL_TO_DATA_SOURCE[signal])
+		.filter((dataSource): dataSource is DataSource => Boolean(dataSource));
+}

frontend/src/container/QueryBuilder/components/DataSourceDropdown/__tests__/DataSourceDropdown.test.tsx

@@ -0,0 +1,79 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { DataSourceDropdown } from '../DataSourceDropdown';
+
+const TEST_ID = 'query-data-source-selector';
+
+async function openDropdown(): Promise<void> {
+	const user = userEvent.setup();
+	const trigger = screen.getByTestId(TEST_ID);
+	await user.click(trigger.querySelector('.ant-select-selector') as HTMLElement);
+}
+
+describe('DataSourceDropdown', () => {
+	// antd's virtual list renders only the first couple of options into jsdom, so
+	// each case asserts what the restriction admits and excludes, not the full list.
+	it('offers the signals beyond the current one when nothing restricts it', async () => {
+		render(
+			<DataSourceDropdown
+				data-testid={TEST_ID}
+				value={DataSource.METRICS}
+				onChange={jest.fn()}
+			/>,
+		);
+		await openDropdown();
+
+		await expect(
+			screen.findByRole('option', { name: 'Logs' }),
+		).resolves.toBeInTheDocument();
+		expect(screen.getByRole('option', { name: 'Metrics' })).toBeInTheDocument();
+	});
+
+	it('offers only the signals the caller can visualize', async () => {
+		render(
+			<DataSourceDropdown
+				data-testid={TEST_ID}
+				value={DataSource.METRICS}
+				allowedDataSources={[TelemetrytypesSignalDTO.metrics]}
+				onChange={jest.fn()}
+			/>,
+		);
+		await openDropdown();
+
+		await expect(
+			screen.findByRole('option', { name: 'Metrics' }),
+		).resolves.toBeInTheDocument();
+		expect(
+			screen.queryByRole('option', { name: 'Logs' }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('option', { name: 'Traces' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('drops a signal that is not a data source a query can be built against', async () => {
+		render(
+			<DataSourceDropdown
+				data-testid={TEST_ID}
+				value={DataSource.LOGS}
+				allowedDataSources={[
+					TelemetrytypesSignalDTO.logs,
+					TelemetrytypesSignalDTO.traces,
+					TelemetrytypesSignalDTO[''],
+				]}
+				onChange={jest.fn()}
+			/>,
+		);
+		await openDropdown();
+
+		await expect(
+			screen.findByRole('option', { name: 'Logs' }),
+		).resolves.toBeInTheDocument();
+		expect(screen.getByRole('option', { name: 'Traces' })).toBeInTheDocument();
+		expect(
+			screen.queryByRole('option', { name: 'Metrics' }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.interfaces.ts

@@ -1,6 +0,0 @@
-import { CSSProperties } from 'react';
-
-export type FilterLabelProps = {
-	label: string;
-	style?: CSSProperties;
-};

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-interface Props {
-	isDarkMode: boolean;
-	children?: React.ReactNode;
-}
-
-export const StyledLabel = styled.div<Props>`
-	padding: 0 0.6875rem;
-	min-height: 2rem;
-	min-width: 5.625rem;
-	display: inline-flex;
-	white-space: nowrap;
-	align-items: center;
-	border-radius: 0.125rem;
-`;

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

@@ -1,26 +0,0 @@
-import { memo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-// ** Types
-import { FilterLabelProps } from './FilterLabel.interfaces';
-// ** Styles
-import { StyledLabel } from './FilterLabel.styled';
-
-export const FilterLabel = memo(function FilterLabel({
-	label,
-}: FilterLabelProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	return (
-		<StyledLabel isDarkMode={isDarkMode}>
-			<Typography
-				style={{
-					color: 'var(--bg-vanilla-400)',
-				}}
-			>
-				{label}
-			</Typography>
-		</StyledLabel>
-	);
-});

frontend/src/container/QueryBuilder/components/FilterLabel/index.ts

@@ -1 +0,0 @@
-export { FilterLabel } from './FilterLabel';

frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts

@@ -1,4 +1,3 @@
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
@@ -8,7 +7,5 @@ export type FormulaProps = {
 	formula: IBuilderFormula;
 	index: number;
 	query: IBuilderQuery;
-	filterConfigs: Partial<QueryBuilderProps['filterConfigs']>;
-	isAdditionalFilterEnable: boolean;
 	isQBV2?: boolean;
 };

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

@@ -2,11 +2,6 @@ import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { LEGEND } from 'constants/global';
-// ** Components
-import { FilterLabel } from 'container/QueryBuilder/components';
-import HavingFilter from 'container/QueryBuilder/filters/Formula/Having/HavingFilter';
-import LimitFilter from 'container/QueryBuilder/filters/Formula/Limit/Limit';
-import OrderByFilter from 'container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter';
 // ** Hooks
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -17,7 +12,6 @@ import {
 import { getFormatedLegend } from 'utils/getFormatedLegend';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { AdditionalFiltersToggler } from '../AdditionalFiltersToggler';
 import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
 // ** Types
 import { FormulaProps } from './Formula.interfaces';
@@ -27,22 +21,18 @@ import './Formula.styles.scss';
 export function Formula({
 	index,
 	formula,
-	filterConfigs,
 	query,
-	isAdditionalFilterEnable,
 	isQBV2,
 }: FormulaProps): JSX.Element {
 	const { removeQueryBuilderEntityByIndex, handleSetFormulaData } =
 		useQueryBuilder();
 
-	const { listOfAdditionalFormulaFilters, handleChangeFormulaData } =
-		useQueryOperations({
-			index,
-			query,
-			filterConfigs,
-			formula,
-			entityVersion: '',
-		});
+	const { handleChangeFormulaData } = useQueryOperations({
+		index,
+		query,
+		formula,
+		entityVersion: '',
+	});
 
 	const [isCollapse, setIsCollapsed] = useState(false);
 
@@ -83,20 +73,6 @@ export function Formula({
 		[handleChangeFormulaData],
 	);
 
-	const handleChangeHavingFilter = useCallback(
-		(value: IBuilderFormula['having']) => {
-			handleChangeFormulaData('having', value);
-		},
-		[handleChangeFormulaData],
-	);
-
-	const handleChangeOrderByFilter = useCallback(
-		(value: IBuilderFormula['orderBy']) => {
-			handleChangeFormulaData('orderBy', value);
-		},
-		[handleChangeFormulaData],
-	);
-
 	const handleQBV2OrderByChange = useCallback(
 		(value: string) => {
 			const [columnName, order] = value.split(' ');
@@ -122,54 +98,6 @@ export function Formula({
 		[formula.orderBy],
 	);
 
-	const renderAdditionalFilters = useMemo(
-		() => (
-			<>
-				<Col span={11}>
-					<Row gutter={[11, 5]}>
-						<Col flex="5.93rem">
-							<FilterLabel label="Limit" />
-						</Col>
-						<Col flex="1 1 12.5rem">
-							<LimitFilter formula={formula} onChange={handleChangeLimit} />
-						</Col>
-					</Row>
-				</Col>
-				<Col span={11}>
-					<Row gutter={[11, 5]}>
-						<Col flex="5.93rem">
-							<FilterLabel label="HAVING" />
-						</Col>
-						<Col flex="1 1 12.5rem">
-							<HavingFilter formula={formula} onChange={handleChangeHavingFilter} />
-						</Col>
-					</Row>
-				</Col>
-				<Col span={11}>
-					<Row gutter={[11, 5]}>
-						<Col flex="5.93rem">
-							<FilterLabel label="Order by" />
-						</Col>
-						<Col flex="1 1 12.5rem">
-							<OrderByFilter
-								query={query}
-								formula={formula}
-								onChange={handleChangeOrderByFilter}
-							/>
-						</Col>
-					</Row>
-				</Col>
-			</>
-		),
-		[
-			formula,
-			handleChangeHavingFilter,
-			handleChangeLimit,
-			handleChangeOrderByFilter,
-			query,
-		],
-	);
-
 	return (
 		<Row gutter={[0, 15]}>
 			<QBEntityOptions
@@ -206,17 +134,6 @@ export function Formula({
 							addonBefore="Legend Format"
 						/>
 					</Col>
-					{isAdditionalFilterEnable && (
-						<Col span={24}>
-							<AdditionalFiltersToggler
-								listOfAdditionalFilter={listOfAdditionalFormulaFilters}
-							>
-								<Row gutter={[0, 11]} justify="space-between">
-									{renderAdditionalFilters}
-								</Row>
-							</AdditionalFiltersToggler>
-						</Col>
-					)}
 					{isQBV2 && (
 						<Col span={24}>
 							<div className="formula-qbv2-container">

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss

@@ -84,5 +84,14 @@
 		.options-group {
 			max-width: 100%;
 		}
+
+		.query-functions-container--disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+
+			> * {
+				pointer-events: none;
+			}
+		}
 	}
 }

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

@@ -1,5 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { Button, Col, Tooltip } from 'antd';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -26,6 +27,8 @@ interface QBEntityOptionsProps {
 	query?: IBuilderQuery;
 	isMetricsDataSource?: boolean;
 	showFunctions?: boolean;
+	functionsDisabled?: boolean;
+	functionsDisabledReason?: string;
 	isCollapsed: boolean;
 	entityType: string;
 	entityData: any;
@@ -36,7 +39,8 @@ interface QBEntityOptionsProps {
 	onQueryFunctionsUpdates?: (functions: QueryFunction[]) => void;
 	showDeleteButton?: boolean;
 	showCloneOption?: boolean;
-	isListViewPanel?: boolean;
+	isRawQuery?: boolean;
+	allowedDataSources?: TelemetrytypesSignalDTO[];
 	index?: number;
 	showTraceOperator?: boolean;
 	hasTraceOperator?: boolean;
@@ -50,12 +54,15 @@ export default function QBEntityOptions({
 	isMetricsDataSource,
 	isCollapsed,
 	showFunctions,
+	functionsDisabled,
+	functionsDisabledReason,
 	entityType,
 	entityData,
 	onToggleVisibility,
 	onCollapseEntity,
 	onQueryFunctionsUpdates,
-	isListViewPanel,
+	isRawQuery,
+	allowedDataSources,
 	onDelete,
 	showDeleteButton,
 	showCloneOption,
@@ -100,7 +107,7 @@ export default function QBEntityOptions({
 									value="query-builder"
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
-									disabled={isListViewPanel && !showTraceOperator}
+									disabled={isRawQuery && !showTraceOperator}
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -119,7 +126,7 @@ export default function QBEntityOptions({
 									'periscope-btn',
 									entityType === 'query' ? 'query-name' : 'formula-name',
 									query?.dataSource === DataSource.TRACES &&
-										(hasTraceOperator || (showTraceOperator && isListViewPanel))
+										(hasTraceOperator || (showTraceOperator && isRawQuery))
 										? 'has-trace-operator'
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
@@ -138,24 +145,33 @@ export default function QBEntityOptions({
 										}}
 										data-testid={`query-data-source-selector-${index}`}
 										value={query?.dataSource || DataSource.METRICS}
-										isListViewPanel={isListViewPanel}
+										allowedDataSources={allowedDataSources}
 										className="query-data-source-dropdown"
 									/>
 								</div>
 							)}
 
 							{showFunctions &&
-								!isListViewPanel &&
+								!isRawQuery &&
 								(isMetricsDataSource || isLogsDataSource) &&
 								query &&
 								onQueryFunctionsUpdates && (
-									<QueryFunctions
-										query={query}
-										queryFunctions={query.functions || []}
-										key={query.functions?.toString()}
-										onChange={onQueryFunctionsUpdates}
-										maxFunctions={isLogsDataSource ? 1 : 3}
-									/>
+									<Tooltip title={functionsDisabledReason}>
+										<div
+											className={cx('query-functions-container', {
+												'query-functions-container--disabled': functionsDisabled,
+											})}
+											aria-disabled={functionsDisabled}
+										>
+											<QueryFunctions
+												query={query}
+												queryFunctions={query.functions || []}
+												key={query.functions?.toString()}
+												onChange={onQueryFunctionsUpdates}
+												maxFunctions={isLogsDataSource ? 1 : 3}
+											/>
+										</div>
+									</Tooltip>
 								)}
 						</Button.Group>
 					</div>
@@ -168,7 +184,7 @@ export default function QBEntityOptions({
 					)}
 				</div>
 
-				{showDeleteButton && !isListViewPanel && (
+				{showDeleteButton && !isRawQuery && (
 					<Button className="periscope-btn ghost" onClick={onDelete}>
 						<Trash2 size={14} />
 					</Button>
@@ -179,11 +195,14 @@ export default function QBEntityOptions({
 }
 
 QBEntityOptions.defaultProps = {
-	isListViewPanel: false,
+	isRawQuery: false,
+	allowedDataSources: undefined,
 	query: undefined,
 	isMetricsDataSource: false,
 	onQueryFunctionsUpdates: undefined,
 	showFunctions: false,
+	functionsDisabled: false,
+	functionsDisabledReason: undefined,
 	onCloneQuery: noop,
 	index: 0,
 	onDelete: noop,

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

@@ -1,6 +1,4 @@
-export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';
 export { DataSourceDropdown } from './DataSourceDropdown';
-export { FilterLabel } from './FilterLabel';
 export { Formula } from './Formula';
 export { HavingFilterTag } from './HavingFilterTag';
 export { ListItemWrapper } from './ListItemWrapper';

frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx

@@ -1,198 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select } from 'antd';
-import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
-import { HavingFilterTag } from 'container/QueryBuilder/components';
-import { useTagValidation } from 'hooks/queryBuilder/useTagValidation';
-import {
-	transformFromStringToHaving,
-	transformHavingToStringValue,
-} from 'lib/query/transformQueryBuilderData';
-import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
-import { SelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
-
-import { getHavingObject, isValidHavingValue } from '../../utils';
-import { HavingFilterProps, HavingTagRenderProps } from './types';
-
-function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
-	const { having } = formula;
-	const [searchText, setSearchText] = useState<string>('');
-	const [localValues, setLocalValues] = useState<string[]>([]);
-	const [currentFormValue, setCurrentFormValue] =
-		useState<HavingForm>(initialHavingValues);
-	const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
-
-	const { isMulti } = useTagValidation(
-		currentFormValue.op,
-		currentFormValue.value,
-	);
-
-	const columnName = formula.expression.replace(/ /g, '').toUpperCase();
-
-	const aggregatorOptions: SelectOption<string, string>[] = useMemo(
-		() => [{ label: columnName, value: columnName }],
-		[columnName],
-	);
-
-	const handleUpdateTag = useCallback(
-		(value: string) => {
-			const filteredValues = localValues.filter(
-				(currentValue) => currentValue !== value,
-			);
-			const having: Having[] = filteredValues.map(transformFromStringToHaving);
-
-			onChange(having);
-			setSearchText(value);
-		},
-		[localValues, onChange],
-	);
-
-	const generateOptions = useCallback(
-		(currentString: string) => {
-			const [aggregator = '', op = '', ...restValue] = currentString.split(' ');
-			let newOptions: SelectOption<string, string>[] = [];
-
-			const isAggregatorExist = columnName
-				.toLowerCase()
-				.includes(currentString.toLowerCase());
-
-			const isAggregatorChosen = aggregator === columnName;
-
-			if (isAggregatorExist || aggregator === '') {
-				newOptions = aggregatorOptions;
-			}
-
-			if ((isAggregatorChosen && op === '') || op) {
-				const filteredOperators = HAVING_OPERATORS.filter((num) =>
-					num.toLowerCase().includes(op.toLowerCase()),
-				);
-
-				newOptions = filteredOperators.map((opt) => ({
-					label: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
-					value: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
-				}));
-			}
-
-			setOptions(newOptions);
-		},
-		[aggregatorOptions, columnName],
-	);
-
-	const parseSearchText = useCallback(
-		(text: string) => {
-			const { columnName, op, value } = getHavingObject(text);
-			setCurrentFormValue({ columnName, op, value });
-
-			generateOptions(text);
-		},
-		[generateOptions],
-	);
-
-	const tagRender = ({
-		label,
-		value,
-		closable,
-		disabled,
-		onClose,
-	}: HavingTagRenderProps): JSX.Element => {
-		const handleClose = (): void => {
-			onClose();
-			setSearchText('');
-		};
-		return (
-			<HavingFilterTag
-				label={label}
-				value={value}
-				closable={closable}
-				disabled={disabled}
-				onClose={handleClose}
-				onUpdate={handleUpdateTag}
-			/>
-		);
-	};
-
-	const handleSearch = (search: string): void => {
-		const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
-
-		const currentSearch = isMulti
-			? trimmedSearch
-			: trimmedSearch.split(' ').slice(0, 3).join(' ');
-
-		const isValidSearch = isValidHavingValue(currentSearch);
-
-		if (isValidSearch) {
-			setSearchText(currentSearch);
-		}
-	};
-
-	useEffect(() => {
-		setLocalValues(transformHavingToStringValue(having || []));
-	}, [having]);
-
-	useEffect(() => {
-		parseSearchText(searchText);
-	}, [searchText, parseSearchText]);
-
-	const resetChanges = (): void => {
-		setSearchText('');
-		setCurrentFormValue(initialHavingValues);
-		setOptions(aggregatorOptions);
-	};
-
-	const handleDeselect = (value: string): void => {
-		const result = localValues.filter((item) => item !== value);
-		const having: Having[] = result.map(transformFromStringToHaving);
-		onChange(having);
-		resetChanges();
-	};
-
-	const handleSelect = (currentValue: string): void => {
-		const { columnName, op, value } = getHavingObject(currentValue);
-
-		const isCompletedValue = value.every((item) => !!item);
-
-		const isClearSearch = isCompletedValue && columnName && op;
-
-		setSearchText(isClearSearch ? '' : currentValue);
-	};
-
-	const handleChange = (values: string[]): void => {
-		const having: Having[] = values.map(transformFromStringToHaving);
-
-		const isSelectable =
-			currentFormValue.value.length > 0 &&
-			currentFormValue.value.every((value) => !!value);
-
-		if (isSelectable) {
-			onChange(having);
-			resetChanges();
-		}
-	};
-
-	return (
-		<Select
-			getPopupContainer={getPopupContainer}
-			autoClearSearchValue={false}
-			mode="multiple"
-			onSearch={handleSearch}
-			searchValue={searchText}
-			data-testid="havingSelectFormula"
-			placeholder="Count(operation) > 5"
-			style={{ width: '100%' }}
-			tagRender={tagRender}
-			onDeselect={handleDeselect}
-			onSelect={handleSelect}
-			onChange={handleChange}
-			value={localValues}
-		>
-			{options.map((opt) => (
-				<Select.Option key={opt.value} value={opt.value} title="havingOption">
-					{opt.label}
-				</Select.Option>
-			))}
-		</Select>
-	);
-}
-
-export default HavingFilter;

frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts

@@ -1,12 +0,0 @@
-import { HavingFilterTagProps } from 'container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces';
-import {
-	Having,
-	IBuilderFormula,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-export type HavingFilterProps = {
-	formula: IBuilderFormula;
-	onChange: (having: Having[]) => void;
-};
-
-export type HavingTagRenderProps = Omit<HavingFilterTagProps, 'onUpdate'>;

frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx

@@ -1,20 +0,0 @@
-import { InputNumber } from 'antd';
-
-import { selectStyle } from '../../QueryBuilderSearchV2/config';
-import { handleKeyDownLimitFilter } from '../../utils';
-import { LimitFilterProps } from './types';
-
-function LimitFilter({ onChange, formula }: LimitFilterProps): JSX.Element {
-	return (
-		<InputNumber
-			min={1}
-			type="number"
-			value={formula.limit}
-			style={selectStyle}
-			onChange={onChange}
-			onKeyDown={handleKeyDownLimitFilter}
-		/>
-	);
-}
-
-export default LimitFilter;

frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts

@@ -1,6 +0,0 @@
-import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
-
-export interface LimitFilterProps {
-	onChange: (values: number | null) => void;
-	formula: IBuilderFormula;
-}

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx

@@ -1,85 +0,0 @@
-import { useMemo } from 'react';
-import { Select, Spin } from 'antd';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { MetricAggregateOperator } from 'types/common/queryBuilder';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
-
-import { selectStyle } from '../../QueryBuilderSearchV2/config';
-import { OrderByProps } from './types';
-import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';
-
-function OrderByFilter({
-	formula,
-	onChange,
-	query,
-}: OrderByProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
-	const {
-		debouncedSearchText,
-		createOptions,
-		aggregationOptions,
-		handleChange,
-		handleSearchKeys,
-		selectedValue,
-		generateOptions,
-	} = useOrderByFormulaFilter({
-		query,
-		onChange,
-		formula,
-	});
-
-	const { data, isFetching } = useGetAggregateKeys(
-		{
-			aggregateAttribute: query.aggregateAttribute?.key || '',
-			dataSource: query.dataSource,
-			aggregateOperator: query.aggregateOperator || '',
-			searchText: debouncedSearchText,
-		},
-		{
-			enabled: !!query.aggregateAttribute?.key,
-			keepPreviousData: true,
-		},
-	);
-
-	const optionsData = useMemo(() => {
-		const keyOptions = createOptions(data?.payload?.attributeKeys || []);
-		const groupByOptions = createOptions(query.groupBy);
-		const options =
-			query.aggregateOperator === MetricAggregateOperator.NOOP
-				? keyOptions
-				: [...groupByOptions, ...aggregationOptions];
-
-		return generateOptions(options);
-	}, [
-		aggregationOptions,
-		createOptions,
-		data?.payload?.attributeKeys,
-		generateOptions,
-		query.aggregateOperator,
-		query.groupBy,
-	]);
-
-	const isDisabledSelect =
-		!query.aggregateAttribute?.key ||
-		query.aggregateOperator === MetricAggregateOperator.NOOP;
-
-	return (
-		<Select
-			getPopupContainer={getPopupContainer}
-			mode="tags"
-			style={selectStyle}
-			onSearch={handleSearchKeys}
-			showSearch
-			disabled={isDisabledSelect}
-			showArrow={false}
-			value={selectedValue}
-			labelInValue
-			filterOption={false}
-			options={optionsData}
-			notFoundContent={isFetching ? <Spin size="small" /> : null}
-			onChange={handleChange}
-		/>
-	);
-}
-
-export default OrderByFilter;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts

@@ -1,12 +0,0 @@
-import {
-	IBuilderFormula,
-	IBuilderQuery,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-export interface OrderByProps {
-	formula: IBuilderFormula;
-	query: IBuilderQuery;
-	onChange: (value: IBuilderFormula['orderBy']) => void;
-}
-
-export type IOrderByFormulaFilterProps = OrderByProps;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx

@@ -1,129 +0,0 @@
-import { useMemo, useState } from 'react';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import useDebounce from 'hooks/useDebounce';
-import { IOption } from 'hooks/useResourceAttribute/types';
-import isEqual from 'lodash-es/isEqual';
-import uniqWith from 'lodash-es/uniqWith';
-import { parse } from 'papaparse';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
-
-import { ORDERBY_FILTERS } from '../../OrderByFilter/config';
-import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
-import { UseOrderByFilterResult } from '../../OrderByFilter/useOrderByFilter';
-import {
-	getLabelFromValue,
-	mapLabelValuePairs,
-	orderByValueDelimiter,
-} from '../../OrderByFilter/utils';
-import { getRemoveOrderFromValue } from '../../QueryBuilderSearchV2/utils';
-import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
-import { IOrderByFormulaFilterProps } from './types';
-import { transformToOrderByStringValuesByFormula } from './utils';
-
-export const useOrderByFormulaFilter = ({
-	onChange,
-	formula,
-}: IOrderByFormulaFilterProps): UseOrderByFilterResult => {
-	const [searchText, setSearchText] = useState<string>('');
-
-	const debouncedSearchText = useDebounce(searchText, DEBOUNCE_DELAY);
-
-	const handleSearchKeys = (searchText: string): void =>
-		setSearchText(searchText);
-
-	const handleChange = (values: IOption[]): void => {
-		const validResult = getValidOrderByResult(values);
-		const result = getUniqueOrderByValues(validResult);
-
-		const orderByValues: OrderByPayload[] = result.map((item) => {
-			const match = parse(item.value, { delimiter: orderByValueDelimiter });
-
-			if (!match) {
-				return {
-					columnName: item.value,
-					order: ORDERBY_FILTERS.ASC,
-				};
-			}
-
-			const [columnName, order] = match.data.flat() as string[];
-
-			const columnNameValue =
-				columnName === SIGNOZ_VALUE ? SIGNOZ_VALUE : columnName;
-
-			const orderValue = order ?? ORDERBY_FILTERS.ASC;
-
-			return {
-				columnName: columnNameValue,
-				order: orderValue,
-			};
-		});
-
-		setSearchText('');
-		onChange(orderByValues);
-	};
-
-	const aggregationOptions = [
-		{
-			label: `${formula.expression} ${ORDERBY_FILTERS.ASC}`,
-			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
-		},
-		{
-			label: `${formula.expression} ${ORDERBY_FILTERS.DESC}`,
-			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
-		},
-	];
-
-	const selectedValue = transformToOrderByStringValuesByFormula(formula);
-
-	const createOptions = (data: BaseAutocompleteData[]): IOption[] =>
-		mapLabelValuePairs(data).flat();
-
-	const customValue: IOption[] = useMemo(() => {
-		if (!searchText) {
-			return [];
-		}
-
-		return [
-			{
-				label: `${searchText} ${ORDERBY_FILTERS.ASC}`,
-				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
-			},
-			{
-				label: `${searchText} ${ORDERBY_FILTERS.DESC}`,
-				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
-			},
-		];
-	}, [searchText]);
-
-	const generateOptions = (options: IOption[]): IOption[] => {
-		const currentCustomValue = options.find(
-			(keyOption) =>
-				getRemoveOrderFromValue(keyOption.value) === debouncedSearchText,
-		)
-			? []
-			: customValue;
-
-		const result = [...currentCustomValue, ...options];
-
-		const uniqResult = uniqWith(result, isEqual);
-
-		return uniqResult.filter(
-			(option) =>
-				!getLabelFromValue(selectedValue).includes(
-					getRemoveOrderFromValue(option.value),
-				),
-		);
-	};
-
-	return {
-		searchText,
-		debouncedSearchText,
-		selectedValue,
-		aggregationOptions,
-		createOptions,
-		handleChange,
-		handleSearchKeys,
-		generateOptions,
-	};
-};

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts

@@ -1,26 +0,0 @@
-import { IOption } from 'hooks/useResourceAttribute/types';
-import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
-
-import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
-import { orderByValueDelimiter } from '../../OrderByFilter/utils';
-
-export const transformToOrderByStringValuesByFormula = (
-	formula: IBuilderFormula,
-): IOption[] => {
-	const prepareSelectedValue: IOption[] =
-		formula?.orderBy?.map((item) => {
-			if (item.columnName === SIGNOZ_VALUE) {
-				return {
-					label: `${formula.expression} ${item.order}`,
-					value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
-				};
-			}
-
-			return {
-				label: `${item.columnName} ${item.order}`,
-				value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
-			};
-		}) || [];
-
-	return prepareSelectedValue;
-};

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts

@@ -6,7 +6,7 @@ import {
 export type OrderByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: OrderByPayload[]) => void;
-	isListViewPanel?: boolean;
+	isRawQuery?: boolean;
 	entityVersion?: string;
 	isNewQueryV2?: boolean;
 };

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx

@@ -12,7 +12,7 @@ import { useOrderByFilter } from './useOrderByFilter';
 export function OrderByFilter({
 	query,
 	onChange,
-	isListViewPanel = false,
+	isRawQuery = false,
 	entityVersion,
 	isNewQueryV2 = false,
 }: OrderByFilterProps): JSX.Element {
@@ -35,7 +35,7 @@ export function OrderByFilter({
 			searchText: debouncedSearchText,
 		},
 		{
-			enabled: !!query.aggregateAttribute?.key || isListViewPanel,
+			enabled: !!query.aggregateAttribute?.key || isRawQuery,
 			keepPreviousData: true,
 		},
 	);

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -19,7 +19,6 @@ import {
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -88,7 +87,6 @@ interface CustomTagProps {
 interface QueryBuilderSearchV2Props {
 	query: IBuilderQuery;
 	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
 	placeholder?: string;
 	className?: string;
 	suffixIcon?: React.ReactNode;
@@ -145,7 +143,6 @@ function QueryBuilderSearchV2(
 		placeholder,
 		className,
 		suffixIcon,
-		whereClauseConfig,
 		hardcodedAttributeKeys,
 		hasPopupContainer,
 		rootClassName,
@@ -477,31 +474,7 @@ function QueryBuilderSearchV2(
 		if (searchValue) {
 			const operatorType =
 				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-			// if key is added and operator is not present then convert to body CONTAINS key
 			if (
-				currentFilterItem?.key &&
-				isEmpty(currentFilterItem?.op) &&
-				whereClauseConfig?.customKey === 'body' &&
-				whereClauseConfig?.customOp === OPERATORS.CONTAINS
-			) {
-				// eslint-disable-next-line sonarjs/no-identical-functions
-				setTags((prev) => [
-					...prev,
-					{
-						key: {
-							key: 'body',
-							dataType: DataTypes.String,
-							type: '',
-							id: 'body--string----true',
-						},
-						op: OPERATORS.CONTAINS,
-						value: currentFilterItem?.key?.key,
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
 				currentFilterItem?.op === OPERATORS.EXISTS ||
 				currentFilterItem?.op === OPERATORS.NOT_EXISTS
 			) {
@@ -543,8 +516,6 @@ function QueryBuilderSearchV2(
 		currentFilterItem?.op,
 		currentFilterItem?.value,
 		searchValue,
-		whereClauseConfig?.customKey,
-		whereClauseConfig?.customOp,
 	]);
 
 	// this useEffect takes care of tokenisation based on the search state
@@ -1085,7 +1056,6 @@ QueryBuilderSearchV2.defaultProps = {
 	placeholder: PLACEHOLDER,
 	className: '',
 	suffixIcon: null,
-	whereClauseConfig: {},
 	hasPopupContainer: true,
 	rootClassName: '',
 	hardcodedAttributeKeys: undefined,

frontend/src/container/QueryBuilder/type.ts

@@ -26,7 +26,7 @@ export type QueryProps = {
 	isAvailableToDisable: boolean;
 	query: IBuilderQuery;
 	queryVariant?: 'static' | 'dropdown';
-	isListViewPanel?: boolean;
+	isRawQuery?: boolean;
 	showFunctions?: boolean;
 	version: string;
 	showSpanScopeSelector?: boolean;
@@ -35,4 +35,4 @@ export type QueryProps = {
 	hasTraceOperator?: boolean;
 	signalSource?: string;
 	isMultiQueryAllowed?: boolean;
-} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;
+} & Pick<QueryBuilderProps, 'fieldsConfig' | 'allowedDataSources'>;

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,16 +329,17 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(8);
+		expect(result).toHaveLength(9);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
-			'role',
-			'serviceaccount',
 			'license',
 			'logs',
-			'traces',
-			'metrics',
 			'meter-metrics',
+			'metrics',
+			'role',
+			'serviceaccount',
+			'subscription',
+			'traces',
 		]);
 	});
 
@@ -419,16 +420,17 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(8);
+		expect(result).toHaveLength(9);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
-			'role',
-			'serviceaccount',
 			'license',
 			'logs',
-			'traces',
-			'metrics',
 			'meter-metrics',
+			'metrics',
+			'role',
+			'serviceaccount',
+			'subscription',
+			'traces',
 		]);
 	});
 

frontend/src/container/RolesSettings/permissions.config.ts

@@ -6,6 +6,7 @@ import {
 	Gauge,
 	Key,
 	Logs,
+	Receipt,
 	Shield,
 } from '@signozhq/icons';
 
@@ -69,6 +70,13 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 		selectorPlaceholder: 'Type license ID, separate multiple with comma or space',
 		docsAnchor: 'license',
 	},
+	subscription: {
+		label: 'Subscription',
+		description: 'The workspace subscription, its usage and billing details.',
+		icon: Receipt,
+		selectorPlaceholder: 'Type * to cover the workspace subscription',
+		docsAnchor: 'subscription',
+	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',
@@ -107,7 +115,11 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 	},
 };
 
-export const RESOURCE_ORDER = Object.keys(RESOURCE_PANELS) as AuthZResource[];
+export const RESOURCE_ORDER = (
+	Object.keys(RESOURCE_PANELS) as AuthZResource[]
+).sort((left, right) =>
+	RESOURCE_PANELS[left].label.localeCompare(RESOURCE_PANELS[right].label),
+);
 
 export function getResourcePanel(resource: AuthZResource): ResourcePanelConfig {
 	const panel = RESOURCE_PANELS[resource];

frontend/src/container/TracesExplorer/QuerySection/index.tsx

@@ -1,55 +1,23 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: isList, isDisabled: true },
-			having: { isHidden: isList, isDisabled: true },
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps) => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
-		[],
-	);
-
-	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
-		const shouldRenderCustomOrderBy =
-			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
-
-		return {
-			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
-		};
-	}, [panelTypes, renderOrderBy]);
-
-	const isListViewPanel = useMemo(
+	const isRawQuery = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isListViewPanel={isListViewPanel}
+			isRawQuery={isRawQuery}
 			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
-			queryComponents={queryComponents}
 			panelType={panelTypes}
-			filterConfigs={filterConfigs}
 			showOnlyWhereClause={
 				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
 			}

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -29,5 +29,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
+		HEATMAP: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Card/FullView/index.tsx

@@ -316,7 +316,7 @@ function FullView({
 								<QueryBuilderV2
 									panelType={selectedPanelType}
 									version="v3"
-									isListViewPanel={selectedPanelType === PANEL_TYPES.LIST}
+									isRawQuery={selectedPanelType === PANEL_TYPES.LIST}
 									signalSourceChangeEnabled
 									// filterConfigs={filterConfigs}
 									// queryComponents={queryComponents}

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -18,4 +18,6 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
+	// V2-only kind; it renders through the V2 panel registry.
+	[PANEL_TYPES.HEATMAP]: null,
 };

frontend/src/hooks/queryBuilder/__tests__/useQueryBuilderOperations.test.ts

@@ -62,14 +62,14 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 		legend: '',
 	};
 
-	const setupMockQueryBuilder = (): void => {
+	const setupMockQueryBuilder = (panelType = 'time_series'): void => {
 		(useQueryBuilder as jest.Mock).mockReturnValue({
 			handleSetQueryData: mockHandleSetQueryData,
 			handleSetFormulaData: mockHandleSetFormulaData,
 			removeQueryBuilderEntityByIndex: mockRemoveQueryBuilderEntityByIndex,
 			setLastUsedQuery: mockSetLastUsedQuery,
 			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-			panelType: 'time_series',
+			panelType,
 			currentQuery: {
 				builder: {
 					queryData: [defaultMockQuery, defaultMockQuery],
@@ -332,4 +332,85 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 			);
 		});
 	});
+
+	describe('spaceAggregationOptions for a histogram metric', () => {
+		const histogramQuery: IBuilderQuery = {
+			...defaultMockQuery,
+			aggregateAttribute: {
+				key: 'signoz_latency',
+				dataType: DataTypes.Float64,
+				type: ATTRIBUTE_TYPES.HISTOGRAM,
+			} as BaseAutocompleteData,
+		};
+
+		it('offers the percentiles on a time series panel', () => {
+			const result = renderHookWithProps({ query: histogramQuery });
+
+			expect(
+				result.current.spaceAggregationOptions.map((o) => o.value),
+			).toStrictEqual([
+				MetricAggregateOperator.P50,
+				MetricAggregateOperator.P75,
+				MetricAggregateOperator.P90,
+				MetricAggregateOperator.P95,
+				MetricAggregateOperator.P99,
+			]);
+		});
+
+		it('offers sum alone on a heatmap panel, whose Y axis is the `le` labels', () => {
+			setupMockQueryBuilder('heatmap');
+
+			const result = renderHookWithProps({ query: histogramQuery });
+
+			expect(
+				result.current.spaceAggregationOptions.map((o) => o.value),
+			).toStrictEqual([MetricAggregateOperator.SUM]);
+		});
+	});
+
+	describe('picking a histogram metric', () => {
+		const histogramAttribute: BaseAutocompleteData = {
+			key: 'http.client.duration.bucket',
+			dataType: DataTypes.Float64,
+			type: ATTRIBUTE_TYPES.HISTOGRAM,
+		};
+
+		it('defaults the spatial aggregation to p90 on a time series panel', () => {
+			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
+			act(() => {
+				result.current.handleChangeAggregatorAttribute(histogramAttribute);
+			});
+
+			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
+				0,
+				expect.objectContaining({
+					aggregations: [
+						expect.objectContaining({
+							spaceAggregation: MetricAggregateOperator.P90,
+						}),
+					],
+				}),
+			);
+		});
+
+		it('defaults it to sum on a heatmap panel, which offers nothing else', () => {
+			setupMockQueryBuilder('heatmap');
+
+			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
+			act(() => {
+				result.current.handleChangeAggregatorAttribute(histogramAttribute);
+			});
+
+			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
+				0,
+				expect.objectContaining({
+					aggregations: [
+						expect.objectContaining({
+							spaceAggregation: MetricAggregateOperator.SUM,
+						}),
+					],
+				}),
+			);
+		});
+	});
 });

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -14,12 +14,11 @@ import {
 	initialQueryBuilderFormValuesMap,
 	listViewInitialLogQuery,
 	listViewInitialTraceQuery,
-	mapOfFormulaToFilters,
-	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import {
 	metricsGaugeSpaceAggregateOperatorOptions,
+	metricsHeatmapHistogramSpaceAggregateOperatorOptions,
 	metricsHistogramSpaceAggregateOperatorOptions,
 	metricsSumSpaceAggregateOperatorOptions,
 	metricsUnknownSpaceAggregateOperatorOptions,
@@ -59,9 +58,8 @@ import { getFormatedLegend } from 'utils/getFormatedLegend';
 export const useQueryOperations: UseQueryOperations = ({
 	query,
 	index,
-	filterConfigs,
 	formula,
-	isListViewPanel = false,
+	isRawQuery = false,
 	entityVersion,
 	isForTraceOperator = false,
 	savePreviousQuery = false,
@@ -105,46 +103,7 @@ export const useQueryOperations: UseQueryOperations = ({
 		}
 	}, [query]);
 
-	const { dataSource, aggregateOperator } = query;
-
-	const getNewListOfAdditionalFilters = useCallback(
-		(dataSource: DataSource, isQuery: boolean): string[] => {
-			const additionalFiltersKeys: (keyof Pick<
-				IBuilderQuery,
-				'orderBy' | 'limit' | 'having' | 'stepInterval'
-			>)[] = ['having', 'limit', 'orderBy', 'stepInterval'];
-
-			const mapsOfFilters = isQuery ? mapOfQueryFilters : mapOfFormulaToFilters;
-
-			const result: string[] = mapsOfFilters[dataSource]?.reduce<string[]>(
-				(acc, item) => {
-					if (
-						filterConfigs &&
-						filterConfigs[item.field as (typeof additionalFiltersKeys)[number]]
-							?.isHidden
-					) {
-						return acc;
-					}
-
-					acc.push(item.text);
-
-					return acc;
-				},
-				[],
-			);
-
-			return result;
-		},
-
-		[filterConfigs],
-	);
-
-	const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
-		string[]
-	>(getNewListOfAdditionalFilters(dataSource, true));
-
-	const [listOfAdditionalFormulaFilters, setListOfAdditionalFormulaFilters] =
-		useState<string[]>(getNewListOfAdditionalFilters(dataSource, false));
+	const { dataSource } = query;
 
 	const handleChangeOperator = useCallback(
 		(value: string): void => {
@@ -218,6 +177,11 @@ export const useQueryOperations: UseQueryOperations = ({
 							(aggregateAttribute?.type as ATTRIBUTE_TYPES) || ATTRIBUTE_TYPES.GAUGE,
 					});
 
+			const histogramSpaceAggregationOptions =
+				panelType === PANEL_TYPES.HEATMAP
+					? metricsHeatmapHistogramSpaceAggregateOperatorOptions
+					: metricsHistogramSpaceAggregateOperatorOptions;
+
 			switch (aggregateAttribute?.type) {
 				case ATTRIBUTE_TYPES.SUM:
 					setSpaceAggregationOptions(metricsSumSpaceAggregateOperatorOptions);
@@ -227,11 +191,11 @@ export const useQueryOperations: UseQueryOperations = ({
 					break;
 
 				case ATTRIBUTE_TYPES.HISTOGRAM:
-					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
+					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
 					break;
 
 				case ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM:
-					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
+					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
 					break;
 				default:
 					setSpaceAggregationOptions(metricsUnknownSpaceAggregateOperatorOptions);
@@ -340,7 +304,12 @@ export const useQueryOperations: UseQueryOperations = ({
 									timeAggregation: '',
 									metricName: newQuery.aggregateAttribute?.key || '',
 									temporality: '',
-									spaceAggregation: MetricAggregateOperator.P90,
+									// A heatmap draws the `le` counts themselves and offers sum alone, so
+									// a percentile default would sit in the selector with no option behind it.
+									spaceAggregation:
+										panelType === PANEL_TYPES.HEATMAP
+											? MetricAggregateOperator.SUM
+											: MetricAggregateOperator.P90,
 									reduceTo: ReduceOperators.AVG,
 								},
 							];
@@ -430,6 +399,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			index,
 			handleMetricAggregateAtributeTypes,
 			previousMetricInfo,
+			panelType,
 		],
 	);
 
@@ -460,7 +430,7 @@ export const useQueryOperations: UseQueryOperations = ({
 				removeKeyFromPreviousQuery(newKey);
 			}
 
-			if (isListViewPanel) {
+			if (isRawQuery) {
 				let listPanelQuery: Query | null = null;
 
 				if (nextSource === DataSource.LOGS) {
@@ -506,7 +476,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			handleSetQueryData(index, newQueryData);
 		},
 		[
-			isListViewPanel,
+			isRawQuery,
 			panelType,
 			query,
 			handleSetQueryData,
@@ -625,32 +595,18 @@ export const useQueryOperations: UseQueryOperations = ({
 		handleMetricAggregateAtributeTypes,
 	]);
 
-	useEffect(() => {
-		const additionalFilters = getNewListOfAdditionalFilters(dataSource, true);
-
-		setListOfAdditionalFilters(additionalFilters);
-	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
-
-	useEffect(() => {
-		const additionalFilters = getNewListOfAdditionalFilters(dataSource, false);
-
-		setListOfAdditionalFormulaFilters(additionalFilters);
-	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
-
 	return {
 		isTracePanelType,
 		isMetricsDataSource,
 		isLogsDataSource,
 		operators,
 		spaceAggregationOptions,
-		listOfAdditionalFilters,
 		handleChangeOperator,
 		handleSpaceAggregationChange,
 		handleChangeAggregatorAttribute,
 		handleChangeDataSource,
 		handleDeleteQuery,
 		handleChangeQueryData,
-		listOfAdditionalFormulaFilters,
 		handleChangeFormulaData,
 		handleQueryFunctionsUpdates,
 	};

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -222,6 +222,31 @@ describe('useGetYAxisUnit', () => {
 		expect(result.current.isError).toBe(false);
 	});
 
+	it('resolves the unit on the first render, without a settling pass', () => {
+		// The real `useGetMetrics` rebuilds its array on every render; a hook that
+		// stored the unit would need an extra render to settle, and would schedule one
+		// after every render of the panel editor.
+		mockUseGetMetrics.mockImplementation(() => ({
+			isLoading: false,
+			isError: false,
+			metrics: [MOCK_METRIC_1],
+		}));
+
+		let renderCount = 0;
+		const { result, rerender } = renderHook(() => {
+			renderCount += 1;
+			return useGetYAxisUnit();
+		});
+
+		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
+		expect(renderCount).toBe(1);
+
+		rerender();
+
+		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
+		expect(renderCount).toBe(2);
+	});
+
 	it('should return undefined when metrics have different units', async () => {
 		mockUseGetMetrics.mockReturnValueOnce({
 			isLoading: false,

frontend/src/hooks/useGetYAxisUnit.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import {
 	getMetricUnits,
 	useGetMetrics,
@@ -46,7 +46,6 @@ function useGetYAxisUnit(
 	},
 ): UseGetYAxisUnitResult {
 	const { stagedQuery } = useQueryBuilder();
-	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
 
 	const metricNames: string[] | null = useMemo(() => {
 		// If the query type is not QUERY_BUILDER, return null
@@ -95,27 +94,16 @@ function useGetYAxisUnit(
 		[units],
 	);
 
-	useEffect(() => {
-		// If there are no metrics, set the y-axis unit to undefined
-		if (units.length === 0) {
-			setYAxisUnit(undefined);
-			// If there is one metric and it has a non-empty unit, set the y-axis unit to it
-		} else if (units.length === 1 && units[0] !== '') {
-			setYAxisUnit(units[0]);
-			// If all metrics have the same non-empty unit, set the y-axis unit to it
-		} else if (areAllMetricUnitsSame) {
-			if (units[0] !== '') {
-				setYAxisUnit(units[0]);
-			} else {
-				setYAxisUnit(undefined);
-			}
-			// If there is more than one metric and they have different units, set the y-axis unit to undefined
-		} else if (units.length > 1 && !areAllMetricUnitsSame) {
-			setYAxisUnit(undefined);
-			// If there is one metric and it has an empty unit, set the y-axis unit to undefined
-		} else if (units.length === 1 && units[0] === '') {
-			setYAxisUnit(undefined);
+	// Derived, not stored: `useGetMetrics` rebuilds its array on every render, so a
+	// state-and-effect version schedules an update after every render — the shape
+	// React reports as "Maximum update depth exceeded".
+	const yAxisUnit = useMemo(() => {
+		// A single shared unit is the only thing a single axis can carry; metrics that
+		// disagree, or that carry no unit at all, leave the axis unitless.
+		if (units.length === 0 || !areAllMetricUnitsSame) {
+			return undefined;
 		}
+		return units[0] || undefined;
 	}, [units, areAllMetricUnitsSame]);
 
 	return { yAxisUnit, isLoading, isError };

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -13,6 +13,11 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
 			},
+			{
+				kind: 'subscription',
+				type: 'metaresource',
+				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
+			},
 			{
 				kind: 'role',
 				type: 'role',

frontend/src/lib/authz/hooks/useAuthZ/permissions/license.permissions.ts

@@ -4,3 +4,5 @@ import type { BrandedPermission } from '../types';
 // Resource-level — require a specific license id
 export const buildLicenseReadPermission = (id: string): BrandedPermission =>
 	buildPermission('read', `license:${id}`);
+export const buildLicenseUpdatePermission = (id: string): BrandedPermission =>
+	buildPermission('update', `license:${id}`);

frontend/src/lib/authz/hooks/useAuthZ/permissions/subscription.permissions.ts

@@ -0,0 +1,26 @@
+import { buildPermission } from '../utils';
+
+export const SubscriptionReadPermission = buildPermission(
+	'read',
+	'subscription:*',
+);
+export const SubscriptionCreatePermission = buildPermission(
+	'create',
+	'subscription:*',
+);
+export const SubscriptionUpdatePermission = buildPermission(
+	'update',
+	'subscription:*',
+);
+export const SubscriptionListPermission = buildPermission(
+	'list',
+	'subscription:*',
+);
+export const SubscriptionDeletePermission = buildPermission(
+	'delete',
+	'subscription:*',
+);
+export const SubscriptionManagePermissions = [
+	SubscriptionListPermission,
+	SubscriptionUpdatePermission,
+];

frontend/src/lib/query/panelQuery.ts

@@ -99,6 +99,7 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
+	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
 
 export const panelTypeDataSourceFormValuesMap: Record<
@@ -306,6 +307,74 @@ export const panelTypeDataSourceFormValuesMap: Record<
 			},
 		},
 	},
+	// `functions` and `having` are dropped rather than carried: the heatmap request
+	// rejects both. Every signal is listed because the map is keyed by the query's
+	// own, which a switch can still be holding.
+	[PANEL_TYPES.HEATMAP]: {
+		[DataSource.LOGS]: {
+			builder: {
+				queryData: [
+					'aggregateAttribute',
+					'aggregateOperator',
+					'timeAggregation',
+					'filters',
+					'filter',
+					'spaceAggregation',
+					'groupBy',
+					'limit',
+					'orderBy',
+					'stepInterval',
+					'legend',
+					'queryName',
+					'disabled',
+					'expression',
+					'aggregations',
+				],
+			},
+		},
+		[DataSource.METRICS]: {
+			builder: {
+				queryData: [
+					'aggregateAttribute',
+					'aggregateOperator',
+					'timeAggregation',
+					'filters',
+					'filter',
+					'spaceAggregation',
+					'groupBy',
+					'limit',
+					'orderBy',
+					'stepInterval',
+					'legend',
+					'queryName',
+					'disabled',
+					'expression',
+					'aggregations',
+				],
+			},
+		},
+		[DataSource.TRACES]: {
+			builder: {
+				queryData: [
+					'aggregateAttribute',
+					'aggregateOperator',
+					'timeAggregation',
+					'filters',
+					'filter',
+					'spaceAggregation',
+					'groupBy',
+					'limit',
+					'orderBy',
+					'stepInterval',
+					'legend',
+					'queryName',
+					'disabled',
+					'expression',
+					'aggregations',
+				],
+			},
+		},
+	},
 	[PANEL_TYPES.TABLE]: {
 		[DataSource.LOGS]: {
 			builder: {

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.module.scss

@@ -0,0 +1,78 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 4px 12px 8px;
+	box-sizing: border-box;
+}
+
+.label {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+}
+
+.track {
+	position: relative;
+	flex: 1 1 auto;
+	height: 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+}
+
+.marker {
+	position: absolute;
+	top: -3px;
+	bottom: -3px;
+	width: 2px;
+	transform: translateX(-1px);
+	// Reads against the panel through the 3px it overhangs the track at either end,
+	// which is what carries it where the ramp happens to match it.
+	background: var(--popover-foreground);
+	border-radius: 1px;
+}
+
+.caption {
+	flex: 0 0 auto;
+	font-size: 10px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--muted-foreground);
+}
+
+.keys {
+	display: flex;
+	flex: 0 0 auto;
+	gap: 12px;
+	align-items: center;
+}
+
+.key {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+	font-size: 11px;
+	color: var(--muted-foreground);
+}
+
+.swatch,
+.hatchSwatch {
+	width: 11px;
+	height: 11px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+	box-sizing: border-box;
+}
+
+// Approximates the canvas hatch painted over null cells, which `createHatchPattern`
+// strokes in the theme's own direction — light on dark, dark on light.
+.hatchSwatch {
+	background-image: repeating-linear-gradient(
+		45deg,
+		transparent 0 2px,
+		var(--muted-foreground) 2px 3px
+	);
+}

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+
+import Styles from './ColorBar.module.scss';
+
+export interface ColorBarProps {
+	/** Low to high, drawn as hard-edged segments so the bar shows the same set of
+	 *  colours as the cells. */
+	ramp: string[];
+	minLabel: string;
+	maxLabel: string;
+	/** 0..1. `null` hides the marker. */
+	markerPosition?: number | null;
+	/** What the colour encodes, e.g. "count". */
+	label?: string;
+	/** Keys for the two states a ramp cannot express: a hatched data gap, and a
+	 *  genuine zero at the bottom. Without them the difference is guesswork. */
+	showStateKeys?: boolean;
+	'data-testid'?: string;
+}
+
+/** What a colour means, plus a marker for the value under the cursor. */
+export default function ColorBar({
+	ramp,
+	minLabel,
+	maxLabel,
+	markerPosition = null,
+	label,
+	showStateKeys = true,
+	'data-testid': testId = 'color-bar',
+}: ColorBarProps): JSX.Element | null {
+	const gradient = useMemo(() => {
+		if (ramp.length === 0) {
+			return undefined;
+		}
+		if (ramp.length === 1) {
+			return ramp[0];
+		}
+		const stops = ramp.flatMap((color, index) => {
+			const from = (index / ramp.length) * 100;
+			const to = ((index + 1) / ramp.length) * 100;
+			return [`${color} ${from}%`, `${color} ${to}%`];
+		});
+		return `linear-gradient(to right, ${stops.join(', ')})`;
+	}, [ramp]);
+
+	if (gradient === undefined) {
+		return null;
+	}
+
+	const clampedMarker =
+		markerPosition === null ? null : Math.min(Math.max(markerPosition, 0), 1);
+
+	return (
+		<div className={Styles.container} data-testid={testId}>
+			{label && <span className={Styles.caption}>{label}</span>}
+			<span className={Styles.label}>{minLabel}</span>
+			<div className={Styles.track} style={{ background: gradient }}>
+				{clampedMarker !== null && (
+					<span
+						className={Styles.marker}
+						style={{ left: `${clampedMarker * 100}%` }}
+						data-testid={`${testId}-marker`}
+					/>
+				)}
+			</div>
+			<span className={Styles.label}>{maxLabel}</span>
+			{showStateKeys && (
+				<div className={Styles.keys} data-testid={`${testId}-state-keys`}>
+					<span className={Styles.key}>
+						<span className={Styles.hatchSwatch} />
+						no data
+					</span>
+					<span className={Styles.key}>
+						<span className={Styles.swatch} style={{ background: ramp[0] }} />
+						count 0
+					</span>
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/ColorBar/__tests__/ColorBar.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react';
+
+import ColorBar from '../ColorBar';
+
+const RAMP = ['#111111', '#555555', '#999999', '#dddddd'];
+
+describe('ColorBar', () => {
+	it('renders the domain labels', () => {
+		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="1,204" />);
+
+		expect(screen.getByText('0')).toBeInTheDocument();
+		expect(screen.getByText('1,204')).toBeInTheDocument();
+	});
+
+	it('renders nothing without a ramp', () => {
+		const { container } = render(
+			<ColorBar ramp={[]} minLabel="0" maxLabel="0" />,
+		);
+
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it('hides the marker when nothing is hovered', () => {
+		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
+
+		expect(screen.queryByTestId('color-bar-marker')).not.toBeInTheDocument();
+	});
+
+	it('positions the marker at the hovered value', () => {
+		render(
+			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={0.25} />,
+		);
+
+		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '25%' });
+	});
+
+	it('clamps a marker outside the ramp to its ends', () => {
+		const { rerender } = render(
+			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={-2} />,
+		);
+		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '0%' });
+
+		rerender(
+			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={4} />,
+		);
+		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '100%' });
+	});
+
+	it('keys the two states a colour ramp cannot express', () => {
+		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
+
+		expect(screen.getByText('no data')).toBeInTheDocument();
+		expect(screen.getByText('count 0')).toBeInTheDocument();
+	});
+
+	it('draws the count-0 key with the bottom of the ramp', () => {
+		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
+
+		expect(screen.getByText('count 0').firstChild).toHaveStyle({
+			background: RAMP[0],
+		});
+	});
+
+	it('hides the state keys when asked', () => {
+		render(
+			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" showStateKeys={false} />,
+		);
+
+		expect(screen.queryByText('no data')).not.toBeInTheDocument();
+	});
+
+	it('captions what the colour encodes', () => {
+		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" label="count" />);
+
+		expect(screen.getByText('count')).toBeInTheDocument();
+	});
+
+	it('renders hard-edged segments so the bar matches the drawn cells', () => {
+		render(
+			<ColorBar
+				ramp={['#111111', '#dddddd']}
+				minLabel="0"
+				maxLabel="10"
+				data-testid="scale"
+			/>,
+		);
+
+		const track = screen.getByTestId('scale').querySelector('div');
+		expect(track).toHaveStyle({
+			background:
+				'linear-gradient(to right, #111111 0%, #111111 50%, #dddddd 50%, #dddddd 100%)',
+		});
+	});
+});

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapBucketList.tsx

@@ -0,0 +1,29 @@
+import cx from 'classnames';
+
+import { formatCount, HeatmapBucketRow } from './heatmapTooltipContent';
+
+import Styles from './HeatmapTooltip.module.scss';
+
+/** The buckets either side of the hovered one, so a mode reads as a shape rather
+ *  than a single number. */
+export default function HeatmapBucketList({
+	rows,
+}: {
+	rows: HeatmapBucketRow[];
+}): JSX.Element {
+	return (
+		<div className={Styles.rows} data-testid="heatmap-tooltip-buckets">
+			{rows.map((row) => (
+				<div
+					key={row.label}
+					className={cx(Styles.row, { [Styles.rowHovered]: row.isHovered })}
+					data-hovered={row.isHovered}
+					data-testid="heatmap-tooltip-bucket-row"
+				>
+					<span className={Styles.rowLabel}>{row.label}</span>
+					<span className={Styles.rowValue}>{formatCount(row.count)}</span>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapContributionList.tsx

@@ -0,0 +1,39 @@
+import {
+	formatCount,
+	formatPercent,
+	HeatmapContributionRow,
+} from './heatmapTooltipContent';
+
+import Styles from './HeatmapTooltip.module.scss';
+
+/** Only shown when the cell sums more than one group. */
+export default function HeatmapContributionList({
+	rows,
+	groupByLabel,
+}: {
+	rows: HeatmapContributionRow[];
+	/** The `groupBy` keys these rows are by. */
+	groupByLabel: string;
+}): JSX.Element {
+	return (
+		<div className={Styles.rows} data-testid="heatmap-tooltip-contribution">
+			{groupByLabel && <span className={Styles.section}>{groupByLabel}</span>}
+			{rows.map((row) => (
+				<div
+					key={row.label}
+					className={Styles.row}
+					data-testid="heatmap-tooltip-contribution-row"
+				>
+					<span
+						className={Styles.marker}
+						style={{ background: row.color }}
+						data-is-legend-marker={true}
+					/>
+					<span className={Styles.rowLabel}>{row.label}</span>
+					<span className={Styles.rowValue}>{formatCount(row.count)}</span>
+					<span className={Styles.rowPercent}>{formatPercent(row.percent)}</span>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapTooltip.module.scss

@@ -0,0 +1,153 @@
+// Surface matches the shared Tooltip exactly — same tokens, same radius, no
+// shadow (the plugin's portal wrapper is transparent and paints nothing). Text
+// follows the theme through the popover/muted pair; the fixed vanilla ramp reads
+// as white-on-white in light mode.
+//
+// Padding lives on the sections rather than here, also matching the shared
+// tooltip: TooltipFooter draws its own dashed top border, background and bottom
+// corner radius, so it has to reach the container edges.
+.container {
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--l2-background);
+	-webkit-font-smoothing: antialiased;
+	color: var(--l2-foreground);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	display: flex;
+	flex-direction: column;
+	min-width: 220px;
+
+	&.pinned {
+		border-color: var(--ring);
+	}
+}
+
+// Separates the cell identity from whichever question the second block answers.
+.divider {
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--l2-border);
+}
+
+.identity {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+	font-size: 11px;
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+}
+
+.filter {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	min-width: 0;
+}
+
+// Hollow ring, matching the legend's unselected marker — this names the filter the
+// grid is under, it is not a colour key.
+.filterMarker {
+	width: 9px;
+	height: 9px;
+	border-radius: 50%;
+	border: 2px solid currentColor;
+	flex-shrink: 0;
+}
+
+.filterLabel {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.title {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.titleBucket {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--popover-foreground);
+}
+
+.titleCount {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--popover-foreground);
+	font-variant-numeric: tabular-nums;
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	padding: var(--spacing-3) var(--spacing-4);
+}
+
+.section {
+	font-size: 10px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--muted-foreground);
+	padding: 0 var(--spacing-2) var(--spacing-1);
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-1) var(--spacing-2);
+	border-radius: 3px;
+	font-size: 12px;
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+}
+
+// The hovered bucket is the one the cursor is on; lift it out of the neighbours.
+.rowHovered {
+	background: var(--l3-background);
+	color: var(--popover-foreground);
+	font-weight: 500;
+}
+
+.rowLabel {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rowValue {
+	flex: 0 0 auto;
+	text-align: right;
+}
+
+.rowPercent {
+	flex: 0 0 auto;
+	min-width: 40px;
+	text-align: right;
+	color: var(--muted-foreground);
+	opacity: 0.75;
+}
+
+.marker {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapTooltip.tsx

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import {
+	resolveColumnIndex,
+	resolveRowIndex,
+} from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
+import { useTimezone } from 'providers/Timezone';
+
+import { HeatmapTooltipProps } from '../../../types';
+import HeatmapBucketList from './HeatmapBucketList';
+import HeatmapContributionList from './HeatmapContributionList';
+import {
+	buildBucketRows,
+	buildContributionRows,
+	formatBucketLabel,
+	formatColumnRange,
+	formatCount,
+	formatGroupFilter,
+	HeatmapTooltipBody,
+	resolveGroupByLabel,
+	resolveTooltipBody,
+} from './heatmapTooltipContent';
+
+import Styles from './HeatmapTooltip.module.scss';
+
+/**
+ * The cell identity is the same in every state; the second block answers whichever
+ * question the panel state leaves open (see `resolveTooltipBody`). Purpose-built
+ * rather than composed from the shared `Tooltip`, which renders a flat list of
+ * series values — none of these states is that shape.
+ *
+ * The cell comes from the live cursor, not a prop: uPlot's `cursor.idx` snaps to
+ * the nearest timestamp, so half of every column would report its neighbour.
+ */
+export default function HeatmapTooltip({
+	uPlotInstance,
+	yAxis,
+	step,
+	series,
+	visibleGroups,
+	groupColor,
+	yAxisUnit,
+	decimalPrecision,
+	timezone,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: HeatmapTooltipProps): JSX.Element | null {
+	const { timezone: userTimezone } = useTimezone();
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+
+	// Read outside the memo: uPlot mutates the same instance on every move, so
+	// keying off the instance alone would freeze the cell.
+	const { left = -10, top = -10 } = uPlotInstance.cursor;
+
+	const cell = useMemo(() => {
+		if (left < 0 || top < 0) {
+			return null;
+		}
+		const timestamps = uPlotInstance.data[0] as ArrayLike<number>;
+		const column = resolveColumnIndex(
+			timestamps,
+			uPlotInstance.posToVal(left, 'x'),
+			step,
+		);
+		const row = resolveRowIndex(yAxis.edges, uPlotInstance.posToVal(top, 'y'));
+		if (column === null || row === null) {
+			return null;
+		}
+		return {
+			row,
+			column,
+			timestamp: timestamps[column],
+			count:
+				(uPlotInstance.data[row + 1] as Array<number | null> | undefined)?.[
+					column
+				] ?? null,
+		};
+	}, [left, top, uPlotInstance, yAxis, step]);
+
+	// The cell sums the enabled groups, so those are what a breakdown must cover.
+	const visible = useMemo(
+		() => series.filter((entry) => visibleGroups.includes(entry.label)),
+		[series, visibleGroups],
+	);
+	const body = resolveTooltipBody(visible.length);
+
+	const bucketRows = useMemo(() => {
+		if (!cell || body !== HeatmapTooltipBody.Buckets) {
+			return [];
+		}
+		return buildBucketRows({
+			counts: uPlotInstance.data.slice(1) as Array<
+				ArrayLike<number | null> | undefined
+			>,
+			yAxis,
+			row: cell.row,
+			column: cell.column,
+			yAxisUnit,
+			decimalPrecision,
+		});
+	}, [cell, body, uPlotInstance, yAxis, yAxisUnit, decimalPrecision]);
+
+	const contributionRows = useMemo(() => {
+		if (!cell || body !== HeatmapTooltipBody.Contribution) {
+			return [];
+		}
+		return buildContributionRows({
+			series: visible,
+			timestamp: cell.timestamp,
+			row: cell.row,
+			color: groupColor,
+		});
+	}, [cell, body, visible, groupColor]);
+
+	if (!cell) {
+		return null;
+	}
+
+	// A single enabled group out of several means the legend has isolated it.
+	const isolated =
+		series.length > 1 && visible.length === 1 ? visible[0] : undefined;
+	const filterLabel = formatGroupFilter(isolated);
+
+	return (
+		<div
+			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
+			data-pinned={isPinned}
+			data-testid="heatmap-tooltip"
+		>
+			<div className={Styles.identity}>
+				<div className={Styles.header}>
+					<span data-testid="heatmap-tooltip-range">
+						{formatColumnRange({
+							start: cell.timestamp,
+							step,
+							timezone: resolvedTimezone,
+						})}
+					</span>
+					{filterLabel && (
+						<span
+							className={Styles.filter}
+							style={{ color: groupColor }}
+							data-testid="heatmap-tooltip-filter"
+						>
+							<span className={Styles.filterMarker} />
+							<span className={Styles.filterLabel}>{filterLabel}</span>
+						</span>
+					)}
+				</div>
+
+				<div className={Styles.title}>
+					<span className={Styles.titleBucket} data-testid="heatmap-tooltip-bucket">
+						{formatBucketLabel({
+							yAxis,
+							row: cell.row,
+							yAxisUnit,
+							decimalPrecision,
+						})}
+					</span>
+					<span className={Styles.titleCount} data-testid="heatmap-tooltip-count">
+						{formatCount(cell.count)}
+					</span>
+				</div>
+			</div>
+
+			<span className={Styles.divider} data-testid="heatmap-tooltip-divider" />
+
+			{body === HeatmapTooltipBody.Contribution ? (
+				<HeatmapContributionList
+					rows={contributionRows}
+					groupByLabel={resolveGroupByLabel(series)}
+				/>
+			) : (
+				<HeatmapBucketList rows={bucketRows} />
+			)}
+
+			{renderTooltipFooter?.({ isPinned, dismiss })}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/__tests__/HeatmapTooltip.test.tsx

@@ -0,0 +1,289 @@
+import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
+import {
+	HeatmapAxisScale,
+	HeatmapSeries,
+} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
+import { render, RenderResult, screen } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import HeatmapTooltip from '../HeatmapTooltip';
+
+const BOUNDS = [100, 500, 1000, 2500];
+const Y_AXIS = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
+const TIMESTAMPS = [1_700_000_000, 1_700_000_300];
+const STEP = 300;
+const PLOT_SIZE = 500;
+const ROW_COUNT = BOUNDS.length + 1;
+
+/** Row 2 is the 500ms–1s bucket the design mock hovers. */
+const HOVERED_ROW = 2;
+
+function seriesFor(
+	group: string,
+	countsAtHoveredRow: [number, number],
+): HeatmapSeries {
+	return {
+		label: `service.name=${group}`,
+		labels: [{ key: 'service.name', value: group }],
+		points: TIMESTAMPS.map((timestamp, column) => ({
+			timestamp,
+			counts: Array.from({ length: ROW_COUNT }, (_, row) =>
+				row === HOVERED_ROW ? countsAtHoveredRow[column] : row * 10,
+			),
+		})),
+	};
+}
+
+const GROUPED: HeatmapSeries[] = [
+	seriesFor('checkout', [355, 300]),
+	seriesFor('frontend', [86, 80]),
+	seriesFor('cart', [14, 10]),
+	seriesFor('payments', [0, 0]),
+];
+
+/** Grid counts, matching what the renderer would have been handed. */
+function gridData(rowTotals: number[]): uPlot.AlignedData {
+	return [
+		TIMESTAMPS,
+		...Array.from({ length: ROW_COUNT }, (_, row) => [
+			rowTotals[row] ?? row * 40,
+			rowTotals[row] ?? row * 40,
+		]),
+	] as unknown as uPlot.AlignedData;
+}
+
+// Totals chosen to match the mock: 2 / 92 / 455 / 269 / 10 bottom-up.
+const ROW_TOTALS = [10, 269, 455, 92, 2];
+
+function createFakePlot(): uPlot {
+	const xSpan = TIMESTAMPS[TIMESTAMPS.length - 1] + STEP - TIMESTAMPS[0];
+	const ySpan = Y_AXIS.max - Y_AXIS.min;
+	// Aim the cursor at the middle of the hovered row, first column.
+	const rowMid = (Y_AXIS.edges[HOVERED_ROW] + Y_AXIS.edges[HOVERED_ROW + 1]) / 2;
+	const top = PLOT_SIZE * (1 - (rowMid - Y_AXIS.min) / ySpan);
+
+	return {
+		data: gridData(ROW_TOTALS),
+		cursor: { left: PLOT_SIZE * 0.25, top },
+		posToVal: (pos: number, scaleKey: string): number =>
+			scaleKey === 'x'
+				? TIMESTAMPS[0] + (pos / PLOT_SIZE) * xSpan
+				: Y_AXIS.min + ((PLOT_SIZE - pos) / PLOT_SIZE) * ySpan,
+	} as unknown as uPlot;
+}
+
+function renderTooltip(
+	overrides: Partial<React.ComponentProps<typeof HeatmapTooltip>> = {},
+): RenderResult {
+	return render(
+		<HeatmapTooltip
+			id="panel-1"
+			uPlotInstance={createFakePlot()}
+			dataIndexes={[]}
+			seriesIndex={null}
+			isPinned={false}
+			dismiss={jest.fn()}
+			viaSync={false}
+			yAxis={Y_AXIS}
+			step={STEP}
+			series={GROUPED}
+			visibleGroups={GROUPED.map((entry) => entry.label)}
+			groupColor="#fcfdbf"
+			yAxisUnit="ms"
+			{...overrides}
+		/>,
+	);
+}
+
+describe('HeatmapTooltip — cell identity', () => {
+	it('heads with the time span the column covers, not a single instant', () => {
+		renderTooltip();
+
+		expect(screen.getByTestId('heatmap-tooltip-range').textContent).toMatch(
+			/^\d{2}\/\d{2} \d{2}:\d{2} → \d{2}\/\d{2} \d{2}:\d{2}$/,
+		);
+	});
+
+	it('names the hovered bucket and its count', () => {
+		renderTooltip();
+
+		expect(screen.getByTestId('heatmap-tooltip-bucket')).toHaveTextContent(
+			'500 ms – 1 s',
+		);
+		expect(screen.getByTestId('heatmap-tooltip-count')).toHaveTextContent('455');
+	});
+
+	it('marks the surface as pinned so the border picks up the ring', () => {
+		renderTooltip({ isPinned: true });
+
+		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
+			'data-pinned',
+			'true',
+		);
+	});
+
+	it('is unpinned by default', () => {
+		renderTooltip();
+
+		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
+			'data-pinned',
+			'false',
+		);
+	});
+
+	it('separates the cell identity from the block below it', () => {
+		renderTooltip();
+
+		expect(screen.getByTestId('heatmap-tooltip-divider')).toBeInTheDocument();
+	});
+
+	it('renders a footer when the panel supplies one', () => {
+		renderTooltip({
+			renderTooltipFooter: ({ isPinned }): JSX.Element => (
+				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
+			),
+		});
+
+		expect(screen.getByTestId('footer')).toHaveTextContent('press P');
+	});
+
+	it('tells the footer when the tooltip is pinned', () => {
+		renderTooltip({
+			isPinned: true,
+			renderTooltipFooter: ({ isPinned }): JSX.Element => (
+				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
+			),
+		});
+
+		expect(screen.getByTestId('footer')).toHaveTextContent('pinned');
+	});
+
+	it('renders nothing when the cursor is off the plot', () => {
+		const plot = createFakePlot();
+		(plot as { cursor: unknown }).cursor = { left: -10, top: -10 };
+
+		const { container } = renderTooltip({ uPlotInstance: plot });
+
+		expect(container).toBeEmptyDOMElement();
+	});
+});
+
+describe('HeatmapTooltip — grouped, nothing selected', () => {
+	it('breaks the cell down by group instead of showing neighbours', () => {
+		renderTooltip();
+
+		expect(
+			screen.getByTestId('heatmap-tooltip-contribution'),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('heatmap-tooltip-buckets'),
+		).not.toBeInTheDocument();
+	});
+
+	it('heads the breakdown with the groupBy key', () => {
+		renderTooltip();
+
+		expect(screen.getByText('service.name')).toBeInTheDocument();
+	});
+
+	it('names each row by value alone and orders by contribution', () => {
+		renderTooltip();
+
+		const rows = screen
+			.getAllByTestId('heatmap-tooltip-contribution-row')
+			.map((row) => row.textContent);
+
+		expect(rows[0]).toContain('checkout');
+		expect(rows[0]).toContain('355');
+		expect(rows[1]).toContain('frontend');
+		expect(rows[2]).toContain('cart');
+	});
+
+	it('shows each group"s share of the cell', () => {
+		renderTooltip();
+
+		const rows = screen.getAllByTestId('heatmap-tooltip-contribution-row');
+		// 355 / 455 = 78%, 86 / 455 = 19%, 14 / 455 = 3.1%
+		expect(rows[0]).toHaveTextContent('78%');
+		expect(rows[1]).toHaveTextContent('19%');
+		expect(rows[2]).toHaveTextContent('3.1%');
+	});
+
+	it('still lists a group that contributed nothing', () => {
+		renderTooltip();
+
+		const rows = screen.getAllByTestId('heatmap-tooltip-contribution-row');
+		expect(rows).toHaveLength(GROUPED.length);
+		expect(rows[3]).toHaveTextContent('payments');
+		expect(rows[3]).toHaveTextContent('0.0%');
+	});
+
+	it('does not name a filter when every group is enabled', () => {
+		renderTooltip();
+
+		expect(
+			screen.queryByTestId('heatmap-tooltip-filter'),
+		).not.toBeInTheDocument();
+	});
+});
+
+describe('HeatmapTooltip — grouped, one enabled', () => {
+	const selected = { visibleGroups: ['service.name=checkout'] };
+
+	it('returns to neighbouring buckets, since contribution is already answered', () => {
+		renderTooltip(selected);
+
+		expect(screen.getByTestId('heatmap-tooltip-buckets')).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('heatmap-tooltip-contribution'),
+		).not.toBeInTheDocument();
+	});
+
+	it('names the active filter', () => {
+		renderTooltip(selected);
+
+		expect(screen.getByTestId('heatmap-tooltip-filter')).toHaveTextContent(
+			'service.name = checkout',
+		);
+	});
+});
+
+describe('HeatmapTooltip — no grouping', () => {
+	const ungrouped = {
+		series: [{ label: '', points: GROUPED[0].points }],
+		visibleGroups: [''],
+	};
+
+	it('shows neighbouring buckets, highest first', () => {
+		renderTooltip(ungrouped);
+
+		const rows = screen
+			.getAllByTestId('heatmap-tooltip-bucket-row')
+			.map((row) => row.textContent);
+
+		// Two buckets either side of 500ms – 1s, reading down the y axis.
+		expect(rows).toHaveLength(5);
+		expect(rows[0]).toContain('> 2.5 s');
+		expect(rows[2]).toContain('500 ms – 1 s');
+		expect(rows[4]).toContain('≤ 100 ms');
+	});
+
+	it('marks the hovered bucket among its neighbours', () => {
+		renderTooltip(ungrouped);
+
+		const hovered = screen
+			.getAllByTestId('heatmap-tooltip-bucket-row')
+			.filter((row) => row.dataset.hovered === 'true');
+
+		expect(hovered).toHaveLength(1);
+		expect(hovered[0]).toHaveTextContent('500 ms – 1 s');
+	});
+
+	it('never breaks down a single series', () => {
+		renderTooltip(ungrouped);
+
+		expect(
+			screen.queryByTestId('heatmap-tooltip-contribution'),
+		).not.toBeInTheDocument();
+	});
+});