chore(release): bump to v0.127.1 (#11606)

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

.github/CODEOWNERS

@@ -188,3 +188,7 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+
+## OpenAPI Schema - Generated
+/frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
+/docs/api/openapi.yml @therealpandey @vikrantgupta25 @srikanthccv

.github/workflows/build-enterprise.yaml

@@ -69,6 +69,8 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
+          echo 'VITE_ENVIRONMENT="production"' >> frontend/.env
+          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/build-staging.yaml

@@ -70,6 +70,8 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
           echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
+          echo 'VITE_ENVIRONMENT="staging"' >> frontend/.env
+          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/gor-signoz.yaml

@@ -35,6 +35,8 @@ jobs:
           echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
           echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
           echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
+          echo 'VITE_ENVIRONMENT="production"' >> .env
+          echo 'VITE_VERSION="${{ github.ref_name }}"' >> .env
       - name: node-setup
         uses: actions/setup-node@v5
         with:

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.127.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.127.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.127.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.127.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -96,6 +96,19 @@ components:
       - createdAt
       - updatedAt
       type: object
+    AlertmanagertypesGoogleChatReceiverConfig:
+      properties:
+        http_config:
+          $ref: '#/components/schemas/ConfigHTTPClientConfig'
+        send_resolved:
+          type: boolean
+        text:
+          type: string
+        title:
+          type: string
+        webhook_url:
+          $ref: '#/components/schemas/ConfigSecretURL'
+      type: object
     AlertmanagertypesMaintenanceKind:
       enum:
       - fixed
@@ -147,6 +160,8 @@ components:
       type: object
     AlertmanagertypesPostableChannel:
       oneOf:
+      - required:
+        - googlechat_configs
       - required:
         - discord_configs
       - required:
@@ -192,6 +207,10 @@ components:
           items:
             $ref: '#/components/schemas/ConfigEmailConfig'
           type: array
+        googlechat_configs:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesGoogleChatReceiverConfig'
+          type: array
         incidentio_configs:
           items:
             $ref: '#/components/schemas/ConfigIncidentioConfig'
@@ -305,6 +324,87 @@ components:
       - channels
       - name
       type: object
+    AlertmanagertypesReceiver:
+      properties:
+        discord_configs:
+          items:
+            $ref: '#/components/schemas/ConfigDiscordConfig'
+          type: array
+        email_configs:
+          items:
+            $ref: '#/components/schemas/ConfigEmailConfig'
+          type: array
+        googlechat_configs:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesGoogleChatReceiverConfig'
+          type: array
+        incidentio_configs:
+          items:
+            $ref: '#/components/schemas/ConfigIncidentioConfig'
+          type: array
+        jira_configs:
+          items:
+            $ref: '#/components/schemas/ConfigJiraConfig'
+          type: array
+        mattermost_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMattermostConfig'
+          type: array
+        msteams_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsConfig'
+          type: array
+        msteamsv2_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
+          type: array
+        name:
+          type: string
+        opsgenie_configs:
+          items:
+            $ref: '#/components/schemas/ConfigOpsGenieConfig'
+          type: array
+        pagerduty_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPagerdutyConfig'
+          type: array
+        pushover_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPushoverConfig'
+          type: array
+        rocketchat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigRocketchatConfig'
+          type: array
+        slack_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSlackConfig'
+          type: array
+        sns_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSNSConfig'
+          type: array
+        telegram_configs:
+          items:
+            $ref: '#/components/schemas/ConfigTelegramConfig'
+          type: array
+        victorops_configs:
+          items:
+            $ref: '#/components/schemas/ConfigVictorOpsConfig'
+          type: array
+        webex_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebexConfig'
+          type: array
+        webhook_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebhookConfig'
+          type: array
+        wechat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWechatConfig'
+          type: array
+      type: object
     AlertmanagertypesRecurrence:
       properties:
         duration:
@@ -870,14 +970,6 @@ components:
       - timestampMillis
       - data
       type: object
-    CloudintegrationtypesAssets:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesDashboard'
-          nullable: true
-          type: array
-      type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
         deploymentRegion:
@@ -1025,17 +1117,6 @@ components:
       - ingestionUrl
       - ingestionKey
       type: object
-    CloudintegrationtypesDashboard:
-      properties:
-        definition:
-          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
-        description:
-          type: string
-        id:
-          type: string
-        title:
-          type: string
-      type: object
     CloudintegrationtypesDataCollected:
       properties:
         logs:
@@ -1209,7 +1290,7 @@ components:
     CloudintegrationtypesService:
       properties:
         assets:
-          $ref: '#/components/schemas/CloudintegrationtypesAssets'
+          $ref: '#/components/schemas/CloudintegrationtypesServiceAssets'
         cloudIntegrationService:
           $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
@@ -1222,8 +1303,6 @@ components:
           type: string
         supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
-        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -1234,9 +1313,17 @@ components:
       - assets
       - supportedSignals
       - dataCollected
-      - telemetryCollectionStrategy
       - cloudIntegrationService
       type: object
+    CloudintegrationtypesServiceAssets:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesServiceDashboard'
+          type: array
+      required:
+      - dashboards
+      type: object
     CloudintegrationtypesServiceConfig:
       properties:
         aws:
@@ -1244,6 +1331,18 @@ components:
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
+    CloudintegrationtypesServiceDashboard:
+      properties:
+        description:
+          type: string
+        integrationDashboard:
+          $ref: '#/components/schemas/CloudintegrationtypesStorableIntegrationDashboard'
+        title:
+          type: string
+      required:
+      - title
+      - description
+      type: object
     CloudintegrationtypesServiceID:
       enum:
       - alb
@@ -1278,6 +1377,30 @@ components:
       - icon
       - enabled
       type: object
+    CloudintegrationtypesStorableIntegrationDashboard:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        dashboardId:
+          type: string
+        id:
+          type: string
+        provider:
+          type: string
+        slug:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - dashboardId
+      - provider
+      - slug
+      - createdAt
+      - updatedAt
+      type: object
     CloudintegrationtypesSupportedSignals:
       properties:
         logs:
@@ -1285,13 +1408,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesTelemetryCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -1849,83 +1965,6 @@ components:
         user_key_file:
           type: string
       type: object
-    ConfigReceiver:
-      properties:
-        discord_configs:
-          items:
-            $ref: '#/components/schemas/ConfigDiscordConfig'
-          type: array
-        email_configs:
-          items:
-            $ref: '#/components/schemas/ConfigEmailConfig'
-          type: array
-        incidentio_configs:
-          items:
-            $ref: '#/components/schemas/ConfigIncidentioConfig'
-          type: array
-        jira_configs:
-          items:
-            $ref: '#/components/schemas/ConfigJiraConfig'
-          type: array
-        mattermost_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMattermostConfig'
-          type: array
-        msteams_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsConfig'
-          type: array
-        msteamsv2_configs:
-          items:
-            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
-          type: array
-        name:
-          type: string
-        opsgenie_configs:
-          items:
-            $ref: '#/components/schemas/ConfigOpsGenieConfig'
-          type: array
-        pagerduty_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPagerdutyConfig'
-          type: array
-        pushover_configs:
-          items:
-            $ref: '#/components/schemas/ConfigPushoverConfig'
-          type: array
-        rocketchat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigRocketchatConfig'
-          type: array
-        slack_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSlackConfig'
-          type: array
-        sns_configs:
-          items:
-            $ref: '#/components/schemas/ConfigSNSConfig'
-          type: array
-        telegram_configs:
-          items:
-            $ref: '#/components/schemas/ConfigTelegramConfig'
-          type: array
-        victorops_configs:
-          items:
-            $ref: '#/components/schemas/ConfigVictorOpsConfig'
-          type: array
-        webex_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebexConfig'
-          type: array
-        webhook_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWebhookConfig'
-          type: array
-        wechat_configs:
-          items:
-            $ref: '#/components/schemas/ConfigWechatConfig'
-          type: array
-      type: object
     ConfigRocketchatAttachmentAction:
       properties:
         image_url:
@@ -2380,6 +2419,26 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardLink:
+      properties:
+        name:
+          type: string
+        renderVariables:
+          type: boolean
+        targetBlank:
+          type: boolean
+        tooltip:
+          type: string
+        url:
+          type: string
+      type: object
+    DashboardPanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2510,7 +2569,7 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/V1Link'
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         panels:
           additionalProperties:
@@ -2645,10 +2704,34 @@ components:
         legend:
           $ref: '#/components/schemas/DashboardtypesLegend'
       type: object
+    DashboardtypesJSONPatchOperation:
+      properties:
+        from:
+          description: Source JSON Pointer for move/copy ops; ignored for other ops.
+          type: string
+        op:
+          $ref: '#/components/schemas/DashboardtypesPatchOp'
+        path:
+          description: JSON Pointer (RFC 6901) into the dashboard's postable shape
+            — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0,
+            /tags/-.
+          type: string
+        value:
+          description: 'Value to add/replace/test against. The expected type depends
+            on the path. Common shapes (see referenced schemas for the exact field
+            set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N
+            (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable;
+            /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a
+            TagtypesPostableTag; /spec/display/name and other leaf string fields take
+            a string. Required for add/replace/test; ignored for remove/move/copy.'
+      required:
+      - op
+      - path
+      type: object
     DashboardtypesLayout:
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
-    DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec:
+      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
+    DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
       properties:
         kind:
           enum:
@@ -2731,7 +2814,7 @@ components:
     DashboardtypesPanel:
       properties:
         kind:
-          type: string
+          $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
       type: object
@@ -2742,6 +2825,10 @@ components:
         unit:
           type: string
       type: object
+    DashboardtypesPanelKind:
+      enum:
+      - Panel
+      type: string
     DashboardtypesPanelPlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -2848,10 +2935,10 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/V1PanelDisplay'
+          $ref: '#/components/schemas/DashboardPanelDisplay'
         links:
           items:
-            $ref: '#/components/schemas/V1Link'
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -2860,6 +2947,20 @@ components:
             $ref: '#/components/schemas/DashboardtypesQuery'
           type: array
       type: object
+    DashboardtypesPatchOp:
+      enum:
+      - add
+      - remove
+      - replace
+      - move
+      - copy
+      - test
+      type: string
+    DashboardtypesPatchableDashboardV2:
+      items:
+        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
+      nullable: true
+      type: array
     DashboardtypesPieChartPanelSpec:
       properties:
         formatting:
@@ -2910,7 +3011,7 @@ components:
     DashboardtypesQuery:
       properties:
         kind:
-          type: string
+          $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
       type: object
@@ -3147,6 +3248,27 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
+    DashboardtypesUpdatableDashboardV2:
+      properties:
+        image:
+          type: string
+        name:
+          type: string
+        schemaVersion:
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
+        tags:
+          items:
+            $ref: '#/components/schemas/TagtypesPostableTag'
+          nullable: true
+          type: array
+      required:
+      - schemaVersion
+      - name
+      - tags
+      - spec
+      type: object
     DashboardtypesUpdatablePublicDashboard:
       properties:
         defaultTimeRange:
@@ -3157,8 +3279,8 @@ components:
     DashboardtypesVariable:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec'
-    DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec:
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
       properties:
         kind:
           enum:
@@ -7176,26 +7298,6 @@ components:
       required:
       - id
       type: object
-    V1Link:
-      properties:
-        name:
-          type: string
-        renderVariables:
-          type: boolean
-        targetBlank:
-          type: boolean
-        tooltip:
-          type: string
-        url:
-          type: string
-      type: object
-    V1PanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     VariableDefaultValue:
       type: object
     VariableDisplay:
@@ -7612,7 +7714,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content
@@ -7663,7 +7765,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content
@@ -8028,7 +8130,139 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services:
+    get:
+      deprecated: false
+      description: This endpoint lists the services metadata for the specified account
+        and cloud provider
+      operationId: ListAccountServicesMetadata
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableServicesMetadata'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: List account services metadata
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    get:
+      deprecated: false
+      description: This endpoint gets a service and its configuration for the specified
+        cloud integration account
+      operationId: GetAccountService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesService'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get service for account
+      tags:
+      - cloudintegration
     put:
       deprecated: false
       description: This endpoint updates a service for the specified cloud provider
@@ -12269,7 +12503,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesReceiver'
       responses:
         "204":
           description: No Content
@@ -12824,6 +13058,12 @@ paths:
                 - data
                 type: object
           description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
         "401":
           content:
             application/json:
@@ -12876,6 +13116,12 @@ paths:
                 - data
                 type: object
           description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
         "401":
           content:
             application/json:
@@ -12888,6 +13134,12 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
         "500":
           content:
             application/json:
@@ -12902,6 +13154,262 @@ paths:
       summary: Get dashboard (v2)
       tags:
       - dashboard
+    patch:
+      deprecated: false
+      description: 'This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard.
+        The patch is applied against the postable view of the dashboard (metadata,
+        data, tags), so individual panels, queries, variables, layouts, or tags can
+        be updated without re-sending the rest of the dashboard. Apply is lenient:
+        `remove` on a missing path is a no-op (idempotent) and `add` creates any missing
+        parent objects, rather than failing as strict RFC 6902 would. The resulting
+        dashboard is still validated. Locked dashboards are rejected.'
+      operationId: PatchDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPatchableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Patch dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint updates a v2-shape dashboard's metadata, data, and
+        tag set. Locked dashboards are rejected.
+      operationId: UpdateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesUpdatableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Update dashboard (v2)
+      tags:
+      - dashboard
+  /api/v2/dashboards/{id}/lock:
+    delete:
+      deprecated: false
+      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: UnlockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Unlock dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: LockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Lock dashboard (v2)
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -355,26 +355,32 @@ func (module *module) GetService(ctx context.Context, orgID valuer.UUID, service
 
 	var integrationService *cloudintegrationtypes.CloudIntegrationService
 
-	if !cloudIntegrationID.IsZero() {
-		storedService, err := module.store.GetServiceByServiceID(ctx, cloudIntegrationID, serviceID)
-		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-		if storedService != nil {
-			serviceConfig, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, storedService.Config)
-			if err != nil {
-				return nil, err
-			}
-
-			integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
-		}
-
-		if err := module.enrichDashboardIDs(ctx, orgID, provider, serviceID, serviceDefinition); err != nil {
-			return nil, err
-		}
+	if cloudIntegrationID.IsZero() {
+		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
 	}
 
-	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
+	storedService, err := module.store.GetServiceByServiceID(ctx, cloudIntegrationID, serviceID)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, err
+	}
+	if storedService == nil {
+		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
+	}
+
+	serviceConfig, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, storedService.Config)
+	if err != nil {
+		return nil, err
+	}
+
+	integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
+
+	slugPrefix := cloudintegrationtypes.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
+	integrationDashboards, err := module.store.ListIntegrationDashboardsBySlugPrefix(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slugPrefix)
+	if err != nil {
+		return nil, err
+	}
+
+	return cloudintegrationtypes.NewService(provider, serviceDefinition, integrationService, integrationDashboards), nil
 }
 
 func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
@@ -583,20 +589,3 @@ func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UU
 	}
 	return nil
 }
-
-// enrichDashboardIDs replaces the raw dashboard name in each Dashboard.ID with the provisioned UUID.
-// TODO: remove this hack and send idiomatic response to client.
-func (module *module) enrichDashboardIDs(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
-	for i, d := range serviceDefinition.Assets.Dashboards {
-		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
-		row, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
-		if err != nil {
-			if errors.Ast(err, errors.TypeNotFound) {
-				continue
-			}
-			return err
-		}
-		serviceDefinition.Assets.Dashboards[i].ID = row.DashboardID
-	}
-	return nil
-}

ee/modules/dashboard/impldashboard/module.go

@@ -221,6 +221,18 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

frontend/src/AppRoutes/index.tsx

@@ -351,19 +351,18 @@ function App(): JSX.Element {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,
-					environment: 'production',
+					environment: process.env.ENVIRONMENT,
+					release: process.env.VERSION,
 					integrations: [
+						// Kept for the `transaction` tag used in routing, even though
+						// tracing is disabled. Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
 						Sentry.browserTracingIntegration(),
 						Sentry.replayIntegration({
 							maskAllText: false,
 							blockAllMedia: false,
 						}),
 					],
-					// Performance Monitoring
-					tracesSampleRate: 1.0, //  Capture 100% of the transactions
-					// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-					tracePropagationTargets: [],
-					// Session Replay
+					tracesSampleRate: 0, // Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
 					beforeSend(event) {

frontend/src/api/billing/getUsage.ts

@@ -3,13 +3,36 @@ 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: Date;
-	billingPeriodEnd: Date;
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: [];
+		breakdown: BreakdownEntry[];
 		billTotal: number;
 	};
 	discount: number;

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

@@ -19,7 +19,7 @@ import type {
 
 import type {
 	AlertmanagertypesPostableChannelDTO,
-	ConfigReceiverDTO,
+	AlertmanagertypesReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
 	GetChannelByID200,
@@ -385,14 +385,14 @@ export const invalidateGetChannelByID = async (
  */
 export const updateChannelByID = (
 	{ id }: UpdateChannelByIDPathParameters,
-	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/channels/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesReceiverDTO,
 		signal,
 	});
 };
@@ -406,7 +406,7 @@ export const getUpdateChannelByIDMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<ConfigReceiverDTO>;
+			data?: BodyType<AlertmanagertypesReceiverDTO>;
 		},
 		TContext
 	>;
@@ -415,7 +415,7 @@ export const getUpdateChannelByIDMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateChannelByIDPathParameters;
-		data?: BodyType<ConfigReceiverDTO>;
+		data?: BodyType<AlertmanagertypesReceiverDTO>;
 	},
 	TContext
 > => {
@@ -432,7 +432,7 @@ export const getUpdateChannelByIDMutationOptions = <
 		Awaited<ReturnType<typeof updateChannelByID>>,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<ConfigReceiverDTO>;
+			data?: BodyType<AlertmanagertypesReceiverDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -447,7 +447,7 @@ export type UpdateChannelByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateChannelByID>>
 >;
 export type UpdateChannelByIDMutationBody =
-	| BodyType<ConfigReceiverDTO>
+	| BodyType<AlertmanagertypesReceiverDTO>
 	| undefined;
 export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 
@@ -463,7 +463,7 @@ export const useUpdateChannelByID = <
 		TError,
 		{
 			pathParams: UpdateChannelByIDPathParameters;
-			data?: BodyType<ConfigReceiverDTO>;
+			data?: BodyType<AlertmanagertypesReceiverDTO>;
 		},
 		TContext
 	>;
@@ -472,7 +472,7 @@ export const useUpdateChannelByID = <
 	TError,
 	{
 		pathParams: UpdateChannelByIDPathParameters;
-		data?: BodyType<ConfigReceiverDTO>;
+		data?: BodyType<AlertmanagertypesReceiverDTO>;
 	},
 	TContext
 > => {
@@ -483,14 +483,14 @@ export const useUpdateChannelByID = <
  * @summary Test notification channel
  */
 export const testChannel = (
-	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/channels/test`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesReceiverDTO,
 		signal,
 	});
 };
@@ -502,13 +502,13 @@ export const getTestChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
 		TError,
-		{ data?: BodyType<ConfigReceiverDTO> },
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof testChannel>>,
 	TError,
-	{ data?: BodyType<ConfigReceiverDTO> },
+	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 	TContext
 > => {
 	const mutationKey = ['testChannel'];
@@ -522,7 +522,7 @@ export const getTestChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof testChannel>>,
-		{ data?: BodyType<ConfigReceiverDTO> }
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -535,7 +535,9 @@ export const getTestChannelMutationOptions = <
 export type TestChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannel>>
 >;
-export type TestChannelMutationBody = BodyType<ConfigReceiverDTO> | undefined;
+export type TestChannelMutationBody =
+	| BodyType<AlertmanagertypesReceiverDTO>
+	| undefined;
 export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -548,13 +550,13 @@ export const useTestChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
 		TError,
-		{ data?: BodyType<ConfigReceiverDTO> },
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof testChannel>>,
 	TError,
-	{ data?: BodyType<ConfigReceiverDTO> },
+	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 	TContext
 > => {
 	return useMutation(getTestChannelMutationOptions(options));
@@ -565,14 +567,14 @@ export const useTestChannel = <
  * @summary Test notification channel (deprecated)
  */
 export const testChannelDeprecated = (
-	configReceiverDTO?: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesReceiverDTO?: BodyType<AlertmanagertypesReceiverDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/testChannel`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesReceiverDTO,
 		signal,
 	});
 };
@@ -584,13 +586,13 @@ export const getTestChannelDeprecatedMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
 		TError,
-		{ data?: BodyType<ConfigReceiverDTO> },
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof testChannelDeprecated>>,
 	TError,
-	{ data?: BodyType<ConfigReceiverDTO> },
+	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 	TContext
 > => {
 	const mutationKey = ['testChannelDeprecated'];
@@ -604,7 +606,7 @@ export const getTestChannelDeprecatedMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		{ data?: BodyType<ConfigReceiverDTO> }
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -618,7 +620,7 @@ export type TestChannelDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannelDeprecated>>
 >;
 export type TestChannelDeprecatedMutationBody =
-	| BodyType<ConfigReceiverDTO>
+	| BodyType<AlertmanagertypesReceiverDTO>
 	| undefined;
 export type TestChannelDeprecatedMutationError =
 	ErrorType<RenderErrorResponseDTO>;
@@ -634,13 +636,13 @@ export const useTestChannelDeprecated = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
 		TError,
-		{ data?: BodyType<ConfigReceiverDTO> },
+		{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof testChannelDeprecated>>,
 	TError,
-	{ data?: BodyType<ConfigReceiverDTO> },
+	{ data?: BodyType<AlertmanagertypesReceiverDTO> },
 	TContext
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));

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

@@ -31,11 +31,15 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetAccountService200,
+	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServiceParams,
 	GetServicePathParameters,
+	ListAccountServicesMetadata200,
+	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
@@ -631,6 +635,227 @@ export const useUpdateAccount = <
 > => {
 	return useMutation(getUpdateAccountMutationOptions(options));
 };
+/**
+ * This endpoint lists the services metadata for the specified account and cloud provider
+ * @summary List account services metadata
+ */
+export const listAccountServicesMetadata = (
+	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListAccountServicesMetadata200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListAccountServicesMetadataQueryKey = ({
+	cloudProvider,
+	id,
+}: ListAccountServicesMetadataPathParameters) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services`,
+	] as const;
+};
+
+export const getListAccountServicesMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof listAccountServicesMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listAccountServicesMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getListAccountServicesMetadataQueryKey({ cloudProvider, id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listAccountServicesMetadata>>
+	> = ({ signal }) => listAccountServicesMetadata({ cloudProvider, id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(cloudProvider && id),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof listAccountServicesMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListAccountServicesMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listAccountServicesMetadata>>
+>;
+export type ListAccountServicesMetadataQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List account services metadata
+ */
+
+export function useListAccountServicesMetadata<
+	TData = Awaited<ReturnType<typeof listAccountServicesMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listAccountServicesMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListAccountServicesMetadataQueryOptions(
+		{ cloudProvider, id },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List account services metadata
+ */
+export const invalidateListAccountServicesMetadata = async (
+	queryClient: QueryClient,
+	{ cloudProvider, id }: ListAccountServicesMetadataPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListAccountServicesMetadataQueryKey({ cloudProvider, id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint gets a service and its configuration for the specified cloud integration account
+ * @summary Get service for account
+ */
+export const getAccountService = (
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAccountService200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAccountServiceQueryKey = ({
+	cloudProvider,
+	id,
+	serviceId,
+}: GetAccountServicePathParameters) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+	] as const;
+};
+
+export const getGetAccountServiceQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetAccountServiceQueryKey({ cloudProvider, id, serviceId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAccountService>>
+	> = ({ signal }) =>
+		getAccountService({ cloudProvider, id, serviceId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(cloudProvider && id && serviceId),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAccountService>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAccountServiceQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAccountService>>
+>;
+export type GetAccountServiceQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get service for account
+ */
+
+export function useGetAccountService<
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAccountServiceQueryOptions(
+		{ cloudProvider, id, serviceId },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get service for account
+ */
+export const invalidateGetAccountService = async (
+	queryClient: QueryClient,
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAccountServiceQueryKey({ cloudProvider, id, serviceId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates a service for the specified cloud provider
  * @summary Update service

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

@@ -21,8 +21,10 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
+	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -33,7 +35,13 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -816,3 +824,360 @@ export const invalidateGetDashboardV2 = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.
+ * @summary Patch dashboard (v2)
+ */
+export const patchDashboardV2 = (
+	{ id }: PatchDashboardV2PathParameters,
+	dashboardtypesPatchableDashboardV2DTONull?: BodyType<DashboardtypesPatchableDashboardV2DTO | null> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PatchDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPatchableDashboardV2DTONull,
+		signal,
+	});
+};
+
+export const getPatchDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	const mutationKey = ['patchDashboardV2'];
+	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 patchDashboardV2>>,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return patchDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchDashboardV2>>
+>;
+export type PatchDashboardV2MutationBody =
+	| BodyType<DashboardtypesPatchableDashboardV2DTO | null>
+	| undefined;
+export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Patch dashboard (v2)
+ */
+export const usePatchDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	return useMutation(getPatchDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
+ * @summary Update dashboard (v2)
+ */
+export const updateDashboardV2 = (
+	{ id }: UpdateDashboardV2PathParameters,
+	dashboardtypesUpdatableDashboardV2DTO?: BodyType<DashboardtypesUpdatableDashboardV2DTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesUpdatableDashboardV2DTO,
+		signal,
+	});
+};
+
+export const getUpdateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDashboardV2'];
+	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 updateDashboardV2>>,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDashboardV2>>
+>;
+export type UpdateDashboardV2MutationBody =
+	| BodyType<DashboardtypesUpdatableDashboardV2DTO>
+	| undefined;
+export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update dashboard (v2)
+ */
+export const useUpdateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Unlock dashboard (v2)
+ */
+export const unlockDashboardV2 = (
+	{ id }: UnlockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getUnlockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['unlockDashboardV2'];
+	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 unlockDashboardV2>>,
+		{ pathParams: UnlockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return unlockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UnlockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof unlockDashboardV2>>
+>;
+
+export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Unlock dashboard (v2)
+ */
+export const useUnlockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getUnlockDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Lock dashboard (v2)
+ */
+export const lockDashboardV2 = (
+	{ id }: LockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getLockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['lockDashboardV2'];
+	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 lockDashboardV2>>,
+		{ pathParams: LockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return lockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type LockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof lockDashboardV2>>
+>;
+
+export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Lock dashboard (v2)
+ */
+export const useLockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getLockDashboardV2MutationOptions(options));
+};

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

@@ -134,113 +134,6 @@ export interface AlertmanagertypesGettableRoutePolicyDTO {
 	updatedBy?: string | null;
 }
 
-export enum AlertmanagertypesMaintenanceKindDTO {
-	fixed = 'fixed',
-	recurring = 'recurring',
-}
-export enum AlertmanagertypesMaintenanceStatusDTO {
-	active = 'active',
-	upcoming = 'upcoming',
-	expired = 'expired',
-}
-export enum AlertmanagertypesRepeatOnDTO {
-	sunday = 'sunday',
-	monday = 'monday',
-	tuesday = 'tuesday',
-	wednesday = 'wednesday',
-	thursday = 'thursday',
-	friday = 'friday',
-	saturday = 'saturday',
-}
-export enum AlertmanagertypesRepeatTypeDTO {
-	daily = 'daily',
-	weekly = 'weekly',
-	monthly = 'monthly',
-}
-export interface AlertmanagertypesRecurrenceDTO {
-	/**
-	 * @type string
-	 */
-	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
-	/**
-	 * @type array,null
-	 */
-	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
-	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
-}
-
-export interface AlertmanagertypesScheduleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	endTime?: string;
-	recurrence?: AlertmanagertypesRecurrenceDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime?: string;
-	/**
-	 * @type string
-	 */
-	timezone: string;
-}
-
-export interface AlertmanagertypesPlannedMaintenanceDTO {
-	/**
-	 * @type array,null
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesMaintenanceKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: AlertmanagertypesScheduleDTO;
-	/**
-	 * @type string
-	 */
-	scope?: string;
-	status: AlertmanagertypesMaintenanceStatusDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface ConfigAuthorizationDTO {
 	/**
 	 * @type string
@@ -475,6 +368,130 @@ export interface ConfigSecretURLDTO {
 	[key: string]: unknown;
 }
 
+export interface AlertmanagertypesGoogleChatReceiverConfigDTO {
+	http_config?: ConfigHTTPClientConfigDTO;
+	/**
+	 * @type boolean
+	 */
+	send_resolved?: boolean;
+	/**
+	 * @type string
+	 */
+	text?: string;
+	/**
+	 * @type string
+	 */
+	title?: string;
+	webhook_url?: ConfigSecretURLDTO;
+}
+
+export enum AlertmanagertypesMaintenanceKindDTO {
+	fixed = 'fixed',
+	recurring = 'recurring',
+}
+export enum AlertmanagertypesMaintenanceStatusDTO {
+	active = 'active',
+	upcoming = 'upcoming',
+	expired = 'expired',
+}
+export enum AlertmanagertypesRepeatOnDTO {
+	sunday = 'sunday',
+	monday = 'monday',
+	tuesday = 'tuesday',
+	wednesday = 'wednesday',
+	thursday = 'thursday',
+	friday = 'friday',
+	saturday = 'saturday',
+}
+export enum AlertmanagertypesRepeatTypeDTO {
+	daily = 'daily',
+	weekly = 'weekly',
+	monthly = 'monthly',
+}
+export interface AlertmanagertypesRecurrenceDTO {
+	/**
+	 * @type string
+	 */
+	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: string | null;
+	/**
+	 * @type array,null
+	 */
+	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
+	repeatType: AlertmanagertypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: string;
+}
+
+export interface AlertmanagertypesScheduleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	endTime?: string;
+	recurrence?: AlertmanagertypesRecurrenceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime?: string;
+	/**
+	 * @type string
+	 */
+	timezone: string;
+}
+
+export interface AlertmanagertypesPlannedMaintenanceDTO {
+	/**
+	 * @type array,null
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: AlertmanagertypesMaintenanceKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
+	status: AlertmanagertypesMaintenanceStatusDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
 export interface ConfigDiscordConfigDTO {
 	/**
 	 * @type string
@@ -1634,6 +1651,10 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	 * @type array
 	 */
 	email_configs?: ConfigEmailConfigDTO[];
+	/**
+	 * @type array
+	 */
+	googlechat_configs?: AlertmanagertypesGoogleChatReceiverConfigDTO[];
 	/**
 	 * @type array
 	 */
@@ -1748,6 +1769,89 @@ export interface AlertmanagertypesPostableRoutePolicyDTO {
 	tags?: string[] | null;
 }
 
+export interface AlertmanagertypesReceiverDTO {
+	/**
+	 * @type array
+	 */
+	discord_configs?: ConfigDiscordConfigDTO[];
+	/**
+	 * @type array
+	 */
+	email_configs?: ConfigEmailConfigDTO[];
+	/**
+	 * @type array
+	 */
+	googlechat_configs?: AlertmanagertypesGoogleChatReceiverConfigDTO[];
+	/**
+	 * @type array
+	 */
+	incidentio_configs?: ConfigIncidentioConfigDTO[];
+	/**
+	 * @type array
+	 */
+	jira_configs?: ConfigJiraConfigDTO[];
+	/**
+	 * @type array
+	 */
+	mattermost_configs?: ConfigMattermostConfigDTO[];
+	/**
+	 * @type array
+	 */
+	msteams_configs?: ConfigMSTeamsConfigDTO[];
+	/**
+	 * @type array
+	 */
+	msteamsv2_configs?: ConfigMSTeamsV2ConfigDTO[];
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type array
+	 */
+	opsgenie_configs?: ConfigOpsGenieConfigDTO[];
+	/**
+	 * @type array
+	 */
+	pagerduty_configs?: ConfigPagerdutyConfigDTO[];
+	/**
+	 * @type array
+	 */
+	pushover_configs?: ConfigPushoverConfigDTO[];
+	/**
+	 * @type array
+	 */
+	rocketchat_configs?: ConfigRocketchatConfigDTO[];
+	/**
+	 * @type array
+	 */
+	slack_configs?: ConfigSlackConfigDTO[];
+	/**
+	 * @type array
+	 */
+	sns_configs?: ConfigSNSConfigDTO[];
+	/**
+	 * @type array
+	 */
+	telegram_configs?: ConfigTelegramConfigDTO[];
+	/**
+	 * @type array
+	 */
+	victorops_configs?: ConfigVictorOpsConfigDTO[];
+	/**
+	 * @type array
+	 */
+	webex_configs?: ConfigWebexConfigDTO[];
+	/**
+	 * @type array
+	 */
+	webhook_configs?: ConfigWebhookConfigDTO[];
+	/**
+	 * @type array
+	 */
+	wechat_configs?: ConfigWechatConfigDTO[];
+}
+
 export interface AuthtypesAttributeMappingDTO {
 	/**
 	 * @type string
@@ -2457,33 +2561,6 @@ export interface CloudintegrationtypesAccountDTO {
 	updatedAt?: string;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
-	[key: string]: unknown;
-}
-
-export interface CloudintegrationtypesDashboardDTO {
-	definition?: DashboardtypesStorableDashboardDataDTO;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface CloudintegrationtypesAssetsDTO {
-	/**
-	 * @type array,null
-	 */
-	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
-}
-
 export interface CloudintegrationtypesAzureConnectionArtifactDTO {
 	/**
 	 * @type string
@@ -2866,6 +2943,54 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	providerAccountId?: string;
 }
 
+export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt: string;
+	/**
+	 * @type string
+	 */
+	dashboardId: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	provider: string;
+	/**
+	 * @type string
+	 */
+	slug: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt: string;
+}
+
+export interface CloudintegrationtypesServiceDashboardDTO {
+	/**
+	 * @type string
+	 */
+	description: string;
+	integrationDashboard?: CloudintegrationtypesStorableIntegrationDashboardDTO;
+	/**
+	 * @type string
+	 */
+	title: string;
+}
+
+export interface CloudintegrationtypesServiceAssetsDTO {
+	/**
+	 * @type array
+	 */
+	dashboards: CloudintegrationtypesServiceDashboardDTO[];
+}
+
 export interface CloudintegrationtypesSupportedSignalsDTO {
 	/**
 	 * @type boolean
@@ -2877,13 +3002,8 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
-export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesAssetsDTO;
+	assets: CloudintegrationtypesServiceAssetsDTO;
 	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO | null;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
@@ -2899,7 +3019,6 @@ export interface CloudintegrationtypesServiceDTO {
 	 */
 	overview: string;
 	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -2944,85 +3063,6 @@ export interface CommonJSONRefDTO {
 	$ref?: string;
 }
 
-export interface ConfigReceiverDTO {
-	/**
-	 * @type array
-	 */
-	discord_configs?: ConfigDiscordConfigDTO[];
-	/**
-	 * @type array
-	 */
-	email_configs?: ConfigEmailConfigDTO[];
-	/**
-	 * @type array
-	 */
-	incidentio_configs?: ConfigIncidentioConfigDTO[];
-	/**
-	 * @type array
-	 */
-	jira_configs?: ConfigJiraConfigDTO[];
-	/**
-	 * @type array
-	 */
-	mattermost_configs?: ConfigMattermostConfigDTO[];
-	/**
-	 * @type array
-	 */
-	msteams_configs?: ConfigMSTeamsConfigDTO[];
-	/**
-	 * @type array
-	 */
-	msteamsv2_configs?: ConfigMSTeamsV2ConfigDTO[];
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type array
-	 */
-	opsgenie_configs?: ConfigOpsGenieConfigDTO[];
-	/**
-	 * @type array
-	 */
-	pagerduty_configs?: ConfigPagerdutyConfigDTO[];
-	/**
-	 * @type array
-	 */
-	pushover_configs?: ConfigPushoverConfigDTO[];
-	/**
-	 * @type array
-	 */
-	rocketchat_configs?: ConfigRocketchatConfigDTO[];
-	/**
-	 * @type array
-	 */
-	slack_configs?: ConfigSlackConfigDTO[];
-	/**
-	 * @type array
-	 */
-	sns_configs?: ConfigSNSConfigDTO[];
-	/**
-	 * @type array
-	 */
-	telegram_configs?: ConfigTelegramConfigDTO[];
-	/**
-	 * @type array
-	 */
-	victorops_configs?: ConfigVictorOpsConfigDTO[];
-	/**
-	 * @type array
-	 */
-	webex_configs?: ConfigWebexConfigDTO[];
-	/**
-	 * @type array
-	 */
-	webhook_configs?: ConfigWebhookConfigDTO[];
-	/**
-	 * @type array
-	 */
-	wechat_configs?: ConfigWechatConfigDTO[];
-}
-
 export interface CoretypesObjectGroupDTO {
 	resource: CoretypesResourceRefDTO;
 	/**
@@ -3089,6 +3129,40 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
+export interface DashboardLinkDTO {
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type boolean
+	 */
+	renderVariables?: boolean;
+	/**
+	 * @type boolean
+	 */
+	targetBlank?: boolean;
+	/**
+	 * @type string
+	 */
+	tooltip?: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+}
+
+export interface DashboardPanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3705,6 +3779,10 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
 export enum DashboardtypesSourceDTO {
 	user = 'user',
 	system = 'system',
@@ -3786,40 +3864,9 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
-export interface V1PanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
+export enum DashboardtypesPanelKindDTO {
+	Panel = 'Panel',
 }
-
-export interface V1LinkDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type boolean
-	 */
-	renderVariables?: boolean;
-	/**
-	 * @type boolean
-	 */
-	targetBlank?: boolean;
-	/**
-	 * @type string
-	 */
-	tooltip?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4061,6 +4108,13 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
+export enum Querybuildertypesv5RequestTypeDTO {
+	scalar = 'scalar',
+	time_series = 'time_series',
+	raw = 'raw',
+	raw_stream = 'raw_stream',
+	trace = 'trace',
+}
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
 }
@@ -4365,19 +4419,16 @@ export interface DashboardtypesQuerySpecDTO {
 }
 
 export interface DashboardtypesQueryDTO {
-	/**
-	 * @type string
-	 */
-	kind?: string;
+	kind?: Querybuildertypesv5RequestTypeDTO;
 	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: V1PanelDisplayDTO;
+	display?: DashboardPanelDisplayDTO;
 	/**
 	 * @type array
 	 */
-	links?: V1LinkDTO[];
+	links?: DashboardLinkDTO[];
 	plugin?: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4386,10 +4437,7 @@ export interface DashboardtypesPanelSpecDTO {
 }
 
 export interface DashboardtypesPanelDTO {
-	/**
-	 * @type string
-	 */
-	kind?: string;
+	kind?: DashboardtypesPanelKindDTO;
 	spec?: DashboardtypesPanelSpecDTO;
 }
 
@@ -4403,20 +4451,20 @@ export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 export type DashboardtypesDashboardSpecDTOPanels =
 	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
 
-export enum DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind {
+export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
-export interface DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO {
+export interface DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO {
 	/**
 	 * @enum Grid
 	 * @type string
 	 */
-	kind: DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind;
+	kind: DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind;
 	spec: DashboardGridLayoutSpecDTO;
 }
 
 export type DashboardtypesLayoutDTO =
-	DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO;
+	DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO;
 
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
@@ -4520,21 +4568,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
 	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -4553,7 +4601,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	links?: V1LinkDTO[];
+	links?: DashboardLinkDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -4653,6 +4701,32 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
+export enum DashboardtypesPatchOpDTO {
+	add = 'add',
+	remove = 'remove',
+	replace = 'replace',
+	move = 'move',
+	copy = 'copy',
+	test = 'test',
+}
+export interface DashboardtypesJSONPatchOperationDTO {
+	/**
+	 * @type string
+	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
+	 */
+	from?: string;
+	op: DashboardtypesPatchOpDTO;
+	/**
+	 * @type string
+	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-.
+	 */
+	path: string;
+	/**
+	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
+	 */
+	value?: unknown;
+}
+
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4662,6 +4736,13 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 }
+/**
+ * @nullable
+ */
+export type DashboardtypesPatchableDashboardV2DTO =
+	| DashboardtypesJSONPatchOperationDTO[]
+	| null;
+
 export interface DashboardtypesPostableDashboardV2DTO {
 	/**
 	 * @type boolean
@@ -4705,6 +4786,26 @@ export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/ClickHouseSQL' = 'signoz/ClickHouseSQL',
 	'signoz/TraceOperator' = 'signoz/TraceOperator',
 }
+export interface DashboardtypesUpdatableDashboardV2DTO {
+	/**
+	 * @type string
+	 */
+	image?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	schemaVersion: string;
+	spec: DashboardtypesDashboardSpecDTO;
+	/**
+	 * @type array,null
+	 */
+	tags: TagtypesPostableTagDTO[] | null;
+}
+
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -6882,13 +6983,6 @@ export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
 	[key: string]: Querybuildertypesv5VariableItemDTO;
 };
 
-export enum Querybuildertypesv5RequestTypeDTO {
-	scalar = 'scalar',
-	time_series = 'time_series',
-	raw = 'raw',
-	raw_stream = 'raw_stream',
-	trace = 'trace',
-}
 /**
  * Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.
  */
@@ -8623,6 +8717,31 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type ListAccountServicesMetadataPathParameters = {
+	cloudProvider: string;
+	id: string;
+};
+export type ListAccountServicesMetadata200 = {
+	data: CloudintegrationtypesGettableServicesMetadataDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetAccountServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
+export type GetAccountService200 = {
+	data: CloudintegrationtypesServiceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;
@@ -9476,6 +9595,34 @@ export type GetDashboardV2200 = {
 	status: string;
 };
 
+export type PatchDashboardV2PathParameters = {
+	id: string;
+};
+export type PatchDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateDashboardV2PathParameters = {
+	id: string;
+};
+export type UpdateDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UnlockDashboardV2PathParameters = {
+	id: string;
+};
+export type LockDashboardV2PathParameters = {
+	id: string;
+};
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/api/trace/getTraceV4.tsx

@@ -1,15 +1,14 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
+import { getWaterfallV4 } from 'api/generated/services/tracedetail';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
+	GetTraceV4PayloadProps,
+	GetTraceV4SuccessResponse,
 	SpanV3,
 } from 'types/api/trace/getTraceV3';
 
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+const getTraceV4 = async (
+	props: GetTraceV4PayloadProps,
+): Promise<SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse> => {
 	let uncollapsedSpans = [...props.uncollapsedSpans];
 	if (!props.isSelectedSpanIDUnCollapsed) {
 		uncollapsedSpans = uncollapsedSpans.filter(
@@ -19,31 +18,37 @@ const getTraceV3 = async (
 		props.selectedSpanId &&
 		!uncollapsedSpans.includes(props.selectedSpanId)
 	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// Backend only uses the uncollapsedSpans list (unlike V2 which also interprets
 		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
 		uncollapsedSpans.push(props.selectedSpanId);
 	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-		limit: 10000,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
+	const response = await getWaterfallV4(
+		{ traceID: props.traceId },
+		{
+			selectedSpanId: props.selectedSpanId,
+			uncollapsedSpans,
+			limit: 10000,
+		},
 	);
 
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
+	// Generated client unwraps the axios response; .data is the waterfall payload.
+	// Wire spans carry time_unix; SpanV3's timestamp + 'service.name' are derived below.
+	type WireSpan = Omit<SpanV3, 'timestamp' | 'service.name'> & {
+		time_unix: number;
+	};
+	const rawPayload = response.data as unknown as Omit<
+		GetTraceV4SuccessResponse,
+		'spans'
+	> & { spans: WireSpan[] | null };
 
 	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',
 		timestamp: span.time_unix,
 	}));
 
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
 	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
 	// Convert by using the first span's timestamp as the base if there's a mismatch.
 	let { startTimestampMillis, endTimestampMillis } = rawPayload;
@@ -70,4 +75,4 @@ const getTraceV3 = async (
 	};
 };
 
-export default getTraceV3;
+export default getTraceV4;

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,17 +1,17 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
-import cx from 'classnames';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
-	btnShape,
 	type,
+	className,
 }: {
-	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
+	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicenseRefetch } = useAppContext();
@@ -31,26 +31,33 @@ function RefreshPaymentStatus({
 		setIsLoading(false);
 	};
 
+	const button = (
+		<Button
+			variant="link"
+			color={type === 'text' ? 'none' : 'secondary'}
+			size="md"
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
+		>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
+	);
+
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
-			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
-				<Button
-					type={type === 'text' ? 'text' : 'default'}
-					shape={btnShape}
-					className={cx('periscope-btn', { text: type === 'text' })}
-					onClick={handleRefreshPaymentStatus}
-					icon={<RefreshCcw size={14} />}
-					loading={isLoading}
-				>
-					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-				</Button>
-			</Tooltip>
+			{type === 'tooltip' ? (
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
+			) : (
+				button
+			)}
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
-	btnShape: 'default',
 	type: 'button',
+	className: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/constants/reactQueryKeys.ts

@@ -33,7 +33,8 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
+	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
+	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

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

@@ -0,0 +1,199 @@
+.billingContainer {
+	margin-bottom: var(--spacing-20);
+	padding-top: 36px;
+	width: 90%;
+	margin: 0 auto;
+
+	.pageHeader {
+		margin-bottom: var(--spacing-8);
+
+		.pageHeaderTitle {
+			font-weight: var(--label-medium-500-font-weight);
+			font-size: var(--label-medium-500-font-size);
+			line-height: 32px;
+			letter-spacing: -0.08px;
+			color: var(--l1-foreground);
+		}
+
+		.pageHeaderSubtitle {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+			letter-spacing: -0.07px;
+			color: var(--l2-foreground);
+		}
+	}
+
+	.pageInfoTitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		color: var(--l1-foreground);
+	}
+
+	.pageInfoSubtitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		color: var(--l2-foreground);
+	}
+
+	.pageInfo {
+		:global(.ant-card) {
+			padding: var(--padding-3);
+		}
+
+		.billingManageBtn {
+			background: var(--l3-background);
+
+			&:hover {
+				background: var(--l3-background-hover);
+			}
+		}
+	}
+
+	.billingSummary {
+		margin: var(--spacing-12) var(--spacing-4);
+	}
+
+	.billingDetails {
+		margin: var(--spacing-12) 0;
+		border: 1px solid var(--l1-border);
+		border-radius: 2px;
+		overflow: hidden;
+
+		:global {
+			.ant-table {
+				background: var(--l2-background);
+			}
+
+			.ant-table-thead > tr > th {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				color: var(--l3-foreground);
+				font-size: var(--font-size-xs);
+				font-weight: var(--font-weight-medium);
+				letter-spacing: 0.48px;
+				text-transform: uppercase;
+			}
+
+			.ant-table-tbody > tr > td {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				background: var(--l2-background);
+				border-bottom: 1px solid var(--l1-border);
+				color: var(--l2-foreground);
+				font-size: var(--font-size-sm);
+
+				&:first-child {
+					color: var(--l1-foreground);
+				}
+
+				&:not(:first-child) {
+					font-feature-settings:
+						'zero' 1,
+						'lnum' 1,
+						'tnum' 1;
+				}
+			}
+
+			.ant-table-tbody > tr:last-child > td {
+				border-bottom: none;
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: var(--l2-background) !important;
+			}
+		}
+
+		.billingDetailsHeaderCell {
+			position: relative;
+			background: var(--l2-background) !important;
+			border: none !important;
+			border-bottom: 1px solid var(--l1-border) !important;
+			box-shadow: none !important;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset-block: 0;
+				inset-inline-end: 0;
+				width: 2px;
+				background: var(--l2-background);
+				z-index: 1;
+			}
+		}
+	}
+
+	.upgradePlanBenefits {
+		margin: 0 var(--spacing-4);
+		border: 1px solid var(--l1-border);
+		border-radius: 5px;
+		padding: 0 var(--padding-12);
+
+		.planBenefits {
+			.planBenefit {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-8);
+				margin: var(--spacing-8) 0;
+			}
+		}
+	}
+
+	.billingGraphSection {
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		overflow: hidden;
+		margin-bottom: var(--spacing-4);
+
+		.billingGraphFooter {
+			display: flex;
+			gap: var(--spacing-4);
+			padding: var(--padding-3) var(--padding-4);
+			border-top: 1px solid var(--l1-border);
+			background: var(--l2-background);
+
+			.billingFooterBtn {
+				background: var(--l3-background);
+
+				&:hover {
+					background: var(--l3-background-hover);
+				}
+			}
+		}
+	}
+
+	.emptyGraphCard {
+		:global(.ant-card-body) {
+			height: 40vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.billingUpdateNote {
+		margin-top: var(--spacing-8);
+		font-family: var(--font-family-inter);
+		font-size: var(--font-size-sm);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+		line-height: 22px;
+		letter-spacing: -0.07px;
+	}
+
+	:global {
+		.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
+			width: 100%;
+			min-width: 100%;
+		}
+
+		.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
+			min-width: 100% !important;
+		}
+	}
+}

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -1,70 +0,0 @@
-.billing-container {
-	margin-bottom: 40px;
-	padding-top: 36px;
-	width: 90%;
-	margin: 0 auto;
-
-	.billing-summary {
-		margin: 24px 8px;
-	}
-
-	.billing-details {
-		margin: 24px 0px;
-
-		.ant-table-title {
-			color: var(--l2-foreground);
-			background-color: var(--l3-background);
-		}
-
-		.ant-table-cell {
-			background-color: var(--l1-background);
-			border-color: var(--l1-border);
-		}
-
-		.ant-table-tbody {
-			td {
-				border-color: var(--l1-border);
-			}
-		}
-	}
-
-	.upgrade-plan-benefits {
-		margin: 0px 8px;
-		border: 1px solid var(--l1-border);
-		border-radius: 5px;
-		padding: 0 48px;
-		.plan-benefits {
-			.plan-benefit {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				margin: 16px 0;
-			}
-		}
-	}
-
-	.empty-graph-card {
-		.ant-card-body {
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.billing-update-note {
-		text-align: left;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		margin-top: 16px;
-	}
-}
-
-.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
-	width: 100%;
-	min-width: 100%;
-}
-
-.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
-	min-width: 100% !important;
-}

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

@@ -38,7 +38,7 @@ describe('BillingContainer', () => {
 		});
 		expect(pricePerUnit).toBeInTheDocument();
 		const cost = await screen.findByRole('columnheader', {
-			name: /cost \(billing period to date\)/i,
+			name: /cost/i,
 		});
 		expect(cost).toBeInTheDocument();
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,12 +1,11 @@
+import { Callout } from '@signozhq/ui/callout';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, CloudDownload } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
-	Alert,
-	Button,
 	Card,
 	Col,
 	Flex,
@@ -16,7 +15,10 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import getUsage, {
+	BreakdownEntry,
+	UsageResponsePayloadProps,
+} from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
@@ -29,7 +31,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
+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';
@@ -38,7 +40,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
-import './BillingContainer.styles.scss';
+import styles from './BillingContainer.module.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';
 
 interface DataType {
@@ -115,7 +117,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost (Billing period to date)',
+		title: 'Cost',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -130,7 +132,7 @@ export default function BillingContainer(): JSX.Element {
 	const [billAmount, setBillAmount] = useState(0);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
-	const [data, setData] = useState<any[]>([]);
+	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -150,7 +152,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: any): void => {
+		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -158,27 +160,23 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = data?.payload || {};
-			const formattedUsageData: any[] = [];
+			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const formattedUsageData: DataType[] = [];
 
 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element = breakdown[index];
+					const element: BreakdownEntry = breakdown[index];
 
-					element?.tiers.forEach(
-						(
-							tier: { quantity: number; unitPrice: number; tierCost: number },
-							i: number,
-						) => {
-							formattedUsageData.push({
-								key: `${index}${i}`,
-								name: i === 0 ? element?.type : '',
-								dataIngested: `${tier.quantity} ${element?.unit}`,
-								pricePerUnit: tier.unitPrice,
-								cost: `$ ${tier.tierCost}`,
-							});
-						},
-					);
+					element?.tiers?.forEach((tier, i: number) => {
+						formattedUsageData.push({
+							key: `${index}${i}`,
+							name: i === 0 ? element?.type : '',
+							unit: element?.unit ?? '',
+							dataIngested: `${tier.quantity} ${element?.unit}`,
+							pricePerUnit: String(tier.unitPrice),
+							cost: `$ ${tier.tierCost}`,
+						});
+					});
 				}
 			}
 
@@ -251,16 +249,19 @@ export default function BillingContainer(): JSX.Element {
 			title: 'Data Ingested',
 			dataIndex: 'dataIngested',
 			key: 'dataIngested',
+			align: 'right',
 		},
 		{
 			title: 'Price per Unit',
 			dataIndex: 'pricePerUnit',
 			key: 'pricePerUnit',
+			align: 'right',
 		},
 		{
-			title: 'Cost (Billing period to date)',
+			title: 'Cost',
 			dataIndex: 'cost',
 			key: 'cost',
+			align: 'right',
 		},
 	];
 
@@ -345,23 +346,6 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);
 
-	const BillingUsageGraphCallback = useCallback(
-		() =>
-			!isLoading && !isFetchingBillingData ? (
-				<>
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-					<div className="billing-update-note">
-						Note: Billing metrics are updated once every 24 hours.
-					</div>
-				</>
-			) : (
-				<Card className="empty-graph-card" bordered={false}>
-					<Spinner size="large" tip="Loading..." height="35vh" />
-				</Card>
-			),
-		[apiResponse, billAmount, isLoading, isFetchingBillingData],
-	);
-
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
@@ -415,12 +399,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;
 
 	return (
-		<div className="billing-container">
-			<Flex vertical style={{ marginBottom: 16 }}>
-				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
+		<div className={styles.billingContainer}>
+			<Flex vertical gap={4} className={styles.pageHeader}>
+				<Typography.Text className={styles.pageHeaderTitle}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text className={styles.pageHeaderSubtitle}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -428,50 +412,36 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className="page-info"
+				className={styles.pageInfo}
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical>
-						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
+					<Flex vertical gap={8}>
+						<p className={styles.pageInfoTitle}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</Typography.Title>
+						</p>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
+							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
-							</Typography.Text>
+							</p>
 						) : null}
 					</Flex>
-					<Flex gap={8}>
-						<Button
-							type="default"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading || isFetchingBillingData}
-							onClick={handleCsvDownload}
-							className="periscope-btn"
-						>
-							<Flex align="center" justify="center" gap={4}>
-								<CloudDownload size="md" />
-								Download CSV
-							</Flex>
-						</Button>
-						<Button
-							data-testid="header-billing-button"
-							type="primary"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading}
-							onClick={handleBilling}
-						>
-							{trialInfo?.trialConvertedToSubscription
-								? t('manage_billing')
-								: t('upgrade_plan')}
-						</Button>
-
-						<RefreshPaymentStatus type="tooltip" />
-					</Flex>
+					<Button
+						testId="header-billing-button"
+						variant="solid"
+						color="secondary"
+						size="md"
+						loading={isLoadingBilling || isLoadingManageBilling}
+						disabled={isLoading}
+						onClick={handleBilling}
+						prefix={<Landmark size={14} />}
+						className={styles.billingManageBtn}
+					>
+						{trialInfo?.trialConvertedToSubscription
+							? t('manage_billing')
+							: t('upgrade_plan')}
+					</Button>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -485,8 +455,8 @@ export default function BillingContainer(): JSX.Element {
 
 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Alert
-								message={headerText}
+							<Callout
+								title={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -503,8 +473,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Alert
-						message={`Your data is safe with us until ${getFormattedDate(
+					<Callout
+						title={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -515,26 +485,69 @@ export default function BillingContainer(): JSX.Element {
 
 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Alert
-							message={subscriptionPastDueMessage()}
-							type="error"
-							showIcon
-							style={{ marginTop: 12 }}
-						/>
+						<Callout type="error" showIcon style={{ marginTop: 12 }}>
+							{subscriptionPastDueMessage()}
+						</Callout>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>
 
-			<BillingUsageGraphCallback />
+			<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="billing-details">
+			<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}`}
+										/>
+									);
+								},
+							},
+						}}
 					/>
 				)}
 
@@ -546,7 +559,7 @@ export default function BillingContainer(): JSX.Element {
 			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className="upgrade-plan-benefits">
+				<div className={styles.upgradePlanBenefits}>
 					<Row
 						justify="space-between"
 						align="middle"
@@ -555,16 +568,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className="plan-benefits">
-							<Typography.Text className="plan-benefit">
+						<Col span={20} className={styles.planBenefits}>
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -583,9 +596,10 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								data-testid="upgrade-plan-button"
-								type="primary"
-								size="middle"
+								testId="upgrade-plan-button"
+								variant="solid"
+								color="primary"
+								size="md"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

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

@@ -0,0 +1,9 @@
+.headerRow {
+	padding: var(--spacing-8);
+}
+
+.itemList {
+	overflow-y: auto;
+	max-height: 300px;
+	padding: var(--padding-3);
+}

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

@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
+import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	TooltipContentItem,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
+import Styles from './BillingBarChartTooltip.module.scss';
+
+interface BillingBarChartTooltipProps extends TooltipRenderArgs {
+	billingApiResponse: MetricRangePayloadProps;
+}
+
+const CURRENCY_SYMBOL = '$';
+
+export function BillingBarChartTooltip({
+	billingApiResponse,
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	isPinned,
+}: BillingBarChartTooltipProps): JSX.Element {
+	const content = useMemo((): TooltipContentItem[] => {
+		const baseItems = buildTooltipContent({
+			data: uPlotInstance.data,
+			series: uPlotInstance.series,
+			dataIndexes,
+			activeSeriesIndex: seriesIndex,
+			uPlotInstance,
+			yAxisUnit: '',
+			isStackedBarChart: true,
+		});
+
+		return baseItems.map((item) => {
+			const match = billingApiResponse.data.result.find(
+				(r) => (r.legend || r.queryName) === item.label,
+			);
+
+			if (!match) {
+				return item;
+			}
+
+			const seriesIdx = uPlotInstance.series.findIndex(
+				(s) => s.label === item.label,
+			);
+			if (seriesIdx === -1) {
+				return item;
+			}
+
+			const dataIndex = dataIndexes[seriesIdx];
+			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
+			const unit = match.unit ?? '';
+			const quantityStr =
+				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
+
+			return {
+				...item,
+				tooltipValue: `${CURRENCY_SYMBOL}${getToolTipValue(item.value, '')}${quantityStr}`,
+			};
+		});
+	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
+
+	const activeItem = content.find((item) => item.isActive) ?? null;
+
+	return (
+		<div
+			className={cx(TooltipStyles.container, {
+				[TooltipStyles.pinned]: isPinned,
+			})}
+			data-testid="uplot-tooltip-container"
+		>
+			<TooltipHeader
+				uPlotInstance={uPlotInstance}
+				showTooltipHeader
+				isPinned={isPinned}
+				activeItem={null}
+				headerRowClassName={Styles.headerRow}
+				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
+			/>
+			{activeItem != null && <span className={TooltipStyles.divider} />}
+			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
+				{content.map((item) => (
+					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
+				))}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,37 @@
+.graphContainer {
+	height: 100%;
+}
+
+.billingGraphCard {
+	:global {
+		.uplot-no-data {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.ant-card-body {
+			height: 40vh;
+
+			.uplot-graph-container {
+				padding: 8px;
+			}
+		}
+	}
+
+	.totalSpent {
+		font-family: 'SF Mono', monospace;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.totalSpentTitle {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 22px;
+		letter-spacing: 0.48px;
+		color: var(--l2-foreground);
+	}
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss

@@ -1,23 +0,0 @@
-.billing-graph-card {
-	.ant-card-body {
-		height: 40vh;
-		.uplot-graph-container {
-			padding: 8px;
-		}
-	}
-	.total-spent {
-		font-family: 'SF Mono' monospace;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 24px;
-	}
-
-	.total-spent-title {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 22px;
-		letter-spacing: 0.48px;
-		color: var(--l2-foreground);
-	}
-}

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

@@ -1,221 +1,146 @@
-import { useMemo, useRef } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import Uplot from 'components/Uplot';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
-import getAxes from 'lib/uPlotLib/utils/getAxes';
-import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
-import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
-import uPlot from 'uplot';
-
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import {
+	LegendPosition,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import type uPlot from 'uplot';
+import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+
+import { BillingBarChartTooltip } from './BillingBarChartTooltip';
+import { prepareBillingBarConfig } from './prepareBillingBarConfig';
+import {
+	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
-import './BillingUsageGraph.styles.scss';
-import '../../../lib/uPlotLib/uPlotLib.styles.scss';
+import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: any;
+	data: Partial<UsageResponsePayloadProps>;
 	billAmount: number;
 }
-const paths = (
-	u: any,
-	seriesIdx: number,
-	idx0: number,
-	idx1: number,
-	extendGap: boolean,
-	buildClip: boolean,
-): uPlot.Series.PathBuilder => {
-	const s = u.series[seriesIdx];
-	const style = s.drawStyle;
-	const interp = s.lineInterpolation;
 
-	const renderer = getRenderer(style, interp);
-
-	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
-};
-
-const calculateStartEndTime = (
-	data: any,
-): { startTime: number; endTime: number } => {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
-			timestamps.push(entry?.timestamp);
-		});
-	});
-	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
-	const startTime: number = Math.min(...timestamps, ...billingTime);
-	const endTime: number = Math.max(...timestamps, ...billingTime);
-	return { startTime, endTime };
-};
+const numberFormatter = new Intl.NumberFormat('en-US');
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
-			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-			const nextDay = {
-				...currentDay,
-				timestamp: currentDay.timestamp + 86400,
-				count: 0,
-				size: 0,
-				quantity: 0,
-				total: 0,
-			};
-			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
-		}
-	});
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(data),
-		[data],
-	);
-	const chartData = getUPlotChartData(graphCompatibleData);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const { startTime, endTime } = useMemo(
-		() => calculateStartEndTime(data),
-		[data],
-	);
-
-	const getGraphSeries = (color: string, label: string): any => ({
-		drawStyle: 'bars',
-		paths,
-		lineInterpolation: 'spline',
-		show: true,
-		label,
-		fill: color,
-		stroke: color,
-		width: 2,
-		spanGaps: true,
-		points: {
-			size: 5,
-			show: false,
-			stroke: color,
-		},
-	});
-
-	const uPlotSeries: any = useMemo(
-		() => [
-			{ label: 'Timestamp', stroke: 'purple' },
-			getGraphSeries(
-				'#7CEDBE',
-				graphCompatibleData.data.result[0]?.legend as string,
-			),
-			getGraphSeries(
-				'#4E74F8',
-				graphCompatibleData.data.result[1]?.legend as string,
-			),
-			getGraphSeries(
-				'#F24769',
-				graphCompatibleData.data.result[2]?.legend as string,
-			),
-		],
-		[graphCompatibleData.data.result],
-	);
-
-	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
-
-	const optionsForChart: uPlot.Options = useMemo(
-		() => ({
-			id: 'billing-usage-breakdown',
-			series: uPlotSeries,
-			width: containerDimensions.width,
-			height: containerDimensions.height - 30,
-			axes: [
-				{
-					...axesOptions[0],
-					grid: {
-						...axesOptions.grid,
-						show: false,
-						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
-					},
-				},
-				{
-					...axesOptions[1],
-					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
-				},
-			],
-			scales: {
-				x: {
-					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
-				},
-				y: {
-					...getYAxisScale({
-						series: graphCompatibleData?.data?.newResult?.data?.result,
-						yAxisUnit: '',
-						softMax: null,
-						softMin: null,
-					}),
-				},
-			},
-			legend: {
-				show: true,
-				live: false,
-				isolate: true,
-			},
-			cursor: {
-				lock: false,
-				focus: {
-					prox: 1e6,
-					bias: 1,
-				},
-			},
-			focus: {
-				alpha: 0.3,
-			},
-			padding: [32, 32, 16, 16],
-			plugins: [
-				tooltipPlugin({
-					apiResponse: fillMissingValuesForQuantities(
-						graphCompatibleData,
-						chartData[0],
-					),
-					yAxisUnit: '',
-					isBillingUsageGraphs: true,
-					isDarkMode,
+	// Single-day data causes bars to span multiple days — add a synthetic
+	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
+	const normalizedData = useMemo(() => {
+		if (!data?.details?.breakdown) {
+			return data;
+		}
+		return {
+			...data,
+			details: {
+				...data.details,
+				breakdown: data.details.breakdown.map((breakdown) => {
+					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
+						return breakdown;
+					}
+					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+					const nextDay = {
+						...currentDay,
+						timestamp: currentDay.timestamp + 86400,
+						count: 0,
+						size: 0,
+						quantity: 0,
+						total: 0,
+					};
+					return {
+						...breakdown,
+						dayWiseBreakdown: {
+							...breakdown.dayWiseBreakdown,
+							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
+						},
+					};
 				}),
-			],
-		}),
-		[
-			axesOptions,
-			chartData,
-			containerDimensions.height,
-			containerDimensions.width,
-			endTime,
-			graphCompatibleData,
-			isDarkMode,
-			startTime,
-			uPlotSeries,
-		],
+			},
+		};
+	}, [data]);
+
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(normalizedData),
+		[normalizedData],
 	);
 
-	const numberFormatter = new Intl.NumberFormat('en-US');
+	const chartData = useMemo(
+		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
+		[graphCompatibleData],
+	);
+
+	const filledApiResponse = useMemo(
+		(): MetricRangePayloadProps =>
+			fillMissingValuesForQuantities(
+				graphCompatibleData,
+				chartData[0] as number[],
+			),
+		[graphCompatibleData, chartData],
+	);
+
+	const { startTime, endTime } = useMemo(
+		() =>
+			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
+		[normalizedData],
+	);
+
+	const config = useMemo(
+		() =>
+			prepareBillingBarConfig({
+				isDarkMode,
+				// Subtract 86400s (one day) from startTime to add a buffer before first bar
+				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
+				maxTimeScale: endTime,
+				apiResponse: graphCompatibleData,
+			}),
+		[isDarkMode, startTime, endTime, graphCompatibleData],
+	);
+
+	const renderBillingTooltip = useCallback(
+		(args: TooltipRenderArgs) => (
+			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
+		),
+		[filledApiResponse],
+	);
 
 	return (
-		<Card bordered={false} className="billing-graph-card">
+		<Card bordered={false} className={styles.billingGraphCard}>
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className="total-spent-title">
+					<Typography.Text className={styles.totalSpentTitle}>
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text className={styles.totalSpent}>
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Uplot data={chartData} options={optionsForChart} />
+			<div ref={graphRef} className={styles.graphContainer}>
+				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+					<BarChart
+						config={config}
+						data={chartData}
+						isStackedBarChart
+						legendConfig={{ position: LegendPosition.BOTTOM }}
+						customTooltip={renderBillingTooltip}
+						width={containerDimensions.width}
+						height={containerDimensions.height - 30}
+						canPinTooltip
+					/>
+				)}
 			</div>
 		</Card>
 	);

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/BillingBarChartTooltip.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen } from 'tests/test-utils';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
+
+// Mock buildTooltipContent so tests don't depend on uPlot stacking math
+jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
+	buildTooltipContent: jest.fn().mockReturnValue([
+		{
+			label: 'Logs',
+			value: 100,
+			tooltipValue: '$100.00',
+			color: '#7CEDBE',
+			isActive: true,
+			isHighlighted: false,
+		},
+		{
+			label: 'Traces',
+			value: 50,
+			tooltipValue: '$50.00',
+			color: '#4E74F8',
+			isActive: false,
+			isHighlighted: false,
+		},
+	]),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+function makeUPlotInstance(seriesLabels: string[]): uPlot {
+	return {
+		data: [
+			[1000, 2000],
+			[100, 200],
+			[50, 80],
+		],
+		cursor: { idx: 0 },
+		series: [
+			{ label: 'Timestamp', show: true, stroke: '#000' },
+			...seriesLabels.map((label) => ({
+				label,
+				show: true,
+				stroke: '#aabbcc',
+			})),
+		],
+	} as unknown as uPlot;
+}
+
+function makeBillingApiResponse(
+	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
+): MetricRangePayloadProps {
+	return {
+		data: {
+			result: entries.map((e) => ({
+				legend: e.legend,
+				queryName: e.legend,
+				metric: {},
+				values: [[1000, '10']] as [number, string][],
+				quantity: e.quantity as number[],
+				unit: e.unit,
+			})),
+			resultType: '',
+			newResult: { data: { result: [], resultType: '' } },
+		},
+	};
+}
+
+const baseTooltipArgs = {
+	isPinned: false,
+	dismiss: jest.fn(),
+	viaSync: false,
+	seriesIndex: 1,
+	dataIndexes: [null, 0, 0],
+};
+
+describe('BillingBarChartTooltip', () => {
+	it('augments tooltipValue with quantity and unit for each series', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
+			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
+		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
+	});
+
+	it('omits quantity line when quantity at dataIndex is null', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
+			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
+		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
+		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
+	});
+
+	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs']);
+		const { buildTooltipContent } = jest.requireMock(
+			'lib/uPlotV2/components/Tooltip/utils',
+		) as { buildTooltipContent: jest.Mock };
+		buildTooltipContent.mockReturnValueOnce([
+			{
+				label: 'Logs',
+				value: 0.3076171875,
+				tooltipValue: '$0.31',
+				color: '#7CEDBE',
+				isActive: true,
+				isHighlighted: false,
+			},
+		]);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
+	});
+
+	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
+		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
+	});
+});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -0,0 +1,101 @@
+import { Color } from '@signozhq/design-tokens';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
+
+const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
+	data: {
+		result: legends.map((legend) => ({
+			legend,
+			queryName: legend,
+			metric: {},
+			values: [[1000, '10']],
+		})),
+		resultType: '',
+		newResult: { data: { result: [], resultType: '' } },
+	},
+});
+
+describe('prepareBillingBarConfig', () => {
+	const baseProps = { isDarkMode: false };
+
+	it('returns a builder with no series when apiResponse is undefined', () => {
+		const builder = prepareBillingBarConfig(baseProps);
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('returns a builder with no series when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('adds one series per result entry with correct labels and colors', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(4);
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+		expect(config.series?.[2]?.label).toBe('Traces');
+		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
+		expect(config.series?.[3]?.label).toBe('Metrics');
+		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
+	});
+
+	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
+		});
+		const config = builder.getConfig();
+		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
+	});
+
+	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
+		expect(config.focus).toStrictEqual({ alpha: 0.3 });
+	});
+
+	it('sets no bands when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toBeUndefined();
+	});
+
+	it('uses queryName as label when legend is undefined', () => {
+		const apiResponse: MetricRangePayloadProps = {
+			data: {
+				result: [
+					{
+						legend: undefined as any,
+						queryName: 'Logs',
+						metric: {},
+						values: [[1000, '10']],
+					},
+				],
+				resultType: '',
+				newResult: { data: { result: [], resultType: '' } },
+			},
+		};
+		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
+		const config = builder.getConfig();
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+	});
+});

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

@@ -0,0 +1,145 @@
+import {
+	calculateStartEndTime,
+	convertDataToMetricRangePayload,
+} from '../utils';
+
+const makeData = (
+	timestamps: number[],
+	billingPeriodStart?: number,
+	billingPeriodEnd?: number,
+) => ({
+	billingPeriodStart,
+	billingPeriodEnd,
+	details: {
+		total: 0,
+		baseFee: 0,
+		billTotal: 0,
+		breakdown: [
+			{
+				type: 'Logs',
+				unit: 'GB',
+				dayWiseBreakdown: {
+					breakdown: timestamps.map((timestamp) => ({
+						timestamp,
+						total: 0,
+						quantity: 0,
+						count: 0,
+						size: 0,
+					})),
+				},
+			},
+		],
+	},
+});
+
+describe('convertDataToMetricRangePayload', () => {
+	it('returns empty result when all dayWiseBreakdown.breakdown are null', () => {
+		const data = {
+			billingPeriodStart: 1778763678,
+			billingPeriodEnd: 1781442078,
+			details: {
+				total: 0,
+				baseFee: 49,
+				billTotal: 49,
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Traces',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(0);
+	});
+
+	it('includes only series that have day-wise data', () => {
+		const data = {
+			details: {
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						dayWiseBreakdown: { breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						dayWiseBreakdown: {
+							breakdown: [
+								{ timestamp: 1000, total: 5, quantity: 10, count: 0, size: 0 },
+							],
+						},
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(1);
+		expect(result.data.result[0].legend).toBe('Logs');
+	});
+});
+
+describe('calculateStartEndTime', () => {
+	it('returns min/max of all breakdown timestamps', () => {
+		const data = makeData([1000, 3000, 2000]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 3000,
+		});
+	});
+
+	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
+		const data = makeData([2000, 3000], 500, 4000);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 500,
+			endTime: 4000,
+		});
+	});
+
+	it('returns undefined when there are no timestamps and no billing period', () => {
+		expect(calculateStartEndTime({})).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('returns undefined when breakdown is empty', () => {
+		const data = makeData([]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('filters out non-finite billingPeriod values', () => {
+		const data = makeData([1000], NaN, Infinity);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 1000,
+		});
+	});
+
+	it('works when details is missing', () => {
+		expect(
+			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
+		).toStrictEqual({
+			startTime: 100,
+			endTime: 200,
+		});
+	});
+});

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

@@ -0,0 +1,71 @@
+import { Color } from '@signozhq/design-tokens';
+import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+const BILLING_SERIES_COLORS = [
+	Color.BG_FOREST_300,
+	Color.BG_ROBIN_500,
+	Color.BG_SAKURA_500,
+];
+
+export interface PrepareBillingBarConfigProps {
+	isDarkMode: boolean;
+	timezone?: Timezone;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	apiResponse?: MetricRangePayloadProps;
+}
+
+export function prepareBillingBarConfig({
+	isDarkMode,
+	timezone,
+	minTimeScale,
+	maxTimeScale,
+	apiResponse,
+}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		id: 'billing-usage-breakdown',
+		isDarkMode,
+		timezone,
+		panelType: PANEL_TYPES.BAR,
+		minTimeScale,
+		maxTimeScale,
+	});
+
+	const results = apiResponse?.data?.result;
+	if (!results?.length) {
+		return builder;
+	}
+
+	const labels = results.map((s) => s.legend || s.queryName || '');
+
+	const colorMapping = labels.reduce<Record<string, string>>(
+		(acc, label, index) => {
+			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
+			return acc;
+		},
+		{},
+	);
+
+	labels.forEach((label) => {
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping,
+			isDarkMode,
+			metric: {},
+		});
+	});
+
+	builder.setBands(getInitialStackedBands(results.length));
+	builder.setPadding([32, 32, 16, 16]);
+	builder.setFocus({ alpha: 0.3 });
+
+	return builder;
+}

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

@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,23 +29,25 @@ export const convertDataToMetricRangePayload = (
 		return emptyStateData;
 	}
 
-	const payload = breakdown.map((info: any) => {
-		const metric = info.type;
-		const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
-			(a: any, b: any) => a.timestamp - b.timestamp,
-		);
-		const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
-			categoryInfo.timestamp,
-			categoryInfo.total,
-		]);
-		const queryName = info.type;
-		const legend = info.type;
-		const { unit } = info;
-		const quantity = sortedBreakdownData.map(
-			(categoryInfo: any) => categoryInfo.quantity,
-		);
-		return { metric, values, queryName, legend, quantity, unit };
-	});
+	const payload = breakdown
+		.map((info: any) => {
+			const metric = info.type;
+			const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
+				(a: any, b: any) => a.timestamp - b.timestamp,
+			);
+			const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
+				categoryInfo.timestamp,
+				categoryInfo.total,
+			]);
+			const queryName = info.type;
+			const legend = info.type;
+			const { unit } = info;
+			const quantity = sortedBreakdownData.map(
+				(categoryInfo: any) => categoryInfo.quantity,
+			);
+			return { metric, values, queryName, legend, quantity, unit };
+		})
+		.filter((series: any) => series.values.length > 0);
 
 	const sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -120,11 +122,40 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = getUPlotChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
+	const chartData = prepareChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(
+		graphCompatibleData,
+		chartData[0] as number[],
+	);
 
 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
+
+export function calculateStartEndTime(
+	data: Partial<UsageResponsePayloadProps>,
+): { startTime: number | undefined; endTime: number | undefined } {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
+			timestamps.push(entry.timestamp);
+		});
+	});
+
+	const billingTime: number[] = [
+		data?.billingPeriodStart,
+		data?.billingPeriodEnd,
+	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
+
+	const allTimes = [...timestamps, ...billingTime];
+	if (allTimes.length === 0) {
+		return { startTime: undefined, endTime: undefined };
+	}
+
+	return {
+		startTime: Math.min(...allTimes),
+		endTime: Math.max(...allTimes),
+	};
+}

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

@@ -8,16 +8,17 @@ import { Tabs } from '@signozhq/ui/tabs';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
-	getListServicesMetadataQueryKey,
-	invalidateGetService,
-	invalidateListServicesMetadata,
+	getListAccountServicesMetadataQueryKey,
+	invalidateGetAccountService,
+	invalidateListAccountServicesMetadata,
+	useGetAccountService,
 	useGetService,
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
 import {
 	CloudintegrationtypesServiceConfigDTO,
 	CloudintegrationtypesServiceDTO,
-	ListServicesMetadata200,
+	ListAccountServicesMetadata200,
 } from 'api/generated/services/sigNoz.schemas';
 import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
@@ -118,30 +119,50 @@ function ServiceDetails({
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
 	const isReadOnly = !cloudAccountId;
-	const serviceQueryParams = cloudAccountId
-		? { cloud_integration_id: cloudAccountId }
-		: undefined;
 
 	const {
-		queryKey: _queryKey,
-		data: serviceDetailsData,
-		isLoading: isServiceDetailsLoading,
+		queryKey: _accountServiceQueryKey,
+		data: accountServiceData,
+		isLoading: isAccountServiceLoading,
+	} = useGetAccountService(
+		{
+			cloudProvider: type,
+			id: cloudAccountId || '',
+			serviceId: serviceId || '',
+		},
+		{
+			query: {
+				enabled: !!serviceId && !!cloudAccountId,
+				select: (response): ServiceDetailsData => response.data,
+			},
+		},
+	);
+
+	const {
+		queryKey: _readOnlyServiceQueryKey,
+		data: readOnlyServiceData,
+		isLoading: isReadOnlyServiceLoading,
 	} = useGetService(
 		{
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		{
-			...serviceQueryParams,
-		},
+		undefined,
 		{
 			query: {
-				enabled: !!serviceId,
+				enabled: !!serviceId && !cloudAccountId,
 				select: (response): ServiceDetailsData => response.data,
 			},
 		},
 	);
 
+	const serviceDetailsData = cloudAccountId
+		? accountServiceData
+		: readOnlyServiceData;
+	const isServiceDetailsLoading = cloudAccountId
+		? isAccountServiceLoading
+		: isReadOnlyServiceLoading;
+
 	const integrationConfig =
 		type === IntegrationType.AWS_SERVICES
 			? serviceDetailsData?.cloudIntegrationService?.config?.aws
@@ -240,16 +261,12 @@ function ServiceDetails({
 							// instead of waiting for the refetch to complete.
 							reset(nextFormValues);
 
-							const servicesListQueryKey = getListServicesMetadataQueryKey(
-								{
-									cloudProvider: type,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
+							const servicesListQueryKey = getListAccountServicesMetadataQueryKey({
+								cloudProvider: type,
+								id: cloudAccountId,
+							});
 
-							queryClient.setQueryData<ListServicesMetadata200 | undefined>(
+							queryClient.setQueryData<ListAccountServicesMetadata200 | undefined>(
 								servicesListQueryKey,
 								(prev) => {
 									if (!prev?.data?.services?.length) {
@@ -272,26 +289,16 @@ function ServiceDetails({
 								},
 							);
 
-							invalidateGetService(
-								queryClient,
-								{
-									cloudProvider: type,
-									serviceId,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
+							invalidateGetAccountService(queryClient, {
+								cloudProvider: type,
+								id: cloudAccountId,
+								serviceId,
+							});
 
-							invalidateListServicesMetadata(
-								queryClient,
-								{
-									cloudProvider: type,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
+							invalidateListAccountServicesMetadata(queryClient, {
+								cloudProvider: type,
+								id: cloudAccountId,
+							});
 
 							logEvent(`${type} Integration: Service settings saved`, {
 								cloudAccountId,

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

@@ -64,7 +64,7 @@ describe('ServiceDetails for S3 Sync service', () => {
 				(_req, res, ctx) => res(ctx.json(accountsResponse)),
 			),
 			rest.get(
-				'http://localhost/api/v1/cloud_integrations/aws/services/:serviceId',
+				'http://localhost/api/v1/cloud_integrations/aws/accounts/:accountId/services/:serviceId',
 				(req, res, ctx) =>
 					res(
 						ctx.json(

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -32,7 +32,7 @@ const accountsResponse: ListAccounts200 = {
 	},
 };
 
-/** Response shape for GET /cloud_integrations/aws/services/:serviceId (used by ServiceDetails). */
+/** Response shape for GET /cloud_integrations/aws/accounts/:accountId/services/:serviceId (used by ServiceDetails). */
 const buildServiceDetailsResponse = (
 	serviceId: string,
 	initialConfigLogsS3Buckets: Record<string, string[]> = {},
@@ -55,7 +55,6 @@ const buildServiceDetailsResponse = (
 				},
 			},
 		},
-		telemetryCollectionStrategy: { aws: {} },
 	},
 });
 

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/DashboardCard.tsx

@@ -0,0 +1,68 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { CloudintegrationtypesServiceDashboardDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { openInNewTab } from 'utils/navigation';
+
+const DISABLED_TOOLTIP =
+	'Enable metrics collection for this service to view this dashboard.';
+
+function DashboardCard({
+	dashboard,
+	isInteractive,
+}: {
+	dashboard: CloudintegrationtypesServiceDashboardDTO;
+	isInteractive: boolean;
+}): JSX.Element {
+	const dashboardId = dashboard.integrationDashboard?.dashboardId;
+	const isClickable = Boolean(dashboardId) && isInteractive;
+	const dashboardUrl = dashboardId ? `/dashboard/${dashboardId}` : '';
+
+	const { safeNavigate } = useSafeNavigate();
+
+	const interactiveProps = isClickable
+		? {
+				role: 'button',
+				tabIndex: 0,
+				onClick: (event: MouseEvent<HTMLDivElement>): void => {
+					if (event.metaKey || event.ctrlKey) {
+						openInNewTab(dashboardUrl);
+						return;
+					}
+					safeNavigate(dashboardUrl);
+				},
+				onKeyDown: (event: KeyboardEvent<HTMLDivElement>): void => {
+					if (event.key === 'Enter' || event.key === ' ') {
+						event.preventDefault();
+						safeNavigate(dashboardUrl);
+					}
+				},
+			}
+		: {};
+
+	const card = (
+		<div
+			className={`aws-service-dashboard-item ${
+				isClickable
+					? 'aws-service-dashboard-item-clickable'
+					: 'aws-service-dashboard-item-disabled'
+			} `}
+			{...interactiveProps}
+		>
+			<div className="aws-service-dashboard-item-content">
+				<div className="aws-service-dashboard-item-title">{dashboard.title}</div>
+				<div className="aws-service-dashboard-item-description">
+					{dashboard.description}
+				</div>
+			</div>
+		</div>
+	);
+
+	if (!dashboardId) {
+		return <TooltipSimple title={DISABLED_TOOLTIP}>{card}</TooltipSimple>;
+	}
+
+	return card;
+}
+
+export default DashboardCard;

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards.styles.scss

@@ -53,6 +53,11 @@
 				}
 			}
 
+			&.aws-service-dashboard-item-disabled {
+				cursor: not-allowed;
+				opacity: 0.6;
+			}
+
 			.aws-service-dashboard-item-content {
 				display: flex;
 				flex-direction: column;

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

@@ -1,11 +1,9 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import {
-	CloudintegrationtypesDashboardDTO,
+	CloudintegrationtypesServiceDashboardDTO,
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { withBasePath } from 'utils/basePath';
 
+import DashboardCard from './DashboardCard';
 import './ServiceDashboards.styles.scss';
 
 function ServiceDashboards({
@@ -16,7 +14,6 @@ function ServiceDashboards({
 	isInteractive?: boolean;
 }): JSX.Element {
 	const dashboards = service?.assets?.dashboards || [];
-	const { safeNavigate } = useSafeNavigate();
 	if (!dashboards.length) {
 		return <></>;
 	}
@@ -25,68 +22,20 @@ function ServiceDashboards({
 		<div className="aws-service-dashboards">
 			<div className="aws-service-dashboards-title">Dashboards</div>
 			<div className="aws-service-dashboards-items">
-				{dashboards.map((dashboard: CloudintegrationtypesDashboardDTO) => {
-					if (!dashboard.id) {
-						return null;
-					}
-
-					const dashboardUrl = `/dashboard/${dashboard.id}`;
-
-					return (
-						<div
-							key={dashboard.id}
-							className={`aws-service-dashboard-item ${
-								isInteractive ? 'aws-service-dashboard-item-clickable' : ''
-							}`}
-							role={isInteractive ? 'button' : undefined}
-							tabIndex={isInteractive ? 0 : -1}
-							onClick={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.metaKey || event.ctrlKey) {
-									window.open(
-										withBasePath(dashboardUrl),
-										'_blank',
-										'noopener,noreferrer',
-									);
-									return;
-								}
-								safeNavigate(dashboardUrl);
-							}}
-							onAuxClick={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.button === 1) {
-									window.open(
-										withBasePath(dashboardUrl),
-										'_blank',
-										'noopener,noreferrer',
-									);
-								}
-							}}
-							onKeyDown={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.key === 'Enter' || event.key === ' ') {
-									event.preventDefault();
-									safeNavigate(dashboardUrl);
-								}
-							}}
-						>
-							<div className="aws-service-dashboard-item-content">
-								<div className="aws-service-dashboard-item-title">
-									{dashboard.title}
-								</div>
-								<div className="aws-service-dashboard-item-description">
-									{dashboard.description}
-								</div>
-							</div>
-						</div>
-					);
-				})}
+				{dashboards.map(
+					(dashboard: CloudintegrationtypesServiceDashboardDTO, index: number) => {
+						const key =
+							dashboard.integrationDashboard?.dashboardId ||
+							`${dashboard.title}-${index}`;
+						return (
+							<DashboardCard
+								key={key}
+								dashboard={dashboard}
+								isInteractive={isInteractive}
+							/>
+						);
+					},
+				)}
 			</div>
 		</div>
 	);

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

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Skeleton } from 'antd';
-import { useListServicesMetadata } from 'api/generated/services/cloudintegration';
+import {
+	useListAccounts,
+	useListAccountServicesMetadata,
+	useListServicesMetadata,
+} from 'api/generated/services/cloudintegration';
 import type { CloudintegrationtypesServiceMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { IntegrationType } from 'container/Integrations/types';
@@ -20,17 +24,33 @@ function ServicesList({
 }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const hasValidCloudAccountId = Boolean(cloudAccountId);
-	const serviceQueryParams = hasValidCloudAccountId
-		? { cloud_integration_id: cloudAccountId }
-		: undefined;
+	const isAccountConnected = Boolean(cloudAccountId);
+	const { data: listAccountsResponse, isLoading: isAccountsLoading } =
+		useListAccounts({ cloudProvider: type });
+	const hasConnectedAccounts =
+		(listAccountsResponse?.data?.accounts?.length ?? 0) > 0;
 
-	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
-		{
-			cloudProvider: type,
-		},
-		serviceQueryParams,
-	);
+	const { data: accountServicesMetadata, isLoading: isAccountServicesLoading } =
+		useListAccountServicesMetadata(
+			{ cloudProvider: type, id: cloudAccountId },
+			{ query: { enabled: isAccountConnected } },
+		);
+
+	const {
+		data: providerServicesMetadata,
+		isLoading: isProviderServicesLoading,
+	} = useListServicesMetadata({ cloudProvider: type }, undefined, {
+		query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
+	});
+
+	const servicesMetadata = hasConnectedAccounts
+		? accountServicesMetadata
+		: providerServicesMetadata;
+	const isLoading =
+		isAccountsLoading ||
+		(hasConnectedAccounts
+			? isAccountServicesLoading || !isAccountConnected
+			: isProviderServicesLoading);
 
 	const awsServices = useMemo(
 		() => servicesMetadata?.data?.services ?? [],

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -225,7 +225,7 @@ function BodyTitleRenderer({
 						<DropdownMenuTrigger asChild>
 							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
 						</DropdownMenuTrigger>
-						<DropdownMenuContent>
+						<DropdownMenuContent align="start">
 							<div data-log-detail-ignore="true">
 								{menuItems.map((item) => (
 									<DropdownMenuItem

frontend/src/hooks/trace/__tests__/useGetTraceAggregations.test.tsx

@@ -0,0 +1,66 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { getTraceAggregations } from 'api/generated/services/tracedetail';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import useGetTraceAggregations from '../useGetTraceAggregations';
+
+jest.mock('api/generated/services/tracedetail', () => ({
+	__esModule: true,
+	getTraceAggregations: jest
+		.fn()
+		.mockResolvedValue({ status: 'success', data: { aggregations: [] } }),
+}));
+
+const mockApi = getTraceAggregations as jest.Mock;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};
+
+const aggregations = [
+	{ field: { name: 'service.name' }, aggregation: 'execution_time_percentage' },
+] as never;
+
+describe('useGetTraceAggregations', () => {
+	beforeEach(() => mockApi.mockClear());
+
+	it('fetches when enabled with a traceId and aggregations', async () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations, enabled: true }),
+			{ wrapper },
+		);
+		await waitFor(() => expect(mockApi).toHaveBeenCalledTimes(1));
+		expect(mockApi).toHaveBeenCalledWith({ traceID: 't1' }, { aggregations });
+	});
+
+	it('does not fetch when disabled', () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations, enabled: false }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch without a traceId', () => {
+		renderHook(
+			() => useGetTraceAggregations({ traceId: '', aggregations, enabled: true }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch with no aggregations requested', () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations: [], enabled: true }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/trace/useGetTraceAggregations.tsx

@@ -0,0 +1,34 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import {
+	GetTraceAggregations200,
+	SpantypesSpanAggregationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getTraceAggregations } from 'api/generated/services/tracedetail';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+interface UseGetTraceAggregationsProps {
+	traceId: string;
+	aggregations: SpantypesSpanAggregationDTO[];
+	enabled: boolean;
+}
+
+type UseGetTraceAggregations = UseQueryResult<GetTraceAggregations200>;
+
+/**
+ * Fetches trace aggregations on demand — gate via `enabled` so the request
+ * fires only when the Analytics panel is open. The query key includes the
+ * requested fields, so changing the color-by field refetches.
+ */
+const useGetTraceAggregations = ({
+	traceId,
+	aggregations,
+	enabled,
+}: UseGetTraceAggregationsProps): UseGetTraceAggregations =>
+	useQuery({
+		queryFn: () => getTraceAggregations({ traceID: traceId }, { aggregations }),
+		queryKey: [REACT_QUERY_KEY.GET_TRACE_AGGREGATIONS, traceId, aggregations],
+		enabled: enabled && !!traceId && aggregations.length > 0,
+		refetchOnWindowFocus: false,
+	});
+
+export default useGetTraceAggregations;

frontend/src/hooks/trace/useGetTraceV4.tsx

@@ -1,30 +1,29 @@
 import { useQuery, UseQueryResult } from 'react-query';
-import getTraceV3 from 'api/trace/getTraceV3';
+import getTraceV4 from 'api/trace/getTraceV4';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
+	GetTraceV4PayloadProps,
+	GetTraceV4SuccessResponse,
 } from 'types/api/trace/getTraceV3';
 
-const useGetTraceV3 = (props: GetTraceV3PayloadProps): UseTraceV3 =>
+const useGetTraceV4 = (props: GetTraceV4PayloadProps): UseTraceV4 =>
 	useQuery({
-		queryFn: () => getTraceV3(props),
+		queryFn: () => getTraceV4(props),
 		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V3_WATERFALL,
+			REACT_QUERY_KEY.GET_TRACE_V4_WATERFALL,
 			props.traceId,
 			props.selectedSpanId,
 			props.isSelectedSpanIDUnCollapsed,
-			props.aggregations,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,
 		refetchOnWindowFocus: false,
 	});
 
-type UseTraceV3 = UseQueryResult<
-	SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse,
+type UseTraceV4 = UseQueryResult<
+	SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse,
 	unknown
 >;
 
-export default useGetTraceV3;
+export default useGetTraceV4;

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

@@ -18,6 +18,8 @@ interface TooltipHeaderProps {
 	showTooltipHeader: boolean;
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
+	headerRowClassName?: string;
+	dateFormat?: string;
 }
 
 export default function TooltipHeader({
@@ -26,6 +28,8 @@ export default function TooltipHeader({
 	showTooltipHeader,
 	isPinned,
 	activeItem,
+	headerRowClassName,
+	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -44,12 +48,13 @@ export default function TooltipHeader({
 		}
 		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+			.format(dateFormat);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
+		dateFormat,
 	]);
 
 	return (
@@ -58,7 +63,7 @@ export default function TooltipHeader({
 			data-testid="uplot-tooltip-header-container"
 		>
 			{showTooltipHeader && headerTitle && (
-				<div className={Styles.headerRow}>
+				<div className={cx(Styles.headerRow, headerRowClassName)}>
 					<span>{headerTitle}</span>
 					{isPinned && (
 						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -6,6 +6,10 @@ import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
+import type { DashboardSection } from '../../utils';
+import type { DeletePanelArgs } from './hooks/useDeletePanel';
+import type { MovePanelArgs } from './hooks/useMovePanelToSection';
+import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
 interface Props {
@@ -17,9 +21,22 @@ interface Props {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
+function Panel({
+	panel,
+	panelId,
+	isVisible,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -48,7 +65,17 @@ function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				<EllipsisVertical size={14} />
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
+					<PanelActionsMenu
+						panelId={panelId}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
+					/>
+				) : (
+					<EllipsisVertical size={14} />
+				)}
 			</div>
 
 			<div className={styles.body}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import styles from './PanelActionsMenu.module.scss';
+
+interface Props {
+	panelId: string;
+	currentLayoutIndex: number;
+	sections: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelActionsMenu({
+	panelId,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+
+		if (onMovePanel) {
+			const targets = sections.filter(
+				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
+			);
+			if (targets.length === 0) {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					disabled: true,
+				});
+			} else {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					children: targets.map((s) => ({
+						key: `move-${s.layoutIndex}`,
+						label: s.title,
+						onClick: (): void =>
+							onMovePanel({
+								panelId,
+								fromLayoutIndex: currentLayoutIndex,
+								toLayoutIndex: s.layoutIndex,
+							}),
+					})),
+				});
+			}
+		}
+
+		if (onDeletePanel) {
+			if (result.length > 0) {
+				result.push({ type: 'divider' });
+			}
+			result.push({
+				key: 'delete-panel',
+				danger: true,
+				icon: <Trash2 size={14} />,
+				label: 'Delete panel',
+				onClick: (): void =>
+					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
+			});
+		}
+
+		return result;
+	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<button
+				type="button"
+				className={styles.trigger}
+				aria-label="Panel actions"
+				data-testid={`panel-actions-${panelId}`}
+				// Stop pointer/mouse down from reaching the RGL drag handle this
+				// button lives inside, so opening the menu never starts a panel drag.
+				onPointerDown={(e): void => e.stopPropagation()}
+				onMouseDown={(e): void => e.stopPropagation()}
+				onClick={(e): void => e.stopPropagation()}
+			>
+				<EllipsisVertical size={14} />
+			</button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default PanelActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -0,0 +1,22 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+}
+
+.typeButton {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-100, #fff);
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -0,0 +1,82 @@
+import { Modal } from 'antd';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import styles from './PanelTypeSelectionModal.module.scss';
+
+interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];
+
+interface Props {
+	open: boolean;
+	onClose: () => void;
+	onSelect: (pluginKind: string) => void;
+}
+
+function PanelTypeSelectionModal({
+	open,
+	onClose,
+	onSelect,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Select a panel type"
+			onCancel={onClose}
+			footer={null}
+			destroyOnClose
+		>
+			<div className={styles.grid}>
+				{PANEL_TYPES.map((type) => (
+					<button
+						key={type.pluginKind}
+						type="button"
+						className={styles.typeButton}
+						data-testid={`panel-type-${type.pluginKind}`}
+						onClick={(): void => onSelect(type.pluginKind)}
+					>
+						{type.icon}
+						{type.label}
+					</button>
+				))}
+			</div>
+		</Modal>
+	);
+}
+
+export default PanelTypeSelectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts

@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+	addPanelToSectionOps,
+	createDefaultPanel,
+	panelRef,
+} from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+export interface AddPanelArgs {
+	layoutIndex: number;
+	pluginKind: string;
+}
+
+/**
+ * Creates a new panel and places its item ref at the bottom of the target
+ * section, as one atomic patch. Structure-only: the panel is a valid minimal
+ * placeholder (its query is filled in once the panel editor lands).
+ */
+export function useAddPanelToSection({
+	sections,
+}: Params): (args: AddPanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const target = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!target) {
+				return;
+			}
+
+			const panelId = uuid();
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					addPanelToSectionOps({
+						panelId,
+						panel: createDefaultPanel(pluginKind),
+						layoutIndex,
+						item: {
+							x: 0,
+							y: nextY,
+							width: 6,
+							height: 6,
+							content: { $ref: panelRef(panelId) },
+						},
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+export interface DeletePanelArgs {
+	panelId: string;
+	layoutIndex: number;
+}
+
+/**
+ * Removes a panel: drops its item ref from the section's items and deletes the
+ * panel from `spec.panels`, as one atomic patch.
+ */
+export function useDeletePanel({
+	sections,
+}: Params): (args: DeletePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const section = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!section) {
+				return;
+			}
+
+			const nextItems = section.items.filter((i) => i.id !== panelId);
+			try {
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+					removePanelOp(panelId),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { movePanelBetweenSectionsOps } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+export interface MovePanelArgs {
+	panelId: string;
+	fromLayoutIndex: number;
+	toLayoutIndex: number;
+}
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+/**
+ * Relocates a panel's item ref from one section to another. The panel itself
+ * stays in `spec.panels`; only the grid item moves, dropped into a free row at
+ * the bottom of the target section. Persisted as one atomic patch.
+ */
+export function useMovePanelToSection({
+	sections,
+}: Params): (args: MovePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({
+			panelId,
+			fromLayoutIndex,
+			toLayoutIndex,
+		}: MovePanelArgs): Promise<void> => {
+			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
+				return;
+			}
+
+			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
+			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
+			if (!source || !target) {
+				return;
+			}
+
+			const moved = source.items.find((i) => i.id === panelId);
+			if (!moved) {
+				return;
+			}
+
+			const sourceItems = source.items.filter((i) => i.id !== panelId);
+			// Place at a fresh row at the bottom of the target section.
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					movePanelBetweenSectionsOps({
+						sourceIndex: fromLayoutIndex,
+						sourceItems,
+						targetIndex: toLayoutIndex,
+						targetItems,
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -0,0 +1,17 @@
+.addButton {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 8px;
+	padding: 8px 12px;
+	background: transparent;
+	border: 1px dashed var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+		color: var(--bg-vanilla-100, #fff);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } from '../../../utils';
+import { useAddSection } from '../hooks/useAddSection';
+import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
+import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
+import styles from './AddSectionControl.module.scss';
+
+const DEFAULT_SECTION_TITLE = 'New section';
+
+interface Props {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	isSectioned: boolean;
+}
+
+function AddSectionControl({
+	sections,
+	layouts,
+	isSectioned,
+}: Props): JSX.Element {
+	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
+	const { addSection } = useAddSection({ layouts });
+	const { migrate, isSaving } = useFirstSectionMigration({ sections });
+
+	// Free-flowing dashboard with existing panels → must migrate before sections
+	// can coexist (every panel must belong to a section once any exists).
+	const needsMigration =
+		!isSectioned && sections.some((s) => s.items.length > 0);
+
+	const handleClick = (): void => {
+		if (needsMigration) {
+			setIsMigrationOpen(true);
+			return;
+		}
+		void addSection(DEFAULT_SECTION_TITLE);
+	};
+
+	const handleConfirmMigration = async (): Promise<void> => {
+		await migrate(DEFAULT_SECTION_TITLE);
+		setIsMigrationOpen(false);
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				className={styles.addButton}
+				onClick={handleClick}
+				data-testid="add-section"
+			>
+				<Plus size={14} />
+				Add section
+			</button>
+			<FirstSectionMigrationModal
+				open={isMigrationOpen}
+				isSaving={isSaving}
+				onClose={(): void => setIsMigrationOpen(false)}
+				onConfirm={handleConfirmMigration}
+			/>
+		</>
+	);
+}
+
+export default AddSectionControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -0,0 +1,41 @@
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+interface Props {
+	open: boolean;
+	isSaving: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+/**
+ * Shown when the user adds the first section to a free-flowing dashboard that
+ * already has panels. Confirms grouping the existing panels into a section
+ * before proceeding.
+ */
+function FirstSectionMigrationModal({
+	open,
+	isSaving,
+	onClose,
+	onConfirm,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Group panels into sections?"
+			onCancel={onClose}
+			onOk={onConfirm}
+			okText="Continue"
+			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
+			destroyOnClose
+		>
+			<Typography.Text>
+				This dashboard&apos;s panels are currently free-flowing. Adding a section
+				will move the existing panels into their own section, and a new empty
+				section will be added below. You can rename sections afterwards.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+export default FirstSectionMigrationModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+
+interface Props {
+	open: boolean;
+	initialValue: string;
+	isSaving: boolean;
+	onClose: () => void;
+	onSubmit: (title: string) => void;
+}
+
+function RenameSectionModal({
+	open,
+	initialValue,
+	isSaving,
+	onClose,
+	onSubmit,
+}: Props): JSX.Element {
+	const [value, setValue] = useState<string>(initialValue);
+
+	// Reseed the field each time the modal opens.
+	useEffect(() => {
+		if (open) {
+			setValue(initialValue);
+		}
+	}, [open, initialValue]);
+
+	const submit = (): void => {
+		const trimmed = value.trim();
+		if (trimmed) {
+			onSubmit(trimmed);
+		}
+	};
+
+	return (
+		<Modal
+			open={open}
+			title="Rename section"
+			onCancel={onClose}
+			onOk={submit}
+			okText="Rename"
+			okButtonProps={{ disabled: isSaving || !value.trim() }}
+			destroyOnClose
+		>
+			<Input
+				testId="rename-section-input"
+				autoFocus
+				value={value}
+				maxLength={120}
+				placeholder="Section name"
+				onChange={(e): void => setValue(e.target.value)}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						submit();
+					}
+				}}
+			/>
+		</Modal>
+	);
+}
+
+export default RenameSectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,17 +1,45 @@
 import { useRef, useState } from 'react';
+import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 
 import type { DashboardSection } from '../../../utils';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useDeleteSection } from '../hooks/useDeleteSection';
+import { useRenameSection } from '../hooks/useRenameSection';
+import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
+import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader from '../SectionHeader/SectionHeader';
+import SectionHeader, {
+	type SectionDragHandle,
+} from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
 interface Props {
 	section: DashboardSection;
+	/** Adds a panel to this section; present only in editable sectioned mode. */
+	onAddPanel?: (args: AddPanelArgs) => void;
+	/** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
 }
 
-function Section({ section }: Props): JSX.Element {
+function Section({
+	section,
+	onAddPanel,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+	dragHandle,
+}: Props): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -19,10 +47,48 @@ function Section({ section }: Props): JSX.Element {
 		rootMargin: '200px',
 	});
 
-	const [open, setOpen] = useState<boolean>(section.open);
-	const toggle = (): void => setOpen((prev) => !prev);
+	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
 
-	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
+	const [isRenaming, setIsRenaming] = useState(false);
+	const { rename, isSaving } = useRenameSection({
+		layoutIndex: section.layoutIndex,
+	});
+
+	const handleRenameSubmit = async (title: string): Promise<void> => {
+		const ok = await rename(title);
+		if (ok) {
+			setIsRenaming(false);
+		}
+	};
+
+	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const handleSelectPanelType = (pluginKind: string): void => {
+		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+		setIsAddingPanel(false);
+	};
+
+	const { deleteSection } = useDeleteSection({ section });
+	const confirmDeleteSection = (): void => {
+		Modal.confirm({
+			title: `Delete section "${section.title ?? ''}"?`,
+			content: 'Panels in this section will be removed.',
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+			onOk: () => deleteSection(),
+		});
+	};
+
+	const grid = (
+		<SectionGrid
+			items={section.items}
+			layoutIndex={section.layoutIndex}
+			isVisible={isVisible}
+			sections={sections}
+			onMovePanel={onMovePanel}
+			onDeletePanel={onDeletePanel}
+		/>
+	);
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -51,8 +117,26 @@ function Section({ section }: Props): JSX.Element {
 				open={open}
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
+				dragHandle={dragHandle}
+				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+				onAddPanel={
+					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
+				}
+				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
 			{open ? grid : null}
+			<RenameSectionModal
+				open={isRenaming}
+				initialValue={section.title}
+				isSaving={isSaving}
+				onClose={(): void => setIsRenaming(false)}
+				onSubmit={handleRenameSubmit}
+			/>
+			<PanelTypeSelectionModal
+				open={isAddingPanel}
+				onClose={(): void => setIsAddingPanel(false)}
+				onSelect={handleSelectPanelType}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import styles from './SectionActionsMenu.module.scss';
+
+interface Props {
+	sectionId: string;
+	onAddPanel?: () => void;
+	onRename?: () => void;
+	onDeleteSection?: () => void;
+}
+
+function SectionActionsMenu({
+	sectionId,
+	onAddPanel,
+	onRename,
+	onDeleteSection,
+}: Props): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+		if (onAddPanel) {
+			result.push({
+				key: 'add-panel',
+				icon: <Plus size={14} />,
+				label: 'Add panel',
+				onClick: onAddPanel,
+			});
+		}
+		if (onRename) {
+			result.push({
+				key: 'rename',
+				icon: <PenLine size={14} />,
+				label: 'Rename section',
+				onClick: onRename,
+			});
+		}
+		if (onDeleteSection) {
+			result.push(
+				{ type: 'divider' },
+				{
+					key: 'delete-section',
+					danger: true,
+					icon: <Trash2 size={14} />,
+					label: 'Delete section',
+					onClick: onDeleteSection,
+				},
+			);
+		}
+		return result;
+	}, [onAddPanel, onRename, onDeleteSection]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<button
+				type="button"
+				className={styles.trigger}
+				aria-label="Section actions"
+				data-testid={`dashboard-section-actions-${sectionId}`}
+			>
+				<EllipsisVertical size={14} />
+			</button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SectionActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -0,0 +1,7 @@
+.preview {
+	border: 1px solid var(--bg-robin-500);
+	border-radius: 4px;
+	background: var(--bg-ink-400, #0b0c0e);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
+	cursor: grabbing;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -0,0 +1,32 @@
+import type { DashboardSection } from '../../../utils';
+import SectionHeader from '../SectionHeader/SectionHeader';
+import styles from './SectionDragPreview.module.scss';
+
+interface Props {
+	section: DashboardSection;
+}
+
+/**
+ * Lightweight preview rendered inside the DragOverlay while a section is being
+ * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
+ * cheap and never triggers RGL width re-measurement.
+ */
+function SectionDragPreview({ section }: Props): JSX.Element {
+	const panelCount = section.items.length;
+	const title = `${section.title ?? ''} · ${panelCount} ${
+		panelCount === 1 ? 'panel' : 'panels'
+	}`;
+
+	return (
+		<div className={styles.preview}>
+			<SectionHeader
+				sectionId={`${section.id}-preview`}
+				title={title}
+				open={false}
+				onToggle={(): void => undefined}
+			/>
+		</div>
+	);
+}
+
+export default SectionDragPreview;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,18 +2,35 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
 import Panel from '../../Panel/Panel';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { usePersistLayout } from '../hooks/usePersistLayout';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
 interface Props {
 	items: DashboardSection['items'];
+	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
 	isVisible?: boolean;
+	/** All sections + handlers — present only in editable sectioned mode (panel "Move to section" / delete). */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function SectionGrid({ items, isVisible }: Props): JSX.Element {
+function SectionGrid({
+	items,
+	layoutIndex,
+	isVisible,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -26,6 +43,8 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 		[items],
 	);
 
+	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
+
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -34,13 +53,24 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			isDraggable={false}
-			isResizable={false}
+			draggableHandle=".panel-drag-handle"
+			isDraggable={isEditable}
+			isResizable={isEditable}
+			onDragStop={handleLayoutChange}
+			onResizeStop={handleLayoutChange}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
+					<Panel
+						panel={item.panel}
+						panelId={item.id}
+						isVisible={isVisible}
+						currentLayoutIndex={layoutIndex}
+						sections={isEditable ? sections : undefined}
+						onMovePanel={isEditable ? onMovePanel : undefined}
+						onDeletePanel={isEditable ? onDeletePanel : undefined}
+					/>
 				</div>
 			))}
 		</ResponsiveGridLayout>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,15 +1,29 @@
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
+import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
 import styles from './SectionHeader.module.scss';
 
+export interface SectionDragHandle {
+	attributes: DraggableAttributes;
+	listeners: SyntheticListenerMap | undefined;
+	setActivatorNodeRef: (element: HTMLElement | null) => void;
+}
+
 interface Props {
 	sectionId: string;
 	title: string;
 	open: boolean;
 	onToggle: () => void;
 	repeatVariable?: string;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -18,9 +32,27 @@ function SectionHeader({
 	open,
 	onToggle,
 	repeatVariable,
+	dragHandle,
+	onRename,
+	onAddPanel,
+	onDeleteSection,
 }: Props): JSX.Element {
+	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
+			{dragHandle ? (
+				<button
+					type="button"
+					className={styles.dragHandle}
+					ref={dragHandle.setActivatorNodeRef}
+					aria-label="Drag to reorder section"
+					data-testid={`dashboard-section-drag-${sectionId}`}
+					{...dragHandle.attributes}
+					{...dragHandle.listeners}
+				>
+					<GripVertical size={14} />
+				</button>
+			) : null}
 			<button
 				type="button"
 				className={styles.toggle}
@@ -35,6 +67,14 @@ function SectionHeader({
 					</Typography.Text>
 				) : null}
 			</button>
+			{hasActions ? (
+				<SectionActionsMenu
+					sectionId={sectionId}
+					onAddPanel={onAddPanel}
+					onRename={onRename}
+					onDeleteSection={onDeleteSection}
+				/>
+			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
+import {
+	restrictToParentElement,
+	restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
+import {
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } from '../../utils';
+import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
+import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
+import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSectionDragReorder } from './hooks/useSectionDragReorder';
+import Section from './Section/Section';
+import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
+import SortableSection from './SortableSection';
+
+interface Props {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+function SectionList({ sections, layouts }: Props): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
+	const {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	} = useSectionDragReorder({ sections, layouts });
+
+	const onAddPanel = useAddPanelToSection({ sections });
+	const onMovePanel = useMovePanelToSection({ sections });
+	const onDeletePanel = useDeletePanel({ sections });
+
+	// Only titled sections participate in reordering; untitled (free-flow)
+	// blocks render in place without a drag handle.
+	const sortableIds = useMemo(
+		() => orderedSections.filter((s) => s.title).map((s) => s.id),
+		[orderedSections],
+	);
+
+	if (!isEditable) {
+		return (
+			<>
+				{sections.map((section) => (
+					<Section key={section.id} section={section} />
+				))}
+			</>
+		);
+	}
+
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={closestCenter}
+			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+			onDragCancel={onDragCancel}
+		>
+			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+				{orderedSections.map((section) =>
+					section.title ? (
+						<SortableSection
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					) : (
+						<Section
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					),
+				)}
+			</SortableContext>
+			{/* dropAnimation disabled: optimistic reorder already places the section,
+			    so animating the overlay back would cause a visible snap/shake. */}
+			<DragOverlay dropAnimation={null}>
+				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
+			</DragOverlay>
+		</DndContext>
+	);
+}
+
+export default SectionList;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -0,0 +1,59 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import type { DashboardSection } from '../../utils';
+import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
+import Section from './Section/Section';
+
+interface Props {
+	section: DashboardSection;
+	sections: DashboardSection[];
+	onAddPanel: (args: AddPanelArgs) => void;
+	onMovePanel: (args: MovePanelArgs) => void;
+	onDeletePanel: (args: DeletePanelArgs) => void;
+}
+
+function SortableSection({
+	section,
+	sections,
+	onAddPanel,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: section.id });
+
+	// dnd-kit drives the drag transform per-frame, so this must be an inline
+	// style — there is no static-stylesheet equivalent for a live transform.
+	// While dragging, the original is hidden (the DragOverlay renders the moving
+	// preview); keeping it in place preserves the gap and lets siblings animate.
+	const style: React.CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0 : undefined,
+	};
+
+	return (
+		<div ref={setNodeRef} style={style}>
+			<Section
+				section={section}
+				sections={sections}
+				onAddPanel={onAddPanel}
+				onMovePanel={onMovePanel}
+				onDeletePanel={onDeletePanel}
+				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
+			/>
+		</div>
+	);
+}
+
+export default SortableSection;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+	addSectionOp,
+	newGridLayout,
+	reorderLayoutsOp,
+} from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+interface Result {
+	addSection: (title: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Appends an empty titled section. When the dashboard has no layouts yet, the
+ * layouts array is created via a `replace` (an `add` to a missing/empty array
+ * pointer is unreliable); otherwise a new Grid is appended.
+ */
+export function useAddSection({ layouts }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const addSection = useCallback(
+		async (title: string): Promise<void> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+			const op =
+				!layouts || layouts.length === 0
+					? reorderLayoutsOp([newGridLayout(trimmed)])
+					: addSectionOp(trimmed);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [op]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	return { addSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useDeleteSection.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, removeSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	section: DashboardSection;
+}
+
+interface Result {
+	deleteSection: () => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Deletes a section: removes its Grid layout and deletes every panel it
+ * contained from `spec.panels` (orphan cleanup), as one atomic patch.
+ */
+export function useDeleteSection({ section }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const deleteSection = useCallback(async (): Promise<void> => {
+		if (!dashboardId) {
+			return;
+		}
+		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
+			removePanelOp(i.id),
+		);
+		ops.push(removeSectionOp(section.layoutIndex));
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id: dashboardId }, ops);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [section, dashboardId, refetch, showErrorModal]);
+
+	return { deleteSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useFirstSectionMigration.ts

@@ -0,0 +1,64 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+interface Result {
+	migrate: (newSectionTitle: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Converts a free-flowing dashboard into a sectioned one: every existing
+ * untitled layout that holds panels is titled in place ("Section 1", "Section
+ * 2", …), then the brand-new section the user asked for is appended — all in one
+ * atomic patch. Used once the user confirms the migration prompt.
+ */
+export function useFirstSectionMigration({ sections }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const migrate = useCallback(
+		async (newSectionTitle: string): Promise<void> => {
+			const trimmed = newSectionTitle.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+
+			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+			let counter = 1;
+			sections.forEach((s) => {
+				if (!s.title && s.items.length > 0) {
+					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
+					counter += 1;
+				}
+			});
+			ops.push(addSectionOp(trimmed));
+
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, ops);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+
+	return { migrate, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/usePersistLayout.ts

@@ -0,0 +1,97 @@
+import { useCallback, useState } from 'react';
+import type { Layout } from 'react-grid-layout';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { replaceSectionItemsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { GridItem } from '../../../utils';
+
+interface Params {
+	layoutIndex: number;
+	items: GridItem[];
+}
+
+interface Result {
+	handleLayoutChange: (rglLayout: Layout[]) => void;
+	isSaving: boolean;
+}
+
+/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
+function mergeRglLayout(rglLayout: Layout[], items: GridItem[]): GridItem[] {
+	const byId = new Map(items.map((item) => [item.id, item]));
+	return rglLayout
+		.map((entry) => {
+			const existing = byId.get(entry.i);
+			if (!existing) {
+				return null;
+			}
+			return {
+				...existing,
+				x: entry.x,
+				y: entry.y,
+				width: entry.w,
+				height: entry.h,
+			};
+		})
+		.filter((item): item is GridItem => item !== null);
+}
+
+function hasGeometryChanged(next: GridItem[], prev: GridItem[]): boolean {
+	if (next.length !== prev.length) {
+		return true;
+	}
+	const prevById = new Map(prev.map((item) => [item.id, item]));
+	return next.some((item) => {
+		const before = prevById.get(item.id);
+		if (!before) {
+			return true;
+		}
+		return (
+			before.x !== item.x ||
+			before.y !== item.y ||
+			before.width !== item.width ||
+			before.height !== item.height
+		);
+	});
+}
+
+/**
+ * Persists panel geometry within a single section. Call the returned handler
+ * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
+ * `onLayoutChange`) to limit network churn.
+ */
+export function usePersistLayout({ layoutIndex, items }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const handleLayoutChange = useCallback(
+		async (rglLayout: Layout[]): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const nextItems = mergeRglLayout(rglLayout, items);
+			if (!hasGeometryChanged(nextItems, items)) {
+				return;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, items, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { handleLayoutChange, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useRenameSection.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { renameSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layoutIndex: number;
+}
+
+interface Result {
+	rename: (title: string) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
+export function useRenameSection({ layoutIndex }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const rename = useCallback(
+		async (title: string): Promise<boolean> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return false;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					renameSectionOp(layoutIndex, trimmed),
+				]);
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { rename, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionDragReorder.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	type DragEndEvent,
+	type DragStartEvent,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { reorderLayoutsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+interface Result {
+	sensors: ReturnType<typeof useSensors>;
+	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
+	orderedSections: DashboardSection[];
+	/** The section currently being dragged (for the DragOverlay preview), or null. */
+	activeSection: DashboardSection | null;
+	onDragStart: (event: DragStartEvent) => void;
+	onDragEnd: (event: DragEndEvent) => void;
+	onDragCancel: () => void;
+}
+
+/**
+ * Owns section-reorder drag state. Reorders happen optimistically in local
+ * state (keyed by stable section id) and persist via a single
+ * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
+ * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
+ * so the new layouts array is rebuilt by mapping the reordered sections back.
+ */
+export function useSectionDragReorder({ sections, layouts }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [activeId, setActiveId] = useState<string | null>(null);
+	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
+	const { showErrorModal } = useErrorModal();
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+	);
+
+	// Server data is the source of truth — drop optimistic order whenever it changes.
+	useEffect(() => {
+		setLocalOrderIds(null);
+	}, [sections]);
+
+	const orderedSections = useMemo<DashboardSection[]>(() => {
+		if (!localOrderIds) {
+			return sections;
+		}
+		const byId = new Map(sections.map((s) => [s.id, s]));
+		const ordered = localOrderIds
+			.map((id) => byId.get(id))
+			.filter((s): s is DashboardSection => s !== undefined);
+		return ordered.length === sections.length ? ordered : sections;
+	}, [sections, localOrderIds]);
+
+	const onDragStart = useCallback((event: DragStartEvent): void => {
+		setActiveId(String(event.active.id));
+	}, []);
+
+	const onDragCancel = useCallback((): void => {
+		setActiveId(null);
+	}, []);
+
+	const onDragEnd = useCallback(
+		async (event: DragEndEvent): Promise<void> => {
+			setActiveId(null);
+			const { active, over } = event;
+			if (!over || active.id === over.id || !dashboardId || !layouts) {
+				return;
+			}
+
+			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
+			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
+			if (oldIndex < 0 || newIndex < 0) {
+				return;
+			}
+
+			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
+			setLocalOrderIds(newOrdered.map((s) => s.id));
+
+			const newLayouts = newOrdered
+				.map((s) => layouts[s.layoutIndex])
+				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
+
+			try {
+				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
+				refetch();
+			} catch (error) {
+				setLocalOrderIds(null); // revert optimistic order on failure
+				showErrorModal(error as APIError);
+			}
+		},
+		[orderedSections, layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	const activeSection = useMemo(
+		() => orderedSections.find((s) => s.id === activeId) ?? null,
+		[orderedSections, activeId],
+	);
+
+	return {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useToggleSectionCollapse.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import {
+	selectIsSectionOpen,
+	useDashboardStore,
+} from '../../../store/useDashboardStore';
+
+interface Params {
+	sectionId: string;
+}
+
+interface Result {
+	open: boolean;
+	toggle: () => void;
+}
+
+/**
+ * Owns a section's expand/collapse state. Collapse is a frontend-only, per-user
+ * preference (not in the dashboard spec): it lives in the persisted zustand
+ * store, keyed by dashboardId + section id, and survives reloads. Default open.
+ */
+export function useToggleSectionCollapse({ sectionId }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const open = useDashboardStore(selectIsSectionOpen(dashboardId, sectionId));
+	const toggleSectionCollapse = useDashboardStore(
+		(s) => s.toggleSectionCollapse,
+	);
+
+	const toggle = useCallback((): void => {
+		if (dashboardId) {
+			toggleSectionCollapse(dashboardId, sectionId);
+		}
+	}, [dashboardId, sectionId, toggleSectionCollapse]);
+
+	return { open, toggle };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -7,8 +7,11 @@ import type {
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
+import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
+import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
+import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
 
 import 'react-grid-layout/css/styles.css';
@@ -20,6 +23,8 @@ interface Props {
 }
 
 function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -28,6 +33,11 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const isEmpty =
 		sections.length === 0 || sections.every((s) => s.items.length === 0);
 
+	// Sectioned mode = at least one titled layout. Sections then become a
+	// reorderable list; otherwise the dashboard is a single free-flowing grid
+	// with no section chrome or reordering.
+	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
+
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
 			return (
@@ -42,12 +52,27 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 			);
 		}
 
+		if (isSectioned) {
+			return <SectionList sections={sections} layouts={layouts} />;
+		}
+
 		return sections.map((section) => (
 			<Section key={section.id} section={section} />
 		));
 	};
 
-	return <div className={styles.body}>{renderContent()}</div>;
+	return (
+		<div className={styles.body}>
+			{renderContent()}
+			{isEditable ? (
+				<AddSectionControl
+					sections={sections}
+					layouts={layouts}
+					isSectioned={isSectioned}
+				/>
+			) : null}
+		</div>
+	);
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -1,10 +1,13 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
 
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
+import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
 interface Props {
@@ -15,6 +18,17 @@ interface Props {
 function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const isEditable = !dashboard.locked && editDashboard;
+
+	// Publish edit context to the store so hooks/components read it from there
+	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
+	const setEditContext = useDashboardStore((s) => s.setEditContext);
+	useEffect(() => {
+		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
+	}, [dashboard.id, isEditable, refetch, setEditContext]);
+
 	const { spec } = dashboard;
 	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
 	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -0,0 +1,177 @@
+import type {
+	DashboardGridItemDTO,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+
+import type { GridItem } from './utils';
+
+/**
+ * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
+ * intentionally side-effect-free (no React, no network) so they can be unit
+ * tested and reused by the layout hooks. JSON pointers target the postable
+ * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
+ * patches in DashboardSettings/General and DashboardDescription).
+ */
+
+const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+
+const PANEL_REF_PREFIX = '#/spec/panels/';
+
+export function panelRef(panelId: string): string {
+	return `${PANEL_REF_PREFIX}${panelId}`;
+}
+
+/**
+ * Builds a minimal, backend-valid panel for a given plugin kind. The spec
+ * requires exactly one query whose plugin kind is allowed for the panel;
+ * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
+ * validated, so an empty builder query is the safe default. The real query is
+ * filled in once the panel editor lands.
+ */
+export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
+	// The DTO types plugin/query kinds as large generated enum unions; the kind
+	// here is chosen dynamically by the user, so we build the structurally-valid
+	// shape and assert the type.
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'New panel' },
+			plugin: { kind: pluginKind, spec: {} },
+			queries: [
+				{
+					kind: 'TimeSeriesQuery',
+					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+/** Converts a UI grid item back into the spec's grid-item DTO shape. */
+export function gridItemToDTO(item: GridItem): DashboardGridItemDTO {
+	return {
+		x: item.x,
+		y: item.y,
+		width: item.width,
+		height: item.height,
+		content: { $ref: panelRef(item.id) },
+	};
+}
+
+/** Replace the entire items array of one section (used on panel move/resize). */
+export function replaceSectionItemsOp(
+	layoutIndex: number,
+	items: GridItem[],
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/items`,
+		value: items.map(gridItemToDTO),
+	};
+}
+
+/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
+export function reorderLayoutsOp(
+	layouts: DashboardtypesLayoutDTO[],
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: replace, path: '/spec/layouts', value: layouts };
+}
+
+/** An empty titled Grid layout (one section). */
+export function newGridLayout(title: string): DashboardtypesLayoutDTO {
+	return {
+		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
+		spec: { display: { title }, items: [] },
+	};
+}
+
+/** Append a new, empty titled Grid section. */
+export function addSectionOp(
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
+}
+
+interface AddPanelToSectionArgs {
+	panelId: string;
+	panel: DashboardtypesPanelDTO;
+	layoutIndex: number;
+	item: DashboardGridItemDTO;
+}
+
+/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
+export function addPanelToSectionOps({
+	panelId,
+	panel,
+	layoutIndex,
+	item,
+}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
+		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
+	];
+}
+
+interface MovePanelArgs {
+	sourceIndex: number;
+	sourceItems: GridItem[];
+	targetIndex: number;
+	targetItems: GridItem[];
+}
+
+/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
+export function movePanelBetweenSectionsOps({
+	sourceIndex,
+	sourceItems,
+	targetIndex,
+	targetItems,
+}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		replaceSectionItemsOp(sourceIndex, sourceItems),
+		replaceSectionItemsOp(targetIndex, targetItems),
+	];
+}
+
+/** Rename an existing section's title. */
+export function renameSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
+		value: title,
+	};
+}
+
+/**
+ * First-section migration: give an existing untitled (free-flowing) layout a
+ * title, turning it into a section in place while preserving its panels.
+ */
+export function titleUntitledSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: add,
+		path: `/spec/layouts/${layoutIndex}/spec/display`,
+		value: { title },
+	};
+}
+
+/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
+export function removeSectionOp(
+	layoutIndex: number,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
+}
+
+/** Remove a panel definition from `spec.panels`. */
+export function removePanelOp(
+	panelId: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/panels/${panelId}` };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/collapseSlice.ts

@@ -0,0 +1,35 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Section collapse state — frontend-only and persisted to localStorage. Keyed by
+ * dashboardId → section stable id → open. An absent entry means "open" (the
+ * default). This is intentionally NOT server state: collapse is a per-user UI
+ * preference, so it lives here instead of in the dashboard spec.
+ */
+export interface CollapseSlice {
+	collapsed: Record<string, Record<string, boolean>>;
+	toggleSectionCollapse: (dashboardId: string, sectionId: string) => void;
+}
+
+export const createCollapseSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	CollapseSlice
+> = (set, get) => ({
+	collapsed: {},
+	toggleSectionCollapse: (dashboardId, sectionId): void => {
+		const { collapsed } = get();
+		const current = collapsed[dashboardId]?.[sectionId];
+		// Absent → open by default, so the first toggle closes it.
+		const next = current === undefined ? false : !current;
+		set({
+			collapsed: {
+				...collapsed,
+				[dashboardId]: { ...collapsed[dashboardId], [sectionId]: next },
+			},
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/editContextSlice.ts

@@ -0,0 +1,38 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Edit context shared across the V2 dashboard tree — the dashboard id, whether
+ * the user can edit, and the react-query refetch. Set once by DashboardContainer
+ * so hooks/components read it from the store instead of receiving it as props
+ * through every layer. Not persisted.
+ */
+export interface EditContextSlice {
+	dashboardId: string;
+	isEditable: boolean;
+	refetch: () => void;
+	setEditContext: (ctx: {
+		dashboardId: string;
+		isEditable: boolean;
+		refetch: () => void;
+	}) => void;
+}
+
+export const createEditContextSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	EditContextSlice
+> = (set) => ({
+	dashboardId: '',
+	isEditable: false,
+	refetch: (): void => undefined,
+	setEditContext: (ctx): void => {
+		set({
+			dashboardId: ctx.dashboardId,
+			isEditable: ctx.isEditable,
+			refetch: ctx.refetch,
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import {
+	createEditContextSlice,
+	type EditContextSlice,
+} from './slices/editContextSlice';
+import {
+	createCollapseSlice,
+	type CollapseSlice,
+} from './slices/collapseSlice';
+
+export type DashboardStore = EditContextSlice & CollapseSlice;
+
+/**
+ * V2 dashboard session store. Holds cross-cutting client state only — never the
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
+ * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
+ * - collapse: per-section open state (frontend-only, persisted to localStorage).
+ */
+export const useDashboardStore = create<DashboardStore>()(
+	persist(
+		(...a) => ({
+			...createEditContextSlice(...a),
+			...createCollapseSlice(...a),
+		}),
+		{
+			name: '@signoz/dashboard-v2',
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
+		},
+	),
+);
+
+/** Selector: is a section open? Absent entry (or no dashboard) → open by default. */
+export const selectIsSectionOpen =
+	(dashboardId: string, sectionId: string) =>
+	(state: DashboardStore): boolean => {
+		if (!dashboardId) {
+			return true;
+		}
+		const value = state.collapsed[dashboardId]?.[sectionId];
+		return value === undefined ? true : value;
+	};

frontend/src/pages/DashboardPageV2/DashboardContainer/utils.ts

@@ -72,7 +72,6 @@ export interface DashboardSection {
 	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
 	layoutIndex: number;
 	title: string | undefined;
-	open: boolean;
 	items: GridItem[];
 	repeatVariable: string | undefined;
 }
@@ -127,15 +126,11 @@ export function layoutsToSections(
 				.filter((it): it is GridItem => it !== null);
 
 			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
 
 			return {
 				id: getSectionStableId(items, idx),
 				layoutIndex: idx,
 				title,
-				open,
 				items,
 				repeatVariable: spec?.repeatVariable,
 			};

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.module.scss

@@ -33,6 +33,15 @@
 	scrollbar-width: none;
 }
 
+.state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	min-height: 120px;
+	padding: 24px 12px;
+}
+
 .list {
 	display: grid;
 	grid-template-columns: auto auto 1fr;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -1,21 +1,28 @@
 import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import cx from 'classnames';
 import { DetailsHeader } from 'components/DetailsPanel';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useGetTraceAggregations from 'hooks/trace/useGetTraceAggregations';
 import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import {
+	SpantypesSpanAggregationDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
 
 import { useTraceStore } from '../../stores/traceStore';
 import {
 	AGGREGATIONS,
 	getAggregationMap as findAggregationMap,
 } from '../../utils/aggregations';
+import AnalyticsTabContent, { AnalyticsRow } from './AnalyticsTabContent';
 
 import styles from './AnalyticsPanel.module.scss';
 
@@ -35,10 +42,31 @@ function AnalyticsPanel({
 	onClose,
 	onTabChange,
 }: AnalyticsPanelProps): JSX.Element | null {
-	const aggregations = useTraceStore((s) => s.aggregations);
-	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
+	const { id: traceId } = useParams<TraceDetailV3URLProps>();
+	const colorByField = useTraceStore((s) => s.colorByField);
+	const colorByFieldName = colorByField.name;
 	const isDarkMode = useIsDarkMode();
 
+	// Fetch exec-time % + span count for the current color-by field only, and
+	// only while the panel is open. Changing the field refetches via the key.
+	const aggregationsRequest = useMemo<SpantypesSpanAggregationDTO[]>(() => {
+		// v5 TelemetryFieldKey and the generated DTO are runtime-identical; only
+		// the literal-union vs enum nominal types differ
+		const field = colorByField as unknown as TelemetrytypesTelemetryFieldKeyDTO;
+		return [
+			{ field, aggregation: AGGREGATIONS.EXEC_TIME_PCT },
+			{ field, aggregation: AGGREGATIONS.SPAN_COUNT },
+		];
+	}, [colorByField]);
+
+	const { data, isLoading, isError } = useGetTraceAggregations({
+		traceId: traceId || '',
+		aggregations: aggregationsRequest,
+		enabled: isOpen,
+	});
+
+	const aggregations = data?.data.aggregations;
+
 	const execTimePct = useMemo(
 		() =>
 			findAggregationMap(
@@ -55,38 +83,39 @@ function AnalyticsPanel({
 		[aggregations, colorByFieldName],
 	);
 
-	const execTimeRows = useMemo(() => {
+	const execTimeRows = useMemo<AnalyticsRow[]>(() => {
 		if (!execTimePct) {
 			return [];
 		}
 		return Object.entries(execTimePct)
+			.sort(([, a], [, b]) => b - a)
 			.map(([group, percentage]) => {
 				const pair = generateColorPair(group);
 				return {
 					group,
-					percentage,
 					color: isDarkMode ? pair.color : pair.colorDark,
+					widthPct: Math.min(percentage, 100),
+					label: `${percentage.toFixed(2)}%`,
 				};
-			})
-			.sort((a, b) => b.percentage - a.percentage);
+			});
 	}, [execTimePct, isDarkMode]);
 
-	const spanCountRows = useMemo(() => {
+	const spanCountRows = useMemo<AnalyticsRow[]>(() => {
 		if (!spanCounts) {
 			return [];
 		}
 		const max = Math.max(...Object.values(spanCounts), 1);
 		return Object.entries(spanCounts)
+			.sort(([, a], [, b]) => b - a)
 			.map(([group, count]) => {
 				const pair = generateColorPair(group);
 				return {
 					group,
-					count,
-					max,
 					color: isDarkMode ? pair.color : pair.colorDark,
+					widthPct: (count / max) * 100,
+					label: String(count),
 				};
-			})
-			.sort((a, b) => b.count - a.count);
+			});
 	}, [spanCounts, isDarkMode]);
 
 	if (!isOpen) {
@@ -132,65 +161,23 @@ function AnalyticsPanel({
 
 					<div className={styles.tabsScroll}>
 						<TabsContent value="exec-time">
-							<div className={styles.list}>
-								{execTimeRows.map((row) => (
-									<>
-										<div
-											key={`${row.group}-dot`}
-											className={styles.dot}
-											style={{ backgroundColor: row.color }}
-										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
-											{row.group}
-										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
-												<div
-													className={styles.barFill}
-													style={{
-														width: `${Math.min(row.percentage, 100)}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className={cx(styles.value, styles.valueWide)}>
-												{row.percentage.toFixed(2)}%
-											</span>
-										</div>
-									</>
-								))}
-							</div>
+							<AnalyticsTabContent
+								isLoading={isLoading}
+								isError={isError}
+								fieldName={colorByFieldName}
+								rows={execTimeRows}
+								valueVariant="wide"
+							/>
 						</TabsContent>
 
 						<TabsContent value="spans">
-							<div className={styles.list}>
-								{spanCountRows.map((row) => (
-									<>
-										<div
-											key={`${row.group}-dot`}
-											className={styles.dot}
-											style={{ backgroundColor: row.color }}
-										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
-											{row.group}
-										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
-												<div
-													className={styles.barFill}
-													style={{
-														width: `${(row.count / row.max) * 100}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className={cx(styles.value, styles.valueNarrow)}>
-												{row.count}
-											</span>
-										</div>
-									</>
-								))}
-							</div>
+							<AnalyticsTabContent
+								isLoading={isLoading}
+								isError={isError}
+								fieldName={colorByFieldName}
+								rows={spanCountRows}
+								valueVariant="narrow"
+							/>
 						</TabsContent>
 					</div>
 				</TabsRoot>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsTabContent.tsx

@@ -0,0 +1,84 @@
+import { Fragment } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import Spinner from 'components/Spinner';
+
+import styles from './AnalyticsPanel.module.scss';
+
+export interface AnalyticsRow {
+	group: string;
+	color: string;
+	widthPct: number;
+	label: string;
+}
+
+interface AnalyticsTabContentProps {
+	isLoading: boolean;
+	isError: boolean;
+	fieldName: string;
+	rows: AnalyticsRow[];
+	valueVariant: 'wide' | 'narrow';
+}
+
+// Loading / error / empty render in place of the rows so the tabs stay visible.
+function AnalyticsTabContent({
+	isLoading,
+	isError,
+	fieldName,
+	rows,
+	valueVariant,
+}: AnalyticsTabContentProps): JSX.Element {
+	if (isLoading) {
+		return (
+			<div className={styles.state}>
+				<Spinner height="auto" />
+			</div>
+		);
+	}
+	if (isError) {
+		return (
+			<div className={styles.state}>
+				<Typography.Text>Couldn&apos;t load analytics</Typography.Text>
+			</div>
+		);
+	}
+	if (rows.length === 0) {
+		return (
+			<div className={styles.state}>
+				<Typography.Text>No data for {fieldName}</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.list}>
+			{rows.map((row) => (
+				<Fragment key={row.group}>
+					<div className={styles.dot} style={{ backgroundColor: row.color }} />
+					<span className={styles.serviceName}>{row.group}</span>
+					<div className={styles.barCell}>
+						<div className={styles.bar}>
+							<div
+								className={styles.barFill}
+								style={{
+									width: `${row.widthPct}%`,
+									backgroundColor: row.color,
+								}}
+							/>
+						</div>
+						<span
+							className={cx(
+								styles.value,
+								valueVariant === 'wide' ? styles.valueWide : styles.valueNarrow,
+							)}
+						>
+							{row.label}
+						</span>
+					</div>
+				</Fragment>
+			))}
+		</div>
+	);
+}
+
+export default AnalyticsTabContent;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/__tests__/AnalyticsPanel.test.tsx

@@ -0,0 +1,144 @@
+import { screen } from '@testing-library/react';
+import useGetTraceAggregations from 'hooks/trace/useGetTraceAggregations';
+import { render } from 'tests/test-utils';
+
+import { DEFAULT_COLOR_BY_FIELD } from '../../../constants';
+import { useTraceStore } from '../../../stores/traceStore';
+import AnalyticsPanel from '../AnalyticsPanel';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): { id: string } => ({ id: 'trace-123' }),
+}));
+
+jest.mock('hooks/trace/useGetTraceAggregations', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+// Isolate the panel's own logic from the floating-panel chrome.
+jest.mock('periscope/components/FloatingPanel', () => ({
+	__esModule: true,
+	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+jest.mock('components/DetailsPanel', () => ({
+	__esModule: true,
+	DetailsHeader: (): JSX.Element => <div data-testid="details-header" />,
+}));
+jest.mock('components/Spinner', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="spinner" />,
+}));
+
+const mockHook = useGetTraceAggregations as jest.Mock;
+
+const noop = (): void => undefined;
+
+const renderPanel = (isOpen = true): ReturnType<typeof render> =>
+	render(<AnalyticsPanel isOpen={isOpen} onClose={noop} onTabChange={noop} />);
+
+const aggregationsResponse = {
+	status: 'success',
+	data: {
+		aggregations: [
+			{
+				field: { name: 'service.name' },
+				aggregation: 'execution_time_percentage',
+				value: { api: 80, db: 20 },
+			},
+			{
+				field: { name: 'service.name' },
+				aggregation: 'span_count',
+				value: { api: 5, db: 2 },
+			},
+		],
+	},
+};
+
+describe('AnalyticsPanel', () => {
+	beforeEach(() => {
+		mockHook.mockReset();
+		useTraceStore.setState({ colorByField: DEFAULT_COLOR_BY_FIELD });
+	});
+
+	it('renders nothing when closed and does not enable the fetch', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: false,
+		});
+		const { container } = renderPanel(false);
+		expect(container).toBeEmptyDOMElement();
+		expect(mockHook).toHaveBeenCalledWith(
+			expect.objectContaining({ enabled: false }),
+		);
+	});
+
+	it('requests both aggregations for the current color-by field when open', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+		});
+		renderPanel();
+		expect(mockHook).toHaveBeenCalledWith(
+			expect.objectContaining({
+				traceId: 'trace-123',
+				enabled: true,
+				aggregations: [
+					{
+						field: DEFAULT_COLOR_BY_FIELD,
+						aggregation: 'execution_time_percentage',
+					},
+					{ field: DEFAULT_COLOR_BY_FIELD, aggregation: 'span_count' },
+				],
+			}),
+		);
+	});
+
+	it('shows the loading state with the tabs still visible', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		// tabs stay visible while loading
+		expect(screen.getByText('% exec time')).toBeInTheDocument();
+		expect(screen.getByText('Spans')).toBeInTheDocument();
+	});
+
+	it('shows an error state when the request fails', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: true,
+		});
+		renderPanel();
+		expect(screen.getByText(/couldn't load analytics/i)).toBeInTheDocument();
+	});
+
+	it('renders rows for the current field on success', () => {
+		mockHook.mockReturnValue({
+			data: aggregationsResponse,
+			isLoading: false,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByText('api')).toBeInTheDocument();
+		expect(screen.getByText('80.00%')).toBeInTheDocument();
+	});
+
+	it('shows an empty state when the field has no data', () => {
+		mockHook.mockReturnValue({
+			data: { status: 'success', data: { aggregations: [] } },
+			isLoading: false,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByText(/no data for service.name/i)).toBeInTheDocument();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.module.scss

@@ -1,3 +1,6 @@
+// Applied to both the menu content and the submenu content (each renders in
+// its own portal with a default z-index of 50) so both stack above
+// FloatingPanel (z-index 999).
 .traceOptionsDropdown {
 	z-index: 1100;
 }

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

@@ -1,7 +1,16 @@
-import { useMemo } from 'react';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { Settings2 } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
@@ -14,6 +23,9 @@ interface TraceOptionsMenuProps {
 	onOpenPreviewFields: () => void;
 }
 
+// Composed from dropdown-menu primitives (instead of DropdownMenuSimple)
+// because the simple preset offers no way to style the submenu content,
+// which renders in its own portal and needs a z-index above FloatingPanel.
 function TraceOptionsMenu({
 	showTraceDetails,
 	onToggleTraceDetails,
@@ -25,78 +37,52 @@ function TraceOptionsMenu({
 		(s) => s.availableColorByOptions,
 	);
 
-	const menuItems: MenuItem[] = useMemo(() => {
-		const items: MenuItem[] = [
-			{
-				key: 'toggle-trace-details',
-				label: showTraceDetails ? 'Hide trace details' : 'Show trace details',
-				onClick: onToggleTraceDetails,
-			},
-			{
-				key: 'preview-fields',
-				label: 'Preview fields',
-				onClick: onOpenPreviewFields,
-			},
-		];
-
-		// Only show the "Colour by" submenu if there's an actual choice to make.
-		if (availableColorByOptions.length > 1) {
-			items.push({
-				key: 'colour-by',
-				label: 'Colour by',
-				children: [
-					{
-						type: 'group',
-						label: 'COLOUR BY',
-						children: [
-							{
-								type: 'radio-group',
-								value: colorByField.name,
-								onChange: (name: string): void => {
-									const next = availableColorByOptions.find(
-										(o) => o.field.name === name,
-									);
-									if (next) {
-										setColorByField(next.field);
-									}
-								},
-								children: availableColorByOptions.map((opt) => ({
-									type: 'radio',
-									key: opt.field.name,
-									label: opt.label,
-									value: opt.field.name,
-								})),
-							},
-						],
-					},
-				],
-			});
+	const handleColorByChange = (name: string): void => {
+		const next = availableColorByOptions.find((o) => o.field.name === name);
+		if (next) {
+			setColorByField(next.field);
 		}
-
-		return items;
-	}, [
-		showTraceDetails,
-		onToggleTraceDetails,
-		onOpenPreviewFields,
-		colorByField.name,
-		setColorByField,
-		availableColorByOptions,
-	]);
+	};
 
 	return (
-		<Dropdown
-			menu={{ items: menuItems }}
-			align="start"
-			className={styles.traceOptionsDropdown}
-		>
-			<Button
-				variant="ghost"
-				size="icon"
-				color="secondary"
-				aria-label="Trace options"
-				prefix={<Settings2 size={14} />}
-			/>
-		</Dropdown>
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					aria-label="Trace options"
+					prefix={<Settings2 size={14} />}
+				/>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="start" className={styles.traceOptionsDropdown}>
+				<DropdownMenuItem clickable onSelect={onToggleTraceDetails}>
+					{showTraceDetails ? 'Hide trace details' : 'Show trace details'}
+				</DropdownMenuItem>
+				<DropdownMenuItem clickable onSelect={onOpenPreviewFields}>
+					Preview fields
+				</DropdownMenuItem>
+				{/* Only show the "Colour by" submenu if there's an actual choice to make. */}
+				{availableColorByOptions.length > 1 && (
+					<DropdownMenuSub>
+						<DropdownMenuSubTrigger>Colour by</DropdownMenuSubTrigger>
+						<DropdownMenuSubContent className={styles.traceOptionsDropdown}>
+							<DropdownMenuLabel>COLOUR BY</DropdownMenuLabel>
+							<DropdownMenuRadioGroup
+								value={colorByField.name}
+								onValueChange={handleColorByChange}
+							>
+								{availableColorByOptions.map((opt) => (
+									<DropdownMenuRadioItem key={opt.field.name} value={opt.field.name}>
+										{opt.label}
+									</DropdownMenuRadioItem>
+								))}
+							</DropdownMenuRadioGroup>
+						</DropdownMenuSubContent>
+					</DropdownMenuSub>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
 	);
 }
 

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,6 +1,9 @@
 import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
-import { computeVisualLayout } from '../computeVisualLayout';
+import {
+	computeVisualLayout,
+	WIDE_GROUP_THRESHOLD,
+} from '../computeVisualLayout';
 
 function makeSpan(
 	overrides: Partial<FlamegraphSpan> & {
@@ -472,4 +475,177 @@ describe('computeVisualLayout', () => {
 		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
 		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
 	});
+
+	// --- Wide-group fast path (> WIDE_GROUP_THRESHOLD siblings) ---
+	// Past the threshold the layout switches to exact overlap-only packing to
+	// avoid the O(N^2) connector-avoidance spiral. These lock in correctness and
+	// the no-overlap invariant at scale.
+
+	function noRowHasOverlap(
+		layout: ReturnType<typeof computeVisualLayout>,
+	): void {
+		for (const row of layout.visualRows) {
+			const sorted = [...row].sort((a, b) => a.timestamp - b.timestamp);
+			for (let i = 1; i < sorted.length; i++) {
+				const prevEnd = sorted[i - 1].timestamp + sorted[i - 1].durationNano / 1e6;
+				expect(sorted[i].timestamp).toBeGreaterThanOrEqual(prevEnd);
+			}
+		}
+	}
+
+	it('should pack thousands of sequential leaf siblings into 1 row (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		// 2000 strictly sequential (non-overlapping) children
+		for (let i = 0; i < 2000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: i * 10,
+					durationNano: 5e6, // 5ms, ends before next starts
+				}),
+			);
+		}
+
+		const layout = computeVisualLayout([[root], kids]);
+
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.totalVisualRows).toBe(2); // all siblings share row 1
+		for (const k of kids) {
+			expect(layout.spanToVisualRow[k.spanId]).toBe(1);
+		}
+		noRowHasOverlap(layout);
+	});
+
+	it('should pack thousands of fully-overlapping leaf siblings without violations (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		// 1000 children all spanning the same window → each needs its own row
+		for (let i = 0; i < 1000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: 0,
+					durationNano: 100e6,
+				}),
+			);
+		}
+
+		const layout = computeVisualLayout([[root], kids]);
+
+		expect(layout.totalVisualRows).toBe(1001); // root + 1000 stacked rows
+		expect(Object.keys(layout.spanToVisualRow)).toHaveLength(1001);
+		noRowHasOverlap(layout);
+	});
+
+	it('should keep non-leaf subtrees adjacent within a wide mixed group (wide path)', () => {
+		const root = makeSpan({ spanId: 'root', timestamp: 0, durationNano: 1e12 });
+		const kids: FlamegraphSpan[] = [];
+		for (let i = 0; i < 1000; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: i * 10,
+					durationNano: 5e6,
+				}),
+			);
+		}
+		// One of the wide siblings has a child of its own
+		const grandchild = makeSpan({
+			spanId: 'gc',
+			parentSpanId: 'k500',
+			timestamp: 5000,
+			durationNano: 2e6,
+		});
+
+		const layout = computeVisualLayout([[root], kids, [grandchild]]);
+
+		const parentRow = layout.spanToVisualRow['k500'];
+		const gcRow = layout.spanToVisualRow['gc'];
+		expect(gcRow - parentRow).toBe(1); // subtree adjacency preserved
+		expect(Object.keys(layout.spanToVisualRow)).toHaveLength(1002);
+		noRowHasOverlap(layout);
+	});
+
+	// --- Regression guards for the wide-trace layout spiral ---
+	// The pre-fix algorithm's connector-avoidance checks formed a positive-
+	// feedback loop on wide SCATTERED groups (short spans spread across the
+	// parent window with modest concurrency): each pushed-down child stamped
+	// connector points on intermediate rows, pushing later children even
+	// higher. Sequential and fully-overlapping groups (tests above) do NOT
+	// trigger it — these two shapes do, and encode its failure signatures.
+
+	function makeScatteredStar(
+		childCount: number,
+		spacingMs: number,
+		durationMs: number,
+	): FlamegraphSpan[][] {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: (childCount * spacingMs + durationMs) * 1e6,
+		});
+		const kids: FlamegraphSpan[] = [];
+		for (let i = 0; i < childCount; i++) {
+			kids.push(
+				makeSpan({
+					spanId: `k${i}`,
+					parentSpanId: 'root',
+					timestamp: i * spacingMs,
+					durationNano: durationMs * 1e6,
+				}),
+			);
+		}
+		return [[root], kids];
+	}
+
+	it('should not spiral row count on a scattered group just above the threshold', () => {
+		// Children of 50ms each, starting every 10ms → max temporal concurrency
+		// is 6 (each span overlaps the next 5). The old algorithm spiraled this
+		// shape to ~1 row per child; overlap-only packing needs ~7 including the
+		// root. Sized just above WIDE_GROUP_THRESHOLD so a regression fails fast
+		// (sub-second) rather than burning CI time.
+		const count = WIDE_GROUP_THRESHOLD + 88;
+		const layout = computeVisualLayout(makeScatteredStar(count, 10, 50));
+
+		expect(Object.keys(layout.spanToVisualRow)).toHaveLength(count + 1);
+		// Generous slack over the optimal ~7 — but orders of magnitude below the
+		// one-row-per-child the spiral produced.
+		expect(layout.totalVisualRows).toBeLessThan(30);
+		noRowHasOverlap(layout);
+	});
+
+	it('should be faster through the fast path despite one extra span', () => {
+		// Identical scattered shape on both sides of the gate: THRESHOLD children
+		// run the original connector-avoidance path, THRESHOLD + 1 run the
+		// overlap-only fast path. With one MORE span to place, the fast path can
+		// only win because the algorithm is cheaper — a self-calibrating
+		// comparison (same machine, same process) with no absolute time budget.
+		// On this shape the avoidance path spirals (~tens of ms) while the fast
+		// path stays ~1ms, so the margin is well past timer noise. Also guards
+		// the gate itself: if everything routed to one path, one extra span can
+		// never be faster.
+		const avoidancePathInput = makeScatteredStar(WIDE_GROUP_THRESHOLD, 10, 50);
+		const fastPathInput = makeScatteredStar(WIDE_GROUP_THRESHOLD + 1, 10, 50);
+
+		// Warm-up runs so JIT compilation doesn't skew either side.
+		computeVisualLayout(avoidancePathInput);
+		computeVisualLayout(fastPathInput);
+
+		const timeOf = (input: FlamegraphSpan[][]): number => {
+			const start = performance.now();
+			computeVisualLayout(input);
+			return performance.now() - start;
+		};
+
+		// Best-of-3 per side to shave off GC pauses and scheduler noise.
+		const RUNS = [0, 1, 2];
+		const avoidanceMs = Math.min(...RUNS.map(() => timeOf(avoidancePathInput)));
+		const fastMs = Math.min(...RUNS.map(() => timeOf(fastPathInput)));
+
+		expect(fastMs).toBeLessThan(avoidanceMs);
+	});
 });

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -18,6 +18,82 @@ export interface VisualLayout {
 	totalVisualRows: number;
 }
 
+// Above this many siblings under one parent, the connector-avoidance refinement
+// (Checks 2 & 3) is both visually meaningless — the row is already a dense wall —
+// and quadratic: every child deposits a connector point on each intermediate row,
+// which pushes later children even higher, which deposits more points. That
+// feedback loop inflates a layout needing ~50 rows to thousands and never
+// finishes on wide traces. Past the threshold we pack by overlap only.
+// Exported so the regression tests stay anchored to the real gate value.
+export const WIDE_GROUP_THRESHOLD = 512;
+
+/**
+ * Segment tree over rows that answers "lowest row index >= `from` whose smallest
+ * span start-time is >= `end`" in O(log rows). Used to place a large group of
+ * leaf siblings by overlap only: because siblings are processed in descending
+ * start order, every already-placed span on a row starts at or after the current
+ * one, so [start, end] overlaps a row iff some span there starts before `end` —
+ * i.e. the row is free iff its minimum start >= end. Each node stores the max of
+ * its subtree's per-row minimum starts so a free row can be found by descent.
+ */
+class LowestFreeRow {
+	private readonly size: number;
+
+	private readonly tree: Float64Array;
+
+	constructor(rows: number) {
+		let size = 1;
+		while (size < rows) {
+			size *= 2;
+		}
+		this.size = size;
+		this.tree = new Float64Array(size * 2).fill(Infinity);
+	}
+
+	place(row: number, start: number): void {
+		let i = row + this.size;
+		// A row's key is the minimum start among its spans. Children are processed
+		// in descending start order so a leaf's start is the new minimum, but a
+		// non-leaf subtree's descendant can land on a row out of order — take min.
+		if (start >= this.tree[i]) {
+			return;
+		}
+		this.tree[i] = start;
+		for (i >>= 1; i >= 1; i >>= 1) {
+			const next = Math.max(this.tree[2 * i], this.tree[2 * i + 1]);
+			if (this.tree[i] === next) {
+				break;
+			}
+			this.tree[i] = next;
+		}
+	}
+
+	lowestFrom(from: number, end: number): number {
+		return this.descend(1, 0, this.size - 1, from, end);
+	}
+
+	private descend(
+		node: number,
+		lo: number,
+		hi: number,
+		from: number,
+		end: number,
+	): number {
+		if (hi < from || this.tree[node] < end) {
+			return -1;
+		}
+		if (lo === hi) {
+			return lo;
+		}
+		const mid = (lo + hi) >> 1;
+		const left = this.descend(2 * node, lo, mid, from, end);
+		if (left !== -1) {
+			return left;
+		}
+		return this.descend(2 * node + 1, mid + 1, hi, from, end);
+	}
+}
+
 /**
  * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
  *
@@ -214,7 +290,53 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		arr.push(point);
 	}
 
+	// Fast path for a parent with a very large group of children: pack by overlap
+	// only (descending greedy), skipping the quadratic connector-avoidance that
+	// spirals at this scale. Leaf children — the bulk of a wide trace — are placed
+	// in O(log rows) via the segment tree; the rare non-leaf subtree falls back to
+	// findPlacement against the shared interval map. Both structures are kept in
+	// sync so each placement sees all prior occupancy. Same ShapeEntry[] contract.
+	function computeWideShape(
+		rootSpan: FlamegraphSpan,
+		children: FlamegraphSpan[],
+	): ShapeEntry[] {
+		const shape: ShapeEntry[] = [{ span: rootSpan, relativeRow: 0 }];
+		const localIntervals = new Map<number, Array<[number, number]>>();
+		// Children occupy relative rows 1..children.length in the worst case.
+		const finder = new LowestFreeRow(children.length + 2);
+
+		const occupy = (row: number, span: FlamegraphSpan): void => {
+			const s = span.timestamp;
+			const e = span.timestamp + span.durationNano / 1e6;
+			shape.push({ span, relativeRow: row });
+			addIntervalTo(localIntervals, row, s, e);
+			finder.place(row, s);
+		};
+
+		for (const child of children) {
+			if (childrenMap.has(child.spanId)) {
+				// Non-leaf: place its whole subtree shape as a unit via findPlacement.
+				const childShape = computeSubtreeShape(child);
+				const offset = findPlacement(childShape, 1, localIntervals);
+				for (const entry of childShape) {
+					occupy(entry.relativeRow + offset, entry.span);
+				}
+			} else {
+				const end = child.timestamp + child.durationNano / 1e6;
+				occupy(finder.lowestFrom(1, end), child);
+			}
+		}
+
+		return shape;
+	}
+
 	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
+		const children = childrenMap.get(rootSpan.spanId);
+
+		if (children && children.length > WIDE_GROUP_THRESHOLD) {
+			return computeWideShape(rootSpan, children);
+		}
+
 		const localIntervals = new Map<number, Array<[number, number]>>();
 		const localConnectorPoints = new Map<number, number[]>();
 		const shape: ShapeEntry[] = [];
@@ -225,7 +347,6 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		shape.push({ span: rootSpan, relativeRow: 0 });
 		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
 
-		const children = childrenMap.get(rootSpan.spanId);
 		if (children) {
 			for (const child of children) {
 				const childShape = computeSubtreeShape(child);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -94,7 +94,7 @@ export function useVisualLayoutWorker(spans: FlamegraphSpan[][]): {
 			cleanup();
 		};
 
-		// Timeout: if worker doesn't respond in 30s, terminate and error
+		// Timeout: if worker doesn't respond in 15s, terminate and error
 		const WORKER_TIMEOUT_MS = 15000;
 		const timeoutId = setTimeout(() => {
 			if (requestIdRef.current === currentId && isComputingRef.current) {

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from 'antd';
 import { AxiosError } from 'axios';
 import Spinner from 'components/Spinner';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetTraceV3SuccessResponse, SpanV3 } from 'types/api/trace/getTraceV3';
+import { GetTraceV4SuccessResponse, SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { TraceWaterfallStates } from './constants';
 import Error from './TraceWaterfallStates/Error/Error';
@@ -22,7 +22,7 @@ interface ITraceWaterfallProps {
 	localUncollapsedNodes: Set<string>;
 	setLocalUncollapsedNodes: Dispatch<SetStateAction<Set<string>>>;
 	traceData:
-		| SuccessResponse<GetTraceV3SuccessResponse, unknown>
+		| SuccessResponse<GetTraceV4SuccessResponse, unknown>
 		| ErrorResponse
 		| undefined;
 	isFetchingTraceData: boolean;

frontend/src/pages/TraceDetailsV3/__tests__/getAvailableColorByFieldNames.test.ts

@@ -0,0 +1,34 @@
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { getAvailableColorByFieldNames } from '../utils';
+
+const span = (partial: Partial<SpanV3>): SpanV3 =>
+	({ level: 1, resource: {}, attributes: {}, ...partial }) as SpanV3;
+
+describe('getAvailableColorByFieldNames', () => {
+	it('returns [] for an empty span set', () => {
+		expect(getAvailableColorByFieldNames([])).toStrictEqual([]);
+	});
+
+	it('offers a field if any span carries it, in option order', () => {
+		const spans = [
+			span({ resource: { 'service.name': 'api' } }),
+			// k8s.node.name lives on a non-root span — still offered
+			span({ resource: { 'k8s.node.name': 'node-1' } }),
+		];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual([
+			'service.name',
+			'k8s.node.name',
+		]);
+	});
+
+	it('reads from attributes when the key is not on resource', () => {
+		const spans = [span({ attributes: { 'host.name': 'box-1' } })];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual(['host.name']);
+	});
+
+	it('does not offer fields no span carries', () => {
+		const spans = [span({ resource: { 'service.name': 'api' } })];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual(['service.name']);
+	});
+});

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -8,23 +8,17 @@ import { Collapse } from 'antd';
 import { useDetailsPanel } from 'components/DetailsPanel';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import useGetTraceV3 from 'hooks/trace/useGetTraceV3';
+import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import NoData from 'pages/TraceDetailV2/NoData/NoData';
 import { ResizableBox } from 'periscope/components/ResizableBox';
-import {
-	SpanV3,
-	TraceDetailV3URLProps,
-	WaterfallAggregationRequest,
-} from 'types/api/trace/getTraceV3';
+import { SpanV3, TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
 
-import { COLOR_BY_FIELDS } from './constants';
 import { TraceDetailEventKeys, TraceDetailEvents } from './events';
 import { useTraceDetailLogEvent } from './hooks/useTraceDetailLogEvent';
 import TraceStoreSync from './stores/TraceStoreSync';
 import { useTraceStore } from './stores/traceStore';
-import { AGGREGATIONS } from './utils/aggregations';
 import { SpanDetailVariant } from './SpanDetailsPanel/constants';
 import SpanDetailsPanel from './SpanDetailsPanel/SpanDetailsPanel';
 import type { TraceMetadataForHeader } from './TraceDetailsHeader/TraceDetailsHeader';
@@ -34,6 +28,7 @@ import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
 import TraceWaterfall from './TraceWaterfall/TraceWaterfall';
 import { IInterestedSpan } from './TraceWaterfall/types';
 import { getAncestorSpanIds } from './TraceWaterfall/utils';
+import { getAvailableColorByFieldNames } from './utils';
 
 import cx from 'classnames';
 
@@ -103,17 +98,6 @@ function TraceDetailsV3(): JSX.Element {
 		setInterestedSpanId({ spanId, isUncollapsed: true });
 	}, [urlQuery]);
 
-	// Hardcoded for now — fetch aggregations for all 3 candidate color-by fields
-	// upfront so a future color-by-field switch doesn't need to refetch.
-	const waterfallAggregationsRequest = useMemo<WaterfallAggregationRequest[]>(
-		() =>
-			COLOR_BY_FIELDS.flatMap((field) => [
-				{ field, aggregation: AGGREGATIONS.EXEC_TIME_PCT },
-				{ field, aggregation: AGGREGATIONS.SPAN_COUNT },
-			]),
-		[],
-	);
-
 	// Once all spans are loaded (frontend mode), freeze query params so
 	// subsequent interestedSpanId changes don't trigger unnecessary refetches.
 	const fullDataLoadedRef = useRef(false);
@@ -121,7 +105,6 @@ function TraceDetailsV3(): JSX.Element {
 		selectedSpanId: interestedSpanId.spanId,
 		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 		uncollapsedSpans: uncollapsedNodes,
-		aggregations: waterfallAggregationsRequest,
 	});
 
 	const queryParams = fullDataLoadedRef.current
@@ -130,19 +113,17 @@ function TraceDetailsV3(): JSX.Element {
 				selectedSpanId: interestedSpanId.spanId,
 				isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 				uncollapsedSpans: uncollapsedNodes,
-				aggregations: waterfallAggregationsRequest,
 			};
 
 	const {
 		data: traceData,
 		isFetching: isFetchingTraceData,
 		error: errorFetchingTraceData,
-	} = useGetTraceV3({
+	} = useGetTraceV4({
 		traceId,
 		uncollapsedSpans: queryParams.uncollapsedSpans,
 		selectedSpanId: queryParams.selectedSpanId,
 		isSelectedSpanIDUnCollapsed: queryParams.isSelectedSpanIDUnCollapsed,
-		aggregations: queryParams.aggregations,
 	});
 
 	const allSpans = traceData?.payload?.spans || [];
@@ -150,6 +131,13 @@ function TraceDetailsV3(): JSX.Element {
 	const isFullDataLoaded =
 		totalSpansCount > 0 && totalSpansCount <= allSpans.length;
 
+	// Color-by options, gated on fields in loaded spans. Resource attrs are
+	// trace-wide, so any window has the full set — no need to accumulate.
+	const availableColorByFields = useMemo(() => {
+		const spans = traceData?.payload?.spans;
+		return spans?.length ? getAvailableColorByFieldNames(spans) : undefined;
+	}, [traceData?.payload?.spans]);
+
 	// Lock the ref once we confirm all data is loaded
 	if (isFullDataLoaded && !fullDataLoadedRef.current) {
 		fullDataLoadedRef.current = true;
@@ -157,7 +145,6 @@ function TraceDetailsV3(): JSX.Element {
 			selectedSpanId: interestedSpanId.spanId,
 			isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 			uncollapsedSpans: uncollapsedNodes,
-			aggregations: waterfallAggregationsRequest,
 		};
 	}
 
@@ -382,7 +369,7 @@ function TraceDetailsV3(): JSX.Element {
 	);
 
 	return (
-		<TraceStoreSync aggregations={traceData?.payload?.aggregations}>
+		<TraceStoreSync availableColorByFields={availableColorByFields}>
 			<div className={styles.root}>
 				<TraceDetailsHeader
 					filterMetadata={filterMetadata}

frontend/src/pages/TraceDetailsV3/stores/TraceStoreSync.tsx

@@ -2,21 +2,20 @@ import { ReactNode, useEffect } from 'react';
 import { useMutation } from 'react-query';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import { useAppContext } from 'providers/App/App';
-import { WaterfallAggregationResponse } from 'types/api/trace/getTraceV3';
 
 import {
-	setTraceStoreAggregations,
+	setTraceStoreAvailableColorByFields,
 	setTraceStoreCallbacks,
 	setTraceStoreUserPreferences,
 } from './traceStore';
 
 interface TraceStoreSyncProps {
-	aggregations: WaterfallAggregationResponse[] | undefined;
+	availableColorByFields: string[] | undefined;
 	children: ReactNode;
 }
 
 /**
- * Bridges React-managed inputs (the `aggregations` prop, `userPreferences`
+ * Bridges React-managed inputs (`availableColorByFields`, `userPreferences`
  * from AppContext, and the user-pref mutation hook) into the Zustand store.
  *
  * Renders nothing until `userPreferences` resolves so the flamegraph never
@@ -25,15 +24,15 @@ interface TraceStoreSyncProps {
  * is logged in, so this gate is usually already settled by mount time.
  */
 function TraceStoreSync({
-	aggregations,
+	availableColorByFields,
 	children,
 }: TraceStoreSyncProps): JSX.Element | null {
 	const { userPreferences, updateUserPreferenceInContext } = useAppContext();
 	const { mutate: mutateUserPreference } = useMutation(updateUserPreferenceAPI);
 
 	useEffect(() => {
-		setTraceStoreAggregations(aggregations);
-	}, [aggregations]);
+		setTraceStoreAvailableColorByFields(availableColorByFields);
+	}, [availableColorByFields]);
 
 	useEffect(() => {
 		setTraceStoreUserPreferences(userPreferences ?? null);

frontend/src/pages/TraceDetailsV3/stores/__tests__/traceStore.test.ts

@@ -0,0 +1,71 @@
+import { USER_PREFERENCES } from 'constants/userPreferences';
+import { UserPreference } from 'types/api/preferences/preference';
+
+import { COLOR_BY_OPTIONS, DEFAULT_COLOR_BY_FIELD } from '../../constants';
+import {
+	setTraceStoreAvailableColorByFields,
+	setTraceStoreUserPreferences,
+	useTraceStore,
+} from '../traceStore';
+
+const colorByPref = (fieldName: string): UserPreference[] => [
+	{
+		name: USER_PREFERENCES.SPAN_DETAILS_COLOR_BY_ATTRIBUTE,
+		value: fieldName,
+	} as UserPreference,
+];
+
+const optionNames = (): string[] =>
+	useTraceStore.getState().availableColorByOptions.map((o) => o.field.name);
+
+describe('traceStore color-by gating', () => {
+	beforeEach(() => {
+		useTraceStore.setState({
+			availableColorByFieldNames: undefined,
+			userPreferences: null,
+			colorByField: DEFAULT_COLOR_BY_FIELD,
+			availableColorByOptions: COLOR_BY_OPTIONS.filter(
+				(o) => o.field.name === DEFAULT_COLOR_BY_FIELD.name,
+			),
+		});
+	});
+
+	it('offers only the default field before spans load', () => {
+		expect(optionNames()).toStrictEqual([DEFAULT_COLOR_BY_FIELD.name]);
+		expect(useTraceStore.getState().colorByField).toStrictEqual(
+			DEFAULT_COLOR_BY_FIELD,
+		);
+	});
+
+	it('offers the default plus any field present on loaded spans', () => {
+		setTraceStoreAvailableColorByFields(['host.name']);
+		expect(optionNames()).toStrictEqual([
+			DEFAULT_COLOR_BY_FIELD.name,
+			'host.name',
+		]);
+	});
+
+	it('honors the persisted color-by field when it is available', () => {
+		setTraceStoreAvailableColorByFields(['host.name']);
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		expect(useTraceStore.getState().colorByField.name).toBe('host.name');
+	});
+
+	it('falls back to the default when the persisted field is not available', () => {
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		setTraceStoreAvailableColorByFields(['k8s.node.name']);
+		expect(useTraceStore.getState().colorByField.name).toBe(
+			DEFAULT_COLOR_BY_FIELD.name,
+		);
+		expect(optionNames()).toStrictEqual([
+			DEFAULT_COLOR_BY_FIELD.name,
+			'k8s.node.name',
+		]);
+	});
+
+	it('trusts the persisted field while spans are still loading', () => {
+		// availableColorByFieldNames stays undefined (loading) — do not flip to default
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		expect(useTraceStore.getState().colorByField.name).toBe('host.name');
+	});
+});

frontend/src/pages/TraceDetailsV3/stores/traceStore.ts

@@ -1,7 +1,6 @@
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import { UserPreference } from 'types/api/preferences/preference';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { WaterfallAggregationResponse } from 'types/api/trace/getTraceV3';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { create } from 'zustand';
 
@@ -11,10 +10,6 @@ import {
 	ColorByOption,
 	DEFAULT_COLOR_BY_FIELD,
 } from '../constants';
-import {
-	AGGREGATIONS,
-	getAggregationMap as findAggregationMap,
-} from '../utils/aggregations';
 import { toTelemetryFieldKey } from '../utils/previewFields';
 
 interface MutateOptions {
@@ -30,7 +25,9 @@ type MutateUserPreference = (
 
 interface TraceStoreState {
 	// --- Inputs synced from React layer via TraceStoreSync ---
-	aggregations: WaterfallAggregationResponse[] | undefined;
+	// Fields present on loaded spans; gates color-by options. `undefined` while
+	// loading so we keep trusting the persisted field.
+	availableColorByFieldNames: string[] | undefined;
 	userPreferences: UserPreference[] | null;
 	updateUserPreferenceInContext: UpdateUserPreferenceInContext | null;
 	mutateUserPreference: MutateUserPreference | null;
@@ -41,9 +38,7 @@ interface TraceStoreState {
 	previewFields: TelemetryFieldKey[];
 
 	// --- Setters used only by TraceStoreSync ---
-	setAggregations: (
-		aggregations: WaterfallAggregationResponse[] | undefined,
-	) => void;
+	setAvailableColorByFields: (fieldNames: string[] | undefined) => void;
 	setUserPreferences: (userPreferences: UserPreference[] | null) => void;
 	setCallbacks: (callbacks: {
 		updateUserPreferenceInContext: UpdateUserPreferenceInContext;
@@ -71,23 +66,18 @@ function getPersistedColorByField(
 
 /**
  * Re-derives `colorByField` + `availableColorByOptions` from the two inputs.
- * Preserves the "trust persisted while aggregations load" rule so the
- * flamegraph doesn't repaint when the aggregations response arrives.
+ * Preserves the "trust persisted while spans load" rule so the flamegraph
+ * doesn't repaint when the waterfall response arrives.
  */
 function deriveColorState(
-	aggregations: WaterfallAggregationResponse[] | undefined,
+	availableColorByFieldNames: string[] | undefined,
 	userPreferences: UserPreference[] | null,
 ): Pick<TraceStoreState, 'colorByField' | 'availableColorByOptions'> {
 	const isFieldAvailable = (fieldName: string): boolean => {
 		if (fieldName === DEFAULT_COLOR_BY_FIELD.name) {
 			return true;
 		}
-		const map = findAggregationMap(
-			aggregations,
-			AGGREGATIONS.EXEC_TIME_PCT,
-			fieldName,
-		);
-		return !!map && Object.keys(map).length > 0;
+		return !!availableColorByFieldNames?.includes(fieldName);
 	};
 
 	const availableColorByOptions = COLOR_BY_OPTIONS.filter((opt) =>
@@ -95,10 +85,10 @@ function deriveColorState(
 	);
 
 	const persistedColorByField = getPersistedColorByField(userPreferences);
-	// While aggregations are loading, trust persisted — don't flip to default
-	// just because we haven't confirmed availability yet.
+	// While loading, trust persisted — don't flip to default prematurely.
 	const colorByField =
-		aggregations === undefined || isFieldAvailable(persistedColorByField.name)
+		availableColorByFieldNames === undefined ||
+		isFieldAvailable(persistedColorByField.name)
 			? persistedColorByField
 			: DEFAULT_COLOR_BY_FIELD;
 
@@ -134,7 +124,7 @@ function derivePreviewFields(
 }
 
 export const useTraceStore = create<TraceStoreState>()((set, get) => ({
-	aggregations: undefined,
+	availableColorByFieldNames: undefined,
 	userPreferences: null,
 	updateUserPreferenceInContext: null,
 	mutateUserPreference: null,
@@ -145,19 +135,19 @@ export const useTraceStore = create<TraceStoreState>()((set, get) => ({
 	),
 	previewFields: [],
 
-	setAggregations: (aggregations): void => {
+	setAvailableColorByFields: (availableColorByFieldNames): void => {
 		const { userPreferences } = get();
 		set({
-			aggregations,
-			...deriveColorState(aggregations, userPreferences),
+			availableColorByFieldNames,
+			...deriveColorState(availableColorByFieldNames, userPreferences),
 		});
 	},
 
 	setUserPreferences: (userPreferences): void => {
-		const { aggregations } = get();
+		const { availableColorByFieldNames } = get();
 		set({
 			userPreferences,
-			...deriveColorState(aggregations, userPreferences),
+			...deriveColorState(availableColorByFieldNames, userPreferences),
 			previewFields: derivePreviewFields(userPreferences),
 		});
 	},
@@ -235,9 +225,9 @@ export const useTraceStore = create<TraceStoreState>()((set, get) => ({
 	},
 }));
 
-export const setTraceStoreAggregations = (
-	aggregations: WaterfallAggregationResponse[] | undefined,
-): void => useTraceStore.getState().setAggregations(aggregations);
+export const setTraceStoreAvailableColorByFields = (
+	fieldNames: string[] | undefined,
+): void => useTraceStore.getState().setAvailableColorByFields(fieldNames);
 
 export const setTraceStoreUserPreferences = (
 	userPreferences: UserPreference[] | null,

frontend/src/pages/TraceDetailsV3/utils.ts

@@ -1,5 +1,6 @@
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
+import { COLOR_BY_OPTIONS } from './constants';
 import {
 	ColorPair,
 	generateColorPair,
@@ -109,3 +110,14 @@ export function resolveSpanColor(
 	}
 	return generateColorPair(getSpanGroupValue(span, colorByFieldName));
 }
+
+/**
+ * Color-by fields present on any of the given spans — replaces the old
+ * server-side aggregation gating. `service.name` is always offered by the store
+ * regardless of this list.
+ */
+export function getAvailableColorByFieldNames(spans: SpanV3[]): string[] {
+	return COLOR_BY_OPTIONS.filter((opt) =>
+		spans.some((s) => getSpanAttribute(s, opt.field.name)),
+	).map((opt) => opt.field.name);
+}

frontend/src/pages/TraceDetailsV3/utils/aggregations.ts

@@ -1,19 +1,19 @@
 import {
-	WaterfallAggregationResponse,
-	WaterfallAggregationType,
-} from 'types/api/trace/getTraceV3';
+	SpantypesSpanAggregationResultDTO,
+	SpantypesSpanAggregationTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 export const AGGREGATIONS = {
-	EXEC_TIME_PCT: 'execution_time_percentage',
-	SPAN_COUNT: 'span_count',
-	DURATION: 'duration',
-} as const satisfies Record<string, WaterfallAggregationType>;
+	EXEC_TIME_PCT: SpantypesSpanAggregationTypeDTO.execution_time_percentage,
+	SPAN_COUNT: SpantypesSpanAggregationTypeDTO.span_count,
+	DURATION: SpantypesSpanAggregationTypeDTO.duration,
+} as const;
 
 export function getAggregationMap(
-	aggregations: WaterfallAggregationResponse[] | undefined,
-	type: WaterfallAggregationType,
+	aggregations: SpantypesSpanAggregationResultDTO[] | undefined,
+	type: SpantypesSpanAggregationTypeDTO,
 	fieldName: string,
-): Record<string, number> | undefined {
+): Record<string, number> | null | undefined {
 	return aggregations?.find(
 		(a) => a.aggregation === type && a.field.name === fieldName,
 	)?.value;

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -53,20 +53,20 @@ export default function WorkspaceBlocked(): JSX.Element {
 	const { t } = useTranslation(['workspaceLocked']);
 
 	useEffect((): void => {
-		logEvent('Workspace Blocked: Screen Viewed', {});
+		void logEvent('Workspace Blocked: Screen Viewed', {});
 	}, []);
 
 	const handleContactUsClick = (): void => {
-		logEvent('Workspace Blocked: Contact Us Clicked', {});
+		void logEvent('Workspace Blocked: Contact Us Clicked', {});
 	};
 
 	const handleTabClick = (key: string): void => {
-		logEvent('Workspace Blocked: Screen Tabs Clicked', { tabKey: key });
+		void logEvent('Workspace Blocked: Screen Tabs Clicked', { tabKey: key });
 	};
 
 	const handleCollapseChange = (key: string | string[]): void => {
 		const lastKey = Array.isArray(key) ? key.slice(-1)[0] : key;
-		logEvent('Workspace Blocked: Screen Tab FAQ Item Clicked', {
+		void logEvent('Workspace Blocked: Screen Tab FAQ Item Clicked', {
 			panelKey: lastKey,
 		});
 	};
@@ -109,7 +109,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	);
 
 	const handleUpdateCreditCard = useCallback(async () => {
-		logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
+		void logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
 
 		updateCreditCard({
 			url: getBaseUrl(),
@@ -117,7 +117,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	}, [updateCreditCard]);
 
 	const handleExtendTrial = (): void => {
-		logEvent('Workspace Blocked: User Clicked Extend Trial', {});
+		void logEvent('Workspace Blocked: User Clicked Extend Trial', {});
 
 		notifications.info({
 			message: t('extendTrial'),
@@ -133,7 +133,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	};
 
 	const handleViewBilling = (e?: React.MouseEvent): void => {
-		logEvent('Workspace Blocked: User Clicked View Billing', {});
+		void logEvent('Workspace Blocked: User Clicked View Billing', {});
 
 		safeNavigate(ROUTES.BILLING, { newTab: !!e && isModifierKeyPressed(e) });
 	};
@@ -300,7 +300,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 										View Billing
 									</Button>
 
-									<RefreshPaymentStatus btnShape="round" />
+									<RefreshPaymentStatus />
 								</Flex>
 							)}
 

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -6,14 +6,12 @@ import { Typography } from '@signozhq/ui/typography';
 import manageCreditCardApi from 'api/v1/portal/create';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import ROUTES from 'constants/routes';
-import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { getBaseUrl } from 'utils/basePath';
-import { getFormattedDateWithMinutes } from 'utils/timeUtils';
 
 import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correlation.svg';
 
@@ -109,15 +107,6 @@ function WorkspaceSuspended(): JSX.Element {
 										</Typography.Title>
 										<Typography.Text className="workspace-suspended__details">
 											{t('actionDescription')}
-											<br />
-											{t('yourDataIsSafe')}{' '}
-											<span className="workspace-suspended__details__highlight">
-												{getFormattedDateWithMinutes(
-													dayjs(activeLicense?.event_queue?.scheduled_at).unix() ||
-														Date.now(),
-												)}
-											</span>{' '}
-											{t('actNow')}
 										</Typography.Text>
 									</Space>
 								</Col>
@@ -154,7 +143,7 @@ function WorkspaceSuspended(): JSX.Element {
 										>
 											{t('continueMyJourney')}
 										</Button>
-										<RefreshPaymentStatus btnShape="round" />
+										<RefreshPaymentStatus />
 									</Flex>
 								</Row>
 							)}