Merge branch 'main' into nv/heatmap

cmd/authz.go

@@ -97,7 +97,6 @@ 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,

conf/example.yaml

@@ -397,6 +397,7 @@ identn:
     # headers to use for tokenizer identN resolver
     headers:
       - Authorization
+      - Sec-WebSocket-Protocol
   apikey:
     # toggle apikey identN
     enabled: true

docs/api/openapi.yml

@@ -3474,6 +3474,79 @@ components:
       - tags
       - spec
       type: object
+    DashboardtypesHeatmapAxes:
+      properties:
+        yScale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
+      type: object
+    DashboardtypesHeatmapChartAppearance:
+      properties:
+        colors:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
+      type: object
+    DashboardtypesHeatmapColorMode:
+      enum:
+      - palette
+      - opacity
+      type: string
+    DashboardtypesHeatmapColorScale:
+      enum:
+      - log
+      - sqrt
+      - linear
+      type: string
+    DashboardtypesHeatmapColors:
+      properties:
+        fill:
+          type: string
+        maxCount:
+          nullable: true
+          type: number
+        minCount:
+          nullable: true
+          type: number
+        mode:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
+        palette:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
+        scale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
+        steps:
+          type: integer
+      type: object
+    DashboardtypesHeatmapPalette:
+      enum:
+      - ice
+      - moss
+      - rust
+      - graphite
+      - ember
+      - lagoon
+      - orchid
+      - verdant
+      - lava
+      - beacon
+      type: string
+    DashboardtypesHeatmapPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesHeatmapYScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3826,6 +3899,7 @@ components:
       discriminator:
         mapping:
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -3841,6 +3915,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3851,6 +3926,7 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
+      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3864,6 +3940,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/HeatmapPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:
@@ -7395,10 +7483,7 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
         meta:
-          properties:
-            unit:
-              type: string
-          type: object
+          $ref: '#/components/schemas/Querybuildertypesv5AggregationMeta'
         predictedSeries:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
@@ -7413,12 +7498,51 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
       type: object
-    Querybuildertypesv5Bucket:
+    Querybuildertypesv5AggregationMeta:
       properties:
-        step:
-          format: double
-          type: number
+        buckets:
+          items:
+            format: double
+            type: number
+          type: array
+        unit:
+          type: string
       type: object
+    Querybuildertypesv5BucketOptions:
+      discriminator:
+        mapping:
+          linear: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
+          log: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
+        propertyName: kind
+      oneOf:
+      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
+      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
+      type: object
+    Querybuildertypesv5BucketOptionsLinear:
+      properties:
+        kind:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5LinearBucketsSpec'
+      required:
+      - kind
+      - spec
+      type: object
+    Querybuildertypesv5BucketOptionsLog:
+      properties:
+        kind:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5LogBucketsSpec'
+      required:
+      - kind
+      - spec
+      type: object
+    Querybuildertypesv5BucketsKind:
+      enum:
+      - linear
+      - log
+      type: string
     Querybuildertypesv5BuilderQuerySpec:
       discriminator:
         mapping:
@@ -7599,6 +7723,16 @@ components:
         value:
           type: string
       type: object
+    Querybuildertypesv5LinearBucketsSpec:
+      properties:
+        maxValue:
+          format: double
+          type: number
+        numBuckets:
+          type: integer
+      required:
+      - maxValue
+      type: object
     Querybuildertypesv5LogAggregation:
       properties:
         alias:
@@ -7606,6 +7740,12 @@ components:
         expression:
           type: string
       type: object
+    Querybuildertypesv5LogBucketsSpec:
+      properties:
+        scale:
+          nullable: true
+          type: integer
+      type: object
     Querybuildertypesv5MetricAggregation:
       properties:
         comparisonSpaceAggregationParam:
@@ -8064,6 +8204,8 @@ components:
         queries (traces, logs, metrics), formulas, joins, trace operators, PromQL,
         and ClickHouse SQL queries.
       properties:
+        bucketOptions:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         compositeQuery:
           $ref: '#/components/schemas/Querybuildertypesv5CompositeQuery'
         end:
@@ -8163,6 +8305,7 @@ components:
       - raw
       - raw_stream
       - trace
+      - heatmap
       type: string
     Querybuildertypesv5ScalarData:
       properties:
@@ -8237,8 +8380,6 @@ components:
       type: object
     Querybuildertypesv5TimeSeriesValue:
       properties:
-        bucket:
-          $ref: '#/components/schemas/Querybuildertypesv5Bucket'
         partial:
           type: boolean
         timestamp:
@@ -8349,8 +8490,6 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
-        relatedAITracesLink:
-          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8394,8 +8533,6 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5Label'
           nullable: true
           type: array
-        relatedAITracesLink:
-          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8501,7 +8638,6 @@ components:
       - TRACES_BASED_ALERT
       - LOGS_BASED_ALERT
       - EXCEPTIONS_BASED_ALERT
-      - AI_TRACES_BASED_ALERT
       type: string
     RuletypesBasicRuleThreshold:
       properties:

ee/licensing/httplicensing/api.go

@@ -0,0 +1,85 @@
+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,9 +2,12 @@ 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"
@@ -225,6 +228,47 @@ 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,6 +4,7 @@ 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"
@@ -41,6 +42,7 @@ 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)
@@ -70,6 +72,10 @@ 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

@@ -0,0 +1,76 @@
+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)
+}

ee/query-service/app/server.go

@@ -184,6 +184,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
@@ -196,7 +197,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
 	})
 
 	handler := c.Handler(r)

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 =
-			pathname === ROUTES.SETTINGS ||
-			pathname === ROUTES.BILLING ||
-			(isAdmin &&
-				(pathname === ROUTES.ORG_SETTINGS ||
-					pathname === ROUTES.MEMBERS_SETTINGS ||
-					pathname === ROUTES.MY_SETTINGS));
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				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 allow VIEWER to access /settings when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -752,10 +752,10 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should allow VIEWER to access /settings/billing when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked when trying to access billing', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.BILLING,
 				appContext: {
@@ -768,7 +768,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.BILLING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		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 allow EDITOR to access /settings when workspace is blocked', () => {
+		it('should redirect EDITOR to workspace locked when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -832,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect when already on workspace locked page', () => {
@@ -1626,7 +1626,6 @@ 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

@@ -0,0 +1,59 @@
+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

@@ -9610,10 +9610,6 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
-	/**
-	 * @type string
-	 */
-	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9662,10 +9658,6 @@ export interface RulestatehistorytypesGettableRuleStateHistoryContributorDTO {
 	 * @type array,null
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
-	/**
-	 * @type string
-	 */
-	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9761,7 +9753,6 @@ export enum RuletypesAlertTypeDTO {
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
-	AI_TRACES_BASED_ALERT = 'AI_TRACES_BASED_ALERT',
 }
 export enum RuletypesMatchTypeDTO {
 	at_least_once = 'at_least_once',

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
+
+const getCustomFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	const { signal } = props;
+	try {
+		const response = await axios.get(`/orgs/me/filters/${signal}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,13 @@
+import axios from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
+
+const updateCustomFiltersAPI = async (
+	props: UpdateCustomFiltersProps,
+): Promise<SuccessResponse<void> | AxiosError> =>
+	axios.put(`/orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

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

@@ -0,0 +1,28 @@
+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

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

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -4,17 +4,16 @@ 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 { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 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';
 
@@ -119,7 +118,9 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -137,7 +138,7 @@ function LaunchChatSupport({
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -192,23 +193,18 @@ function LaunchChatSupport({
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
 					>
-						<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>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -34,7 +34,6 @@ export function mockFieldsValuesAPI(response: {
 	relatedValues?: (string | null)[];
 	stringValues?: (string | null)[];
 	numberValues?: (number | null)[];
-	boolValues?: (boolean | null)[];
 }): void {
 	server.use(
 		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
@@ -47,7 +46,6 @@ export function mockFieldsValuesAPI(response: {
 							relatedValues: response.relatedValues ?? [],
 							stringValues: response.stringValues ?? [],
 							numberValues: response.numberValues ?? [],
-							boolValues: response.boolValues ?? [],
 						},
 					},
 				}),

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -22,10 +22,7 @@ interface UseFieldValuesReturn {
 	isFetching: boolean;
 }
 
-export const DATA_SOURCE_TO_SIGNAL: Record<
-	DataSource,
-	TelemetrytypesSignalDTO
-> = {
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
 	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
 	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
 	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
@@ -92,12 +89,8 @@ export function useFieldValues({
 			values.numberValues
 				?.filter((value): value is number => value !== null && value !== undefined)
 				.map((value) => value.toString()) || [];
-		const boolValues =
-			values.boolValues
-				?.filter((value): value is boolean => value !== null && value !== undefined)
-				.map((value) => value.toString()) || [];
 
-		return [...stringValues, ...numberValues, ...boolValues];
+		return [...stringValues, ...numberValues];
 	}, [data]);
 
 	return { relatedValues, allValues, isLoading, isFetching };

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -17,7 +17,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 function SortableFilter({
 	filter,
@@ -25,13 +25,13 @@ function SortableFilter({
 	allowDrag,
 	allowRemove,
 }: {
-	filter: TelemetryFieldKey;
-	onRemove: (filter: TelemetryFieldKey) => void;
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
 	allowDrag: boolean;
 	allowRemove: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: filter.key as string });
+		useSortable({ id: filter.key });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -46,14 +46,14 @@ function SortableFilter({
 		>
 			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={16} />}
-				{filter.name}
+				{filter.key}
 			</div>
 			{allowRemove && (
 				<Button
 					className="remove-filter-btn periscope-btn"
 					size="small"
 					onClick={(): void => {
-						onRemove(filter);
+						onRemove(filter as FilterType);
 					}}
 				>
 					Remove
@@ -69,8 +69,8 @@ function AddedFilters({
 	setAddedFilters,
 }: {
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
@@ -90,12 +90,12 @@ function AddedFilters({
 	const filteredAddedFilters = useMemo(
 		() =>
 			addedFilters.filter((filter) =>
-				filter.name.toLowerCase().includes(inputValue.toLowerCase()),
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
 			),
 		[addedFilters, inputValue],
 	);
 
-	const handleRemoveFilter = (filter: TelemetryFieldKey): void => {
+	const handleRemoveFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
 	};
 
@@ -116,7 +116,7 @@ function AddedFilters({
 							<div className="no-values-found">No values found</div>
 						) : (
 							<SortableContext
-								items={addedFilters.map((f) => f.key as string)}
+								items={addedFilters.map((f) => f.key)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,17 +1,17 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DATA_SOURCE_TO_SIGNAL } from 'components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import {
-	FieldContext,
-	FieldDataType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { DataSource } from 'types/common/queryBuilder';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -37,48 +37,106 @@ function OtherFilters({
 }: {
 	signal: SignalType | undefined;
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
-	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const isLogDataSource = useMemo(
+		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
+		[signal],
+	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
 	);
 
-	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
-		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
-		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			name: attr.name,
-			signal: attr.signal as TelemetryFieldKey['signal'],
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType as FieldDataType,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
-		}));
-
-		const addedKeys = new Set(
-			addedFilters.map((filter) =>
-				buildCompositeKey(filter.name, filter.fieldContext, filter.fieldDataType),
-			),
+	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
+		useGetAttributeSuggestions(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				filters: {} as TagFilter,
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isLogDataSource,
+			},
 		);
-		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
 
-	const handleAddFilter = (filter: TelemetryFieldKey): void => {
-		setAddedFilters((prev) => [...prev, filter]);
+	const { data: aggregateKeysData, isFetching: isFetchingAggregateKeys } =
+		useGetAggregateKeys(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				aggregateOperator: 'noop',
+				aggregateAttribute: '',
+				tagType: '',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+			},
+		);
+
+	const { data: fieldKeysData, isLoading: isLoadingFieldKeys } =
+		useGetQueryKeySuggestions(
+			{
+				searchText: inputValue,
+				signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				signalSource: 'meter',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isMeterDataSource,
+			},
+		);
+
+	const otherFilters = useMemo(() => {
+		let filterAttributes;
+		if (isLogDataSource) {
+			filterAttributes = suggestionsData?.payload?.attributes || [];
+		} else if (isMeterDataSource) {
+			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
+				fieldKeysData?.data?.data?.keys || {},
+			)?.flat();
+			filterAttributes = fieldKeys.map(
+				(attr) =>
+					({
+						key: attr.name,
+						dataType: attr.fieldDataType,
+						type: attr.fieldContext,
+						signal: attr.signal,
+					}) as BaseAutocompleteData,
+			);
+		} else {
+			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
+		}
+		return filterAttributes?.filter(
+			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+		);
+	}, [
+		suggestionsData,
+		aggregateKeysData,
+		addedFilters,
+		isLogDataSource,
+		fieldKeysData,
+		isMeterDataSource,
+	]);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				type: filter.type,
+			},
+		]);
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		if (isFetching) {
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
+		if (isLoading) {
 			return <OtherFiltersSkeleton />;
 		}
 		if (!otherFilters?.length) {
@@ -87,11 +145,11 @@ function OtherFilters({
 
 		return otherFilters.map((filter) => (
 			<div key={filter.key} className="qf-filter-item other-filters-item">
-				<div className="qf-filter-key">{filter.name}</div>
+				<div className="qf-filter-key">{filter.key}</div>
 				<Button
 					className="add-filter-btn periscope-btn"
 					size="small"
-					onClick={(): void => handleAddFilter(filter)}
+					onClick={(): void => handleAddFilter(filter as FilterType)}
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,7 +1,8 @@
+import { useMemo } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
@@ -18,7 +19,7 @@ function QuickFiltersSettings({
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
@@ -27,7 +28,6 @@ function QuickFiltersSettings({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		handleInputChange,
@@ -39,6 +39,18 @@ function QuickFiltersSettings({
 		signal,
 	});
 
+	const hasUnsavedChanges = useMemo(
+		() =>
+			// check if both arrays have the same length and same order of elements
+			!(
+				addedFilters.length === customFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === customFilters[index].key,
+				)
+			),
+		[addedFilters, customFilters],
+	);
+
 	return (
 		<>
 			<div className="qf-header">

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -1,31 +1,27 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useUpdateQuickFilters } from 'api/generated/services/quick-filter';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
 import logEvent from 'api/common/logEvent';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
+import axios, { AxiosError } from 'axios';
 import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
 interface UseQuickFilterSettingsReturn {
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	handleSettingsClose: () => void;
 	handleDiscardChanges: () => void;
 	handleSaveChanges: () => void;
-	hasUnsavedChanges: boolean;
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
@@ -41,43 +37,27 @@ const useQuickFilterSettings = ({
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
-	const normalizedCustomFilters = useMemo<TelemetryFieldKey[]>(
-		() =>
-			customFilters.map((filter) => ({
-				...filter,
-				key: buildCompositeKey(
-					filter.name,
-					filter.fieldContext,
-					filter.fieldDataType,
-				),
-			})),
-		[customFilters],
-	);
-	const [addedFilters, setAddedFilters] = useState<TelemetryFieldKey[]>(
-		normalizedCustomFilters,
-	);
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();
 
 	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
-		useUpdateQuickFilters({
-			mutation: {
-				onSuccess: () => {
-					setIsSettingsOpen(false);
-					refetchCustomFilters();
-					void logEvent('Quick Filters Settings: changes saved', {
-						addedFilters,
-					});
-					notifications.success({
-						message: 'Quick filters updated successfully',
-						placement: 'bottomRight',
-					});
-				},
-				onError: (error) => {
-					notifications.error({
-						message: error.message || SOMETHING_WENT_WRONG,
-						placement: 'bottomRight',
-					});
-				},
+		useMutation(updateCustomFiltersAPI, {
+			onSuccess: () => {
+				setIsSettingsOpen(false);
+				refetchCustomFilters();
+				logEvent('Quick Filters Settings: changes saved', {
+					addedFilters,
+				});
+				notifications.success({
+					message: 'Quick filters updated successfully',
+					placement: 'bottomRight',
+				});
+			},
+			onError: (error: AxiosError) => {
+				notifications.error({
+					message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
+					placement: 'bottomRight',
+				});
 			},
 		});
 	const debouncedUpdate = useDebouncedFn((value) => {
@@ -98,32 +78,19 @@ const useQuickFilterSettings = ({
 	}, [setIsSettingsOpen]);
 
 	const handleDiscardChanges = useCallback((): void => {
-		setAddedFilters(normalizedCustomFilters);
-	}, [normalizedCustomFilters, setAddedFilters]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				addedFilters.length === normalizedCustomFilters.length &&
-				addedFilters.every(
-					(filter, index) => filter.key === normalizedCustomFilters[index].key,
-				)
-			),
-		[addedFilters, normalizedCustomFilters],
-	);
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
 
 	const handleSaveChanges = useCallback((): void => {
 		if (signal) {
 			updateCustomFilters({
-				pathParams: { source: signal },
 				data: {
-					// Send only the stored TelemetryFieldKey fields; the composite `key`
-					// is UI-only.
 					filters: addedFilters.map((filter) => ({
-						name: filter.name,
-						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
-						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
 					})),
+					signal,
 				},
 			});
 		}
@@ -135,7 +102,6 @@ const useQuickFilterSettings = ({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { useGetQuickFilters } from 'api/generated/services/quick-filter';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { useQuery } from 'react-query';
+import getCustomFilters from 'api/quickFilters/getCustomFilters';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -11,7 +13,7 @@ interface UseFilterConfigProps {
 }
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
 	refetchCustomFilters: () => void;
@@ -23,16 +25,17 @@ const useFilterConfig = ({
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
 		isFetching: isCustomFiltersLoading,
-		data,
+		data: customFilters = [],
 		refetch,
-	} = useGetQuickFilters(
-		{ source: signal ?? '' },
-		{ query: { enabled: !!signal } },
-	);
-
-	const customFilters = useMemo<TelemetryFieldKey[]>(
-		() => (data?.data?.filters ?? []) as TelemetryFieldKey[],
-		[data],
+	} = useQuery<FilterType[], Error>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		async () => {
+			const res = await getCustomFilters({ signal: signal || '' });
+			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
+		},
+		{
+			enabled: !!signal,
+		},
 	);
 
 	const isDynamicFilters = useMemo(

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -11,7 +11,7 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import '@testing-library/jest-dom';
 
@@ -34,9 +34,9 @@ const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
+const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
+const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
 const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -338,63 +338,6 @@ describe('Quick Filters with custom filters', () => {
 		);
 	});
 
-	it('keeps same-name fields with different context as distinct entries', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		server.use(
-			rest.get(quickFiltersSuggestionsURL, (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							complete: true,
-							keys: {
-								level: [
-									{
-										name: 'level',
-										fieldContext: 'attribute',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-									{
-										name: 'level',
-										fieldContext: 'span',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-								],
-							},
-						},
-					}),
-				),
-			),
-		);
-
-		render(<TestQuickFilters signal={SIGNAL} />);
-		await screen.findByText(FILTER_SERVICE_NAME);
-
-		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
-
-		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
-		// Both `level` variants are shown despite sharing a name.
-		await waitFor(() =>
-			expect(within(otherSection).getAllByText('level')).toHaveLength(2),
-		);
-
-		// Adding one variant removes only that one; the other stays.
-		const firstLevel = within(otherSection).getAllByText('level')[0];
-		const addButton = firstLevel.parentElement?.querySelector('button');
-		await user.click(addButton as HTMLButtonElement);
-
-		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
-		await waitFor(() => {
-			expect(within(addedSection).getAllByText('level')).toHaveLength(1);
-			expect(within(otherSection).getAllByText('level')).toHaveLength(1);
-		});
-	});
-
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -513,10 +456,12 @@ describe('Quick Filters with custom filters', () => {
 		});
 
 		const requestBody = putHandler.mock.calls[0][0];
-		expect(requestBody.filters).not.toContainEqual(
-			expect.objectContaining({ name: FILTER_OS_DESCRIPTION }),
+		expect(requestBody.filters).toStrictEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
 		);
-		expect(requestBody.filters).toHaveLength(10);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
 	it('should render duration slider for duration_nono filter', async () => {
@@ -667,9 +612,9 @@ describe('Quick Filters refetch behavior', () => {
 				filters: [
 					...(quickFiltersListResponse.data.filters ?? []),
 					{
-						name: 'new.custom.filter',
-						fieldDataType: 'string',
-						fieldContext: 'resource',
+						key: 'new.custom.filter',
+						dataType: 'string',
+						type: 'resource',
 					} as const,
 				],
 			},

frontend/src/components/QuickFilters/utils.tsx

@@ -1,33 +1,17 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { fieldDataTypeToDataType } from 'utils/fieldDataType';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
 const FILTER_TITLE_MAP: Record<string, string> = {
 	duration_nano: 'Duration',
 	hasError: 'Has Error (Status)',
-	has_error: 'Has Error (Status)',
 };
 
 const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// The map below exists only for the old v3 attribute-values fetch
-// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
-// Once the values fetch moves to fields/values, remove this and reduce
-// attributeKey to { id, key }.
-
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-const mapFieldContext = (fieldContext?: string): string =>
-	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
-
 const getFilterName = (str: string): string => {
 	if (FILTER_TITLE_MAP[str]) {
 		return FILTER_TITLE_MAP[str];
@@ -42,16 +26,16 @@ const getFilterName = (str: string): string => {
 		.join(' ');
 };
 
-const getFilterType = (att: TelemetryFieldKey): FiltersType => {
-	if (FILTER_TYPE_MAP[att.name]) {
-		return FILTER_TYPE_MAP[att.name];
+const getFilterType = (att: FilterType): FiltersType => {
+	if (FILTER_TYPE_MAP[att.key]) {
+		return FILTER_TYPE_MAP[att.key];
 	}
 	return FiltersType.CHECKBOX;
 };
 
 export const getFilterConfig = (
 	signal?: SignalType,
-	customFilters?: TelemetryFieldKey[],
+	customFilters?: FilterType[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
 	if (!customFilters?.length || !signal) {
@@ -62,13 +46,13 @@ export const getFilterConfig = (
 		(att, index) =>
 			({
 				type: getFilterType(att),
-				title: getFilterName(att.name),
+				title: getFilterName(att.key),
 				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
-					id: att.name,
-					key: att.name,
-					dataType: fieldDataTypeToDataType(att.fieldDataType),
-					type: mapFieldContext(att.fieldContext),
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -4,18 +4,14 @@ 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();
@@ -40,25 +36,17 @@ function RefreshPaymentStatus({
 	};
 
 	const button = (
-		<AuthZTooltip
-			checks={
-				activeLicense ? [buildLicenseUpdatePermission(activeLicense.id)] : []
-			}
-			enabled={!!activeLicense}
-			withPortal={withPortal}
+		<Button
+			variant="link"
+			color={type === 'text' ? 'none' : 'secondary'}
+			size="md"
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
 		>
-			<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>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
 	);
 
 	return (
@@ -74,7 +62,6 @@ function RefreshPaymentStatus({
 RefreshPaymentStatus.defaultProps = {
 	type: 'button',
 	className: undefined,
-	withPortal: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/constants/reactQueryKeys.ts

@@ -15,6 +15,7 @@ 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/AppLayout.styles.scss

@@ -184,11 +184,6 @@
 		text-decoration-thickness: 2px;
 		text-underline-offset: 2px;
 	}
-
-	&[disabled] {
-		opacity: 0.6;
-		text-decoration: none;
-	}
 }
 
 .workspace-restricted-banner,

frontend/src/container/AppLayout/index.tsx

@@ -20,8 +20,7 @@ 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 { updateSubscription } from 'api/generated/services/subscriptions';
-import type { UpdateSubscription200 } from 'api/generated/services/sigNoz.schemas';
+import manageCreditCardApi from 'api/v1/portal/create';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import getUserVersion from 'api/v1/version/get';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
@@ -31,8 +30,6 @@ 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';
@@ -66,7 +63,8 @@ import {
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import {
 	ChangelogSchema,
 	DeploymentType,
@@ -79,6 +77,7 @@ 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';
@@ -167,7 +166,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		return Math.abs(currentDate.diff(userCreationDate, 'day'));
 	}, [user.createdAt]);
 
-	const handleBillingOnSuccess = (data: UpdateSubscription200): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -185,7 +186,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	};
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(updateSubscription, {
+		useMutation(manageCreditCardApi, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -468,8 +469,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		history.push(ROUTES.BILLING);
-	}, []);
+		if (user.role === USER_ROLES.ADMIN) {
+			history.push(ROUTES.BILLING);
+		}
+	}, [user.role]);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
@@ -583,21 +586,25 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<div>
 						Our systems are taking longer than expected for your trial workspace.
 						Please{' '}
-						<span>
-							<a
-								className="upgrade-link"
-								onClick={(): void => {
-									notifications.destroy('slow-api-warning');
+						{user.role === USER_ROLES.ADMIN ? (
+							<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>
+										handleUpgrade();
+									}}
+								>
+									upgrade
+								</a>
+								your workspace for a smoother experience.
+							</span>
+						) : (
+							'contact your administrator for upgrading to a paid plan for a smoother experience.'
+						)}
 					</div>
 				),
 				duration: 60000,
@@ -787,18 +794,22 @@ 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>
-								<span>
-									{' '}
-									Please{' '}
-									<a className="upgrade-link" onClick={handleUpgrade}>
-										upgrade
-									</a>
-									to continue using SigNoz features.
-									<span className="refresh-payment-status">
+								{user.role === USER_ROLES.ADMIN ? (
+									<span>
 										{' '}
-										| Already upgraded? <RefreshPaymentStatus type="text" />
+										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>
 									</span>
-								</span>
+								) : (
+									'Please contact your administrator for upgrading to a paid plan.'
+								)}
 							</div>
 						)}
 
@@ -815,20 +826,22 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 									)}
 									.
 								</span>
-								<span>
-									{' '}
-									Please{' '}
-									<AuthZTooltip checks={SubscriptionManagePermissions}>
+								{user.role === USER_ROLES.ADMIN ? (
+									<span>
+										{' '}
+										Please{' '}
 										<a className="upgrade-link" onClick={handleFailedPayment}>
 											pay the bill
 										</a>
-									</AuthZTooltip>
-									to continue using SigNoz features.
-									<span className="refresh-payment-status">
-										{' '}
-										| Already paid? <RefreshPaymentStatus type="text" />
+										to continue using SigNoz features.
+										<span className="refresh-payment-status">
+											{' '}
+											| Already paid? <RefreshPaymentStatus type="text" />
+										</span>
 									</span>
-								</span>
+								) : (
+									' Please contact your administrator to pay the bill.'
+								)}
 							</div>
 						)}
 					</div>

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

@@ -1,113 +0,0 @@
-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-4);
+		margin-bottom: var(--spacing-8);
 
 		.pageHeaderTitle {
 			font-weight: var(--label-medium-500-font-weight);
@@ -41,8 +41,6 @@
 	}
 
 	.pageInfo {
-		margin-bottom: var(--spacing-4);
-
 		:global(.ant-card) {
 			padding: var(--padding-3);
 		}
@@ -60,12 +58,8 @@
 		margin: var(--spacing-12) var(--spacing-4);
 	}
 
-	.usageDenied {
-		margin-bottom: var(--spacing-4);
-	}
-
 	.billingDetails {
-		margin: var(--spacing-4) 0;
+		margin: var(--spacing-12) 0;
 		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		overflow: hidden;
@@ -134,7 +128,7 @@
 	}
 
 	.upgradePlanBenefits {
-		margin: 0;
+		margin: 0 var(--spacing-4);
 		border: 1px solid var(--l1-border);
 		border-radius: 5px;
 		padding: 0 var(--padding-12);
@@ -182,7 +176,7 @@
 	}
 
 	.billingUpdateNote {
-		margin-top: var(--spacing-4);
+		margin-top: var(--spacing-8);
 		font-family: var(--font-family-inter);
 		font-size: var(--font-size-sm);
 		font-style: normal;

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

@@ -1,11 +1,9 @@
-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 {
@@ -17,6 +15,11 @@ 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(() => ({
@@ -28,22 +31,14 @@ window.ResizeObserver =
 describe('BillingContainer', () => {
 	jest.setTimeout(30000);
 
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
 	it('Component should render', async () => {
 		render(<BillingContainer />);
 
-		const dataInjection = await screen.findByRole('columnheader', {
+		const dataInjection = screen.getByRole('columnheader', {
 			name: /data ingested/i,
 		});
 		expect(dataInjection).toBeInTheDocument();
-		const pricePerUnit = await screen.findByRole('columnheader', {
+		const pricePerUnit = screen.getByRole('columnheader', {
 			name: /price per unit/i,
 		});
 		expect(pricePerUnit).toBeInTheDocument();
@@ -54,15 +49,13 @@ 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, {}, { timeout: 5000 });
+		const dollar = await screen.findByText(/\$1,278.3/i);
 		expect(dollar).toBeInTheDocument();
 
 		const currentBill = await screen.findByText('billing');
@@ -93,9 +86,7 @@ describe('BillingContainer', () => {
 
 			await expect(screen.findByText('Free Trial')).resolves.toBeInTheDocument();
 			await expect(screen.findByText('billing')).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText(/\$0/i, {}, { timeout: 5000 }),
-			).resolves.toBeInTheDocument();
+			await expect(screen.findByText(/\$0/i)).resolves.toBeInTheDocument();
 
 			await expect(
 				screen.findByText(
@@ -141,7 +132,7 @@ describe('BillingContainer', () => {
 			const currentBill = await screen.findByText('billing');
 			expect(currentBill).toBeInTheDocument();
 
-			const dollar0 = await screen.findByText(/\$0/i, {}, { timeout: 5000 });
+			const dollar0 = await screen.findByText(/\$0/i);
 			expect(dollar0).toBeInTheDocument();
 
 			const onTrail = await screen.findByText(
@@ -259,11 +250,7 @@ describe('BillingContainer', () => {
 			billingSuccessResponse.data.billingPeriodStart,
 		)} to ${getFormattedDate(billingSuccessResponse.data.billingPeriodEnd)}`;
 
-		const billingPeriod = await findByText(
-			billingPeriodText,
-			{},
-			{ timeout: 5000 },
-		);
+		const billingPeriod = await findByText(billingPeriodText);
 		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 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
 	Card,
@@ -15,36 +15,25 @@ 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 type {
-	CreateSubscription201,
-	GetSubscription200,
-	SubscriptiontypesGettableSubscriptionUsageDTO,
-	SubscriptiontypesSubscriptionUsageBreakdownDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	createSubscription,
-	updateSubscription,
-	useGetSubscription,
-} from 'api/generated/services/subscriptions';
+import updateCreditCardApi from 'api/v1/checkout/create';
+import manageCreditCardApi from 'api/v1/portal/create';
 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 AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
-import {
-	SubscriptionCreatePermission,
-	SubscriptionManagePermissions,
-	SubscriptionReadPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import useActiveLicenseKey from 'hooks/useActiveLicenseKey/useActiveLicenseKey';
 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';
 
@@ -146,7 +135,7 @@ export default function BillingContainer(): JSX.Element {
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
 	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
-		Partial<SubscriptiontypesGettableSubscriptionUsageDTO>
+		Partial<UsageResponsePayloadProps>
 	>({});
 
 	const {
@@ -157,8 +146,7 @@ export default function BillingContainer(): JSX.Element {
 		activeLicense,
 		activeLicenseFetchError,
 	} = useAppContext();
-	const { allowed: canReadSubscription, error: subscriptionAuthZError } =
-		useAuthZ([SubscriptionReadPermission]);
+	const { licenseKey } = useActiveLicenseKey();
 	const { notifications } = useNotifications();
 
 	const handleError = useAxiosError();
@@ -166,34 +154,33 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(response: GetSubscription200): void => {
-			const usage = response?.data;
-			if (isEmpty(usage)) {
+		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
+			if (isEmpty(data?.payload)) {
 				return;
 			}
-			const breakdown = usage.details?.breakdown ?? [];
-			const billTotal = usage.details?.billTotal ?? 0;
-			const billingPeriodStart = usage.billingPeriodStart ?? 0;
-			const billingPeriodEnd = usage.billingPeriodEnd ?? 0;
+			const {
+				details: { breakdown = [], billTotal },
+				billingPeriodStart,
+				billingPeriodEnd,
+			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
 			const formattedUsageData: DataType[] = [];
 
-			breakdown.forEach(
-				(
-					element: SubscriptiontypesSubscriptionUsageBreakdownDTO,
-					index: number,
-				) => {
-					element?.tiers?.forEach((tier, tierIndex: number) => {
+			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) => {
 						formattedUsageData.push({
-							key: `${index}${tierIndex}`,
-							name: tierIndex === 0 ? (element?.type ?? '') : '',
+							key: `${index}${i}`,
+							name: i === 0 ? element?.type : '',
 							unit: element?.unit ?? '',
 							dataIngested: `${tier.quantity} ${element?.unit}`,
 							pricePerUnit: String(tier.unitPrice),
 							cost: `$ ${tier.tierCost}`,
 						});
 					});
-				},
-			);
+				}
+			}
 
 			setData(formattedUsageData);
 
@@ -209,7 +196,7 @@ export default function BillingContainer(): JSX.Element {
 				setBillAmount(billTotal);
 			}
 
-			setApiResponse(usage);
+			setApiResponse(data?.payload || {});
 		},
 		[trialInfo?.onTrial],
 	);
@@ -221,12 +208,11 @@ export default function BillingContainer(): JSX.Element {
 		isLoading,
 		isFetching: isFetchingBillingData,
 		data: billingData,
-	} = useGetSubscription({
-		query: {
-			enabled: canReadSubscription || !!subscriptionAuthZError,
-			onError: handleError,
-			onSuccess: processUsageData,
-		},
+	} = useQuery([REACT_QUERY_KEY.GET_BILLING_USAGE, user?.id], {
+		queryFn: () => getUsage(licenseKey || ''),
+		onError: handleError,
+		enabled: !!licenseKey,
+		onSuccess: processUsageData,
 	});
 
 	useEffect(() => {
@@ -298,7 +284,9 @@ export default function BillingContainer(): JSX.Element {
 		/>
 	);
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -315,7 +303,7 @@ export default function BillingContainer(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -325,7 +313,7 @@ export default function BillingContainer(): JSX.Element {
 	);
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(updateSubscription, {
+		useMutation(manageCreditCardApi, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -360,21 +348,15 @@ 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 `}
-			<AuthZTooltip checks={billingActionPermissions}>
-				<Typography.Link
-					onClick={handleBilling}
-					style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
-				>
-					{t('here')}
-				</Typography.Link>
-			</AuthZTooltip>
+			<Typography.Link
+				onClick={handleBilling}
+				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
+			>
+				{t('here')}
+			</Typography.Link>
 			{` 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.`}
@@ -429,7 +411,11 @@ export default function BillingContainer(): JSX.Element {
 				</Typography.Text>
 			</Flex>
 
-			<Card bordered={false} className={styles.pageInfo}>
+			<Card
+				bordered={false}
+				style={{ minHeight: 150, marginBottom: 16 }}
+				className={styles.pageInfo}
+			>
 				<Flex justify="space-between" align="center">
 					<Flex vertical gap={8}>
 						<p className={styles.pageInfoTitle}>
@@ -437,14 +423,13 @@ export default function BillingContainer(): JSX.Element {
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</p>
 
-						{billingData && !isFetchingBillingData && !showGracePeriodMessage ? (
+						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
 							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
 							</p>
 						) : null}
 					</Flex>
-					<AuthZButton
-						checks={billingActionPermissions}
+					<Button
 						testId="header-billing-button"
 						variant="solid"
 						color="secondary"
@@ -458,7 +443,7 @@ export default function BillingContainer(): JSX.Element {
 						{trialInfo?.trialConvertedToSubscription
 							? t('manage_billing')
 							: t('upgrade_plan')}
-					</AuthZButton>
+					</Button>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -510,81 +495,66 @@ export default function BillingContainer(): JSX.Element {
 					))}
 			</Card>
 
-			<AuthZGuardContent
-				checks={[SubscriptionReadPermission]}
-				fallback={({ deniedPermissions }): JSX.Element => (
-					<PermissionDeniedCallout
-						deniedPermissions={deniedPermissions}
-						className={styles.usageDenied}
+			<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>
+			{!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.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>
-					{!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}`}
-												/>
-											);
-										},
-									},
-								}}
-							/>
-						)}
-
-						{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
-					</div>
-				</>
-			</AuthZGuardContent>
+				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
+			</div>
 
 			{isCloudUserVal && activeLicense?.state === LicenseState.ACTIVATED && (
 				<CancelSubscriptionBanner />
@@ -627,8 +597,7 @@ export default function BillingContainer(): JSX.Element {
 							</Typography.Text>
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
-							<AuthZButton
-								checks={[SubscriptionCreatePermission]}
+							<Button
 								testId="upgrade-plan-button"
 								variant="solid"
 								color="primary"
@@ -637,7 +606,7 @@ export default function BillingContainer(): JSX.Element {
 								onClick={handleBilling}
 							>
 								{t('upgrade_plan')}
-							</AuthZButton>
+							</Button>
 						</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 { SubscriptiontypesGettableSubscriptionUsageDTO } from 'api/generated/services/sigNoz.schemas';
+import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
 
 import { BillingBarChartTooltip } from './BillingBarChartTooltip';
 import { prepareBillingBarConfig } from './prepareBillingBarConfig';
@@ -25,7 +25,7 @@ import {
 import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<SubscriptiontypesGettableSubscriptionUsageDTO>;
+	data: Partial<UsageResponsePayloadProps>;
 	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 ?? 0) + 86400,
+						timestamp: currentDay.timestamp + 86400,
 						count: 0,
 						size: 0,
 						quantity: 0,
@@ -94,9 +94,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 
 	const { startTime, endTime } = useMemo(
 		() =>
-			calculateStartEndTime(
-				normalizedData as Partial<SubscriptiontypesGettableSubscriptionUsageDTO>,
-			),
+			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
 		[normalizedData],
 	);
 

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

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

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

@@ -1,9 +1,3 @@
-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';
@@ -42,24 +36,10 @@ 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(
@@ -76,10 +56,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 
 		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		expect(
@@ -97,10 +76,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 
 		const confirmButton = screen.getByTestId('cancel-subscription-confirm-btn');
 		expect(confirmButton).toBeDisabled();
@@ -117,10 +95,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 
 		const input = screen.getByTestId('cancel-confirm-input');
 		await user.type(input, 'cancel');
@@ -130,10 +107,9 @@ describe('CancelSubscriptionBanner', () => {
 			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
 		);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 		expect(screen.getByTestId('cancel-confirm-input')).toHaveValue('');
 	});
 
@@ -143,10 +119,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -176,10 +151,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -198,10 +172,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -219,10 +192,9 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('cancel-subscription-btn'));
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 		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,8 +11,6 @@ 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';
@@ -180,17 +178,15 @@ function CancelSubscriptionBanner(): JSX.Element {
 						immediately and removed from our servers.
 					</span>
 				</div>
-				<AuthZButton
-					checks={[SubscriptionDeletePermission]}
+				<Button
 					variant="solid"
 					color="secondary"
 					prefix={<X size={12} />}
 					onClick={handleOpenCancelDialog}
 					className={styles.cancelButton}
-					testId="cancel-subscription-btn"
 				>
 					Cancel Subscription
-				</AuthZButton>
+				</Button>
 			</div>
 			<DialogWrapper
 				open={dialogView !== null}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -108,6 +108,7 @@ function LogsExplorerViewsContainer({
 	const [page, setPage] = useState<number>(1);
 	const [logs, setLogs] = useState<ILog[]>([]);
 	const [requestData, setRequestData] = useState<Query | null>(null);
+	const [queryId, setQueryId] = useState<string>(v4());
 	const [listChartQuery, setListChartQuery] = useState<Query | null>(null);
 
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
@@ -179,7 +180,12 @@ function LogsExplorerViewsContainer({
 			},
 			undefined,
 			listQueryKeyRef,
-			undefined,
+			{
+				...(!isEmpty(queryId) &&
+					selectedPanelType !== PANEL_TYPES.LIST && {
+						'X-SIGNOZ-QUERY-ID': queryId,
+					}),
+			},
 			// custom selected time interval to prevent recalculating the start and end timestamps before fetching next pages
 			'custom',
 		);
@@ -244,6 +250,10 @@ function LogsExplorerViewsContainer({
 		setRequestData(newRequestData);
 	}, [isLimit, logs, listQuery, pageSize, stagedQuery, getRequestData, page]);
 
+	useEffect(() => {
+		setQueryId(v4());
+	}, [data]);
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data?.payload)) {

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

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

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

@@ -6,7 +6,6 @@ import {
 	Gauge,
 	Key,
 	Logs,
-	Receipt,
 	Shield,
 } from '@signozhq/icons';
 
@@ -70,13 +69,6 @@ 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.',
@@ -115,11 +107,7 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 	},
 };
 
-export const RESOURCE_ORDER = (
-	Object.keys(RESOURCE_PANELS) as AuthZResource[]
-).sort((left, right) =>
-	RESOURCE_PANELS[left].label.localeCompare(RESOURCE_PANELS[right].label),
-);
+export const RESOURCE_ORDER = Object.keys(RESOURCE_PANELS) as AuthZResource[];
 
 export function getResourcePanel(resource: AuthZResource): ResourcePanelConfig {
 	const panel = RESOURCE_PANELS[resource];

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

@@ -13,11 +13,6 @@ 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,5 +4,3 @@ 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

@@ -1,26 +0,0 @@
-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/mocks-server/__mockdata__/customQuickFilters.ts

@@ -4,85 +4,114 @@ export const quickFiltersListResponse = {
 		signal: 'logs',
 		filters: [
 			{
-				name: 'os.description',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'os.description',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'service.name',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'service.name',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'duration_nano',
-				fieldDataType: 'float64',
-				fieldContext: 'attribute',
+				key: 'duration_nano',
+				dataType: 'float64',
+				type: 'tag',
 			},
 			{
-				name: 'quantity',
-				fieldDataType: 'float64',
-				fieldContext: 'attribute',
+				key: 'quantity',
+				dataType: 'float64',
+				type: 'tag',
 			},
 			{
-				name: 'body',
-				fieldDataType: 'string',
-				fieldContext: '',
+				key: 'body',
+				dataType: 'string',
+				type: '',
 			},
 			{
-				name: 'deployment.environment',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'deployment.environment',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'service.namespace',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'service.namespace',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'k8s.namespace.name',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'k8s.namespace.name',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'service.instance.id',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'service.instance.id',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'k8s.pod.name',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'k8s.pod.name',
+				dataType: 'string',
+				type: 'resource',
 			},
 			{
-				name: 'process.owner',
-				fieldDataType: 'string',
-				fieldContext: 'resource',
+				key: 'process.owner',
+				dataType: 'string',
+				type: 'resource',
 			},
 		],
 	},
 };
 
-const otherFilterName = (name: string): { [k: string]: unknown[] } => ({
-	[name]: [
-		{ name, fieldContext: 'resource', fieldDataType: 'string', signal: 'logs' },
-	],
-});
-
 export const otherFiltersResponse = {
 	status: 'success',
 	data: {
-		complete: true,
-		keys: {
-			...otherFilterName('service.name'),
-			...otherFilterName('k8s.deployment.name'),
-			...otherFilterName('deployment.environment'),
-			...otherFilterName('service.namespace'),
-			...otherFilterName('k8s.namespace.name'),
-			...otherFilterName('service.instance.id'),
-			...otherFilterName('k8s.pod.name'),
-			...otherFilterName('k8s.pod.uid'),
-			...otherFilterName('os.description'),
-		},
+		attributes: [
+			{
+				key: 'service.name',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'k8s.deployment.name',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'deployment.environment',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'service.namespace',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'k8s.namespace.name',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'service.instance.id',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'k8s.pod.name',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'k8s.pod.uid',
+				dataType: 'string',
+				type: 'resource',
+			},
+			{
+				key: 'os.description',
+				dataType: 'string',
+				type: 'resource',
+			},
+		],
 	},
 };
 

frontend/src/mocks-server/handlers.ts

@@ -139,7 +139,7 @@ export const handlers = [
 		res(ctx.status(200), ctx.json(licensesSuccessResponse)),
 	),
 
-	rest.get('http://localhost/api/v1/subscriptions', (req, res, ctx) =>
+	rest.get('http://localhost/api/v1/billing', (req, res, ctx) =>
 		res(ctx.status(200), ctx.json(billingSuccessResponse)),
 	),
 

frontend/src/pages/Settings/Settings.tsx

@@ -58,15 +58,14 @@ function SettingsPage(): JSX.Element {
 			if (trialInfo?.workSpaceBlock && !isFetchingActiveLicense) {
 				updatedItems = updatedItems.map((item) => ({
 					...item,
-					isEnabled:
-						item.key === ROUTES.BILLING ||
-						!!(
-							isAdmin &&
-							(item.key === ROUTES.ORG_SETTINGS ||
-								item.key === ROUTES.MEMBERS_SETTINGS ||
-								item.key === ROUTES.MY_SETTINGS ||
-								item.key === ROUTES.SHORTCUTS)
-						),
+					isEnabled: !!(
+						isAdmin &&
+						(item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.MY_SETTINGS ||
+							item.key === ROUTES.SHORTCUTS)
+					),
 				}));
 
 				return updatedItems;
@@ -77,7 +76,6 @@ function SettingsPage(): JSX.Element {
 				updatedItems = updatedItems.map((item) => ({
 					...item,
 					isEnabled:
-						item.key === ROUTES.BILLING ||
 						item.key === ROUTES.ROLES_SETTINGS ||
 						item.key === ROUTES.ROLE_CREATE ||
 						item.key === ROUTES.ROLE_DETAILS ||
@@ -91,6 +89,7 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
+							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
@@ -128,7 +127,6 @@ function SettingsPage(): JSX.Element {
 				updatedItems = updatedItems.map((item) => ({
 					...item,
 					isEnabled:
-						item.key === ROUTES.BILLING ||
 						item.key === ROUTES.ROLES_SETTINGS ||
 						item.key === ROUTES.ROLE_CREATE ||
 						item.key === ROUTES.ROLE_DETAILS ||
@@ -142,6 +140,7 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
+							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||

frontend/src/pages/Settings/__tests__/Settings.test.tsx

@@ -73,13 +73,17 @@ describe('SettingsPage nav sections', () => {
 			});
 		});
 
-		it.each(['workspace', 'account', 'roles', 'service-accounts', 'billing'])(
+		it.each(['workspace', 'account', 'roles', 'service-accounts'])(
 			'renders "%s" element',
 			(id) => {
 				expect(screen.getByTestId(id)).toBeInTheDocument();
 			},
 		);
 
+		it.each(['billing'])('does not render "%s" element', (id) => {
+			expect(screen.queryByTestId(id)).not.toBeInTheDocument();
+		});
+
 		it('renders "mcp-server" element', () => {
 			expect(screen.getByTestId('mcp-server')).toBeInTheDocument();
 		});

frontend/src/pages/Settings/utils.ts

@@ -33,20 +33,14 @@ export const getRoutes = (
 	const isAdmin = userRole === USER_ROLES.ADMIN;
 	const isEditor = userRole === USER_ROLES.EDITOR;
 
-	if (isWorkspaceBlocked) {
-		if (isAdmin) {
-			settings.push(
-				...organizationSettings(t),
-				...membersSettings(t),
-				...mySettings(t),
-			);
-		}
-
-		settings.push(...billingSettings(t));
-
-		if (isAdmin) {
-			settings.push(...keyboardShortcuts(t));
-		}
+	if (isWorkspaceBlocked && isAdmin) {
+		settings.push(
+			...organizationSettings(t),
+			...membersSettings(t),
+			...mySettings(t),
+			...billingSettings(t),
+			...keyboardShortcuts(t),
+		);
 
 		return settings;
 	}
@@ -79,7 +73,7 @@ export const getRoutes = (
 		settings.push(...membersSettings(t));
 	}
 
-	if (isCloudUser || isEnterpriseSelfHostedUser) {
+	if ((isCloudUser || isEnterpriseSelfHostedUser) && isAdmin) {
 		settings.push(...billingSettings(t));
 	}
 

frontend/src/pages/Support/Support.tsx

@@ -4,12 +4,9 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Button, Card, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import { FeatureKeys } from 'constants/features';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import {
 	ArrowUpRight,
 	Book,
@@ -21,6 +18,8 @@ import {
 	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';
 import { openInNewTab } from 'utils/navigation';
@@ -117,7 +116,9 @@ export default function Support(): JSX.Element {
 	const showAddCreditCardModal =
 		!isPremiumChatSupportEnabled && !trialInfo?.trialConvertedToSubscription;
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -135,7 +136,7 @@ export default function Support(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -245,23 +246,18 @@ export default function Support(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn periscope-btn primary"
 					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn periscope-btn primary"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -504,7 +504,7 @@ jest.mock('hooks/useHandleExplorerTabChange', () => ({
 let capturedPayload: QueryRangePayloadV5;
 
 describe('TracesExplorer -', () => {
-	const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/traces`;
+	const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/traces`;
 
 	const setupServer = (): void => {
 		server.use(

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.test.tsx

@@ -1,11 +1,7 @@
-import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-} from 'lib/authz/utils/authz-test-utils';
 import { licensesSuccessWorkspaceLockedResponse } from 'mocks-server/__mockdata__/licenses';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { act, render, screen, waitFor } from 'tests/test-utils';
+import { act, render, screen } from 'tests/test-utils';
 
 import WorkspaceLocked from '.';
 
@@ -34,37 +30,40 @@ describe('WorkspaceLocked', () => {
 		expect(contactUsBtn).toBeInTheDocument();
 	});
 
-	it('enables the upgrade action when subscription create is granted', async () => {
+	it('Render for Admin', async () => {
 		server.use(
 			rest.get(apiURL, (req, res, ctx) =>
 				res(ctx.status(200), ctx.json(licensesSuccessWorkspaceLockedResponse)),
 			),
-			setupAuthzAdmin(),
 		);
 
 		render(<WorkspaceLocked />);
+		const contactAdminMessage = await screen.queryByText(
+			/contact your admin to proceed with the upgrade./i,
+		);
+		expect(contactAdminMessage).not.toBeInTheDocument();
 		const updateCreditCardBtn = await screen.findByRole('button', {
 			name: /continue my journey/i,
 		});
-		await waitFor(() => {
-			expect(updateCreditCardBtn).toBeEnabled();
-		});
+		expect(updateCreditCardBtn).toBeInTheDocument();
 	});
 
-	it('disables the upgrade action when subscription create is denied', async () => {
+	it('Render for non Admin', async () => {
 		server.use(
 			rest.get(apiURL, (req, res, ctx) =>
 				res(ctx.status(200), ctx.json(licensesSuccessWorkspaceLockedResponse)),
 			),
-			setupAuthzDenyAll(),
 		);
 
 		render(<WorkspaceLocked />, {}, { role: 'VIEWER' });
-		const updateCreditCardBtn = await screen.findByRole('button', {
-			name: /continue my journey/i,
-		});
-		await waitFor(() => {
-			expect(updateCreditCardBtn).toBeDisabled();
+		const updateCreditCardBtn = await screen.queryByRole('button', {
+			name: /Continue My Journey/i,
 		});
+		expect(updateCreditCardBtn).not.toBeInTheDocument();
+
+		const contactAdminMessage = await screen.findByText(
+			/contact your admin to proceed with the upgrade./i,
+		);
+		expect(contactAdminMessage).toBeInTheDocument();
 	});
 });

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import type { TabsProps } from 'antd';
 import {
+	Alert,
 	Button,
 	Col,
 	Collapse,
@@ -17,13 +18,11 @@ import {
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import history from 'lib/history';
 import { CircleArrowRight } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -45,7 +44,9 @@ import {
 import './WorkspaceLocked.styles.scss';
 
 export default function WorkspaceBlocked(): JSX.Element {
-	const { isFetchingActiveLicense, trialInfo, activeLicense } = useAppContext();
+	const { user, isFetchingActiveLicense, trialInfo, activeLicense } =
+		useAppContext();
+	const isAdmin = user.role === 'ADMIN';
 	const { notifications } = useNotifications();
 	const { safeNavigate } = useSafeNavigate();
 
@@ -88,7 +89,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	]);
 
 	const { mutate: updateCreditCard, isLoading } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				if (data.data?.redirectURL) {
@@ -183,11 +184,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 									/>
 								</Space>
 							</Col>
-							<Col span={24}>
-								<AuthZTooltip
-									checks={[SubscriptionCreatePermission]}
-									withPortal={false}
-								>
+							{isAdmin && (
+								<Col span={24}>
 									<Button
 										type="primary"
 										shape="round"
@@ -197,8 +195,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 									>
 										{t('continueToUpgrade')}
 									</Button>
-								</AuthZTooltip>
-							</Col>
+								</Col>
+							)}
 						</Row>
 					</Col>
 				</Row>
@@ -222,9 +220,9 @@ export default function WorkspaceBlocked(): JSX.Element {
 					>
 						{renderCustomerStories((index) => index % 2 !== 0)}
 					</Col>
-					<Col span={24}>
-						<Flex justify="center">
-							<AuthZTooltip checks={[SubscriptionCreatePermission]} withPortal={false}>
+					{isAdmin && (
+						<Col span={24}>
+							<Flex justify="center">
 								<Button
 									type="primary"
 									shape="round"
@@ -234,9 +232,9 @@ export default function WorkspaceBlocked(): JSX.Element {
 								>
 									{t('continueToUpgrade')}
 								</Button>
-							</AuthZTooltip>
-						</Flex>
-					</Col>
+							</Flex>
+						</Col>
+					)}
 				</Row>
 			),
 		},
@@ -262,7 +260,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 								defaultActiveKey={['signoz-cloud-vs-community']}
 								onChange={handleCollapseChange}
 							/>
-							<AuthZTooltip checks={[SubscriptionCreatePermission]} withPortal={false}>
+							{isAdmin && (
 								<Button
 									type="primary"
 									shape="round"
@@ -272,7 +270,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 								>
 									{t('continueToUpgrade')}
 								</Button>
-							</AuthZTooltip>
+							)}
 						</Space>
 					</Col>
 				</Row>
@@ -290,19 +288,21 @@ export default function WorkspaceBlocked(): JSX.Element {
 							{t('trialPlanExpired')}
 						</span>
 						<span className="workspace-locked__modal__header__actions">
-							<Flex gap={8} justify="center" align="center">
-								<Button
-									className="workspace-locked__modal__header__actions__billing"
-									type="link"
-									size="small"
-									role="button"
-									onClick={(e): void => handleViewBilling(e)}
-								>
-									View Billing
-								</Button>
+							{isAdmin && (
+								<Flex gap={8} justify="center" align="center">
+									<Button
+										className="workspace-locked__modal__header__actions__billing"
+										type="link"
+										size="small"
+										role="button"
+										onClick={(e): void => handleViewBilling(e)}
+									>
+										View Billing
+									</Button>
 
-								<RefreshPaymentStatus withPortal={false} />
-							</Flex>
+									<RefreshPaymentStatus />
+								</Flex>
+							)}
 
 							<Button
 								type="default"
@@ -346,7 +346,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 									</Space>
 								</Col>
 							</Row>
-							<Flex gap={8} vertical justify="center" align="center">
+							{!isAdmin && (
 								<Row
 									justify="center"
 									align="middle"
@@ -354,10 +354,22 @@ export default function WorkspaceBlocked(): JSX.Element {
 									gutter={[8, 8]}
 								>
 									<Col>
-										<AuthZTooltip
-											checks={[SubscriptionCreatePermission]}
-											withPortal={false}
-										>
+										<Alert
+											message="Contact your admin to proceed with the upgrade."
+											type="info"
+										/>
+									</Col>
+								</Row>
+							)}
+							{isAdmin && (
+								<Flex gap={8} vertical justify="center" align="center">
+									<Row
+										justify="center"
+										align="middle"
+										className="workspace-locked__modal__cta"
+										gutter={[8, 8]}
+									>
+										<Col>
 											<Button
 												type="primary"
 												shape="round"
@@ -367,21 +379,21 @@ export default function WorkspaceBlocked(): JSX.Element {
 											>
 												Continue my Journey
 											</Button>
-										</AuthZTooltip>
-									</Col>
-									<Col>
-										<Button
-											type="default"
-											shape="round"
-											size="middle"
-											className="periscope-btn"
-											onClick={handleExtendTrial}
-										>
-											{t('needMoreTime')}
-										</Button>
-									</Col>
-								</Row>
-							</Flex>
+										</Col>
+										<Col>
+											<Button
+												type="default"
+												shape="round"
+												size="middle"
+												className="periscope-btn"
+												onClick={handleExtendTrial}
+											>
+												{t('needMoreTime')}
+											</Button>
+										</Col>
+									</Row>
+								</Flex>
+							)}
 
 							<div className="workspace-locked__tabs">
 								<Tabs

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import { Button, Col, Flex, Modal, Row, Skeleton, Space } from 'antd';
+import { Alert, Button, Col, Flex, Modal, Row, Skeleton, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { updateSubscription } from 'api/generated/services/subscriptions';
+import manageCreditCardApi from 'api/v1/portal/create';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
@@ -20,13 +18,15 @@ import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correl
 import './WorkspaceSuspended.styles.scss';
 
 function WorkspaceSuspended(): JSX.Element {
+	const { user } = useAppContext();
+	const isAdmin = user.role === 'ADMIN';
 	const { notifications } = useNotifications();
 	const { activeLicense, isFetchingActiveLicense } = useAppContext();
 
 	const { t } = useTranslation(['failedPayment']);
 
 	const { mutate: manageCreditCard, isLoading } = useMutation(
-		updateSubscription,
+		manageCreditCardApi,
 		{
 			onSuccess: (data) => {
 				if (data.data?.redirectURL) {
@@ -111,17 +111,29 @@ function WorkspaceSuspended(): JSX.Element {
 									</Space>
 								</Col>
 							</Row>
-							<Row
-								justify="center"
-								align="middle"
-								className="workspace-suspended__modal__cta"
-								gutter={[8, 8]}
-							>
-								<Flex gap={8} justify="center" align="center">
-									<AuthZTooltip
-										checks={SubscriptionManagePermissions}
-										withPortal={false}
-									>
+							{!isAdmin && (
+								<Row
+									justify="center"
+									align="middle"
+									className="workspace-suspended__modal__cta"
+									gutter={[16, 16]}
+								>
+									<Col>
+										<Alert
+											message="Contact your admin to proceed with the upgrade."
+											type="info"
+										/>
+									</Col>
+								</Row>
+							)}
+							{isAdmin && (
+								<Row
+									justify="center"
+									align="middle"
+									className="workspace-suspended__modal__cta"
+									gutter={[8, 8]}
+								>
+									<Flex gap={8} justify="center" align="center">
 										<Button
 											type="primary"
 											shape="round"
@@ -131,10 +143,10 @@ function WorkspaceSuspended(): JSX.Element {
 										>
 											{t('continueMyJourney')}
 										</Button>
-									</AuthZTooltip>
-									<RefreshPaymentStatus withPortal={false} />
-								</Flex>
-							</Row>
+										<RefreshPaymentStatus />
+									</Flex>
+								</Row>
+							)}
 							<div className="workspace-suspended__creative">
 								<img src={featureGraphicCorrelationUrl} alt="correlation-graphic" />
 							</div>

frontend/src/types/api/billing/checkout.ts

@@ -0,0 +1,12 @@
+export interface CheckoutSuccessPayloadProps {
+	redirectURL: string;
+}
+
+export interface CheckoutRequestPayloadProps {
+	url: string;
+}
+
+export interface PayloadProps {
+	data: CheckoutSuccessPayloadProps;
+	status: string;
+}

frontend/src/types/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,14 @@
+export interface Filter {
+	key: string;
+	dataType: string;
+	type: string;
+}
+
+export interface Props {
+	signal: string;
+}
+
+export type PayloadProps = {
+	filters: Filter[];
+	signal: string;
+};

frontend/src/types/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,14 @@
+import { SignalType } from 'components/QuickFilters/types';
+
+interface FilterType {
+	key: string;
+	datatype: string;
+	type: string;
+}
+
+export interface UpdateCustomFiltersProps {
+	data: {
+		filters: FilterType[];
+		signal: SignalType;
+	};
+}

frontend/src/utils/permission/index.ts

@@ -112,7 +112,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ROLE_EDIT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MEMBERS_SETTINGS: ['ADMIN'],
 	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
-	BILLING: ['ADMIN', 'EDITOR', 'VIEWER'],
+	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS_SAVE_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -186,5 +186,4 @@ export const routeWithInitialAuthZSupport = {
 	WORKSPACE_LOCKED: true,
 	WORKSPACE_SUSPENDED: true,
 	WORKSPACE_ACCESS_RESTRICTED: true,
-	BILLING: true,
 } as const satisfies Partial<Record<keyof typeof ROUTES, true>>;

go.mod

@@ -31,6 +31,7 @@ require (
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/handlers v1.5.1
 	github.com/gorilla/mux v1.8.1
+	github.com/gorilla/websocket v1.5.4-0.20250319132907-e064f32e3674
 	github.com/huandu/go-sqlbuilder v1.39.1
 	github.com/jackc/pgx/v5 v5.9.2
 	github.com/json-iterator/go v1.1.13-0.20220915233716-71ac16282d12
@@ -133,7 +134,6 @@ require (
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/goccy/go-yaml v1.19.2 // indirect
 	github.com/google/go-cmp v0.7.0 // indirect
-	github.com/gorilla/websocket v1.5.4-0.20250319132907-e064f32e3674 // indirect
 	github.com/hashicorp/go-metrics v0.5.4 // indirect
 	github.com/huandu/go-clone v1.7.3 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect

heatmap-poc/main.go

@@ -0,0 +1,74 @@
+package main
+
+import (
+	"embed"
+	"io/fs"
+	"log/slog"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"os"
+)
+
+//go:embed static
+var embedded embed.FS
+
+// diskAssets is preferred over the embedded copy when it exists, so editing the
+// UI and reloading the page needs no rebuild. It resolves against the launch
+// config's cwd, the repo root.
+const diskAssets = "heatmap-poc/static"
+
+func main() {
+	addr := envOr("HEATMAP_POC_ADDR", "localhost:8099")
+	upstream, err := url.Parse(envOr("SIGNOZ_URL", "http://localhost:8080"))
+	if err != nil {
+		slog.Error("SIGNOZ_URL is not a URL", "error", err)
+		os.Exit(1)
+	}
+
+	apiKey := os.Getenv("SIGNOZ_API_KEY")
+	if apiKey == "" {
+		slog.Warn("SIGNOZ_API_KEY is unset, every upstream call will be rejected as unauthenticated")
+	}
+
+	mux := http.NewServeMux()
+	mux.Handle("/api/", &httputil.ReverseProxy{
+		Rewrite: func(r *httputil.ProxyRequest) {
+			r.SetURL(upstream)
+			r.Out.Host = upstream.Host
+			r.Out.Header.Set("SIGNOZ-API-KEY", apiKey)
+		},
+		ErrorHandler: func(rw http.ResponseWriter, _ *http.Request, err error) {
+			slog.Error("upstream call failed", "error", err)
+			http.Error(rw, err.Error(), http.StatusBadGateway)
+		},
+	})
+	mux.Handle("/", http.FileServerFS(assets()))
+
+	slog.Info("listening", "url", "http://"+addr, "upstream", upstream.String())
+	if err := http.ListenAndServe(addr, mux); err != nil {
+		slog.Error("server stopped", "error", err)
+		os.Exit(1)
+	}
+}
+
+func assets() fs.FS {
+	if stat, err := os.Stat(diskAssets); err == nil && stat.IsDir() {
+		slog.Info("serving the UI from disk", "dir", diskAssets)
+		return os.DirFS(diskAssets)
+	}
+	slog.Info("serving the embedded UI")
+	sub, err := fs.Sub(embedded, "static")
+	if err != nil {
+		slog.Error("embedded assets are unreadable", "error", err)
+		os.Exit(1)
+	}
+	return sub
+}
+
+func envOr(key, fallback string) string {
+	if value := os.Getenv(key); value != "" {
+		return value
+	}
+	return fallback
+}

heatmap-poc/static/app.js

@@ -0,0 +1,788 @@
+const TIME_AGGREGATIONS = ["latest", "sum", "avg", "min", "max", "count", "count_distinct", "rate", "increase"];
+const SPACE_AGGREGATIONS = ["sum", "avg", "min", "max", "count"];
+
+// the types whose samples reach the reader as plain values, so a bucket axis has
+// to be chosen for them
+const VALUE_TYPES = new Set(["gauge", "sum", "summary"]);
+
+// single hue, dark to light: a count's magnitude is the only thing it encodes
+const RAMP = ["#1c3557", "#22406c", "#284c82", "#2e5998", "#3668ae", "#4a80c4", "#689dd6", "#8dbbe6", "#b9d8f5"];
+const ZERO_FILL = "#0e1016";
+
+const PAD = { left: 78, right: 8, top: 8, bottom: 22 };
+const MAX_CHART_HEIGHT = 560;
+const MAX_JSON_CHARS = 300_000;
+
+const state = {
+	mode: "metric",
+	rows: [],
+	groupBy: [],
+	bucketKind: "default",
+	colorScale: "linear",
+	grid: null,
+	emptyReason: "Run a query to draw the heatmap.",
+	hidden: new Set(),
+	requestText: "",
+	responseText: "",
+};
+
+const catalogue = new Map();
+const attributesByMetric = new Map();
+let nextRowId = 0;
+
+const $ = (selector) => document.querySelector(selector);
+const esc = (value) => String(value).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+
+function timeWindow() {
+	const end = Date.now();
+	return { start: end - Number($("#range").value) * 60_000, end };
+}
+
+function rowLetter(index) {
+	return String.fromCharCode(65 + index);
+}
+
+function typeSupport(type) {
+	if (VALUE_TYPES.has(type)) {
+		return { aggregations: true, buckets: true };
+	}
+	if (type === "histogram") {
+		return { aggregations: false, buckets: false, note: "Read with increase/sum over its own le labels. Bucket options are rejected." };
+	}
+	if (type === "exponentialhistogram") {
+		return { aggregations: false, buckets: false, bad: true, note: "Exponential histograms are not supported yet — this comes back 501." };
+	}
+	return { aggregations: false, buckets: false, bad: true, note: "No type is recorded for this metric, so no bucket axis can be chosen — this comes back 400." };
+}
+
+function scaleHint(scale) {
+	const perTwice = 2 ** scale;
+	return perTwice >= 1 ? `${perTwice} bucket${perTwice === 1 ? "" : "s"} per 2x` : `1 bucket per ${2 ** -scale}x`;
+}
+
+function formatNumber(value) {
+	if (!Number.isFinite(value)) {
+		return value > 0 ? "∞" : "-∞";
+	}
+	if (value === 0) {
+		return "0";
+	}
+	const magnitude = Math.abs(value);
+	if (magnitude >= 1e6 || magnitude < 1e-3) {
+		return value.toExponential(1).replace("e+", "e");
+	}
+	if (Number.isInteger(value)) {
+		return String(value);
+	}
+	const text = value.toPrecision(magnitude >= 1 ? 4 : 3);
+	return text.includes(".") ? text.replace(/0+$/, "").replace(/\.$/, "") : text;
+}
+
+function formatTime(ms, spanMs) {
+	const at = new Date(ms);
+	const clock = at.toTimeString().slice(0, 5);
+	return spanMs > 24 * 3600_000 ? `${String(at.getMonth() + 1).padStart(2, "0")}-${String(at.getDate()).padStart(2, "0")} ${clock}` : clock;
+}
+
+/* ---------- upstream ---------- */
+
+async function getJSON(path, params) {
+	const response = await fetch(`${path}?${new URLSearchParams(params)}`);
+	if (!response.ok) {
+		throw new Error(`${path} came back ${response.status}: ${(await response.text()).slice(0, 400)}`);
+	}
+	return response.json();
+}
+
+async function searchMetrics(searchText) {
+	const { start, end } = timeWindow();
+	const body = await getJSON("/api/v2/metrics", { start, end, limit: 60, searchText });
+	const metrics = body?.data?.metrics ?? [];
+	for (const metric of metrics) {
+		catalogue.set(metric.metricName, metric);
+	}
+	return metrics;
+}
+
+async function metricAttributes(metricName) {
+	if (attributesByMetric.has(metricName)) {
+		return attributesByMetric.get(metricName);
+	}
+	const { start, end } = timeWindow();
+	const body = await getJSON("/api/v2/metrics/attributes", { metricName, start, end });
+	const keys = (body?.data?.attributes ?? []).map((attribute) => attribute.key);
+	attributesByMetric.set(metricName, keys);
+	return keys;
+}
+
+/* ---------- metric rows ---------- */
+
+function addRow() {
+	state.rows.push({ id: nextRowId++, metric: "", type: "", timeAggregation: "max", spaceAggregation: "max", filter: "" });
+	renderRows();
+}
+
+function renderRows() {
+	const host = $("#rows");
+	host.textContent = "";
+
+	state.rows.forEach((row, index) => {
+		const node = $("#row-template").content.firstElementChild.cloneNode(true);
+		const input = node.querySelector(".metric-input");
+		const list = node.querySelector("datalist");
+		const badge = node.querySelector(".badge");
+		const aggregations = node.querySelector(".agg-fields");
+		const note = node.querySelector(".row-note");
+		const listId = `metrics-${row.id}`;
+
+		node.querySelector(".row-name").textContent = rowLetter(index);
+		list.id = listId;
+		input.setAttribute("list", listId);
+		input.value = row.metric;
+		node.querySelector(".filter-input").value = row.filter;
+		node.querySelector(".remove-row").hidden = state.mode !== "formula" || state.rows.length < 2;
+
+		const support = typeSupport(row.type);
+		if (row.metric) {
+			badge.hidden = false;
+			badge.textContent = row.type || "no type";
+			badge.classList.toggle("bad", Boolean(support.bad));
+			aggregations.hidden = !support.aggregations;
+			note.hidden = !support.note;
+			note.textContent = support.note ?? "";
+			note.classList.toggle("warn", Boolean(support.bad));
+		}
+
+		for (const [select, options, chosen] of [
+			[node.querySelector(".time-agg"), TIME_AGGREGATIONS, row.timeAggregation],
+			[node.querySelector(".space-agg"), SPACE_AGGREGATIONS, row.spaceAggregation],
+		]) {
+			select.innerHTML = options.map((option) => `<option value="${option}"${option === chosen ? " selected" : ""}>${option}</option>`).join("");
+		}
+
+		const fillOptions = async () => {
+			try {
+				const metrics = await searchMetrics(input.value.trim());
+				list.innerHTML = metrics.map((metric) => `<option value="${esc(metric.metricName)}" label="${esc(metric.type || "no type")}"></option>`).join("");
+			} catch (error) {
+				showBanner(error.message);
+			}
+		};
+
+		let searchTimer = 0;
+		input.addEventListener("input", () => {
+			clearTimeout(searchTimer);
+			searchTimer = setTimeout(fillOptions, 220);
+		});
+		input.addEventListener("focus", () => {
+			if (!list.children.length) {
+				fillOptions();
+			}
+		});
+
+		input.addEventListener("change", async () => {
+			const name = input.value.trim();
+			row.metric = name;
+			row.type = catalogue.get(name)?.type ?? "";
+			if (name && !catalogue.has(name)) {
+				try {
+					await searchMetrics(name);
+					row.type = catalogue.get(name)?.type ?? "";
+				} catch (error) {
+					showBanner(error.message);
+				}
+			}
+			renderRows();
+			refreshPanes();
+			refreshGroupOptions();
+		});
+
+		node.querySelector(".time-agg").addEventListener("change", (event) => {
+			row.timeAggregation = event.target.value;
+		});
+		node.querySelector(".space-agg").addEventListener("change", (event) => {
+			row.spaceAggregation = event.target.value;
+		});
+		node.querySelector(".filter-input").addEventListener("change", (event) => {
+			row.filter = event.target.value.trim();
+		});
+		node.querySelector(".remove-row").addEventListener("click", () => {
+			state.rows = state.rows.filter((candidate) => candidate.id !== row.id);
+			renderRows();
+			refreshPanes();
+			refreshGroupOptions();
+		});
+
+		host.append(node);
+	});
+}
+
+/* ---------- group by ---------- */
+
+function renderGroupChips() {
+	$("#group-chips").innerHTML = state.groupBy
+		.map((key) => `<span class="chip">${esc(key)}<button type="button" data-key="${esc(key)}" title="Remove">&times;</button></span>`)
+		.join("");
+}
+
+async function refreshGroupOptions() {
+	const metrics = state.rows.map((row) => row.metric).filter(Boolean);
+	const hint = $("#group-hint");
+	if (!metrics.length) {
+		$("#group-options").innerHTML = "";
+		hint.hidden = false;
+		hint.textContent = "Pick a metric to load its attributes.";
+		return;
+	}
+
+	try {
+		const keys = new Set();
+		for (const row of state.rows.filter((candidate) => candidate.metric)) {
+			for (const key of await metricAttributes(row.metric)) {
+				// the builder strips `le` from a histogram's group by and reads the
+				// bucket axis off it instead, so offering it here would do nothing
+				if (key !== "le" || row.type !== "histogram") {
+					keys.add(key);
+				}
+			}
+		}
+		const available = [...keys].filter((key) => !state.groupBy.includes(key)).sort();
+		$("#group-options").innerHTML = available.map((key) => `<option value="${esc(key)}"></option>`).join("");
+		hint.hidden = available.length > 0;
+		hint.textContent = available.length ? "" : "No further attributes on the selected metrics in this window.";
+	} catch (error) {
+		showBanner(error.message);
+	}
+}
+
+/* ---------- panes ---------- */
+
+// A formula is bucketed from its own output, so its inputs may be any type. In
+// metric mode the one metric decides, and an unpicked one keeps the pane up.
+function bucketsAllowed() {
+	if (state.mode === "promql") {
+		return false;
+	}
+	if (state.mode === "formula") {
+		return true;
+	}
+	const row = state.rows[0];
+	return !row?.metric || typeSupport(row.type).buckets;
+}
+
+function refreshPanes() {
+	const isPromql = state.mode === "promql";
+	const isFormula = state.mode === "formula";
+
+	$("#builder-pane").hidden = isPromql;
+	$("#promql-pane").hidden = !isPromql;
+	$("#add-row").hidden = !isFormula;
+	$("#formula-field").hidden = !isFormula;
+
+	const allowed = bucketsAllowed();
+	$("#bucket-pane").hidden = !allowed;
+	if (!allowed) {
+		setBucketKind("default");
+	}
+}
+
+function setBucketKind(kind) {
+	state.bucketKind = kind;
+	for (const button of $("#bucket-kinds").children) {
+		button.classList.toggle("on", button.dataset.kind === kind);
+	}
+	$("#bucket-default-hint").hidden = kind !== "default";
+	$("#scale-field").hidden = kind !== "log";
+	$("#linear-fields").hidden = kind !== "linear";
+	$("#scale-hint").textContent = scaleHint(Number($("#scale").value));
+}
+
+function setMode(mode) {
+	state.mode = mode;
+	for (const button of $("#modes").children) {
+		button.classList.toggle("on", button.dataset.mode === mode);
+	}
+	if (mode === "metric") {
+		state.rows = state.rows.slice(0, 1);
+	}
+	if (!state.rows.length) {
+		addRow();
+	}
+	if (mode === "formula" && state.rows.length < 2) {
+		addRow();
+	}
+	renderRows();
+	refreshPanes();
+	refreshGroupOptions();
+}
+
+/* ---------- request ---------- */
+
+function buildRequest() {
+	const { start, end } = timeWindow();
+	const step = Number($("#step").value) || 60;
+	const request = {
+		schemaVersion: "v1",
+		start,
+		end,
+		requestType: "heatmap",
+		compositeQuery: { queries: [] },
+		formatOptions: { formatTableResultForUI: false, fillGaps: false },
+		noCache: $("#no-cache").checked,
+	};
+
+	if (state.mode === "promql") {
+		const query = $("#promql").value.trim();
+		if (!query) {
+			throw new Error("Enter a PromQL query.");
+		}
+		request.compositeQuery.queries.push({ type: "promql", spec: { name: "A", query, step, disabled: false } });
+		return request;
+	}
+
+	const inFormula = state.mode === "formula";
+	state.rows.forEach((row, index) => {
+		if (!row.metric) {
+			throw new Error(`Query ${rowLetter(index)} has no metric selected.`);
+		}
+		const histogram = row.type === "histogram";
+		const spec = {
+			name: rowLetter(index),
+			signal: "metrics",
+			aggregations: [
+				{
+					metricName: row.metric,
+					timeAggregation: histogram ? "increase" : row.timeAggregation,
+					spaceAggregation: histogram ? "sum" : row.spaceAggregation,
+				},
+			],
+			stepInterval: step,
+			// only the enabled query renders the heatmap, so a formula's inputs ride
+			// along disabled
+			disabled: inFormula,
+		};
+		if (state.groupBy.length) {
+			spec.groupBy = state.groupBy.map((name) => ({ name }));
+		}
+		if (row.filter) {
+			spec.filter = { expression: row.filter };
+		}
+		request.compositeQuery.queries.push({ type: "builder_query", spec });
+	});
+
+	if (inFormula) {
+		const expression = $("#formula").value.trim();
+		if (!expression) {
+			throw new Error("A formula heatmap needs an expression.");
+		}
+		request.compositeQuery.queries.push({ type: "builder_formula", spec: { name: "F1", expression, disabled: false } });
+	}
+
+	if (state.bucketKind === "log") {
+		request.bucketOptions = { kind: "log", spec: { scale: Number($("#scale").value) } };
+	} else if (state.bucketKind === "linear") {
+		request.bucketOptions = { kind: "linear", spec: { maxValue: Number($("#max-value").value), numBuckets: Number($("#num-buckets").value) } };
+	}
+
+	return request;
+}
+
+async function run() {
+	let request;
+	try {
+		request = buildRequest();
+	} catch (error) {
+		showBanner(error.message);
+		return;
+	}
+
+	state.window = { start: request.start, end: request.end };
+	state.requestText = JSON.stringify(request, null, "\t");
+	renderJSON("#request", state.requestText);
+	$("#run").disabled = true;
+	$("#run").textContent = "Running…";
+	showBanner("");
+
+	try {
+		const response = await fetch("/api/v5/query_range", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify(request),
+		});
+		const text = await response.text();
+		let parsed = null;
+		try {
+			parsed = JSON.parse(text);
+			state.responseText = JSON.stringify(parsed, null, "\t");
+		} catch {
+			state.responseText = text;
+		}
+		renderJSON("#response", state.responseText);
+
+		if (!response.ok) {
+			const problem = parsed?.error;
+			const detail = (problem?.errors ?? []).map((entry) => entry.message ?? JSON.stringify(entry)).join("\n");
+			showBanner(`${response.status} ${problem?.code ?? ""}\n${problem?.message ?? text.slice(0, 600)}${detail ? `\n${detail}` : ""}`.trim());
+			setGrid(null, "The request was rejected — see the message above.");
+			return;
+		}
+
+		const warning = parsed?.data?.warning;
+		if (warning?.message) {
+			showBanner([warning.message, ...(warning.warnings ?? []).map((entry) => entry.message)].join("\n"));
+		}
+		const grid = buildGrid(parsed);
+		setGrid(grid, "The response carried no series, so there is nothing to draw.");
+	} catch (error) {
+		showBanner(error.message);
+		setGrid(null, "The request could not be sent — see the message above.");
+	} finally {
+		$("#run").disabled = false;
+		$("#run").textContent = "Run query";
+	}
+}
+
+/* ---------- response ---------- */
+
+function buildGrid(body) {
+	const results = body?.data?.data?.results ?? [];
+	const result = results.find((entry) => Array.isArray(entry?.aggregations) && entry.aggregations.length);
+	if (!result) {
+		return null;
+	}
+
+	const aggregation = result.aggregations[0];
+	const buckets = aggregation.meta?.buckets ?? [];
+	const rows = buckets.length + 1;
+	const partial = new Set();
+
+	const series = (aggregation.series ?? []).map((entry) => {
+		const labels = (entry.labels ?? []).map((label) => `${label.key?.name ?? "?"}=${label.value}`);
+		const byTs = new Map();
+		let total = 0;
+		for (const point of entry.values ?? []) {
+			const counts = point.values ?? [];
+			byTs.set(point.timestamp, counts);
+			total += counts.reduce((sum, count) => sum + count, 0);
+			if (point.partial) {
+				partial.add(point.timestamp);
+			}
+		}
+		return { key: labels.join(", ") || "(no labels)", byTs, total };
+	});
+
+	const timestamps = [...new Set(series.flatMap((entry) => [...entry.byTs.keys()]))].sort((a, b) => a - b);
+	series.sort((a, b) => b.total - a.total || a.key.localeCompare(b.key));
+
+	return { queryName: result.queryName, buckets, rows, timestamps, partial, series };
+}
+
+function setGrid(grid, emptyReason) {
+	state.grid = grid;
+	state.emptyReason = emptyReason;
+	state.hidden = new Set();
+	renderGroups();
+	renderChart();
+}
+
+function visibleSeries() {
+	return state.grid.series.filter((entry) => !state.hidden.has(entry.key));
+}
+
+function renderGroups() {
+	const grid = state.grid;
+	const card = $("#groups-card");
+	if (!grid || grid.series.length < 2) {
+		card.hidden = true;
+		return;
+	}
+
+	card.hidden = false;
+	$("#group-count").textContent = `${grid.series.length - state.hidden.size} of ${grid.series.length} shown`;
+	$("#groups").innerHTML = grid.series
+		.map(
+			(entry) => `<label><input type="checkbox" data-key="${esc(entry.key)}"${state.hidden.has(entry.key) ? "" : " checked"}>
+				<span class="name" title="${esc(entry.key)}">${esc(entry.key)}</span>
+				<span class="total">${formatNumber(entry.total)}</span></label>`,
+		)
+		.join("");
+}
+
+/* ---------- chart ---------- */
+
+function bucketRange(grid, row) {
+	if (row === grid.rows - 1) {
+		return grid.buckets.length ? `> ${formatNumber(grid.buckets[grid.buckets.length - 1])}` : "overflow, the response carried no bucket bounds";
+	}
+	const upper = formatNumber(grid.buckets[row]);
+	return row === 0 ? `<= ${upper}` : `(${formatNumber(grid.buckets[row - 1])}, ${upper}]`;
+}
+
+function colorFor(count, max) {
+	if (count <= 0) {
+		return ZERO_FILL;
+	}
+	const fraction = max <= 0 ? 1 : state.colorScale === "log" ? Math.log1p(count) / Math.log1p(max) : count / max;
+	return RAMP[Math.min(RAMP.length - 1, Math.max(0, Math.round(fraction * (RAMP.length - 1))))];
+}
+
+function renderChart() {
+	const host = $("#chart");
+	const legend = $("#legend");
+	const grid = state.grid;
+	legend.textContent = "";
+
+	if (!grid) {
+		host.innerHTML = `<p class="empty">${esc(state.emptyReason)}</p>`;
+		return;
+	}
+	if (!grid.timestamps.length) {
+		host.innerHTML = '<p class="empty">The query returned no columns.</p>';
+		return;
+	}
+
+	const columns = grid.timestamps.length;
+	const shown = visibleSeries();
+	const matrix = grid.timestamps.map((ts) => {
+		const column = new Array(grid.rows).fill(0);
+		for (const entry of shown) {
+			const counts = entry.byTs.get(ts);
+			if (!counts) {
+				continue;
+			}
+			for (let row = 0; row < grid.rows; row++) {
+				column[row] += counts[row] ?? 0;
+			}
+		}
+		return column;
+	});
+
+	const max = Math.max(0, ...matrix.flat());
+	// clientWidth carries the 12px padding on either side of #chart
+	const available = host.clientWidth - 24 - PAD.left - PAD.right;
+	const cellWidth = Math.max(3, available / columns);
+	const cellHeight = Math.min(22, Math.max(4, MAX_CHART_HEIGHT / grid.rows));
+	const plotWidth = cellWidth * columns;
+	const plotHeight = cellHeight * grid.rows;
+	const gap = cellWidth >= 7 && cellHeight >= 7 ? 1 : 0;
+	const span = grid.timestamps[columns - 1] - grid.timestamps[0];
+
+	const cells = [];
+	for (let column = 0; column < columns; column++) {
+		for (let row = 0; row < grid.rows; row++) {
+			const x = PAD.left + column * cellWidth;
+			const y = PAD.top + (grid.rows - 1 - row) * cellHeight;
+			cells.push(`<rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${(cellWidth - gap).toFixed(2)}" height="${(cellHeight - gap).toFixed(2)}" fill="${colorFor(matrix[column][row], max)}"/>`);
+		}
+	}
+
+	const rowStride = Math.max(1, Math.ceil(13 / cellHeight));
+	const rowLabels = [];
+	for (let row = 0; row < grid.rows; row++) {
+		if (row % rowStride !== 0 && row !== grid.rows - 1) {
+			continue;
+		}
+		const y = PAD.top + (grid.rows - 1 - row) * cellHeight + cellHeight / 2;
+		const text = row === grid.rows - 1 ? "∞" : formatNumber(grid.buckets[row]);
+		rowLabels.push(`<text class="axis-label" x="${PAD.left - 6}" y="${(y + 3.2).toFixed(2)}" text-anchor="end">${esc(text)}</text>`);
+	}
+
+	const columnStride = Math.max(1, Math.ceil(58 / cellWidth));
+	const columnLabels = [];
+	for (let column = 0; column < columns; column += columnStride) {
+		const ts = grid.timestamps[column];
+		const x = PAD.left + column * cellWidth;
+		columnLabels.push(`<text class="axis-label" x="${x.toFixed(2)}" y="${(PAD.top + plotHeight + 14).toFixed(2)}">${esc(formatTime(ts, span))}${grid.partial.has(ts) ? "*" : ""}</text>`);
+	}
+
+	host.innerHTML = `<svg width="${PAD.left + plotWidth + PAD.right}" height="${PAD.top + plotHeight + PAD.bottom}">
+		${cells.join("")}
+		<line class="axis-line" x1="${PAD.left}" y1="${PAD.top + plotHeight + 0.5}" x2="${PAD.left + plotWidth}" y2="${PAD.top + plotHeight + 0.5}"/>
+		${rowLabels.join("")}${columnLabels.join("")}
+		<rect class="cursor-cell" hidden/>
+	</svg>`;
+
+	// a heatmap cannot fill gaps, so a chart much shorter than the window asked
+	// for means those columns hold no data at all rather than being hidden
+	const asked = state.window ? state.window.end - state.window.start : span;
+	const covered = `${formatTime(grid.timestamps[0], asked)}–${formatTime(grid.timestamps[columns - 1], asked)}`;
+	const coverage =
+		state.window && span < 0.9 * asked
+			? `${covered}, the only columns with data in the ${formatTime(state.window.start, asked)}–${formatTime(state.window.end, asked)} requested`
+			: covered;
+
+	legend.innerHTML = `<span>0</span>
+		<div class="swatches"><div class="swatch" style="background:${ZERO_FILL};border:1px solid var(--line)"></div>${RAMP.map((color) => `<div class="swatch" style="background:${color}"></div>`).join("")}</div>
+		<span>${formatNumber(max)} per cell</span>
+		<span>· ${grid.rows} buckets × ${columns} columns · ${shown.length} of ${grid.series.length} series · ${esc(coverage)}${grid.partial.size ? " · * partial column" : ""}</span>`;
+
+	attachHover(host.querySelector("svg"), { grid, matrix, shown, columns, cellWidth, cellHeight, plotHeight, span, max });
+}
+
+function attachHover(svg, view) {
+	const tooltip = $("#tooltip");
+	const cursor = svg.querySelector(".cursor-cell");
+
+	svg.addEventListener("mouseleave", () => {
+		tooltip.hidden = true;
+		cursor.setAttribute("hidden", "");
+	});
+
+	svg.addEventListener("mousemove", (event) => {
+		const box = svg.getBoundingClientRect();
+		const column = Math.floor((event.clientX - box.left - PAD.left) / view.cellWidth);
+		const row = view.grid.rows - 1 - Math.floor((event.clientY - box.top - PAD.top) / view.cellHeight);
+		if (column < 0 || column >= view.columns || row < 0 || row >= view.grid.rows) {
+			tooltip.hidden = true;
+			cursor.setAttribute("hidden", "");
+			return;
+		}
+
+		cursor.removeAttribute("hidden");
+		cursor.setAttribute("x", PAD.left + column * view.cellWidth);
+		cursor.setAttribute("y", PAD.top + (view.grid.rows - 1 - row) * view.cellHeight);
+		cursor.setAttribute("width", view.cellWidth);
+		cursor.setAttribute("height", view.cellHeight);
+
+		const ts = view.grid.timestamps[column];
+		const breakdown = view.shown
+			.map((entry) => ({ key: entry.key, count: entry.byTs.get(ts)?.[row] ?? 0 }))
+			.filter((entry) => entry.count > 0)
+			.sort((a, b) => b.count - a.count);
+
+		tooltip.innerHTML = [
+			`<b>${esc(formatNumber(view.matrix[column][row]))}</b> in ${esc(bucketRange(view.grid, row))}`,
+			`${esc(new Date(ts).toTimeString().slice(0, 8))}${view.grid.partial.has(ts) ? "  (partial)" : ""}`,
+			...breakdown.slice(0, 6).map((entry) => `  ${esc(entry.key)}  ${esc(formatNumber(entry.count))}`),
+			breakdown.length > 6 ? `  … ${breakdown.length - 6} more` : "",
+		]
+			.filter(Boolean)
+			.join("\n");
+
+		tooltip.hidden = false;
+		const width = tooltip.offsetWidth;
+		tooltip.style.left = `${Math.min(event.clientX + 14, window.innerWidth - width - 8)}px`;
+		tooltip.style.top = `${Math.min(event.clientY + 14, window.innerHeight - tooltip.offsetHeight - 8)}px`;
+	});
+}
+
+/* ---------- chrome ---------- */
+
+function showBanner(message) {
+	const banner = $("#banner");
+	banner.textContent = message;
+	banner.hidden = !message;
+}
+
+function renderJSON(selector, text) {
+	$(selector).textContent = text.length > MAX_JSON_CHARS ? `${text.slice(0, MAX_JSON_CHARS)}\n… truncated for display, Copy takes the whole thing` : text;
+}
+
+function wire() {
+	$("#modes").addEventListener("click", (event) => {
+		if (event.target.dataset.mode) {
+			setMode(event.target.dataset.mode);
+		}
+	});
+
+	$("#bucket-kinds").addEventListener("click", (event) => {
+		if (event.target.dataset.kind) {
+			setBucketKind(event.target.dataset.kind);
+		}
+	});
+
+	$("#scale").addEventListener("input", () => {
+		$("#scale-hint").textContent = scaleHint(Number($("#scale").value));
+	});
+
+	$("#add-row").addEventListener("click", () => {
+		addRow();
+		refreshPanes();
+	});
+
+	$("#range").addEventListener("change", () => {
+		attributesByMetric.clear();
+		refreshGroupOptions();
+	});
+
+	$("#group-input").addEventListener("change", (event) => {
+		const key = event.target.value.trim();
+		if (key && !state.groupBy.includes(key)) {
+			state.groupBy.push(key);
+			renderGroupChips();
+			refreshGroupOptions();
+		}
+		event.target.value = "";
+	});
+
+	$("#group-chips").addEventListener("click", (event) => {
+		const key = event.target.dataset.key;
+		if (key) {
+			state.groupBy = state.groupBy.filter((candidate) => candidate !== key);
+			renderGroupChips();
+			refreshGroupOptions();
+		}
+	});
+
+	$("#form").addEventListener("submit", (event) => {
+		event.preventDefault();
+		run();
+	});
+
+	$("#color-scale").addEventListener("change", (event) => {
+		state.colorScale = event.target.value;
+		renderChart();
+	});
+
+	$("#groups").addEventListener("change", (event) => {
+		const key = event.target.dataset.key;
+		if (!key) {
+			return;
+		}
+		if (event.target.checked) {
+			state.hidden.delete(key);
+		} else {
+			state.hidden.add(key);
+		}
+		$("#group-count").textContent = `${state.grid.series.length - state.hidden.size} of ${state.grid.series.length} shown`;
+		renderChart();
+	});
+
+	$("#select-all").addEventListener("click", () => {
+		state.hidden.clear();
+		renderGroups();
+		renderChart();
+	});
+
+	$("#select-none").addEventListener("click", () => {
+		state.hidden = new Set(state.grid.series.map((entry) => entry.key));
+		renderGroups();
+		renderChart();
+	});
+
+	for (const button of document.querySelectorAll("[data-copy]")) {
+		button.addEventListener("click", async () => {
+			const text = button.dataset.copy === "request" ? state.requestText : state.responseText;
+			try {
+				await navigator.clipboard.writeText(text);
+				button.textContent = "Copied";
+			} catch {
+				button.textContent = "Copy failed";
+			}
+			setTimeout(() => {
+				button.textContent = "Copy";
+			}, 1200);
+		});
+	}
+
+	let resizeTimer = 0;
+	window.addEventListener("resize", () => {
+		clearTimeout(resizeTimer);
+		resizeTimer = setTimeout(renderChart, 120);
+	});
+}
+
+wire();
+setMode("metric");
+renderGroupChips();
+setBucketKind("default");

heatmap-poc/static/index.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Heatmap POC</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<header>
+		<h1>Heatmap POC</h1>
+		<p class="sub"><code>POST /api/v5/query_range</code> with <code>requestType: "heatmap"</code></p>
+	</header>
+
+	<div class="layout">
+		<form id="form" class="card form">
+			<div class="segmented" id="modes">
+				<button type="button" data-mode="metric" class="on">Metric</button>
+				<button type="button" data-mode="formula">Formula</button>
+				<button type="button" data-mode="promql">PromQL</button>
+			</div>
+
+			<div class="grid-2">
+				<label>Time range
+					<select id="range">
+						<option value="15">Last 15 minutes</option>
+						<option value="60" selected>Last 1 hour</option>
+						<option value="180">Last 3 hours</option>
+						<option value="360">Last 6 hours</option>
+						<option value="1440">Last 24 hours</option>
+						<option value="10080">Last 7 days</option>
+					</select>
+				</label>
+				<label>Step (seconds)
+					<input id="step" type="number" min="1" step="1" value="60">
+				</label>
+			</div>
+
+			<section id="builder-pane">
+				<div id="rows"></div>
+				<button type="button" id="add-row" class="ghost" hidden>+ Add metric</button>
+
+				<label id="formula-field" hidden>Formula
+					<input id="formula" placeholder="A / B" autocomplete="off">
+				</label>
+
+				<div class="chips-field">
+					<span class="chips-label">Group by</span>
+					<div id="group-chips" class="chips"></div>
+					<input id="group-input" list="group-options" placeholder="Add an attribute…" autocomplete="off">
+					<datalist id="group-options"></datalist>
+					<p class="hint" id="group-hint" hidden></p>
+				</div>
+			</section>
+
+			<section id="promql-pane" hidden>
+				<label>PromQL
+					<textarea id="promql" rows="4" spellcheck="false" placeholder='sum by (le) (increase({__name__="http.server.duration.bucket"}[5m]))'></textarea>
+				</label>
+				<p class="hint">The bucket axis comes from the <code>le</code> labels the query returns, so bucket options are rejected here. A dotted metric name needs the <code>{__name__="…"}</code> form.</p>
+			</section>
+
+			<fieldset id="bucket-pane">
+				<legend>Bucket options</legend>
+				<div class="segmented small" id="bucket-kinds">
+					<button type="button" data-kind="default" class="on">Default</button>
+					<button type="button" data-kind="log">Log</button>
+					<button type="button" data-kind="linear">Linear</button>
+				</div>
+				<p class="hint" id="bucket-default-hint">Omitted from the request. The backend falls back to a log axis at scale 4.</p>
+				<label id="scale-field" hidden>Scale
+					<input id="scale" type="number" min="-4" max="4" step="1" value="4">
+					<span class="hint" id="scale-hint"></span>
+				</label>
+				<div class="grid-2" id="linear-fields" hidden>
+					<label>Max value
+						<input id="max-value" type="number" min="0" step="any" value="1000">
+					</label>
+					<label>Number of buckets
+						<input id="num-buckets" type="number" min="1" max="512" step="1" value="60">
+					</label>
+				</div>
+			</fieldset>
+
+			<div class="run-row">
+				<button type="submit" id="run">Run query</button>
+				<label class="inline"><input type="checkbox" id="no-cache" checked> Bypass cache</label>
+			</div>
+		</form>
+
+		<div class="results">
+			<p id="banner" hidden></p>
+
+			<section class="card">
+				<div class="card-head">
+					<h2>Heatmap</h2>
+					<div class="head-tools">
+						<label class="inline">Colour scale
+							<select id="color-scale">
+								<option value="linear" selected>Linear</option>
+								<option value="log">Log</option>
+							</select>
+						</label>
+					</div>
+				</div>
+				<div id="chart" class="chart"><p class="empty">Run a query to draw the heatmap.</p></div>
+				<div id="legend" class="legend"></div>
+			</section>
+
+			<section class="card" id="groups-card" hidden>
+				<div class="card-head">
+					<h2>Groups <span id="group-count" class="count"></span></h2>
+					<div class="head-tools">
+						<button type="button" class="ghost" id="select-all">All</button>
+						<button type="button" class="ghost" id="select-none">None</button>
+					</div>
+				</div>
+				<div id="groups" class="groups"></div>
+			</section>
+
+			<div class="grid-2 json-grid">
+				<section class="card">
+					<div class="card-head">
+						<h2>Request</h2>
+						<button type="button" class="ghost" data-copy="request">Copy</button>
+					</div>
+					<pre id="request" class="json"></pre>
+				</section>
+				<section class="card">
+					<div class="card-head">
+						<h2>Response</h2>
+						<button type="button" class="ghost" data-copy="response">Copy</button>
+					</div>
+					<pre id="response" class="json"></pre>
+				</section>
+			</div>
+		</div>
+	</div>
+
+	<div id="tooltip" class="tooltip" hidden></div>
+
+	<template id="row-template">
+		<div class="metric-row">
+			<span class="row-name"></span>
+			<div class="row-body">
+				<div class="metric-field">
+					<input class="metric-input" placeholder="Search metrics…" autocomplete="off" spellcheck="false">
+					<datalist></datalist>
+					<span class="badge" hidden></span>
+				</div>
+				<div class="agg-fields" hidden>
+					<label>Time
+						<select class="time-agg"></select>
+					</label>
+					<label>Space
+						<select class="space-agg"></select>
+					</label>
+				</div>
+				<input class="filter-input" placeholder='Filter, e.g. service = "api"' autocomplete="off" spellcheck="false">
+				<p class="row-note hint" hidden></p>
+			</div>
+			<button type="button" class="remove-row" title="Remove this metric">&times;</button>
+		</div>
+	</template>
+
+	<script src="app.js" type="module"></script>
+</body>
+</html>

heatmap-poc/static/style.css

@@ -0,0 +1,552 @@
+:root {
+	color-scheme: dark;
+
+	--surface: #0b0d12;
+	--card: #12151d;
+	--card-head: #171b25;
+	--line: #242a38;
+	--line-soft: #1b2030;
+
+	--ink: #e6e9f0;
+	--ink-soft: #a2abbd;
+	--ink-faint: #6b7488;
+
+	--accent: #4a80c4;
+	--accent-ink: #b9d8f5;
+	--danger: #e0736b;
+	--danger-bg: #2a1618;
+
+	--cell-zero: #0e1016;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+/* the display rules below would otherwise beat the UA's [hidden] rule, and SVG
+   elements never honoured the attribute on their own */
+[hidden] {
+	display: none !important;
+}
+
+body {
+	margin: 0;
+	padding: 20px;
+	background: var(--surface);
+	color: var(--ink);
+	font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+header {
+	margin-bottom: 16px;
+}
+
+h1 {
+	margin: 0;
+	font-size: 17px;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+}
+
+h2 {
+	margin: 0;
+	font-size: 12px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--ink-soft);
+}
+
+.sub {
+	margin: 3px 0 0;
+	color: var(--ink-faint);
+}
+
+code {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 0.92em;
+	color: var(--ink-soft);
+}
+
+.layout {
+	display: grid;
+	grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+	gap: 16px;
+	align-items: start;
+}
+
+@media (max-width: 900px) {
+	.layout {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.card {
+	background: var(--card);
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.card-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 8px 12px;
+	background: var(--card-head);
+	border-bottom: 1px solid var(--line);
+}
+
+.head-tools {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.count {
+	color: var(--ink-faint);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+}
+
+/* ---------- form ---------- */
+
+.form {
+	padding: 14px;
+	display: grid;
+	gap: 14px;
+	position: sticky;
+	top: 20px;
+}
+
+label {
+	display: grid;
+	gap: 5px;
+	font-size: 12px;
+	color: var(--ink-soft);
+}
+
+label.inline {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.grid-2 {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+}
+
+input,
+select,
+textarea {
+	width: 100%;
+	padding: 6px 8px;
+	background: var(--surface);
+	color: var(--ink);
+	border: 1px solid var(--line);
+	border-radius: 5px;
+	font: inherit;
+}
+
+input[type="checkbox"] {
+	width: auto;
+	accent-color: var(--accent);
+}
+
+textarea {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	resize: vertical;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+button:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 1px;
+}
+
+fieldset {
+	margin: 0;
+	padding: 10px 12px 12px;
+	border: 1px solid var(--line);
+	border-radius: 6px;
+	display: grid;
+	gap: 10px;
+}
+
+legend {
+	padding: 0 5px;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--ink-soft);
+}
+
+button {
+	padding: 6px 12px;
+	background: var(--accent);
+	color: #fff;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	font: inherit;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+button:hover {
+	filter: brightness(1.12);
+}
+
+button.ghost {
+	background: transparent;
+	color: var(--ink-soft);
+	border-color: var(--line);
+	font-weight: 400;
+}
+
+button.ghost:hover {
+	color: var(--ink);
+	border-color: var(--ink-faint);
+	filter: none;
+}
+
+button[disabled] {
+	opacity: 0.5;
+	cursor: default;
+	filter: none;
+}
+
+.segmented {
+	display: flex;
+	gap: 2px;
+	padding: 2px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: 6px;
+}
+
+.segmented button {
+	flex: 1;
+	background: transparent;
+	color: var(--ink-soft);
+	font-weight: 400;
+}
+
+.segmented button.on {
+	background: var(--line);
+	color: var(--ink);
+}
+
+.segmented button:hover {
+	filter: none;
+	color: var(--ink);
+}
+
+.segmented.small button {
+	padding: 4px 8px;
+	font-size: 12px;
+}
+
+.hint {
+	margin: 0;
+	font-size: 11px;
+	color: var(--ink-faint);
+}
+
+.hint.warn {
+	color: var(--danger);
+}
+
+.run-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.run-row button {
+	flex: 1;
+}
+
+/* ---------- metric rows ---------- */
+
+#rows {
+	display: grid;
+	gap: 8px;
+}
+
+.metric-row {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	gap: 8px;
+	align-items: start;
+	padding: 8px;
+	background: var(--surface);
+	border: 1px solid var(--line-soft);
+	border-radius: 6px;
+}
+
+.row-name {
+	width: 20px;
+	padding-top: 6px;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-weight: 600;
+	color: var(--accent-ink);
+	text-align: center;
+}
+
+.row-body {
+	display: grid;
+	gap: 8px;
+	min-width: 0;
+}
+
+.metric-field {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+}
+
+.badge {
+	flex: none;
+	padding: 2px 6px;
+	background: var(--line);
+	border-radius: 4px;
+	font-size: 10px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--accent-ink);
+	white-space: nowrap;
+}
+
+.badge.bad {
+	background: var(--danger-bg);
+	color: var(--danger);
+}
+
+.agg-fields {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+.remove-row {
+	padding: 2px 7px;
+	background: transparent;
+	color: var(--ink-faint);
+	border-color: transparent;
+	font-size: 15px;
+	line-height: 1.2;
+}
+
+.remove-row:hover {
+	color: var(--danger);
+	filter: none;
+}
+
+/* ---------- group by chips ---------- */
+
+.chips-field {
+	display: grid;
+	gap: 6px;
+}
+
+.chips-label {
+	font-size: 12px;
+	color: var(--ink-soft);
+}
+
+.chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+}
+
+.chips:empty {
+	display: none;
+}
+
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 2px 4px 2px 8px;
+	background: var(--line);
+	border-radius: 11px;
+	font-size: 12px;
+}
+
+.chip button {
+	padding: 0 3px;
+	background: transparent;
+	color: var(--ink-faint);
+	border: 0;
+	font-size: 13px;
+	line-height: 1;
+}
+
+.chip button:hover {
+	color: var(--danger);
+	filter: none;
+}
+
+/* ---------- results ---------- */
+
+.results {
+	display: grid;
+	gap: 16px;
+	min-width: 0;
+}
+
+#banner {
+	margin: 0;
+	padding: 10px 12px;
+	background: var(--danger-bg);
+	border: 1px solid #4a2427;
+	border-radius: 8px;
+	color: var(--danger);
+	white-space: pre-wrap;
+}
+
+.chart {
+	padding: 12px;
+	overflow: auto;
+	max-height: 620px;
+}
+
+.chart svg {
+	display: block;
+}
+
+.empty {
+	margin: 0;
+	padding: 28px 0;
+	color: var(--ink-faint);
+	text-align: center;
+}
+
+.axis-label {
+	fill: var(--ink-faint);
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 10px;
+}
+
+.axis-line {
+	stroke: var(--line);
+	stroke-width: 1;
+}
+
+.cursor-cell {
+	fill: none;
+	stroke: var(--accent-ink);
+	stroke-width: 1.5;
+	pointer-events: none;
+}
+
+.legend {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 0 12px 12px;
+	color: var(--ink-faint);
+	font-size: 11px;
+}
+
+.legend:empty {
+	display: none;
+}
+
+.legend .swatches {
+	display: flex;
+	gap: 2px;
+}
+
+.legend .swatch {
+	width: 20px;
+	height: 10px;
+	border-radius: 2px;
+}
+
+.groups {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	gap: 2px 12px;
+	padding: 10px 12px;
+	max-height: 220px;
+	overflow: auto;
+}
+
+.groups label {
+	display: flex;
+	align-items: center;
+	gap: 7px;
+	min-width: 0;
+	padding: 2px 0;
+	color: var(--ink);
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.groups .name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.groups .total {
+	margin-left: auto;
+	flex: none;
+	color: var(--ink-faint);
+}
+
+.json-grid {
+	align-items: start;
+}
+
+@media (max-width: 1200px) {
+	.json-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.json {
+	margin: 0;
+	padding: 12px;
+	max-height: 420px;
+	overflow: auto;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 11px;
+	line-height: 1.55;
+	color: var(--ink-soft);
+	white-space: pre;
+	tab-size: 2;
+}
+
+.tooltip {
+	position: fixed;
+	z-index: 10;
+	max-width: 320px;
+	padding: 7px 9px;
+	background: #1c212e;
+	border: 1px solid var(--line);
+	border-radius: 6px;
+	box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 11px;
+	line-height: 1.6;
+	pointer-events: none;
+	white-space: pre;
+}
+
+.tooltip b {
+	color: var(--accent-ink);
+	font-weight: 600;
+}

pkg/contextlinks/links.go

@@ -12,32 +12,25 @@ import (
 
 // PrepareParamsForTracesV5 returns the traces explorer query params for the
 // given range and filter; the traces explorer writes its time params in
-// nanoseconds. queryType is builder_ai_query for the AI observability explorer.
-func PrepareParamsForTracesV5(start, end time.Time, whereClause string, queryType qbtypes.QueryType) url.Values {
-	return prepareExplorerParams("traces", queryType, start.UnixNano(), end.UnixNano(), whereClause)
+// nanoseconds.
+func PrepareParamsForTracesV5(start, end time.Time, whereClause string) url.Values {
+	return prepareExplorerParams("traces", start.UnixNano(), end.UnixNano(), whereClause)
 }
 
 // PrepareParamsForLogsV5 returns the logs explorer query params for the given
 // range and filter; the logs explorer writes its time params in milliseconds.
 func PrepareParamsForLogsV5(start, end time.Time, whereClause string) url.Values {
-	return prepareExplorerParams("logs", qbtypes.QueryTypeBuilder, start.UnixMilli(), end.UnixMilli(), whereClause)
+	return prepareExplorerParams("logs", start.UnixMilli(), end.UnixMilli(), whereClause)
 }
 
 // The end link is double encoded because otherwise a filter expression with `%` somewhere in it breaks.
-func prepareExplorerParams(dataSource string, queryType qbtypes.QueryType, start, end int64, whereClause string) url.Values {
-	// builder_query is the explorer default, so it is left out to keep existing links unchanged
-	builderQueryType := ""
-	if queryType != qbtypes.QueryTypeBuilder {
-		builderQueryType = queryType.StringValue()
-	}
-
+func prepareExplorerParams(dataSource string, start, end int64, whereClause string) url.Values {
 	urlData := URLShareableCompositeQuery{
 		QueryType: "builder",
 		Builder: URLShareableBuilderQuery{
 			QueryData: []LinkQuery{{
-				DataSource:       dataSource,
-				BuilderQueryType: builderQueryType,
-				Filter:           &FilterExpression{Expression: whereClause},
+				DataSource: dataSource,
+				Filter:     &FilterExpression{Expression: whereClause},
 			}},
 			QueryFormulas: make([]string, 0),
 		},
@@ -54,8 +47,7 @@ func prepareExplorerParams(dataSource string, queryType qbtypes.QueryType, start
 
 // BuilderQueryForSignal returns the filter expression and group-by keys of the
 // builder query for the given signal, or found=false when the composite query
-// has no builder query for it (e.g. PromQL or ClickHouse SQL alerts). AI trace
-// queries (builder_ai_query) count as trace builder queries.
+// has no builder query for it (e.g. PromQL or ClickHouse SQL alerts).
 // TODO(srikanthccv): re-visit this and support multiple queries.
 func BuilderQueryForSignal(queries []qbtypes.QueryEnvelope, signal telemetrytypes.Signal) (string, []qbtypes.GroupByKey, bool) {
 	switch signal {
@@ -71,7 +63,7 @@ func builderQueryForSignal[T any](queries []qbtypes.QueryEnvelope, signal teleme
 	var q qbtypes.QueryBuilderQuery[T]
 	found := false
 	for _, query := range queries {
-		if query.Type != qbtypes.QueryTypeBuilder && query.Type != qbtypes.QueryTypeBuilderAI {
+		if query.Type != qbtypes.QueryTypeBuilder {
 			continue
 		}
 		if spec, ok := query.Spec.(qbtypes.QueryBuilderQuery[T]); ok {

pkg/contextlinks/links_test.go

@@ -30,15 +30,6 @@ func TestBuilderQueryForSignal(t *testing.T) {
 		Type: qbtypes.QueryTypePromQL,
 		Spec: qbtypes.PromQuery{Name: "C"},
 	}
-	aiTraceQuery := qbtypes.QueryEnvelope{
-		Type: qbtypes.QueryTypeBuilderAI,
-		Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-			Name:    "D",
-			Signal:  telemetrytypes.SignalTraces,
-			Filter:  &qbtypes.Filter{Expression: "trace.input_tokens > 1000"},
-			GroupBy: []qbtypes.GroupByKey{{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "session.id"}}},
-		},
-	}
 
 	t.Run("logs query among mixed queries", func(t *testing.T) {
 		filterExpr, groupBy, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{promQuery, logQuery, traceQuery}, telemetrytypes.SignalLogs)
@@ -55,14 +46,6 @@ func TestBuilderQueryForSignal(t *testing.T) {
 		assert.Empty(t, groupBy)
 	})
 
-	t.Run("ai trace query counts as traces", func(t *testing.T) {
-		filterExpr, groupBy, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{logQuery, aiTraceQuery}, telemetrytypes.SignalTraces)
-		require.True(t, found)
-		assert.Equal(t, "trace.input_tokens > 1000", filterExpr)
-		require.Len(t, groupBy, 1)
-		assert.Equal(t, "session.id", groupBy[0].Name)
-	})
-
 	t.Run("no builder query for signal", func(t *testing.T) {
 		_, _, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{traceQuery}, telemetrytypes.SignalLogs)
 		assert.False(t, found)

pkg/contextlinks/types.go

@@ -13,9 +13,8 @@ type FilterExpression struct {
 // LinkQuery carries the only fields the explorer pages read from a shared
 // link; the frontend fills in the rest of the query shape with defaults.
 type LinkQuery struct {
-	DataSource       string            `json:"dataSource"`
-	BuilderQueryType string            `json:"builderQueryType,omitempty"`
-	Filter           *FilterExpression `json:"filter,omitempty"`
+	DataSource string            `json:"dataSource"`
+	Filter     *FilterExpression `json:"filter,omitempty"`
 }
 
 type URLShareableBuilderQuery struct {

pkg/identn/config.go

@@ -45,7 +45,7 @@ func newConfig() factory.Config {
 	return &Config{
 		Tokenizer: TokenizerConfig{
 			Enabled: true,
-			Headers: []string{"Authorization"},
+			Headers: []string{"Authorization", "Sec-WebSocket-Protocol"},
 		},
 		APIKeyConfig: APIKeyConfig{
 			Enabled: true,

pkg/licensing/licensing.go

@@ -33,12 +33,21 @@ type Licensing interface {
 	Delete(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) error
 	// Refresh refreshes the license state from upstream server
 	Refresh(ctx context.Context, organizationID valuer.UUID) error
+	// Checkout creates a checkout session via upstream server and returns the redirection link
+	Checkout(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error)
+	// Portal creates a portal session via upstream server and return the redirection link
+	Portal(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error)
 	// GetFeatureFlags fetches all the defined feature flags
 	GetFeatureFlags(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.Feature, error)
 
 	statsreporter.StatsCollector
 }
 
+type API interface {
+	Checkout(http.ResponseWriter, *http.Request)
+	Portal(http.ResponseWriter, *http.Request)
+}
+
 type Handler interface {
 	Create(http.ResponseWriter, *http.Request)
 

pkg/licensing/nooplicensing/api.go

@@ -0,0 +1,23 @@
+package nooplicensing
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
+)
+
+type noopLicensingAPI struct{}
+
+func NewLicenseAPI() licensing.API {
+	return &noopLicensingAPI{}
+}
+
+func (api *noopLicensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "not implemented"))
+}
+
+func (api *noopLicensingAPI) Portal(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "not implemented"))
+}

pkg/licensing/nooplicensing/provider.go

@@ -59,6 +59,14 @@ func (provider *noopLicensing) Refresh(ctx context.Context, organizationID value
 	return errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "refreshing license is not supported")
 }
 
+func (provider *noopLicensing) Checkout(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	return nil, errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "checkout session is not supported")
+}
+
+func (provider *noopLicensing) Portal(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	return nil, errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "portal session is not supported")
+}
+
 func (provider *noopLicensing) GetActive(ctx context.Context, organizationID valuer.UUID) (*licensetypes.License, error) {
 	return nil, errors.New(errors.TypeUnsupported, licensing.ErrCodeUnsupported, "fetching active license is not supported")
 }

pkg/modules/fields/implfields/handler.go

@@ -82,7 +82,6 @@ func (handler *handler) GetFieldsValues(rw http.ResponseWriter, req *http.Reques
 
 	values := &telemetrytypes.TelemetryFieldValues{
 		StringValues:  allValues.StringValues,
-		BoolValues:    allValues.BoolValues,
 		NumberValues:  allValues.NumberValues,
 		RelatedValues: relatedValues,
 	}

pkg/modules/rulestatehistory/implrulestatehistory/handler.go

@@ -114,7 +114,6 @@ func (h *handler) GetRuleHistoryTimeline(w http.ResponseWriter, r *http.Request)
 			Fingerprint:         item.Fingerprint,
 			Value:               item.Value,
 			RelatedTracesLink:   item.RelatedTracesLink,
-			RelatedAITracesLink: item.RelatedAITracesLink,
 			RelatedLogsLink:     item.RelatedLogsLink,
 		})
 	}
@@ -152,12 +151,11 @@ func (h *handler) GetRuleHistoryContributors(w http.ResponseWriter, r *http.Requ
 	converted := make([]rulestatehistorytypes.GettableRuleStateHistoryContributor, 0, len(res))
 	for _, item := range res {
 		converted = append(converted, rulestatehistorytypes.GettableRuleStateHistoryContributor{
-			Fingerprint:         item.Fingerprint,
-			Labels:              item.Labels.ToQBLabels(),
-			Count:               item.Count,
-			RelatedTracesLink:   item.RelatedTracesLink,
-			RelatedAITracesLink: item.RelatedAITracesLink,
-			RelatedLogsLink:     item.RelatedLogsLink,
+			Fingerprint:       item.Fingerprint,
+			Labels:            item.Labels.ToQBLabels(),
+			Count:             item.Count,
+			RelatedTracesLink: item.RelatedTracesLink,
+			RelatedLogsLink:   item.RelatedLogsLink,
 		})
 	}
 	render.Success(w, http.StatusOK, converted)

pkg/modules/rulestatehistory/implrulestatehistory/links.go

@@ -41,8 +41,7 @@ func (m *module) relatedLinkBuilderForRule(ctx context.Context, orgID valuer.UUI
 		return nil
 	}
 
-	signal, ok := relatedLinkSignal(rule.AlertType)
-	if !ok {
+	if rule.AlertType != ruletypes.AlertTypeLogs && rule.AlertType != ruletypes.AlertTypeTraces {
 		return nil
 	}
 	if rule.RuleCondition == nil || rule.RuleCondition.CompositeQuery == nil {
@@ -63,6 +62,10 @@ func (m *module) relatedLinkBuilderForRule(ctx context.Context, orgID valuer.UUI
 		builder.evaluation = ruletypes.RollingWindow{EvalWindow: evalWindow}
 	}
 
+	signal := telemetrytypes.SignalLogs
+	if rule.AlertType == ruletypes.AlertTypeTraces {
+		signal = telemetrytypes.SignalTraces
+	}
 	// links are still built from the labels alone when the rule has no builder
 	// query for the signal (e.g. ClickHouse SQL alerts)
 	builder.filterExpr, builder.groupBy, _ = contextlinks.BuilderQueryForSignal(rule.RuleCondition.CompositeQuery.Queries, signal)
@@ -81,35 +84,21 @@ func (b *relatedLinkBuilder) queryWindow(unixMilli int64) (time.Time, time.Time)
 	return start.Add(-3 * time.Minute), end
 }
 
-// links returns the explorer query params for the given entry labels and time
-// range.
-func (b *relatedLinkBuilder) links(labels rulestatehistorytypes.LabelsString, start, end time.Time) rulestatehistorytypes.RelatedLinks {
+// links returns the encoded logs and traces explorer query params for the
+// given entry labels and time range; at most one of the two is non-empty.
+func (b *relatedLinkBuilder) links(labels rulestatehistorytypes.LabelsString, start, end time.Time) (string, string) {
 	lbls := map[string]string{}
 	if err := json.Unmarshal([]byte(labels), &lbls); err != nil {
-		return rulestatehistorytypes.RelatedLinks{}
+		return "", ""
 	}
 
 	whereClause := contextlinks.PrepareFilterExpression(lbls, b.filterExpr, b.groupBy)
 
 	switch b.alertType {
 	case ruletypes.AlertTypeLogs:
-		return rulestatehistorytypes.RelatedLinks{RelatedLogsLink: contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode()}
+		return contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode(), ""
 	case ruletypes.AlertTypeTraces:
-		return rulestatehistorytypes.RelatedLinks{RelatedTracesLink: contextlinks.PrepareParamsForTracesV5(start, end, whereClause, qbtypes.QueryTypeBuilder).Encode()}
-	case ruletypes.AlertTypeAITraces:
-		return rulestatehistorytypes.RelatedLinks{RelatedAITracesLink: contextlinks.PrepareParamsForTracesV5(start, end, whereClause, qbtypes.QueryTypeBuilderAI).Encode()}
+		return "", contextlinks.PrepareParamsForTracesV5(start, end, whereClause).Encode()
 	}
-	return rulestatehistorytypes.RelatedLinks{}
-}
-
-// relatedLinkSignal returns the explorer signal that related links open for
-// the alert type, or ok=false when the alert type has none (e.g. metrics).
-func relatedLinkSignal(alertType ruletypes.AlertType) (telemetrytypes.Signal, bool) {
-	switch alertType {
-	case ruletypes.AlertTypeLogs:
-		return telemetrytypes.SignalLogs, true
-	case ruletypes.AlertTypeTraces, ruletypes.AlertTypeAITraces:
-		return telemetrytypes.SignalTraces, true
-	}
-	return telemetrytypes.SignalUnspecified, false
+	return "", ""
 }

pkg/modules/rulestatehistory/implrulestatehistory/module.go

@@ -34,7 +34,7 @@ func (m *module) GetHistoryTimeline(ctx context.Context, orgID valuer.UUID, rule
 	if builder := m.relatedLinkBuilderForRule(ctx, orgID, ruleID); builder != nil {
 		for idx := range items {
 			start, end := builder.queryWindow(items[idx].UnixMilli)
-			items[idx].RelatedLinks = builder.links(items[idx].Labels, start, end)
+			items[idx].RelatedLogsLink, items[idx].RelatedTracesLink = builder.links(items[idx].Labels, start, end)
 		}
 	}
 
@@ -60,7 +60,7 @@ func (m *module) GetHistoryContributors(ctx context.Context, orgID valuer.UUID,
 		// span it too instead of a single evaluation window
 		start, end := time.UnixMilli(query.Start), time.UnixMilli(query.End)
 		for idx := range contributors {
-			contributors[idx].RelatedLinks = builder.links(contributors[idx].Labels, start, end)
+			contributors[idx].RelatedLogsLink, contributors[idx].RelatedTracesLink = builder.links(contributors[idx].Labels, start, end)
 		}
 	}
 

pkg/querier/bucket_cache.go

@@ -451,7 +451,7 @@ func (bc *bucketCache) mergeBuckets(ctx context.Context, buckets []*qbtypes.Cach
 	// Merge values based on type
 	var mergedValue any
 	switch resultType {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		mergedValue = bc.mergeTimeSeriesValues(ctx, buckets)
 		// Raw and Scalar types are not cached, so no merge needed
 	}
@@ -476,14 +476,36 @@ func (bc *bucketCache) mergeTimeSeriesValues(ctx context.Context, buckets []*qbt
 	}
 	seriesMap := make(map[seriesKey]*qbtypes.TimeSeries, estimatedSeries)
 
+	decodedTimeSeriesData := make([]*qbtypes.TimeSeriesData, 0, len(buckets))
+
+	// Alias and Meta are taken from whichever cached bucket covers the latest
+	// range, and the buckets do not arrive in StartMs order, so keep the winner
+	// per AggregationBucket.Index alongside the StartMs that won it.
+	aggregationIndexToLatest := map[int]*qbtypes.AggregationBucket{}
+	aggregationIndexToLatestStartMs := map[int]uint64{}
+
 	for _, bucket := range buckets {
 		var tsData *qbtypes.TimeSeriesData
 		if err := json.Unmarshal(bucket.Value, &tsData); err != nil {
 			bc.logger.ErrorContext(ctx, "failed to unmarshal time series data", errors.Attr(err))
 			continue
 		}
+		decodedTimeSeriesData = append(decodedTimeSeriesData, tsData)
 
 		for _, aggBucket := range tsData.Aggregations {
+			if _, seen := aggregationIndexToLatest[aggBucket.Index]; !seen || bucket.StartMs >= aggregationIndexToLatestStartMs[aggBucket.Index] {
+				aggregationIndexToLatest[aggBucket.Index] = aggBucket
+				aggregationIndexToLatestStartMs[aggBucket.Index] = bucket.StartMs
+			}
+		}
+	}
+
+	mergedUpperBounds := qbtypes.MergeBucketUpperBounds(decodedTimeSeriesData...)
+
+	for _, tsData := range decodedTimeSeriesData {
+		for _, aggBucket := range tsData.Aggregations {
+			aggBucket.ReindexValuesToNewUpperBounds(mergedUpperBounds[aggBucket.Index])
+
 			for _, series := range aggBucket.Series {
 				// Create series key from labels
 				key := seriesKey{
@@ -556,10 +578,15 @@ func (bc *bucketCache) mergeTimeSeriesValues(ctx context.Context, buckets []*qbt
 			}
 		}
 
-		result.Aggregations = append(result.Aggregations, &qbtypes.AggregationBucket{
+		aggBucket := &qbtypes.AggregationBucket{
 			Index:  index,
 			Series: seriesList,
-		})
+		}
+		if latest, ok := aggregationIndexToLatest[index]; ok {
+			aggBucket.Alias = latest.Alias
+			aggBucket.Meta = latest.Meta
+		}
+		result.Aggregations = append(result.Aggregations, aggBucket)
 	}
 
 	return result
@@ -572,7 +599,7 @@ func (bc *bucketCache) isEmptyResult(result *qbtypes.Result) (isEmpty bool, isFi
 	}
 
 	switch result.Type {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
 			// No aggregations at all means truly empty
 			if len(tsData.Aggregations) == 0 {
@@ -699,14 +726,19 @@ func (bc *bucketCache) trimResultToFluxBoundary(result *qbtypes.Result, fluxBoun
 	}
 
 	switch result.Type {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		// Trim time series data
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok && tsData != nil {
 			trimmedData := &qbtypes.TimeSeriesData{}
 
 			for _, aggBucket := range tsData.Aggregations {
+				// Meta has to survive the trim: a heatmap's counts are
+				// positional against Meta.Buckets, so a cached bucket that
+				// lost its axis cannot be read back against anything.
 				trimmedBucket := &qbtypes.AggregationBucket{
 					Index: aggBucket.Index,
+					Alias: aggBucket.Alias,
+					Meta:  aggBucket.Meta,
 				}
 
 				for _, series := range aggBucket.Series {
@@ -766,7 +798,7 @@ func (bc *bucketCache) filterResultToTimeRange(result *qbtypes.Result, startMs,
 	}
 
 	switch result.Type {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
 			filteredData := &qbtypes.TimeSeriesData{
 				Aggregations: make([]*qbtypes.AggregationBucket, 0, len(tsData.Aggregations)),

pkg/querier/builder_query.go

@@ -92,6 +92,10 @@ func (q *builderQuery[T]) Fingerprint() string {
 	// This needs to include all fields that affect the query results
 	parts := []string{q.queryType.StringValue()}
 
+	// A heatmap and a time series query can share every spec field and still
+	// return different rows, so the request type has to separate their entries
+	parts = append(parts, fmt.Sprintf("requestType=%s", q.kind.StringValue()))
+
 	// Add signal type
 	parts = append(parts, fmt.Sprintf("signal=%s", q.spec.Signal.StringValue()))
 
@@ -130,6 +134,9 @@ func (q *builderQuery[T]) Fingerprint() string {
 					}
 					part += ":" + route
 				}
+				if a.HeatmapBucketing != nil {
+					part += ":" + fingerprintHeatmapBucketing(*a.HeatmapBucketing)
+				}
 				aggParts = append(aggParts, part)
 			}
 		}
@@ -185,6 +192,16 @@ func (q *builderQuery[T]) Fingerprint() string {
 	return strings.Join(parts, "&")
 }
 
+// fingerprintHeatmapBucketing captures only what changes the rows ClickHouse
+// returns, which is why LogBucketsSpec.Scale is absent: coarsening it happens in
+// postprocessing, so every scale reads one cache entry.
+func fingerprintHeatmapBucketing(b qbtypes.HeatmapBucketing) string {
+	if b.Kind == qbtypes.BucketsKindLinear {
+		return fmt.Sprintf("%s:%v:%d", b.Kind.StringValue(), b.MaxValue, b.NumBuckets)
+	}
+	return b.Kind.StringValue()
+}
+
 func fingerprintGroupByKey(gb qbtypes.GroupByKey) string {
 	return fingerprintFieldKey(gb.TelemetryFieldKey)
 }
@@ -412,7 +429,7 @@ func (q *builderQuery[T]) narrowWindowByTraceID(ctx context.Context, fromMS, toM
 func emptyResultFor(kind qbtypes.RequestType, queryName string) *qbtypes.Result {
 	var value any
 	switch kind {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		value = &qbtypes.TimeSeriesData{QueryName: queryName}
 	case qbtypes.RequestTypeScalar:
 		value = &qbtypes.ScalarData{QueryName: queryName}
@@ -465,8 +482,9 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 	queryWindow := &qbtypes.TimeRange{From: q.fromMS, To: q.toMS}
 
 	kind := q.kind
-	// all metric queries are time series then reduced if required
-	if q.spec.Signal == telemetrytypes.SignalMetrics {
+	// all metric queries are time series then reduced if required, except
+	// heatmaps, whose statement returns a row per bucket rather than per point
+	if q.spec.Signal == telemetrytypes.SignalMetrics && kind != qbtypes.RequestTypeHeatmap {
 		kind = qbtypes.RequestTypeTimeSeries
 	}
 

pkg/querier/builder_query_test.go

@@ -6,6 +6,7 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/querybuilder"
+	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/stretchr/testify/assert"
@@ -120,6 +121,170 @@ func TestBuilderQueryFingerprintQueryType(t *testing.T) {
 	assert.Empty(t, ai.Fingerprint())
 }
 
+func TestBuilderQueryFingerprintHeatmapBucketing(t *testing.T) {
+	coarseLogScale := 1
+
+	testCases := []struct {
+		description   string
+		left          *builderQuery[qbtypes.MetricAggregation]
+		right         *builderQuery[qbtypes.MetricAggregation]
+		expectedEqual bool
+	}{
+		{
+			// fingerprintHeatmapBucketing leaves LogScale out, so the two are
+			// indistinguishable here by design
+			description: "a coarser logScale reads the same cache entry",
+			left: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLog, LogScale: qbtypes.MaxLogScale, NumBuckets: qbtypes.DefaultNumBuckets},
+					}},
+				},
+			},
+			right: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLog, LogScale: qbtypes.MaxLogScale, NumBuckets: qbtypes.DefaultNumBuckets},
+					}},
+				},
+			},
+			expectedEqual: true,
+		},
+		{
+			description: "linear separates on maxValue",
+			left: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLinear, MaxValue: 500, NumBuckets: 25},
+					}},
+				},
+			},
+			right: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLinear, MaxValue: 800, NumBuckets: 25},
+					}},
+				},
+			},
+			expectedEqual: false,
+		},
+		{
+			description: "linear separates on numBuckets",
+			left: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLinear, MaxValue: 500, NumBuckets: 25},
+					}},
+				},
+			},
+			right: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLinear, MaxValue: 500, NumBuckets: 40},
+					}},
+				},
+			},
+			expectedEqual: false,
+		},
+		{
+			description: "linear and log are separate entries",
+			left: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLinear, MaxValue: 500, NumBuckets: 25},
+					}},
+				},
+			},
+			right: &builderQuery[qbtypes.MetricAggregation]{
+				queryType: qbtypes.QueryTypeBuilder,
+				kind:      qbtypes.RequestTypeHeatmap,
+				spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+					Signal: telemetrytypes.SignalMetrics,
+					Aggregations: []qbtypes.MetricAggregation{{
+						MetricName:       "system.memory.usage",
+						Type:             metrictypes.GaugeType,
+						HeatmapBucketing: &qbtypes.HeatmapBucketing{Kind: qbtypes.BucketsKindLog, LogScale: qbtypes.MaxLogScale, NumBuckets: qbtypes.DefaultNumBuckets},
+					}},
+				},
+			},
+			expectedEqual: false,
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.description, func(t *testing.T) {
+			if testCase.expectedEqual {
+				assert.Equal(t, testCase.left.Fingerprint(), testCase.right.Fingerprint())
+				return
+			}
+			assert.NotEqual(t, testCase.left.Fingerprint(), testCase.right.Fingerprint())
+		})
+	}
+
+	t.Run("a coarser scale is carried but reads the same cache entry", func(t *testing.T) {
+		finest := (&qbtypes.BucketOptions{Kind: qbtypes.BucketsKindLog, Spec: qbtypes.LogBucketsSpec{}}).ToHeatmapBucketing()
+		coarse := (&qbtypes.BucketOptions{Kind: qbtypes.BucketsKindLog, Spec: qbtypes.LogBucketsSpec{Scale: &coarseLogScale}}).ToHeatmapBucketing()
+
+		assert.NotEqual(t, finest.LogScale, coarse.LogScale)
+		assert.Equal(t, fingerprintHeatmapBucketing(finest), fingerprintHeatmapBucketing(coarse))
+	})
+
+	t.Run("a histogram folds in no bucket options at all", func(t *testing.T) {
+		// resolveHeatmapBucketing leaves histograms nil, so bucketOptions sent
+		// alongside one must not fragment its cache
+		histogram := &builderQuery[qbtypes.MetricAggregation]{
+			queryType: qbtypes.QueryTypeBuilder,
+			kind:      qbtypes.RequestTypeHeatmap,
+			spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{{
+					MetricName: "signoz_latency",
+					Type:       metrictypes.HistogramType,
+				}},
+			},
+		}
+
+		fingerprint := histogram.Fingerprint()
+		assert.NotContains(t, fingerprint, qbtypes.BucketsKindLog.StringValue())
+		assert.NotContains(t, fingerprint, qbtypes.BucketsKindLinear.StringValue())
+	})
+}
+
 func TestMakeBucketsOrder(t *testing.T) {
 	// Test that makeBuckets returns buckets in reverse chronological order by default
 	// Using milliseconds as input - need > 1 hour range to get multiple buckets

pkg/querier/consume.go

@@ -31,6 +31,11 @@ var (
 	// written clickhouse query. The column alias indcate which value is
 	// to be considered as final result (or target).
 	legacyReservedColumnTargetAliases = []string{"__result", "__value", "result", "res", "value"}
+
+	// userHeatmapBucketColumn is the alias a user written clickhouse query can
+	// give its bucket upper bound column, alongside the HeatmapBucketColumn the
+	// statement builder emits.
+	userHeatmapBucketColumn = "bucket"
 )
 
 // stripKeyAlias removes the __SELECT_KEY_<n>_ / __GROUP_BY_KEY_<n>_ prefix from a result
@@ -83,6 +88,8 @@ func consume(rows driver.Rows, kind qbtypes.RequestType, queryWindow *qbtypes.Ti
 		payload, err = readAsTimeSeries(rows, queryWindow, step, queryName)
 	case qbtypes.RequestTypeScalar:
 		payload, err = readAsScalar(rows, queryName)
+	case qbtypes.RequestTypeHeatmap:
+		payload, err = readAsHeatmap(rows, queryWindow, step, queryName)
 	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeTrace, qbtypes.RequestTypeRawStream:
 		payload, err = readAsRaw(rows, queryName)
 		// TODO: add support for other request types
@@ -112,35 +119,6 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 
 	stepMs := uint64(step.Milliseconds())
 
-	// Helper function to check if a timestamp represents a partial value
-	isPartialValue := func(timestamp int64) bool {
-		if stepMs == 0 || queryWindow == nil {
-			return false
-		}
-
-		timestampMs := uint64(timestamp)
-
-		// For the first interval, check if query start is misaligned
-		// The first complete interval starts at the first timestamp >= queryWindow.From that is aligned to step
-		firstCompleteInterval := queryWindow.From
-		if queryWindow.From%stepMs != 0 {
-			// Round up to next step boundary
-			firstCompleteInterval = ((queryWindow.From / stepMs) + 1) * stepMs
-		}
-
-		// If timestamp is before the first complete interval, it's partial
-		if timestampMs < firstCompleteInterval {
-			return true
-		}
-
-		// For the last interval, check if it would extend beyond query end
-		if timestampMs+stepMs > queryWindow.To {
-			return queryWindow.To%stepMs != 0
-		}
-
-		return false
-	}
-
 	// Pre-allocate for labels based on column count
 	lblValsCapacity := len(colNames) - 1 // -1 for timestamp
 	if lblValsCapacity < 0 {
@@ -271,7 +249,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 			series.Values = append(series.Values, &qbtypes.TimeSeriesValue{
 				Timestamp: ts,
 				Value:     val,
-				Partial:   isPartialValue(ts),
+				Partial:   isPartialValue(ts, queryWindow, stepMs),
 			})
 		}
 	}
@@ -315,6 +293,120 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	}, nil
 }
 
+func isHeatmapBucketColumn(colName string) bool {
+	name := stripKeyAlias(colName)
+	return name == qbtypes.HeatmapBucketColumn || name == userHeatmapBucketColumn
+}
+
+// readAsHeatmap folds one row per cell — (timestamp, group labels, bucket upper
+// bound, count) — into one series per group.
+func readAsHeatmap(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbtypes.Step, queryName string) (*qbtypes.TimeSeriesData, error) {
+	colTypes := rows.ColumnTypes()
+	colNames := rows.Columns()
+
+	if !slices.ContainsFunc(colNames, isHeatmapBucketColumn) {
+		// there is no heatmap bucket column so empty response is returned.
+		return &qbtypes.TimeSeriesData{QueryName: queryName}, nil
+	}
+
+	slots := make([]any, len(colTypes))
+	for i, ct := range colTypes {
+		slots[i] = reflect.New(ct.ScanType()).Interface()
+	}
+
+	stepMs := uint64(step.Milliseconds())
+
+	accumulator := newHeatmapAccumulator()
+
+	for rows.Next() {
+		if err := rows.Scan(slots...); err != nil {
+			return nil, err
+		}
+
+		var (
+			ts         int64
+			upperBound float64
+			count      float64
+			lblVals    []string
+			lblObjs    []*qbtypes.Label
+		)
+
+		for idx, ptr := range slots {
+			name := stripKeyAlias(colNames[idx])
+			value := derefValue(ptr)
+
+			if t, ok := value.(time.Time); ok {
+				ts = t.UnixMilli()
+				continue
+			}
+
+			switch name {
+			case qbtypes.HeatmapBucketColumn, userHeatmapBucketColumn:
+				upperBound = numericAsFloat(value)
+			default:
+				if aggRe.MatchString(name) || slices.Contains(legacyReservedColumnTargetAliases, name) {
+					count = numericAsFloat(value)
+					continue
+				}
+				// a nullable label column comes back as a nil any, which would
+				// otherwise key the series on the literal "<nil>"
+				if value == nil {
+					value = ""
+				}
+				lblVals = append(lblVals, fmt.Sprint(value))
+				lblObjs = append(lblObjs, &qbtypes.Label{
+					Key:   telemetrytypes.TelemetryFieldKey{Name: name},
+					Value: value,
+				})
+			}
+		}
+
+		if ts == 0 || !isValidBucketUpperBound(upperBound) || math.IsNaN(count) || math.IsInf(count, 0) {
+			continue
+		}
+		sort.Strings(lblVals)
+		labelsKey := strings.Join(lblVals, ",")
+
+		accumulator.addCell(labelsKey, lblObjs, ts, upperBound, count)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+
+	return accumulator.foldSeries(queryWindow, stepMs, queryName), nil
+}
+
+// isPartialValue reports whether the step interval starting at timestamp is only
+// partly covered by the query window, which happens when the window boundaries
+// are not step-aligned.
+func isPartialValue(timestamp int64, queryWindow *qbtypes.TimeRange, stepMs uint64) bool {
+	if stepMs == 0 || queryWindow == nil {
+		return false
+	}
+
+	timestampMs := uint64(timestamp)
+
+	// For the first interval, check if query start is misaligned
+	// The first complete interval starts at the first timestamp >= queryWindow.From that is aligned to step
+	firstCompleteInterval := queryWindow.From
+	if queryWindow.From%stepMs != 0 {
+		// Round up to next step boundary
+		firstCompleteInterval = ((queryWindow.From / stepMs) + 1) * stepMs
+	}
+
+	// If timestamp is before the first complete interval, it's partial
+	if timestampMs < firstCompleteInterval {
+		return true
+	}
+
+	// For the last interval, check if it would extend beyond query end
+	if timestampMs+stepMs > queryWindow.To {
+		return queryWindow.To%stepMs != 0
+	}
+
+	return false
+}
+
 func isNumericKind(t reflect.Type) bool {
 	if t == nil {
 		return false

pkg/querier/heatmap_accumulator.go

@@ -0,0 +1,116 @@
+package querier
+
+import (
+	"math"
+	"slices"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+// heatmapColumn maps a bucket's upper bound to the count in it, holding one
+// timestamp's cells. Keyed rather than indexed by band because the axis is only
+// known once every cell has been seen.
+type heatmapColumn map[float64]float64
+
+func isValidBucketUpperBound(upperBound float64) bool {
+	return !math.IsNaN(upperBound) && !math.IsInf(upperBound, -1)
+}
+
+// heatmapSeries accumulates one group's columns while the rows are read.
+type heatmapSeries struct {
+	labels             []*qbtypes.Label
+	columnsByTimestamp map[int64]heatmapColumn
+}
+
+// heatmapAccumulator collects cells from either reader and folds them into one
+// series per group.
+type heatmapAccumulator struct {
+	seriesByKey map[string]*heatmapSeries
+	seriesOrder []string
+	upperBounds map[float64]struct{}
+}
+
+func newHeatmapAccumulator() *heatmapAccumulator {
+	return &heatmapAccumulator{
+		seriesByKey: map[string]*heatmapSeries{},
+		upperBounds: map[float64]struct{}{},
+	}
+}
+
+// addCell files one cell under the group labelsKey identifies, keeping the
+// labels from the first cell seen for it.
+func (a *heatmapAccumulator) addCell(labelsKey string, lbls []*qbtypes.Label, ts int64, upperBound, count float64) {
+	series, ok := a.seriesByKey[labelsKey]
+	if !ok {
+		series = &heatmapSeries{labels: lbls, columnsByTimestamp: map[int64]heatmapColumn{}}
+		a.seriesByKey[labelsKey] = series
+		a.seriesOrder = append(a.seriesOrder, labelsKey)
+	}
+	if series.columnsByTimestamp[ts] == nil {
+		series.columnsByTimestamp[ts] = heatmapColumn{}
+	}
+	series.columnsByTimestamp[ts][upperBound] += count
+	if !math.IsInf(upperBound, 1) {
+		a.upperBounds[upperBound] = struct{}{}
+	}
+}
+
+// foldSeries turns the collected cells into one series per group, in the order
+// the groups first appeared.
+func (a *heatmapAccumulator) foldSeries(queryWindow *qbtypes.TimeRange, stepMs uint64, queryName string) *qbtypes.TimeSeriesData {
+	if len(a.seriesOrder) == 0 {
+		return &qbtypes.TimeSeriesData{QueryName: queryName}
+	}
+
+	upperBounds := make([]float64, 0, len(a.upperBounds))
+	for upperBound := range a.upperBounds {
+		upperBounds = append(upperBounds, upperBound)
+	}
+	slices.Sort(upperBounds)
+
+	// the index past the last upper bound is where the +Inf overflow lands
+	upperBoundToIndex := make(map[float64]int, len(upperBounds)+1)
+	for index, upperBound := range upperBounds {
+		upperBoundToIndex[upperBound] = index
+	}
+	upperBoundToIndex[math.Inf(1)] = len(upperBounds)
+
+	bucket := &qbtypes.AggregationBucket{
+		Index:  0,
+		Alias:  "__result_0",
+		Meta:   qbtypes.AggregationMeta{Buckets: upperBounds},
+		Series: make([]*qbtypes.TimeSeries, 0, len(a.seriesOrder)),
+	}
+
+	for _, labelsKey := range a.seriesOrder {
+		accumulated := a.seriesByKey[labelsKey]
+
+		timestamps := make([]int64, 0, len(accumulated.columnsByTimestamp))
+		for ts := range accumulated.columnsByTimestamp {
+			timestamps = append(timestamps, ts)
+		}
+		slices.Sort(timestamps)
+
+		series := &qbtypes.TimeSeries{
+			Labels: accumulated.labels,
+			Values: make([]*qbtypes.TimeSeriesValue, 0, len(timestamps)),
+		}
+		for _, ts := range timestamps {
+			values := make([]float64, len(upperBounds)+1)
+			for upperBound, count := range accumulated.columnsByTimestamp[ts] {
+				values[upperBoundToIndex[upperBound]] = count
+			}
+			series.Values = append(series.Values, &qbtypes.TimeSeriesValue{
+				Timestamp: ts,
+				Values:    values,
+				Partial:   isPartialValue(ts, queryWindow, stepMs),
+			})
+		}
+		bucket.Series = append(bucket.Series, series)
+	}
+
+	return &qbtypes.TimeSeriesData{
+		QueryName:    queryName,
+		Aggregations: []*qbtypes.AggregationBucket{bucket},
+	}
+}

pkg/querier/heatmap_test.go

@@ -0,0 +1,101 @@
+package querier
+
+import (
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestMergeTimeSeriesResultsUnionsHeatmapAxes(t *testing.T) {
+	// a log axis holds whichever bands the data reached, so a wide cached range
+	// and a narrow fresh one routinely disagree on which bands exist
+	cached := &qbtypes.TimeSeriesData{
+		QueryName: "A",
+		Aggregations: []*qbtypes.AggregationBucket{{
+			Index: 0,
+			Meta:  qbtypes.AggregationMeta{Buckets: []float64{1, 4, 16}},
+			Series: []*qbtypes.TimeSeries{{
+				Labels: []*qbtypes.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "host.name"}, Value: "node-1"}},
+				Values: []*qbtypes.TimeSeriesValue{{Timestamp: 1710000000000, Values: []float64{1, 2, 3, 4}}},
+			}},
+		}},
+	}
+	fresh := []*qbtypes.Result{{
+		Value: &qbtypes.TimeSeriesData{
+			QueryName: "A",
+			Aggregations: []*qbtypes.AggregationBucket{{
+				Index: 0,
+				Meta:  qbtypes.AggregationMeta{Buckets: []float64{2, 4}},
+				Series: []*qbtypes.TimeSeries{{
+					Labels: []*qbtypes.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "host.name"}, Value: "node-1"}},
+					Values: []*qbtypes.TimeSeriesValue{{Timestamp: 1710000060000, Values: []float64{5, 6, 7}}},
+				}},
+			}},
+		},
+	}}
+
+	merged := (&querier{}).mergeTimeSeriesResults(cached, fresh)
+
+	require.Len(t, merged.Aggregations, 1)
+	aggBucket := merged.Aggregations[0]
+	assert.Equal(t, []float64{1, 2, 4, 16}, aggBucket.Meta.Buckets)
+
+	require.Len(t, aggBucket.Series, 1)
+	require.Len(t, aggBucket.Series[0].Values, 2)
+	// the cached 16 band survives even though the fresh range never reached it
+	assert.Equal(t, []float64{1, 0, 2, 3, 4}, aggBucket.Series[0].Values[0].Values)
+	// and the fresh 2 band survives even though the cached range never had it
+	assert.Equal(t, []float64{0, 5, 6, 0, 7}, aggBucket.Series[0].Values[1].Values)
+}
+
+func TestTrimResultToFluxBoundaryKeepsTheHeatmapAxis(t *testing.T) {
+	cache := &bucketCache{logger: instrumentationtest.New().Logger()}
+
+	result := &qbtypes.Result{
+		Type: qbtypes.RequestTypeHeatmap,
+		Value: &qbtypes.TimeSeriesData{
+			Aggregations: []*qbtypes.AggregationBucket{{
+				Index: 0,
+				Alias: "__result_0",
+				Meta:  qbtypes.AggregationMeta{Unit: "By", Buckets: []float64{1, 2, 4}},
+				Series: []*qbtypes.TimeSeries{{
+					Values: []*qbtypes.TimeSeriesValue{
+						{Timestamp: 1710000000000, Values: []float64{1, 2, 3, 4}},
+					},
+				}},
+			}},
+		},
+	}
+
+	trimmed := cache.trimResultToFluxBoundary(result, 1710000060000)
+
+	tsData, ok := trimmed.Value.(*qbtypes.TimeSeriesData)
+	require.True(t, ok)
+	require.Len(t, tsData.Aggregations, 1)
+
+	// the counts are positional against the axis, so a cached bucket that lost
+	// Meta.Buckets would be realigned from an empty axis and collapse into the
+	// overflow slot on the way back out
+	aggBucket := tsData.Aggregations[0]
+	assert.Equal(t, []float64{1, 2, 4}, aggBucket.Meta.Buckets)
+	assert.Equal(t, "By", aggBucket.Meta.Unit)
+	assert.Equal(t, "__result_0", aggBucket.Alias)
+}
+
+func TestRealignFromAnEmptyAxisCollapsesIntoTheOverflow(t *testing.T) {
+	// pins the behaviour the trim bug exposed: with no axis to read the counts
+	// against, everything lands in the overflow slot
+	aggBucket := &qbtypes.AggregationBucket{
+		Series: []*qbtypes.TimeSeries{{
+			Values: []*qbtypes.TimeSeriesValue{{Timestamp: 1710000000000, Values: []float64{7, 8, 9, 10}}},
+		}},
+	}
+
+	aggBucket.ReindexValuesToNewUpperBounds([]float64{1, 2, 4})
+
+	assert.Equal(t, []float64{0, 0, 0, 7}, aggBucket.Series[0].Values[0].Values)
+}

pkg/querier/postprocess.go

@@ -195,6 +195,16 @@ func postProcessBuilderQuery[T any](
 	return result
 }
 
+// resolveHeatmapBucketAxis brings the bucket axis to the resolution the caller
+// asked for. Downscaling runs first so AddHeatmapBucketsWithNoCounts adds them
+// at that resolution rather than the finer one ClickHouse bucketed at.
+func resolveHeatmapBucketAxis(tsData *qbtypes.TimeSeriesData, bucketing qbtypes.HeatmapBucketing) {
+	if bucketing.Kind == qbtypes.BucketsKindLog {
+		qbtypes.DownscaleHeatmapResolution(tsData, bucketing.LogScale)
+	}
+	qbtypes.AddHeatmapBucketsWithNoCounts(tsData, bucketing)
+}
+
 // postProcessMetricQuery applies postprocessing to a metric query result.
 func postProcessMetricQuery(
 	q *querier,
@@ -216,6 +226,12 @@ func postProcessMetricQuery(
 		}
 	}
 
+	if req.RequestType == qbtypes.RequestTypeHeatmap && config.HeatmapBucketing != nil {
+		if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
+			resolveHeatmapBucketAxis(tsData, *config.HeatmapBucketing)
+		}
+	}
+
 	result = q.applySeriesLimit(result, query.Limit, query.Order)
 
 	if len(query.Functions) > 0 {
@@ -342,6 +358,19 @@ func (q *querier) applyFormulas(ctx context.Context, results map[string]*qbtypes
 				result = q.applySeriesLimit(result, formula.Limit, formula.Order)
 				results[name] = result
 			}
+		case qbtypes.RequestTypeHeatmap:
+			// The queries a formula reads were run as time series, so what
+			// arrives here is one value per group per timestamp.
+			result := q.processTimeSeriesFormula(ctx, results, formula, req)
+			if result != nil {
+				if tsData, ok := result.Value.(*qbtypes.TimeSeriesData); ok {
+					bucketing := req.BucketOptions.ToHeatmapBucketing()
+					bucketFormulaOutputAsHeatmap(tsData, bucketing)
+					resolveHeatmapBucketAxis(tsData, bucketing)
+				}
+				result = q.applySeriesLimit(result, formula.Limit, formula.Order)
+				results[name] = result
+			}
 		case qbtypes.RequestTypeScalar:
 			result := q.processScalarFormula(ctx, results, formula, req)
 			// For scalar results, apply limit by processScalarFormula itself since it needs to be applied before converting back to scalar format
@@ -410,6 +439,89 @@ func (q *querier) processTimeSeriesFormula(
 	return result
 }
 
+func bucketFormulaOutputAsHeatmap(tsData *qbtypes.TimeSeriesData, bucketing qbtypes.HeatmapBucketing) {
+	// A formula is one expression, so processTimeSeriesFormula gives it one
+	// aggregation.
+	if tsData == nil || len(tsData.Aggregations) == 0 || tsData.Aggregations[0] == nil {
+		return
+	}
+	aggBucket := tsData.Aggregations[0]
+
+	calculateUpperBound := calculateLogValueUpperBound
+	if bucketing.Kind == qbtypes.BucketsKindLinear {
+		calculateUpperBound = func(value float64) float64 {
+			return calculateLinearValueUpperBound(bucketing, value)
+		}
+	}
+
+	// +Inf is the open-above overflow rather than an upper bound of its own, and
+	// a NaN value has no bucket at all, so neither goes on the axis.
+	upperBounds := []float64{}
+	for _, series := range aggBucket.Series {
+		for _, point := range series.Values {
+			upperBound := calculateUpperBound(point.Value)
+			if !math.IsNaN(upperBound) && !math.IsInf(upperBound, 0) {
+				upperBounds = append(upperBounds, upperBound)
+			}
+		}
+	}
+	slices.Sort(upperBounds)
+	upperBounds = slices.Compact(upperBounds)
+
+	upperBoundToIndex := make(map[float64]int, len(upperBounds))
+	for index, upperBound := range upperBounds {
+		upperBoundToIndex[upperBound] = index
+	}
+
+	overflowIndex := len(upperBounds)
+	for _, series := range aggBucket.Series {
+		for _, point := range series.Values {
+			upperBound := calculateUpperBound(point.Value)
+			point.Values = make([]float64, overflowIndex+1)
+			point.Value = 0
+			switch {
+			case math.IsNaN(upperBound):
+			case math.IsInf(upperBound, 1):
+				point.Values[overflowIndex] = 1
+			default:
+				point.Values[upperBoundToIndex[upperBound]] = 1
+			}
+		}
+	}
+
+	aggBucket.Meta.Buckets = upperBounds
+}
+
+// calculateLinearValueUpperBound and calculateLogValueUpperBound are the Go side
+// of what renderLinearUpperBoundExpr and renderLogUpperBoundExpr emit, and have
+// to stay identical to them: a formula heatmap and a metric heatmap that
+// disagreed here would put their counts in different buckets.
+func calculateLinearValueUpperBound(bucketing qbtypes.HeatmapBucketing, value float64) float64 {
+	if value > bucketing.MaxValue {
+		return math.Inf(1)
+	}
+	numBuckets := float64(bucketing.NumBuckets)
+	index := math.Min(math.Max(math.Ceil(value*numBuckets/bucketing.MaxValue), 1), numBuckets)
+	return index * bucketing.MaxValue / numBuckets
+}
+
+// Like renderLogUpperBoundExpr, this reads MaxLogScale rather than the requested
+// scale: ClickHouse buckets at the finest resolution and resolveHeatmapBucketAxis
+// folds the axis down afterwards.
+func calculateLogValueUpperBound(value float64) float64 {
+	if value <= 0 {
+		return 0
+	}
+	if value <= qbtypes.MinLogUpperBound {
+		return qbtypes.MinLogUpperBound
+	}
+	if value > qbtypes.MaxLogUpperBound {
+		return math.Inf(1)
+	}
+	bucketsPerDoubling := math.Exp2(qbtypes.MaxLogScale)
+	return math.Exp2(math.Ceil(math.Log2(value)*bucketsPerDoubling) / bucketsPerDoubling)
+}
+
 func (q *querier) processScalarFormula(
 	ctx context.Context,
 	results map[string]*qbtypes.Result,
@@ -494,7 +606,7 @@ func (q *querier) processScalarFormula(
 				bucket := &qbtypes.AggregationBucket{
 					Index:  aggIdx,
 					Alias:  scalarData.Columns[colIdx].Name,
-					Meta:   scalarData.Columns[colIdx].Meta,
+					Meta:   qbtypes.AggregationMeta{Unit: scalarData.Columns[colIdx].Meta.Unit},
 					Series: make([]*qbtypes.TimeSeries, 0),
 				}
 
@@ -667,13 +779,14 @@ func convertTimeSeriesDataToScalar(tsData *qbtypes.TimeSeriesData, queryName str
 		if name == "" {
 			name = fmt.Sprintf("__result_%d", agg.Index)
 		}
-		columns = append(columns, &qbtypes.ColumnDescriptor{
+		column := &qbtypes.ColumnDescriptor{
 			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: name},
 			QueryName:         queryName,
 			AggregationIndex:  int64(agg.Index),
-			Meta:              agg.Meta,
 			Type:              qbtypes.ColumnTypeAggregation,
-		})
+		}
+		column.Meta.Unit = agg.Meta.Unit
+		columns = append(columns, column)
 	}
 
 	// Build rows.

pkg/querier/preview.go

@@ -50,7 +50,7 @@ func (q *querier) QueryRangePreview(
 		env := []qbtypes.QueryEnvelope{req.CompositeQuery.Queries[idx]}
 		ps.Warnings = append(ps.Warnings, q.adjustStepInterval(env, req.Start, req.End)...)
 
-		missingMetricQueries, metricWarnings, mErr := q.resolveMetricMetadata(ctx, orgID, env, req.Start, req.End)
+		missingMetricQueries, metricWarnings, mErr := q.resolveMetricMetadata(ctx, orgID, env, req.Start, req.End, req.RequestType, req.BucketOptions)
 		if mErr != nil {
 			// Report this query's error but keep previewing the rest.
 			ps.Error = mErr

pkg/querier/promql_heatmap.go

@@ -0,0 +1,131 @@
+package querier
+
+import (
+	"fmt"
+	"math"
+	"slices"
+	"sort"
+	"strconv"
+	"strings"
+
+	"github.com/prometheus/prometheus/model/labels"
+
+	"github.com/prometheus/prometheus/promql"
+
+	qbv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// promHistogramBucketLabel is the label a classic histogram carries its
+// cumulative upper bound on.
+const promHistogramBucketLabel = "le"
+
+// cumulativeColumn maps a bucket's upper bound to the cumulative count at it.
+// Differencing turns it into the per-band counts a heatmapColumn holds.
+type cumulativeColumn map[float64]float64
+
+// promHeatmapGroup assembles one group across the several matrix series its `le`
+// values arrive as, since differencing needs all of them.
+type promHeatmapGroup struct {
+	labels     []*qbv5.Label
+	labelsKey  string
+	cumulative map[int64]cumulativeColumn
+}
+
+// foldMatrixAsHeatmap folds a matrix of one cumulative series per (group, `le`)
+// into one series per group whose points hold a count per band.
+func foldMatrixAsHeatmap(matrix promql.Matrix, queryWindow *qbv5.TimeRange, stepMs uint64, queryName string) *qbv5.TimeSeriesData {
+	groups, groupOrder := collectCumulativeGroups(matrix)
+
+	accumulator := newHeatmapAccumulator()
+	for _, labelsKey := range groupOrder {
+		groups[labelsKey].addDifferencedCells(accumulator)
+	}
+
+	return accumulator.foldSeries(queryWindow, stepMs, queryName)
+}
+
+// collectCumulativeGroups reads the matrix into one group per label set. A series
+// without `le` has no band to sit in, so an expression that dropped the label
+// draws nothing.
+func collectCumulativeGroups(matrix promql.Matrix) (groups map[string]*promHeatmapGroup, groupOrder []string) {
+	groups = map[string]*promHeatmapGroup{}
+
+	for _, promSeries := range matrix {
+		upperBound, ok := extractBucketUpperBound(promSeries.Metric)
+		if !ok {
+			continue
+		}
+
+		lbls, labelsKey := extractHeatmapGroup(promSeries.Metric)
+		group, ok := groups[labelsKey]
+		if !ok {
+			group = &promHeatmapGroup{labels: lbls, labelsKey: labelsKey, cumulative: map[int64]cumulativeColumn{}}
+			groups[labelsKey] = group
+			groupOrder = append(groupOrder, labelsKey)
+		}
+
+		for _, point := range promSeries.Floats {
+			// skipping widens the band above onto the next upper bound that has
+			// a count, which is what lagInFrame does with an absent row
+			if math.IsNaN(point.F) || math.IsInf(point.F, 0) {
+				continue
+			}
+			if group.cumulative[point.T] == nil {
+				group.cumulative[point.T] = cumulativeColumn{}
+			}
+			group.cumulative[point.T][upperBound] = point.F
+		}
+	}
+
+	return groups, groupOrder
+}
+
+func extractBucketUpperBound(metric labels.Labels) (float64, bool) {
+	raw := metric.Get(promHistogramBucketLabel)
+	if raw == "" {
+		return 0, false
+	}
+	upperBound, err := strconv.ParseFloat(raw, 64)
+	if err != nil || !isValidBucketUpperBound(upperBound) {
+		return 0, false
+	}
+	return upperBound, true
+}
+
+// extractHeatmapGroup returns a series' group labels — everything but `le`.
+func extractHeatmapGroup(metric labels.Labels) ([]*qbv5.Label, string) {
+	lbls := make([]*qbv5.Label, 0, metric.Len())
+	pairs := make([]string, 0, metric.Len())
+
+	metric.Range(func(l labels.Label) {
+		if l.Name == promHistogramBucketLabel || excludePromLabel(l.Name) {
+			return
+		}
+		lbls = append(lbls, &qbv5.Label{
+			Key:   telemetrytypes.TelemetryFieldKey{Name: l.Name},
+			Value: l.Value,
+		})
+		pairs = append(pairs, fmt.Sprintf("%s=%s", l.Name, l.Value))
+	})
+
+	sort.Strings(pairs)
+	return lbls, strings.Join(pairs, ",")
+}
+
+// each cell is its upper bound's cumulative count minus the one below it.
+func (g *promHeatmapGroup) addDifferencedCells(accumulator *heatmapAccumulator) {
+	for ts, cumulative := range g.cumulative {
+		upperBounds := make([]float64, 0, len(cumulative))
+		for upperBound := range cumulative {
+			upperBounds = append(upperBounds, upperBound)
+		}
+		slices.Sort(upperBounds)
+
+		previous := float64(0)
+		for _, upperBound := range upperBounds {
+			accumulator.addCell(g.labelsKey, g.labels, ts, upperBound, math.Max(cumulative[upperBound]-previous, 0))
+			previous = cumulative[upperBound]
+		}
+	}
+}

pkg/querier/promql_heatmap_test.go

@@ -0,0 +1,86 @@
+package querier
+
+import (
+	"log/slog"
+	"math"
+	"testing"
+	"time"
+
+	"github.com/prometheus/prometheus/model/labels"
+	"github.com/prometheus/prometheus/promql"
+
+	qbv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// The cache key is the fingerprint alone, so two request types over one
+// expression must not produce the same one — a time series payload served to a
+// heatmap request has no axis and reads back as a single collapsed band.
+func TestFingerprintSeparatesHeatmapFromTimeSeries(t *testing.T) {
+	fingerprintFor := func(requestType qbv5.RequestType) string {
+		q := &promqlQuery{
+			logger:      slog.New(slog.DiscardHandler),
+			query:       qbv5.PromQuery{Name: "A", Query: "sum by (le) (increase(signoz_latency_bucket[5m]))", Step: qbv5.Step{Duration: time.Minute}},
+			tr:          qbv5.TimeRange{From: 1710000000000, To: 1710003600000},
+			requestType: requestType,
+		}
+		return q.Fingerprint()
+	}
+
+	heatmap := fingerprintFor(qbv5.RequestTypeHeatmap)
+	timeSeries := fingerprintFor(qbv5.RequestTypeTimeSeries)
+
+	assert.NotEmpty(t, heatmap, "a heatmap decomposes into time buckets like a time series")
+	assert.NotEqual(t, timeSeries, heatmap)
+	assert.Empty(t, fingerprintFor(qbv5.RequestTypeScalar), "a scalar result is its window's last point")
+}
+
+func TestFoldMatrixAsHeatmapClampsADecreasingCumulativeCount(t *testing.T) {
+	at := int64(1710000000000)
+
+	matrix := promql.Matrix{
+		{
+			Metric: labels.FromStrings("le", "5"),
+			Floats: []promql.FPoint{{T: at, F: 10}},
+		},
+		{
+			Metric: labels.FromStrings("le", "10"),
+			Floats: []promql.FPoint{{T: at, F: 4}},
+		},
+	}
+
+	data := foldMatrixAsHeatmap(matrix, &qbv5.TimeRange{From: 1710000000000, To: 1710000060000}, uint64(time.Minute.Milliseconds()), "A")
+	require.Len(t, data.Aggregations, 1)
+
+	// a cumulative count that went backwards would difference to -6
+	assert.Equal(t, []float64{10, 0, 0}, data.Aggregations[0].Series[0].Values[0].Values)
+}
+
+func TestFoldMatrixAsHeatmapWidensTheBandOverAMissingUpperBound(t *testing.T) {
+	at := int64(1710000000000)
+
+	matrix := promql.Matrix{
+		{
+			Metric: labels.FromStrings("le", "5"),
+			Floats: []promql.FPoint{{T: at, F: 3}},
+		},
+		{
+			Metric: labels.FromStrings("le", "10"),
+			Floats: []promql.FPoint{{T: at, F: math.NaN()}},
+		},
+		{
+			Metric: labels.FromStrings("le", "20"),
+			Floats: []promql.FPoint{{T: at, F: 30}},
+		},
+	}
+
+	data := foldMatrixAsHeatmap(matrix, &qbv5.TimeRange{From: 1710000000000, To: 1710000060000}, uint64(time.Minute.Milliseconds()), "A")
+	require.Len(t, data.Aggregations, 1)
+
+	aggregation := data.Aggregations[0]
+	// 10 carried nothing to difference against, so it is not on the axis at all
+	// and 20 differences against 5, holding what (5,10] and (10,20] would split
+	assert.Equal(t, []float64{5, 20}, aggregation.Meta.Buckets)
+	assert.Equal(t, []float64{3, 27, 0}, aggregation.Series[0].Values[0].Values)
+}

pkg/querier/promql_query.go

@@ -155,7 +155,10 @@ func (q *promqlQuery) Fingerprint() string {
 	if q.opts.serve != nil {
 		return ""
 	}
-	if q.requestType != qbv5.RequestTypeTimeSeries {
+
+	switch q.requestType {
+	case qbv5.RequestTypeTimeSeries, qbv5.RequestTypeHeatmap:
+	default:
 		return ""
 	}
 
@@ -166,6 +169,8 @@ func (q *promqlQuery) Fingerprint() string {
 	}
 	parts := []string{
 		"promql",
+		// one expression returns a different shape per request type
+		fmt.Sprintf("requestType=%s", q.requestType.StringValue()),
 		query,
 		q.query.Step.String(),
 	}
@@ -449,25 +454,52 @@ func (q *promqlQuery) Execute(ctx context.Context) (*qbv5.Result, error) {
 	return q.toResult(matrix, warnings, began, &statsMu, &rowsScanned, &bytesScanned), nil
 }
 
-// toResult converts an evaluated matrix into the v5 result shape, attaching
-// the ClickHouse scan stats accumulated during evaluation.
-func (q *promqlQuery) toResult(matrix promql.Matrix, warnings []string, began time.Time, statsMu *sync.Mutex, rowsScanned, bytesScanned *uint64) *qbv5.Result {
-	// Hide only known SigNoz storage keys: label names are user data and may
-	// legitimately start with "__" (e.g. __address__), so a blanket dunder
-	// strip mangles user labelsets. The __scope./__resource. prefixes cover
-	// every exporter version's keys.
-	excludeLabel := func(labelName string) bool {
-		return labelName == "__temporality__" ||
-			strings.HasPrefix(labelName, "__scope.") ||
-			strings.HasPrefix(labelName, "__resource.")
-	}
+// excludePromLabel hides only known SigNoz storage keys: label names are user
+// data and may legitimately start with "__" (e.g. __address__), so a blanket
+// dunder strip mangles user labelsets. The __scope./__resource. prefixes cover
+// every exporter version's keys.
+func excludePromLabel(labelName string) bool {
+	return labelName == "__temporality__" ||
+		strings.HasPrefix(labelName, "__scope.") ||
+		strings.HasPrefix(labelName, "__resource.")
+}
 
+// collectExecStats snapshots the scan counters a query accumulated. Callers take
+// it at the point they are done with the matrix, so the duration covers the
+// shaping they did.
+func collectExecStats(began time.Time, statsMu *sync.Mutex, rowsScanned, bytesScanned *uint64) qbv5.ExecStats {
+	statsMu.Lock()
+	defer statsMu.Unlock()
+	return qbv5.ExecStats{
+		RowsScanned:  *rowsScanned,
+		BytesScanned: *bytesScanned,
+		DurationMS:   uint64(time.Since(began).Milliseconds()),
+	}
+}
+
+func (q *promqlQuery) toResult(matrix promql.Matrix, warnings []string, began time.Time, statsMu *sync.Mutex, rowsScanned, bytesScanned *uint64) *qbv5.Result {
+	if q.requestType == qbv5.RequestTypeHeatmap {
+		return q.toResultForHeatmap(matrix, warnings, began, statsMu, rowsScanned, bytesScanned)
+	}
+	return q.toResultForTimeSeriesAndScalar(matrix, warnings, began, statsMu, rowsScanned, bytesScanned)
+}
+
+func (q *promqlQuery) toResultForHeatmap(matrix promql.Matrix, warnings []string, began time.Time, statsMu *sync.Mutex, rowsScanned, bytesScanned *uint64) *qbv5.Result {
+	return &qbv5.Result{
+		Type:     q.requestType,
+		Value:    foldMatrixAsHeatmap(matrix, &q.tr, uint64(q.query.Step.Milliseconds()), q.query.Name),
+		Warnings: warnings,
+		Stats:    collectExecStats(began, statsMu, rowsScanned, bytesScanned),
+	}
+}
+
+func (q *promqlQuery) toResultForTimeSeriesAndScalar(matrix promql.Matrix, warnings []string, began time.Time, statsMu *sync.Mutex, rowsScanned, bytesScanned *uint64) *qbv5.Result {
 	var series []*qbv5.TimeSeries
 	for _, v := range matrix {
 		var s qbv5.TimeSeries
 		lbls := make([]*qbv5.Label, 0, v.Metric.Len())
 		v.Metric.Range(func(l labels.Label) {
-			if excludeLabel(l.Name) {
+			if excludePromLabel(l.Name) {
 				return
 			}
 			lbls = append(lbls, &qbv5.Label{
@@ -495,13 +527,7 @@ func (q *promqlQuery) toResult(matrix promql.Matrix, warnings []string, began ti
 		series = append(series, &s)
 	}
 
-	statsMu.Lock()
-	stats := qbv5.ExecStats{
-		RowsScanned:  *rowsScanned,
-		BytesScanned: *bytesScanned,
-		DurationMS:   uint64(time.Since(began).Milliseconds()),
-	}
-	statsMu.Unlock()
+	stats := collectExecStats(began, statsMu, rowsScanned, bytesScanned)
 
 	tsData := &qbv5.TimeSeriesData{QueryName: q.query.Name}
 	// No bucket at all when nothing survived: a bucket holding no series reads

pkg/querier/querier.go

@@ -156,7 +156,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	// We need to set if it is unspecified or adjust it if value is not within recommended range
 	intervalWarnings := q.adjustStepInterval(req.CompositeQuery.Queries, req.Start, req.End)
 
-	missingMetricQueries, metricWarnings, err := q.resolveMetricMetadata(ctx, orgID, req.CompositeQuery.Queries, req.Start, req.End)
+	missingMetricQueries, metricWarnings, err := q.resolveMetricMetadata(ctx, orgID, req.CompositeQuery.Queries, req.Start, req.End, req.RequestType, req.BucketOptions)
 	if err != nil {
 		return nil, err
 	}
@@ -177,7 +177,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	preseededResults := make(map[string]any)
 	for _, name := range missingMetricQueries {
 		switch req.RequestType {
-		case qbtypes.RequestTypeTimeSeries:
+		case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 			preseededResults[name] = &qbtypes.TimeSeriesData{QueryName: name}
 		case qbtypes.RequestTypeScalar:
 			preseededResults[name] = &qbtypes.ScalarData{QueryName: name}
@@ -334,15 +334,22 @@ func (q *querier) buildQueries(
 				if missingMetricQuerySet[spec.Name] {
 					continue
 				}
+				requestType := req.RequestType
+				if requestType == qbtypes.RequestTypeHeatmap && spec.Disabled {
+					// A disabled query in a heatmap request feeds a formula, and the
+					// formula converts time series into heatmap data, so its inputs
+					// run as time series queries.
+					requestType = qbtypes.RequestTypeTimeSeries
+				}
 				spec.ShiftBy = extractShiftFromBuilderQuery(spec)
-				timeRange := adjustTimeRangeForShift(spec, qbtypes.TimeRange{From: req.Start, To: req.End}, req.RequestType)
+				timeRange := adjustTimeRangeForShift(spec, qbtypes.TimeRange{From: req.Start, To: req.End}, requestType)
 				var bq *builderQuery[qbtypes.MetricAggregation]
 
 				if spec.Source == telemetrytypes.SourceMeter {
 					event.Source = telemetrytypes.SourceMeter.StringValue()
-					bq = newBuilderQuery(q.logger, q.telemetryStore, orgID, q.meterStmtBuilder, query.Type, spec, timeRange, req.RequestType, tmplVars, builderConfig{})
+					bq = newBuilderQuery(q.logger, q.telemetryStore, orgID, q.meterStmtBuilder, query.Type, spec, timeRange, requestType, tmplVars, builderConfig{})
 				} else {
-					bq = newBuilderQuery(q.logger, q.telemetryStore, orgID, q.metricStmtBuilder, query.Type, spec, timeRange, req.RequestType, tmplVars, builderConfig{})
+					bq = newBuilderQuery(q.logger, q.telemetryStore, orgID, q.metricStmtBuilder, query.Type, spec, timeRange, requestType, tmplVars, builderConfig{})
 				}
 
 				queries[spec.Name] = bq
@@ -415,7 +422,7 @@ func (q *querier) populateQBEvent(event *qbtypes.QBEvent, queries []qbtypes.Quer
 //     resolved: never-seen metrics and dormant metrics (seen but no data in
 //     the query window).
 //   - err: Internal when a metadata fetch fails.
-func (q *querier) resolveMetricMetadata(ctx context.Context, orgID valuer.UUID, queries []qbtypes.QueryEnvelope, start, end uint64) (missingMetricQueries []string, metricWarnings []string, err error) {
+func (q *querier) resolveMetricMetadata(ctx context.Context, orgID valuer.UUID, queries []qbtypes.QueryEnvelope, start, end uint64, requestType qbtypes.RequestType, bucketOptions *qbtypes.BucketOptions) (missingMetricQueries []string, metricWarnings []string, err error) {
 	metricNames := make([]string, 0)
 	for idx := range queries {
 		if queries[idx].Type != qbtypes.QueryTypeBuilder {
@@ -465,6 +472,13 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, orgID valuer.UUID,
 					spec.Aggregations[i].Type = foundMetricType
 				}
 			}
+			// Only the enabled query is used to render the heatmap, so bucket
+			// options are only applied to the enabled query.
+			if requestType == qbtypes.RequestTypeHeatmap && !spec.Disabled {
+				if err := spec.Aggregations[i].VerifyAndApplyBucketOptions(bucketOptions); err != nil {
+					return nil, nil, err
+				}
+			}
 			if spec.Aggregations[i].Type == metrictypes.UnspecifiedType {
 				missingMetrics = append(missingMetrics, spec.Aggregations[i].MetricName)
 				continue
@@ -679,7 +693,7 @@ func (q *querier) run(
 			if val, ok := result.Value.(*qbtypes.RawData); ok && val != nil {
 				return len(val.Rows) != 0
 			}
-		case qbtypes.RequestTypeTimeSeries:
+		case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 			if val, ok := result.Value.(*qbtypes.TimeSeriesData); ok && val != nil {
 				if len(val.Aggregations) != 0 {
 					anyNonEmpty := false
@@ -1000,7 +1014,7 @@ func (q *querier) mergeResults(cached *qbtypes.Result, fresh []*qbtypes.Result)
 
 		// Merge all fresh results including the first one
 		switch merged.Type {
-		case qbtypes.RequestTypeTimeSeries:
+		case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 			// Pass nil as cached value to ensure proper merging of all fresh results
 			merged.Value = q.mergeTimeSeriesResults(nil, fresh)
 		}
@@ -1023,7 +1037,7 @@ func (q *querier) mergeResults(cached *qbtypes.Result, fresh []*qbtypes.Result)
 	}
 
 	switch merged.Type {
-	case qbtypes.RequestTypeTimeSeries:
+	case qbtypes.RequestTypeTimeSeries, qbtypes.RequestTypeHeatmap:
 		merged.Value = q.mergeTimeSeriesResults(cached.Value.(*qbtypes.TimeSeriesData), fresh)
 	}
 
@@ -1044,6 +1058,16 @@ func (q *querier) mergeResults(cached *qbtypes.Result, fresh []*qbtypes.Result)
 	return merged
 }
 
+func mergeBucketUpperBounds(cachedValue *qbtypes.TimeSeriesData, freshResults []*qbtypes.Result) map[int][]float64 {
+	upperBoundSources := make([]*qbtypes.TimeSeriesData, 0, len(freshResults)+1)
+	upperBoundSources = append(upperBoundSources, cachedValue)
+	for _, result := range freshResults {
+		freshTS, _ := result.Value.(*qbtypes.TimeSeriesData)
+		upperBoundSources = append(upperBoundSources, freshTS)
+	}
+	return qbtypes.MergeBucketUpperBounds(upperBoundSources...)
+}
+
 // mergeTimeSeriesResults merges time series data.
 func (q *querier) mergeTimeSeriesResults(cachedValue *qbtypes.TimeSeriesData, freshResults []*qbtypes.Result) *qbtypes.TimeSeriesData {
 
@@ -1052,12 +1076,15 @@ func (q *querier) mergeTimeSeriesResults(cachedValue *qbtypes.TimeSeriesData, fr
 	// Map to store aggregation bucket metadata
 	bucketMetadata := make(map[int]*qbtypes.AggregationBucket)
 
+	mergedUpperBounds := mergeBucketUpperBounds(cachedValue, freshResults)
+
 	// Process cached data if available
 	if cachedValue != nil && cachedValue.Aggregations != nil {
 		for _, aggBucket := range cachedValue.Aggregations {
 			if seriesMap[aggBucket.Index] == nil {
 				seriesMap[aggBucket.Index] = make(map[string]*qbtypes.TimeSeries)
 			}
+			aggBucket.ReindexValuesToNewUpperBounds(mergedUpperBounds[aggBucket.Index])
 			if bucketMetadata[aggBucket.Index] == nil {
 				bucketMetadata[aggBucket.Index] = aggBucket
 			}
@@ -1109,6 +1136,7 @@ func (q *querier) mergeTimeSeriesResults(cachedValue *qbtypes.TimeSeriesData, fr
 		}
 
 		for _, aggBucket := range freshTS.Aggregations {
+			aggBucket.ReindexValuesToNewUpperBounds(mergedUpperBounds[aggBucket.Index])
 			for _, series := range aggBucket.Series {
 				key := qbtypes.GetUniqueSeriesKey(series.Labels)
 

pkg/query-service/app/clickhouseReader/query_progress/inmemory_tracker.go

@@ -0,0 +1,243 @@
+package queryprogress
+
+import (
+	"fmt"
+	"log/slog"
+	"sync"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/google/uuid"
+	"golang.org/x/exp/maps"
+)
+
+// tracks progress and manages subscriptions for all queries
+type inMemoryQueryProgressTracker struct {
+	logger  *slog.Logger
+	queries map[string]*queryTracker
+	lock    sync.RWMutex
+}
+
+func (tracker *inMemoryQueryProgressTracker) ReportQueryStarted(
+	queryId string,
+) (postQueryCleanup func(), apiErr *model.ApiError) {
+	tracker.lock.Lock()
+	defer tracker.lock.Unlock()
+
+	_, exists := tracker.queries[queryId]
+	if exists {
+		return nil, model.BadRequest(fmt.Errorf(
+			"query %s already started", queryId,
+		))
+	}
+
+	tracker.queries[queryId] = newQueryTracker(tracker.logger, queryId)
+
+	return func() {
+		tracker.onQueryFinished(queryId)
+	}, nil
+}
+
+func (tracker *inMemoryQueryProgressTracker) ReportQueryProgress(
+	queryId string, chProgress *clickhouse.Progress,
+) *model.ApiError {
+	queryTracker, err := tracker.getQueryTracker(queryId)
+	if err != nil {
+		return err
+	}
+
+	queryTracker.handleProgressUpdate(chProgress)
+	return nil
+}
+
+func (tracker *inMemoryQueryProgressTracker) SubscribeToQueryProgress(
+	queryId string,
+) (<-chan model.QueryProgress, func(), *model.ApiError) {
+	queryTracker, err := tracker.getQueryTracker(queryId)
+	if err != nil {
+		return nil, nil, err
+	}
+
+	return queryTracker.subscribe()
+}
+
+func (tracker *inMemoryQueryProgressTracker) onQueryFinished(
+	queryId string,
+) {
+	tracker.lock.Lock()
+	queryTracker := tracker.queries[queryId]
+	if queryTracker != nil {
+		delete(tracker.queries, queryId)
+	}
+	tracker.lock.Unlock()
+
+	if queryTracker != nil {
+		queryTracker.onFinished()
+	}
+}
+
+func (tracker *inMemoryQueryProgressTracker) getQueryTracker(
+	queryId string,
+) (*queryTracker, *model.ApiError) {
+	tracker.lock.RLock()
+	defer tracker.lock.RUnlock()
+
+	queryTracker := tracker.queries[queryId]
+	if queryTracker == nil {
+		return nil, model.NotFoundError(fmt.Errorf(
+			"query %s doesn't exist", queryId,
+		))
+	}
+
+	return queryTracker, nil
+}
+
+// Tracks progress and manages subscriptions for a single query
+type queryTracker struct {
+	logger     *slog.Logger
+	queryId    string
+	isFinished bool
+
+	progress      *model.QueryProgress
+	subscriptions map[string]*queryProgressSubscription
+
+	lock sync.Mutex
+}
+
+func newQueryTracker(logger *slog.Logger, queryId string) *queryTracker {
+	return &queryTracker{
+		logger:        logger,
+		queryId:       queryId,
+		subscriptions: map[string]*queryProgressSubscription{},
+	}
+}
+
+func (qt *queryTracker) handleProgressUpdate(p *clickhouse.Progress) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Warn("received clickhouse progress update for finished query", "queryId", qt.queryId, "progress", p)
+		return
+	}
+
+	if qt.progress == nil {
+		// This is the first update
+		qt.progress = &model.QueryProgress{}
+	}
+	updateQueryProgress(qt.progress, p)
+
+	// broadcast latest state to all subscribers.
+	for _, sub := range maps.Values(qt.subscriptions) {
+		sub.send(*qt.progress)
+	}
+}
+
+func (qt *queryTracker) subscribe() (
+	<-chan model.QueryProgress, func(), *model.ApiError,
+) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		return nil, nil, model.NotFoundError(fmt.Errorf(
+			"query %s already finished", qt.queryId,
+		))
+	}
+
+	subscriberId := uuid.NewString()
+	subscription := newQueryProgressSubscription(qt.logger)
+	qt.subscriptions[subscriberId] = subscription
+
+	if qt.progress != nil {
+		subscription.send(*qt.progress)
+	}
+
+	return subscription.ch, func() {
+		qt.unsubscribe(subscriberId)
+	}, nil
+}
+
+func (qt *queryTracker) unsubscribe(subscriberId string) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Debug("received unsubscribe request after query finished", "subscriber", subscriberId, "queryId", qt.queryId)
+		return
+	}
+
+	subscription := qt.subscriptions[subscriberId]
+	if subscription != nil {
+		subscription.close()
+		delete(qt.subscriptions, subscriberId)
+	}
+}
+
+func (qt *queryTracker) onFinished() {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Warn("receiver query finish report after query finished", "queryId", qt.queryId)
+		return
+	}
+
+	for subId, sub := range qt.subscriptions {
+		sub.close()
+		delete(qt.subscriptions, subId)
+	}
+
+	qt.isFinished = true
+}
+
+type queryProgressSubscription struct {
+	logger   *slog.Logger
+	ch       chan model.QueryProgress
+	isClosed bool
+	lock     sync.Mutex
+}
+
+func newQueryProgressSubscription(logger *slog.Logger) *queryProgressSubscription {
+	ch := make(chan model.QueryProgress, 1000)
+	return &queryProgressSubscription{
+		logger: logger,
+		ch:     ch,
+	}
+}
+
+// Must not block or panic in any scenario
+func (ch *queryProgressSubscription) send(progress model.QueryProgress) {
+	ch.lock.Lock()
+	defer ch.lock.Unlock()
+
+	if ch.isClosed {
+		ch.logger.Error("can't send query progress: channel already closed.", "progress", progress)
+		return
+	}
+
+	// subscription channels are expected to have big enough buffers to ensure
+	// blocking while sending doesn't happen in the happy path
+	select {
+	case ch.ch <- progress:
+		ch.logger.Debug("published query progress", "progress", progress)
+	default:
+		ch.logger.Error("couldn't publish query progress. dropping update.", "progress", progress)
+	}
+}
+
+func (ch *queryProgressSubscription) close() {
+	ch.lock.Lock()
+	defer ch.lock.Unlock()
+
+	if !ch.isClosed {
+		close(ch.ch)
+		ch.isClosed = true
+	}
+}
+
+func updateQueryProgress(qp *model.QueryProgress, chProgress *clickhouse.Progress) {
+	qp.ReadRows += chProgress.Rows
+	qp.ReadBytes += chProgress.Bytes
+	qp.ElapsedMs += uint64(chProgress.Elapsed.Milliseconds())
+}

pkg/query-service/app/clickhouseReader/query_progress/tracker.go

@@ -0,0 +1,33 @@
+package queryprogress
+
+import (
+	"log/slog"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+)
+
+type QueryProgressTracker interface {
+	// Tells the tracker that query with id `queryId` has started.
+	// Progress can only be reported for and tracked for a query that is in progress.
+	// Returns a cleanup function that must be called after the query finishes.
+	ReportQueryStarted(queryId string) (postQueryCleanup func(), apiErr *model.ApiError)
+
+	// Report progress stats received from clickhouse for `queryId`
+	ReportQueryProgress(queryId string, chProgress *clickhouse.Progress) *model.ApiError
+
+	// Subscribe to progress updates for `queryId`
+	// The returned channel will produce `QueryProgress` instances representing
+	// the latest state of query progress stats. Also returns a function that
+	// can be called to unsubscribe before the query finishes, if needed.
+	SubscribeToQueryProgress(queryId string) (ch <-chan model.QueryProgress, unsubscribe func(), apiErr *model.ApiError)
+}
+
+func NewQueryProgressTracker(logger *slog.Logger) QueryProgressTracker {
+	// InMemory tracker is useful only for single replica query service setups.
+	// Multi replica setups must use a centralized store for tracking and subscribing to query progress
+	return &inMemoryQueryProgressTracker{
+		logger:  logger,
+		queries: map[string]*queryTracker{},
+	}
+}

pkg/query-service/app/clickhouseReader/query_progress/tracker_test.go

@@ -0,0 +1,102 @@
+package queryprogress
+
+import (
+	"log/slog"
+	"testing"
+	"time"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/stretchr/testify/require"
+)
+
+func TestQueryProgressTracking(t *testing.T) {
+	require := require.New(t)
+
+	tracker := NewQueryProgressTracker(slog.Default())
+
+	testQueryId := "test-query"
+
+	testProgress := &clickhouse.Progress{}
+	err := tracker.ReportQueryProgress(testQueryId, testProgress)
+	require.NotNil(err, "shouldn't be able to report query progress before query has been started")
+	require.Equal(err.Type(), model.ErrorNotFound)
+
+	ch, unsubscribe, err := tracker.SubscribeToQueryProgress(testQueryId)
+	require.NotNil(err, "shouldn't be able to subscribe for progress updates before query has been started")
+	require.Equal(err.Type(), model.ErrorNotFound)
+	require.Nil(ch)
+	require.Nil(unsubscribe)
+
+	reportQueryFinished, err := tracker.ReportQueryStarted(testQueryId)
+	require.Nil(err, "should be able to report start of a query to be tracked")
+
+	testProgress1 := &clickhouse.Progress{
+		Rows:      10,
+		Bytes:     20,
+		TotalRows: 100,
+		Elapsed:   20 * time.Millisecond,
+	}
+	err = tracker.ReportQueryProgress(testQueryId, testProgress1)
+	require.Nil(err, "should be able to report progress after query has started")
+
+	ch, unsubscribe, err = tracker.SubscribeToQueryProgress(testQueryId)
+	require.Nil(err, "should be able to subscribe to query progress updates after query started")
+	require.NotNil(ch)
+	require.NotNil(unsubscribe)
+
+	expectedProgress := model.QueryProgress{}
+	updateQueryProgress(&expectedProgress, testProgress1)
+	require.Equal(expectedProgress.ReadRows, testProgress1.Rows)
+	select {
+	case qp := <-ch:
+		require.Equal(qp, expectedProgress)
+	default:
+		require.Fail("should receive latest query progress state immediately after subscription")
+	}
+	select {
+	case _ = <-ch:
+		require.Fail("should have had only one pending update at this point")
+	default:
+	}
+
+	testProgress2 := &clickhouse.Progress{
+		Rows:      20,
+		Bytes:     40,
+		TotalRows: 100,
+		Elapsed:   40 * time.Millisecond,
+	}
+	err = tracker.ReportQueryProgress(testQueryId, testProgress2)
+	require.Nil(err, "should be able to report progress multiple times while query is in progress")
+
+	updateQueryProgress(&expectedProgress, testProgress2)
+	select {
+	case qp := <-ch:
+		require.Equal(qp, expectedProgress)
+	default:
+		require.Fail("should receive updates whenever new progress updates get reported to tracker")
+	}
+	select {
+	case _ = <-ch:
+		require.Fail("should have had only one pending update at this point")
+	default:
+	}
+
+	reportQueryFinished()
+	select {
+	case _, isSubscriptionChannelOpen := <-ch:
+		require.False(isSubscriptionChannelOpen, "subscription channels should get closed after query finishes")
+	default:
+		require.Fail("subscription channels should get closed after query finishes")
+	}
+
+	err = tracker.ReportQueryProgress(testQueryId, testProgress)
+	require.NotNil(err, "shouldn't be able to report query progress after query has finished")
+	require.Equal(err.Type(), model.ErrorNotFound)
+
+	ch, unsubscribe, err = tracker.SubscribeToQueryProgress(testQueryId)
+	require.NotNil(err, "shouldn't be able to subscribe for progress updates after query has finished")
+	require.Equal(err.Type(), model.ErrorNotFound)
+	require.Nil(ch)
+	require.Nil(unsubscribe)
+}

pkg/query-service/app/clickhouseReader/reader.go

@@ -44,6 +44,7 @@ import (
 
 	"log/slog"
 
+	queryprogress "github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader/query_progress"
 	"github.com/SigNoz/signoz/pkg/query-service/app/resource"
 	"github.com/SigNoz/signoz/pkg/query-service/app/services"
 	"github.com/SigNoz/signoz/pkg/query-service/app/traces/smart"
@@ -144,6 +145,7 @@ type ClickHouseReader struct {
 	logsResourceKeys        string
 	logsTagAttributeTableV2 string
 	logger                  *slog.Logger
+	queryProgressTracker    queryprogress.QueryProgressTracker
 
 	logsTableV2              string
 	logsLocalTableV2         string
@@ -212,6 +214,7 @@ func NewReader(
 		logsTagAttributeTableV2:  options.primary.LogsTagAttributeTableV2,
 		liveTailRefreshSeconds:   options.primary.LiveTailRefreshSeconds,
 		cluster:                  cluster,
+		queryProgressTracker:     queryprogress.NewQueryProgressTracker(logger),
 		logsTableV2:              options.primary.LogsTableV2,
 		logsLocalTableV2:         options.primary.LogsLocalTableV2,
 		logsResourceTableV2:      options.primary.LogsResourceTableV2,
@@ -4021,6 +4024,27 @@ func (r *ClickHouseReader) GetTimeSeriesResultV3(ctx context.Context, query stri
 		instrumentationtypes.CodeNamespace:    "clickhouse-reader",
 		instrumentationtypes.CodeFunctionName: "GetTimeSeriesResultV3",
 	})
+	// Hook up query progress reporting if requested.
+	queryId := ctx.Value("queryId")
+	if queryId != nil {
+		qid, ok := queryId.(string)
+		if !ok {
+			r.logger.Error("GetTimeSeriesResultV3: queryId in ctx not a string as expected", "queryId", queryId)
+
+		} else {
+			ctx = clickhouse.Context(ctx, clickhouse.WithProgress(
+				func(p *clickhouse.Progress) {
+					go func() {
+						err := r.queryProgressTracker.ReportQueryProgress(qid, p)
+						if err != nil {
+							r.logger.Error("Couldn't report query progress", "queryId", qid, errorsV2.Attr(err))
+						}
+					}()
+				},
+			))
+		}
+	}
+
 	rows, err := r.db.Query(ctx, query)
 
 	if err != nil {
@@ -4981,6 +5005,18 @@ func (r *ClickHouseReader) GetMinAndMaxTimestampForTraceID(ctx context.Context,
 	return minTime.UnixNano(), maxTime.UnixNano(), nil
 }
 
+func (r *ClickHouseReader) ReportQueryStartForProgressTracking(
+	queryId string,
+) (func(), *model.ApiError) {
+	return r.queryProgressTracker.ReportQueryStarted(queryId)
+}
+
+func (r *ClickHouseReader) SubscribeToQueryProgress(
+	queryId string,
+) (<-chan model.QueryProgress, func(), *model.ApiError) {
+	return r.queryProgressTracker.SubscribeToQueryProgress(queryId)
+}
+
 func (r *ClickHouseReader) UpdateMetricsMetadata(ctx context.Context, orgID valuer.UUID, req *model.UpdateMetricsMetadata) *model.ApiError {
 	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
 		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalMetrics.StringValue(),

pkg/query-service/app/http_handler.go

@@ -30,12 +30,14 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 
 	"github.com/gorilla/mux"
+	"github.com/gorilla/websocket"
 	jsoniter "github.com/json-iterator/go"
 	_ "modernc.org/sqlite"
 
@@ -114,6 +116,11 @@ type APIHandler struct {
 	// is registers.
 	SetupCompleted bool
 
+	// Websocket connection upgrader
+	Upgrader *websocket.Upgrader
+
+	LicensingAPI licensing.API
+
 	QueryParserAPI *queryparser.API
 
 	Signoz *signoz.SigNoz
@@ -132,6 +139,8 @@ type APIHandlerOpts struct {
 	// Flux Interval
 	FluxInterval time.Duration
 
+	LicensingAPI licensing.API
+
 	QueryParserAPI *queryparser.API
 
 	Signoz *signoz.SigNoz
@@ -167,6 +176,7 @@ func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, erro
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		querier:                       querier,
 		querierV2:                     querierv2,
+		LicensingAPI:                  opts.LicensingAPI,
 		Signoz:                        opts.Signoz,
 		QueryParserAPI:                opts.QueryParserAPI,
 	}
@@ -203,6 +213,12 @@ func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, erro
 		aH.SetupCompleted = true
 	}
 
+	aH.Upgrader = &websocket.Upgrader{
+		CheckOrigin: func(r *http.Request) bool {
+			return true
+		},
+	}
+
 	return aH, nil
 }
 
@@ -344,10 +360,18 @@ func (aH *APIHandler) RegisterQueryRangeV3Routes(router *mux.Router, am *middlew
 
 	subRouter.HandleFunc("/filter_suggestions", am.ViewAccess(aH.getQueryBuilderSuggestions)).Methods(http.MethodGet)
 
+	// TODO(Raj): Remove this handler after /ws based path has been completely rolled out.
+	subRouter.HandleFunc("/query_progress", am.ViewAccess(aH.GetQueryProgressUpdates)).Methods(http.MethodGet)
+
 	// live logs
 	subRouter.HandleFunc("/logs/livetail", am.ViewAccess(aH.Signoz.Handlers.QuerierHandler.QueryRawStream)).Methods(http.MethodGet)
 }
 
+func (aH *APIHandler) RegisterWebSocketPaths(router *mux.Router, am *middleware.AuthZ) {
+	subRouter := router.PathPrefix("/ws").Subrouter()
+	subRouter.HandleFunc("/query_progress", am.ViewAccess(aH.GetQueryProgressUpdates)).Methods(http.MethodGet)
+}
+
 func (aH *APIHandler) RegisterQueryRangeV4Routes(router *mux.Router, am *middleware.AuthZ) {
 	subRouter := router.PathPrefix("/api/v4").Subrouter()
 	subRouter.HandleFunc("/query_range", am.ViewAccess(aH.QueryRangeV4)).Methods(http.MethodPost)
@@ -830,12 +854,12 @@ func (aH *APIHandler) getRuleStateHistory(w http.ResponseWriter, r *http.Request
 				whereClause := contextlinks.PrepareFilterExpression(lbls, filterExpr, q.GroupBy)
 
 				res.Items[idx].RelatedLogsLink = contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode()
-			} else if rule.AlertType == ruletypes.AlertTypeTraces || rule.AlertType == ruletypes.AlertTypeAITraces {
+			} else if rule.AlertType == ruletypes.AlertTypeTraces {
 				// TODO(srikanthccv): re-visit this and support multiple queries
 				var q qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]
 
 				for _, query := range rule.RuleCondition.CompositeQuery.Queries {
-					if query.Type == qbtypes.QueryTypeBuilder || query.Type == qbtypes.QueryTypeBuilderAI {
+					if query.Type == qbtypes.QueryTypeBuilder {
 						switch spec := query.Spec.(type) {
 						case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
 							q = spec
@@ -849,7 +873,7 @@ func (aH *APIHandler) getRuleStateHistory(w http.ResponseWriter, r *http.Request
 				}
 
 				whereClause := contextlinks.PrepareFilterExpression(lbls, filterExpr, q.GroupBy)
-				res.Items[idx].RelatedTracesLink = contextlinks.PrepareParamsForTracesV5(start, end, whereClause, rule.AlertType.BuilderQueryType()).Encode()
+				res.Items[idx].RelatedTracesLink = contextlinks.PrepareParamsForTracesV5(start, end, whereClause).Encode()
 			}
 		}
 	}
@@ -3527,6 +3551,27 @@ func (aH *APIHandler) queryRangeV3(ctx context.Context, queryRangeParams *v3.Que
 		}
 	}
 
+	// Hook up query progress tracking if requested
+	queryIdHeader := r.Header.Get("X-SIGNOZ-QUERY-ID")
+	if len(queryIdHeader) > 0 {
+		onQueryFinished, apiErr := aH.reader.ReportQueryStartForProgressTracking(queryIdHeader)
+
+		if apiErr != nil {
+			aH.logger.ErrorContext(ctx, "failed to report query start for progress tracking",
+				"query_id", queryIdHeader, errors.Attr(apiErr),
+			)
+
+		} else {
+			// Adding queryId to the context signals clickhouse queries to report progress
+			//lint:ignore SA1029 ignore for now
+			ctx = context.WithValue(ctx, "queryId", queryIdHeader)
+
+			defer func() {
+				go onQueryFinished()
+			}()
+		}
+	}
+
 	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
 		instrumentationtypes.CodeNamespace:    "app",
 		instrumentationtypes.CodeFunctionName: "QueryRange",
@@ -3708,6 +3753,73 @@ func (aH *APIHandler) QueryRangeV3(w http.ResponseWriter, r *http.Request) {
 	aH.queryRangeV3(r.Context(), queryRangeParams, w, r)
 }
 
+func (aH *APIHandler) GetQueryProgressUpdates(w http.ResponseWriter, r *http.Request) {
+	// Upgrade connection to websocket, sending back the requested protocol
+	// value for sec-websocket-protocol
+	//
+	// Since js websocket API doesn't allow setting headers, this header is often
+	// used for passing auth tokens. As per websocket spec the connection will only
+	// succeed if the requested `Sec-Websocket-Protocol` is sent back as a header
+	// in the upgrade response (signifying that the protocol is supported by the server).
+	upgradeResponseHeaders := http.Header{}
+	requestedProtocol := r.Header.Get("Sec-WebSocket-Protocol")
+	if len(requestedProtocol) > 0 {
+		upgradeResponseHeaders.Add("Sec-WebSocket-Protocol", requestedProtocol)
+	}
+
+	c, err := aH.Upgrader.Upgrade(w, r, upgradeResponseHeaders)
+	if err != nil {
+		RespondError(w, model.InternalError(fmt.Errorf(
+			"couldn't upgrade connection: %w", err,
+		)), nil)
+		return
+	}
+	defer c.Close()
+
+	// Websocket upgrade complete. Subscribe to query progress and send updates to client
+	//
+	// Note: we handle any subscription problems (queryId query param missing or query already complete etc)
+	// after the websocket connection upgrade by closing the channel.
+	// The other option would be to handle the errors before websocket upgrade by sending an
+	// error response instead of the upgrade response, but that leads to a generic websocket
+	// connection failure on the client.
+
+	queryId := r.URL.Query().Get("q")
+
+	progressCh, unsubscribe, apiErr := aH.reader.SubscribeToQueryProgress(queryId)
+	if apiErr != nil {
+		// Shouldn't happen unless query progress requested after query finished
+		aH.logger.WarnContext(r.Context(), "failed to subscribe to query progress",
+			"query_id", queryId, errors.Attr(apiErr),
+		)
+		return
+	}
+	defer func() { go unsubscribe() }()
+
+	for queryProgress := range progressCh {
+		msg, err := json.Marshal(queryProgress)
+		if err != nil {
+			aH.logger.ErrorContext(r.Context(), "failed to serialize progress message",
+				"query_id", queryId, "progress", queryProgress, errors.Attr(err),
+			)
+			continue
+		}
+
+		err = c.WriteMessage(websocket.TextMessage, msg)
+		if err != nil {
+			aH.logger.ErrorContext(r.Context(), "failed to write progress message to websocket",
+				"query_id", queryId, "msg", string(msg), errors.Attr(err),
+			)
+			break
+
+		} else {
+			aH.logger.DebugContext(r.Context(), "wrote progress message to websocket",
+				"query_id", queryId, "msg", string(msg),
+			)
+		}
+	}
+}
+
 func (aH *APIHandler) getMetricMetadata(w http.ResponseWriter, r *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(r.Context())
 	if err != nil {

pkg/query-service/app/server.go

@@ -16,6 +16,7 @@ import (
 	"github.com/soheilhy/cmux"
 
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	"github.com/SigNoz/signoz/pkg/licensing/nooplicensing"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
@@ -83,6 +84,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		IntegrationsController:        integrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
+		LicensingAPI:                  nooplicensing.NewLicenseAPI(),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
 	}, config)
@@ -164,6 +166,7 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 	api.RegisterLogsRoutes(r, am)
 	api.RegisterIntegrationRoutes(r, am)
 	api.RegisterQueryRangeV3Routes(r, am)
+	api.RegisterWebSocketPaths(r, am)
 	api.RegisterQueryRangeV4Routes(r, am)
 	api.RegisterMessagingQueuesRoutes(r, am)
 	api.RegisterThirdPartyApiRoutes(r, am)
@@ -177,7 +180,7 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
 	})
 
 	handler := c.Handler(r)

pkg/query-service/interfaces/interface.go

@@ -91,6 +91,10 @@ type Reader interface {
 
 	GetMinAndMaxTimestampForTraceID(ctx context.Context, traceID []string) (int64, int64, error)
 
+	// Query Progress tracking helpers.
+	ReportQueryStartForProgressTracking(queryId string) (reportQueryFinished func(), apiErr *model.ApiError)
+	SubscribeToQueryProgress(queryId string) (<-chan model.QueryProgress, func(), *model.ApiError)
+
 	//trace
 	GetTraceFields(ctx context.Context) (*model.GetFieldsResponse, *model.ApiError)
 	UpdateTraceField(ctx context.Context, field *model.UpdateField) *model.ApiError

pkg/query-service/model/logs.go

@@ -7,6 +7,14 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 )
 
+type QueryProgress struct {
+	ReadRows uint64 `json:"read_rows"`
+
+	ReadBytes uint64 `json:"read_bytes"`
+
+	ElapsedMs uint64 `json:"elapsed_ms"`
+}
+
 func GetLogFieldsV3(ctx context.Context, queryRangeParams *v3.QueryRangeParamsV3, fields *GetFieldsResponse) map[string]v3.AttributeKey {
 	data := map[string]v3.AttributeKey{}
 	for _, query := range queryRangeParams.CompositeQuery.BuilderQueries {

pkg/query-service/rules/base_rule.go

@@ -420,7 +420,7 @@ func (r *BaseRule) ShouldSkipNewGroups() bool {
 func (r *BaseRule) isFilterNewSeriesSupported() bool {
 	if r.ruleCondition.CompositeQuery.QueryType == ruletypes.QueryTypeBuilder {
 		for _, query := range r.ruleCondition.CompositeQuery.Queries {
-			if query.Type != qbtypes.QueryTypeBuilder && query.Type != qbtypes.QueryTypeBuilderAI {
+			if query.Type != qbtypes.QueryTypeBuilder {
 				continue
 			}
 			switch query.Spec.(type) {

pkg/query-service/rules/base_rule_test.go

@@ -7,7 +7,6 @@ import (
 	"testing"
 	"time"
 
-	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
@@ -165,24 +164,6 @@ type filterNewSeriesTestCase struct {
 	expectError       bool
 }
 
-func TestBaseRule_IsFilterNewSeriesSupported(t *testing.T) {
-	postableRule := createPostableRule(&ruletypes.AlertCompositeQuery{
-		QueryType: ruletypes.QueryTypeBuilder,
-		Queries: []qbtypes.QueryEnvelope{{
-			Type: qbtypes.QueryTypeBuilderAI,
-			Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-				Name:         "A",
-				Signal:       telemetrytypes.SignalTraces,
-				Aggregations: []qbtypes.TraceAggregation{{Expression: "max(trace.total_tokens)"}},
-			},
-		}},
-	})
-
-	rule, err := NewBaseRule("test-rule", valuer.GenerateUUID(), &postableRule, mustParseURL(t, "http://localhost:8080"), WithLogger(instrumentationtest.New().Logger()))
-	require.NoError(t, err)
-	assert.False(t, rule.isFilterNewSeriesSupported())
-}
-
 func TestBaseRule_FilterNewSeries(t *testing.T) {
 	defaultEvalTime := time.Unix(1700000000, 0)
 	defaultNewGroupEvalDelay := valuer.MustParseTextDuration("2m")

pkg/query-service/rules/setups_test.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/statementbuilder"
-	"github.com/SigNoz/signoz/pkg/statementbuilder/aistatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/logsstatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/metricsstatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/tracesstatementbuilder"
@@ -128,40 +127,3 @@ func prepareQuerierForTraces(t *testing.T, telemetryStore telemetrystore.Telemet
 		0, // maxConcurrentQueries (0 means default)
 	)
 }
-
-func prepareQuerierForAITraces(t *testing.T, telemetryStore telemetrystore.TelemetryStore, keysMap map[string][]*telemetrytypes.TelemetryFieldKey) querier.Querier {
-	t.Helper()
-
-	providerSettings := instrumentationtest.New().ToProviderSettings()
-	metadataStore := telemetrytypestest.NewMockMetadataStore()
-
-	for _, keys := range keysMap {
-		for _, key := range keys {
-			key.Signal = telemetrytypes.SignalTraces
-		}
-	}
-	metadataStore.KeysMap = keysMap
-
-	fl := flaggertest.New(t)
-	aiTraceStmtBuilder, err := aistatementbuilder.NewFactory(telemetryStore, metadataStore, fl).New(context.Background(), providerSettings, statementbuilder.Config{})
-	require.NoError(t, err)
-
-	return querier.New(
-		providerSettings,
-		telemetryStore,
-		metadataStore,
-		nil, // prometheus
-		nil, // promV2
-		nil, // traceStmtBuilder
-		aiTraceStmtBuilder,
-		nil, // logStmtBuilder
-		nil, // auditStmtBuilder
-		nil, // metricStmtBuilder
-		nil, // meterStmtBuilder
-		nil, // traceOperatorStmtBuilder
-		nil, // bucketCache
-		fl,
-		0,
-		0, // maxConcurrentQueries (0 means default)
-	)
-}

pkg/query-service/rules/threshold_rule.go

@@ -132,7 +132,7 @@ func (r *ThresholdRule) prepareParamsForTraces(ctx context.Context, ts time.Time
 
 	whereClause := contextlinks.PrepareFilterExpression(lbls.Map(), filterExpr, groupBy)
 
-	return contextlinks.PrepareParamsForTracesV5(start, end, whereClause, r.typ.BuilderQueryType())
+	return contextlinks.PrepareParamsForTracesV5(start, end, whereClause)
 }
 
 func (r *ThresholdRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
@@ -308,14 +308,10 @@ func (r *ThresholdRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		// is used alert grouping, and we want to group alerts with the same
 		// label set, but different timestamps, together.
 		switch r.typ {
-		case ruletypes.AlertTypeTraces, ruletypes.AlertTypeAITraces:
+		case ruletypes.AlertTypeTraces:
 			params := r.prepareParamsForTraces(ctx, ts, smpl.Metric)
 			if len(params) > 0 {
-				explorerPath := "traces-explorer"
-				if r.typ == ruletypes.AlertTypeAITraces {
-					explorerPath = "ai-observability/explorer"
-				}
-				link := r.ExternalURL(explorerPath, params)
+				link := r.ExternalURL("traces-explorer", params)
 				r.logger.InfoContext(ctx, "adding traces link to annotations", slog.String("annotation.link", link))
 				annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationRelatedTraces, Value: link})
 			}