refactor(dashboards): move the heatmap chart to its cleaned-up location

The heatmap layer was written before the V1 cleanup moved the shared chart code
out of container/DashboardContainer/visualization into lib/visualization, so it
landed in the old tree and was the only thing left there.

- chart, utils, group-legend hook and tests move to lib/visualization/charts/Heatmap
- HeatmapChartProps joins the other chart props in charts/types.ts, alongside
  TimeSeries/Bar/Histogram/Pie; the chart-local types file held nothing else
- the heatmap tooltip, its two lists, content helpers and styles move into
  Tooltip/components/HeatmapTooltip, so the tooltip root keeps only the shell
  and the flat per-chart tooltips

Also drops a dead `timezone` prop Heatmap passed to ChartWrapper, which does not
take one — a type error the unresolvable ChartWrapper import had been masking.

Assisted-by: Claude Opus 5

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

@@ -25,379 +25,6 @@ components:
       - data
       - orgId
       type: object
-    AlertmanagertypesChannelConfig:
-      discriminator:
-        mapping:
-          email: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-          googlechat: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-          incidentio: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-          jira: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-          jsmops: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-          msteams: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-          opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-          pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-          slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-          webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-        propertyName: kind
-      oneOf:
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
-      properties:
-        kind:
-          enum:
-          - email
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelEmailConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        kind:
-          enum:
-          - googlechat
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelGoogleChatConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        kind:
-          enum:
-          - incidentio
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelIncidentIOConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        kind:
-          enum:
-          - jsmops
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJSMOpsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig:
-      properties:
-        kind:
-          enum:
-          - jira
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJiraConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        kind:
-          enum:
-          - msteams
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelMSTeamsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        kind:
-          enum:
-          - opsgenie
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelOpsgenieConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        kind:
-          enum:
-          - pagerduty
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelPagerdutyConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig:
-      properties:
-        kind:
-          enum:
-          - slack
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
-      properties:
-        kind:
-          enum:
-          - webhook
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelWebhookConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelEmailConfig:
-      properties:
-        headers:
-          additionalProperties:
-            type: string
-          type: object
-        html:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        to:
-          type: string
-      required:
-      - to
-      type: object
-    AlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        description:
-          type: string
-        metadata:
-          additionalProperties:
-            type: string
-          type: object
-        sendResolved:
-          nullable: true
-          type: boolean
-        title:
-          type: string
-        token:
-          type: string
-        url:
-          type: string
-      required:
-      - url
-      - token
-      type: object
-    AlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        apiKey:
-          type: string
-        description:
-          type: string
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        tags:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelJiraConfig:
-      properties:
-        apiToken:
-          type: string
-        customFields:
-          additionalProperties: {}
-          type: object
-        description:
-          type: string
-        email:
-          type: string
-        issueType:
-          type: string
-        labels:
-          items:
-            type: string
-          type: array
-        priority:
-          type: string
-        project:
-          type: string
-        reopenDuration:
-          type: string
-        reopenTransition:
-          type: string
-        resolveTransition:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        site:
-          type: string
-        summary:
-          type: string
-        wontFixResolution:
-          type: string
-      required:
-      - site
-      - project
-      - issueType
-      - email
-      - apiToken
-      type: object
-    AlertmanagertypesChannelKind:
-      enum:
-      - slack
-      - email
-      - webhook
-      - pagerduty
-      - opsgenie
-      - msteams
-      - googlechat
-      - jira
-      - jsmops
-      - incidentio
-      type: string
-    AlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        apiKey:
-          type: string
-        apiUrl:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        source:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        class:
-          type: string
-        client:
-          type: string
-        clientUrl:
-          type: string
-        component:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        group:
-          type: string
-        routingKey:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        severity:
-          type: string
-        source:
-          type: string
-        url:
-          type: string
-      required:
-      - routingKey
-      type: object
-    AlertmanagertypesChannelSlackConfig:
-      properties:
-        apiUrl:
-          type: string
-        channel:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-      required:
-      - apiUrl
-      type: object
-    AlertmanagertypesChannelWebhookConfig:
-      properties:
-        bearerToken:
-          type: string
-        password:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        url:
-          type: string
-        username:
-          type: string
-      required:
-      - url
-      type: object
     AlertmanagertypesDeprecatedGettableAlert:
       properties:
         annotations:
@@ -427,30 +54,6 @@ components:
       - rule
       - policy
       type: string
-    AlertmanagertypesGettableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        createdAt:
-          format: date-time
-          type: string
-        displayName:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - name
-      - displayName
-      - config
-      - id
-      - createdAt
-      - updatedAt
-      type: object
     AlertmanagertypesGettableRoutePolicy:
       properties:
         channels:
@@ -753,19 +356,6 @@ components:
       required:
       - name
       type: object
-    AlertmanagertypesPostableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        displayName:
-          type: string
-        generateName:
-          type: boolean
-        name:
-          type: string
-      required:
-      - config
-      type: object
     AlertmanagertypesPostablePlannedMaintenance:
       properties:
         alertIds:
@@ -19719,69 +19309,6 @@ paths:
       summary: Get metrics treemap
       tags:
       - metrics
-  /api/v2/notification_channels:
-    post:
-      deprecated: false
-      description: This endpoint creates a notification channel
-      operationId: CreateNotificationChannel
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostableNotificationChannel'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesGettableNotificationChannel'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:create
-      - tokenizer:
-        - notification-channel:create
-      summary: Create notification channel
-      tags:
-      - channels
   /api/v2/orgs/me:
     get:
       deprecated: false
@@ -20308,9 +19835,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - role:read
+        - ADMIN
       - tokenizer:
-        - role:read
+        - ADMIN
       summary: Get users by role id
       tags:
       - users
@@ -24872,11 +24399,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user role
       tags:
       - users
@@ -24926,11 +24451,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:detach
-        - role:detach
+        - ADMIN
       - tokenizer:
-        - user:detach
-        - role:detach
+        - ADMIN
       summary: Delete user role
       tags:
       - users
@@ -24991,9 +24514,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user role
       tags:
       - users
@@ -25039,9 +24562,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:list
+        - ADMIN
       - tokenizer:
-        - user:list
+        - ADMIN
       summary: List users v2
       tags:
       - users
@@ -25101,13 +24624,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user
       tags:
       - users
@@ -25151,9 +24670,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:delete
+        - ADMIN
       - tokenizer:
-        - user:delete
+        - ADMIN
       summary: Delete user
       tags:
       - users
@@ -25208,9 +24727,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user by user id
       tags:
       - users
@@ -25264,9 +24783,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:update
+        - ADMIN
       - tokenizer:
-        - user:update
+        - ADMIN
       summary: Update user v2
       tags:
       - users
@@ -25322,9 +24841,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:list
+        - ADMIN
       - tokenizer:
-        - factor-password:list
+        - ADMIN
       summary: Get reset password token for a user
       tags:
       - users
@@ -25387,11 +24906,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       - tokenizer:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       summary: Create or regenerate reset password token for a user
       tags:
       - users
@@ -25449,9 +24966,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user roles
       tags:
       - users

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). If the target list is optional in the payload (e.g. `userRoles` at user creation), set `OptionalTargets`: when no target ids resolve, the attach is vacuous and the def is skipped entirely — without it, the empty-id contract would check collection-level access on the target. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

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/__mocks__/uplotMock.ts

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

frontend/src/AppRoutes/Private.tsx

@@ -169,12 +169,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	// Check for workspace blocked (trial expired)
 	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
 		const isRouteEnabledForWorkspaceBlockedState =
-			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/channels/index.ts

@@ -19,10 +19,8 @@ import type {
 
 import type {
 	AlertmanagertypesPostableChannelDTO,
-	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
 	CreateChannel201,
-	CreateNotificationChannel201,
 	DeleteChannelByIDPathParameters,
 	GetChannelByID200,
 	GetChannelByIDPathParameters,
@@ -649,87 +647,3 @@ export const useTestChannelDeprecated = <
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));
 };
-/**
- * This endpoint creates a notification channel
- * @summary Create notification channel
- */
-export const createNotificationChannel = (
-	alertmanagertypesPostableNotificationChannelDTO?: BodyType<AlertmanagertypesPostableNotificationChannelDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateNotificationChannel201>({
-		url: `/api/v2/notification_channels`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableNotificationChannelDTO,
-		signal,
-	});
-};
-
-export const getCreateNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	const mutationKey = ['createNotificationChannel'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createNotificationChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createNotificationChannel>>
->;
-export type CreateNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesPostableNotificationChannelDTO>
-	| undefined;
-export type CreateNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create notification channel
- */
-export const useCreateNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	return useMutation(getCreateNotificationChannelMutationOptions(options));
-};

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

@@ -37,476 +37,6 @@ export interface AlertmanagertypesChannelDTO {
 	updatedAt?: string;
 }
 
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
-	slack = 'slack',
-}
-export interface AlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiUrl: string;
-	/**
-	 * @type string
-	 */
-	channel?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @enum slack
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind;
-	spec: AlertmanagertypesChannelSlackConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
-	email = 'email',
-}
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @type object
-	 */
-	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
-	/**
-	 * @type string
-	 */
-	html?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	to: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @enum email
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind;
-	spec: AlertmanagertypesChannelEmailConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind {
-	webhook = 'webhook',
-}
-export interface AlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @type string
-	 */
-	bearerToken?: string;
-	/**
-	 * @type string
-	 */
-	password?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	url: string;
-	/**
-	 * @type string
-	 */
-	username?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @enum webhook
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind;
-	spec: AlertmanagertypesChannelWebhookConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
-	pagerduty = 'pagerduty',
-}
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @type string
-	 */
-	class?: string;
-	/**
-	 * @type string
-	 */
-	client?: string;
-	/**
-	 * @type string
-	 */
-	clientUrl?: string;
-	/**
-	 * @type string
-	 */
-	component?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	group?: string;
-	/**
-	 * @type string
-	 */
-	routingKey: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	severity?: string;
-	/**
-	 * @type string
-	 */
-	source?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @enum pagerduty
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind;
-	spec: AlertmanagertypesChannelPagerdutyConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
-	opsgenie = 'opsgenie',
-}
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	apiUrl?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	source?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @enum opsgenie
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind;
-	spec: AlertmanagertypesChannelOpsgenieConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind {
-	msteams = 'msteams',
-}
-export interface AlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @enum msteams
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind;
-	spec: AlertmanagertypesChannelMSTeamsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind {
-	googlechat = 'googlechat',
-}
-export interface AlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @enum googlechat
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind;
-	spec: AlertmanagertypesChannelGoogleChatConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
-	jira = 'jira',
-}
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
-	[key: string]: unknown;
-};
-
-export interface AlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiToken: string;
-	/**
-	 * @type object
-	 */
-	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	issueType: string;
-	/**
-	 * @type array
-	 */
-	labels?: string[];
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type string
-	 */
-	project: string;
-	/**
-	 * @type string
-	 */
-	reopenDuration?: string;
-	/**
-	 * @type string
-	 */
-	reopenTransition?: string;
-	/**
-	 * @type string
-	 */
-	resolveTransition?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	site: string;
-	/**
-	 * @type string
-	 */
-	summary?: string;
-	/**
-	 * @type string
-	 */
-	wontFixResolution?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @enum jira
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind;
-	spec: AlertmanagertypesChannelJiraConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind {
-	jsmops = 'jsmops',
-}
-export interface AlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	tags?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @enum jsmops
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind;
-	spec: AlertmanagertypesChannelJSMOpsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
-	incidentio = 'incidentio',
-}
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	token: string;
-	/**
-	 * @type string
-	 */
-	url: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @enum incidentio
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind;
-	spec: AlertmanagertypesChannelIncidentIOConfigDTO;
-}
-
-export type AlertmanagertypesChannelConfigDTO =
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
-
-export enum AlertmanagertypesChannelKindDTO {
-	slack = 'slack',
-	email = 'email',
-	webhook = 'webhook',
-	pagerduty = 'pagerduty',
-	opsgenie = 'opsgenie',
-	msteams = 'msteams',
-	googlechat = 'googlechat',
-	jira = 'jira',
-	jsmops = 'jsmops',
-	incidentio = 'incidentio',
-}
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -558,32 +88,6 @@ export enum AlertmanagertypesExpressionKindDTO {
 	rule = 'rule',
 	policy = 'policy',
 }
-export interface AlertmanagertypesGettableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
 export interface AlertmanagertypesGettableRoutePolicyDTO {
 	/**
 	 * @type array,null
@@ -2244,22 +1748,6 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	wechat_configs?: ConfigWechatConfigDTO[];
 };
 
-export interface AlertmanagertypesPostableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type boolean
-	 */
-	generateName?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	/**
 	 * @type array,null
@@ -13162,14 +12650,6 @@ export type GetMetricsTreemap200 = {
 	status: string;
 };
 
-export type CreateNotificationChannel201 = {
-	data: AlertmanagertypesGettableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

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/api/v5/queryRange/convertV5Response.ts

@@ -2,10 +2,8 @@ import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
-	BuilderQuery,
 	DistributionData,
 	MetricRangePayloadV5,
-	QueryEnvelope,
 	QueryRangeRequestV5,
 	RawData,
 	ScalarData,
@@ -13,11 +11,6 @@ import {
 } from 'types/api/v5/queryRange';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-const isBuilderQueryEnvelope = (
-	envelope: QueryEnvelope,
-): envelope is QueryEnvelope & { spec: BuilderQuery } =>
-	envelope.type === 'builder_query' || envelope.type === 'builder_ai_query';
-
 function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
@@ -416,19 +409,21 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries?.filter(isBuilderQueryEnvelope).reduce(
-			(acc, query) => {
-				if (
-					isBuilderQueryEnvelope(query) &&
-					'aggregations' in query.spec &&
-					query.spec.name
-				) {
-					acc[query.spec.name] = query.spec.aggregations;
-				}
-				return acc;
-			},
-			{} as Record<string, any>,
-		) || {};
+		params?.compositeQuery?.queries
+			?.filter((query) => query.type === 'builder_query')
+			.reduce(
+				(acc, query) => {
+					if (
+						query.type === 'builder_query' &&
+						'aggregations' in query.spec &&
+						query.spec.name
+					) {
+						acc[query.spec.name] = query.spec.aggregations;
+					}
+					return acc;
+				},
+				{} as Record<string, any>,
+			) || {};
 
 	// clickhouse_sql queries have no aggregation metadata; their value columns
 	// are named/keyed by the real SQL alias the response carries (see getColId).

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

@@ -14,7 +14,6 @@ import {
 	QueryBuilderFormula as V5QueryBuilderFormula,
 	QueryEnvelope,
 	QueryRangePayloadV5,
-	RequestType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -936,41 +935,3 @@ describe('convertBuilderQueriesToV5 having normalization', () => {
 		});
 	});
 });
-
-describe('convertBuilderQueriesToV5 builder query type', () => {
-	const buildEnvelope = (
-		builderQueryType: IBuilderQuery['builderQueryType'],
-		requestType: RequestType,
-	): QueryEnvelope => {
-		const [envelope] = convertBuilderQueriesToV5(
-			{
-				A: {
-					dataSource: DataSource.TRACES,
-					queryName: 'A',
-					builderQueryType,
-				} as unknown as IBuilderQuery,
-			},
-			requestType,
-		);
-		return envelope;
-	};
-
-	it.each<[RequestType]>([
-		['trace'],
-		['raw'],
-		['time_series'],
-		['scalar'],
-		['distribution'],
-	])('sends builder_ai_query for the %s request type', (requestType) => {
-		expect(buildEnvelope('builder_ai_query', requestType).type).toBe(
-			'builder_ai_query',
-		);
-	});
-
-	it.each<[string, IBuilderQuery['builderQueryType']]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('sends builder_query for %s', (_label, builderQueryType) => {
-		expect(buildEnvelope(builderQueryType, 'trace').type).toBe('builder_query');
-	});
-});

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

@@ -365,7 +365,7 @@ export function convertBuilderQueriesToV5(
 			}
 
 			return {
-				type: queryData.builderQueryType ?? 'builder_query',
+				type: 'builder_query' as QueryType,
 				spec,
 			};
 		},

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/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -16,6 +16,8 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -52,12 +54,6 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-	SuggestedFieldKey,
-	SuggestedFieldKeysByName,
-} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -265,8 +261,10 @@ function QuerySearch({
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
-		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
+	const generateOptions = (keys: {
+		[key: string]: QueryKeyDataSuggestionsProps[];
+	}): any[] =>
+		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -319,9 +317,8 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await fetchFieldKeysForQuery({
-				builderQueryType: queryData.builderQueryType,
-				dataSource,
+			const response = await getKeySuggestions({
+				signal: dataSource,
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
@@ -363,7 +360,6 @@ function QuerySearch({
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
 			metricNamespace,
-			queryData.builderQueryType,
 		],
 	);
 
@@ -497,11 +493,10 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await fetchFieldValuesForQuery({
-							builderQueryType: queryData.builderQueryType,
-							dataSource,
+					: await getValueSuggestions({
 							key,
 							searchText: sanitizedSearchText,
+							signal: dataSource,
 							signalSource: signalSource as 'meter' | '',
 							metricName: debouncedMetricName ?? undefined,
 						}).then((response) => {
@@ -606,7 +601,6 @@ function QuerySearch({
 			signalSource,
 			toggleSuggestions,
 			valueSuggestionsOverride,
-			queryData.builderQueryType,
 		],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -1,215 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-} from '../fieldSuggestions';
-
-jest.mock('api/generated/services/ai-observability', () => ({
-	getAIObservabilityFieldsKeys: jest.fn(),
-	getAIObservabilityFieldsValues: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn(),
-}));
-
-const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
-	typeof getAIObservabilityFieldsKeys
->;
-const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
-	typeof getKeySuggestions
->;
-const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
-	typeof getAIObservabilityFieldsValues
->;
-const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
-	typeof getValueSuggestions
->;
-
-const aiValuesResponse = (
-	values: { stringValues?: string[]; numberValues?: number[] } | null,
-	complete = true,
-): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
-	({
-		status: 'success',
-		data: { complete, values },
-	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
-
-describe('fetchFieldKeysForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: {
-				complete: true,
-				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-			},
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const keys = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: 'llm',
-		});
-
-		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
-		expect(mockedGenericKeys).not.toHaveBeenCalled();
-		expect(keys.data.data).toStrictEqual({
-			complete: true,
-			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		mockedGenericKeys.mockResolvedValue({
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as Awaited<ReturnType<typeof getKeySuggestions>>);
-
-		await fetchFieldKeysForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			searchText: 'svc',
-		});
-
-		expect(mockedAIKeys).not.toHaveBeenCalled();
-		expect(mockedGenericKeys).toHaveBeenCalledWith(
-			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
-		);
-	});
-
-	it('normalizes a null ai_observability keys payload to an empty map', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: { complete: false, keys: null },
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const response = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: '',
-		});
-
-		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
-	});
-
-	it('passes the generic response through untouched', async () => {
-		const genericResponse = {
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
-		mockedGenericKeys.mockResolvedValue(genericResponse);
-
-		await expect(
-			fetchFieldKeysForQuery({
-				builderQueryType: 'builder_query',
-				dataSource: DataSource.TRACES,
-				searchText: '',
-			}),
-		).resolves.toBe(genericResponse);
-	});
-});
-
-describe('fetchFieldValuesForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIValues.mockResolvedValue(
-			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
-		);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'gen_ai.request.model',
-			searchText: 'gpt',
-		});
-
-		expect(mockedGenericValues).not.toHaveBeenCalled();
-		expect(response).toStrictEqual({
-			data: {
-				data: {
-					complete: true,
-					values: { stringValues: ['gpt-4o'], numberValues: [] },
-				},
-			},
-		});
-	});
-
-	it('forwards the key as the name the endpoint expects', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
-
-		await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'total_tokens',
-			searchText: '',
-		});
-
-		expect(mockedAIValues).toHaveBeenCalledWith({
-			name: 'total_tokens',
-			searchText: '',
-		});
-	});
-
-	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
-
-		await expect(
-			fetchFieldValuesForQuery({
-				builderQueryType: 'builder_ai_query',
-				dataSource: DataSource.TRACES,
-				key: 'llm_call_count',
-				searchText: '',
-			}),
-		).resolves.toStrictEqual({
-			data: { data: { complete: false, values: null } },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		const genericResponse = {
-			data: {
-				data: { complete: false, values: { stringValues: ['frontend'] } },
-			},
-		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
-		mockedGenericValues.mockResolvedValue(genericResponse);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			key: 'service.name',
-			searchText: 'front',
-		});
-
-		expect(mockedAIValues).not.toHaveBeenCalled();
-		expect(mockedGenericValues).toHaveBeenCalledWith(
-			expect.objectContaining({
-				signal: DataSource.TRACES,
-				key: 'service.name',
-				searchText: 'front',
-			}),
-		);
-		expect(response).toBe(genericResponse);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -1,111 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export interface SuggestedFieldKey {
-	name: string;
-	fieldContext?: string;
-	fieldDataType?: string;
-}
-
-export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
-
-export interface SuggestedFieldKeysPayload {
-	complete: boolean;
-	keys: SuggestedFieldKeysByName;
-}
-
-export interface SuggestedFieldKeysResponse {
-	data: { data?: SuggestedFieldKeysPayload };
-}
-
-export interface SuggestedFieldValuesPayload {
-	complete?: boolean;
-	values?: {
-		stringValues?: string[] | null;
-		numberValues?: number[] | null;
-	} | null;
-}
-
-export interface SuggestedFieldValuesResponse {
-	data: { data?: SuggestedFieldValuesPayload };
-}
-
-interface FetchFieldKeysParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-	metricNamespace?: string;
-}
-
-interface FetchFieldValuesParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	key: string;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-}
-
-export const fetchFieldKeysForQuery = async ({
-	builderQueryType,
-	dataSource,
-	searchText,
-	metricName,
-	signalSource,
-	metricNamespace,
-}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsKeys({ searchText });
-
-		return {
-			data: {
-				data: response.data
-					? { complete: response.data.complete, keys: response.data.keys ?? {} }
-					: undefined,
-			},
-		};
-	}
-
-	return getKeySuggestions({
-		signal: dataSource,
-		searchText,
-		metricName,
-		signalSource,
-		metricNamespace,
-	});
-};
-
-export const fetchFieldValuesForQuery = async ({
-	builderQueryType,
-	dataSource,
-	key,
-	searchText,
-	metricName,
-	signalSource,
-}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsValues({
-			name: key,
-			searchText,
-		});
-
-		return { data: { data: response.data } };
-	}
-
-	// getValueSuggestions' declared response type does not match what the endpoint returns.
-	return getValueSuggestions({
-		signal: dataSource,
-		key,
-		searchText,
-		signalSource,
-		metricName,
-	}) as unknown as Promise<SuggestedFieldValuesResponse>;
-};

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

@@ -54,7 +54,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
-	const { dataSource, builderQueryType } = query;
+	const { dataSource } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -94,9 +94,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	);
 
 	const showSpanScopeSelector = useMemo(
-		() =>
-			dataSource === DataSource.TRACES && builderQueryType !== 'builder_ai_query',
-		[dataSource, builderQueryType],
+		() => dataSource === DataSource.TRACES,
+		[dataSource],
 	);
 
 	const showInlineQuerySearch = useMemo(() => {

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/queryBuilder.ts

@@ -348,19 +348,6 @@ export const initialQueryMeterWithType: Query = {
 	},
 };
 
-export const initialQueryAIWithType: Query = {
-	...initialQueryWithType,
-	builder: {
-		...initialQueryWithType.builder,
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap.traces,
-				builderQueryType: 'builder_ai_query',
-			},
-		],
-	},
-};
-
 export const operatorsByTypes: Record<LocalDataType, string[]> = {
 	string: Object.values(StringOperators),
 	number: Object.values(NumberOperators),

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/LLMObservability/Explorer/Controls/Controls.module.scss

@@ -1,14 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-}
-
-.optionsTrigger {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	cursor: pointer;
-}

frontend/src/container/LLMObservability/Explorer/Controls/index.tsx

@@ -1,82 +0,0 @@
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Settings } from '@signozhq/icons';
-import FieldsSelector from 'components/FieldsSelector';
-import Controls, { ControlsProps } from 'container/Controls';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
-import { DataSource } from 'types/common/queryBuilder';
-
-import styles from './Controls.module.scss';
-
-function TraceExplorerControls({
-	isLoading,
-	totalCount,
-	perPageOptions,
-	config,
-	showSizeChanger = true,
-}: TraceExplorerControlsProps): JSX.Element | null {
-	const { t } = useTranslation(['trace']);
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
-	const {
-		pagination,
-		handleCountItemsPerPageChange,
-		handleNavigateNext,
-		handleNavigatePrevious,
-	} = useQueryPagination(totalCount, perPageOptions);
-
-	return (
-		<div className={styles.container}>
-			{config?.fieldsSelector && (
-				<>
-					<div
-						className={styles.optionsTrigger}
-						onClick={(): void => setIsFieldsSelectorOpen(true)}
-					>
-						{t('options_menu.options')}
-						<Settings size="md" />
-					</div>
-					<FieldsSelector
-						isOpen={isFieldsSelectorOpen}
-						title="Edit columns"
-						fields={config.fieldsSelector.value}
-						onFieldsChange={config.fieldsSelector.onFieldsChange}
-						onClose={(): void => setIsFieldsSelectorOpen(false)}
-						signal={DataSource.TRACES}
-					/>
-				</>
-			)}
-
-			<Controls
-				isLoading={isLoading}
-				totalCount={totalCount}
-				offset={pagination.offset}
-				countPerPage={pagination.limit}
-				perPageOptions={perPageOptions}
-				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
-				handleNavigateNext={handleNavigateNext}
-				handleNavigatePrevious={handleNavigatePrevious}
-				showSizeChanger={showSizeChanger}
-			/>
-		</div>
-	);
-}
-
-TraceExplorerControls.defaultProps = {
-	config: null,
-};
-
-type TraceExplorerControlsProps = Pick<
-	ControlsProps,
-	'isLoading' | 'totalCount' | 'perPageOptions'
-> & {
-	config?: OptionsMenuConfig | null;
-	showSizeChanger?: boolean;
-};
-
-TraceExplorerControls.defaultProps = {
-	showSizeChanger: true,
-};
-
-export default memo(TraceExplorerControls);

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

@@ -11,13 +11,17 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
+import {
+	getExportQueryData,
+	getQueryByPanelType,
+} from 'container/TracesExplorer/explorerUtils';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
@@ -48,7 +52,6 @@ import {
 import { v4 } from 'uuid';
 
 import { TOOLBAR_VIEWS } from './constants';
-import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
 import ListView from './ListView/ListView';
 import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
@@ -115,7 +118,7 @@ function Explorer(): JSX.Element {
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
-				initialQueryAIWithType,
+				initialQueriesMap.traces,
 				PANEL_TYPES.LIST,
 				DataSource.TRACES,
 			),
@@ -182,7 +185,7 @@ function Explorer(): JSX.Element {
 	const exportDefaultQuery = useMemo(
 		() =>
 			getQueryByPanelType(
-				stagedQuery || initialQueryAIWithType,
+				stagedQuery || initialQueriesMap.traces,
 				panelType || PANEL_TYPES.LIST,
 			),
 		[stagedQuery, panelType],

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

@@ -17,11 +17,12 @@ import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import {
 	getTraceLink,
 	transformSpanRows,
@@ -42,7 +43,6 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
 	PER_PAGE_OPTIONS,
@@ -94,7 +94,7 @@ function ListView({
 		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
 
 	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueryAIWithType, orderBy),
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
 		[stagedQuery, orderBy],
 	);
 

frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx

@@ -1,168 +0,0 @@
-import { Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { ILog } from 'types/api/logs/log';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-
-export function BlockLink({
-	children,
-	to,
-	openInNewTab,
-}: {
-	children: React.ReactNode;
-	to: string;
-	openInNewTab: boolean;
-}): any {
-	// Display block to make the whole cell clickable
-	return (
-		<Link
-			to={to}
-			style={{ display: 'block' }}
-			target={openInNewTab ? '_blank' : '_self'}
-		>
-			{children}
-		</Link>
-	);
-}
-
-export const transformDataWithDate = (
-	data: QueryDataV3[],
-): Omit<ILog, 'timestamp'>[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
-export const getTraceLink = (record: Record<string, unknown>): string => {
-	function readId(value: unknown): string {
-		if (typeof value === 'string' || typeof value === 'number') {
-			return String(value);
-		}
-		return '';
-	}
-
-	const traceId = readId(record.traceID) || readId(record.trace_id);
-	const spanId = readId(record.spanID) || readId(record.span_id);
-
-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
-		spanId,
-		levelUp: 0,
-		levelDown: 0,
-	})}`;
-};
-
-export const getListColumns = (
-	selectedColumns: TelemetryFieldKey[],
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string | number,
-): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			dataIndex: 'date',
-			key: 'date',
-			title: 'Timestamp',
-			width: 145,
-			render: (value, item): JSX.Element => {
-				const date =
-					typeof value === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								value,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								value / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return (
-					<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-						<Typography.Text>{date}</Typography.Text>
-					</BlockLink>
-				);
-			},
-		},
-	];
-
-	const columns: ColumnsType<RowData> =
-		selectedColumns.map((props) => {
-			const name = props?.name || (props as any)?.key;
-			const fieldContext = props?.fieldContext || (props as any)?.type;
-			return {
-				title: name,
-				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
-				width: 145,
-				render: (value, item): JSX.Element => {
-					if (value === '') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>N/A</Typography>
-							</BlockLink>
-						);
-					}
-
-					if (
-						name === 'httpMethod' ||
-						name === 'responseStatusCode' ||
-						name === 'response_status_code' ||
-						name === 'http_method'
-					) {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{value}
-								</Badge>
-							</BlockLink>
-						);
-					}
-
-					if (name === 'durationNano' || name === 'duration_nano') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>{getMs(value)}ms</Typography>
-							</BlockLink>
-						);
-					}
-
-					return (
-						<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-							<Typography data-testid={name}>
-								<LineClampedText text={value} lines={3} />
-							</Typography>
-						</BlockLink>
-					);
-				},
-				responsive: ['md'],
-			};
-		}) || [];
-
-	return [...initialColumns, ...columns];
-};
-
-// Reshapes the query-range list payload into table rows. `id` mirrors span_id so
-// TanStack sees genuine row changes on orderBy toggles instead of falling back to
-// positional ids; `timestamp` is lifted from the wrapping ListItem.
-export const transformSpanRows = (data: QueryDataV3[]): TracesTableRow[] => {
-	const list = data[0]?.list;
-	if (!list) {
-		return [];
-	}
-	return list.map((item) => {
-		const row = item.data as Record<string, unknown>;
-		return {
-			...row,
-			timestamp: item.timestamp,
-			id: row.span_id,
-		};
-	}) as TracesTableRow[];
-};

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

@@ -1,6 +1,8 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
@@ -8,16 +10,33 @@ import { DataSource } from 'types/common/queryBuilder';
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
-		() => ({
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
 			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: false, isDisabled: true },
-			having: { isHidden: false, isDisabled: true },
-		}),
+			limit: { isHidden: isList, isDisabled: true },
+			having: { isHidden: isList, isDisabled: true },
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps) => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
 		[],
 	);
 
+	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
+		const shouldRenderCustomOrderBy =
+			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
+
+		return {
+			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
+		};
+	}, [panelTypes, renderOrderBy]);
+
 	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
@@ -26,10 +45,14 @@ function QuerySection(): JSX.Element {
 	return (
 		<QueryBuilderV2
 			isListViewPanel={isListViewPanel}
+			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			queryComponents={queryComponents}
 			panelType={panelTypes}
 			filterConfigs={filterConfigs}
-			showOnlyWhereClause={isListViewPanel}
+			showOnlyWhereClause={
+				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
+			}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.styles.scss

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

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

@@ -1,22 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Typography } from '@signozhq/ui/typography';
-import { DataSource } from 'types/common/queryBuilder';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './TraceLoading.styles.scss';
-
-export function TracesLoading(): JSX.Element {
-	const { t } = useTranslation('common');
-	return (
-		<div className="loading-traces">
-			<div className="loading-traces-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography>
-					{t('pending_data_placeholder', { dataSource: DataSource.TRACES })}
-				</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/LLMObservability/Explorer/TracesTable/FieldCell.tsx

@@ -1,77 +0,0 @@
-import { generatePath, Link } from 'react-router-dom';
-import { Badge } from '@signozhq/ui/badge';
-import TanStackTable from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { useTimezone } from 'providers/Timezone';
-
-import {
-	DURATION_FIELD_NAMES,
-	STATUS_FIELD_NAMES,
-	TIMESTAMP_FIELD_NAMES,
-	TRACE_ID_FIELD_NAMES,
-} from './constants';
-import { stringifyCellValue } from './utils';
-
-type FieldCellProps = {
-	name: string;
-	value: unknown;
-};
-
-function FieldCell({ name, value }: FieldCellProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	if (TIMESTAMP_FIELD_NAMES.has(name)) {
-		const ts = value as string | number;
-		const formatted =
-			typeof ts === 'string'
-				? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-				: formatTimezoneAdjustedTimestamp(
-						ts / 1e6,
-						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					);
-		const text = String(formatted);
-		return <TanStackTable.Text title={text}>{text}</TanStackTable.Text>;
-	}
-
-	if (value === '' || value == null) {
-		return <TanStackTable.Text data-testid={name}>-</TanStackTable.Text>;
-	}
-
-	const text = stringifyCellValue(value);
-
-	if (TRACE_ID_FIELD_NAMES.has(name)) {
-		return (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
-				data-testid="trace-id"
-				onClick={(e): void => e.stopPropagation()}
-			>
-				{text}
-			</Link>
-		);
-	}
-
-	if (STATUS_FIELD_NAMES.has(name)) {
-		return (
-			<Badge data-testid={name} color="sakura" variant="outline">
-				{text}
-			</Badge>
-		);
-	}
-
-	if (DURATION_FIELD_NAMES.has(name)) {
-		return (
-			<TanStackTable.Text data-testid={name}>{getMs(text)}ms</TanStackTable.Text>
-		);
-	}
-
-	return (
-		<TanStackTable.Text data-testid={name} title={text}>
-			{text}
-		</TanStackTable.Text>
-	);
-}
-
-export default FieldCell;

frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.module.scss

@@ -1,26 +0,0 @@
-.tableWrapper {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.tracesTable {
-	--tanstack-table-row-height: 54px;
-	--tanstack-table-header-height: 54px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-header-padding-left-override: 5px;
-
-	--tanstack-cell-header-padding-left-first-column: 15px;
-
-	--tanstack-plain-body-line-clamp: 1;
-
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-bg: var(--l1-background-hover);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-}

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

@@ -1,116 +0,0 @@
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import type {
-	CellTypographySize,
-	TableColumnDef,
-} from 'components/TanStackTableView/types';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
-import APIError from 'types/api/error';
-import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { TracesTableRow } from './getFieldColumn';
-import styles from './TracesTable.module.scss';
-
-export type TracesTableProps = {
-	data: TracesTableRow[];
-	columns: TableColumnDef<TracesTableRow>[];
-	columnStorageKey?: string;
-	respectColumnOrder?: boolean;
-	panelType: PanelTypeKeys;
-	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
-	getRowHref: (row: TracesTableRow) => string;
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error: APIError | Error | null;
-	isFilterApplied: boolean;
-	onColumnOrderChange?: (cols: TableColumnDef<TracesTableRow>[]) => void;
-	onColumnRemove?: (columnId: string) => void;
-	cellTypographySize?: CellTypographySize;
-};
-
-function TracesTable({
-	data,
-	columns,
-	columnStorageKey,
-	respectColumnOrder = false,
-	panelType,
-	getRowHref,
-	isLoading,
-	isFetching,
-	isError,
-	error,
-	isFilterApplied,
-	onColumnOrderChange,
-	onColumnRemove,
-	cellTypographySize = 'medium',
-}: TracesTableProps): JSX.Element {
-	const history = useHistory();
-
-	const isDataAbsent =
-		!isLoading && !isFetching && !isError && data.length === 0;
-
-	const handleRowClick = useCallback(
-		(row: TracesTableRow): void => {
-			history.push(getRowHref(row));
-		},
-		[history, getRowHref],
-	);
-
-	const handleRowClickNewTab = useCallback(
-		(row: TracesTableRow): void => {
-			window.open(getAbsoluteUrl(getRowHref(row)), '_blank', 'noopener');
-		},
-		[getRowHref],
-	);
-
-	return (
-		<>
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && data.length === 0)) && <TracesLoading />}
-
-			{isDataAbsent && !isFilterApplied && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataAbsent && isFilterApplied && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
-			)}
-
-			{!isError && data.length !== 0 && (
-				<div className={styles.tableWrapper}>
-					<TanStackTable<TracesTableRow>
-						data={data}
-						columns={columns}
-						className={styles.tracesTable}
-						columnStorageKey={columnStorageKey}
-						respectColumnOrder={respectColumnOrder}
-						isLoading={isFetching}
-						cellTypographySize={cellTypographySize}
-						onColumnOrderChange={onColumnOrderChange}
-						onColumnRemove={onColumnRemove}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						getRowTestId={(row): string => `traces-table-row-${row.id}`}
-					/>
-				</div>
-			)}
-		</>
-	);
-}
-
-TracesTable.defaultProps = {
-	columnStorageKey: undefined,
-	respectColumnOrder: false,
-	onColumnOrderChange: undefined,
-	onColumnRemove: undefined,
-	cellTypographySize: 'medium',
-};
-
-export default TracesTable;

frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts

@@ -1,18 +0,0 @@
-// Field-name allowlists that drive signal-specific cell rendering. Both legacy
-// camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
-
-export const STATUS_FIELD_NAMES = new Set([
-	'httpMethod',
-	'http_method',
-	'http.method',
-	'http.request.method',
-	'responseStatusCode',
-	'response_status_code',
-	'http.status_code',
-	'http.response.status_code',
-]);
-
-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/LLMObservability/Explorer/TracesTable/getFieldColumn.tsx

@@ -1,26 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-
-import { TIMESTAMP_FIELD_NAMES } from './constants';
-import FieldCell from './FieldCell';
-
-export type TracesTableRow = { id: string } & Record<string, unknown>;
-
-export function getFieldColumn(
-	field: TelemetryFieldKey,
-): TableColumnDef<TracesTableRow> {
-	const { name, fieldContext, fieldDataType } = field;
-	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
-
-	return {
-		id: buildCompositeKey(name, fieldContext, fieldDataType),
-		header: name,
-		accessorFn: (row): unknown => row[name],
-		enableMove: !isTimestamp,
-		enableRemove: !isTimestamp,
-		canBeHidden: !isTimestamp,
-		width: { min: 192 },
-		cell: ({ value }): JSX.Element => <FieldCell name={name} value={value} />,
-	};
-}

frontend/src/container/LLMObservability/Explorer/TracesTable/utils.ts

@@ -1,12 +0,0 @@
-export function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}

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

@@ -14,9 +14,10 @@ import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
 import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
@@ -30,7 +31,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
-import { getListViewQuery } from '../explorerUtils';
 import { columns, PER_PAGE_OPTIONS } from './configs';
 import styles from './TracesView.module.scss';
 
@@ -60,7 +60,7 @@ function TracesView({
 	);
 
 	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueryAIWithType),
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
 		[stagedQuery],
 	);
 

frontend/src/container/LLMObservability/Explorer/TracesView/configs.ts

@@ -1,6 +1,9 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

frontend/src/container/LLMObservability/Explorer/aiActions.ts

@@ -1,235 +0,0 @@
-/**
- * AI Assistant page-action factories for the Traces Explorer.
- *
- * Mirrors the logs equivalents — each factory closes over live page
- * state/callbacks so `execute()` always operates on the current query, and
- * the page component instantiates them via `useMemo` + `usePageActions`.
- *
- * See `pages/LogsExplorer/aiActions.ts` for the rationale behind writing
- * BOTH `filters.items` and `filter.expression` and then re-using the same
- * URL parser shape via `redirectWithQueryBuilderData`.
- */
-
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import {
-	aiFilterToTagFilterItem,
-	FILTER_OP_ENUM,
-	FILTER_VALUE_DESCRIPTION,
-	FilterDeps,
-	replaceFirstQueryData,
-} from 'container/AIAssistant/pageActions/builderQueryHelpers';
-import {
-	ActionResult,
-	PageAction,
-} from 'container/AIAssistant/pageActions/types';
-import {
-	IBuilderQuery,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-interface AIFilter {
-	key: string;
-	op: string;
-	value: string;
-}
-
-interface RunQueryParams {
-	filters: AIFilter[];
-}
-
-interface AddFilterParams {
-	key: string;
-	op: string;
-	value: string;
-}
-
-type TracesView = 'list' | 'timeseries' | 'table' | 'trace';
-
-interface ChangeViewParams {
-	view: TracesView;
-}
-
-interface SaveViewParams {
-	name: string;
-}
-
-/**
- * Replace all active span filters and navigate to the updated query URL
- * (which makes the WHERE clause reflect the new filters and triggers a re-run).
- */
-export function tracesRunQueryAction(
-	deps: FilterDeps,
-): PageAction<RunQueryParams> {
-	return {
-		id: 'traces.runQuery',
-		description: 'Replace the active trace filters and re-run the query',
-		parameters: {
-			type: 'object',
-			properties: {
-				filters: {
-					type: 'array',
-					description: 'Replacement filter list',
-					items: {
-						type: 'object',
-						properties: {
-							key: {
-								type: 'string',
-								description: 'Attribute key, e.g. service.name, http.status_code',
-							},
-							op: {
-								type: 'string',
-								enum: [...FILTER_OP_ENUM],
-							},
-							value: {
-								type: 'string',
-								description: FILTER_VALUE_DESCRIPTION,
-							},
-						},
-						required: ['key', 'op', 'value'],
-					},
-				},
-			},
-			required: ['filters'],
-		},
-		autoApply: true,
-		execute: async ({ filters }): Promise<ActionResult> => {
-			const baseQuery = deps.currentQuery.builder.queryData[0];
-			if (!baseQuery) {
-				throw new Error('No active query found in Traces Explorer.');
-			}
-
-			const tagItems = filters.map(aiFilterToTagFilterItem);
-			const newFilters = { items: tagItems, op: 'AND' };
-			const updatedBuilderQuery: IBuilderQuery = {
-				...baseQuery,
-				filters: newFilters,
-				filter: convertFiltersToExpression(newFilters),
-			};
-
-			deps.handleSetQueryData(0, updatedBuilderQuery);
-			deps.redirectWithQueryBuilderData(
-				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
-			);
-
-			return {
-				summary: `Query updated with ${filters.length} filter(s) and re-run.`,
-			};
-		},
-		getContext: (): Record<string, unknown> => ({
-			filters:
-				deps.currentQuery.builder.queryData[0]?.filters?.items?.map(
-					(f: TagFilterItem) => ({
-						key: f.key?.key,
-						op: f.op,
-						value: f.value,
-					}),
-				) ?? [],
-		}),
-	};
-}
-
-/**
- * Append a single filter to the existing trace query and navigate to the
- * updated URL.
- */
-export function tracesAddFilterAction(
-	deps: FilterDeps,
-): PageAction<AddFilterParams> {
-	return {
-		id: 'traces.addFilter',
-		description: 'Add a single filter to the current trace query and re-run',
-		parameters: {
-			type: 'object',
-			properties: {
-				key: {
-					type: 'string',
-					description: 'Attribute key, e.g. service.name, http.status_code',
-				},
-				op: {
-					type: 'string',
-					enum: [...FILTER_OP_ENUM],
-				},
-				value: {
-					type: 'string',
-					description: FILTER_VALUE_DESCRIPTION,
-				},
-			},
-			required: ['key', 'op', 'value'],
-		},
-		autoApply: true,
-		execute: async ({ key, op, value }): Promise<ActionResult> => {
-			const baseQuery = deps.currentQuery.builder.queryData[0];
-			if (!baseQuery) {
-				throw new Error('No active query found in Traces Explorer.');
-			}
-
-			const existing = baseQuery.filters?.items ?? [];
-			const newItem = aiFilterToTagFilterItem({ key, op, value });
-			const newFilters = { items: [...existing, newItem], op: 'AND' };
-			const updatedBuilderQuery: IBuilderQuery = {
-				...baseQuery,
-				filters: newFilters,
-				filter: convertFiltersToExpression(newFilters),
-			};
-
-			deps.handleSetQueryData(0, updatedBuilderQuery);
-			deps.redirectWithQueryBuilderData(
-				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
-			);
-
-			return { summary: `Filter added: ${key} ${op} "${value}". Query re-run.` };
-		},
-	};
-}
-
-/**
- * Switch the traces explorer between list / timeseries / table / trace views.
- */
-export function tracesChangeViewAction(deps: {
-	onChangeView: (view: TracesView) => void;
-}): PageAction<ChangeViewParams> {
-	return {
-		id: 'traces.changeView',
-		description:
-			'Switch the Traces Explorer between list, timeseries, table, and trace views',
-		parameters: {
-			type: 'object',
-			properties: {
-				view: {
-					type: 'string',
-					enum: ['list', 'timeseries', 'table', 'trace'],
-					description: 'The panel view to switch to',
-				},
-			},
-			required: ['view'],
-		},
-		execute: async ({ view }): Promise<ActionResult> => {
-			deps.onChangeView(view);
-			return { summary: `Switched to the "${view}" view.` };
-		},
-	};
-}
-
-/**
- * Save the current trace query as a named view (stub — wires to real API
- * when available).
- */
-export function tracesSaveViewAction(deps: {
-	onSaveView: (name: string) => Promise<void>;
-}): PageAction<SaveViewParams> {
-	return {
-		id: 'traces.saveView',
-		description: 'Save the current trace query as a named view',
-		parameters: {
-			type: 'object',
-			properties: {
-				name: { type: 'string', description: 'Name for the saved view' },
-			},
-			required: ['name'],
-		},
-		execute: async ({ name }): Promise<ActionResult> => {
-			await deps.onSaveView(name);
-			return { summary: `View "${name}" saved.` };
-		},
-	};
-}

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -1,61 +0,0 @@
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { cloneDeep, set } from 'lodash-es';
-import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
-
-export const getListViewQuery = (
-	stagedQuery: Query,
-	orderBy?: string,
-): Query => {
-	const query = stagedQuery
-		? cloneDeep(stagedQuery)
-		: cloneDeep(initialQueriesMap.traces);
-
-	const orderByPayload: OrderByPayload[] = orderBy
-		? [
-				{
-					columnName: orderBy.split(':')[0],
-					order: orderBy.split(':')[1] as 'asc' | 'desc',
-				},
-			]
-		: [];
-
-	for (let i = 0; i < query.builder.queryData.length; i++) {
-		const queryData = query.builder.queryData[i];
-		queryData.groupBy = [];
-		queryData.having = {
-			expression: '',
-		};
-		queryData.orderBy = orderByPayload;
-	}
-
-	return query;
-};
-
-export const getQueryByPanelType = (
-	stagedQuery: Query,
-	panelType: PANEL_TYPES,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
-		return getListViewQuery(stagedQuery);
-	}
-	return stagedQuery;
-};
-
-export const getExportQueryData = (
-	query: Query,
-	panelType: PANEL_TYPES,
-	options: OptionsQuery,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST) {
-		const updatedQuery = cloneDeep(query);
-		set(
-			updatedQuery,
-			'builder.queryData[0].selectColumns',
-			options.selectColumns,
-		);
-
-		return updatedQuery;
-	}
-	return query;
-};

frontend/src/container/LLMObservability/ToolbarActions/LeftToolbarActions.tsx

@@ -1,132 +0,0 @@
-import {
-	ArrowUpToLine,
-	Atom,
-	Filter,
-	SquareMousePointer,
-	Terminal,
-	Binoculars,
-} from '@signozhq/icons';
-import { Button, Tooltip } from 'antd';
-import cx from 'classnames';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-
-import './ToolbarActions.styles.scss';
-
-interface LeftToolbarActionsProps {
-	items: any;
-	selectedView: string;
-	onChangeSelectedView: (view: ExplorerViews) => void;
-	showFilter: boolean;
-	handleFilterVisibilityChange: () => void;
-}
-
-const activeTab = 'active-tab';
-
-export default function LeftToolbarActions({
-	items,
-	selectedView,
-	onChangeSelectedView,
-	showFilter,
-	handleFilterVisibilityChange,
-}: LeftToolbarActionsProps): JSX.Element {
-	const { clickhouse, list, timeseries, table, trace } = items;
-
-	return (
-		<div className="left-toolbar">
-			{!showFilter && (
-				<Tooltip title="Show Filters">
-					<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-						<Filter size={12} />
-						<ArrowUpToLine size={12} style={{ transform: 'rotate(90deg)' }} />
-					</Button>
-				</Tooltip>
-			)}
-			<div className="left-toolbar-query-actions">
-				{list?.show && (
-					<Tooltip title="List View">
-						<Button
-							disabled={list.disabled}
-							className={cx(
-								'list-view-tab',
-								'explorer-view-option',
-								selectedView === list.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(list.key)}
-						>
-							<SquareMousePointer size={14} data-testid="search-view" />
-							List View
-						</Button>
-					</Tooltip>
-				)}
-
-				{trace?.show && (
-					<Tooltip title="Trace View">
-						<Button
-							disabled={trace.disabled}
-							className={cx(
-								'trace-view-tab',
-								'explorer-view-option',
-								selectedView === trace.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(trace.key)}
-						>
-							<SquareMousePointer size={14} data-testid="trace-view" />
-							Trace View
-						</Button>
-					</Tooltip>
-				)}
-
-				{timeseries?.show && (
-					<Tooltip title="Time Series">
-						<Button
-							disabled={timeseries.disabled}
-							className={cx(
-								'timeseries-view-tab',
-								'explorer-view-option',
-								selectedView === timeseries.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(timeseries.key)}
-						>
-							<Atom size={14} data-testid="query-builder-view" />
-							Time Series
-						</Button>
-					</Tooltip>
-				)}
-
-				{clickhouse?.show && (
-					<Tooltip title="Clickhouse">
-						<Button
-							disabled={clickhouse.disabled}
-							className={cx(
-								'clickhouse-view-tab',
-								'explorer-view-option',
-								selectedView === clickhouse.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(clickhouse.key)}
-						>
-							<Terminal size={14} data-testid="clickhouse-view" />
-							Clickhouse
-						</Button>
-					</Tooltip>
-				)}
-
-				{table?.show && (
-					<Tooltip title="Table">
-						<Button
-							disabled={table.disabled}
-							className={cx(
-								'table-view-tab',
-								'explorer-view-option',
-								selectedView === table.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(table.key)}
-						>
-							<Binoculars size={14} data-testid="query-builder-view-v2" />
-							Table
-						</Button>
-					</Tooltip>
-				)}
-			</div>
-		</div>
-	);
-}

frontend/src/container/LLMObservability/ToolbarActions/ToolbarActions.styles.scss

@@ -1,125 +0,0 @@
-.left-toolbar {
-	display: flex;
-	align-items: center;
-
-	.filter-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: none;
-		height: 32px;
-		margin-right: 12px;
-		border: 1px solid var(--l1-border);
-	}
-
-	.left-toolbar-query-actions {
-		display: flex;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		flex-direction: row;
-		border-bottom: none;
-		margin-bottom: -1px;
-
-		.prom-ql-icon {
-			height: 14px;
-			width: 14px;
-		}
-
-		.explorer-view-option {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: row;
-			border: none;
-			padding: 9px;
-			box-shadow: none;
-			border-radius: 0px;
-			border-left: 1px solid var(--l1-border);
-			border-bottom: 1px solid var(--l1-border);
-
-			gap: 8px;
-
-			&.active-tab {
-				background-color: var(--primary-background);
-				border-bottom: 1px solid var(--primary-background);
-				color: var(--primary-foreground);
-
-				&:hover {
-					background-color: var(--primary-background) !important;
-				}
-			}
-
-			&:disabled {
-				background-color: var(--l3-background);
-				opacity: 0.6;
-			}
-
-			&:first-child {
-				border-left: 1px solid transparent;
-			}
-
-			&:hover {
-				background-color: transparent !important;
-				border-left: 1px solid transparent !important;
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.frequency-chart-view-controller {
-		display: flex;
-		align-items: center;
-		padding-left: 8px;
-		gap: 8px;
-	}
-}
-
-.right-toolbar {
-	display: flex;
-	align-items: center;
-	background-color: var(--bg-robin-600);
-}
-
-.right-actions {
-	display: flex;
-	align-items: center;
-}
-
-.loading-container {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-
-	.loading-btn {
-		display: flex;
-		width: 32px;
-		height: 33px;
-		padding: 4px 10px;
-		justify-content: center;
-		align-items: center;
-		gap: 6px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		background: var(--l3-background);
-		box-shadow: none;
-		border: none;
-	}
-
-	.cancel-run {
-		display: flex;
-		height: 33px;
-		padding: 4px 10px;
-		justify-content: center;
-		align-items: center;
-		gap: 6px;
-		flex: 1 0 0;
-		border-radius: 2px;
-		background: var(--danger-background);
-		border: none;
-	}
-	.cancel-run:hover {
-		background-color: var(--bg-cherry-400) !important;
-		color: var(--l1-foreground) !important;
-	}
-}

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/container/TopNav/AutoRefreshV2/AutoRefreshTicker.tsx

@@ -1,13 +0,0 @@
-import { useAutoRefreshSelection } from './useAutoRefreshSelection';
-import { useAutoRefreshTick } from './useAutoRefreshTick';
-
-/** Auto-refresh timer for views that hide the time selector that normally owns it. */
-function AutoRefreshTicker(): null {
-	const { isEnabled, intervalMs } = useAutoRefreshSelection();
-
-	useAutoRefreshTick(isEnabled, intervalMs);
-
-	return null;
-}
-
-export default AutoRefreshTicker;

frontend/src/container/TopNav/AutoRefreshV2/__tests__/AutoRefresh.test.tsx

@@ -1,116 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import { act, render, screen } from '@testing-library/react';
-import set from 'api/browser/localstorage/set';
-import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
-import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
-import { AppState } from 'store/reducers';
-import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import AutoRefresh from '../index';
-
-const mockStore = configureStore<Partial<AppState>>([]);
-
-const PATHNAME = '/dashboard/test-id';
-const randomTime = 1700000000000000000;
-
-function createGlobalTimeState(
-	overrides: Partial<GlobalReducer> = {},
-): GlobalReducer {
-	return {
-		minTime: randomTime,
-		maxTime: randomTime,
-		loading: false,
-		selectedTime: '15m',
-		isAutoRefreshDisabled: false,
-		selectedAutoRefreshInterval: '5s',
-		...overrides,
-	};
-}
-
-function renderAutoRefresh(
-	globalTime: GlobalReducer,
-	props: { disabled?: boolean } = {},
-): MockStoreEnhanced<Partial<AppState>> {
-	const store = mockStore({ globalTime });
-
-	render(
-		<MemoryRouter initialEntries={[PATHNAME]}>
-			<Provider store={store}>
-				<AutoRefresh {...props} />
-			</Provider>
-		</MemoryRouter>,
-	);
-
-	return store;
-}
-
-function tickCount(store: MockStoreEnhanced<Partial<AppState>>): number {
-	return store.getActions().filter((a) => a.type === UPDATE_TIME_INTERVAL)
-		.length;
-}
-
-describe('AutoRefresh', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('renders the trigger and ticks on the persisted interval', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderAutoRefresh(createGlobalTimeState());
-
-		expect(screen.getByTitle('Set auto refresh')).toBeInTheDocument();
-
-		act(() => {
-			jest.advanceTimersByTime(15_000);
-		});
-
-		expect(tickCount(store)).toBe(3);
-	});
-
-	it('does not tick when auto refresh was never enabled for the route', () => {
-		const store = renderAutoRefresh(createGlobalTimeState());
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(tickCount(store)).toBe(0);
-	});
-
-	it('does not tick while the disabled prop is set', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderAutoRefresh(createGlobalTimeState(), { disabled: true });
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(tickCount(store)).toBe(0);
-	});
-
-	it('renders nothing on a custom time range', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderAutoRefresh(
-			createGlobalTimeState({ selectedTime: 'custom' }),
-		);
-
-		expect(screen.queryByTitle('Set auto refresh')).not.toBeInTheDocument();
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(tickCount(store)).toBe(0);
-	});
-});

frontend/src/container/TopNav/AutoRefreshV2/__tests__/AutoRefreshTicker.test.tsx

@@ -1,162 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import { act, render } from '@testing-library/react';
-import set from 'api/browser/localstorage/set';
-import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
-import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
-import { AppState } from 'store/reducers';
-import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import AutoRefresh from '../index';
-import AutoRefreshTicker from '../AutoRefreshTicker';
-
-const mockStore = configureStore<Partial<AppState>>([]);
-
-const PATHNAME = '/dashboard/test-id';
-const randomTime = 1700000000000000000;
-
-function createGlobalTimeState(
-	overrides: Partial<GlobalReducer> = {},
-): GlobalReducer {
-	return {
-		minTime: randomTime,
-		maxTime: randomTime,
-		loading: false,
-		selectedTime: '15m',
-		isAutoRefreshDisabled: false,
-		selectedAutoRefreshInterval: '5s',
-		...overrides,
-	};
-}
-
-function renderTicker(
-	globalTime: GlobalReducer,
-): MockStoreEnhanced<Partial<AppState>> {
-	const store = mockStore({ globalTime });
-
-	render(
-		<MemoryRouter initialEntries={[PATHNAME]}>
-			<Provider store={store}>
-				<AutoRefreshTicker />
-			</Provider>
-		</MemoryRouter>,
-	);
-
-	return store;
-}
-
-function timeIntervalActions(
-	store: MockStoreEnhanced<Partial<AppState>>,
-): unknown[] {
-	return store.getActions().filter((a) => a.type === UPDATE_TIME_INTERVAL);
-}
-
-describe('AutoRefreshTicker', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('advances the global time window on the interval persisted for the route', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderTicker(createGlobalTimeState());
-
-		act(() => {
-			jest.advanceTimersByTime(10_000);
-		});
-
-		expect(timeIntervalActions(store)).toHaveLength(2);
-	});
-
-	it('does not tick when the route has no persisted interval', () => {
-		const store = renderTicker(createGlobalTimeState());
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(timeIntervalActions(store)).toHaveLength(0);
-	});
-
-	it('does not tick while auto refresh is globally disabled', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderTicker(
-			createGlobalTimeState({ isAutoRefreshDisabled: true }),
-		);
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(timeIntervalActions(store)).toHaveLength(0);
-	});
-
-	it('does not tick on a custom time range', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = renderTicker(createGlobalTimeState({ selectedTime: 'custom' }));
-
-		act(() => {
-			jest.advanceTimersByTime(60_000);
-		});
-
-		expect(timeIntervalActions(store)).toHaveLength(0);
-	});
-});
-
-// Mirrors DashboardContainer's swap: exactly one of the two must be ticking.
-describe('AutoRefresh full screen handover', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('keeps a single timer running across entering and leaving full screen', () => {
-		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
-
-		const store = mockStore({ globalTime: createGlobalTimeState() });
-
-		function Harness({ active }: { active: boolean }): JSX.Element {
-			return active ? <AutoRefreshTicker /> : <AutoRefresh />;
-		}
-
-		const renderHarness = (active: boolean): JSX.Element => (
-			<MemoryRouter initialEntries={[PATHNAME]}>
-				<Provider store={store}>
-					<Harness active={active} />
-				</Provider>
-			</MemoryRouter>
-		);
-
-		const { rerender } = render(renderHarness(false));
-
-		act(() => {
-			jest.advanceTimersByTime(10_000);
-		});
-		expect(timeIntervalActions(store)).toHaveLength(2);
-
-		rerender(renderHarness(true));
-		act(() => {
-			jest.advanceTimersByTime(10_000);
-		});
-		expect(timeIntervalActions(store)).toHaveLength(4);
-
-		rerender(renderHarness(false));
-		act(() => {
-			jest.advanceTimersByTime(10_000);
-		});
-		expect(timeIntervalActions(store)).toHaveLength(6);
-	});
-});

frontend/src/container/TopNav/AutoRefreshV2/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useInterval } from 'react-use';
 import { Check, ChevronDown } from '@signozhq/icons';
 import { Button, Popover } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
@@ -10,18 +11,21 @@ import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { getMinMaxForSelectedTime } from 'lib/getMinMax';
 import _omit from 'lodash-es/omit';
 // eslint-disable-next-line no-restricted-imports
 import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import { UPDATE_AUTO_REFRESH_INTERVAL } from 'types/actions/globalTime';
+import {
+	UPDATE_AUTO_REFRESH_INTERVAL,
+	UPDATE_TIME_INTERVAL,
+} from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { refreshIntervalOptions } from './constants';
 import { ButtonContainer } from './styles';
-import { useAutoRefreshTick } from './useAutoRefreshTick';
 
 import './AutoRefreshV2.styles.scss';
 
@@ -89,10 +93,30 @@ function AutoRefresh({
 		[selectedOption],
 	);
 
-	useAutoRefreshTick(
-		!isDisabled && isAutoRefreshEnabled && selectedOption !== 'off',
-		getOption?.value || 0,
-	);
+	useInterval(() => {
+		const selectedValue = getOption?.value;
+
+		if (isDisabled || !isAutoRefreshEnabled) {
+			return;
+		}
+
+		if (selectedOption !== 'off' && selectedValue) {
+			const { maxTime, minTime } = getMinMaxForSelectedTime(
+				globalTime.selectedTime,
+				globalTime.minTime,
+				globalTime.maxTime,
+			);
+
+			dispatch({
+				type: UPDATE_TIME_INTERVAL,
+				payload: {
+					maxTime,
+					minTime,
+					selectedTime: globalTime.selectedTime,
+				},
+			});
+		}
+	}, getOption?.value || 0);
 
 	const onChangeHandler = useCallback(
 		(selectedValue: string) => {

frontend/src/container/TopNav/AutoRefreshV2/useAutoRefreshSelection.ts

@@ -1,29 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import get from 'api/browser/localstorage/get';
-import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
-
-import { refreshIntervalOptions } from './constants';
-
-export interface AutoRefreshSelection {
-	isEnabled: boolean;
-	intervalMs: number;
-}
-
-/**
- * An entry for the current route means auto-refresh is on, its absence means off.
- * Read on every render because localStorage isn't reactive.
- */
-export function useAutoRefreshSelection(): AutoRefreshSelection {
-	const { pathname } = useLocation();
-
-	const selectedOption = JSON.parse(get(DASHBOARD_TIME_IN_DURATION) || '{}')[
-		pathname
-	];
-
-	return {
-		isEnabled: Boolean(selectedOption),
-		intervalMs:
-			refreshIntervalOptions.find((option) => option.key === selectedOption)
-				?.value || 0,
-	};
-}

frontend/src/container/TopNav/AutoRefreshV2/useAutoRefreshTick.ts

@@ -1,47 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { useInterval } from 'react-use';
-import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-// eslint-disable-next-line no-restricted-imports
-import { Dispatch } from 'redux';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-/**
- * Advances the global time window on the auto-refresh interval. The global
- * "auto refresh disabled" flag and a custom range override the caller's `enabled`.
- */
-export function useAutoRefreshTick(enabled: boolean, intervalMs: number): void {
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	const isTicking =
-		enabled &&
-		intervalMs > 0 &&
-		!globalTime.isAutoRefreshDisabled &&
-		globalTime.selectedTime !== 'custom';
-
-	useInterval(
-		() => {
-			const { maxTime, minTime } = getMinMaxForSelectedTime(
-				globalTime.selectedTime,
-				globalTime.minTime,
-				globalTime.maxTime,
-			);
-
-			dispatch({
-				type: UPDATE_TIME_INTERVAL,
-				payload: {
-					maxTime,
-					minTime,
-					selectedTime: globalTime.selectedTime,
-				},
-			});
-		},
-		isTicking ? intervalMs : null,
-	);
-}

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/lib/uPlotV2/components/ColorBar/ColorBar.module.scss

@@ -0,0 +1,75 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 4px 12px 8px;
+	box-sizing: border-box;
+}
+
+.label {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	color: var(--text-vanilla-400);
+	font-variant-numeric: tabular-nums;
+}
+
+.track {
+	position: relative;
+	flex: 1 1 auto;
+	height: 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+}
+
+.marker {
+	position: absolute;
+	top: -3px;
+	bottom: -3px;
+	width: 2px;
+	transform: translateX(-1px);
+	background: var(--text-vanilla-100);
+	border-radius: 1px;
+}
+
+.caption {
+	flex: 0 0 auto;
+	font-size: 10px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--text-vanilla-400);
+}
+
+.keys {
+	display: flex;
+	flex: 0 0 auto;
+	gap: 12px;
+	align-items: center;
+}
+
+.key {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+	font-size: 11px;
+	color: var(--text-vanilla-400);
+}
+
+.swatch,
+.hatchSwatch {
+	width: 11px;
+	height: 11px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+	box-sizing: border-box;
+}
+
+// Approximates the canvas hatch painted over null cells.
+.hatchSwatch {
+	background-image: repeating-linear-gradient(
+		45deg,
+		transparent 0 2px,
+		var(--text-vanilla-400) 2px 3px
+	);
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/heatmapTooltipContent.ts

@@ -0,0 +1,199 @@
+import { PrecisionOption } from 'components/Graph/types';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { formatRowLabel } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
+import {
+	HeatmapSeries,
+	HeatmapYAxis,
+} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
+
+/** Rows shown either side of the hovered one. */
+const NEIGHBOUR_SPAN = 2;
+/** Below this share a percentage needs a decimal to stay informative. */
+const PERCENT_DECIMAL_THRESHOLD = 10;
+/** Below this, the header needs seconds to distinguish columns. */
+const SUB_MINUTE_STEP = 60;
+
+export const NO_DATA_LABEL = 'no data';
+
+/**
+ * Which question the second block answers. A cell summed across several groups begs
+ * "which group?"; a cell that is already one series begs "how does this bucket
+ * compare with its neighbours?".
+ */
+export enum HeatmapTooltipBody {
+	Buckets = 'buckets',
+	Contribution = 'contribution',
+}
+
+export interface HeatmapBucketRow {
+	label: string;
+	count: number | null;
+	isHovered: boolean;
+}
+
+export interface HeatmapContributionRow {
+	label: string;
+	color: string;
+	count: number;
+	/** Share of the cell's total, 0..100. */
+	percent: number;
+}
+
+export function resolveTooltipBody(visibleCount: number): HeatmapTooltipBody {
+	// One enabled group contributes the whole cell, so there is nothing to break
+	// down — whether the query is ungrouped or the legend has isolated a group.
+	return visibleCount > 1
+		? HeatmapTooltipBody.Contribution
+		: HeatmapTooltipBody.Buckets;
+}
+
+/** A cell is an interval, so a single instant would misreport which observations
+ *  it contains. The date is left to the x axis directly below. */
+export function formatColumnRange({
+	start,
+	step,
+	timezone,
+}: {
+	/** Column start, in seconds. */
+	start: number;
+	/** Column width, in seconds. */
+	step: number;
+	timezone: string;
+}): string {
+	const format =
+		step < SUB_MINUTE_STEP
+			? DATE_TIME_FORMATS.TIME_SECONDS
+			: DATE_TIME_FORMATS.TIME;
+	const from = dayjs(start * 1000).tz(timezone);
+	const to = dayjs((start + step) * 1000).tz(timezone);
+	return `${from.format(format)} → ${to.format(format)}`;
+}
+
+/** Formatted with the panel's unit. */
+export function formatBucketLabel({
+	yAxis,
+	row,
+	yAxisUnit,
+	decimalPrecision,
+}: {
+	yAxis: HeatmapYAxis;
+	row: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+}): string {
+	const bucket = yAxis.rows[row];
+	if (!bucket) {
+		return '';
+	}
+	return formatRowLabel(bucket, (value) =>
+		getToolTipValue(String(value), yAxisUnit, decimalPrecision),
+	);
+}
+
+export function formatCount(count: number | null): string {
+	return count === null ? NO_DATA_LABEL : count.toLocaleString();
+}
+
+export function formatPercent(percent: number): string {
+	return percent >= PERCENT_DECIMAL_THRESHOLD
+		? `${Math.round(percent)}%`
+		: `${percent.toFixed(1)}%`;
+}
+
+/** Names the group the grid is currently isolated to. */
+export function formatGroupFilter(series: HeatmapSeries | undefined): string {
+	if (!series) {
+		return '';
+	}
+	if (!series.labels?.length) {
+		return series.label;
+	}
+	return series.labels
+		.map((label) => `${label.key} = ${label.value}`)
+		.join(', ');
+}
+
+/** The `groupBy` keys the breakdown is by. */
+export function resolveGroupByLabel(series: HeatmapSeries[]): string {
+	const keys = series[0]?.labels?.map((label) => label.key) ?? [];
+	return keys.join(', ');
+}
+
+function formatSeriesValue(series: HeatmapSeries): string {
+	if (!series.labels?.length) {
+		return series.label;
+	}
+	return series.labels.map((label) => label.value).join(', ');
+}
+
+/** Highest first, so the list reads in the same direction as the y axis. */
+export function buildBucketRows({
+	counts,
+	yAxis,
+	row,
+	column,
+	yAxisUnit,
+	decimalPrecision,
+}: {
+	/** Row-major, as the renderer draws them. */
+	counts: Array<ArrayLike<number | null> | undefined>;
+	yAxis: HeatmapYAxis;
+	row: number;
+	column: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+}): HeatmapBucketRow[] {
+	const formatBucketValue = (value: number): string =>
+		getToolTipValue(String(value), yAxisUnit, decimalPrecision);
+
+	const rows: HeatmapBucketRow[] = [];
+	for (let offset = NEIGHBOUR_SPAN; offset >= -NEIGHBOUR_SPAN; offset -= 1) {
+		const index = row + offset;
+		const bucket = yAxis.rows[index];
+		if (!bucket) {
+			continue;
+		}
+		rows.push({
+			label: formatRowLabel(bucket, formatBucketValue),
+			count: counts[index]?.[column] ?? null,
+			isHovered: offset === 0,
+		});
+	}
+	return rows;
+}
+
+/**
+ * Largest first. Groups that contributed nothing are still listed — that is an
+ * answer, and dropping the row makes the list look truncated.
+ */
+export function buildContributionRows({
+	series,
+	timestamp,
+	row,
+	color,
+}: {
+	/** Only the groups the legend has enabled — they are what the cell sums. */
+	series: HeatmapSeries[];
+	/** Column start, in seconds. */
+	timestamp: number;
+	row: number;
+	color: string;
+}): HeatmapContributionRow[] {
+	const counts = series.map((entry) => {
+		const point = entry.points.find((item) => item.timestamp === timestamp);
+		// Absent or null contributed nothing to the sum, which is what this breaks down.
+		return point?.counts[row] ?? 0;
+	});
+	const total = counts.reduce((sum, count) => sum + count, 0);
+
+	return series
+		.map((entry, index) => ({
+			label: formatSeriesValue(entry),
+			color,
+			count: counts[index],
+			percent: total > 0 ? (counts[index] / total) * 100 : 0,
+		}))
+		.sort((a, b) => b.count - a.count);
+}

frontend/src/lib/uPlotV2/components/types.ts

@@ -5,6 +5,7 @@ import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
+import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -103,6 +104,21 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 export interface HistogramTooltipProps
 	extends BaseTooltipProps, TooltipRenderArgs {}
 
+/** Not part of `TooltipProps`: it renders its own container, since none of its
+ *  states is the flat series list the shared `Tooltip` draws. */
+export interface HeatmapTooltipProps
+	extends BaseTooltipProps, TooltipRenderArgs {
+	yAxis: HeatmapYAxis;
+	/** Column width in seconds. */
+	step: number;
+	/** Needed to break a summed cell down by contribution. */
+	series: HeatmapSeries[];
+	/** Groups the legend has enabled; the cell sums exactly these. */
+	visibleGroups: string[];
+	/** Same colour the legend and the densest cells use. */
+	groupColor: string;
+}
+
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -148,6 +148,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			show = true,
 			side = 2, // bottom by default
 			space,
+			splits,
 			gap = 5, // default gap is 5
 		} = this.props;
 
@@ -179,6 +180,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (values) {
 			axisConfig.values = values;
 		}
+		if (splits) {
+			axisConfig.splits = splits;
+		}
 		if (gap !== undefined) {
 			axisConfig.gap = gap;
 		}

frontend/src/lib/uPlotV2/config/UPlotScaleBuilder.ts

@@ -46,6 +46,13 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 
 		// Special handling for time scales (X axis)
 		if (time) {
+			// An explicit range wins: the alignment below trims the tail of the window
+			// to whole minutes, which is right for point-based series but drops the
+			// final column of any chart whose marks span an interval.
+			if (range) {
+				return { [scaleKey]: { time: true, auto: false, range } };
+			}
+
 			let minTime = this.min ?? 0;
 			let maxTime = this.max ?? 0;
 

frontend/src/lib/uPlotV2/config/types.ts

@@ -78,6 +78,8 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
+	/** Explicit axis splits, overriding the default tick calculation. */
+	splits?: uPlot.Axis.Splits;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/colorScale.test.ts

@@ -0,0 +1,207 @@
+import {
+	clampColorSteps,
+	createHeatmapColorResolver,
+	DEFAULT_COLOR_STEPS,
+	DEFAULT_HEATMAP_COLORS,
+	getMaxCount,
+	MAX_COLOR_STEPS,
+	MIN_OPACITY_ALPHA,
+	normalizeCount,
+	resolveCountDomain,
+} from '../colorScale';
+import { HeatmapColorMode, HeatmapColorScale } from '../types';
+
+const SERIES_COLOR = '#4e74f8';
+
+describe('getMaxCount', () => {
+	it('ignores null cells', () => {
+		expect(
+			getMaxCount([
+				[1, null, 9],
+				[null, 4],
+			]),
+		).toBe(9);
+	});
+
+	it('returns 0 for an empty or all-null grid', () => {
+		expect(getMaxCount([])).toBe(0);
+		expect(getMaxCount([[null, null]])).toBe(0);
+	});
+
+	it('ignores non-finite counts', () => {
+		expect(getMaxCount([[3, Number.POSITIVE_INFINITY, Number.NaN]])).toBe(3);
+	});
+});
+
+describe('resolveCountDomain', () => {
+	it('floors at 0 on auto so a zero count sits at the bottom of the scale', () => {
+		expect(
+			resolveCountDomain({ minCount: null, maxCount: null }, [[5, 20]]),
+		).toStrictEqual({
+			min: 0,
+			max: 20,
+		});
+	});
+
+	it('honours explicit clamps', () => {
+		expect(
+			resolveCountDomain({ minCount: 10, maxCount: 100 }, [[5, 20]]),
+		).toStrictEqual({
+			min: 10,
+			max: 100,
+		});
+	});
+
+	it('collapses a max at or below min', () => {
+		expect(
+			resolveCountDomain({ minCount: 50, maxCount: 10 }, [[5]]),
+		).toStrictEqual({
+			min: 50,
+			max: 50,
+		});
+	});
+});
+
+describe('normalizeCount', () => {
+	const domain = { min: 0, max: 1000 };
+
+	it('spreads low counts on a log scale where a linear one washes them out', () => {
+		const log = (count: number): number =>
+			normalizeCount({ count, domain, scale: HeatmapColorScale.Log });
+
+		expect(log(10)).toBeCloseTo(1 / 3, 5);
+		expect(log(20)).toBeCloseTo(Math.log10(20) / 3, 5);
+		expect(
+			normalizeCount({ count: 10, domain, scale: HeatmapColorScale.Linear }),
+		).toBeCloseTo(0.01, 5);
+	});
+
+	it('puts 0 and 1 at the bottom of a log scale', () => {
+		expect(
+			normalizeCount({ count: 0, domain, scale: HeatmapColorScale.Log }),
+		).toBe(0);
+		expect(
+			normalizeCount({ count: 1, domain, scale: HeatmapColorScale.Log }),
+		).toBe(0);
+	});
+
+	it('reaches the top of the scale at max on every scale', () => {
+		[
+			HeatmapColorScale.Log,
+			HeatmapColorScale.Sqrt,
+			HeatmapColorScale.Linear,
+		].forEach((scale) => {
+			expect(normalizeCount({ count: 1000, domain, scale })).toBeCloseTo(1, 6);
+		});
+	});
+
+	it('takes the square root of the linear position on a sqrt scale', () => {
+		expect(
+			normalizeCount({
+				count: 250,
+				domain: { min: 0, max: 1000 },
+				scale: HeatmapColorScale.Sqrt,
+			}),
+		).toBeCloseTo(0.5, 6);
+	});
+
+	it('clamps counts outside the domain', () => {
+		const scale = HeatmapColorScale.Linear;
+		expect(normalizeCount({ count: -5, domain, scale })).toBe(0);
+		expect(normalizeCount({ count: 5000, domain, scale })).toBe(1);
+	});
+
+	it('returns the bottom of the scale when min equals max', () => {
+		expect(
+			normalizeCount({
+				count: 7,
+				domain: { min: 7, max: 7 },
+				scale: HeatmapColorScale.Log,
+			}),
+		).toBe(0);
+	});
+
+	it('handles a log domain whose min and max share a decade floor', () => {
+		expect(
+			normalizeCount({
+				count: 1,
+				domain: { min: 0, max: 1 },
+				scale: HeatmapColorScale.Log,
+			}),
+		).toBe(0);
+	});
+});
+
+describe('clampColorSteps', () => {
+	it('clamps to the supported range', () => {
+		expect(clampColorSteps(1)).toBe(2);
+		expect(clampColorSteps(500)).toBe(MAX_COLOR_STEPS);
+		expect(clampColorSteps(32)).toBe(32);
+	});
+
+	it('falls back to the default for a non-finite value', () => {
+		expect(clampColorSteps(Number.NaN)).toBe(DEFAULT_COLOR_STEPS);
+	});
+});
+
+describe('createHeatmapColorResolver', () => {
+	const build = (
+		overrides: Partial<typeof DEFAULT_HEATMAP_COLORS> = {},
+		isDarkMode = true,
+	): ReturnType<typeof createHeatmapColorResolver> =>
+		createHeatmapColorResolver({
+			options: { ...DEFAULT_HEATMAP_COLORS, ...overrides },
+			domain: { min: 0, max: 1000 },
+			isDarkMode,
+			seriesColor: SERIES_COLOR,
+		});
+
+	it('leaves null cells uncoloured so they can be hatched', () => {
+		const resolver = build();
+
+		expect(resolver.colorFor(null)).toBeNull();
+		expect(resolver.positionOf(null)).toBeNull();
+	});
+
+	it('gives a zero count the bottom colour, not the null treatment', () => {
+		const resolver = build();
+
+		expect(resolver.colorFor(0)).toBe(resolver.ramp[0]);
+	});
+
+	it('emits one ramp entry per step', () => {
+		expect(build({ steps: 8 }).ramp).toHaveLength(8);
+	});
+
+	it('maps the max count to the top of the ramp', () => {
+		const resolver = build({ steps: 8 });
+
+		expect(resolver.colorFor(1000)).toBe(resolver.ramp[7]);
+	});
+
+	it('picks different stops per theme so low counts stay near the surface', () => {
+		expect(build({}, true).ramp[0]).not.toBe(build({}, false).ramp[0]);
+	});
+
+	it('varies alpha in opacity mode, never below the visibility floor', () => {
+		const resolver = build({ mode: HeatmapColorMode.Opacity, steps: 4 });
+
+		expect(resolver.ramp[0]).toBe(`rgba(78, 116, 248, ${MIN_OPACITY_ALPHA})`);
+		// `color` drops the alpha channel from the string once it reaches 1.
+		expect(resolver.ramp[3]).toBe('rgb(78, 116, 248)');
+	});
+
+	it('prefers an explicit opacity fill over the series colour', () => {
+		const resolver = build({
+			mode: HeatmapColorMode.Opacity,
+			fill: '#e5484d',
+			steps: 2,
+		});
+
+		expect(resolver.ramp[1]).toBe('rgb(229, 72, 77)');
+	});
+
+	it('reports the domain it applied', () => {
+		expect(build().domain).toStrictEqual({ min: 0, max: 1000 });
+	});
+});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/geometry.test.ts

@@ -0,0 +1,356 @@
+import {
+	canUseLogAxis,
+	decimateAxisSplits,
+	formatRowLabel,
+	resolveColumnIndex,
+	resolveHeatmapYAxis,
+	resolveRowIndex,
+} from '../geometry';
+import { HeatmapAxisScale } from '../types';
+
+const BOUNDS = [128, 256, 1024, 4096];
+
+describe('canUseLogAxis', () => {
+	it('accepts strictly positive bounds', () => {
+		expect(canUseLogAxis(BOUNDS)).toBe(true);
+	});
+
+	it('rejects a zero or negative bound', () => {
+		expect(canUseLogAxis([0, 128])).toBe(false);
+		expect(canUseLogAxis([-1, 128])).toBe(false);
+	});
+
+	it('rejects empty bounds', () => {
+		expect(canUseLogAxis([])).toBe(false);
+	});
+});
+
+describe('resolveHeatmapYAxis', () => {
+	it('turns N bounds into N+1 rows with underflow and overflow at the ends', () => {
+		const { rows } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
+
+		expect(rows).toHaveLength(BOUNDS.length + 1);
+		expect(rows[0]).toMatchObject({
+			upper: 128,
+			isUnderflow: true,
+			isOverflow: false,
+		});
+		expect(rows[1]).toMatchObject({ lower: 128, upper: 256 });
+		expect(rows[4]).toMatchObject({
+			lower: 4096,
+			isOverflow: true,
+			isUnderflow: false,
+		});
+	});
+
+	it('exposes one edge per row boundary, ascending', () => {
+		const { rows, edges } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
+
+		expect(edges).toHaveLength(rows.length + 1);
+		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
+	});
+
+	it('places bounds in log space so row heights are log-proportional', () => {
+		const { splits, min, max } = resolveHeatmapYAxis(
+			BOUNDS,
+			HeatmapAxisScale.Log,
+		);
+
+		expect(splits).toStrictEqual(BOUNDS.map((bound) => Math.log10(bound)));
+		// Outer edges extend by the geometric mean ratio, (4096/128)^(1/3) = 3.174…
+		expect(10 ** min).toBeCloseTo(128 / (4096 / 128) ** (1 / 3), 6);
+		expect(10 ** max).toBeCloseTo(4096 * (4096 / 128) ** (1 / 3), 6);
+	});
+
+	it('keeps bounds in value space on a linear axis', () => {
+		const { splits, min } = resolveHeatmapYAxis(
+			[10, 20, 30],
+			HeatmapAxisScale.Linear,
+		);
+
+		expect(splits).toStrictEqual([10, 20, 30]);
+		// Mean gap is 10, and the underflow edge never crosses zero.
+		expect(min).toBe(0);
+	});
+
+	it('sorts and de-duplicates bounds', () => {
+		const { rows, splits } = resolveHeatmapYAxis(
+			[256, 128, 256, Number.NaN],
+			HeatmapAxisScale.Log,
+		);
+
+		expect(splits).toStrictEqual([Math.log10(128), Math.log10(256)]);
+		expect(rows).toHaveLength(3);
+	});
+
+	it('gives a single bound an underflow and an overflow row', () => {
+		const { rows, edges } = resolveHeatmapYAxis([100], HeatmapAxisScale.Log);
+
+		expect(rows).toHaveLength(2);
+		expect(rows[0].isUnderflow).toBe(true);
+		expect(rows[1].isOverflow).toBe(true);
+		expect(edges).toHaveLength(3);
+	});
+
+	it('degrades to an empty axis with no bounds', () => {
+		expect(resolveHeatmapYAxis([], HeatmapAxisScale.Log).rows).toStrictEqual([]);
+	});
+
+	it('puts the overflow label on the row"s upper edge, clear of the last boundary', () => {
+		const { overflowSplit, edges } = resolveHeatmapYAxis(
+			BOUNDS,
+			HeatmapAxisScale.Log,
+		);
+
+		// A full row above the last boundary tick, so the two labels cannot collide.
+		expect(overflowSplit).toBe(edges[edges.length - 1]);
+	});
+});
+
+describe('resolveRowIndex', () => {
+	const { edges } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Linear);
+
+	it('finds the row containing a value', () => {
+		expect(resolveRowIndex(edges, 200)).toBe(1);
+		expect(resolveRowIndex(edges, 2000)).toBe(3);
+	});
+
+	it('assigns a boundary to the row it opens', () => {
+		expect(resolveRowIndex(edges, 256)).toBe(2);
+	});
+
+	it('returns the last row on the top edge', () => {
+		expect(resolveRowIndex(edges, edges[edges.length - 1])).toBe(
+			edges.length - 2,
+		);
+	});
+
+	it('returns null outside the grid', () => {
+		expect(resolveRowIndex(edges, edges[0] - 1)).toBeNull();
+		expect(resolveRowIndex(edges, edges[edges.length - 1] + 1)).toBeNull();
+	});
+
+	it('returns null without at least one row', () => {
+		expect(resolveRowIndex([5], 5)).toBeNull();
+	});
+});
+
+describe('resolveColumnIndex', () => {
+	const timestamps = [100, 160, 220, 280];
+	const step = 60;
+
+	it('resolves by containment, not proximity', () => {
+		// 155 is nearer to 160, but the observations at 155 belong to column 0.
+		expect(resolveColumnIndex(timestamps, 155, step)).toBe(0);
+		expect(resolveColumnIndex(timestamps, 160, step)).toBe(1);
+	});
+
+	it('includes the column start and excludes its end', () => {
+		expect(resolveColumnIndex(timestamps, 100, step)).toBe(0);
+		expect(resolveColumnIndex(timestamps, 159.9, step)).toBe(0);
+	});
+
+	it('covers the trailing column using the step, not the next timestamp', () => {
+		expect(resolveColumnIndex(timestamps, 330, step)).toBe(3);
+		expect(resolveColumnIndex(timestamps, 340, step)).toBeNull();
+	});
+
+	it('returns null before the first column', () => {
+		expect(resolveColumnIndex(timestamps, 99, step)).toBeNull();
+	});
+
+	it('returns null with no columns', () => {
+		expect(resolveColumnIndex([], 100, step)).toBeNull();
+	});
+
+	it('leaves the last column open when the step is unknown', () => {
+		expect(resolveColumnIndex(timestamps, 10_000, 0)).toBe(3);
+	});
+});
+
+describe('formatRowLabel', () => {
+	const format = (value: number): string => `${value}ms`;
+	const { rows } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
+
+	it('labels the underflow row by its only real bound', () => {
+		expect(formatRowLabel(rows[0], format)).toBe('≤ 128ms');
+	});
+
+	it('labels the overflow row by its only real bound', () => {
+		expect(formatRowLabel(rows[rows.length - 1], format)).toBe('> 4096ms');
+	});
+
+	it('labels an interior row as a range', () => {
+		expect(formatRowLabel(rows[1], format)).toBe('128ms – 256ms');
+	});
+});
+
+describe('decimateAxisSplits', () => {
+	const splits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+	const domain = { min: 0, max: 10 };
+
+	it('keeps every tick when they all fit', () => {
+		expect(
+			decimateAxisSplits({ ...domain, splits, plotHeight: 400, minGapPx: 18 }),
+		).toStrictEqual(splits);
+	});
+
+	it('thins to whatever fits at the available height', () => {
+		// 11 ticks over 100px is 10px apart; an 18px floor keeps every other one.
+		expect(
+			decimateAxisSplits({ ...domain, splits, plotHeight: 100, minGapPx: 18 }),
+		).toStrictEqual([0, 2, 4, 6, 8, 10]);
+	});
+
+	it('always keeps the topmost tick, so the overflow edge survives thinning', () => {
+		const thinned = decimateAxisSplits({
+			...domain,
+			splits,
+			plotHeight: 40,
+			minGapPx: 18,
+		});
+
+		expect(thinned[thinned.length - 1]).toBe(10);
+	});
+
+	it('returns ascending positions', () => {
+		const thinned = decimateAxisSplits({
+			...domain,
+			splits,
+			plotHeight: 60,
+			minGapPx: 18,
+		});
+
+		expect([...thinned].sort((a, b) => a - b)).toStrictEqual(thinned);
+	});
+
+	it('thins by pixel distance, not index, so uneven rows are handled', () => {
+		// Three boundaries bunched at the bottom of a wide linear domain: only the
+		// first and the far-away last are far enough apart to both get labels.
+		expect(
+			decimateAxisSplits({
+				splits: [1, 2, 3, 1000],
+				min: 0,
+				max: 1000,
+				plotHeight: 200,
+				minGapPx: 18,
+			}),
+		).toStrictEqual([3, 1000]);
+	});
+
+	it('leaves the tick set alone when it cannot measure', () => {
+		expect(
+			decimateAxisSplits({ ...domain, splits, plotHeight: 0, minGapPx: 18 }),
+		).toStrictEqual(splits);
+		expect(
+			decimateAxisSplits({
+				splits,
+				min: 5,
+				max: 5,
+				plotHeight: 400,
+				minGapPx: 18,
+			}),
+		).toStrictEqual(splits);
+	});
+});
+
+describe('resolveHeatmapYAxis — symmetric log', () => {
+	// The OTel SDK default explicit bucket boundaries, which start at zero.
+	const OTEL = [
+		0, 5, 10, 25, 50, 75, 100, 250, 500, 750, 1000, 2500, 5000, 7500, 10000,
+	];
+	// Clock skew in ms — a logs/traces field that straddles zero.
+	const SKEW = [-1000, -100, -10, -1, 0, 1, 10, 100, 1000];
+
+	const PLOT_HEIGHT = 250;
+
+	/** Row heights in axis units, which map linearly to pixels. */
+	function rowHeights(bounds: number[]): number[] {
+		const { edges } = resolveHeatmapYAxis(bounds, HeatmapAxisScale.Log);
+		return edges.slice(1).map((edge, index) => edge - edges[index]);
+	}
+
+	/** Shortest row, in pixels, for a plot of `PLOT_HEIGHT`. */
+	function shortestRowPx(bounds: number[], scale: HeatmapAxisScale): number {
+		const { edges } = resolveHeatmapYAxis(bounds, scale);
+		const span = edges[edges.length - 1] - edges[0];
+		const heights = edges
+			.slice(1)
+			.map((edge, index) => ((edge - edges[index]) / span) * PLOT_HEIGHT);
+		return Math.min(...heights);
+	}
+
+	it('keeps a zero boundary on a log axis instead of giving up to linear', () => {
+		const { splits } = resolveHeatmapYAxis([0, 5, 10], HeatmapAxisScale.Log);
+
+		// A linear fallback would leave the boundaries untransformed.
+		expect(splits).not.toStrictEqual([0, 5, 10]);
+	});
+
+	it('gives every row a usable height for the OTel default boundaries', () => {
+		// Linear squeezes the 0–100ms buckets — where the data is — under a pixel.
+		expect(shortestRowPx(OTEL, HeatmapAxisScale.Linear)).toBeLessThan(1);
+		expect(shortestRowPx(OTEL, HeatmapAxisScale.Log)).toBeGreaterThan(4);
+	});
+
+	it('gives the zero-crossing row a full decade, since it cannot be compressed', () => {
+		const heights = rowHeights(OTEL);
+		const { rows } = resolveHeatmapYAxis(OTEL, HeatmapAxisScale.Log);
+		const nearZero = rows.findIndex((row) => row.lower === 0 && row.upper === 5);
+
+		// One axis unit — the same space a decade gets above the threshold.
+		expect(heights[nearZero]).toBeCloseTo(1, 6);
+	});
+
+	it('places boundaries either side of zero symmetrically', () => {
+		const heights = rowHeights(SKEW);
+
+		expect(Math.max(...heights) - Math.min(...heights)).toBeCloseTo(0, 6);
+	});
+
+	it('keeps negative boundaries ascending', () => {
+		const { edges } = resolveHeatmapYAxis(SKEW, HeatmapAxisScale.Log);
+
+		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
+	});
+
+	it('round-trips a boundary back to its bucket value', () => {
+		const { splits, toBucketValue } = resolveHeatmapYAxis(
+			SKEW,
+			HeatmapAxisScale.Log,
+		);
+
+		expect(
+			splits.map((split) => Math.round(toBucketValue(split) * 1e6) / 1e6),
+		).toStrictEqual(SKEW);
+	});
+
+	it('derives the linear threshold from the smallest non-zero boundary', () => {
+		// Threshold 10 puts -10 at -1 and 0 at 0 in axis space.
+		const { edges, rows } = resolveHeatmapYAxis(
+			[-100, -10, 0, 10, 100],
+			HeatmapAxisScale.Log,
+		);
+		const crossing = rows.findIndex(
+			(row) => row.lower === -10 && row.upper === 0,
+		);
+
+		expect(edges[crossing]).toBeCloseTo(-1, 6);
+		expect(edges[crossing + 1]).toBeCloseTo(0, 6);
+	});
+
+	it('leaves an all-positive layout on a plain log axis', () => {
+		const { splits } = resolveHeatmapYAxis(
+			[128, 256, 1024],
+			HeatmapAxisScale.Log,
+		);
+
+		expect(splits).toStrictEqual([128, 256, 1024].map((b) => Math.log10(b)));
+	});
+
+	it('falls back to linear when every boundary is zero', () => {
+		const { splits } = resolveHeatmapYAxis([0], HeatmapAxisScale.Log);
+
+		expect(splits).toStrictEqual([0]);
+	});
+});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/grid.test.ts

@@ -0,0 +1,176 @@
+import { resolveHeatmapGrid } from '../grid';
+import { HeatmapSeries } from '../types';
+
+const BUCKETS = [10, 20];
+const STEP = 60;
+
+/** Two groups over two columns, each missing a value the other reports. */
+const TWO_GROUPS: HeatmapSeries[] = [
+	{
+		label: 'cart',
+		points: [
+			{ timestamp: 60, counts: [1, 2, 3] },
+			{ timestamp: 120, counts: [null, 5, 6] },
+		],
+	},
+	{
+		label: 'checkout',
+		points: [
+			{ timestamp: 60, counts: [10, 20, 30] },
+			{ timestamp: 120, counts: [40, null, 60] },
+		],
+	},
+];
+
+function resolve(
+	overrides: Partial<Parameters<typeof resolveHeatmapGrid>[0]> = {},
+): ReturnType<typeof resolveHeatmapGrid> {
+	return resolveHeatmapGrid({
+		buckets: BUCKETS,
+		step: STEP,
+		series: TWO_GROUPS,
+		...overrides,
+	});
+}
+
+describe('resolveHeatmapGrid', () => {
+	it('pivots per-timestamp count arrays into one row per bucket', () => {
+		const { counts } = resolve({ series: [TWO_GROUPS[0]] });
+
+		// 2 boundaries describe 3 rows; each row spans both columns.
+		expect(counts).toStrictEqual([
+			[1, null],
+			[2, 5],
+			[3, 6],
+		]);
+	});
+
+	it('carries the bounds and step through untouched', () => {
+		const { bounds, step } = resolve();
+
+		expect(bounds).toStrictEqual(BUCKETS);
+		expect(step).toBe(STEP);
+	});
+
+	it('sums every group for the combined view', () => {
+		const { counts } = resolve();
+
+		expect(counts[0]).toStrictEqual([11, 40]);
+		expect(counts[2]).toStrictEqual([33, 66]);
+	});
+
+	it('keeps one group"s count where the other has no data', () => {
+		const { counts } = resolve();
+
+		// cart is null at 120 in row 0 while checkout reports 40.
+		expect(counts[0][1]).toBe(40);
+		// checkout is null at 120 in row 1 while cart reports 5.
+		expect(counts[1][1]).toBe(5);
+	});
+
+	it('reports a cell as no-data only when every group is missing it', () => {
+		const { counts } = resolve({
+			buckets: [10],
+			series: [
+				{ label: 'a', points: [{ timestamp: 60, counts: [null, null] }] },
+				{ label: 'b', points: [{ timestamp: 60, counts: [null, null] }] },
+			],
+		});
+
+		expect(counts).toStrictEqual([[null], [null]]);
+	});
+
+	it('distinguishes a zero count from no data', () => {
+		const { counts } = resolve({
+			buckets: [10],
+			series: [{ label: 'a', points: [{ timestamp: 60, counts: [0, null] }] }],
+		});
+
+		expect(counts[0][0]).toBe(0);
+		expect(counts[1][0]).toBeNull();
+	});
+
+	it('sums only the groups the legend has enabled', () => {
+		const { counts } = resolve({ visibleGroups: ['cart'] });
+
+		expect(counts[0]).toStrictEqual([1, null]);
+		expect(counts[2]).toStrictEqual([3, 6]);
+	});
+
+	it('sums every group when the legend passes nothing', () => {
+		const { counts } = resolve({ visibleGroups: undefined });
+
+		expect(counts[0]).toStrictEqual([11, 40]);
+	});
+
+	it('ignores an enabled label that left the result', () => {
+		const { counts } = resolve({ visibleGroups: ['cart', 'gone'] });
+
+		expect(counts[0]).toStrictEqual([1, null]);
+	});
+
+	it('empties the grid when every group is excluded', () => {
+		const { timestamps, counts } = resolve({ visibleGroups: [] });
+
+		expect(timestamps).toStrictEqual([]);
+		expect(counts.every((row) => row.length === 0)).toBe(true);
+	});
+
+	it('unions timestamps when groups do not align', () => {
+		const { timestamps, counts } = resolve({
+			buckets: [10],
+			series: [
+				{ label: 'a', points: [{ timestamp: 60, counts: [1, 2] }] },
+				{ label: 'b', points: [{ timestamp: 180, counts: [3, 4] }] },
+			],
+		});
+
+		expect(timestamps).toStrictEqual([60, 180]);
+		expect(counts[0]).toStrictEqual([1, 3]);
+	});
+
+	it('sorts columns ascending regardless of response order', () => {
+		const { timestamps } = resolve({
+			buckets: [10],
+			series: [
+				{
+					label: 'a',
+					points: [
+						{ timestamp: 180, counts: [1, 2] },
+						{ timestamp: 60, counts: [3, 4] },
+					],
+				},
+			],
+		});
+
+		expect(timestamps).toStrictEqual([60, 180]);
+	});
+
+	it('pads rows the response left short', () => {
+		const { counts } = resolve({
+			buckets: [10, 20, 30],
+			series: [{ label: 'a', points: [{ timestamp: 60, counts: [1, 2] }] }],
+		});
+
+		expect(counts).toStrictEqual([[1], [2], [null], [null]]);
+	});
+
+	it('ignores counts beyond the bucket rows', () => {
+		const { counts } = resolve({
+			buckets: [10],
+			series: [{ label: 'a', points: [{ timestamp: 60, counts: [1, 2, 99] }] }],
+		});
+
+		expect(counts).toStrictEqual([[1], [2]]);
+	});
+
+	it('degrades to an empty grid with no buckets or no series', () => {
+		expect(resolve({ buckets: [] })).toStrictEqual({
+			bounds: [],
+			timestamps: [],
+			step: 0,
+			counts: [],
+		});
+		expect(resolve({ series: [] }).counts).toStrictEqual([]);
+	});
+});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/heatmapPlugin.test.ts

@@ -0,0 +1,289 @@
+import type uPlot from 'uplot';
+
+import { DEFAULT_HEATMAP_COLORS } from '../colorScale';
+import { resolveHeatmapYAxis } from '../geometry';
+import { createHeatmapHooks } from '../heatmapPlugin';
+import { HeatmapAxisScale, HeatmapCell } from '../types';
+
+const BOUNDS = [100, 1000];
+const Y_AXIS = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Linear);
+const TIMESTAMPS = [1000, 1060, 1120];
+const STEP = 60;
+const PLOT_WIDTH = 300;
+const PLOT_HEIGHT = 300;
+
+// Three rows for two bounds, three columns; row 1 column 1 is a data gap.
+const DATA = [
+	TIMESTAMPS,
+	[1, 2, 3],
+	[4, null, 6],
+	[7, 8, 9],
+] as unknown as uPlot.AlignedData;
+
+interface FakeContext {
+	fillRect: jest.Mock;
+	fills: string[];
+}
+
+interface FakePlot {
+	plot: uPlot;
+	context: FakeContext;
+	setSeries: jest.Mock;
+	over: HTMLDivElement;
+}
+
+function createFakePlot(cursor: { left: number; top: number }): FakePlot {
+	const over = document.createElement('div');
+	Object.defineProperty(over, 'clientWidth', { value: PLOT_WIDTH });
+	Object.defineProperty(over, 'clientHeight', { value: PLOT_HEIGHT });
+
+	const fills: string[] = [];
+	const fillRect = jest.fn();
+	const context = { fills, fillRect };
+	const setSeries = jest.fn();
+
+	const xSpan = TIMESTAMPS[TIMESTAMPS.length - 1] + STEP - TIMESTAMPS[0];
+	const ySpan = Y_AXIS.max - Y_AXIS.min;
+
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		beginPath: jest.fn(),
+		rect: jest.fn(),
+		clip: jest.fn(),
+		moveTo: jest.fn(),
+		lineTo: jest.fn(),
+		stroke: jest.fn(),
+		setLineDash: jest.fn(),
+		createPattern: jest.fn(() => null),
+		set fillStyle(value: string) {
+			fills.push(value);
+		},
+		fillRect: (...args: number[]): void => {
+			fillRect(...args);
+		},
+	};
+
+	const plot = {
+		data: DATA,
+		cursor,
+		over,
+		setSeries,
+		ctx,
+		bbox: { left: 0, top: 0, width: PLOT_WIDTH, height: PLOT_HEIGHT },
+		scales: { x: { min: TIMESTAMPS[0], max: TIMESTAMPS[2] + STEP } },
+		// x grows left to right; y is inverted, so the highest bucket is at the top.
+		valToPos: (value: number, scaleKey: string): number =>
+			scaleKey === 'x'
+				? ((value - TIMESTAMPS[0]) / xSpan) * PLOT_WIDTH
+				: PLOT_HEIGHT - ((value - Y_AXIS.min) / ySpan) * PLOT_HEIGHT,
+		posToVal: (pos: number, scaleKey: string): number =>
+			scaleKey === 'x'
+				? TIMESTAMPS[0] + (pos / PLOT_WIDTH) * xSpan
+				: Y_AXIS.min + ((PLOT_HEIGHT - pos) / PLOT_HEIGHT) * ySpan,
+	};
+
+	return { plot: plot as unknown as uPlot, context, setSeries, over };
+}
+
+function createHooks(
+	onHoverChange?: (cell: HeatmapCell | null) => void,
+	dimOnHover = true,
+): ReturnType<typeof createHeatmapHooks> {
+	return createHeatmapHooks({
+		yAxis: Y_AXIS,
+		step: STEP,
+		colors: DEFAULT_HEATMAP_COLORS,
+		isDarkMode: true,
+		seriesColor: '#4e74f8',
+		dimOnHover,
+		onHoverChange,
+	});
+}
+
+describe('heatmap renderer — lifecycle', () => {
+	it('mounts the hover overlay into the plot overlay and tears it down', () => {
+		const hooks = createHooks();
+		const { plot, over } = createFakePlot({ left: -10, top: -10 });
+
+		hooks.init(plot);
+		expect(
+			over.querySelector('[data-testid="heatmap-hover-overlay"]'),
+		).not.toBeNull();
+
+		hooks.destroy(plot);
+		expect(
+			over.querySelector('[data-testid="heatmap-hover-overlay"]'),
+		).toBeNull();
+	});
+});
+
+describe('heatmap renderer — draw', () => {
+	it('paints every cell of every visible column', () => {
+		const hooks = createHooks();
+		const { plot, context } = createFakePlot({ left: -10, top: -10 });
+
+		hooks.init(plot);
+		hooks.draw(plot);
+
+		// 3 rows x 3 columns, less the one null cell that has no hatch pattern
+		// available under jsdom.
+		expect(context.fillRect).toHaveBeenCalledTimes(8);
+	});
+
+	it('gives a zero count the bottom-of-scale fill rather than skipping it', () => {
+		const hooks = createHooks();
+		const zeroed = [TIMESTAMPS, [0, 0, 0], [0, 0, 0], [0, 0, 0]];
+		const { plot, context } = createFakePlot({ left: -10, top: -10 });
+		(plot as { data: unknown }).data = zeroed;
+
+		hooks.init(plot);
+		hooks.draw(plot);
+
+		expect(context.fillRect).toHaveBeenCalledTimes(9);
+		expect(new Set(context.fills).size).toBe(1);
+	});
+
+	it('skips columns outside the current x range', () => {
+		const hooks = createHooks();
+		const { plot, context } = createFakePlot({ left: -10, top: -10 });
+		(plot as { scales: unknown }).scales = {
+			x: { min: TIMESTAMPS[0], max: TIMESTAMPS[0] + STEP },
+		};
+
+		hooks.init(plot);
+		hooks.draw(plot);
+
+		// Only the first two columns overlap the range; the third starts past its end.
+		// 2 columns x 3 rows, less the null cell in column 1.
+		expect(context.fillRect).toHaveBeenCalledTimes(5);
+	});
+
+	it('draws nothing without columns', () => {
+		const hooks = createHooks();
+		const { plot, context } = createFakePlot({ left: -10, top: -10 });
+		(plot as { data: unknown }).data = [[]];
+
+		hooks.init(plot);
+		hooks.draw(plot);
+
+		expect(context.fillRect).not.toHaveBeenCalled();
+	});
+});
+
+describe('heatmap renderer — hover', () => {
+	it('focuses the hovered row and reports the cell under the cursor', () => {
+		const onHoverChange = jest.fn();
+		const hooks = createHooks(onHoverChange);
+		// Left third of the plot is column 0; the top third is the overflow row.
+		const { plot, setSeries } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+
+		expect(onHoverChange).toHaveBeenCalledWith({ row: 2, column: 0, count: 7 });
+		expect(setSeries).toHaveBeenCalledWith(3, { focus: true });
+	});
+
+	it('reports a data gap as a null count instead of zero', () => {
+		const onHoverChange = jest.fn();
+		const hooks = createHooks(onHoverChange);
+		const { plot } = createFakePlot({
+			left: PLOT_WIDTH / 2,
+			top: PLOT_HEIGHT / 2,
+		});
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+
+		expect(onHoverChange).toHaveBeenCalledWith({
+			row: 1,
+			column: 1,
+			count: null,
+		});
+	});
+
+	it('does not re-report the same cell', () => {
+		const onHoverChange = jest.fn();
+		const hooks = createHooks(onHoverChange);
+		const { plot } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+		hooks.setCursor(plot);
+
+		expect(onHoverChange).toHaveBeenCalledTimes(1);
+	});
+
+	it('shows the overlay over the hovered cell and dims around it', () => {
+		const hooks = createHooks(undefined, true);
+		const { plot, over } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+
+		const overlay = over.querySelector<HTMLDivElement>(
+			'[data-testid="heatmap-hover-overlay"]',
+		);
+		expect(overlay?.style.display).toBe('block');
+		// Column 0 spans the left third of a 300px plot.
+		expect(overlay?.lastElementChild).toHaveStyle({
+			left: '0px',
+			width: '100px',
+		});
+	});
+
+	it('collapses the dim rects when dimming is off', () => {
+		const hooks = createHooks(undefined, false);
+		const { plot, over } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+
+		const overlay = over.querySelector<HTMLDivElement>(
+			'[data-testid="heatmap-hover-overlay"]',
+		);
+		expect(overlay?.firstElementChild).toHaveStyle({
+			width: '0px',
+			height: '0px',
+		});
+	});
+
+	it('releases focus and hides the overlay when the cursor leaves', () => {
+		const onHoverChange = jest.fn();
+		const hooks = createHooks(onHoverChange);
+		const { plot, over, setSeries } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+		(plot as { cursor: { left: number; top: number } }).cursor = {
+			left: -10,
+			top: -10,
+		};
+		hooks.setCursor(plot);
+
+		expect(onHoverChange).toHaveBeenLastCalledWith(null);
+		expect(setSeries).toHaveBeenLastCalledWith(null, { focus: true });
+		expect(
+			over.querySelector<HTMLDivElement>('[data-testid="heatmap-hover-overlay"]')
+				?.style.display,
+		).toBe('none');
+	});
+
+	it('clears the hover when the cursor is inside the plot but past the last column', () => {
+		const onHoverChange = jest.fn();
+		const hooks = createHooks(onHoverChange);
+		const { plot } = createFakePlot({ left: 10, top: 10 });
+
+		hooks.init(plot);
+		hooks.setCursor(plot);
+		(plot as { data: unknown }).data = [[], [], [], []];
+		(plot as { cursor: { left: number; top: number } }).cursor = {
+			left: 10,
+			top: 10,
+		};
+		hooks.setCursor(plot);
+
+		expect(onHoverChange).toHaveBeenLastCalledWith(null);
+	});
+});