chore(css-modules): add good practices for writing css module files

.github/CODEOWNERS

@@ -188,7 +188,3 @@ 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,8 +69,6 @@ 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,8 +70,6 @@ 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,8 +35,6 @@ 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:

docs/api/openapi.yml

@@ -870,6 +870,14 @@ components:
       - timestampMillis
       - data
       type: object
+    CloudintegrationtypesAssets:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesDashboard'
+          nullable: true
+          type: array
+      type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
         deploymentRegion:
@@ -1017,6 +1025,17 @@ 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:
@@ -1190,7 +1209,7 @@ components:
     CloudintegrationtypesService:
       properties:
         assets:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceAssets'
+          $ref: '#/components/schemas/CloudintegrationtypesAssets'
         cloudIntegrationService:
           $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
@@ -1203,6 +1222,8 @@ components:
           type: string
         supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
+        telemetryCollectionStrategy:
+          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -1213,17 +1234,9 @@ 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:
@@ -1231,18 +1244,6 @@ 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
@@ -1277,30 +1278,6 @@ 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:
@@ -1308,6 +1285,13 @@ components:
         metrics:
           type: boolean
       type: object
+    CloudintegrationtypesTelemetryCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
+      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -2396,26 +2380,6 @@ 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:
@@ -2546,7 +2510,7 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/V1Link'
           type: array
         panels:
           additionalProperties:
@@ -2707,8 +2671,8 @@ components:
       type: object
     DashboardtypesLayout:
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
-    DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
+      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
+    DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec:
       properties:
         kind:
           enum:
@@ -2791,7 +2755,7 @@ components:
     DashboardtypesPanel:
       properties:
         kind:
-          $ref: '#/components/schemas/DashboardtypesPanelKind'
+          type: string
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
       type: object
@@ -2802,10 +2766,6 @@ components:
         unit:
           type: string
       type: object
-    DashboardtypesPanelKind:
-      enum:
-      - Panel
-      type: string
     DashboardtypesPanelPlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -2912,10 +2872,10 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardPanelDisplay'
+          $ref: '#/components/schemas/V1PanelDisplay'
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/V1Link'
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -2988,18 +2948,10 @@ components:
     DashboardtypesQuery:
       properties:
         kind:
-          $ref: '#/components/schemas/DashboardtypesQueryKind'
+          type: string
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
       type: object
-    DashboardtypesQueryKind:
-      enum:
-      - scalar
-      - time_series
-      - raw
-      - raw_stream
-      - trace
-      type: string
     DashboardtypesQueryPlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
@@ -3264,8 +3216,8 @@ components:
     DashboardtypesVariable:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec'
+    DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec:
       properties:
         kind:
           enum:
@@ -7283,6 +7235,26 @@ 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:
@@ -8115,64 +8087,6 @@ 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}:
     put:
       deprecated: false

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -355,32 +355,26 @@ func (module *module) GetService(ctx context.Context, orgID valuer.UUID, service
 
 	var integrationService *cloudintegrationtypes.CloudIntegrationService
 
-	if cloudIntegrationID.IsZero() {
-		return cloudintegrationtypes.NewService(provider, serviceDefinition, nil, nil), nil
+	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
+		}
 	}
 
-	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
+	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
 }
 
 func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
@@ -589,3 +583,20 @@ 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
+}

frontend/.oxlintrc.json

@@ -291,6 +291,8 @@
     // Prevents the usage of specific antd components in favor of our lib
     "signoz/no-signozhq-ui-barrel": "error",
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
+    "signoz/no-css-module-bracket-access": "warn",
+    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "no-restricted-globals": [
       "error",
       {

frontend/.stylelintrc.cjs

@@ -2,9 +2,33 @@
 const path = require('path');
 
 module.exports = {
-	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
+	plugins: [
+		path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js'),
+		path.join(__dirname, 'stylelint-rules/css-modules/no-deep-nesting.js'),
+		path.join(__dirname, 'stylelint-rules/css-modules/no-id-selectors.js'),
+		path.join(
+			__dirname,
+			'stylelint-rules/css-modules/no-bare-element-selectors.js',
+		),
+		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
+		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
+	],
 	customSyntax: 'postcss-scss',
 	rules: {
+		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
 	},
+	overrides: [
+		{
+			// CSS module-specific rules
+			files: ['**/*.module.scss'],
+			rules: {
+				'local/no-deep-nesting': [true, { severity: 'warning' }],
+				'local/no-id-selectors': true,
+				'local/no-bare-element-selectors': true,
+				'local/prefer-css-variables': [true, { severity: 'warning' }],
+				'local/class-name-pattern': [true, { severity: 'warning' }],
+			},
+		},
+	],
 };

frontend/AGENTS.md

@@ -23,6 +23,8 @@ You are operating within a constrained context window and strict system prompts.
 - Always add data-testid or testId (if supported) to critical/behavioral components like inputs, buttons, etc...
   - When creating test, these IDs should be used instead of finding by role.
 - Never create barrel files.
+- When writing new css, prefer CSS Modules
+  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`

frontend/docs/css-modules-guide.md

@@ -0,0 +1,471 @@
+# CSS Modules Guide for AI Agents
+
+## Config (vite.config.ts)
+
+```ts
+css: {
+  modules: {
+    localsConvention: 'camelCaseOnly',
+  },
+}
+```
+
+**Critical:** `camelCaseOnly` exports ONLY camelCase keys. Original kebab-case NOT accessible.
+
+## Quick Reference
+
+| CSS Class | JS Access | Works? |
+|-----------|-----------|--------|
+| `.alertHistory` | `styles.alertHistory` | Yes |
+| `.alert-history` | `styles.alertHistory` | Yes |
+| `.alert-history` | `styles['alert-history']` | NO - undefined |
+
+## Bad Patterns
+
+### Class Naming
+
+```scss
+// BAD: Bracket access won't work
+.my-class { }
+// Then in JS: styles['my-class'] -> undefined
+
+// BAD: Collision - both become same key
+.alertHistory { }
+.alert-history { }  // -> styles.alertHistory (conflicts)
+
+// BAD: Underscore inconsistency
+.my_class { }  // -> styles.myClass (confusing)
+
+// GOOD: Direct camelCase
+.alertHistory { }
+.statsCard { }
+```
+
+### Nesting
+
+```scss
+// BAD: Deep nesting - specificity wars, hard to override
+.container {
+  .wrapper {
+    .inner {
+      .content { }
+    }
+  }
+}
+
+// BAD: Nesting creates separate classes you might not expect
+.button {
+  .icon { }  // -> styles.icon (separate class, not scoped under .button)
+}
+
+// GOOD: Flat structure
+.container { }
+.containerWrapper { }
+.containerContent { }
+
+// GOOD: Nesting only for pseudo/states
+.button {
+  &:hover { }
+  &:disabled { }
+  &::before { }
+}
+```
+
+### Global Escapes
+
+```scss
+// BAD: Overusing global
+:global {
+  .everything { }
+  .in-here { }
+  .is-global { }
+}
+
+// BAD: Global without necessity
+:global(.myComponent) { }  // defeats purpose of modules
+
+// GOOD: Targeted global for third-party overrides
+.container {
+  :global(.ant-modal-content) {
+    padding: 0;
+  }
+}
+```
+
+### Selectors
+
+```scss
+// BAD: ID selectors - not reusable
+#myComponent { }
+
+// BAD: Element selectors without scope
+div { }  // affects ALL divs in component
+
+// BAD: Complex selectors
+.container > div + span ~ p { }
+
+// GOOD: Class-only selectors
+.container { }
+.title { }
+```
+
+### Variables & Values
+
+```scss
+// BAD: Hardcoded colors
+.button {
+  background: #1890ff;
+  color: white;
+}
+
+// BAD: Magic numbers
+.container {
+  padding: 17px;
+  margin-left: 43px;
+}
+
+// GOOD: Semantic tokens (theme-aware)
+.button {
+  background: var(--primary-background);
+  color: var(--primary-foreground);
+}
+
+.card {
+  background: var(--l2-background);
+  color: var(--l2-foreground);
+}
+
+// GOOD: Spacing system
+.container {
+  padding: var(--spacing-4);
+  margin-left: var(--spacing-5);
+}
+```
+
+## Design Tokens (@signozhq/design-tokens)
+
+Prefer semantic tokens over hardcoded values.
+
+You can read the ./node_modules/@signozhq/design-tokens/dist/style.css to find complete list of available tokens.
+
+### Spacing
+
+```scss
+// Spacing scale (index -> px):
+// --spacing-0=0    --spacing-1=2    --spacing-2=4    --spacing-3=6    --spacing-4=8
+// --spacing-5=10   --spacing-6=12   --spacing-7=14   --spacing-8=16   --spacing-10=20
+// --spacing-12=24  --spacing-16=32  --spacing-20=40  --spacing-24=48  --spacing-32=64
+// --spacing-40=80  --spacing-48=96  --spacing-56=112 --spacing-64=128
+// (index != px; --spacing-2 is 4px, not 2px)
+.container {
+  padding: var(--spacing-4);      // 8px
+  gap: var(--spacing-6);          // 12px
+  margin-bottom: var(--spacing-8); // 16px
+}
+
+// Also available: --padding-* and --margin-* (rem-based)
+// --padding-1 = 0.25rem, --padding-4 = 1rem, etc.
+```
+
+### Typography
+
+```scss
+// Font sizes (preferred)
+.title {
+  font-size: var(--periscope-font-size-large);   // 18px
+  font-size: var(--periscope-font-size-medium);  // 16px
+  font-size: var(--periscope-font-size-base);    // 13px
+  font-size: var(--periscope-font-size-small);   // 11px
+}
+
+// Alternative scale (rem-based)
+.heading {
+  font-size: var(--font-size-xl);  // 1.25rem
+  font-size: var(--font-size-lg);  // 1.125rem
+  font-size: var(--font-size-base); // 1rem
+  font-size: var(--font-size-sm);  // 0.875rem
+}
+
+// Font weights
+.bold {
+  font-weight: var(--font-weight-semibold); // 600
+  font-weight: var(--font-weight-medium);   // 500
+  font-weight: var(--font-weight-normal);   // 400
+}
+
+// Line heights
+.text {
+  line-height: var(--line-height-20); // 20px
+  line-height: var(--line-height-24); // 24px
+}
+```
+
+### Colors (Prefer Semantic Tokens)
+
+Use L1/L2/L3 semantic tokens - they handle light/dark theme automatically.
+
+```scss
+// BAD: Primitive tokens (fixed value across themes, won't swap on theme change)
+.card {
+  background: var(--bg-ink-400);
+  color: var(--text-vanilla-100);
+}
+
+// GOOD: L1/L2/L3 tokens (theme-aware - swap automatically light/dark)
+.card {
+  background: var(--l1-background);  // base layer
+  color: var(--l1-foreground);       // primary text
+}
+
+.panel {
+  background: var(--l2-background);  // elevated surface
+  color: var(--l2-foreground);       // secondary text
+  border-color: var(--l2-border);
+}
+
+.nested {
+  background: var(--l3-background);  // nested/inset
+  color: var(--l3-foreground);       // tertiary text
+}
+
+// Hover states
+.card:hover {
+  background: var(--l1-background-hover);
+  color: var(--l1-foreground-hover);
+}
+
+// Semantic action colors (also theme-aware)
+.primary {
+  background: var(--primary-background);
+  color: var(--primary-foreground);
+}
+
+.danger {
+  background: var(--danger-background);
+  color: var(--danger-foreground);
+}
+
+.success {
+  background: var(--success-background);
+  color: var(--success-foreground);
+}
+
+.warning {
+  background: var(--warning-background);
+  color: var(--warning-foreground);
+}
+
+// Accent colors (for highlights, badges, etc.)
+.accent {
+  background: var(--accent-primary);        // robin blue
+  background: var(--accent-forest);         // green
+  background: var(--accent-cherry);         // red
+  background: var(--accent-amber);          // yellow
+}
+```
+
+**Token hierarchy:**
+- Primitive tokens (`--bg-*`, `--text-*`, etc.) have fixed values across themes.
+- Semantic tokens (L1/L2/L3, `--primary-*`, `--danger-*`, etc.) automatically swap based on theme.
+- L1 = base/root layer
+- L2 = elevated surfaces (cards, panels)
+- L3 = nested/inset elements
+
+## Overriding @signozhq/ui Components
+
+Components expose CSS variables for customization.
+
+You can ensure they exist by looking at ./node_modules/@signozhq/ui/dist.
+Never write a override without confirm it exists.
+
+Override via:
+
+### Method 1: CSS Variables (Preferred)
+
+Each component exposes `--<component>-<property>` variables:
+
+```scss
+// Override Button
+.customButton {
+  --button-background: var(--success-background);
+  --button-border-radius: var(--radius-2);
+  --button-padding: var(--spacing-4) var(--spacing-8);
+  --button-font-size: var(--periscope-font-size-base);
+}
+
+// Override Input
+.customInput {
+  --input-height: 2.5rem;
+  --input-border-color: var(--l2-border);
+  --input-padding: var(--spacing-2) var(--spacing-6);
+  --input-placeholder-color: var(--l3-foreground);
+}
+
+// Override nested parts
+.customInput {
+  --input-prefix-padding: 0 var(--spacing-4) 0 var(--spacing-6);
+  --input-suffix-color: var(--accent-primary);
+}
+```
+
+### Method 2: Data Attributes
+
+Components use data attributes for variants/states. Target them for state-specific overrides:
+
+```scss
+// Target variant
+.wrapper :global([data-variant="outlined"]) {
+  --button-border-color: var(--accent-primary);
+}
+
+// Target size
+.wrapper :global([data-size="sm"]) {
+  --button-font-size: var(--periscope-font-size-small);
+}
+
+// Target color
+.wrapper :global([data-color="destructive"]) {
+  --button-background: var(--danger-background);
+}
+
+// Target state (Radix patterns)
+.popover :global([data-state="open"]) {
+  opacity: 1;
+}
+
+.tooltip :global([data-side="top"]) {
+  margin-bottom: var(--spacing-2);
+}
+```
+
+### Common Component CSS Variables
+
+**Button:**
+- `--button-background`, `--button-border-radius`, `--button-padding`
+- `--button-font-size`, `--button-height`, `--button-gap`
+- `--button-hover-background`, `--button-disabled-opacity`
+
+**Input:**
+- `--input-height`, `--input-border-color`, `--input-background`
+- `--input-padding`, `--input-font-size`, `--input-placeholder-color`
+- `--input-focus-outline-color`, `--input-hover-border-color`
+- `--input-prefix-*`, `--input-suffix-*` for adornments
+
+**General pattern:** `--<component>-<property>` or `--<component>-<state>-<property>`
+
+## Good Patterns
+
+### Structure
+
+```scss
+// Flat, descriptive, component-scoped
+.alertHistory { }
+.alertHistoryHeader { }
+.alertHistoryContent { }
+.alertHistoryFooter { }
+
+// State modifiers as separate classes
+.alertHistory { }
+.alertHistoryLoading { }
+.alertHistoryEmpty { }
+.alertHistoryError { }
+```
+
+### Composition
+
+```scss
+// GOOD: Composing styles
+.baseButton {
+  padding: var(--spacing-2) var(--spacing-4);
+  border-radius: var(--radius-2);
+}
+
+.primaryButton {
+  composes: baseButton;
+  background: var(--primary-background);
+}
+```
+
+### Pseudo Elements
+
+```scss
+.button {
+  // States
+  &:hover { opacity: 0.9; }
+  &:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  // Pseudo elements
+  &::before { content: ''; }
+  &::after { content: ''; }
+}
+```
+
+### Media Queries
+
+```scss
+.container {
+  display: flex;
+  flex-direction: column;
+  
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+```
+
+## JS Import Patterns
+
+```tsx
+// GOOD
+import styles from './Component.module.scss';
+
+<div className={styles.container}>
+  <span className={styles.title}>Title</span>
+</div>
+
+// GOOD: Conditional classes
+<div className={`${styles.button} ${isActive ? styles.buttonActive : ''}`}>
+
+// GOOD: With clsx/classnames
+<div className={clsx(styles.button, { [styles.buttonActive]: isActive })}>
+
+// BAD: Bracket access (may be undefined)
+<div className={styles['button-active']}>  // undefined if CSS has .button-active
+
+// BAD: String interpolation for class names
+<div className={`${styles.button}-active`}>  // won't work
+```
+
+## Checklist Before Committing
+
+- [ ] All class names use camelCase in CSS
+- [ ] No bracket access (`styles['...']`) in JS unless verified
+- [ ] No deep class nesting (max 3 class levels; pseudo-classes/elements and parent-reference selectors like `&.active`, `&#bar` are not counted)
+- [ ] No hardcoded colors - use `--l1/l2/l3-*` semantic tokens (not `--bg-*` primitives)
+- [ ] No magic numbers - use `--spacing-*` tokens
+- [ ] Typography uses `--periscope-font-size-*` or `--font-size-*` tokens
+- [ ] @signozhq/ui overrides use CSS variables, not direct class overrides
+- [ ] Global escapes only for third-party overrides
+- [ ] No ID selectors
+- [ ] No bare element selectors
+
+## Lint Rules
+
+### JS/TS (oxlint)
+
+| Rule | Severity | Catches |
+|------|----------|---------|
+| `signoz/no-css-module-bracket-access` | warn | `styles['kebab-case']`, dynamic access |
+
+### CSS/SCSS (stylelint)
+
+| Rule | Severity | Catches |
+|------|----------|---------|
+| `local/no-deep-nesting` | warning | class nesting >3 levels (pseudo-classes/elements and parent-reference selectors `&.foo`, `&#bar` not counted; configurable via `maxDepth` secondary option) |
+| `local/no-id-selectors` | error | `#id` selectors |
+| `local/no-bare-element-selectors` | error | root-level `div`, `span` etc |
+| `local/prefer-css-variables` | warning | hardcoded colors |
+| `local/class-name-pattern` | warning | kebab-case, snake_case, PascalCase |
+
+Run: `pnpm lint:styles` to check CSS modules.

frontend/plugins/rules/no-css-module-bracket-access.mjs

@@ -0,0 +1,144 @@
+/**
+ * Rule: no-css-module-bracket-access
+ *
+ * Prevents bracket access on CSS module imports that may fail with camelCaseOnly config.
+ *
+ * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case class names are
+ * converted to camelCase and the original key is NOT exported.
+ *
+ * This rule catches patterns like:
+ *   styles['my-class']     // BAD - undefined if CSS has .my-class
+ *   styles['myClass']      // OK but prefer dot notation
+ *   styles.myClass         // GOOD
+ *
+ * Catches:
+ * - Bracket access with kebab-case strings (always fails)
+ * - Bracket access with any string literal (warn - prefer dot notation)
+ * - Dynamic bracket access (warn - risky)
+ */
+
+const CSS_MODULE_IMPORT_NAMES = new Set([
+	'styles',
+	'classes',
+	'css',
+	'classNames',
+]);
+
+function looksLikeCssModuleImport(name) {
+	// Common patterns: styles, componentStyles, alertHistoryStyles
+	return (
+		CSS_MODULE_IMPORT_NAMES.has(name) ||
+		name.endsWith('Styles') ||
+		name.endsWith('Classes') ||
+		name.endsWith('Css')
+	);
+}
+
+function isKebabCase(str) {
+	return str.includes('-');
+}
+
+function isSnakeCase(str) {
+	return str.includes('_');
+}
+
+export default {
+	create(context) {
+		return {
+			MemberExpression(node) {
+				// Only check bracket notation: styles['...']
+				if (!node.computed) {
+					return;
+				}
+
+				const object = node.object;
+				if (object.type !== 'Identifier') {
+					return;
+				}
+
+				// Check if this looks like a CSS module import
+				if (!looksLikeCssModuleImport(object.name)) {
+					return;
+				}
+
+				const property = node.property;
+
+				// Dynamic access: styles[variable]
+				if (property.type === 'Identifier') {
+					context.report({
+						node,
+						message: `Dynamic CSS module access '${object.name}[${property.name}]' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify the key exists.`,
+					});
+					return;
+				}
+
+				// Template literal: styles[\`...\`]
+				if (property.type === 'TemplateLiteral') {
+					context.report({
+						node,
+						message: `Template literal CSS module access is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Prefer dot notation.`,
+					});
+					return;
+				}
+
+				// Numeric / boolean / null literal: styles[0]. Not a class lookup; ignore.
+				if (property.type === 'Literal' && typeof property.value !== 'string') {
+					return;
+				}
+
+				// String literal: styles['...']
+				if (property.type === 'Literal' && typeof property.value === 'string') {
+					const className = property.value;
+
+					// Kebab-case will definitely fail
+					if (isKebabCase(className)) {
+						context.report({
+							node,
+							message: `CSS module class '${className}' uses kebab-case which won't work with 'camelCaseOnly' config. Use '${object.name}.${toCamelCase(className)}' instead.`,
+						});
+						return;
+					}
+
+					// Snake_case is suspicious
+					if (isSnakeCase(className)) {
+						context.report({
+							node,
+							message: `CSS module class '${className}' uses snake_case which may not work as expected. Prefer camelCase: '${object.name}.${toCamelCase(className)}'.`,
+						});
+						return;
+					}
+
+					// Valid camelCase but using bracket notation - prefer dot
+					if (/^[a-z][a-zA-Z0-9]*$/.test(className)) {
+						context.report({
+							node,
+							message: `Prefer dot notation: '${object.name}.${className}' instead of '${object.name}['${className}']'.`,
+						});
+					}
+					return;
+				}
+
+				// Catch-all for other dynamic expressions:
+				//   styles['prefix' + suffix]   (BinaryExpression)
+				//   styles[isActive && 'foo']   (LogicalExpression)
+				//   styles[isActive ? 'a' : 'b'] (ConditionalExpression)
+				//   styles[fn()]                (CallExpression)
+				context.report({
+					node,
+					message: `Dynamic CSS module access on '${object.name}' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify each key resolves to an exported camelCase class.`,
+				});
+			},
+		};
+	},
+};
+
+function toCamelCase(str) {
+	return str
+		.split(/[-_]/)
+		.map((part, i) =>
+			i === 0
+				? part.toLowerCase()
+				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
+		)
+		.join('');
+}

frontend/plugins/signoz.mjs

@@ -11,6 +11,7 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
+import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 
 export default {
 	meta: {
@@ -23,5 +24,6 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
+		'no-css-module-bracket-access': noCssModuleBracketAccess,
 	},
 };

frontend/src/AppRoutes/index.tsx

@@ -351,18 +351,19 @@ function App(): JSX.Element {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,
-					environment: process.env.ENVIRONMENT,
-					release: process.env.VERSION,
+					environment: 'production',
 					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,
 						}),
 					],
-					tracesSampleRate: 0, // Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
+					// 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
 					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/generated/services/cloudintegration/index.ts

@@ -36,8 +36,6 @@ import type {
 	GetService200,
 	GetServiceParams,
 	GetServicePathParameters,
-	ListAccountServicesMetadata200,
-	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
@@ -633,116 +631,6 @@ 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 updates a service for the specified cloud provider
  * @summary Update service

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

@@ -2457,6 +2457,33 @@ 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
@@ -2839,54 +2866,6 @@ 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
@@ -2898,8 +2877,13 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
+export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
+	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesServiceAssetsDTO;
+	assets: CloudintegrationtypesAssetsDTO;
 	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO | null;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
@@ -2915,6 +2899,7 @@ export interface CloudintegrationtypesServiceDTO {
 	 */
 	overview: string;
 	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -3104,40 +3089,6 @@ 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
@@ -3754,10 +3705,6 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
-	[key: string]: unknown;
-}
-
 export enum DashboardtypesSourceDTO {
 	user = 'user',
 	system = 'system',
@@ -3839,9 +3786,40 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
-export enum DashboardtypesPanelKindDTO {
-	Panel = 'Panel',
+export interface V1PanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
 }
+
+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',
 }
@@ -4083,13 +4061,6 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
-export enum DashboardtypesQueryKindDTO {
-	scalar = 'scalar',
-	time_series = 'time_series',
-	raw = 'raw',
-	raw_stream = 'raw_stream',
-	trace = 'trace',
-}
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
 }
@@ -4394,16 +4365,19 @@ export interface DashboardtypesQuerySpecDTO {
 }
 
 export interface DashboardtypesQueryDTO {
-	kind?: DashboardtypesQueryKindDTO;
+	/**
+	 * @type string
+	 */
+	kind?: string;
 	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: DashboardPanelDisplayDTO;
+	display?: V1PanelDisplayDTO;
 	/**
 	 * @type array
 	 */
-	links?: DashboardLinkDTO[];
+	links?: V1LinkDTO[];
 	plugin?: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4412,7 +4386,10 @@ export interface DashboardtypesPanelSpecDTO {
 }
 
 export interface DashboardtypesPanelDTO {
-	kind?: DashboardtypesPanelKindDTO;
+	/**
+	 * @type string
+	 */
+	kind?: string;
 	spec?: DashboardtypesPanelSpecDTO;
 }
 
@@ -4426,20 +4403,20 @@ export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 export type DashboardtypesDashboardSpecDTOPanels =
 	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
 
-export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
+export enum DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
-export interface DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO {
+export interface DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO {
 	/**
 	 * @enum Grid
 	 * @type string
 	 */
-	kind: DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind;
+	kind: DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind;
 	spec: DashboardGridLayoutSpecDTO;
 }
 
 export type DashboardtypesLayoutDTO =
-	DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO;
+	DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO;
 
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
@@ -4543,21 +4520,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind;
 	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -4576,7 +4553,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	links?: DashboardLinkDTO[];
+	links?: V1LinkDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -8699,18 +8676,6 @@ 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 UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;

frontend/src/api/trace/getTraceV3.tsx

@@ -1,14 +1,15 @@
-import { getWaterfallV4 } from 'api/generated/services/tracedetail';
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV4PayloadProps,
-	GetTraceV4SuccessResponse,
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
 	SpanV3,
 } from 'types/api/trace/getTraceV3';
 
-const getTraceV4 = async (
-	props: GetTraceV4PayloadProps,
-): Promise<SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse> => {
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
 	let uncollapsedSpans = [...props.uncollapsedSpans];
 	if (!props.isSelectedSpanIDUnCollapsed) {
 		uncollapsedSpans = uncollapsedSpans.filter(
@@ -18,37 +19,31 @@ const getTraceV4 = async (
 		props.selectedSpanId &&
 		!uncollapsedSpans.includes(props.selectedSpanId)
 	) {
-		// Backend only uses the uncollapsedSpans list (unlike V2 which also interprets
+		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
 		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
 		uncollapsedSpans.push(props.selectedSpanId);
 	}
-	const response = await getWaterfallV4(
-		{ traceID: props.traceId },
-		{
-			selectedSpanId: props.selectedSpanId,
-			uncollapsedSpans,
-			limit: 10000,
-		},
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+		limit: 10000,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
 	);
 
-	// 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 };
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
 
 	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',
 		timestamp: span.time_unix,
 	}));
 
-	// API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// V3 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;
@@ -75,4 +70,4 @@ const getTraceV4 = async (
 	};
 };
 
-export default getTraceV4;
+export default getTraceV3;

frontend/src/constants/reactQueryKeys.ts

@@ -33,8 +33,7 @@ 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_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
-	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
+	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

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

@@ -8,16 +8,16 @@ import { Tabs } from '@signozhq/ui/tabs';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
-	getListAccountServicesMetadataQueryKey,
+	getListServicesMetadataQueryKey,
 	invalidateGetService,
-	invalidateListAccountServicesMetadata,
+	invalidateListServicesMetadata,
 	useGetService,
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
 import {
 	CloudintegrationtypesServiceConfigDTO,
 	CloudintegrationtypesServiceDTO,
-	ListAccountServicesMetadata200,
+	ListServicesMetadata200,
 } from 'api/generated/services/sigNoz.schemas';
 import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
@@ -240,12 +240,16 @@ function ServiceDetails({
 							// instead of waiting for the refetch to complete.
 							reset(nextFormValues);
 
-							const servicesListQueryKey = getListAccountServicesMetadataQueryKey({
-								cloudProvider: type,
-								id: cloudAccountId,
-							});
+							const servicesListQueryKey = getListServicesMetadataQueryKey(
+								{
+									cloudProvider: type,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
-							queryClient.setQueryData<ListAccountServicesMetadata200 | undefined>(
+							queryClient.setQueryData<ListServicesMetadata200 | undefined>(
 								servicesListQueryKey,
 								(prev) => {
 									if (!prev?.data?.services?.length) {
@@ -279,10 +283,15 @@ function ServiceDetails({
 								},
 							);
 
-							invalidateListAccountServicesMetadata(queryClient, {
-								cloudProvider: type,
-								id: cloudAccountId,
-							});
+							invalidateListServicesMetadata(
+								queryClient,
+								{
+									cloudProvider: type,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
 							logEvent(`${type} Integration: Service settings saved`, {
 								cloudAccountId,

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

@@ -55,6 +55,7 @@ const buildServiceDetailsResponse = (
 				},
 			},
 		},
+		telemetryCollectionStrategy: { aws: {} },
 	},
 });
 

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

@@ -1,68 +0,0 @@
-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,11 +53,6 @@
 				}
 			}
 
-			&.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,9 +1,11 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import {
-	CloudintegrationtypesServiceDashboardDTO,
+	CloudintegrationtypesDashboardDTO,
 	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({
@@ -14,6 +16,7 @@ function ServiceDashboards({
 	isInteractive?: boolean;
 }): JSX.Element {
 	const dashboards = service?.assets?.dashboards || [];
+	const { safeNavigate } = useSafeNavigate();
 	if (!dashboards.length) {
 		return <></>;
 	}
@@ -22,20 +25,68 @@ function ServiceDashboards({
 		<div className="aws-service-dashboards">
 			<div className="aws-service-dashboards-title">Dashboards</div>
 			<div className="aws-service-dashboards-items">
-				{dashboards.map(
-					(dashboard: CloudintegrationtypesServiceDashboardDTO, index: number) => {
-						const key =
-							dashboard.integrationDashboard?.dashboardId ||
-							`${dashboard.title}-${index}`;
-						return (
-							<DashboardCard
-								key={key}
-								dashboard={dashboard}
-								isInteractive={isInteractive}
-							/>
-						);
-					},
-				)}
+				{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>
+					);
+				})}
 			</div>
 		</div>
 	);

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

@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Skeleton } from 'antd';
-import {
-	useListAccounts,
-	useListAccountServicesMetadata,
-	useListServicesMetadata,
-} from 'api/generated/services/cloudintegration';
+import { 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';
@@ -24,33 +20,17 @@ function ServicesList({
 }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const isAccountConnected = Boolean(cloudAccountId);
-	const { data: listAccountsResponse, isLoading: isAccountsLoading } =
-		useListAccounts({ cloudProvider: type });
-	const hasConnectedAccounts =
-		(listAccountsResponse?.data?.accounts?.length ?? 0) > 0;
+	const hasValidCloudAccountId = Boolean(cloudAccountId);
+	const serviceQueryParams = hasValidCloudAccountId
+		? { cloud_integration_id: cloudAccountId }
+		: undefined;
 
-	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 { data: servicesMetadata, isLoading } = useListServicesMetadata(
+		{
+			cloudProvider: type,
+		},
+		serviceQueryParams,
+	);
 
 	const awsServices = useMemo(
 		() => servicesMetadata?.data?.services ?? [],

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

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

@@ -1,34 +0,0 @@
-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/useGetTraceV3.tsx

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

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

@@ -6,10 +6,6 @@ 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 {
@@ -21,22 +17,9 @@ 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,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
+function Panel({ panel, panelId, isVisible }: 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';
@@ -65,17 +48,7 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
-					/>
-				) : (
-					<EllipsisVertical size={14} />
-				)}
+				<EllipsisVertical size={14} />
 			</div>
 
 			<div className={styles.body}>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,64 +0,0 @@
-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,45 +1,17 @@
 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, {
-	type SectionDragHandle,
-} from '../SectionHeader/SectionHeader';
+import SectionHeader 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,
-	onAddPanel,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-	dragHandle,
-}: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function Section({ section }: Props): JSX.Element {
 	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.
@@ -47,48 +19,10 @@ function Section({
 		rootMargin: '200px',
 	});
 
-	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
+	const [open, setOpen] = useState<boolean>(section.open);
+	const toggle = (): void => setOpen((prev) => !prev);
 
-	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}
-		/>
-	);
+	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -117,26 +51,8 @@ function Section({
 				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

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

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

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

@@ -1,32 +0,0 @@
-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,35 +2,18 @@ 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,
-	layoutIndex,
-	isVisible,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function SectionGrid({ items, isVisible }: Props): JSX.Element {
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -43,8 +26,6 @@ function SectionGrid({
 		[items],
 	);
 
-	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
-
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -53,24 +34,13 @@ function SectionGrid({
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			draggableHandle=".panel-drag-handle"
-			isDraggable={isEditable}
-			isResizable={isEditable}
-			onDragStop={handleLayoutChange}
-			onResizeStop={handleLayoutChange}
+			isDraggable={false}
+			isResizable={false}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel
-						panel={item.panel}
-						panelId={item.id}
-						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
-					/>
+					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
 				</div>
 			))}
 		</ResponsiveGridLayout>

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

@@ -1,29 +1,15 @@
-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 { ChevronDown, ChevronRight } 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({
@@ -32,27 +18,9 @@ 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}
@@ -67,14 +35,6 @@ 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

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

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-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,11 +7,8 @@ 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';
@@ -23,8 +20,6 @@ interface Props {
 }
 
 function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
-
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -33,11 +28,6 @@ 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 (
@@ -52,27 +42,12 @@ 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()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					isSectioned={isSectioned}
-				/>
-			) : null}
-		</div>
-	);
+	return <div className={styles.body}>{renderContent()}</div>;
 }
 
 export default PanelsAndSectionsLayout;

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

@@ -1,13 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { 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 {
@@ -18,17 +15,6 @@ 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

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

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

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

@@ -1,44 +0,0 @@
-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,6 +72,7 @@ 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;
 }
@@ -126,11 +127,15 @@ 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,15 +33,6 @@
 	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,28 +1,21 @@
 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';
 
@@ -42,31 +35,10 @@ function AnalyticsPanel({
 	onClose,
 	onTabChange,
 }: AnalyticsPanelProps): JSX.Element | null {
-	const { id: traceId } = useParams<TraceDetailV3URLProps>();
-	const colorByField = useTraceStore((s) => s.colorByField);
-	const colorByFieldName = colorByField.name;
+	const aggregations = useTraceStore((s) => s.aggregations);
+	const colorByFieldName = useTraceStore((s) => s.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(
@@ -83,39 +55,38 @@ function AnalyticsPanel({
 		[aggregations, colorByFieldName],
 	);
 
-	const execTimeRows = useMemo<AnalyticsRow[]>(() => {
+	const execTimeRows = useMemo(() => {
 		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<AnalyticsRow[]>(() => {
+	const spanCountRows = useMemo(() => {
 		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) {
@@ -161,23 +132,65 @@ function AnalyticsPanel({
 
 					<div className={styles.tabsScroll}>
 						<TabsContent value="exec-time">
-							<AnalyticsTabContent
-								isLoading={isLoading}
-								isError={isError}
-								fieldName={colorByFieldName}
-								rows={execTimeRows}
-								valueVariant="wide"
-							/>
+							<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>
 						</TabsContent>
 
 						<TabsContent value="spans">
-							<AnalyticsTabContent
-								isLoading={isLoading}
-								isError={isError}
-								fieldName={colorByFieldName}
-								rows={spanCountRows}
-								valueVariant="narrow"
-							/>
+							<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>
 						</TabsContent>
 					</div>
 				</TabsRoot>

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

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

@@ -1,144 +0,0 @@
-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,6 +1,3 @@
-// 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,16 +1,7 @@
+import { useMemo } from 'react';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Button } from '@signozhq/ui/button';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { Settings2 } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
@@ -23,9 +14,6 @@ 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,
@@ -37,52 +25,78 @@ function TraceOptionsMenu({
 		(s) => s.availableColorByOptions,
 	);
 
-	const handleColorByChange = (name: string): void => {
-		const next = availableColorByOptions.find((o) => o.field.name === name);
-		if (next) {
-			setColorByField(next.field);
+	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,
+								})),
+							},
+						],
+					},
+				],
+			});
 		}
-	};
+
+		return items;
+	}, [
+		showTraceDetails,
+		onToggleTraceDetails,
+		onOpenPreviewFields,
+		colorByField.name,
+		setColorByField,
+		availableColorByOptions,
+	]);
 
 	return (
-		<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>
+		<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>
 	);
 }
 

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

@@ -1,9 +1,6 @@
 import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
-import {
-	computeVisualLayout,
-	WIDE_GROUP_THRESHOLD,
-} from '../computeVisualLayout';
+import { computeVisualLayout } from '../computeVisualLayout';
 
 function makeSpan(
 	overrides: Partial<FlamegraphSpan> & {
@@ -475,177 +472,4 @@ 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,82 +18,6 @@ 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.
  *
@@ -290,53 +214,7 @@ 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[] = [];
@@ -347,6 +225,7 @@ 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 15s, terminate and error
+		// Timeout: if worker doesn't respond in 30s, 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 { GetTraceV4SuccessResponse, SpanV3 } from 'types/api/trace/getTraceV3';
+import { GetTraceV3SuccessResponse, 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<GetTraceV4SuccessResponse, unknown>
+		| SuccessResponse<GetTraceV3SuccessResponse, unknown>
 		| ErrorResponse
 		| undefined;
 	isFetchingTraceData: boolean;

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

@@ -1,34 +0,0 @@
-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,17 +8,23 @@ import { Collapse } from 'antd';
 import { useDetailsPanel } from 'components/DetailsPanel';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
+import useGetTraceV3 from 'hooks/trace/useGetTraceV3';
 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 } from 'types/api/trace/getTraceV3';
+import {
+	SpanV3,
+	TraceDetailV3URLProps,
+	WaterfallAggregationRequest,
+} 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';
@@ -28,7 +34,6 @@ 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';
 
@@ -98,6 +103,17 @@ 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);
@@ -105,6 +121,7 @@ function TraceDetailsV3(): JSX.Element {
 		selectedSpanId: interestedSpanId.spanId,
 		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 		uncollapsedSpans: uncollapsedNodes,
+		aggregations: waterfallAggregationsRequest,
 	});
 
 	const queryParams = fullDataLoadedRef.current
@@ -113,17 +130,19 @@ function TraceDetailsV3(): JSX.Element {
 				selectedSpanId: interestedSpanId.spanId,
 				isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 				uncollapsedSpans: uncollapsedNodes,
+				aggregations: waterfallAggregationsRequest,
 			};
 
 	const {
 		data: traceData,
 		isFetching: isFetchingTraceData,
 		error: errorFetchingTraceData,
-	} = useGetTraceV4({
+	} = useGetTraceV3({
 		traceId,
 		uncollapsedSpans: queryParams.uncollapsedSpans,
 		selectedSpanId: queryParams.selectedSpanId,
 		isSelectedSpanIDUnCollapsed: queryParams.isSelectedSpanIDUnCollapsed,
+		aggregations: queryParams.aggregations,
 	});
 
 	const allSpans = traceData?.payload?.spans || [];
@@ -131,13 +150,6 @@ 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;
@@ -145,6 +157,7 @@ function TraceDetailsV3(): JSX.Element {
 			selectedSpanId: interestedSpanId.spanId,
 			isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 			uncollapsedSpans: uncollapsedNodes,
+			aggregations: waterfallAggregationsRequest,
 		};
 	}
 
@@ -369,7 +382,7 @@ function TraceDetailsV3(): JSX.Element {
 	);
 
 	return (
-		<TraceStoreSync availableColorByFields={availableColorByFields}>
+		<TraceStoreSync aggregations={traceData?.payload?.aggregations}>
 			<div className={styles.root}>
 				<TraceDetailsHeader
 					filterMetadata={filterMetadata}

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

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

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

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

frontend/src/pages/TraceDetailsV3/utils.ts

@@ -1,6 +1,5 @@
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-import { COLOR_BY_OPTIONS } from './constants';
 import {
 	ColorPair,
 	generateColorPair,
@@ -110,14 +109,3 @@ 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 {
-	SpantypesSpanAggregationResultDTO,
-	SpantypesSpanAggregationTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+	WaterfallAggregationResponse,
+	WaterfallAggregationType,
+} from 'types/api/trace/getTraceV3';
 
 export const AGGREGATIONS = {
-	EXEC_TIME_PCT: SpantypesSpanAggregationTypeDTO.execution_time_percentage,
-	SPAN_COUNT: SpantypesSpanAggregationTypeDTO.span_count,
-	DURATION: SpantypesSpanAggregationTypeDTO.duration,
-} as const;
+	EXEC_TIME_PCT: 'execution_time_percentage',
+	SPAN_COUNT: 'span_count',
+	DURATION: 'duration',
+} as const satisfies Record<string, WaterfallAggregationType>;
 
 export function getAggregationMap(
-	aggregations: SpantypesSpanAggregationResultDTO[] | undefined,
-	type: SpantypesSpanAggregationTypeDTO,
+	aggregations: WaterfallAggregationResponse[] | undefined,
+	type: WaterfallAggregationType,
 	fieldName: string,
-): Record<string, number> | null | undefined {
+): Record<string, number> | 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 => {
-		void logEvent('Workspace Blocked: Screen Viewed', {});
+		logEvent('Workspace Blocked: Screen Viewed', {});
 	}, []);
 
 	const handleContactUsClick = (): void => {
-		void logEvent('Workspace Blocked: Contact Us Clicked', {});
+		logEvent('Workspace Blocked: Contact Us Clicked', {});
 	};
 
 	const handleTabClick = (key: string): void => {
-		void logEvent('Workspace Blocked: Screen Tabs Clicked', { tabKey: key });
+		logEvent('Workspace Blocked: Screen Tabs Clicked', { tabKey: key });
 	};
 
 	const handleCollapseChange = (key: string | string[]): void => {
 		const lastKey = Array.isArray(key) ? key.slice(-1)[0] : key;
-		void logEvent('Workspace Blocked: Screen Tab FAQ Item Clicked', {
+		logEvent('Workspace Blocked: Screen Tab FAQ Item Clicked', {
 			panelKey: lastKey,
 		});
 	};
@@ -109,7 +109,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	);
 
 	const handleUpdateCreditCard = useCallback(async () => {
-		void logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
+		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 => {
-		void logEvent('Workspace Blocked: User Clicked Extend Trial', {});
+		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 => {
-		void logEvent('Workspace Blocked: User Clicked View Billing', {});
+		logEvent('Workspace Blocked: User Clicked View Billing', {});
 
 		safeNavigate(ROUTES.BILLING, { newTab: !!e && isModifierKeyPressed(e) });
 	};

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -6,12 +6,14 @@ 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';
 
@@ -107,6 +109,15 @@ 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>

frontend/src/types/api/trace/getTraceV3.ts

@@ -1,9 +1,26 @@
-export interface GetTraceV4PayloadProps {
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export type WaterfallAggregationType =
+	| 'span_count'
+	| 'execution_time_percentage'
+	| 'duration';
+
+export interface WaterfallAggregationRequest {
+	field: TelemetryFieldKey;
+	aggregation: WaterfallAggregationType;
+}
+
+export interface WaterfallAggregationResponse extends WaterfallAggregationRequest {
+	value: Record<string, number>;
+}
+
+export interface GetTraceV3PayloadProps {
 	traceId: string;
 	selectedSpanId: string;
 	uncollapsedSpans: string[];
 	isSelectedSpanIDUnCollapsed: boolean;
 	limit?: number; // Optional limit for number of spans to fetch, default can be set in API
+	aggregations?: WaterfallAggregationRequest[];
 }
 
 export interface TraceDetailV3URLProps {
@@ -71,7 +88,7 @@ export interface SpanV3 {
 	trace_state: string;
 }
 
-export interface GetTraceV4SuccessResponse {
+export interface GetTraceV3SuccessResponse {
 	spans: SpanV3[];
 	hasMissingSpans: boolean;
 	uncollapsedSpans: string[];
@@ -81,4 +98,5 @@ export interface GetTraceV4SuccessResponse {
 	totalErrorSpansCount: number;
 	rootServiceName: string;
 	rootServiceEntryPoint: string;
+	aggregations?: WaterfallAggregationResponse[];
 }

frontend/src/vite-env.d.ts

@@ -24,8 +24,6 @@ interface ImportMetaEnv {
 	readonly VITE_TUNNEL_URL: string;
 	readonly VITE_TUNNEL_DOMAIN: string;
 	readonly VITE_DOCS_BASE_URL: string;
-	readonly VITE_ENVIRONMENT: string;
-	readonly VITE_VERSION: string;
 }
 
 interface ImportMeta {

frontend/stylelint-rules/css-modules/class-name-pattern.js

@@ -0,0 +1,186 @@
+/**
+ * Stylelint rule: local/class-name-pattern
+ *
+ * Enforces camelCase class names in CSS modules.
+ * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case is converted but
+ * using camelCase directly avoids confusion.
+ *
+ * BAD:
+ *   .my-class { }        // converted to myClass, but confusing
+ *   .my_class { }        // converted to myClass, but confusing
+ *   .MyClass { }         // PascalCase not conventional
+ *
+ * GOOD:
+ *   .myClass { }
+ *   .alertHistory { }
+ *   .statsCard { }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/class-name-pattern';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	kebabCase: (className) =>
+		`Class "${className}" uses kebab-case. Use camelCase instead: "${toCamelCase(className)}".`,
+	snakeCase: (className) =>
+		`Class "${className}" uses snake_case. Use camelCase instead: "${toCamelCase(className)}".`,
+	pascalCase: (className) =>
+		`Class "${className}" uses PascalCase. Use camelCase instead: "${className.charAt(0).toLowerCase() + className.slice(1)}".`,
+});
+
+function toCamelCase(str) {
+	return str
+		.split(/[-_]/)
+		.map((part, i) =>
+			i === 0
+				? part.toLowerCase()
+				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
+		)
+		.join('');
+}
+
+function isKebabCase(str) {
+	return str.includes('-');
+}
+
+function isSnakeCase(str) {
+	return str.includes('_');
+}
+
+function isPascalCase(str) {
+	return /^[A-Z][a-zA-Z0-9]*$/.test(str);
+}
+
+const CLASS_PATTERN = /\.([a-zA-Z_][a-zA-Z0-9_-]*)/g;
+
+const DEFAULT_THIRD_PARTY_PREFIXES = [
+	'ant-', // Ant Design
+	'rc-', // rc-components (Ant Design internals)
+	'recharts-', // Recharts
+	'uplot-', // uPlot
+	'u-', // uPlot legacy
+	'leaflet-', // Leaflet
+	'monaco-', // Monaco editor
+	'react-resizable', // react-resizable
+	'cm-', // CodeMirror
+];
+
+// Bare `:global { ... }` block (no parens) makes all descendants global.
+// `:global(.foo)` is a per-selector escape — handled separately by globalRanges().
+function hasBareGlobalAncestor(node) {
+	let current = node.parent;
+	while (current) {
+		const selector = current.selector;
+		if (selector && /:global(?!\s*\()/.test(selector)) {
+			return true;
+		}
+		current = current.parent;
+	}
+	return false;
+}
+
+// Return list of [start, end) index ranges inside `selector` that fall within a
+// balanced `:global(...)` argument list. Class matches inside these ranges are
+// third-party and should be skipped.
+function globalRanges(selector) {
+	const ranges = [];
+	const re = /:global\s*\(/g;
+	let match;
+	while ((match = re.exec(selector)) !== null) {
+		const argStart = match.index + match[0].length;
+		let depth = 1;
+		let i = argStart;
+		while (i < selector.length && depth > 0) {
+			const ch = selector[i];
+			if (ch === '(') {
+				depth++;
+			} else if (ch === ')') {
+				depth--;
+			}
+			if (depth > 0) {
+				i++;
+			}
+		}
+		ranges.push([argStart, i]);
+		re.lastIndex = i;
+	}
+	return ranges;
+}
+
+function indexInRanges(index, ranges) {
+	for (const [start, end] of ranges) {
+		if (index >= start && index < end) {
+			return true;
+		}
+	}
+	return false;
+}
+
+const rule = (primaryOption, secondaryOptions) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		const userPrefixes =
+			(secondaryOptions && secondaryOptions.ignoreThirdPartyPrefixes) || [];
+		const allPrefixes = [...DEFAULT_THIRD_PARTY_PREFIXES, ...userPrefixes];
+
+		root.walkRules((ruleNode) => {
+			const selector = ruleNode.selector;
+
+			// Bare `:global { }` block makes all descendants global — skip entirely.
+			if (hasBareGlobalAncestor(ruleNode)) {
+				return;
+			}
+
+			const ranges = globalRanges(selector);
+
+			let match;
+			CLASS_PATTERN.lastIndex = 0;
+
+			while ((match = CLASS_PATTERN.exec(selector)) !== null) {
+				const className = match[1];
+				// Skip classes inside `:global(...)` ranges of this selector.
+				if (indexInRanges(match.index, ranges)) {
+					continue;
+				}
+
+				// Skip third-party library classes
+				if (allPrefixes.some((prefix) => className.startsWith(prefix))) {
+					continue;
+				}
+
+				if (isKebabCase(className)) {
+					stylelint.utils.report({
+						message: messages.kebabCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				} else if (isSnakeCase(className)) {
+					stylelint.utils.report({
+						message: messages.snakeCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				} else if (isPascalCase(className)) {
+					stylelint.utils.report({
+						message: messages.pascalCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-bare-element-selectors.js

@@ -0,0 +1,164 @@
+/**
+ * Stylelint rule: local/no-bare-element-selectors
+ *
+ * Prevents bare element selectors at root level in CSS modules.
+ * Bare elements affect ALL instances of that element within component scope,
+ * often unintentionally.
+ *
+ * BAD:
+ *   div { }
+ *   span { padding: 4px; }
+ *   p { margin: 0; }
+ *
+ * GOOD:
+ *   .container { }
+ *   .title { }
+ *
+ * ALLOWED (nested under class):
+ *   .container {
+ *     p { margin: 0; }  // Scoped to .container
+ *   }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-bare-element-selectors';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	unexpected: (element) =>
+		`Bare element selector "${element}" at root level affects all instances. Use class selector or nest under a class.`,
+	unexpectedInCompound: (element, full) =>
+		`Bare element "${element}" in unscoped selector "${full}" at root level matches every "<${element}>" in the module. Anchor the selector with a class (e.g., ".container ${element}") or use :global() if intentional.`,
+});
+
+const ELEMENT_PATTERN = /^[a-z][a-z0-9]*$/i;
+const EXCLUDED_ELEMENTS = new Set(['html', 'body', 'root']);
+
+function isPartBareElement(part) {
+	const trimmed = part.trim();
+	if (!trimmed) {
+		return false;
+	}
+	// Strip pseudo suffixes (`:hover`, `::before`) — element part is what's before
+	const elementOnly = trimmed.split(':')[0];
+	if (!elementOnly) {
+		return false;
+	}
+	// Skip class/id/attribute parts
+	if (/[.#[]/.test(elementOnly)) {
+		return false;
+	}
+	return (
+		ELEMENT_PATTERN.test(elementOnly) &&
+		!EXCLUDED_ELEMENTS.has(elementOnly.toLowerCase())
+	);
+}
+
+function isBareElement(selector) {
+	const trimmed = selector.trim();
+	// Skip combined selectors
+	if (/[,\s>+~]/.test(trimmed)) {
+		return false;
+	}
+	// Skip pseudo-selectors
+	if (trimmed.includes(':')) {
+		return false;
+	}
+	// Skip class/id/attribute selectors
+	if (/[.#[]/.test(trimmed)) {
+		return false;
+	}
+	return (
+		ELEMENT_PATTERN.test(trimmed) && !EXCLUDED_ELEMENTS.has(trimmed.toLowerCase())
+	);
+}
+
+// Split a compound selector on combinators (`>`, `+`, `~`, descendant space)
+// while keeping each part intact. Returns an array of selector parts.
+function splitOnCombinators(selector) {
+	return selector
+		.split(/\s*[>+~]\s*|\s+/)
+		.map((p) => p.trim())
+		.filter(Boolean);
+}
+
+function isInsideGlobal(selector) {
+	return /:global\s*\(/.test(selector);
+}
+
+const KEYFRAME_ATRULES = new Set([
+	'keyframes',
+	'-webkit-keyframes',
+	'-moz-keyframes',
+	'-o-keyframes',
+]);
+
+// Rule's effective parent is root if all ancestors above it are atrules
+// (e.g. `@media`, `@supports`). A bare `div` inside `@media { }` at top level
+// still matches every `<div>` in the module. Exclude `@keyframes` — its
+// `from`/`to`/`0%` children are not element selectors.
+function isEffectivelyTopLevel(node) {
+	let parent = node.parent;
+	while (parent && parent.type === 'atrule') {
+		if (KEYFRAME_ATRULES.has(parent.name.toLowerCase())) {
+			return false;
+		}
+		parent = parent.parent;
+	}
+	return Boolean(parent) && parent.type === 'root';
+}
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkRules((ruleNode) => {
+			if (!isEffectivelyTopLevel(ruleNode)) {
+				return;
+			}
+
+			const selectors = ruleNode.selector.split(',').map((s) => s.trim());
+
+			for (const selector of selectors) {
+				if (isInsideGlobal(selector)) {
+					continue;
+				}
+
+				if (isBareElement(selector)) {
+					stylelint.utils.report({
+						message: messages.unexpected(selector),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+					continue;
+				}
+
+				// Check combined selectors part-by-part. Only flag when the compound
+				// has NO class/id anchor — `.container > div` is already scoped, but
+				// `div + span` at root affects every matching descendant in the module.
+				if (/[\s>+~]/.test(selector) && !/[.#]/.test(selector)) {
+					const parts = splitOnCombinators(selector);
+					for (const part of parts) {
+						if (isPartBareElement(part)) {
+							stylelint.utils.report({
+								message: messages.unexpectedInCompound(part.split(':')[0], selector),
+								node: ruleNode,
+								result,
+								ruleName,
+							});
+						}
+					}
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-deep-nesting.js

@@ -0,0 +1,97 @@
+/**
+ * Stylelint rule: local/no-deep-nesting
+ *
+ * Prevents deep nesting in CSS modules (max 3 levels).
+ * Deep nesting creates specificity wars and hard-to-override styles.
+ *
+ * BAD:
+ *   .container { .wrapper { .inner { .content { } } } }  // 4 levels
+ *
+ * GOOD:
+ *   .container { }
+ *   .containerWrapper { }
+ *   .containerContent { }
+ *
+ * Allowed nesting (pseudo-classes/elements):
+ *   .button { &:hover { } &::before { } }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-deep-nesting';
+const DEFAULT_MAX_DEPTH = 3;
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	tooDeep: (depth, max) =>
+		`Nesting depth ${depth} exceeds maximum of ${max}. Flatten selectors for CSS modules.`,
+});
+
+function isPseudoSelector(selector) {
+	return /^&?:/.test(selector.trim());
+}
+
+function isParentReference(selector) {
+	return /^&[.#[]/.test(selector.trim());
+}
+
+function countNestingDepth(rule, depth = 0) {
+	const selector = rule.selector || '';
+
+	// Don't count pseudo-selectors or parent references toward depth
+	if (isPseudoSelector(selector) || isParentReference(selector)) {
+		// Still check children
+		let maxChildDepth = depth;
+		rule.walkRules?.((child) => {
+			const childDepth = countNestingDepth(child, depth);
+			maxChildDepth = Math.max(maxChildDepth, childDepth);
+		});
+		return maxChildDepth;
+	}
+
+	const currentDepth = depth + 1;
+	let maxDepth = currentDepth;
+
+	rule.walkRules?.((child) => {
+		const childDepth = countNestingDepth(child, currentDepth);
+		maxDepth = Math.max(maxDepth, childDepth);
+	});
+
+	return maxDepth;
+}
+
+const rule = (primaryOption, secondaryOptions) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		const maxDepth =
+			secondaryOptions && Number.isInteger(secondaryOptions.maxDepth)
+				? secondaryOptions.maxDepth
+				: DEFAULT_MAX_DEPTH;
+
+		root.walkRules((ruleNode) => {
+			// Only check top-level rules
+			if (ruleNode.parent.type !== 'root' && ruleNode.parent.type !== 'atrule') {
+				return;
+			}
+
+			const depth = countNestingDepth(ruleNode);
+
+			if (depth > maxDepth) {
+				stylelint.utils.report({
+					message: messages.tooDeep(depth, maxDepth),
+					node: ruleNode,
+					result,
+					ruleName,
+				});
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-id-selectors.js

@@ -0,0 +1,55 @@
+/**
+ * Stylelint rule: local/no-id-selectors
+ *
+ * Prevents ID selectors in CSS modules.
+ * IDs create high specificity, can't be reused, and defeat CSS modules scoping purpose.
+ *
+ * BAD:
+ *   #myComponent { }
+ *   .container #header { }
+ *
+ * GOOD:
+ *   .myComponent { }
+ *   .containerHeader { }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-id-selectors';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	unexpected: (selector) =>
+		`ID selector "${selector}" not allowed in CSS modules. Use class selector instead.`,
+});
+
+const ID_PATTERN = /#[a-zA-Z_][a-zA-Z0-9_-]*/g;
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkRules((ruleNode) => {
+			const selector = ruleNode.selector;
+			const matches = selector.match(ID_PATTERN);
+
+			if (matches) {
+				for (const match of matches) {
+					stylelint.utils.report({
+						message: messages.unexpected(match),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/prefer-css-variables.js

@@ -0,0 +1,168 @@
+/**
+ * Stylelint rule: local/prefer-css-variables
+ *
+ * Warns on hardcoded colors in CSS modules.
+ * Use CSS variables for consistent theming.
+ *
+ * BAD:
+ *   color: #ff0000;
+ *   background: rgb(255, 0, 0);
+ *   border: 1px solid blue;
+ *
+ * GOOD:
+ *   color: var(--l1-foreground);
+ *   background: var(--primary-background);
+ *   border: 1px solid var(--l2-border);
+ *
+ * ALLOWED:
+ *   transparent, inherit, currentColor, none
+ *   Colors inside var() fallbacks
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/prefer-css-variables';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	hardcodedColor: (value, property) =>
+		`Hardcoded color "${value}" in "${property}". Use a semantic CSS variable instead (e.g., var(--l1-foreground), var(--primary-background)). See docs/css-modules-guide.md.`,
+});
+
+const COLOR_PROPERTIES = new Set([
+	'color',
+	'background',
+	'background-color',
+	'background-image',
+	'border',
+	'border-color',
+	'border-top',
+	'border-right',
+	'border-bottom',
+	'border-left',
+	'border-top-color',
+	'border-right-color',
+	'border-bottom-color',
+	'border-left-color',
+	'border-image',
+	'border-image-source',
+	'outline',
+	'outline-color',
+	'box-shadow',
+	'text-shadow',
+	'fill',
+	'stroke',
+	'caret-color',
+	'text-decoration-color',
+	'column-rule-color',
+	'mask',
+	'mask-image',
+]);
+
+const ALLOWED_VALUES = new Set([
+	'transparent',
+	'inherit',
+	'initial',
+	'unset',
+	'currentcolor',
+	'none',
+	'auto',
+]);
+
+const HEX_PATTERN = /#[0-9a-fA-F]{3,8}\b/;
+const RGB_PATTERN = /rgba?\s*\([^)]+\)/i;
+const HSL_PATTERN = /hsla?\s*\([^)]+\)/i;
+const NAMED_COLOR_PATTERN =
+	/\b(red|blue|green|yellow|orange|purple|pink|black|white|gray|grey|cyan|magenta|brown|navy|teal|olive|maroon|lime|aqua|fuchsia|silver)\b/i;
+
+// Strip balanced `fn(...)` sections (e.g. `var(...)`, `url(...)`) from value.
+// Handles nested parens by counting depth.
+function stripBalancedFn(value, fnName) {
+	const needle = `${fnName}(`;
+	let out = '';
+	let i = 0;
+	while (i < value.length) {
+		if (value.startsWith(needle, i)) {
+			let depth = 1;
+			i += needle.length;
+			while (i < value.length && depth > 0) {
+				const ch = value[i];
+				if (ch === '(') {
+					depth++;
+				} else if (ch === ')') {
+					depth--;
+				}
+				i++;
+			}
+		} else {
+			out += value[i];
+			i++;
+		}
+	}
+	return out;
+}
+
+function containsHardcodedColor(value) {
+	// Strip url(...) first — paths/fragments may contain hex-like or color-named substrings
+	let scanned = value.includes('url(') ? stripBalancedFn(value, 'url') : value;
+
+	// Strip var(...) — color tokens inside var fallbacks are allowed
+	if (scanned.includes('var(')) {
+		scanned = stripBalancedFn(scanned, 'var');
+		if (!scanned.trim()) {
+			return null;
+		}
+	}
+
+	const lower = scanned.toLowerCase();
+	if (ALLOWED_VALUES.has(lower)) {
+		return null;
+	}
+
+	if (HEX_PATTERN.test(scanned)) {
+		return scanned.match(HEX_PATTERN)[0];
+	}
+	if (RGB_PATTERN.test(scanned)) {
+		return scanned.match(RGB_PATTERN)[0];
+	}
+	if (HSL_PATTERN.test(scanned)) {
+		return scanned.match(HSL_PATTERN)[0];
+	}
+	if (NAMED_COLOR_PATTERN.test(scanned)) {
+		return scanned.match(NAMED_COLOR_PATTERN)[0];
+	}
+
+	return null;
+}
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkDecls((decl) => {
+			const prop = decl.prop.toLowerCase();
+
+			if (!COLOR_PROPERTIES.has(prop)) {
+				return;
+			}
+
+			const hardcodedColor = containsHardcodedColor(decl.value);
+
+			if (hardcodedColor) {
+				stylelint.utils.report({
+					message: messages.hardcodedColor(hardcodedColor, decl.prop),
+					node: decl,
+					result,
+					ruleName,
+				});
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/vite.config.ts

@@ -82,20 +82,11 @@ export default defineConfig(({ mode }): UserConfig => {
 	];
 
 	if (env.VITE_SENTRY_AUTH_TOKEN) {
-		// Refuse to upload sourcemaps without an explicit version.
-		if (!env.VITE_VERSION) {
-			throw new Error(
-				'VITE_VERSION must be set to upload sourcemaps to Sentry; refusing to upload without a matching release.',
-			);
-		}
 		plugins.push(
 			sentryVitePlugin({
 				authToken: env.VITE_SENTRY_AUTH_TOKEN,
 				org: env.VITE_SENTRY_ORG,
 				project: env.VITE_SENTRY_PROJECT_ID,
-				// Pin the sourcemap-upload release to the same value injected as
-				// process.env.VERSION so uploaded sourcemaps resolve. Ref: platform-pod#2393
-				release: { name: env.VITE_VERSION },
 			}),
 		);
 	}
@@ -164,8 +155,6 @@ export default defineConfig(({ mode }): UserConfig => {
 			'process.env.TUNNEL_URL': JSON.stringify(env.VITE_TUNNEL_URL),
 			'process.env.TUNNEL_DOMAIN': JSON.stringify(env.VITE_TUNNEL_DOMAIN),
 			'process.env.DOCS_BASE_URL': JSON.stringify(env.VITE_DOCS_BASE_URL),
-			'process.env.ENVIRONMENT': JSON.stringify(env.VITE_ENVIRONMENT),
-			'process.env.VERSION': JSON.stringify(env.VITE_VERSION),
 		},
 		// In production, use relative paths so assets work with any base path injected by the backend.
 		// In dev, use the configured base path for proper HMR and routing.

go.mod

@@ -43,7 +43,7 @@ require (
 	github.com/openfga/api/proto v0.0.0-20260319214821-f153694bfc20
 	github.com/openfga/language/pkg/go v0.2.1
 	github.com/opentracing/opentracing-go v1.2.0
-	github.com/perses/spec v0.1.2
+	github.com/perses/perses v0.53.1
 	github.com/pkg/errors v0.9.1
 	github.com/prometheus/alertmanager v0.31.1
 	github.com/prometheus/client_golang v1.23.2
@@ -138,8 +138,9 @@ require (
 	github.com/huandu/go-clone v1.7.3 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/muhlemmer/gu v0.3.1 // indirect
 	github.com/ncruces/go-strftime v1.0.0 // indirect
-	github.com/nxadm/tail v1.4.11 // indirect
+	github.com/perses/common v0.30.2 // indirect
 	github.com/prometheus/client_golang/exp v0.0.0-20260325093428-d8591d0db856 // indirect
 	github.com/puzpuzpuz/xsync/v4 v4.4.0 // indirect
 	github.com/redis/go-redis/extra/rediscmd/v9 v9.15.1 // indirect
@@ -150,6 +151,8 @@ require (
 	github.com/ugorji/go/codec v1.3.0 // indirect
 	github.com/uptrace/opentelemetry-go-extra/otelsql v0.3.2 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
+	github.com/zitadel/oidc/v3 v3.45.4 // indirect
+	github.com/zitadel/schema v1.3.2 // indirect
 	go.opentelemetry.io/collector/client v1.54.0 // indirect
 	go.opentelemetry.io/collector/config/configoptional v1.50.0 // indirect
 	go.opentelemetry.io/collector/config/configretry v1.50.0 // indirect

go.sum

@@ -332,7 +332,6 @@ github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHk
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
 github.com/fsnotify/fsnotify v1.5.4/go.mod h1:OVB6XrOHzAwXMpEM7uPOzcehqUV2UqJxmVXmkdnm1bU=
-github.com/fsnotify/fsnotify v1.6.0/go.mod h1:sl3t1tCWJFWoRz9R8WJCbQihKKwmorjAbSClcnxKAGw=
 github.com/fsnotify/fsnotify v1.9.0 h1:2Ml+OJNzbYCTzsxtv8vKSFD9PbJjmhYF14k/jKC7S9k=
 github.com/fsnotify/fsnotify v1.9.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
 github.com/fxamacker/cbor/v2 v2.9.0 h1:NpKPmjDBgUfBms6tr6JZkTHtfFGcMKsw3eGcmD/sapM=
@@ -833,6 +832,8 @@ github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjY
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee h1:W5t00kpgFdJifH4BDsTlE89Zl93FEloxaWZfGcifgq8=
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe/go.mod h1:wL8QJuTMNUDYhXwkmfOly8iTdp5TEcJFWZD2D7SIkUc=
+github.com/muhlemmer/gu v0.3.1 h1:7EAqmFrW7n3hETvuAdmFmn4hS8W+z3LgKtrnow+YzNM=
+github.com/muhlemmer/gu v0.3.1/go.mod h1:YHtHR+gxM+bKEIIs7Hmi9sPT3ZDUvTN/i88wQpZkrdM=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 h1:C3w9PqII01/Oq1c1nUAm88MOHcQC9l5mIlSMApZMrHA=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
 github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
@@ -842,6 +843,8 @@ github.com/natefinch/wrap v0.2.0 h1:IXzc/pw5KqxJv55gV0lSOcKHYuEZPGbQrOOXr/bamRk=
 github.com/natefinch/wrap v0.2.0/go.mod h1:6gMHlAl12DwYEfKP3TkuykYUfLSEAvHw67itm4/KAS8=
 github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
 github.com/ncruces/go-strftime v1.0.0/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/nexucis/lamenv v0.5.2 h1:tK/u3XGhCq9qIoVNcXsK9LZb8fKopm0A5weqSRvHd7M=
+github.com/nexucis/lamenv v0.5.2/go.mod h1:HusJm6ltmmT7FMG8A750mOLuME6SHCsr2iFYxp5fFi0=
 github.com/npillmayer/nestext v0.1.3/go.mod h1:h2lrijH8jpicr25dFY+oAJLyzlya6jhnuG+zWp9L0Uk=
 github.com/nxadm/tail v1.4.11 h1:8feyoE3OzPrcshW5/MJ4sGESc5cqmGkGCWlco4l0bqY=
 github.com/nxadm/tail v1.4.11/go.mod h1:OTaG3NK980DZzxbRq6lEuzgU+mug70nY11sMd4JXXHc=
@@ -904,8 +907,10 @@ github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCko
 github.com/pelletier/go-toml/v2 v2.0.5/go.mod h1:OMHamSCAODeSsVrwwvcJOaoN0LIUIaFVNZzmWyNfXas=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
 github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
-github.com/perses/spec v0.1.2 h1:yGoygcR3ZusuGDCmRMwsVXCMvMwi1qZndKV6NYNreEw=
-github.com/perses/spec v0.1.2/go.mod h1:NoGI5jmGwRdkdPgyYSZJTBL4/Py+dqIPKS2QV8NOvGE=
+github.com/perses/common v0.30.2 h1:RAiVxUpX76lTCb4X7pfcXSvYdXQmZwKi4oDKAEO//u0=
+github.com/perses/common v0.30.2/go.mod h1:DFtur1QPah2/ChXbKKhw7djYdwNgz27s5fPKpiK0Xao=
+github.com/perses/perses v0.53.1 h1:9VY/6p9QWrZwPSV7qiwTMSOsgcB37Lb1AXKT0ORXc6I=
+github.com/perses/perses v0.53.1/go.mod h1:ro8fsgBkHYOdrL/MV+fdP9mflKzYCy/+gcbxiaReI/A=
 github.com/pierrec/lz4 v2.0.5+incompatible/go.mod h1:pdkljMzZIN41W+lC3N2tnIh5sFi+IEE17M5jbnwPHcY=
 github.com/pierrec/lz4/v4 v4.1.25 h1:kocOqRffaIbU5djlIBr7Wh+cx82C0vtFb0fOurZHqD0=
 github.com/pierrec/lz4/v4 v4.1.25/go.mod h1:EoQMVJgeeEOMsCqCzqFm2O0cJvljX2nGZjcRIPL34O4=
@@ -1166,6 +1171,10 @@ github.com/zeebo/assert v1.3.1 h1:vukIABvugfNMZMQO1ABsyQDJDTVQbn+LWSMy1ol1h6A=
 github.com/zeebo/assert v1.3.1/go.mod h1:Pq9JiuJQpG8JLJdtkwrJESF0Foym2/D9XMU5ciN/wJ0=
 github.com/zeebo/xxh3 v1.0.2 h1:xZmwmqxHZA8AI603jOQ0tMqmBr9lPeFwGg6d+xy9DC0=
 github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaDcA=
+github.com/zitadel/oidc/v3 v3.45.4 h1:GKyWaPRVQ8sCu9XgJ3NgNGtG52FzwVJpzXjIUG2+YrI=
+github.com/zitadel/oidc/v3 v3.45.4/go.mod h1:XALmFXS9/kSom9B6uWin1yJ2WTI/E4Ti5aXJdewAVEs=
+github.com/zitadel/schema v1.3.2 h1:gfJvt7dOMfTmxzhscZ9KkapKo3Nei3B6cAxjav+lyjI=
+github.com/zitadel/schema v1.3.2/go.mod h1:IZmdfF9Wu62Zu6tJJTH3UsArevs3Y4smfJIj3L8fzxw=
 go.etcd.io/etcd/api/v3 v3.5.4/go.mod h1:5GB2vv4A4AOn3yk7MftYGHkUfGtDHnEraIjym4dYz5A=
 go.etcd.io/etcd/client/pkg/v3 v3.5.4/go.mod h1:IJHfcCEKxYu1Os13ZdwCwIUTUVGYTSAM3YSwc9/Ac1g=
 go.etcd.io/etcd/client/v2 v2.305.4/go.mod h1:Ud+VUwIi9/uQHOMA+4ekToJ12lTxlv0zB/+DHwTGEbU=
@@ -1610,7 +1619,6 @@ golang.org/x/sys v0.0.0-20220328115105-d36c6a25d886/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220412211240-33da011f77ad/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220502124256-b6088ccd6cba/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=

pkg/apiserver/signozapiserver/cloudintegration.go

@@ -151,26 +151,6 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services", handler.New(
-		provider.authzMiddleware.AdminAccess(provider.cloudIntegrationHandler.ListAccountServicesMetadata),
-		handler.OpenAPIDef{
-			ID:                  "ListAccountServicesMetadata",
-			Tags:                []string{"cloudintegration"},
-			Summary:             "List account services metadata",
-			Description:         "This endpoint lists the services metadata for the specified account and cloud provider",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(citypes.GettableServicesMetadata),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-		},
-	)).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
 	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/services/{service_id}", handler.New(
 		provider.authzMiddleware.AdminAccess(provider.cloudIntegrationHandler.GetService),
 		handler.OpenAPIDef{

pkg/modules/cloudintegration/cloudintegration.go

@@ -75,7 +75,6 @@ type Handler interface {
 	UpdateAccount(http.ResponseWriter, *http.Request)
 	DisconnectAccount(http.ResponseWriter, *http.Request)
 	ListServicesMetadata(http.ResponseWriter, *http.Request)
-	ListAccountServicesMetadata(http.ResponseWriter, *http.Request)
 	GetService(http.ResponseWriter, *http.Request)
 	UpdateService(http.ResponseWriter, *http.Request)
 	AgentCheckIn(http.ResponseWriter, *http.Request)

pkg/modules/cloudintegration/implcloudintegration/handler.go

@@ -276,44 +276,6 @@ func (handler *handler) ListServicesMetadata(rw http.ResponseWriter, r *http.Req
 	render.Success(rw, http.StatusOK, cloudintegrationtypes.NewGettableServicesMetadata(services))
 }
 
-func (handler *handler) ListAccountServicesMetadata(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	provider, err := cloudintegrationtypes.NewCloudProvider(mux.Vars(r)["cloud_provider"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	accountID, err := valuer.NewUUID(mux.Vars(r)["id"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	// check if integration account exists and is not removed.
-	_, err = handler.module.GetConnectedAccount(ctx, valuer.MustNewUUID(claims.OrgID), accountID, provider)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	services, err := handler.module.ListServicesMetadata(ctx, valuer.MustNewUUID(claims.OrgID), provider, accountID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, cloudintegrationtypes.NewGettableServicesMetadata(services))
-}
-
 func (handler *handler) GetService(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()
@@ -478,3 +440,4 @@ func (handler *handler) AgentCheckIn(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusOK, cloudintegrationtypes.NewGettableAgentCheckIn(provider, resp))
 }
+

pkg/types/cloudintegrationtypes/integration_dashboard.go

@@ -18,16 +18,14 @@ var (
 type StorableIntegrationDashboard struct {
 	bun.BaseModel `bun:"table:integration_dashboard"`
 
-	ID          string                           `json:"id" bun:"id,pk,type:text" required:"true"`
-	DashboardID string                           `json:"dashboardId" bun:"dashboard_id,type:text" required:"true"`
-	Provider    IntegrationDashboardProviderType `json:"provider" bun:"provider,type:text" required:"true"`
-	Slug        string                           `json:"slug" bun:"slug,type:text" required:"true"`
-	CreatedAt   time.Time                        `json:"createdAt" bun:"created_at" required:"true"`
-	UpdatedAt   time.Time                        `json:"updatedAt" bun:"updated_at" required:"true"`
+	ID          string                           `bun:"id,pk,type:text"`
+	DashboardID string                           `bun:"dashboard_id,type:text"`
+	Provider    IntegrationDashboardProviderType `bun:"provider,type:text"`
+	Slug        string                           `bun:"slug,type:text"`
+	CreatedAt   time.Time                        `bun:"created_at"`
+	UpdatedAt   time.Time                        `bun:"updated_at"`
 }
 
-type IntegrationDashboard = StorableIntegrationDashboard
-
 func NewStorableIntegrationDashboard(dashboardID string, provider IntegrationDashboardProviderType, slug string) *StorableIntegrationDashboard {
 	now := time.Now()
 	return &StorableIntegrationDashboard{

pkg/types/cloudintegrationtypes/service.go

@@ -50,18 +50,10 @@ type ListServicesMetadataParams struct {
 // Service represents a cloud integration service with its definition,
 // cloud integration service is non nil only when the service entry exists in DB with ANY config (enabled or disabled).
 type Service struct {
-	ServiceDefinitionMetadata
-	Overview                string                   `json:"overview" required:"true"` // markdown
-	ServiceAssets           ServiceAssets            `json:"assets" required:"true"`
-	SupportedSignals        SupportedSignals         `json:"supportedSignals" required:"true"`
-	DataCollected           DataCollected            `json:"dataCollected" required:"true"`
+	ServiceDefinition
 	CloudIntegrationService *CloudIntegrationService `json:"cloudIntegrationService" required:"true" nullable:"true"`
 }
 
-type ServiceAssets struct {
-	Dashboards []*ServiceDashboard `json:"dashboards" required:"true" nullable:"false"`
-}
-
 type GetServiceParams struct {
 	CloudIntegrationID valuer.UUID `query:"cloud_integration_id" required:"false"`
 }
@@ -129,12 +121,6 @@ type Dashboard struct {
 	Definition  dashboardtypes.StorableDashboardData `json:"definition,omitempty"`
 }
 
-type ServiceDashboard struct {
-	Title                string                `json:"title" required:"true"`
-	Description          string                `json:"description" required:"true"`
-	IntegrationDashboard *IntegrationDashboard `json:"integrationDashboard,omitempty" required:"false"`
-}
-
 func NewCloudIntegrationService(serviceID ServiceID, cloudIntegrationID valuer.UUID, provider CloudProviderType, config *ServiceConfig) (*CloudIntegrationService, error) {
 	switch provider {
 	case CloudProviderTypeAWS:
@@ -178,41 +164,11 @@ func NewServiceMetadata(definition ServiceDefinition, enabled bool) *ServiceMeta
 	}
 }
 
-func NewService(provider CloudProviderType, def *ServiceDefinition, integrationService *CloudIntegrationService, integrationDashboards []*StorableIntegrationDashboard) *Service {
-	service := &Service{
-		ServiceDefinitionMetadata: def.ServiceDefinitionMetadata,
-		Overview:                  def.Overview,
-		SupportedSignals:          def.SupportedSignals,
-		DataCollected:             def.DataCollected,
-		CloudIntegrationService:   integrationService,
-		ServiceAssets:             ServiceAssets{Dashboards: make([]*ServiceDashboard, 0, len(def.Assets.Dashboards))},
+func NewService(def ServiceDefinition, storableService *CloudIntegrationService) *Service {
+	return &Service{
+		ServiceDefinition:       def,
+		CloudIntegrationService: storableService,
 	}
-
-	integrationDashboardsMap := make(map[string]*IntegrationDashboard)
-	for _, d := range integrationDashboards {
-		integrationDashboardsMap[d.Slug] = d
-	}
-
-	for _, d := range def.Assets.Dashboards {
-		dashboard := &ServiceDashboard{
-			Title:       d.Title,
-			Description: d.Description,
-		}
-
-		if integrationService != nil {
-			slug := CloudIntegrationDashboardSlug(provider, integrationService.Type, d.ID)
-
-			if integrationDashboard, exists := integrationDashboardsMap[slug]; exists {
-				if integrationDashboard != nil {
-					dashboard.IntegrationDashboard = integrationDashboard
-				}
-			}
-		}
-
-		service.ServiceAssets.Dashboards = append(service.ServiceAssets.Dashboards, dashboard)
-	}
-
-	return service
 }
 
 func NewGettableServicesMetadata(services []*ServiceMetadata) *GettableServicesMetadata {

pkg/types/dashboardtypes/perses_dashboard.go

@@ -12,7 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 	"k8s.io/apimachinery/pkg/util/validation"
 )
 

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -9,9 +9,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -44,7 +43,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 					},
 					Queries: []Query{
 						{
-							Kind: QueryKind(qb.RequestTypeTimeSeries),
+							Kind: "TimeSeriesQuery",
 							Spec: QuerySpec{
 								Plugin: QueryPlugin{
 									Kind: QueryKindPromQL,

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -8,12 +8,12 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/perses/spec/go/common"
-	"github.com/perses/spec/go/dashboard"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 )
 
 // DashboardSpec is the SigNoz dashboard v2 spec shape. It mirrors
-// dashboard.Spec (Perses) field-for-field, except every common.Plugin
+// v1.DashboardSpec (Perses) field-for-field, except every common.Plugin
 // occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
 // per-site discriminated oneOf.
 type DashboardSpec struct {
@@ -24,7 +24,7 @@ type DashboardSpec struct {
 	Layouts         []Layout                   `json:"layouts"`
 	Duration        common.DurationString      `json:"duration"`
 	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
-	Links           []dashboard.Link           `json:"links,omitempty"`
+	Links           []v1.Link                  `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -44,7 +44,7 @@ const basePostableJSON = `{
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
 						{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "A",
 								"signal": "metrics",
@@ -67,7 +67,7 @@ const basePostableJSON = `{
 					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
 					"queries": [
 						{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "X",
 								"signal": "metrics",
@@ -184,7 +184,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
 					"queries": [{
-						"kind": "time_series",
+						"kind": "TimeSeriesQuery",
 						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A",
 							"signal": "logs",
@@ -218,7 +218,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
 					"queries": [{
-						"kind": "time_series",
+						"kind": "TimeSeriesQuery",
 						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A",
 							"signal": "metrics",
@@ -275,7 +275,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 			"op": "replace",
 			"path": "/spec/panels/p1/spec/queries/0",
 			"value": {
-				"kind": "time_series",
+				"kind": "TimeSeriesQuery",
 				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 					"name": "B",
 					"signal": "metrics",
@@ -344,7 +344,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 					"spec": {
 						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
 						"queries": [{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "A",
 								"signal": "logs",
@@ -508,7 +508,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"kind": "Panel",
 				"spec": {
 					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		}]`).Apply(base)
@@ -534,11 +534,11 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A", "signal": "metrics",
 							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
 						}}}},
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "B", "signal": "metrics",
 							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
 						}}}}

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -133,21 +133,6 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 			}`,
 			wantContain: "NonExistentPanel",
 		},
-		{
-			name: "unknown panel envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Row",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown panel kind",
-		},
 		{
 			name: "unknown query plugin",
 			data: `{
@@ -157,7 +142,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {"kind": "FakeQueryPlugin", "spec": {}}
 								}
@@ -169,48 +154,6 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 			}`,
 			wantContain: "FakeQueryPlugin",
 		},
-		{
-			name: "unknown query envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "TimeSeriesQuery",
-								"spec": {
-									"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown query kind",
-		},
-		{
-			name: "empty query envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "",
-								"spec": {
-									"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown query kind",
-		},
 		{
 			name: "unknown variable plugin",
 			data: `{
@@ -303,7 +246,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/PromQLQuery",
@@ -381,7 +324,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/PromQLQuery",
@@ -446,7 +389,7 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 								"spec": {}
 							},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/BuilderQuery",
@@ -677,8 +620,8 @@ func TestInvalidatePanelWithMultipleDirectQueries(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}}},
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "B", "signal": "metrics"}}}}
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}}},
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "B", "signal": "metrics"}}}}
 					]
 				}
 			}
@@ -795,7 +738,7 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -843,7 +786,7 @@ func TestNumberPanelDefaults(t *testing.T) {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -904,7 +847,7 @@ func TestStorageRoundTrip(t *testing.T) {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			},
 			"p2": {
@@ -914,7 +857,7 @@ func TestStorageRoundTrip(t *testing.T) {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -1119,7 +1062,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
+				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
 			}}},
 			"layouts": []
 		}`)
@@ -1128,7 +1071,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
+				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
 					"queries": [{"type": "` + subType + `", "spec": ` + subSpec + `}]
 				}}}}]
 			}}},