chore(metric-reduction): add module implementation

cmd/community/server.go

@@ -29,6 +29,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
+	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule/implmetricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -119,6 +121,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ dashboard.Module, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
+		func(_ sqlstore.SQLStore, _ telemetrystore.TelemetryStore, _ dashboard.Module, _ queryparser.QueryParser, _ licensing.Licensing, _ flagger.Flagger, _ telemetrytypes.MetadataStore, _ factory.ProviderSettings, _ int) metricreductionrule.Module {
+			return implmetricreductionrule.NewModule()
+		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, nil, nil))
 		},

cmd/enterprise/server.go

@@ -24,6 +24,7 @@ import (
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration/implcloudprovider"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
+	eeimplmetricreductionrule "github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
@@ -46,6 +47,7 @@ import (
 	pkgcloudintegration "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -182,6 +184,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
+		func(sqlStore sqlstore.SQLStore, ts telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, lic licensing.Licensing, flgr pkgflagger.Flagger, ms telemetrytypes.MetadataStore, ps factory.ProviderSettings, threads int) metricreductionrule.Module {
+			return eeimplmetricreductionrule.NewModule(sqlStore, ts, dashboardModule, queryParser, lic, flgr, ms, ps, threads)
+		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))
 		},

docs/api/openapi.yml

@@ -5138,6 +5138,221 @@ components:
       required:
       - rules
       type: object
+    MetricreductionruletypesAffectedAsset:
+      properties:
+        id:
+          type: string
+        impactedLabels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        name:
+          type: string
+        type:
+          $ref: '#/components/schemas/MetricreductionruletypesAssetType'
+        widget:
+          $ref: '#/components/schemas/MetricreductionruletypesAffectedWidget'
+      required:
+      - type
+      - id
+      - name
+      - impactedLabels
+      type: object
+    MetricreductionruletypesAffectedWidget:
+      properties:
+        id:
+          type: string
+        name:
+          type: string
+      required:
+      - id
+      - name
+      type: object
+    MetricreductionruletypesAssetType:
+      enum:
+      - dashboard
+      - alert_rule
+      type: string
+    MetricreductionruletypesGettableReductionRule:
+      properties:
+        active:
+          type: boolean
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        effectiveFrom:
+          format: date-time
+          type: string
+        id:
+          type: string
+        ingestedSeries:
+          minimum: 0
+          type: integer
+        labels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        matchType:
+          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
+        metricName:
+          type: string
+        reductionPercent:
+          format: double
+          type: number
+        retainedSeries:
+          minimum: 0
+          type: integer
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      required:
+      - id
+      - metricName
+      - matchType
+      - labels
+      - effectiveFrom
+      - active
+      - ingestedSeries
+      - retainedSeries
+      - reductionPercent
+      type: object
+    MetricreductionruletypesGettableReductionRulePreview:
+      properties:
+        affectedAssets:
+          items:
+            $ref: '#/components/schemas/MetricreductionruletypesAffectedAsset'
+          nullable: true
+          type: array
+        currentRetainedSeries:
+          minimum: 0
+          type: integer
+        droppedLabels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        effectiveFrom:
+          format: date-time
+          type: string
+        ingestedSeries:
+          minimum: 0
+          type: integer
+        reductionPercent:
+          format: double
+          type: number
+        retainedSeries:
+          minimum: 0
+          type: integer
+      required:
+      - ingestedSeries
+      - currentRetainedSeries
+      - retainedSeries
+      - reductionPercent
+      - droppedLabels
+      - affectedAssets
+      - effectiveFrom
+      type: object
+    MetricreductionruletypesGettableReductionRuleStats:
+      properties:
+        estimatedMonthlySavingsUsd:
+          format: double
+          type: number
+        ingestedSeries:
+          minimum: 0
+          type: integer
+        retainedSeries:
+          minimum: 0
+          type: integer
+      required:
+      - ingestedSeries
+      - retainedSeries
+      - estimatedMonthlySavingsUsd
+      type: object
+    MetricreductionruletypesGettableReductionRules:
+      properties:
+        rules:
+          items:
+            $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
+          nullable: true
+          type: array
+        total:
+          type: integer
+      required:
+      - rules
+      - total
+      type: object
+    MetricreductionruletypesMatchType:
+      enum:
+      - drop
+      - keep
+      type: string
+    MetricreductionruletypesOrder:
+      enum:
+      - asc
+      - desc
+      type: string
+    MetricreductionruletypesPostableReductionRule:
+      properties:
+        labels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        matchType:
+          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
+        metricName:
+          type: string
+      required:
+      - metricName
+      - matchType
+      - labels
+      type: object
+    MetricreductionruletypesPostableReductionRulePreview:
+      properties:
+        labels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        lookbackMs:
+          format: int64
+          type: integer
+        matchType:
+          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
+        metricName:
+          type: string
+      required:
+      - metricName
+      - matchType
+      - labels
+      type: object
+    MetricreductionruletypesReductionRuleOrderBy:
+      enum:
+      - metric
+      - ingested_volume
+      - reduced_volume
+      - reduction
+      - last_updated
+      type: string
+    MetricreductionruletypesUpdatableReductionRule:
+      properties:
+        labels:
+          items:
+            type: string
+          nullable: true
+          type: array
+        matchType:
+          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
+      required:
+      - matchType
+      - labels
+      type: object
     MetricsexplorertypesInspectMetricsRequest:
       properties:
         end:
@@ -15624,6 +15839,566 @@ paths:
       summary: Liveness check
       tags:
       - health
+  /api/v2/metric_reduction_rules:
+    get:
+      deprecated: false
+      description: Returns active metric volume-control (label reduction) rules.
+      operationId: ListMetricReductionRules
+      parameters:
+      - in: query
+        name: orderBy
+        schema:
+          $ref: '#/components/schemas/MetricreductionruletypesReductionRuleOrderBy'
+      - in: query
+        name: order
+        schema:
+          $ref: '#/components/schemas/MetricreductionruletypesOrder'
+      - in: query
+        name: search
+        schema:
+          type: string
+      - in: query
+        name: metricName
+        schema:
+          type: string
+      - in: query
+        name: offset
+        schema:
+          type: integer
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRules'
+                  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
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List metric reduction rules
+      tags:
+      - metrics
+    post:
+      deprecated: false
+      description: Creates a volume-control rule for a metric and returns it with
+        its id; fails if the metric already has a rule.
+      operationId: CreateMetricReductionRule
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetricreductionruletypesPostableReductionRule'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "409":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Conflict
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Create a metric reduction rule
+      tags:
+      - metrics
+  /api/v2/metric_reduction_rules/{id}:
+    delete:
+      deprecated: false
+      description: Deletes a volume-control rule by its id.
+      operationId: DeleteMetricReductionRuleByID
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Delete a metric reduction rule by id
+      tags:
+      - metrics
+    get:
+      deprecated: false
+      description: Returns a single volume-control rule by its id.
+      operationId: GetMetricReductionRuleByID
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
+                  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
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get a metric reduction rule by id
+      tags:
+      - metrics
+    put:
+      deprecated: false
+      description: Updates the match type and labels of a volume-control rule by its
+        id; the metric name is immutable.
+      operationId: UpdateMetricReductionRuleByID
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetricreductionruletypesUpdatableReductionRule'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update a metric reduction rule by id
+      tags:
+      - metrics
+  /api/v2/metric_reduction_rules/preview:
+    post:
+      deprecated: false
+      description: Estimates the series reduction and related-asset impact of a candidate
+        volume-control rule without persisting it.
+      operationId: PreviewMetricReductionRule
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetricreductionruletypesPostableReductionRulePreview'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRulePreview'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Preview a metric reduction rule
+      tags:
+      - metrics
+  /api/v2/metric_reduction_rules/stats:
+    get:
+      deprecated: false
+      description: Returns total ingested vs retained series and the estimated monthly
+        savings across all volume-control rules.
+      operationId: GetMetricReductionRuleStats
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRuleStats'
+                  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
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Metric reduction stats
+      tags:
+      - metrics
+  /api/v2/metric_reduction_rules/timeseries:
+    get:
+      deprecated: false
+      description: Returns ingested vs retained series over time across all volume-control
+        rules (hourly buckets), in the query-range time-series response shape.
+      operationId: GetMetricReductionRuleTimeseries
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
+                  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
+        "451":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unavailable For Legal Reasons
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+        "501":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Implemented
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Metric reduction volume over time
+      tags:
+      - metrics
   /api/v2/metrics:
     get:
       deprecated: false

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -0,0 +1,543 @@
+package implmetricreductionrule
+
+import (
+	"context"
+	"slices"
+	"time"
+
+	sqlbuilder "github.com/huandu/go-sqlbuilder"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
+)
+
+var (
+	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
+	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
+	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName
+)
+
+const (
+	timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
+	sampleBucketMilli     = int64(60 * time.Second / time.Millisecond)
+)
+
+type volumeRow struct {
+	MetricName string
+	Ingested   uint64
+	Reduced    uint64
+}
+
+type volumePoint struct {
+	TimestampMs int64
+	Ingested    uint64
+	Reduced     uint64
+}
+
+type clickhouse struct {
+	telemetryStore telemetrystore.TelemetryStore
+	threads        int
+}
+
+func newClickhouse(telemetryStore telemetrystore.TelemetryStore, threads int) *clickhouse {
+	return &clickhouse{telemetryStore: telemetryStore, threads: threads}
+}
+
+func (c *clickhouse) withThreads(ctx context.Context) context.Context {
+	return ctxtypes.SetClickhouseMaxThreads(ctx, c.threads)
+}
+
+func floorToTimeSeriesBucket(ms int64) int64 {
+	return ms - (ms % timeSeriesBucketMilli)
+}
+
+func strictEffectiveFrom(sb *sqlbuilder.SelectBuilder, metricNames []string, effectiveFrom map[string]int64) string {
+	names := make([]any, 0, len(metricNames))
+	froms := make([]any, 0, len(metricNames))
+	for _, name := range metricNames {
+		names = append(names, name)
+		froms = append(froms, effectiveFrom[name])
+	}
+	return "unix_milli >= transform(metric_name, " + sb.Var(names) + ", " + sb.Var(froms) + ", 0)"
+}
+
+func (c *clickhouse) Sync(ctx context.Context, metricName string, labels []string, matchType string, effectiveFromMs int64, deleted bool, updatedAt time.Time) error {
+	ctx = c.withThreads(ctx)
+
+	ib := sqlbuilder.NewInsertBuilder()
+	ib.InsertInto(reductionRulesTable)
+	ib.Cols("metric_name", "labels", "match_type", "effective_from_unix_milli", "deleted", "updated_at")
+	ib.Values(metricName, labels, matchType, effectiveFromMs, deleted, updatedAt)
+
+	query, args := ib.BuildWithFlavor(sqlbuilder.ClickHouse)
+	if err := c.telemetryStore.ClickhouseDB().Exec(ctx, query, args...); err != nil {
+		return errors.WrapInternalf(err, errors.CodeInternal, "failed to sync reduction rule to clickhouse")
+	}
+	return nil
+}
+
+func (c *clickhouse) AttributeKeys(ctx context.Context, metricName string, startMs, endMs int64) ([]string, error) {
+	ctx = c.withThreads(ctx)
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("attr_name")
+	sb.Distinct()
+	sb.From(metadataTable)
+	sb.Where(
+		sb.E("metric_name", metricName),
+		"NOT startsWith(attr_name, '__')",
+		sb.GE("last_reported_unix_milli", startMs),
+		sb.LE("first_reported_unix_milli", endMs),
+	)
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to fetch metric attribute keys")
+	}
+	defer rows.Close()
+
+	keys := make([]string, 0)
+	for rows.Next() {
+		var key string
+		if err := rows.Scan(&key); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan attribute key")
+		}
+		keys = append(keys, key)
+	}
+	return keys, rows.Err()
+}
+
+func (c *clickhouse) EstimateCardinality(ctx context.Context, metricName string, keptLabels []string, startMs, endMs int64) (uint64, uint64, error) {
+	ctx = c.withThreads(ctx)
+	startMs = floorToTimeSeriesBucket(startMs)
+
+	sb := sqlbuilder.NewSelectBuilder()
+
+	reducedExpr := "1"
+	if len(keptLabels) > 0 {
+		reducedExpr = "uniq(("
+		for i, label := range keptLabels {
+			if i > 0 {
+				reducedExpr += ", "
+			}
+			reducedExpr += "JSONExtractString(labels, " + sb.Var(label) + ")"
+		}
+		reducedExpr += "))"
+	}
+
+	sb.Select("uniq(fingerprint)", reducedExpr)
+	sb.From(bufferSeriesTable)
+	conds := []string{
+		sb.E("metric_name", metricName),
+		sb.GE("unix_milli", startMs),
+		sb.LT("unix_milli", endMs),
+		sb.E("is_reduced", false),
+	}
+	sb.Where(conds...)
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	var current, reduced uint64
+	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&current, &reduced); err != nil {
+		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to estimate reduction impact")
+	}
+	if len(keptLabels) == 0 && current == 0 {
+		reduced = 0
+	}
+	if reduced > current {
+		reduced = current
+	}
+	return current, reduced, nil
+}
+
+// VolumeByMetric returns ingested vs reduced series counts per metric.
+func (c *clickhouse) VolumeByMetric(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]volumeRow, error) {
+	if len(metricNames) == 0 {
+		return map[string]volumeRow{}, nil
+	}
+	ctx = c.withThreads(ctx)
+
+	ingested, err := c.ingestedSeriesCount(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	reduced, err := c.reducedSeriesCount(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	out := make(map[string]volumeRow, len(metricNames))
+	for metricName, count := range ingested {
+		out[metricName] = volumeRow{MetricName: metricName, Ingested: count, Reduced: out[metricName].Reduced}
+	}
+	for metricName, count := range reduced {
+		row := out[metricName]
+		row.MetricName = metricName
+		row.Reduced = count
+		out[metricName] = row
+	}
+	return out, nil
+}
+
+// ingestedSeriesCount counts distinct raw fingerprints per metric from the samples buffer over the
+// window.
+func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("metric_name", "uniq(fingerprint)")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	conds := []string{
+		sb.In("metric_name", names...),
+		sb.GE("unix_milli", startMs),
+		sb.LT("unix_milli", endMs),
+	}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("metric_name")
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to count ingested series")
+	}
+	defer rows.Close()
+
+	out := make(map[string]uint64, len(metricNames))
+	for rows.Next() {
+		var (
+			metricName string
+			count      uint64
+		)
+		if err := rows.Scan(&metricName, &count); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series count")
+		}
+		out[metricName] = count
+	}
+	return out, rows.Err()
+}
+
+// reducedSeriesCount counts distinct reduced_fingerprints per metric, summed across the two 60s
+// reduced sample tables.
+func (c *clickhouse) reducedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
+	out := make(map[string]uint64, len(metricNames))
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
+		if err != nil {
+			return nil, err
+		}
+		for metricName, count := range counts {
+			out[metricName] += count
+		}
+	}
+	return out, nil
+}
+
+func (c *clickhouse) reducedSeriesCountForTable(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("metric_name", "uniq(reduced_fingerprint)")
+	sb.From(table)
+	conds := []string{
+		sb.In("metric_name", names...),
+		sb.GE("unix_milli", startMs),
+		sb.LT("unix_milli", endMs),
+	}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("metric_name")
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to count reduced series")
+	}
+	defer rows.Close()
+
+	out := make(map[string]uint64, len(metricNames))
+	for rows.Next() {
+		var (
+			metricName string
+			count      uint64
+		)
+		if err := rows.Scan(&metricName, &count); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series count")
+		}
+		out[metricName] = count
+	}
+	return out, rows.Err()
+}
+
+// RankByVolume ranks metrics by ingested/reduced series volume. Like VolumeByMetric, the counts read
+// the samples tables with a strict effective_from gate; the reduced count sums distinct
+// reduced_fingerprints across the two 60s reduced sample tables.
+func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, orderBy metricreductionruletypes.ReductionRuleOrderBy, order metricreductionruletypes.Order, startMs, endMs int64, offset, limit int) ([]volumeRow, error) {
+	if len(metricNames) == 0 {
+		return []volumeRow{}, nil
+	}
+	ctx = c.withThreads(ctx)
+
+	orderExpr := "ingested"
+	switch orderBy {
+	case metricreductionruletypes.OrderByReducedVolume:
+		orderExpr = "reduced"
+	case metricreductionruletypes.OrderByReduction:
+		orderExpr = "if(ingested = 0, 0, (toFloat64(ingested) - toFloat64(reduced)) / toFloat64(ingested))"
+	}
+	direction := "ASC"
+	if order == metricreductionruletypes.OrderDesc {
+		direction = "DESC"
+	}
+
+	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
+	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
+	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedSumTableName
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", "ifNull(d.cnt, 0) AS reduced")
+	sb.From("(SELECT arrayJoin(" + sb.Var(metricNames) + ") AS metric_name) AS base")
+	sb.JoinWithOption(
+		sqlbuilder.LeftJoin,
+		"(SELECT metric_name, uniq(fingerprint) AS cnt FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
+		"base.metric_name = i.metric_name",
+	)
+	// Reduced series are spread across two type-specific tables; union the per-table distinct
+	// reduced_fingerprints and sum per metric (a metric only lands in the table matching its type).
+	sb.JoinWithOption(
+		sqlbuilder.LeftJoin,
+		"(SELECT metric_name, sum(cnt) AS cnt FROM ("+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedLast+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+			" UNION ALL "+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedSum+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+			") GROUP BY metric_name) AS d",
+		"base.metric_name = d.metric_name",
+	)
+	sb.OrderBy(orderExpr + " " + direction)
+	if limit > 0 {
+		sb.Limit(limit).Offset(offset)
+	}
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to rank reduction rules by volume")
+	}
+	defer rows.Close()
+
+	out := make([]volumeRow, 0, len(metricNames))
+	for rows.Next() {
+		var row volumeRow
+		if err := rows.Scan(&row.MetricName, &row.Ingested, &row.Reduced); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan volume row")
+		}
+		out = append(out, row)
+	}
+	return out, rows.Err()
+}
+
+func (c *clickhouse) SampleVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, uint64, error) {
+	if len(metricNames) == 0 {
+		return 0, 0, nil
+	}
+	ctx = c.withThreads(ctx)
+
+	ingested, err := c.countRawSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return 0, 0, err
+	}
+
+	last, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return 0, 0, err
+	}
+	sum, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return 0, 0, err
+	}
+
+	return ingested, min(last+sum, ingested), nil
+}
+
+func (c *clickhouse) countRawSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("count()")
+	sb.From(table)
+	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	var count uint64
+	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
+		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count ingested samples")
+	}
+	return count, nil
+}
+
+func (c *clickhouse) countReducedSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	// Reduced tables key the series on reduced_fingerprint (not fingerprint); dedupe ReplacingMergeTree recomputes.
+	sb.Select("uniq(reduced_fingerprint, unix_milli)")
+	sb.From(table)
+	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	var count uint64
+	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
+		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count reduced samples")
+	}
+	return count, nil
+}
+
+// SeriesTimeseries returns ingested vs reduced series per 60s bucket from the samples tables, gated
+// to each metric's strict effective_from (see strictEffectiveFrom).
+func (c *clickhouse) SeriesTimeseries(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
+	if len(metricNames) == 0 {
+		return []volumePoint{}, nil
+	}
+	ctx = c.withThreads(ctx)
+
+	ingested, err := c.ingestedSeriesByBucket(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	reduced, err := c.reducedSeriesByBucket(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	return mergeVolumePoints(ingested, reduced), nil
+}
+
+func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
+	buckets := make(map[int64]struct{}, len(ingested))
+	for ts := range ingested {
+		buckets[ts] = struct{}{}
+	}
+	for ts := range reduced {
+		buckets[ts] = struct{}{}
+	}
+	timestamps := make([]int64, 0, len(buckets))
+	for ts := range buckets {
+		timestamps = append(timestamps, ts)
+	}
+	slices.Sort(timestamps)
+
+	points := make([]volumePoint, 0, len(timestamps))
+	for _, ts := range timestamps {
+		points = append(points, volumePoint{
+			TimestampMs: ts,
+			Ingested:    ingested[ts],
+			Reduced:     reduced[ts],
+		})
+	}
+	return points
+}
+
+// ingestedSeriesByBucket counts distinct raw fingerprints per 60s bucket from the samples buffer.
+func (c *clickhouse) ingestedSeriesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	bucketExpr := "intDiv(unix_milli, " + sb.Var(sampleBucketMilli) + ") * " + sb.Var(sampleBucketMilli) + " AS bucket"
+	sb.Select(bucketExpr, "uniq(fingerprint)")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("bucket")
+
+	return c.scanBuckets(ctx, sb)
+}
+
+// reducedSeriesByBucket counts distinct reduced_fingerprints per 60s bucket, summed across the two
+// reduced sample tables (a metric only lands in the table matching its type, so per-bucket sums are
+// exact).
+func (c *clickhouse) reducedSeriesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
+	out := make(map[int64]uint64)
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+		names := make([]any, len(metricNames))
+		for i, name := range metricNames {
+			names[i] = name
+		}
+
+		sb := sqlbuilder.NewSelectBuilder()
+		bucketExpr := "intDiv(unix_milli, " + sb.Var(sampleBucketMilli) + ") * " + sb.Var(sampleBucketMilli) + " AS bucket"
+		sb.Select(bucketExpr, "uniq(reduced_fingerprint)")
+		sb.From(telemetrymetrics.DBName + "." + table)
+		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+		if len(effectiveFrom) > 0 {
+			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+		}
+		sb.Where(conds...)
+		sb.GroupBy("bucket")
+
+		counts, err := c.scanBuckets(ctx, sb)
+		if err != nil {
+			return nil, err
+		}
+		for ts, count := range counts {
+			out[ts] += count
+		}
+	}
+	return out, nil
+}
+
+func (c *clickhouse) scanBuckets(ctx context.Context, sb *sqlbuilder.SelectBuilder) (map[int64]uint64, error) {
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to bucket series by time")
+	}
+	defer rows.Close()
+
+	out := make(map[int64]uint64)
+	for rows.Next() {
+		var (
+			ts    int64
+			count uint64
+		)
+		if err := rows.Scan(&ts, &count); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series bucket")
+		}
+		out[ts] = count
+	}
+	return out, rows.Err()
+}

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -0,0 +1,544 @@
+package implmetricreductionrule
+
+import (
+	"context"
+	"log/slog"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/flagger"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/dashboard"
+	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
+	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/featuretypes"
+	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
+	"github.com/SigNoz/signoz/pkg/types/metrictypes"
+	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+const (
+	// effectiveFromMargin delays effective_from so the collector picks up the synced rule before it
+	// goes live; it must be >= the collector's rule-refresh interval (see signoz-otel-collector#839).
+	effectiveFromMargin    = 5 * time.Minute
+	defaultPreviewLookback = 24 * time.Hour
+
+	pricePerMillionSamplesUSD = 0.1
+	monthDuration             = 30 * 24 * time.Hour
+)
+
+type module struct {
+	store         metricreductionruletypes.Store
+	ch            *clickhouse
+	dashboard     dashboard.Module
+	ruleStore     ruletypes.RuleStore
+	licensing     licensing.Licensing
+	flagger       flagger.Flagger
+	metadataStore telemetrytypes.MetadataStore
+	logger        *slog.Logger
+}
+
+func NewModule(sqlStore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, licensing licensing.Licensing, flagger flagger.Flagger, metadataStore telemetrytypes.MetadataStore, providerSettings factory.ProviderSettings, threads int) metricreductionrule.Module {
+	scoped := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule")
+	return &module{
+		store:         NewStore(sqlStore),
+		ch:            newClickhouse(telemetryStore, threads),
+		dashboard:     dashboardModule,
+		ruleStore:     sqlrulestore.NewRuleStore(sqlStore, queryParser, providerSettings),
+		licensing:     licensing,
+		flagger:       flagger,
+		metadataStore: metadataStore,
+		logger:        scoped.Logger(),
+	}
+}
+
+func (m *module) checkAccess(ctx context.Context, orgID valuer.UUID) error {
+	if !m.flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, featuretypes.NewFlaggerEvaluationContext(orgID)) {
+		return errors.Newf(errors.TypeUnsupported, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupported, "metric volume control is not enabled")
+	}
+	if _, err := m.licensing.GetActive(ctx, orgID); err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "metric volume control requires a valid license").WithAdditional(err.Error())
+	}
+	return nil
+}
+
+func (m *module) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) (*metricreductionruletypes.GettableReductionRules, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+	if err := params.Validate(); err != nil {
+		return nil, err
+	}
+
+	now := time.Now()
+	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	endMs := now.UnixMilli()
+
+	switch params.OrderBy {
+	case metricreductionruletypes.OrderByMetricName, metricreductionruletypes.OrderByLastUpdated:
+		return m.listSortedByColumn(ctx, orgID, params, startMs, endMs)
+	default:
+		return m.listSortedByVolume(ctx, orgID, params, startMs, endMs)
+	}
+}
+
+func (m *module) listSortedByColumn(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
+	domainRules, total, err := m.store.List(ctx, orgID, params)
+	if err != nil {
+		return nil, err
+	}
+
+	metricNames := make([]string, len(domainRules))
+	effectiveFrom := make(map[string]int64, len(domainRules))
+	for i, rule := range domainRules {
+		metricNames[i] = rule.MetricName
+		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
+	}
+	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(domainRules))
+	for _, rule := range domainRules {
+		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName]))
+	}
+
+	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
+}
+
+func (m *module) listSortedByVolume(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
+	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{Search: params.Search, MetricName: params.MetricName})
+	if err != nil {
+		return nil, err
+	}
+	if total == 0 {
+		return &metricreductionruletypes.GettableReductionRules{Rules: []metricreductionruletypes.GettableReductionRule{}, Total: 0}, nil
+	}
+
+	metricNames := make([]string, len(allRules))
+	effectiveFrom := make(map[string]int64, len(allRules))
+	ruleByMetric := make(map[string]*metricreductionruletypes.ReductionRule, len(allRules))
+	for i, rule := range allRules {
+		metricNames[i] = rule.MetricName
+		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
+		ruleByMetric[rule.MetricName] = rule
+	}
+
+	ranked, err := m.ch.RankByVolume(ctx, metricNames, effectiveFrom, params.OrderBy, params.Order, startMs, endMs, params.Offset, params.Limit)
+	if err != nil {
+		return nil, err
+	}
+
+	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(ranked))
+	for _, row := range ranked {
+		rule, ok := ruleByMetric[row.MetricName]
+		if !ok {
+			continue
+		}
+		rules = append(rules, withVolume(toGettableReductionRule(rule), row))
+	}
+
+	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
+}
+
+func (m *module) Create(ctx context.Context, orgID valuer.UUID, userEmail string, req *metricreductionruletypes.PostableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+	if err := req.Validate(); err != nil {
+		return nil, err
+	}
+	if err := m.validateMetricForReduction(ctx, orgID, req.MetricName); err != nil {
+		return nil, err
+	}
+	now := time.Now()
+	rule := metricreductionruletypes.NewReductionRule(orgID, req.MetricName, req.MatchType, req.Labels, now.Add(effectiveFromMargin), userEmail)
+
+	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := m.store.Create(ctx, rule); err != nil {
+			return err
+		}
+		return m.ch.Sync(ctx, rule.MetricName, rule.Labels, rule.MatchType.StringValue(), rule.EffectiveFrom.UnixMilli(), false, rule.UpdatedAt)
+	}); err != nil {
+		return nil, err
+	}
+
+	gettable := toGettableReductionRule(rule)
+	return &gettable, nil
+}
+
+func (m *module) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.GettableReductionRule, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+	rule, err := m.store.GetByID(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	gettable := toGettableReductionRule(rule)
+	return &gettable, nil
+}
+
+func (m *module) UpdateByID(ctx context.Context, orgID valuer.UUID, userEmail string, id valuer.UUID, req *metricreductionruletypes.UpdatableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+	existing, err := m.store.GetByID(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	if err := req.Validate(); err != nil {
+		return nil, err
+	}
+
+	now := time.Now()
+	existing.MatchType = req.MatchType
+	existing.Labels = metricreductionruletypes.LabelList(req.Labels)
+	existing.EffectiveFrom = now.Add(effectiveFromMargin)
+	existing.UpdatedAt = now
+	existing.UpdatedBy = userEmail
+
+	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := m.store.Upsert(ctx, existing); err != nil {
+			return err
+		}
+		return m.ch.Sync(ctx, existing.MetricName, existing.Labels, existing.MatchType.StringValue(), existing.EffectiveFrom.UnixMilli(), false, existing.UpdatedAt)
+	}); err != nil {
+		return nil, err
+	}
+
+	gettable := toGettableReductionRule(existing)
+	return &gettable, nil
+}
+
+func (m *module) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return err
+	}
+	rule, err := m.store.GetByID(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	now := time.Now()
+	effectiveFromMs := now.Add(effectiveFromMargin).UnixMilli()
+	return m.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := m.store.DeleteByID(ctx, orgID, id); err != nil {
+			return err
+		}
+		return m.ch.Sync(ctx, rule.MetricName, []string{}, metricreductionruletypes.MatchTypeDrop.StringValue(), effectiveFromMs, true, now)
+	})
+}
+
+func (m *module) Preview(ctx context.Context, orgID valuer.UUID, req *metricreductionruletypes.PostableReductionRulePreview) (*metricreductionruletypes.GettableReductionRulePreview, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+	if err := req.Validate(); err != nil {
+		return nil, err
+	}
+	if err := m.validateMetricForReduction(ctx, orgID, req.MetricName); err != nil {
+		return nil, err
+	}
+	lookback := time.Duration(req.LookbackMs) * time.Millisecond
+	if lookback <= 0 {
+		lookback = defaultPreviewLookback
+	}
+	now := time.Now()
+	startMs := now.Add(-lookback).UnixMilli()
+	endMs := now.UnixMilli()
+	current, reduced, reductionPercent, dropped, err := m.estimateVolume(ctx, req.MetricName, req.MatchType, req.Labels, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	// Baseline is what the metric keeps today (its current rule, or raw if none) so the preview reads
+	// as current -> proposed.
+	currentReduced := current
+	if existing, gerr := m.store.Get(ctx, orgID, req.MetricName); gerr == nil {
+		if _, existingReduced, _, _, eerr := m.estimateVolume(ctx, req.MetricName, existing.MatchType, existing.Labels, startMs, endMs); eerr == nil {
+			currentReduced = existingReduced
+		}
+	}
+
+	return &metricreductionruletypes.GettableReductionRulePreview{
+		IngestedSeries:        current,
+		CurrentRetainedSeries: currentReduced,
+		RetainedSeries:        reduced,
+		ReductionPercent:      reductionPercent,
+		DroppedLabels:         dropped,
+		AffectedAssets:        m.relatedAssetImpact(ctx, orgID, req.MetricName, dropped),
+		EffectiveFrom:         now.Add(effectiveFromMargin),
+	}, nil
+}
+
+func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreductionruletypes.GettableReductionRuleStats, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+
+	now := time.Now()
+	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	endMs := now.UnixMilli()
+
+	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
+	if err != nil {
+		return nil, err
+	}
+	if total == 0 {
+		return &metricreductionruletypes.GettableReductionRuleStats{}, nil
+	}
+
+	metricNames := make([]string, len(allRules))
+	effectiveFrom := make(map[string]int64, len(allRules))
+	for i, rule := range allRules {
+		metricNames[i] = rule.MetricName
+		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
+	}
+
+	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+	var ingestedSeries, reducedSeries uint64
+	for _, volume := range volumes {
+		ingestedSeries += volume.Ingested
+		reducedSeries += volume.Reduced
+	}
+
+	ingestedSamples, reducedSamples, err := m.ch.SampleVolume(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	return &metricreductionruletypes.GettableReductionRuleStats{
+		IngestedSeries:             ingestedSeries,
+		RetainedSeries:             reducedSeries,
+		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ingestedSamples, reducedSamples, startMs, endMs),
+	}, nil
+}
+
+// monthlySavingsUSD extrapolates the windowed sample reduction to a monthly figure at the per-sample
+// list price. Ingested is gated to effective_from upstream, so pre-activation hours don't inflate it.
+func monthlySavingsUSD(ingestedSamples, reducedSamples uint64, startMs, endMs int64) float64 {
+	if reducedSamples >= ingestedSamples || endMs <= startMs {
+		return 0
+	}
+	savedSamples := float64(ingestedSamples - reducedSamples)
+	monthlySamples := savedSamples * float64(monthDuration.Milliseconds()) / float64(endMs-startMs)
+	return monthlySamples / 1_000_000 * pricePerMillionSamplesUSD
+}
+
+func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuildertypesv5.QueryRangeResponse, error) {
+	if err := m.checkAccess(ctx, orgID); err != nil {
+		return nil, err
+	}
+
+	now := time.Now()
+	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	endMs := now.UnixMilli()
+
+	allRules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
+	if err != nil {
+		return nil, err
+	}
+	metricNames := make([]string, len(allRules))
+	effectiveFrom := make(map[string]int64, len(allRules))
+	for i, rule := range allRules {
+		metricNames[i] = rule.MetricName
+		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
+	}
+
+	points, err := m.ch.SeriesTimeseries(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	return buildVolumeTimeseries(points), nil
+}
+
+func buildVolumeTimeseries(points []volumePoint) *querybuildertypesv5.QueryRangeResponse {
+	ingested := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
+	reduced := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
+	for _, point := range points {
+		ingested = append(ingested, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Ingested)})
+		reduced = append(reduced, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Reduced)})
+	}
+
+	return &querybuildertypesv5.QueryRangeResponse{
+		Type: querybuildertypesv5.RequestTypeTimeSeries,
+		Data: querybuildertypesv5.QueryData{
+			Results: []any{
+				&querybuildertypesv5.TimeSeriesData{
+					QueryName: "reduction_volume",
+					Aggregations: []*querybuildertypesv5.AggregationBucket{
+						{
+							Series: []*querybuildertypesv5.TimeSeries{
+								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "ingested"}}, Values: ingested},
+								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "retained"}}, Values: reduced},
+							},
+						},
+					},
+				},
+			},
+		},
+	}
+}
+
+func (m *module) validateMetricForReduction(ctx context.Context, orgID valuer.UUID, metricName string) error {
+	now := time.Now()
+	startTs := uint64(now.Add(-defaultPreviewLookback).UnixMilli())
+	endTs := uint64(now.UnixMilli())
+
+	_, types, _, err := m.metadataStore.FetchTemporalityAndTypeMulti(ctx, orgID, startTs, endTs, metricName)
+	if err != nil {
+		return err
+	}
+
+	metricType, ok := types[metricName]
+	if !ok || metricType == metrictypes.UnspecifiedType {
+		return errors.NewNotFoundf(errors.CodeNotFound, "metric not found: %q", metricName)
+	}
+	if metricType == metrictypes.ExpHistogramType {
+		return errors.Newf(errors.TypeInvalidInput, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupportedMetricType,
+			"exponential histogram metrics cannot be reduced in v1")
+	}
+	return nil
+}
+
+func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metricName string, dropped []string) []metricreductionruletypes.AffectedAsset {
+	affected := make([]metricreductionruletypes.AffectedAsset, 0)
+	droppedSet := make(map[string]struct{}, len(dropped))
+	for _, label := range dropped {
+		droppedSet[label] = struct{}{}
+	}
+
+	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
+		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
+	} else {
+		for _, item := range dashboards[metricName] {
+			usedLabels := append(splitCSV(item["group_by"]), splitCSV(item["filter_by"])...)
+			affected = append(affected, metricreductionruletypes.AffectedAsset{
+				Type:           metricreductionruletypes.AssetTypeDashboard,
+				ID:             item["dashboard_id"],
+				Name:           item["dashboard_name"],
+				Widget:         &metricreductionruletypes.AffectedWidget{ID: item["widget_id"], Name: item["widget_name"]},
+				ImpactedLabels: intersectLabels(usedLabels, droppedSet),
+			})
+		}
+	}
+
+	if alerts, err := m.ruleStore.GetStoredRulesByMetricName(ctx, orgID.String(), metricName); err != nil {
+		m.logger.WarnContext(ctx, "failed to fetch related alerts for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
+	} else {
+		for _, a := range alerts {
+			affected = append(affected, metricreductionruletypes.AffectedAsset{
+				Type: metricreductionruletypes.AssetTypeAlert,
+				ID:   a.AlertID,
+				Name: a.AlertName,
+			})
+		}
+	}
+
+	return affected
+}
+
+func toGettableReductionRule(rule *metricreductionruletypes.ReductionRule) metricreductionruletypes.GettableReductionRule {
+	return metricreductionruletypes.GettableReductionRule{
+		Identifiable:  rule.Identifiable,
+		TimeAuditable: rule.TimeAuditable,
+		UserAuditable: rule.UserAuditable,
+		MetricName:    rule.MetricName,
+		MatchType:     rule.MatchType,
+		Labels:        rule.Labels,
+		EffectiveFrom: rule.EffectiveFrom,
+		Active:        !rule.EffectiveFrom.After(time.Now()),
+	}
+}
+
+func withVolume(rule metricreductionruletypes.GettableReductionRule, volume volumeRow) metricreductionruletypes.GettableReductionRule {
+	rule.IngestedSeries = volume.Ingested
+	rule.RetainedSeries = volume.Reduced
+	if volume.Ingested > 0 && volume.Reduced <= volume.Ingested {
+		rule.ReductionPercent = (1 - float64(volume.Reduced)/float64(volume.Ingested)) * 100
+	}
+	return rule
+}
+
+func intersectLabels(keys []string, droppedSet map[string]struct{}) []string {
+	seen := make(map[string]struct{})
+	var out []string
+	for _, key := range keys {
+		if _, ok := droppedSet[key]; !ok {
+			continue
+		}
+		if _, dup := seen[key]; dup {
+			continue
+		}
+		seen[key] = struct{}{}
+		out = append(out, key)
+	}
+	return out
+}
+
+func splitCSV(s string) []string {
+	if s == "" {
+		return nil
+	}
+	return strings.Split(s, ",")
+}
+
+func resolveDroppedKept(matchType metricreductionruletypes.MatchType, ruleLabels, keys []string) (dropped, kept []string) {
+	ruleSet := make(map[string]struct{}, len(ruleLabels))
+	for _, l := range ruleLabels {
+		ruleSet[l] = struct{}{}
+	}
+
+	for _, k := range keys {
+		if metricreductionruletypes.IsProtectedLabel(k) {
+			kept = append(kept, k)
+			continue
+		}
+		_, listed := ruleSet[k]
+		drop := listed
+		if matchType == metricreductionruletypes.MatchTypeKeep {
+			drop = !listed
+		}
+		if drop {
+			dropped = append(dropped, k)
+		} else {
+			kept = append(kept, k)
+		}
+	}
+
+	sort.Strings(dropped)
+	sort.Strings(kept)
+	return dropped, kept
+}
+
+func (m *module) estimateVolume(ctx context.Context, metricName string, matchType metricreductionruletypes.MatchType, labels []string, startMs, endMs int64) (current uint64, reduced uint64, reductionPercent float64, dropped []string, err error) {
+	keys, err := m.ch.AttributeKeys(ctx, metricName, startMs, endMs)
+	if err != nil {
+		return 0, 0, 0, nil, err
+	}
+	dropped, kept := resolveDroppedKept(matchType, labels, keys)
+
+	current, reduced, err = m.ch.EstimateCardinality(ctx, metricName, kept, startMs, endMs)
+	if err != nil {
+		return 0, 0, 0, nil, err
+	}
+	if current > 0 && reduced <= current {
+		reductionPercent = (1 - float64(reduced)/float64(current)) * 100
+	}
+	return current, reduced, reductionPercent, dropped, nil
+}

ee/modules/metricreductionrule/implmetricreductionrule/store.go

@@ -0,0 +1,145 @@
+package implmetricreductionrule
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type store struct {
+	sqlstore sqlstore.SQLStore
+}
+
+func NewStore(sqlstore sqlstore.SQLStore) metricreductionruletypes.Store {
+	return &store{sqlstore: sqlstore}
+}
+
+func (s *store) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) ([]*metricreductionruletypes.ReductionRule, int, error) {
+	column := "metric_name"
+	if params.OrderBy == metricreductionruletypes.OrderByLastUpdated {
+		column = "updated_at"
+	}
+	direction := "ASC"
+	if params.Order == metricreductionruletypes.OrderDesc {
+		direction = "DESC"
+	}
+
+	rules := make([]*metricreductionruletypes.ReductionRule, 0)
+	query := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(&rules).
+		Where("org_id = ?", orgID).
+		Order(column + " " + direction)
+	if params.Search != "" {
+		query = query.Where("metric_name LIKE ?", "%"+params.Search+"%")
+	}
+	if params.MetricName != "" {
+		query = query.Where("metric_name = ?", params.MetricName)
+	}
+	if params.Limit > 0 {
+		query = query.Limit(params.Limit).Offset(params.Offset)
+	}
+
+	total, err := query.ScanAndCount(ctx)
+	if err != nil {
+		return nil, 0, err
+	}
+	return rules, total, nil
+}
+
+func (s *store) Get(ctx context.Context, orgID valuer.UUID, metricName string) (*metricreductionruletypes.ReductionRule, error) {
+	rule := new(metricreductionruletypes.ReductionRule)
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(rule).
+		Where("org_id = ?", orgID).
+		Where("metric_name = ?", metricName).
+		Scan(ctx)
+	if err != nil {
+		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found for metric %q", metricName)
+	}
+	return rule, nil
+}
+
+func (s *store) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.ReductionRule, error) {
+	rule := new(metricreductionruletypes.ReductionRule)
+	err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(rule).
+		Where("org_id = ?", orgID).
+		Where("id = ?", id).
+		Scan(ctx)
+	if err != nil {
+		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
+	}
+	return rule, nil
+}
+
+func (s *store) Create(ctx context.Context, rule *metricreductionruletypes.ReductionRule) error {
+	res, err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(rule).
+		On("CONFLICT (org_id, metric_name) DO NOTHING").
+		Exec(ctx)
+	if err != nil {
+		return err
+	}
+
+	rowsAffected, err := res.RowsAffected()
+	if err != nil {
+		return err
+	}
+	if rowsAffected == 0 {
+		return errors.Newf(errors.TypeAlreadyExists, metricreductionruletypes.ErrCodeMetricReductionRuleAlreadyExists,
+			"a reduction rule for metric %q already exists", rule.MetricName)
+	}
+	return nil
+}
+
+func (s *store) Upsert(ctx context.Context, rule *metricreductionruletypes.ReductionRule) error {
+	_, err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewInsert().
+		Model(rule).
+		On("CONFLICT (org_id, metric_name) DO UPDATE").
+		Set("match_type = EXCLUDED.match_type").
+		Set("labels = EXCLUDED.labels").
+		Set("effective_from = EXCLUDED.effective_from").
+		Set("updated_at = EXCLUDED.updated_at").
+		Set("updated_by = EXCLUDED.updated_by").
+		Exec(ctx)
+	return err
+}
+
+func (s *store) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	res, err := s.sqlstore.
+		BunDBCtx(ctx).
+		NewDelete().
+		Model((*metricreductionruletypes.ReductionRule)(nil)).
+		Where("org_id = ?", orgID).
+		Where("id = ?", id).
+		Exec(ctx)
+	if err != nil {
+		return err
+	}
+
+	rowsAffected, err := res.RowsAffected()
+	if err != nil {
+		return err
+	}
+	if rowsAffected == 0 {
+		return errors.Newf(errors.TypeNotFound, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
+	}
+	return nil
+}
+
+func (s *store) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
+	return s.sqlstore.RunInTxCtx(ctx, nil, cb)
+}

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

@@ -107,6 +107,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	metricsReduction := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureEnableMetricsReduction.String()),
+		Active:     metricsReduction,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

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

@@ -18,6 +18,8 @@ import type {
 } from 'react-query';
 
 import type {
+	CreateMetricReductionRule201,
+	DeleteMetricReductionRuleByIDPathParameters,
 	GetMetricAlerts200,
 	GetMetricAlertsParams,
 	GetMetricAttributes200,
@@ -28,22 +30,762 @@ import type {
 	GetMetricHighlightsParams,
 	GetMetricMetadata200,
 	GetMetricMetadataParams,
+	GetMetricReductionRuleByID200,
+	GetMetricReductionRuleByIDPathParameters,
+	GetMetricReductionRuleStats200,
+	GetMetricReductionRuleTimeseries200,
 	GetMetricsOnboardingStatus200,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
 	InspectMetrics200,
+	ListMetricReductionRules200,
+	ListMetricReductionRulesParams,
 	ListMetrics200,
 	ListMetricsParams,
+	MetricreductionruletypesPostableReductionRuleDTO,
+	MetricreductionruletypesPostableReductionRulePreviewDTO,
+	MetricreductionruletypesUpdatableReductionRuleDTO,
 	MetricsexplorertypesInspectMetricsRequestDTO,
 	MetricsexplorertypesStatsRequestDTO,
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
+	PreviewMetricReductionRule200,
 	RenderErrorResponseDTO,
+	UpdateMetricReductionRuleByID200,
+	UpdateMetricReductionRuleByIDPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+/**
+ * Returns active metric volume-control (label reduction) rules.
+ * @summary List metric reduction rules
+ */
+export const listMetricReductionRules = (
+	params?: ListMetricReductionRulesParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListMetricReductionRules200>({
+		url: `/api/v2/metric_reduction_rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListMetricReductionRulesQueryKey = (
+	params?: ListMetricReductionRulesParams,
+) => {
+	return [
+		`/api/v2/metric_reduction_rules`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getListMetricReductionRulesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listMetricReductionRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListMetricReductionRulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listMetricReductionRules>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListMetricReductionRulesQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listMetricReductionRules>>
+	> = ({ signal }) => listMetricReductionRules(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listMetricReductionRules>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListMetricReductionRulesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listMetricReductionRules>>
+>;
+export type ListMetricReductionRulesQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List metric reduction rules
+ */
+
+export function useListMetricReductionRules<
+	TData = Awaited<ReturnType<typeof listMetricReductionRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListMetricReductionRulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listMetricReductionRules>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListMetricReductionRulesQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List metric reduction rules
+ */
+export const invalidateListMetricReductionRules = async (
+	queryClient: QueryClient,
+	params?: ListMetricReductionRulesParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListMetricReductionRulesQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Creates a volume-control rule for a metric and returns it with its id; fails if the metric already has a rule.
+ * @summary Create a metric reduction rule
+ */
+export const createMetricReductionRule = (
+	metricreductionruletypesPostableReductionRuleDTO?: BodyType<MetricreductionruletypesPostableReductionRuleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateMetricReductionRule201>({
+		url: `/api/v2/metric_reduction_rules`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricreductionruletypesPostableReductionRuleDTO,
+		signal,
+	});
+};
+
+export const getCreateMetricReductionRuleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createMetricReductionRule>>,
+		TError,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createMetricReductionRule>>,
+	TError,
+	{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
+	TContext
+> => {
+	const mutationKey = ['createMetricReductionRule'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createMetricReductionRule>>,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createMetricReductionRule(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateMetricReductionRuleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createMetricReductionRule>>
+>;
+export type CreateMetricReductionRuleMutationBody =
+	| BodyType<MetricreductionruletypesPostableReductionRuleDTO>
+	| undefined;
+export type CreateMetricReductionRuleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create a metric reduction rule
+ */
+export const useCreateMetricReductionRule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createMetricReductionRule>>,
+		TError,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createMetricReductionRule>>,
+	TError,
+	{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
+	TContext
+> => {
+	return useMutation(getCreateMetricReductionRuleMutationOptions(options));
+};
+/**
+ * Deletes a volume-control rule by its id.
+ * @summary Delete a metric reduction rule by id
+ */
+export const deleteMetricReductionRuleByID = (
+	{ id }: DeleteMetricReductionRuleByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/metric_reduction_rules/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteMetricReductionRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
+		TError,
+		{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
+	TError,
+	{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteMetricReductionRuleByID'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
+		{ pathParams: DeleteMetricReductionRuleByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteMetricReductionRuleByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteMetricReductionRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>
+>;
+
+export type DeleteMetricReductionRuleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete a metric reduction rule by id
+ */
+export const useDeleteMetricReductionRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
+		TError,
+		{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
+	TError,
+	{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteMetricReductionRuleByIDMutationOptions(options));
+};
+/**
+ * Returns a single volume-control rule by its id.
+ * @summary Get a metric reduction rule by id
+ */
+export const getMetricReductionRuleByID = (
+	{ id }: GetMetricReductionRuleByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricReductionRuleByID200>({
+		url: `/api/v2/metric_reduction_rules/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetMetricReductionRuleByIDQueryKey = ({
+	id,
+}: GetMetricReductionRuleByIDPathParameters) => {
+	return [`/api/v2/metric_reduction_rules/${id}`] as const;
+};
+
+export const getGetMetricReductionRuleByIDQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetMetricReductionRuleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricReductionRuleByIDQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricReductionRuleByID>>
+	> = ({ signal }) => getMetricReductionRuleByID({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricReductionRuleByIDQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricReductionRuleByID>>
+>;
+export type GetMetricReductionRuleByIDQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a metric reduction rule by id
+ */
+
+export function useGetMetricReductionRuleByID<
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetMetricReductionRuleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricReductionRuleByIDQueryOptions(
+		{ id },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get a metric reduction rule by id
+ */
+export const invalidateGetMetricReductionRuleByID = async (
+	queryClient: QueryClient,
+	{ id }: GetMetricReductionRuleByIDPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricReductionRuleByIDQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Updates the match type and labels of a volume-control rule by its id; the metric name is immutable.
+ * @summary Update a metric reduction rule by id
+ */
+export const updateMetricReductionRuleByID = (
+	{ id }: UpdateMetricReductionRuleByIDPathParameters,
+	metricreductionruletypesUpdatableReductionRuleDTO?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateMetricReductionRuleByID200>({
+		url: `/api/v2/metric_reduction_rules/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricreductionruletypesUpdatableReductionRuleDTO,
+		signal,
+	});
+};
+
+export const getUpdateMetricReductionRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
+		TError,
+		{
+			pathParams: UpdateMetricReductionRuleByIDPathParameters;
+			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
+	TError,
+	{
+		pathParams: UpdateMetricReductionRuleByIDPathParameters;
+		data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateMetricReductionRuleByID'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
+		{
+			pathParams: UpdateMetricReductionRuleByIDPathParameters;
+			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateMetricReductionRuleByID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateMetricReductionRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>
+>;
+export type UpdateMetricReductionRuleByIDMutationBody =
+	| BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>
+	| undefined;
+export type UpdateMetricReductionRuleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update a metric reduction rule by id
+ */
+export const useUpdateMetricReductionRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
+		TError,
+		{
+			pathParams: UpdateMetricReductionRuleByIDPathParameters;
+			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
+	TError,
+	{
+		pathParams: UpdateMetricReductionRuleByIDPathParameters;
+		data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateMetricReductionRuleByIDMutationOptions(options));
+};
+/**
+ * Estimates the series reduction and related-asset impact of a candidate volume-control rule without persisting it.
+ * @summary Preview a metric reduction rule
+ */
+export const previewMetricReductionRule = (
+	metricreductionruletypesPostableReductionRulePreviewDTO?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PreviewMetricReductionRule200>({
+		url: `/api/v2/metric_reduction_rules/preview`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricreductionruletypesPostableReductionRulePreviewDTO,
+		signal,
+	});
+};
+
+export const getPreviewMetricReductionRuleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof previewMetricReductionRule>>,
+		TError,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof previewMetricReductionRule>>,
+	TError,
+	{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
+	TContext
+> => {
+	const mutationKey = ['previewMetricReductionRule'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof previewMetricReductionRule>>,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return previewMetricReductionRule(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PreviewMetricReductionRuleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof previewMetricReductionRule>>
+>;
+export type PreviewMetricReductionRuleMutationBody =
+	| BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO>
+	| undefined;
+export type PreviewMetricReductionRuleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Preview a metric reduction rule
+ */
+export const usePreviewMetricReductionRule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof previewMetricReductionRule>>,
+		TError,
+		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof previewMetricReductionRule>>,
+	TError,
+	{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
+	TContext
+> => {
+	return useMutation(getPreviewMetricReductionRuleMutationOptions(options));
+};
+/**
+ * Returns total ingested vs retained series and the estimated monthly savings across all volume-control rules.
+ * @summary Metric reduction stats
+ */
+export const getMetricReductionRuleStats = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetMetricReductionRuleStats200>({
+		url: `/api/v2/metric_reduction_rules/stats`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetMetricReductionRuleStatsQueryKey = () => {
+	return [`/api/v2/metric_reduction_rules/stats`] as const;
+};
+
+export const getGetMetricReductionRuleStatsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricReductionRuleStatsQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricReductionRuleStats>>
+	> = ({ signal }) => getMetricReductionRuleStats(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricReductionRuleStatsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricReductionRuleStats>>
+>;
+export type GetMetricReductionRuleStatsQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Metric reduction stats
+ */
+
+export function useGetMetricReductionRuleStats<
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricReductionRuleStatsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Metric reduction stats
+ */
+export const invalidateGetMetricReductionRuleStats = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricReductionRuleStatsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns ingested vs retained series over time across all volume-control rules (hourly buckets), in the query-range time-series response shape.
+ * @summary Metric reduction volume over time
+ */
+export const getMetricReductionRuleTimeseries = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetMetricReductionRuleTimeseries200>({
+		url: `/api/v2/metric_reduction_rules/timeseries`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetMetricReductionRuleTimeseriesQueryKey = () => {
+	return [`/api/v2/metric_reduction_rules/timeseries`] as const;
+};
+
+export const getGetMetricReductionRuleTimeseriesQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricReductionRuleTimeseriesQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>
+	> = ({ signal }) => getMetricReductionRuleTimeseries(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricReductionRuleTimeseriesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>
+>;
+export type GetMetricReductionRuleTimeseriesQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Metric reduction volume over time
+ */
+
+export function useGetMetricReductionRuleTimeseries<
+	TData = Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricReductionRuleTimeseriesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Metric reduction volume over time
+ */
+export const invalidateGetMetricReductionRuleTimeseries = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricReductionRuleTimeseriesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns a list of distinct metric names within the specified time range
  * @summary List metric names

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

@@ -6689,6 +6689,213 @@ export interface LlmpricingruletypesUpdatableLLMPricingRulesDTO {
 	rules: LlmpricingruletypesUpdatableLLMPricingRuleDTO[] | null;
 }
 
+export enum MetricreductionruletypesAssetTypeDTO {
+	dashboard = 'dashboard',
+	alert_rule = 'alert_rule',
+}
+export interface MetricreductionruletypesAffectedWidgetDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
+export interface MetricreductionruletypesAffectedAssetDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type array,null
+	 */
+	impactedLabels: string[] | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	type: MetricreductionruletypesAssetTypeDTO;
+	widget?: MetricreductionruletypesAffectedWidgetDTO;
+}
+
+export enum MetricreductionruletypesMatchTypeDTO {
+	drop = 'drop',
+	keep = 'keep',
+}
+export interface MetricreductionruletypesGettableReductionRuleDTO {
+	/**
+	 * @type boolean
+	 */
+	active: boolean;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	effectiveFrom: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSeries: number;
+	/**
+	 * @type array,null
+	 */
+	labels: string[] | null;
+	matchType: MetricreductionruletypesMatchTypeDTO;
+	/**
+	 * @type string
+	 */
+	metricName: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	reductionPercent: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	retainedSeries: number;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface MetricreductionruletypesGettableReductionRulePreviewDTO {
+	/**
+	 * @type array,null
+	 */
+	affectedAssets: MetricreductionruletypesAffectedAssetDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	currentRetainedSeries: number;
+	/**
+	 * @type array,null
+	 */
+	droppedLabels: string[] | null;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	effectiveFrom: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSeries: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	reductionPercent: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	retainedSeries: number;
+}
+
+export interface MetricreductionruletypesGettableReductionRuleStatsDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	estimatedMonthlySavingsUsd: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSeries: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	retainedSeries: number;
+}
+
+export interface MetricreductionruletypesGettableReductionRulesDTO {
+	/**
+	 * @type array,null
+	 */
+	rules: MetricreductionruletypesGettableReductionRuleDTO[] | null;
+	/**
+	 * @type integer
+	 */
+	total: number;
+}
+
+export enum MetricreductionruletypesOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export interface MetricreductionruletypesPostableReductionRuleDTO {
+	/**
+	 * @type array,null
+	 */
+	labels: string[] | null;
+	matchType: MetricreductionruletypesMatchTypeDTO;
+	/**
+	 * @type string
+	 */
+	metricName: string;
+}
+
+export interface MetricreductionruletypesPostableReductionRulePreviewDTO {
+	/**
+	 * @type array,null
+	 */
+	labels: string[] | null;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	lookbackMs?: number;
+	matchType: MetricreductionruletypesMatchTypeDTO;
+	/**
+	 * @type string
+	 */
+	metricName: string;
+}
+
+export enum MetricreductionruletypesReductionRuleOrderByDTO {
+	metric = 'metric',
+	ingested_volume = 'ingested_volume',
+	reduced_volume = 'reduced_volume',
+	reduction = 'reduction',
+	last_updated = 'last_updated',
+}
+export interface MetricreductionruletypesUpdatableReductionRuleDTO {
+	/**
+	 * @type array,null
+	 */
+	labels: string[] | null;
+	matchType: MetricreductionruletypesMatchTypeDTO;
+}
+
 export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -10334,6 +10541,102 @@ export type Livez200 = {
 	status: string;
 };
 
+export type ListMetricReductionRulesParams = {
+	/**
+	 * @description undefined
+	 */
+	orderBy?: MetricreductionruletypesReductionRuleOrderByDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: MetricreductionruletypesOrderDTO;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	search?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	metricName?: string;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+};
+
+export type ListMetricReductionRules200 = {
+	data: MetricreductionruletypesGettableReductionRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateMetricReductionRule201 = {
+	data: MetricreductionruletypesGettableReductionRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteMetricReductionRuleByIDPathParameters = {
+	id: string;
+};
+export type GetMetricReductionRuleByIDPathParameters = {
+	id: string;
+};
+export type GetMetricReductionRuleByID200 = {
+	data: MetricreductionruletypesGettableReductionRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateMetricReductionRuleByIDPathParameters = {
+	id: string;
+};
+export type UpdateMetricReductionRuleByID200 = {
+	data: MetricreductionruletypesGettableReductionRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type PreviewMetricReductionRule200 = {
+	data: MetricreductionruletypesGettableReductionRulePreviewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetMetricReductionRuleStats200 = {
+	data: MetricreductionruletypesGettableReductionRuleStatsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetMetricReductionRuleTimeseries200 = {
+	data: Querybuildertypesv5QueryRangeResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListMetricsParams = {
 	/**
 	 * @type integer,null

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

@@ -5,7 +5,6 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
-import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import { Check, Copy } from '@signozhq/icons';
 
@@ -37,16 +36,17 @@ export default function Legend({
 
 	// Search is intrinsic to the right-positioned legend.
 	const searchEnabled = position === LegendPosition.RIGHT;
-	const { width: containerWidth } = useResizeObserver(legendContainerRef);
 
 	const isSingleRow = useMemo(() => {
-		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
+		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
 			return false;
 		}
+		const containerWidth = legendContainerRef.current.clientWidth;
+
 		const totalLegendWidth = items.length * (averageLegendWidth + 16);
 		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
 		return totalRows <= 1;
-	}, [averageLegendWidth, items.length, position, containerWidth]);
+	}, [averageLegendWidth, items.length, position]);
 
 	const visibleLegendItems = useMemo(() => {
 		if (!searchEnabled || !legendSearchQuery.trim()) {

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

@@ -14,11 +14,10 @@ import type {
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import { useCreatePanel } from '../hooks/useCreatePanel';
-import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
 import { useEditableTitle } from './DashboardInfo/useEditableTitle';
@@ -51,8 +50,9 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const { isPickerOpen, openPicker, closePicker, createPanel } =
-		useCreatePanel();
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -108,8 +108,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		openPicker();
-	}, [id, openPicker]);
+		setIsPanelTypeSelectionModalOpen(true);
+	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
 		<section className={styles.dashboardPageToolbarContainer}>
@@ -149,11 +149,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				</div>
 				<VariablesBar dashboard={dashboard} />
 			</div>
-			<PanelTypeSelectionModal
-				open={isPickerOpen}
-				onClose={closePicker}
-				onSelect={createPanel}
-			/>
 		</section>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -20,8 +20,6 @@ interface ConfigPaneProps {
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	/** Switch the panel to another visualization kind. */
-	onChangePanelKind: (kind: PanelKind) => void;
 	/** Panel's resolved series, provided to sections that need them (legend colors). */
 	legendSeries: LegendSeries[];
 	/** Table panel's resolved value columns, for the table-only editors. */
@@ -38,7 +36,6 @@ function ConfigPane({
 	panelKind,
 	spec,
 	onChangeSpec,
-	onChangePanelKind,
 	legendSeries,
 	tableColumns,
 }: ConfigPaneProps): JSX.Element {
@@ -98,8 +95,6 @@ function ConfigPane({
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
 									signal={signal}
-									panelKind={panelKind}
-									onChangePanelKind={onChangePanelKind}
 								/>
 							))}
 						</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss

@@ -1,6 +0,0 @@
-// Matches ConfigPane's `.field` so the switcher lines up with the title/description fields.
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx

@@ -1,54 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { getPanelDefinition } from '../../../Panels/registry';
-import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
-import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
-
-import styles from './PanelTypeSwitcher.module.scss';
-
-interface PanelTypeSwitcherProps {
-	/** The current panel kind (selected value). */
-	panelKind: PanelKind;
-	/** Panel's current datasource — drives the disabled rule. */
-	signal?: TelemetrytypesSignalDTO;
-	onChange: (kind: PanelKind) => void;
-}
-
-/**
- * Visualization-type selector (rendered inside the Visualization section). Types whose
- * supported signals exclude the panel's current datasource are disabled (V1 parity —
- * e.g. List needs logs/traces, not metrics). The datasource is unknown for
- * PromQL/ClickHouse queries, in which case no type is disabled.
- */
-function PanelTypeSwitcher({
-	panelKind,
-	signal,
-	onChange,
-}: PanelTypeSwitcherProps): JSX.Element {
-	const items = PANEL_TYPES.map((type) => {
-		const definition = getPanelDefinition(type.pluginKind as PanelKind);
-		return {
-			value: type.pluginKind,
-			label: type.label,
-			icon: type.icon,
-			disabled:
-				!!signal && !!definition && !definition.supportedSignals.includes(signal),
-		};
-	});
-
-	return (
-		<div className={styles.field}>
-			<Typography.Text>Panel Type</Typography.Text>
-			<ConfigSelect
-				testId="panel-editor-v2-type-switcher"
-				value={panelKind}
-				items={items}
-				onChange={(value): void => onChange(value as PanelKind)}
-			/>
-		</div>
-	);
-}
-
-export default PanelTypeSwitcher;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/__tests__/PanelTypeSwitcher.test.tsx

@@ -1,73 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import PanelTypeSwitcher from '../PanelTypeSwitcher';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(),
-}));
-
-const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
-
-function openDropdown(): void {
-	fireEvent.mouseDown(screen.getByRole('combobox'));
-}
-
-describe('PanelTypeSwitcher', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		// List supports only logs/traces; every other kind also supports metrics.
-		mockGetPanelDefinition.mockImplementation((kind: string) => ({
-			supportedSignals:
-				kind === 'signoz/ListPanel'
-					? ['logs', 'traces']
-					: ['metrics', 'logs', 'traces'],
-		}));
-	});
-
-	it('fires onChange with the chosen plugin kind', () => {
-		const onChange = jest.fn();
-		render(
-			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
-		);
-
-		openDropdown();
-		fireEvent.click(screen.getByText('List'));
-
-		expect(onChange).toHaveBeenCalledWith('signoz/ListPanel');
-	});
-
-	it('disables types whose supported signals exclude the current datasource', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				signal={TelemetrytypesSignalDTO.metrics}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		openDropdown();
-		const disabled = Array.from(
-			document.querySelectorAll('.ant-select-item-option-disabled'),
-		).map((el) => el.textContent);
-
-		// List can't render a metrics query, so it's disabled; Time Series stays enabled.
-		expect(disabled).toContain('List');
-		expect(disabled).not.toContain('Time Series');
-	});
-
-	it('does not disable any type when the datasource is unknown', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		openDropdown();
-		expect(
-			document.querySelectorAll('.ant-select-item-option-disabled'),
-		).toHaveLength(0);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx

@@ -8,7 +8,6 @@ import {
 	type SectionConfig,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
-import type { PanelKind } from '../../../Panels/types/panelKind';
 import type { LegendSeries } from '../../hooks/useLegendSeries';
 import type { TableColumnOption } from '../../hooks/useTableColumns';
 import { resolveSectionEditor } from '../sectionRegistry';
@@ -24,9 +23,6 @@ interface SectionSlotProps {
 	tableColumns: TableColumnOption[];
 	/** Panel's telemetry signal, for editors that fetch field suggestions (List columns). */
 	signal?: TelemetrytypesSignalDTO;
-	/** Current panel kind + switch handler, for the visualization section's type switcher. */
-	panelKind: PanelKind;
-	onChangePanelKind: (kind: PanelKind) => void;
 }
 
 /**
@@ -42,8 +38,6 @@ function SectionSlot({
 	legendSeries,
 	tableColumns,
 	signal,
-	panelKind,
-	onChangePanelKind,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -66,12 +60,7 @@ function SectionSlot({
 		.formatting?.unit;
 
 	return (
-		<SettingsSection
-			title={title}
-			icon={<Icon size={15} />}
-			// Open Visualization by default so the type switcher is visible.
-			defaultOpen={config.kind === 'visualization'}
-		>
+		<SettingsSection title={title} icon={<Icon size={15} />}>
 			<Component
 				value={get(spec)}
 				controls={controls}
@@ -80,8 +69,6 @@ function SectionSlot({
 				yAxisUnit={yAxisUnit}
 				tableColumns={tableColumns}
 				signal={signal}
-				panelKind={panelKind}
-				onChangePanelKind={onChangePanelKind}
 			/>
 		</SettingsSection>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/__tests__/ConfigPane.test.tsx

@@ -22,7 +22,6 @@ function renderConfigPane(
 		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
-		onChangePanelKind: jest.fn(),
 		legendSeries: [],
 		tableColumns: [],
 		...overrides,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSegmented/ConfigSegmented.module.scss

@@ -1,5 +1,5 @@
 .group {
-	width: 100%;
+	width: min(350px, 100%);
 }
 
 .segment {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { Select } from 'antd';
 
 import { SegmentIcon, type SegmentIconName } from '../segmentIcons';
@@ -8,9 +7,7 @@ import styles from './ConfigSelect.module.scss';
 export interface ConfigSelectItem {
 	value: string;
 	label: string;
-	/** A `SegmentIconName` string (resolved to a glyph), or an arbitrary icon node. */
-	icon?: ReactNode;
-	disabled?: boolean;
+	icon?: SegmentIconName;
 }
 
 interface ConfigSelectProps {
@@ -43,14 +40,9 @@ function ConfigSelect({
 			virtual={false}
 			options={items.map((item) => ({
 				value: item.value,
-				disabled: item.disabled,
 				label: item.icon ? (
 					<span className={styles.item}>
-						{typeof item.icon === 'string' ? (
-							<SegmentIcon name={item.icon as SegmentIconName} />
-						) : (
-							item.icon
-						)}
+						<SegmentIcon name={item.icon} />
 						{item.label}
 					</span>
 				) : (

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx

@@ -157,10 +157,6 @@ export interface ErasedSectionDescriptor {
 		// The panel's telemetry signal; read by editors that fetch field-key
 		// suggestions scoped to it (List column picker).
 		signal?: unknown;
-		// Current panel kind + switch handler; read by the visualization section's
-		// type switcher.
-		panelKind?: unknown;
-		onChangePanelKind?: unknown;
 	}>;
 	get: (spec: PanelSpec) => unknown;
 	update: (spec: PanelSpec, value: unknown) => PanelSpec;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.test.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import type { DashboardtypesThresholdWithLabelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
@@ -10,8 +9,8 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard);
-// omits `controls` to exercise the default `label` variant.
+// Stateful harness for flows that depend on the value updating (add/discard). No
+// `controls` is passed, exercising the default `label` variant.
 function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
 	const [value, setValue] = useState<AnyThreshold[]>([]);
 	return (
@@ -34,6 +33,7 @@ describe('ThresholdsSection', () => {
 
 		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 		expect(screen.getByText('High')).toBeInTheDocument();
+		// The editable fields are hidden until the row is edited.
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 	});
 
@@ -54,22 +54,6 @@ describe('ThresholdsSection', () => {
 		]);
 	});
 
-	it('persists an empty-string label when none is provided', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		// Label absent (e.g. a pre-existing spec); spec requires a string, so save
-		// must send '' not undefined.
-		const noLabel = [{ value: 50, color: '#F1575F' }] as AnyThreshold[];
-		render(<ThresholdsSection value={noLabel} onChange={onChange} />);
-
-		await user.click(screen.getByTestId('threshold-edit-0'));
-		await user.click(screen.getByTestId('threshold-save-0'));
-
-		expect(onChange).toHaveBeenCalledWith([
-			{ value: 50, color: '#F1575F', label: '' },
-		]);
-	});
-
 	it('does not commit edits when Discard is clicked', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
@@ -81,6 +65,7 @@ describe('ThresholdsSection', () => {
 		fireEvent.click(screen.getByTestId('threshold-discard-0'));
 
 		expect(onChange).not.toHaveBeenCalled();
+		// Back to view mode.
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 	});
@@ -98,10 +83,11 @@ describe('ThresholdsSection', () => {
 		render(<Harness />);
 
 		fireEvent.click(screen.getByTestId('panel-editor-v2-add-threshold'));
+		// New row opens in edit mode.
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
 
-		// Discarding a never-saved row removes it entirely.
 		fireEvent.click(screen.getByTestId('threshold-discard-0'));
+		// Discarding a never-saved row removes it entirely.
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('threshold-edit-0')).not.toBeInTheDocument();
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
 import type { DashboardtypesThresholdWithLabelDTO } from 'api/generated/services/sigNoz.schemas';
@@ -24,7 +23,10 @@ interface LabelThresholdRowProps {
 	onRemove: () => void;
 }
 
-/** Value + color + label threshold (TimeSeries / Bar): a line drawn on the chart. */
+/**
+ * Value + color + label threshold (TimeSeries / Bar): a line drawn on the chart. Edit
+ * form is color, value, unit, label.
+ */
 function LabelThresholdRow({
 	index,
 	threshold,
@@ -37,11 +39,6 @@ function LabelThresholdRow({
 }: LabelThresholdRowProps): JSX.Element {
 	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
 
-	// Persist an empty-string label when none was entered — the spec requires a string.
-	const handleSave = useCallback((): void => {
-		onSave({ ...draft, label: draft.label ?? '' });
-	}, [onSave, draft]);
-
 	const summary = (
 		<>
 			<span className={styles.viewValue}>
@@ -61,7 +58,7 @@ function LabelThresholdRow({
 			isEditing={isEditing}
 			summary={summary}
 			onEdit={onEdit}
-			onSave={handleSave}
+			onSave={(): void => onSave(draft)}
 			onDiscard={onDiscard}
 			onRemove={onRemove}
 		>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx

@@ -1,50 +1,26 @@
 import { Typography } from '@signozhq/ui/typography';
-import {
-	DashboardtypesTimePreferenceDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
 import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
-import type { PanelKind } from '../../../../Panels/types/panelKind';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';
 
 import styles from './VisualizationSection.module.scss';
 
-type VisualizationSectionProps = SectionEditorProps<'visualization'> & {
-	/** Current panel kind + switch handler, forwarded by SectionSlot for the type switcher. */
-	panelKind?: PanelKind;
-	onChangePanelKind?: (kind: PanelKind) => void;
-	/** Panel's datasource, forwarded by SectionSlot — scopes the switcher's disabled types. */
-	signal?: TelemetrytypesSignalDTO;
-};
-
 /**
- * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
- * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
- * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
- * flag, so a kind only renders — and only writes — the fields its spec supports.
+ * Edits the `visualization` slice: the per-panel time preference (all kinds), bar
+ * stacking (`stackedBarChart`, Bar only), and gap filling (`fillSpans`, TimeSeries
+ * only). Each control is gated by its `controls` flag, so a kind only renders — and only
+ * writes — the visualization fields its spec actually supports.
  */
 function VisualizationSection({
 	value,
 	controls,
 	onChange,
-	panelKind,
-	onChangePanelKind,
-	signal,
-}: VisualizationSectionProps): JSX.Element {
+}: SectionEditorProps<'visualization'>): JSX.Element {
 	return (
 		<>
-			{controls.switchPanelKind && panelKind && onChangePanelKind && (
-				<PanelTypeSwitcher
-					panelKind={panelKind}
-					signal={signal}
-					onChange={onChangePanelKind}
-				/>
-			)}
-
 			{controls.timePreference && (
 				<div className={styles.field}>
 					<Typography.Text>Panel time preference</Typography.Text>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -4,14 +4,6 @@ import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.s
 
 import VisualizationSection from '../VisualizationSection';
 
-// The type switcher resolves each kind's supported signals; stub it so the test
-// doesn't pull the whole panel registry (renderers, chart libs).
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(() => ({
-		supportedSignals: ['metrics', 'logs', 'traces'],
-	})),
-}));
-
 // Open the antd Select by clicking its selector, then pick the option by label.
 async function pickOption(triggerTestId: string, label: string): Promise<void> {
 	const user = userEvent.setup();
@@ -25,12 +17,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-					stacking: true,
-					fillSpans: true,
-				}}
+				controls={{ timePreference: true, stacking: true, fillSpans: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -48,10 +35,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-				}}
+				controls={{ timePreference: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -72,10 +56,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-				}}
+				controls={{ timePreference: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -93,10 +74,7 @@ describe('VisualizationSection', () => {
 					timePreference: DashboardtypesTimePreferenceDTO.global_time,
 					stackedBarChart: false,
 				}}
-				controls={{
-					switchPanelKind: true,
-					stacking: true,
-				}}
+				controls={{ stacking: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -114,10 +92,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={{ fillSpans: false }}
-				controls={{
-					switchPanelKind: true,
-					fillSpans: true,
-				}}
+				controls={{ fillSpans: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -126,43 +101,4 @@ describe('VisualizationSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith({ fillSpans: true });
 	});
-
-	it('renders the type switcher and switches kind when switchPanelKind is set', async () => {
-		const onChangePanelKind = jest.fn();
-		render(
-			<VisualizationSection
-				value={undefined}
-				controls={{ switchPanelKind: true }}
-				onChange={jest.fn()}
-				panelKind="signoz/TimeSeriesPanel"
-				onChangePanelKind={onChangePanelKind}
-			/>,
-		);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-type-switcher'),
-		).toBeInTheDocument();
-
-		await pickOption('panel-editor-v2-type-switcher', 'Table');
-		expect(onChangePanelKind).toHaveBeenCalledWith('signoz/TablePanel');
-	});
-
-	it('hides the type switcher when switchPanelKind is not set', () => {
-		render(
-			<VisualizationSection
-				value={undefined}
-				controls={{
-					switchPanelKind: false,
-					timePreference: true,
-				}}
-				onChange={jest.fn()}
-				panelKind="signoz/TimeSeriesPanel"
-				onChangePanelKind={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-type-switcher'),
-		).not.toBeInTheDocument();
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/ListColumnsEditor.tsx

@@ -29,7 +29,8 @@ import styles from './ListColumnsEditor.module.scss';
 interface ListColumnsEditorProps {
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	signal: TelemetrytypesSignalDTO;
+	/** Committed query's signal — scopes the add-dropdown's field suggestions. */
+	signal: TelemetrytypesSignalDTO | undefined;
 }
 
 /**

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.tsx

@@ -21,7 +21,7 @@ import { useListColumnSuggestions } from '../../hooks/useListColumnSuggestions';
 import styles from './AddColumnDropdown.module.scss';
 
 interface AddColumnDropdownProps {
-	signal: TelemetrytypesSignalDTO;
+	signal: TelemetrytypesSignalDTO | undefined;
 	/** Names already chosen — drives the checked state + toggle behavior. */
 	selectedNames: Set<string>;
 	onToggle: (field: TelemetrytypesTelemetryFieldKeyDTO) => void;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/hooks/useListColumnSuggestions.ts

@@ -21,7 +21,7 @@ interface UseListColumnSuggestions {
  * flatten them and index by name so picks can carry their context/data-type.
  */
 export function useListColumnSuggestions(
-	signal: TelemetrytypesSignalDTO,
+	signal: TelemetrytypesSignalDTO | undefined,
 ): UseListColumnSuggestions {
 	const [searchText, setSearchText] = useState('');
 	const debouncedSearch = useDebounce(searchText, 300);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/selectFields.ts

@@ -1,17 +1,14 @@
-import {
-	TelemetrytypesSignalDTO,
-	type DashboardtypesListPanelSpecDTO,
-	type DashboardtypesPanelSpecDTO,
-	type TelemetrytypesTelemetryFieldKeyDTO,
+import type {
+	DashboardtypesListPanelSpecDTO,
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-} from 'container/OptionsMenu/constants';
 
 /**
- * Reduce each column to the field-key DTO shape: the suggestions API and default
- * constants carry extra runtime fields (e.g. `isIndexed`) the save contract rejects.
+ * The field-key suggestions API and the default-column constants carry extra
+ * runtime fields (e.g. `isIndexed`) that the save contract rejects. Reduce each
+ * column to the `TelemetrytypesTelemetryFieldKeyDTO` shape so persisted
+ * `selectFields` only contain backend-known keys.
  */
 function toFieldKeyDTO(
 	field: TelemetrytypesTelemetryFieldKeyDTO,
@@ -34,26 +31,10 @@ export function sanitizeSelectFields(
 }
 
 /**
- * logs/traces List-column defaults (V1 parity), sanitized to the field-key DTO.
+ * `spec.plugin.spec` is a discriminated union over every panel kind; these helpers
+ * run only for the List panel, so it's narrowed to the List variant with a single
+ * localized cast at the boundary.
  */
-export function defaultColumnsForSignal(
-	signal: TelemetrytypesSignalDTO,
-): TelemetrytypesTelemetryFieldKeyDTO[] {
-	if (signal === TelemetrytypesSignalDTO.logs) {
-		return sanitizeSelectFields(
-			defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
-		);
-	}
-	if (signal === TelemetrytypesSignalDTO.traces) {
-		return sanitizeSelectFields(
-			defaultTraceSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
-		);
-	}
-	return [];
-}
-
-// `spec.plugin.spec` is a discriminated union over panel kinds; these List-only
-// helpers narrow to the List variant via a single localized cast at the boundary.
 export function readSelectFields(
 	spec: DashboardtypesPanelSpecDTO,
 ): TelemetrytypesTelemetryFieldKeyDTO[] {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PlotTag.tsx

@@ -1,35 +0,0 @@
-import { Spline } from '@signozhq/icons';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
-import { EQueryType } from 'types/common/dashboard';
-
-interface PlotTagProps {
-	/** Authoring mode of the panel's query; undefined when no query exists yet. */
-	queryType: EQueryType | undefined;
-	panelType: PANEL_TYPES;
-	className?: string;
-}
-
-/**
- * "Plotted with <query mode>" chip for the editor preview; V2 counterpart of V1's
- * PlotTag (duplicated per the split policy). Hidden for list panels and before a
- * query exists, where the mode is irrelevant.
- */
-function PlotTag({
-	queryType,
-	panelType,
-	className,
-}: PlotTagProps): JSX.Element | null {
-	if (queryType === undefined || panelType === PANEL_TYPES.LIST) {
-		return null;
-	}
-
-	return (
-		<div className={className} data-testid="panel-editor-plot-tag">
-			<Spline size={14} />
-			Plotted with <QueryTypeTag queryType={queryType} />
-		</div>
-	);
-}
-
-export default PlotTag;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -43,10 +43,8 @@
 	border-radius: 4px;
 	overflow: hidden;
 	display: flex;
-	// Header stacks above the body, flush to the border — mirrors the dashboard
-	// grid's `.panel` so the preview reads as the real panel chrome.
-	flex-direction: column;
 	background: var(--l2-background);
+	padding: 8px;
 }
 
 .state {
@@ -59,7 +57,3 @@
 	font-size: 13px;
 	text-align: center;
 }
-
-.dateTimeSelector {
-	margin-left: auto;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -1,28 +1,25 @@
-import { useState } from 'react';
+import { Spline } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
-import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
 	PanelQueryData,
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import { EQueryType } from 'types/common/dashboard';
 
-import PlotTag from './PlotTag';
 import styles from './PreviewPane.module.scss';
 
 interface PreviewPaneProps {
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
-	/** Resolved definition for the panel kind; */
-	panelDefinition: RenderablePanelDefinition;
+	/** Resolved definition for the panel kind; undefined when the kind is unsupported. */
+	panelDef: RenderablePanelDefinition | undefined;
 	data: PanelQueryData;
-	/** Any fetch in flight — drives the header spinner and the body's loading state. */
-	isFetching: boolean;
+	isLoading: boolean;
 	error: Error | null;
 	/** Re-run the query (drives PanelBody's error-state retry). */
 	refetch: () => void;
@@ -33,69 +30,50 @@ interface PreviewPaneProps {
 }
 
 /**
- * Live preview for the panel editor: renders the draft through the same `PanelBody`
- * the dashboard grid uses (only `panelMode` differs), so the preview is the
- * production render path. The query result is owned by the editor root.
+ * Live preview for the panel editor. Renders the draft through the same `PanelBody`
+ * the dashboard grid uses (only `panelMode={DASHBOARD_EDIT}` differs), so the preview
+ * is the production render path. The query result is owned by the editor root.
  */
 function PreviewPane({
 	panelId,
 	panel,
-	panelDefinition,
+	panelDef,
 	data,
-	isFetching,
+	isLoading,
 	error,
 	refetch,
 	onDragSelect,
 	pagination,
 }: PreviewPaneProps): JSX.Element {
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
-	const queryType = getPanelQueryType(panel);
-
-	// Search term is ephemeral preview state, threaded to header + renderer but
-	// not persisted to the draft spec. Only kinds that declare it render the box.
-	const searchable = !!panelDefinition.actions.search;
-	const [searchTerm, setSearchTerm] = useState('');
-
 	return (
 		<div className={styles.preview}>
 			<div className={styles.header}>
-				<PlotTag
-					queryType={queryType}
-					panelType={panelType}
-					className={styles.queryType}
-				/>
-				<div className={styles.dateTimeSelector}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+				<div className={styles.queryType}>
+					<Spline size={14} />
+					Plotted with <QueryTypeTag queryType={EQueryType.QUERY_BUILDER} />
 				</div>
+				<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 			</div>
 			<div className={styles.container}>
 				<div className={styles.surface}>
-					<PanelHeader
-						name={panel.spec.display.name}
-						description={panel.spec.display.description}
-						panelId={panelId}
-						panelKind={panel.spec.plugin.kind}
-						isFetching={isFetching}
-						error={error}
-						warning={data.response?.data?.warning}
-						searchable={searchable}
-						searchTerm={searchTerm}
-						onSearchChange={setSearchTerm}
-						hideActions
-					/>
-					<PanelBody
-						panelDefinition={panelDefinition}
-						panel={panel}
-						panelId={panelId}
-						data={data}
-						isLoading={isFetching}
-						error={error}
-						refetch={refetch}
-						onDragSelect={onDragSelect}
-						panelMode={PanelMode.DASHBOARD_EDIT}
-						searchTerm={searchable ? searchTerm : undefined}
-						pagination={pagination}
-					/>
+					{panelDef ? (
+						<PanelBody
+							panelDefinition={panelDef}
+							panel={panel}
+							panelId={panelId}
+							data={data}
+							isLoading={isLoading}
+							error={error}
+							refetch={refetch}
+							onDragSelect={onDragSelect}
+							panelMode={PanelMode.DASHBOARD_EDIT}
+							pagination={pagination}
+						/>
+					) : (
+						<div className={styles.state} data-testid="panel-editor-v2-unknown-kind">
+							This panel type is not yet supported in V2.
+						</div>
+					)}
 				</div>
 			</div>
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/__tests__/PlotTag.test.tsx

@@ -1,30 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { EQueryType } from 'types/common/dashboard';
-
-import PlotTag from '../PlotTag';
-
-describe('PlotTag', () => {
-	it('renders the resolved query mode', () => {
-		render(
-			<PlotTag queryType={EQueryType.PROM} panelType={PANEL_TYPES.TIME_SERIES} />,
-		);
-		expect(screen.getByTestId('panel-editor-plot-tag')).toBeInTheDocument();
-		expect(screen.getByText('PromQL')).toBeInTheDocument();
-	});
-
-	it('renders nothing when there is no query yet', () => {
-		render(<PlotTag queryType={undefined} panelType={PANEL_TYPES.TIME_SERIES} />);
-		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
-	});
-
-	it('renders nothing for list panels (query mode is irrelevant)', () => {
-		render(
-			<PlotTag
-				queryType={EQueryType.QUERY_BUILDER}
-				panelType={PANEL_TYPES.LIST}
-			/>,
-		);
-		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/getSwitchedPluginSpec.test.ts

@@ -1,90 +0,0 @@
-import {
-	TelemetrytypesSignalDTO,
-	type DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import { defaultColumnsForSignal } from '../ListColumnsEditor/selectFields';
-import { getSwitchedPluginSpec } from '../getSwitchedPluginSpec';
-
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(),
-}));
-jest.mock('../ListColumnsEditor/selectFields', () => ({
-	defaultColumnsForSignal: jest.fn(),
-}));
-
-const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
-const mockDefaultColumnsForSignal =
-	defaultColumnsForSignal as unknown as jest.Mock;
-
-function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Panel' },
-		plugin: { kind: 'signoz/TablePanel', spec: pluginSpec },
-		queries: [],
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-describe('getSwitchedPluginSpec', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockDefaultColumnsForSignal.mockReturnValue([]);
-	});
-
-	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
-		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
-		});
-		const old = specWith({
-			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
-			axes: { logScale: true },
-		});
-
-		const result = getSwitchedPluginSpec(old, 'signoz/TimeSeriesPanel');
-
-		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
-		// Type-specific config from the old kind is dropped.
-		expect((result as { axes?: unknown }).axes).toBeUndefined();
-	});
-
-	it('does not carry formatting when the new kind has no formatting section', () => {
-		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-		const old = specWith({ formatting: { unit: 'ms' } });
-
-		const result = getSwitchedPluginSpec(
-			old,
-			'signoz/ListPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.formatting).toBeUndefined();
-	});
-
-	it('seeds List columns from the signal when switching into a List', () => {
-		const columns = [{ name: 'body' }];
-		mockDefaultColumnsForSignal.mockReturnValue(columns);
-		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-
-		const result = getSwitchedPluginSpec(
-			specWith({}),
-			'signoz/ListPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(mockDefaultColumnsForSignal).toHaveBeenCalledWith(
-			TelemetrytypesSignalDTO.logs,
-		);
-		expect(result.selectFields).toBe(columns);
-	});
-
-	it('includes the kind section defaults (e.g. legend position)', () => {
-		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'legend', controls: { position: true } }],
-		});
-
-		const result = getSwitchedPluginSpec(specWith({}), 'signoz/PieChartPanel');
-
-		expect(result.legend?.position).toBe('bottom');
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/newPanelRoute.test.ts

@@ -1,34 +0,0 @@
-import {
-	NEW_PANEL_ID,
-	newPanelSearch,
-	parseNewPanelKind,
-	parseNewPanelLayoutIndex,
-} from '../newPanelRoute';
-
-describe('newPanelRoute', () => {
-	it('round-trips kind + layoutIndex through the new-panel search', () => {
-		const search = newPanelSearch('signoz/ListPanel', 2);
-		expect(parseNewPanelKind(NEW_PANEL_ID, search)).toBe('signoz/ListPanel');
-		expect(parseNewPanelLayoutIndex(search)).toBe(2);
-	});
-
-	it('omits layoutIndex when not provided', () => {
-		const search = newPanelSearch('signoz/TimeSeriesPanel');
-		expect(parseNewPanelKind(NEW_PANEL_ID, search)).toBe(
-			'signoz/TimeSeriesPanel',
-		);
-		expect(parseNewPanelLayoutIndex(search)).toBeUndefined();
-	});
-
-	it('returns null for an existing panel id (not the new sentinel)', () => {
-		const search = newPanelSearch('signoz/ListPanel');
-		expect(parseNewPanelKind('a1b2c3d4-uuid', search)).toBeNull();
-	});
-
-	it('returns null when the kind param is missing or unknown', () => {
-		expect(parseNewPanelKind(NEW_PANEL_ID, '')).toBeNull();
-		expect(
-			parseNewPanelKind(NEW_PANEL_ID, '?panelKind=NotARealPanel'),
-		).toBeNull();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts

@@ -1,67 +0,0 @@
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import type { PanelFormattingSlice } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
-import {
-	buildDefaultPluginSpec,
-	type DefaultPluginSpec,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec';
-
-import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
-
-/**
- * Plugin spec produced on a first-time switch to a new kind. A partial cross-section
- * of the per-kind spec union; the caller assigns it to `plugin.spec` (typed `unknown`)
- * at the boundary.
- */
-export interface SwitchedPluginSpec extends DefaultPluginSpec {
-	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
-}
-
-/**
- * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
- * section defaults (so the config pane opens populated, matching new-panel seeding) plus
- * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
- * List seeds the current signal's default columns so the columns control isn't empty.
- *
- * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
- */
-export function getSwitchedPluginSpec(
-	oldSpec: DashboardtypesPanelSpecDTO,
-	newKind: PanelKind,
-	signal?: TelemetrytypesSignalDTO,
-): SwitchedPluginSpec {
-	const sections = getPanelDefinition(newKind)?.sections ?? [];
-	const result: SwitchedPluginSpec = buildDefaultPluginSpec(sections);
-
-	if (sections.some((section) => section.kind === 'formatting')) {
-		const oldFormatting = (
-			oldSpec.plugin.spec as {
-				formatting?: PanelFormattingSlice;
-			}
-		).formatting;
-		const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
-			...(oldFormatting?.unit !== undefined && { unit: oldFormatting.unit }),
-			...(oldFormatting?.decimalPrecision !== undefined && {
-				decimalPrecision: oldFormatting.decimalPrecision,
-			}),
-		};
-		if (Object.keys(carried).length > 0) {
-			result.formatting = carried;
-		}
-	}
-
-	if (sections.some((section) => section.kind === 'columns') && signal) {
-		const columns = defaultColumnsForSignal(signal);
-		if (columns.length > 0) {
-			result.selectFields = columns;
-		}
-	}
-
-	return result;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelTypeSwitch.test.ts

@@ -1,190 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { handleQueryChange } from 'container/NewWidget/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getBuilderQueries } from '../../../Panels/utils/getBuilderQueries';
-import { toPerses } from '../../../queryV5/persesQueryAdapters';
-import { getSwitchedPluginSpec } from '../../getSwitchedPluginSpec';
-import { usePanelTypeSwitch } from '../usePanelTypeSwitch';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('container/NewWidget/utils', () => ({
-	handleQueryChange: jest.fn(),
-	PANEL_TYPE_TO_QUERY_TYPES: {
-		graph: ['builder', 'clickhouse', 'promql'],
-		table: ['builder', 'clickhouse'],
-		list: ['builder'],
-		value: ['builder', 'clickhouse', 'promql'],
-		bar: ['builder', 'clickhouse', 'promql'],
-		pie: ['builder', 'clickhouse'],
-		histogram: ['builder', 'clickhouse', 'promql'],
-	},
-}));
-jest.mock('../../../queryV5/persesQueryAdapters', () => ({
-	toPerses: jest.fn(),
-}));
-jest.mock('../../getSwitchedPluginSpec', () => ({
-	getSwitchedPluginSpec: jest.fn(),
-}));
-jest.mock('../../../Panels/utils/getBuilderQueries', () => ({
-	getBuilderQueries: jest.fn(),
-}));
-
-const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
-const mockHandleQueryChange = handleQueryChange as unknown as jest.Mock;
-const mockToPerses = toPerses as unknown as jest.Mock;
-const mockGetSwitchedPluginSpec = getSwitchedPluginSpec as unknown as jest.Mock;
-const mockGetBuilderQueries = getBuilderQueries as unknown as jest.Mock;
-
-// Opaque sentinels — the leaf utilities are mocked, so only identity matters.
-const TABLE_PLUGIN_SPEC = { table: true } as unknown;
-const TABLE_QUERIES = [{ id: 'table-q' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const LIST_PLUGIN_SPEC = { list: true } as unknown;
-const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const TRANSFORMED = {
-	id: 'transformed',
-	queryType: 'builder',
-} as unknown as Query;
-const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const SWITCHED_SPEC = { switched: true } as unknown;
-
-function makeSpec(
-	kind: string,
-	pluginSpec: unknown,
-	queries: NonNullable<DashboardtypesPanelSpecDTO['queries']>,
-): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Panel' },
-		plugin: { kind, spec: pluginSpec },
-		queries,
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-const tableSpec = makeSpec(
-	'signoz/TablePanel',
-	TABLE_PLUGIN_SPEC,
-	TABLE_QUERIES,
-);
-const listSpec = makeSpec('signoz/ListPanel', LIST_PLUGIN_SPEC, LIST_QUERIES);
-
-function builderState(currentQuery: Query): {
-	currentQuery: Query;
-	redirectWithQueryBuilderData: jest.Mock;
-} {
-	return { currentQuery, redirectWithQueryBuilderData: jest.fn() };
-}
-
-describe('usePanelTypeSwitch', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockHandleQueryChange.mockReturnValue(TRANSFORMED);
-		mockToPerses.mockReturnValue(CONVERTED);
-		mockGetSwitchedPluginSpec.mockReturnValue(SWITCHED_SPEC);
-		mockGetBuilderQueries.mockReturnValue([{ signal: 'logs' }]);
-	});
-
-	it('does nothing when switching to the current kind', () => {
-		const setSpec = jest.fn();
-		const state = builderState({ id: 'q', queryType: 'builder' } as Query);
-		mockUseQueryBuilder.mockReturnValue(state);
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: tableSpec,
-				panelType: PANEL_TYPES.TABLE,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
-
-		expect(setSpec).not.toHaveBeenCalled();
-		expect(state.redirectWithQueryBuilderData).not.toHaveBeenCalled();
-	});
-
-	it('on first visit: transforms the query and resets the spec to the new kind', () => {
-		const setSpec = jest.fn();
-		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
-		const state = builderState(tableQuery);
-		mockUseQueryBuilder.mockReturnValue(state);
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: tableSpec,
-				panelType: PANEL_TYPES.TABLE,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		expect(setSpec).toHaveBeenCalledTimes(1);
-		const next = setSpec.mock.calls[0][0] as DashboardtypesPanelSpecDTO;
-		expect(next.plugin.kind).toBe('signoz/ListPanel');
-		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
-		expect(next.queries).toBe(CONVERTED);
-		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
-	});
-
-	it('coerces the query type when the new kind disallows it (promql → List)', () => {
-		const setSpec = jest.fn();
-		const promQuery = { id: 'prom', queryType: 'promql' } as Query;
-		mockUseQueryBuilder.mockReturnValue(builderState(promQuery));
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
-				panelType: PANEL_TYPES.TIME_SERIES,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		// List allows only Query Builder, so the promql query is coerced to 'builder'.
-		const [, queryArg] = mockHandleQueryChange.mock.calls[0];
-		expect((queryArg as Query).queryType).toBe('builder');
-	});
-
-	it('restores the original kind verbatim on switch-back (reversibility)', () => {
-		const setSpec = jest.fn();
-		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
-		const listQuery = { id: 'list-current', queryType: 'builder' } as Query;
-		let state = builderState(tableQuery);
-		mockUseQueryBuilder.mockImplementation(() => state);
-
-		const { result, rerender } = renderHook(
-			(props: { spec: DashboardtypesPanelSpecDTO; panelType: PANEL_TYPES }) =>
-				usePanelTypeSwitch({ ...props, setSpec }),
-			{ initialProps: { spec: tableSpec, panelType: PANEL_TYPES.TABLE } },
-		);
-
-		// Leave Table for List (stashes Table in its pristine state).
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		// Parent re-renders as a List panel; the builder now holds the List query.
-		state = builderState(listQuery);
-		rerender({ spec: listSpec, panelType: PANEL_TYPES.LIST });
-
-		// Switch back to Table → restored from the stash, not re-transformed.
-		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
-
-		const restored = setSpec.mock.calls[
-			setSpec.mock.calls.length - 1
-		][0] as DashboardtypesPanelSpecDTO;
-		expect(restored.plugin.kind).toBe('signoz/TablePanel');
-		expect(restored.plugin.spec).toBe(TABLE_PLUGIN_SPEC);
-		expect(restored.queries).toBe(TABLE_QUERIES);
-		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(tableQuery);
-		// The restore path must not run the query transform again.
-		expect(mockHandleQueryChange).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/useSwitchColumnsOnSignalChange.test.ts

@@ -10,13 +10,10 @@ import {
 } from 'container/OptionsMenu/constants';
 
 import { sanitizeSelectFields } from '../../ListColumnsEditor/selectFields';
-import {
-	useSwitchColumnsOnSignalChange,
-	type UseSwitchColumnsOnSignalChangeArgs,
-} from '../useSwitchColumnsOnSignalChange';
+import { useSwitchColumnsOnSignalChange } from '../useSwitchColumnsOnSignalChange';
 
-// V1 constants carry extra keys (e.g. `isIndexed`); the hook reduces them to the
-// field-key DTO, so assertions sanitize the same way.
+// The hook applies the datasource defaults reduced to the field-key DTO (the V1
+// constants carry extra keys like `isIndexed`); assertions mirror that.
 const expectedLogs = sanitizeSelectFields(
 	defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
 );
@@ -33,12 +30,16 @@ function makeSpec(
 	} as unknown as DashboardtypesPanelSpecDTO;
 }
 
-function renderWith(initial: UseSwitchColumnsOnSignalChangeArgs): {
-	rerender: (next: UseSwitchColumnsOnSignalChangeArgs) => void;
-} {
+type Props = {
+	enabled: boolean;
+	signal: TelemetrytypesSignalDTO | undefined;
+	spec: DashboardtypesPanelSpecDTO;
+	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+};
+
+function renderWith(initial: Props): { rerender: (next: Props) => void } {
 	const { rerender } = renderHook(
-		(props: UseSwitchColumnsOnSignalChangeArgs) =>
-			useSwitchColumnsOnSignalChange(props),
+		(props: Props) => useSwitchColumnsOnSignalChange(props),
 		{ initialProps: initial },
 	);
 	return { rerender };
@@ -72,45 +73,6 @@ describe('useSwitchColumnsOnSignalChange', () => {
 		);
 	});
 
-	it('restores the original columns on logs → traces → logs', () => {
-		// Customized logs selection, not the timestamp/body defaults.
-		const original = [
-			{ name: 'timestamp' },
-			{ name: 'body' },
-			{ name: 'response_status_code' },
-			{ name: 'trace_id' },
-		];
-		// Mirror the real parent: persist the spec so the next switch stashes the
-		// columns the previous one applied.
-		let spec = makeSpec(original);
-		const onChangeSpec = jest.fn((next: DashboardtypesPanelSpecDTO) => {
-			spec = next;
-		});
-		const { rerender } = renderWith({
-			enabled: true,
-			signal: TelemetrytypesSignalDTO.logs,
-			spec,
-			onChangeSpec,
-		});
-
-		rerender({
-			enabled: true,
-			signal: TelemetrytypesSignalDTO.traces,
-			spec,
-			onChangeSpec,
-		});
-		expect(selectFieldsOf(spec)).toStrictEqual(expectedTraces);
-
-		// Switching back restores the original columns, not the log defaults.
-		rerender({
-			enabled: true,
-			signal: TelemetrytypesSignalDTO.logs,
-			spec,
-			onChangeSpec,
-		});
-		expect(selectFieldsOf(spec)).toStrictEqual(original);
-	});
-
 	it('switches to the log defaults when going traces → logs', () => {
 		const onChangeSpec = jest.fn();
 		const spec = makeSpec([{ name: 'service.name' }]);
@@ -152,6 +114,20 @@ describe('useSwitchColumnsOnSignalChange', () => {
 		expect(onChangeSpec).not.toHaveBeenCalled();
 	});
 
+	it('does not switch on a transient undefined signal', () => {
+		const onChangeSpec = jest.fn();
+		const spec = makeSpec([{ name: 'body' }]);
+		const { rerender } = renderWith({
+			enabled: true,
+			signal: TelemetrytypesSignalDTO.logs,
+			spec,
+			onChangeSpec,
+		});
+
+		rerender({ enabled: true, signal: undefined, spec, onChangeSpec });
+		expect(onChangeSpec).not.toHaveBeenCalled();
+	});
+
 	it('does nothing when disabled (non-List kinds)', () => {
 		const onChangeSpec = jest.fn();
 		const spec = makeSpec([{ name: 'body' }]);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorQuerySync.ts

@@ -2,9 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getIsQueryModified } from 'container/NewWidget/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -20,21 +19,14 @@ interface UsePanelEditorQuerySyncArgs {
 	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
 	/** Re-fetch the preview when the query is unchanged (Stage & Run on a no-op). */
 	refetch: () => void;
-	/**
-	 * Serialize the live query on save even when unchanged. Set for a new panel,
-	 * whose seed query is the builder default (not a real saved query).
-	 */
-	alwaysSerializeQuery?: boolean;
-	/** Signal to seed a new panel's builder with — the kind's first supported signal. */
-	signal?: TelemetrytypesSignalDTO;
 }
 
 interface UsePanelEditorQuerySyncApi {
 	/** Run the current query (Stage & Run / ⌘↵). */
 	runQuery: () => void;
-	/** True when the live builder query differs from the saved query. */
+	/** True when the live builder query differs from the saved query (compared builder-normalized to avoid re-serialization noise). */
 	isQueryDirty: boolean;
-	/** Bake the live query into a spec so unstaged edits persist; unchanged → spec untouched. */
+	/** Bake the live query into a spec for saving so unstaged edits persist; returns the spec untouched when unchanged. */
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
@@ -42,36 +34,27 @@ interface UsePanelEditorQuerySyncApi {
 
 /**
  * Bridges the shared (URL-synced) query builder and the V2 editor draft: seeds the
- * builder from the saved panel, then commits the active query into
- * `draft.spec.queries` (what the preview fetches) on a query-type/datasource switch
- * and on Stage & Run.
+ * builder from the saved panel, then commits the active query into `draft.spec.queries`
+ * (what the preview fetches) on a query-type/datasource switch and on Stage & Run.
  */
 export function usePanelEditorQuerySync({
 	draft,
 	panelType,
 	setSpec,
 	refetch,
-	alwaysSerializeQuery = false,
-	signal,
 }: UsePanelEditorQuerySyncArgs): UsePanelEditorQuerySyncApi {
 	const { currentQuery, stagedQuery, handleRunQuery } = useQueryBuilder();
 
 	// Saved queries, captured once: seed the builder and serve as the restore target.
 	// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only snapshot
 	const savedQueries = useMemo(() => draft.spec?.queries ?? [], []);
-	// A new panel has no saved query: seed from the kind's first supported signal
-	// instead of letting `fromPerses` fall back to the metrics default (which List
-	// doesn't support).
 	const seedQuery = useMemo(
-		() =>
-			savedQueries.length === 0 && signal
-				? initialQueriesMap[signal]
-				: fromPerses(savedQueries, panelType),
-		[savedQueries, panelType, signal],
+		() => fromPerses(savedQueries, panelType),
+		[savedQueries, panelType],
 	);
-	// Force-reset the builder to the SAVED panel on first render only, discarding a
-	// stale URL query from a prior edit (else the QB/preview diverge and the dirty
-	// baseline is captured from the URL). After mount the URL syncs normally.
+	// Force-reset the builder to the SAVED panel on first render only, discarding any
+	// stale URL query from a prior edit — otherwise the QB and preview diverge and the
+	// dirty baseline gets captured from the URL. After mount the URL syncs normally.
 	const isInitialRenderRef = useRef(true);
 	useShareBuilderUrl({
 		defaultValue: seedQuery,
@@ -81,10 +64,11 @@ export function usePanelEditorQuerySync({
 		isInitialRenderRef.current = false;
 	}, []);
 
-	// Commit the live query into the draft (what the preview fetches). The dirty
-	// check compares against the SAVED query (`seedQuery`), not the URL-synced
-	// staged query, which can carry stale state across a refresh and read a real
-	// switch as "unchanged". Returns whether the draft changed.
+	// Commit the live query into the draft (what the preview fetches). The dirty check
+	// compares against the SAVED query (`seedQuery`), not the URL-synced staged query,
+	// which can carry stale state across a refresh and make a real switch read as
+	// "unchanged". Unchanged → restore saved queries; changed → commit. Returns whether
+	// the draft changed.
 	const commitQuery = useCallback(
 		(query: Query): boolean => {
 			const next = getIsQueryModified(query, seedQuery)
@@ -92,7 +76,7 @@ export function usePanelEditorQuerySync({
 				: savedQueries;
 			// No-op guard at the V5 envelope level: equivalent wrappers (bare
 			// `signoz/BuilderQuery` vs `signoz/CompositeQuery`) unwrap to the same
-			// envelopes, so a structural compare would falsely dirty the draft.
+			// envelopes, so comparing them structurally would falsely dirty the draft.
 			const current = draft.spec?.queries ?? [];
 			if (isEqual(toQueryEnvelopes(next), toQueryEnvelopes(current))) {
 				return false;
@@ -109,8 +93,8 @@ export function usePanelEditorQuerySync({
 	const queryRef = useRef(currentQuery);
 	queryRef.current = currentQuery;
 
-	// Re-commit on a query-type/datasource switch so the preview refetches. Skip
-	// mount: the draft already holds the saved queries the builder is reset to.
+	// Re-commit on a query-type or datasource switch so the preview refetches. Skip
+	// mount: the draft already holds the saved queries the builder is force-reset to.
 	const dataSourceSignature = useMemo(
 		() =>
 			(currentQuery.builder?.queryData ?? []).map((q) => q.dataSource).join(','),
@@ -135,10 +119,10 @@ export function usePanelEditorQuerySync({
 	}, [handleRunQuery, commitQuery, currentQuery, refetch]);
 
 	// Dirty baseline: the builder's OWN normalized saved query (first non-null
-	// `stagedQuery` after the mount reset) — comparing builder-normalized to
+	// `stagedQuery` after the mount reset). Comparing builder-normalized to
 	// builder-normalized avoids serialization drift reading an untouched query as
-	// modified. In state (not a ref) so capture re-triggers `isQueryDirty`; captured
-	// once and never moved by Stage & Run, so it stays anchored to saved.
+	// modified. Held in state (not a ref) so capture re-triggers `isQueryDirty`;
+	// captured once and never moved by Stage & Run, so it stays anchored to saved.
 	const [queryBaseline, setQueryBaseline] = useState<Query | null>(null);
 	useEffect(() => {
 		if (queryBaseline === null && stagedQuery) {
@@ -151,10 +135,10 @@ export function usePanelEditorQuerySync({
 
 	const buildSaveSpec = useCallback(
 		(spec: DashboardtypesPanelSpecDTO): DashboardtypesPanelSpecDTO =>
-			isQueryDirty || alwaysSerializeQuery
+			isQueryDirty
 				? { ...spec, queries: toPerses(currentQuery, panelType) }
 				: spec,
-		[isQueryDirty, alwaysSerializeQuery, currentQuery, panelType],
+		[isQueryDirty, currentQuery, panelType],
 	);
 
 	return { runQuery, isQueryDirty, buildSaveSpec };

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorSave.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
-import { v4 as uuid } from 'uuid';
 import {
 	getGetDashboardV2QueryKey,
 	usePatchDashboardV2,
@@ -8,20 +7,12 @@ import {
 import {
 	type DashboardtypesJSONPatchOperationDTO,
 	type DashboardtypesPanelSpecDTO,
-	DashboardtypesPanelKindDTO,
 	DashboardtypesPatchOpDTO,
-	type GetDashboardV2200,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { createPanelOps } from '../../patchOps';
-
 interface UsePanelEditorSaveArgs {
 	dashboardId: string;
 	panelId: string;
-	/** Creating a new panel (vs editing an existing one) — adds panel + layout. */
-	isNew?: boolean;
-	/** Target section for a new panel; falls back to the last/new section. */
-	layoutIndex?: number;
 }
 
 interface UsePanelEditorSaveApi {
@@ -31,49 +22,34 @@ interface UsePanelEditorSaveApi {
 }
 
 /**
- * Persists panel edits for the V2 editor via RFC-6902 JSON Patch. Editing: one
- * `add` op replaces the whole spec. Creating (`isNew`): mints a fresh id and adds
- * a grid item in the target section. Persists only on save — cancelling never
- * touches the dashboard.
+ * Persists panel edits via a single RFC-6902 `add` op that replaces the whole panel
+ * spec at `/spec/panels/{panelId}/spec`, so every config-pane edit is saved (not just
+ * title/description). `add` doubles as create-or-replace, avoiding a separate
+ * existence check.
  */
 export function usePanelEditorSave({
 	dashboardId,
 	panelId,
-	isNew = false,
-	layoutIndex,
 }: UsePanelEditorSaveArgs): UsePanelEditorSaveApi {
 	const queryClient = useQueryClient();
 	const { mutateAsync, isLoading, error } = usePatchDashboardV2();
 
 	const save = useCallback(
 		async (spec: DashboardtypesPanelSpecDTO): Promise<void> => {
-			const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
-
-			let ops: DashboardtypesJSONPatchOperationDTO[];
-			if (isNew) {
-				// Resolve the target section against the freshest dashboard we have.
-				const cached =
-					queryClient.getQueryData<GetDashboardV2200>(dashboardQueryKey);
-				ops = createPanelOps({
-					layouts: cached?.data.spec.layouts ?? [],
-					layoutIndex,
-					panelId: uuid(),
-					panel: { kind: DashboardtypesPanelKindDTO.Panel, spec },
-				});
-			} else {
-				ops = [
-					{
-						op: DashboardtypesPatchOpDTO.add,
-						path: `/spec/panels/${panelId}/spec`,
-						value: spec,
-					},
-				];
-			}
+			const ops: DashboardtypesJSONPatchOperationDTO[] = [
+				{
+					op: DashboardtypesPatchOpDTO.add,
+					path: `/spec/panels/${panelId}/spec`,
+					value: spec,
+				},
+			];
 
 			await mutateAsync({ pathParams: { id: dashboardId }, data: ops });
-			await queryClient.invalidateQueries(dashboardQueryKey);
+			await queryClient.invalidateQueries(
+				getGetDashboardV2QueryKey({ id: dashboardId }),
+			);
 		},
-		[dashboardId, panelId, isNew, layoutIndex, mutateAsync, queryClient],
+		[dashboardId, panelId, mutateAsync, queryClient],
 	);
 
 	return { save, isSaving: isLoading, error: (error as Error) ?? null };

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -1,137 +0,0 @@
-import { useCallback, useRef } from 'react';
-import type {
-	DashboardtypesPanelPluginDTO,
-	DashboardtypesPanelSpecDTO,
-	DashboardtypesQueryDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	handleQueryChange,
-	PANEL_TYPE_TO_QUERY_TYPES,
-	type PartialPanelTypes,
-} from 'container/NewWidget/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from '../../Panels/types/panelKind';
-import { getBuilderQueries } from '../../Panels/utils/getBuilderQueries';
-import { toPerses } from '../../queryV5/persesQueryAdapters';
-import {
-	getSwitchedPluginSpec,
-	type SwitchedPluginSpec,
-} from '../getSwitchedPluginSpec';
-
-/** What a kind looks like when you leave it; restored verbatim if you return. */
-interface KindState {
-	pluginSpec: DashboardtypesPanelPluginDTO['spec'];
-	queries: DashboardtypesQueryDTO[] | null;
-	builderQuery: Query;
-}
-
-interface UsePanelTypeSwitchArgs {
-	spec: DashboardtypesPanelSpecDTO;
-	panelType: PANEL_TYPES;
-	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
-}
-
-interface UsePanelTypeSwitchApi {
-	/** Switch the panel to `newKind`, transforming/restoring its query + spec. */
-	onChangePanelKind: (newKind: PanelKind) => void;
-}
-
-/**
- * Switches the edited panel's visualization kind. Mutating `plugin.kind` re-derives the
- * renderer, config sections, query-builder tabs and request type for free; this hook adds
- * the two things that don't: a per-kind session cache that makes switching reversible
- * (`Table → List → Table` restores the original query + spec), and, on first visit to a
- * kind, a query rebuild (`handleQueryChange`) + spec reset (`getSwitchedPluginSpec`).
- */
-export function usePanelTypeSwitch({
-	spec,
-	panelType,
-	setSpec,
-}: UsePanelTypeSwitchArgs): UsePanelTypeSwitchApi {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-
-	const cacheRef = useRef<Map<PanelKind, KindState>>(new Map());
-
-	// Latest spec/query/type, read inside the stable callback without re-subscribing.
-	const specRef = useRef(spec);
-	specRef.current = spec;
-	const queryRef = useRef(currentQuery);
-	queryRef.current = currentQuery;
-	const panelTypeRef = useRef(panelType);
-	panelTypeRef.current = panelType;
-
-	const onChangePanelKind = useCallback(
-		(newKind: PanelKind): void => {
-			const currentSpec = specRef.current;
-			const oldKind = currentSpec.plugin.kind as PanelKind;
-			if (newKind === oldKind) {
-				return;
-			}
-			const query = queryRef.current;
-
-			cacheRef.current.set(oldKind, {
-				pluginSpec: currentSpec.plugin.spec,
-				queries: currentSpec.queries ?? null,
-				builderQuery: query,
-			});
-
-			const newPanelType = PANEL_KIND_TO_PANEL_TYPE[newKind];
-
-			// Only `plugin` needs a cast: it's a discriminated union over `kind`, and a
-			// dynamically-chosen kind can't be correlated with its spec statically (as in
-			// `createDefaultPanel`). The surrounding spec stays fully typed.
-			const buildSpec = (
-				pluginSpec: DashboardtypesPanelPluginDTO['spec'] | SwitchedPluginSpec,
-				queries: DashboardtypesQueryDTO[] | null,
-			): DashboardtypesPanelSpecDTO => ({
-				...currentSpec,
-				plugin: {
-					...currentSpec.plugin,
-					kind: newKind,
-					spec: pluginSpec,
-				} as DashboardtypesPanelPluginDTO,
-				queries,
-			});
-
-			// Revisit → restore the stash verbatim (the reversibility path).
-			const cached = cacheRef.current.get(newKind);
-			if (cached) {
-				setSpec(buildSpec(cached.pluginSpec, cached.queries));
-				redirectWithQueryBuilderData(cached.builderQuery);
-				return;
-			}
-
-			// First visit → coerce the query type if the new panel disallows it, then
-			// rebuild the builder query for the new type.
-			const supported = PANEL_TYPE_TO_QUERY_TYPES[newPanelType] ?? [];
-			const queryType = supported.includes(query.queryType)
-				? query.queryType
-				: supported[0];
-			const transformed = handleQueryChange(
-				newPanelType as keyof PartialPanelTypes,
-				{ ...query, queryType },
-				panelTypeRef.current,
-			);
-			const signal = getBuilderQueries(currentSpec.queries)[0]
-				?.signal as TelemetrytypesSignalDTO;
-
-			setSpec(
-				buildSpec(
-					getSwitchedPluginSpec(currentSpec, newKind, signal),
-					toPerses(transformed, newPanelType),
-				),
-			);
-			redirectWithQueryBuilderData(transformed);
-		},
-		[setSpec, redirectWithQueryBuilderData],
-	);
-
-	return { onChangePanelKind };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSeedNewListColumns.ts

@@ -1,47 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	defaultColumnsForSignal,
-	readSelectFields,
-	writeSelectFields,
-} from '../ListColumnsEditor/selectFields';
-
-interface UseSeedNewListColumnsArgs {
-	/** Gate: a brand-new List panel (the only case that should auto-fill columns). */
-	enabled: boolean;
-	/** Default signal for the new panel — its kind's first supported signal. */
-	signal: TelemetrytypesSignalDTO;
-	spec: DashboardtypesPanelSpecDTO;
-	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-}
-
-/**
- * Seeds a brand-new List panel's columns with its default signal's columns so the
- * Columns control isn't empty on first open. Runs once and only when empty: an
- * empty selection is a valid "show all fields" state, so existing panels and
- * user-cleared selections are never touched.
- */
-export function useSeedNewListColumns({
-	enabled,
-	signal,
-	spec,
-	onChangeSpec,
-}: UseSeedNewListColumnsArgs): void {
-	const seededRef = useRef(false);
-
-	useEffect(() => {
-		if (!enabled || seededRef.current || !signal) {
-			return;
-		}
-		// Only seed when empty — don't clobber a selection that's already present.
-		if (readSelectFields(spec).length > 0) {
-			return;
-		}
-		seededRef.current = true;
-		onChangeSpec(writeSelectFields(spec, defaultColumnsForSignal(signal)));
-	}, [enabled, signal, spec, onChangeSpec]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSwitchColumnsOnSignalChange.ts

@@ -1,31 +1,52 @@
 import { useEffect, useRef } from 'react';
-
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
 import {
-	defaultColumnsForSignal,
-	readSelectFields,
-	writeSelectFields,
-} from '../ListColumnsEditor/selectFields';
+	type DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+	type TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
+} from 'container/OptionsMenu/constants';
 
-export interface UseSwitchColumnsOnSignalChangeArgs {
+import { sanitizeSelectFields } from '../ListColumnsEditor/selectFields';
+
+/**
+ * The datasource's default List columns (V1 parity), sanitized to the field-key
+ * DTO — the V1 constants carry extra keys (isIndexed) the save contract rejects.
+ * Other signals (metrics) don't produce a list, so they clear the selection.
+ */
+function defaultColumnsForSignal(
+	signal: TelemetrytypesSignalDTO,
+): TelemetrytypesTelemetryFieldKeyDTO[] {
+	if (signal === TelemetrytypesSignalDTO.logs) {
+		return sanitizeSelectFields(
+			defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
+		);
+	}
+	if (signal === TelemetrytypesSignalDTO.traces) {
+		return sanitizeSelectFields(
+			defaultTraceSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
+		);
+	}
+	return [];
+}
+
+interface UseSwitchColumnsOnSignalChangeArgs {
 	/** Gate so the switch only runs for the List kind (the only one with columns). */
 	enabled: boolean;
 	/** The panel's current telemetry signal (logs / traces / metrics). */
-	signal: TelemetrytypesSignalDTO;
+	signal: TelemetrytypesSignalDTO | undefined;
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
 }
 
 /**
- * Swaps the List panel's columns when the telemetry signal changes. V2 stores a
- * single `selectFields`, so each signal's columns are stashed and restored on
- * switch-back; a signal seen for the first time gets the datasource defaults (V1
- * parity).
+ * Switches the List panel's chosen columns to the new datasource's defaults when
+ * the panel's telemetry signal changes (e.g. logs → traces). V1 kept a separate
+ * field list per datasource; V2 stores a single `selectFields`, so columns picked
+ * for one signal are meaningless after switching — replace them with the new
+ * source's sensible defaults (matching V1's logs/traces list defaults).
  */
 export function useSwitchColumnsOnSignalChange({
 	enabled,
@@ -34,28 +55,28 @@ export function useSwitchColumnsOnSignalChange({
 	onChangeSpec,
 }: UseSwitchColumnsOnSignalChangeArgs): void {
 	const prevSignalRef = useRef(signal);
-	const columnsBySignalRef = useRef<
-		Map<string, TelemetrytypesTelemetryFieldKeyDTO[]>
-	>(new Map());
 
 	useEffect(() => {
+		const prev = prevSignalRef.current;
+		prevSignalRef.current = signal;
+
 		if (!enabled) {
 			return;
 		}
-		const prev = prevSignalRef.current;
-		// Track only real signals: a transient `undefined` (mid query-edit) must
-		// not become `prev`, or stash/restore would lose a step.
-		prevSignalRef.current = signal;
-
-		if (!prev || prev === signal) {
+		// Only an actual switch between two known signals swaps the columns;
+		// transient `undefined` states (mid query-edit) leave the selection intact.
+		if (!prev || !signal || prev === signal) {
 			return;
 		}
-
-		// Stash the leaving signal's columns; restore the entering one's, or its
-		// datasource defaults the first time it's seen.
-		columnsBySignalRef.current.set(prev, readSelectFields(spec));
-		const restored =
-			columnsBySignalRef.current.get(signal) ?? defaultColumnsForSignal(signal);
-		onChangeSpec(writeSelectFields(spec, restored));
+		onChangeSpec({
+			...spec,
+			plugin: {
+				...spec.plugin,
+				spec: {
+					...spec.plugin.spec,
+					selectFields: defaultColumnsForSignal(signal),
+				},
+			},
+		} as DashboardtypesPanelSpecDTO);
 	}, [enabled, signal, spec, onChangeSpec]);
 }

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

@@ -6,8 +6,8 @@ import {
 	useDefaultLayout,
 } from '@signozhq/ui/resizable';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	type DashboardtypesPanelDTO,
+import type {
+	DashboardtypesPanelDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -29,8 +29,6 @@ import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
-import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
 import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
@@ -41,10 +39,6 @@ interface PanelEditorContainerProps {
 	dashboardId: string;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
-	/** Creating a new panel (seeded default) vs editing an existing one. */
-	isNew?: boolean;
-	/** Target section for a new panel; falls back to the last/new section. */
-	layoutIndex?: number;
 	/** Leave the editor (navigate back to the dashboard) without saving. */
 	onClose: () => void;
 	/** Called after a successful save — navigates back to the dashboard. */
@@ -52,26 +46,19 @@ interface PanelEditorContainerProps {
 }
 
 /**
- * V2 panel editor page body: a resizable split with the live preview + query
- * builder on the left and the config pane on the right. Owns the draft state and
- * the save round-trip.
+ * V2 panel editor page body (rendered full-page by `PanelEditorPage`): a resizable
+ * split with the live preview + query builder on the left and the config pane on the
+ * right. Owns the draft state and the save round-trip.
  */
 function PanelEditorContainer({
 	dashboardId,
 	panelId,
 	panel,
-	isNew = false,
-	layoutIndex,
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
 	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
+	const { save, isSaving } = usePanelEditorSave({ dashboardId, panelId });
 	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
 		id: 'panel-editor-v2',
 		storage: layoutStorage,
@@ -92,44 +79,47 @@ function PanelEditorContainer({
 		PANEL_TYPES.TIME_SERIES;
 
 	// One shared query result for the whole editor; the preview renders it.
-	const panelDefinition = getPanelDefinition(draft.spec.plugin.kind);
-	const { data, isFetching, error, cancelQuery, refetch, pagination } =
-		usePanelQuery({
-			panel: draft,
-			panelId,
-			enabled: !!panelDefinition,
-		});
-
-	// A new panel's default signal (its kind's first supported) — seeds the query and columns.
-	const defaultSignal = panelDefinition.supportedSignals[0];
+	const panelDef = getPanelDefinition(draft.spec.plugin.kind);
+	const {
+		data,
+		isLoading,
+		isFetching,
+		error,
+		cancelQuery,
+		refetch,
+		pagination,
+	} = usePanelQuery({
+		panel: draft,
+		panelId,
+		enabled: !!panelDef,
+	});
 
+	// Seed the shared query builder from the draft and expose the Stage-&-Run action.
 	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
 		draft,
 		panelType,
 		setSpec,
 		refetch,
-		// New panel's seed query is the builder default, not a real saved query —
-		// always serialize it on save.
-		alwaysSerializeQuery: isNew,
-		signal: defaultSignal,
 	});
 
-	// Switch the panel's visualization kind in place (reversible per session).
-	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
-
 	// Spec and query dirtiness are tracked independently so query re-serialization
-	// never false-dirties. A new panel is always savable (you're creating it).
-	const isDirty = isNew || isSpecDirty || isQueryDirty;
+	// never false-dirties.
+	const isDirty = isSpecDirty || isQueryDirty;
+	// The List panel edits its columns below the query builder (V1 parity), so the
+	// editor container resolves the committed query's signal once and shares it
+	// with both the columns control and the datasource-switch effect below.
 	const isListPanel = fullKind === 'signoz/ListPanel';
 	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
 	// values; cast at this boundary (as ConfigPane does) so the columns editor's
 	// field-key lookup is typed.
-	const listSignal =
-		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
-		TelemetrytypesSignalDTO.logs;
+	const listSignal = getBuilderQueries(spec.queries)[0]?.signal as
+		| TelemetrytypesSignalDTO
+		| undefined;
 
-	// Swap the List panel's columns to the new signal's defaults on signal change
-	// (V1 had a per-signal field list; V2 has one `selectFields`).
+	// When the List panel's datasource changes, swap its columns to the new
+	// source's defaults (V1 kept a per-datasource field list; V2 has one
+	// `selectFields`). Driven by the committed query's signal, so it lives in the
+	// editor container alongside the query sync — ConfigPane stays presentational.
 	useSwitchColumnsOnSignalChange({
 		enabled: isListPanel,
 		signal: listSignal,
@@ -137,14 +127,6 @@ function PanelEditorContainer({
 		onChangeSpec: setSpec,
 	});
 
-	// Seed a new List panel's default columns so the Columns control isn't empty.
-	useSeedNewListColumns({
-		enabled: isNew && isListPanel,
-		signal: defaultSignal,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
 	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
 	const { onDragSelect } = usePanelInteractions();
 	const legendSeries = useLegendSeries(draft, data);
@@ -184,19 +166,17 @@ function PanelEditorContainer({
 							onLayoutChanged={onMainLayoutChanged}
 						>
 							<ResizablePanel minSize="55%" maxSize="65%" defaultSize="60%">
-								{panelDefinition && (
-									<PreviewPane
-										panelId={panelId}
-										panel={draft}
-										panelDefinition={panelDefinition}
-										data={data}
-										isFetching={isFetching}
-										error={error}
-										refetch={refetch}
-										onDragSelect={onDragSelect}
-										pagination={pagination}
-									/>
-								)}
+								<PreviewPane
+									panelId={panelId}
+									panel={draft}
+									panelDef={panelDef}
+									data={data}
+									isLoading={isLoading}
+									error={error}
+									refetch={refetch}
+									onDragSelect={onDragSelect}
+									pagination={pagination}
+								/>
 							</ResizablePanel>
 							<ResizableHandle withHandle className={styles.handle} />
 							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
@@ -230,7 +210,6 @@ function PanelEditorContainer({
 						panelKind={draft.spec.plugin.kind}
 						spec={spec}
 						onChangeSpec={setSpec}
-						onChangePanelKind={onChangePanelKind}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 					/>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute.ts

@@ -1,48 +0,0 @@
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from '../Panels/types/panelKind';
-
-// New (unsaved) panels share a fixed id segment, carrying kind + target section
-// in the query: `/panel/new?panelKind=signoz/ListPanel&layoutIndex=2`. The real
-// id is generated on save.
-export const NEW_PANEL_ID = 'new';
-const PANEL_KIND_PARAM = 'panelKind';
-const LAYOUT_INDEX_PARAM = 'layoutIndex';
-
-/** Query string (incl. leading `?`) for the new-panel editor route. */
-export function newPanelSearch(
-	panelKind: PanelKind,
-	layoutIndex?: number,
-): string {
-	const params = new URLSearchParams({ [PANEL_KIND_PARAM]: panelKind });
-	if (layoutIndex !== undefined) {
-		params.set(LAYOUT_INDEX_PARAM, String(layoutIndex));
-	}
-	return `?${params.toString()}`;
-}
-
-/**
- * The PanelKind a `panel/new` route is creating, or null when the id isn't the
- * new-panel sentinel or the `panelKind` param is missing/unknown (stale link).
- */
-export function parseNewPanelKind(
-	panelId: string,
-	search: string,
-): PanelKind | null {
-	if (panelId !== NEW_PANEL_ID) {
-		return null;
-	}
-	const kind = new URLSearchParams(search).get(PANEL_KIND_PARAM);
-	return kind && kind in PANEL_KIND_TO_PANEL_TYPE ? (kind as PanelKind) : null;
-}
-
-/** Target section index for a new panel, or undefined when unset/invalid. */
-export function parseNewPanelLayoutIndex(search: string): number | undefined {
-	const raw = new URLSearchParams(search).get(LAYOUT_INDEX_PARAM);
-	if (raw === null || raw === '') {
-		return undefined;
-	}
-	const n = Number(raw);
-	return Number.isNaN(n) ? undefined : n;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.module.scss

@@ -0,0 +1,11 @@
+.noData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.noDataText {
+	font-size: 14px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx

@@ -1,39 +1,27 @@
-import { Clock, RotateCw } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
 
-import PanelMessage from '../PanelMessage/PanelMessage';
+import styles from './NoData.module.scss';
 
 interface NoDataProps {
-	/** Title override. Defaults to the time-range empty-state copy. */
-	title?: string;
-	/** Description override. Defaults to the "widen the range" hint. */
-	description?: string;
-	/** When provided, renders a Retry button that re-runs the query. */
-	onRetry?: () => void;
+	/** Message to display. Defaults to "No data". */
+	label?: string;
 	'data-testid'?: string;
 }
 
 /**
- * Shared empty-state for panel renderers: wraps `PanelMessage` so every panel
- * kind surfaces the same "no data" affordance when a query returns nothing.
+ * Shared empty-state for panel renderers, shown when a query resolves but
+ * returns nothing to plot. Centred in the panel body so every panel kind
+ * surfaces the same "No data" affordance instead of each renderer (or its
+ * underlying chart) inventing its own copy and casing.
  */
 function NoData({
-	title = 'No data in this time range',
-	description = 'Nothing in the selected window. Try widening the range.',
-	onRetry,
+	label = 'No data',
 	'data-testid': testId = 'panel-no-data',
 }: NoDataProps): JSX.Element {
 	return (
-		<PanelMessage
-			icon={<Clock size={18} />}
-			title={title}
-			description={description}
-			action={
-				onRetry
-					? { label: 'Retry', onClick: onRetry, icon: <RotateCw size={14} /> }
-					: undefined
-			}
-			data-testid={testId}
-		/>
+		<div className={styles.noData} data-testid={testId}>
+			<Typography.Text className={styles.noDataText}>{label}</Typography.Text>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.module.scss

@@ -1,50 +0,0 @@
-// Centred, vertically-stacked panel state (no query / no data / error). Fills
-// the panel body below the header and centres its content both axes.
-.message {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 6px;
-	padding: 16px;
-	text-align: center;
-	min-height: 0;
-	min-width: 0;
-}
-
-// Muted glyph in a soft tinted disc so the icon reads as decorative chrome
-// rather than an actionable control.
-.icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 36px;
-	height: 36px;
-	margin-bottom: 4px;
-	border-radius: 8px;
-	color: var(--l2-foreground);
-	background: var(--l2-background);
-}
-
-.iconDanger {
-	color: var(--bg-cherry-500);
-	background: var(--bg-cherry-500-transparent, rgba(231, 64, 64, 0.12));
-}
-
-.title {
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-}
-
-.description {
-	font-size: 12px;
-	color: var(--l2-foreground);
-	max-width: 280px;
-	overflow-wrap: anywhere;
-}
-
-.action {
-	margin-top: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.tsx

@@ -1,68 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import styles from './PanelMessage.module.scss';
-
-export interface PanelMessageAction {
-	label: string;
-	onClick: () => void;
-	/** Optional leading icon for the action button. */
-	icon?: ReactElement;
-}
-
-interface PanelMessageProps {
-	/** Glyph shown above the title — sets the state's visual identity. */
-	icon: ReactNode;
-	title: string;
-	/** Secondary line explaining the state / suggesting a next step. */
-	description?: string;
-	/** Optional call-to-action (e.g. Retry). Omitted → no button. */
-	action?: PanelMessageAction;
-	/** `danger` tints the icon for failure states; `neutral` for empty states. */
-	tone?: 'neutral' | 'danger';
-	'data-testid'?: string;
-}
-
-/**
- * Shared centred panel state (icon + title + optional description/action) so the
- * no-query / no-data / error states stay visually consistent across call sites.
- */
-function PanelMessage({
-	icon,
-	title,
-	description,
-	action,
-	tone = 'neutral',
-	'data-testid': testId,
-}: PanelMessageProps): JSX.Element {
-	return (
-		<div className={styles.message} data-testid={testId}>
-			<div className={cx(styles.icon, { [styles.iconDanger]: tone === 'danger' })}>
-				{icon}
-			</div>
-			<Typography.Text className={styles.title}>{title}</Typography.Text>
-			{description && (
-				<Typography.Text className={styles.description}>
-					{description}
-				</Typography.Text>
-			)}
-			{action && (
-				<Button
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					prefix={action.icon}
-					onClick={action.onClick}
-					className={styles.action}
-					data-testid={testId ? `${testId}-action` : undefined}
-				>
-					{action.label}
-				</Button>
-			)}
-		</div>
-	);
-}
-
-export default PanelMessage;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/__tests__/PanelMessage.test.tsx

@@ -1,46 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import PanelMessage from '../PanelMessage';
-
-describe('PanelMessage', () => {
-	it('renders the icon, title and description', () => {
-		render(
-			<PanelMessage
-				icon={<svg data-testid="icon" />}
-				title="Nothing to visualize yet"
-				description="This panel has no query."
-				data-testid="panel-state"
-			/>,
-		);
-
-		expect(screen.getByTestId('panel-state')).toBeInTheDocument();
-		expect(screen.getByTestId('icon')).toBeInTheDocument();
-		expect(screen.getByText('Nothing to visualize yet')).toBeInTheDocument();
-		expect(screen.getByText('This panel has no query.')).toBeInTheDocument();
-	});
-
-	it('renders no action button when no action is provided', () => {
-		render(
-			<PanelMessage icon={null} title="No data" data-testid="panel-state" />,
-		);
-
-		expect(screen.queryByTestId('panel-state-action')).not.toBeInTheDocument();
-	});
-
-	it('renders the action button and fires onClick when pressed', () => {
-		const onClick = jest.fn();
-		render(
-			<PanelMessage
-				icon={null}
-				title="Couldn’t load panel data"
-				action={{ label: 'Retry', onClick }}
-				data-testid="panel-error"
-			/>,
-		);
-
-		const button = screen.getByTestId('panel-error-action');
-		expect(button).toHaveTextContent('Retry');
-		fireEvent.click(button);
-		expect(onClick).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -32,7 +32,6 @@ function BarPanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	onClick,
 	onDragSelect,
 	dashboardPreference,
@@ -43,8 +42,9 @@ function BarPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesBarChartPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => panel.spec.plugin.spec as DashboardtypesBarChartPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -138,7 +138,7 @@ function BarPanelRenderer({
 			data-testid="bar-panel-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
+			{flatSeries.length === 0 && <NoData />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
 	displayName: 'Bar Chart',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -3,10 +3,7 @@ import type { SectionConfig } from '../../types/sections';
 // Bar stacking lives in `visualization.stackedBarChart`, so it's a `visualization`
 // control, not `chartAppearance`. fillSpans is TimeSeries-only, so Bar omits it (V1 parity).
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true, stacking: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true, stacking: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true } },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -26,7 +26,6 @@ function HistogramPanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	panelMode,
 	onClick,
 }: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
@@ -35,8 +34,9 @@ function HistogramPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesHistogramPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => panel.spec.plugin.spec as DashboardtypesHistogramPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -113,7 +113,7 @@ function HistogramPanelRenderer({
 			data-testid="histogram-panel-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
+			{flatSeries.length === 0 && <NoData />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
 	displayName: 'Histogram',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -3,10 +3,6 @@ import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true },
-	},
 	{
 		kind: 'legend',
 		controls: { position: true },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/Renderer.tsx

@@ -26,14 +26,14 @@ import { useListRowInteraction } from './useListRowInteraction';
 
 import styles from './ListPanel.module.scss';
 
-// `body` flexes to fill remaining width; module-level to stay referentially stable for the resize hook's memo.
+// `body` flexes to fill the remaining table width (module-level so the resize
+// hook's memo dependency stays referentially stable across renders).
 const BODY_FLEX_COLUMNS = ['body'];
 
 function ListPanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	searchTerm = '',
 	pagination,
 }: PanelRendererProps<'signoz/ListPanel'>): JSX.Element {
@@ -42,14 +42,16 @@ function ListPanelRenderer({
 	const { height } = useResizeObserver(containerRef);
 	const { scrollY } = useMemo(() => computeTableLayout(height), [height]);
 
-	// `panel` is narrowed to this kind by PanelRendererProps, so no cast needed.
+	// The registry guarantees this Renderer only runs for `signoz/ListPanel`, so
+	// the cast is a documented boundary narrowing.
 	const spec = useMemo<DashboardtypesListPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesListPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
-	// Telemetry signal of the first builder query; drives flattening, cell rendering,
-	// and row-click behavior. Cast is safe — the query carries the same string values.
+	// Telemetry signal of the panel's first builder query — drives data flattening,
+	// per-signal cell rendering, and the row-click behavior (log drawer vs trace
+	// navigation). Cast at this boundary (the query carries the same string values).
 	const signal = useMemo(
 		() =>
 			(getBuilderQueries(panel.spec.queries)[0]
@@ -81,7 +83,7 @@ function ListPanelRenderer({
 		[table, signal, formatTimezoneAdjustedTimestamp],
 	);
 
-	// User-resizable columns, persisted per panel.
+	// User-resizable columns, persisted per panel; `body` flexes to fill width.
 	const { columns: resizableColumns, components } = useResizableColumns({
 		panelId,
 		columns,
@@ -90,7 +92,8 @@ function ListPanelRenderer({
 
 	const dataSource = useMemo(() => table?.rows ?? [], [table]);
 
-	// Header search filters the current page client-side (V1 parity); cross-page paging is server-side via `pagination`.
+	// Header search filters the current page client-side (V1 parity); paging
+	// across pages is server-side via `pagination`.
 	const filteredDataSource = useMemo(
 		() => filterTableRows(dataSource, searchTerm),
 		[dataSource, searchTerm],
@@ -112,7 +115,8 @@ function ListPanelRenderer({
 		[spec.selectFields],
 	);
 
-	// Show the footer whenever the panel pages server-side, so the page-size picker stays reachable (V1 parity).
+	// Show the footer whenever the panel pages server-side (no explicit query
+	// limit), so the page-size picker is always reachable — V1 parity.
 	const showPager = !!pagination;
 
 	return (
@@ -122,7 +126,7 @@ function ListPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData onRetry={refetch} />
+				<NoData />
 			) : (
 				<>
 					<div
@@ -138,7 +142,9 @@ function ListPanelRenderer({
 							components={components}
 							dataSource={filteredDataSource}
 							pagination={false}
-							// Vertical scroll only; `x: 'max-content'` forced a content-width min that pushed columns off-screen.
+							// Scroll the body vertically only — no `x: 'max-content'`, which
+							// forced a content-width min and pushed columns off-screen;
+							// `tableLayout="fixed"` fits them to the available width.
 							scroll={{ y: scrollY }}
 							onRow={onRow}
 						/>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/__tests__/Renderer.test.tsx

@@ -1,5 +1,6 @@
 import {
 	type DashboardtypesListPanelSpecDTO,
+	type DashboardtypesPanelDTO,
 	type QueryRangeV5200,
 } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
@@ -9,19 +10,16 @@ import type {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 import { fireEvent, render } from 'tests/test-utils';
 
-import type {
-	PanelOfKind,
-	PanelRendererProps,
-} from '../../../types/rendererProps';
+import { BaseRendererProps } from '../../../types/rendererProps';
 import ListPanelRenderer from '../Renderer';
 
 function panelWith(
 	spec: DashboardtypesListPanelSpecDTO,
-): PanelOfKind<'signoz/ListPanel'> {
+): DashboardtypesPanelDTO {
 	return {
 		kind: 'Panel',
 		spec: { plugin: { kind: 'signoz/ListPanel', spec } },
-	} as unknown as PanelOfKind<'signoz/ListPanel'>;
+	} as unknown as DashboardtypesPanelDTO;
 }
 
 // V5 raw response: one result carrying flattened log rows.
@@ -51,9 +49,9 @@ const emptyData: PanelQueryData = {
 };
 
 function renderPanel(
-	props: Partial<PanelRendererProps<'signoz/ListPanel'>>,
+	props: Partial<BaseRendererProps>,
 ): ReturnType<typeof render> {
-	const baseProps: PanelRendererProps<'signoz/ListPanel'> = {
+	const baseProps: BaseRendererProps = {
 		panelId: 'panel-1',
 		panel: panelWith({}),
 		data: emptyData,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -1,17 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
 	displayName: 'List',
 	Renderer,
 	// Raw records come from logs and traces; metrics don't produce row data.
-	supportedSignals: [
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.LOGS, DataSource.TRACES],
 	sections,
 	actions: {
 		view: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/sections.ts

@@ -1,8 +1,5 @@
 import type { SectionConfig } from '../../types/sections';
 
-export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true },
-	},
-];
+// List columns are edited below the query builder, not in the config pane, so
+// only Context Links shows here.
+export const sections: SectionConfig[] = [{ kind: 'contextLinks' }];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -16,10 +16,10 @@ import ValueDisplay from './components/ValueDisplay/ValueDisplay';
 function NumberPanelRenderer({
 	panel,
 	data,
-	refetch,
 }: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
+	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => panel.spec.plugin.spec as DashboardtypesNumberPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -60,7 +60,7 @@ function NumberPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{value === null ? (
-				<NoData data-testid="number-panel-no-data" onRetry={refetch} />
+				<NoData data-testid="number-panel-no-data" />
 			) : (
 				<ValueDisplay
 					value={formattedValue}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
 	displayName: 'Number',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts

@@ -1,10 +1,7 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'thresholds', controls: { variant: 'comparison' } },
 	{ kind: 'contextLinks' },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -20,13 +20,13 @@ function PiePanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	onClick,
 }: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
+	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesPieChartPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => panel.spec.plugin.spec as DashboardtypesPieChartPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -70,7 +70,7 @@ function PiePanelRenderer({
 	return (
 		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
 			{slices.length === 0 ? (
-				<NoData onRetry={refetch} />
+				<NoData />
 			) : (
 				<Pie
 					data={slices}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
 	displayName: 'Pie Chart',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -3,10 +3,7 @@ import type { SectionConfig } from '../../types/sections';
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend.
 // Legend `colors` is omitted: the pie legend is always interactive swatches.
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'legend', controls: { position: true } },
 	{ kind: 'contextLinks' },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx

@@ -25,10 +25,10 @@ function TablePanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	searchTerm = '',
 }: PanelRendererProps<'signoz/TablePanel'>): JSX.Element {
-	// Measure the panel so each page roughly fills it (min 10 rows) with a pinned header.
+	// Measure the panel so each page roughly fills it (min 10 rows) and the
+	// header stays pinned while the body scrolls.
 	const containerRef = useRef<HTMLDivElement>(null);
 	const { height } = useResizeObserver(containerRef);
 	const { pageSize, scrollY } = useMemo(
@@ -36,9 +36,12 @@ function TablePanelRenderer({
 		[height],
 	);
 
-	// `panel` is narrowed to this kind by PanelRendererProps, so no cast needed.
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/TablePanel'`, so the cast is a
+	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
+	// produce a fresh object on each render.
 	const spec = useMemo<DashboardtypesTablePanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesTablePanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -89,13 +92,15 @@ function TablePanelRenderer({
 		[table],
 	);
 
-	// Header search filters rows client-side (V1 parity); empty term returns the full set, so non-searching tables pay nothing.
+	// Header search filters rows client-side (V1 parity). Falls back to the full
+	// set when the term is empty, so non-searching tables pay nothing.
 	const filteredDataSource = useMemo(
 		() => filterTableRows(dataSource, searchTerm),
 		[dataSource, searchTerm],
 	);
 
-	// Snap back to page 1 on a new search term so the filtered set never lands on a now-empty page.
+	// Keep pagination in range as the filtered set shrinks: a new term snaps back
+	// to the first page so the user never lands on a now-empty page.
 	const [page, setPage] = useState(1);
 	useEffect(() => setPage(1), [searchTerm]);
 
@@ -106,7 +111,7 @@ function TablePanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData onRetry={refetch} />
+				<NoData />
 			) : (
 				<div className={styles.container}>
 					<Table

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/__tests__/Renderer.test.tsx

@@ -1,4 +1,5 @@
 import {
+	type DashboardtypesPanelDTO,
 	type DashboardtypesTablePanelSpecDTO,
 	type QueryRangeV5200,
 } from 'api/generated/services/sigNoz.schemas';
@@ -6,19 +7,16 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 import { render } from 'tests/test-utils';
 
-import type {
-	PanelOfKind,
-	PanelRendererProps,
-} from '../../../types/rendererProps';
+import { BaseRendererProps } from '../../../types/rendererProps';
 import TablePanelRenderer from '../Renderer';
 
 function panelWith(
 	spec: DashboardtypesTablePanelSpecDTO,
-): PanelOfKind<'signoz/TablePanel'> {
+): DashboardtypesPanelDTO {
 	return {
 		kind: 'Panel',
 		spec: { plugin: { kind: 'signoz/TablePanel', spec } },
-	} as unknown as PanelOfKind<'signoz/TablePanel'>;
+	} as unknown as DashboardtypesPanelDTO;
 }
 
 // V5 scalar response: one joined result with a group column + an aggregation column.
@@ -62,9 +60,9 @@ const emptyData: PanelQueryData = {
 };
 
 function renderPanel(
-	props: Partial<PanelRendererProps<'signoz/TablePanel'>>,
+	props: Partial<BaseRendererProps>,
 ): ReturnType<typeof render> {
-	const baseProps: PanelRendererProps<'signoz/TablePanel'> = {
+	const baseProps: BaseRendererProps = {
 		panelId: 'panel-1',
 		panel: panelWith({}),
 		data: emptyData,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
 	displayName: 'Table',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	// Tables carry tabular data worth exporting (V1 parity: download is table-only).
 	actions: {
 		view: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/sections.ts

@@ -4,10 +4,7 @@ import type { SectionConfig } from '../../types/sections';
 // single column set). It exposes the per-panel time scope, formatting (decimals +
 // per-column units), per-column thresholds, and context links.
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { decimals: true, columnUnits: true } },
 	{ kind: 'thresholds', controls: { variant: 'table' } },
 	{ kind: 'contextLinks' },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -32,7 +32,6 @@ function TimeSeriesPanelRenderer({
 	panelId,
 	panel,
 	data,
-	refetch,
 	onClick,
 	onDragSelect,
 	dashboardPreference,
@@ -43,8 +42,10 @@ function TimeSeriesPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	// The registry guarantees the kind, so the cast is a boundary narrowing.
+	// Memoized so the `?? {}` fallback doesn't produce a fresh object each render.
 	const spec = useMemo<DashboardtypesTimeSeriesPanelSpecDTO>(
-		() => panel.spec.plugin.spec,
+		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesTimeSeriesPanelSpecDTO,
 		[panel.spec.plugin.spec],
 	);
 
@@ -139,7 +140,7 @@ function TimeSeriesPanelRenderer({
 			data-testid="time-series-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
+			{flatSeries.length === 0 && <NoData />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,18 +1,15 @@
+import { DataSource } from 'types/common/queryBuilder';
+
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 	kind: 'signoz/TimeSeriesPanel',
 	displayName: 'Time Series',
 	Renderer,
 	sections,
-	supportedSignals: [
-		TelemetrytypesSignalDTO.metrics,
-		TelemetrytypesSignalDTO.logs,
-		TelemetrytypesSignalDTO.traces,
-	],
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -1,10 +1,7 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true, fillSpans: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true, fillSpans: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true, colors: true } },

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/registry.ts

@@ -11,7 +11,9 @@ import type {
 } from './types/panelDefinition';
 import { PanelKind } from './types/panelKind';
 
-// Each kind owns its PanelDefinition; registering a new panel is one entry here.
+// Pure assembly: each kind owns its own PanelDefinition (see
+// `kinds/<Kind>/definition.ts`). Registering a new panel = add its folder and a
+// single entry below — no other central file needs editing.
 export const PANELS: PanelRegistry = {
 	[TimeSeries.kind]: TimeSeries,
 	[BarChart.kind]: BarChart,
@@ -22,8 +24,15 @@ export const PANELS: PanelRegistry = {
 	[List.kind]: List,
 };
 
-export function getPanelDefinition(kind: PanelKind): RenderablePanelDefinition {
-	// Single intentional cast widening the per-kind Renderer to the kind-agnostic
-	// prop surface (a per-kind renderer can't be statically validated against the union).
-	return PANELS[kind] as RenderablePanelDefinition;
+export function getPanelDefinition(
+	kind: PanelKind,
+): RenderablePanelDefinition | undefined {
+	if (!kind) {
+		return undefined;
+	}
+	// The registry is correlated by kind, so a string lookup yields a union over
+	// every kind's exactly-typed definition. The renderer cannot be validated
+	// against that union at the JSX boundary, so widen to the kind-agnostic
+	// surface here — the single, intentional cast for the whole panel system.
+	return PANELS[kind] as unknown as RenderablePanelDefinition | undefined;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataSource } from 'types/common/queryBuilder';
 
 import type { SectionConfig } from './sections';
 import type { AnyPanelInteractionProps } from './interactions';
@@ -35,13 +35,12 @@ export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	displayName: string;
 	Renderer: ComponentType<PanelRendererProps<K>>;
 	sections: SectionConfig[];
-	supportedSignals: TelemetrytypesSignalDTO[];
+	supportedSignals: DataSource[];
 	actions: PanelActionCapabilities;
 }
 
-// Total over PanelKind: every kind must be registered (missing → compile error),
-// so getPanelDefinition never returns undefined.
-export type PanelRegistry = { [K in PanelKind]: PanelDefinition<K> };
+// Indexing with a literal kind yields that kind's exactly-typed PanelDefinition.
+export type PanelRegistry = { [K in PanelKind]?: PanelDefinition<K> };
 
 // PanelDefinition with its Renderer widened to the kind-agnostic prop surface.
 // getPanelDefinition resolves to this, concentrating the unavoidable cast in one

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps.ts

@@ -1,8 +1,4 @@
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelPluginDTO,
-	DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -26,59 +22,37 @@ export interface DashboardPreference {
 	dashboardId?: string;
 }
 
-/** Kind-agnostic props every renderer receives; kind-specific interactions are layered on by PanelRendererProps<K>. */
+// Kind-agnostic props every renderer receives. Kind-specific interaction props
+// are layered on per-kind by PanelRendererProps<K>.
 export interface BaseRendererProps {
 	panelId: string;
-	/** The whole panel — renderers derive `spec` and `queries` from it. Required: the render boundary only mounts once panel + kind resolve. */
+	/**
+	 * The whole perses panel — renderers derive `spec` and `queries` from this.
+	 * Required: the render boundary only mounts a renderer once the panel and its
+	 * kind are resolved, so a renderer never sees an absent panel.
+	 */
 	panel: DashboardtypesPanelDTO;
 	/** Raw V5 fetch result — response + the request that produced it. */
 	data: PanelQueryData;
 	isLoading: boolean;
 	error: Error | null;
-	/** Re-run the panel query; wired to the no-data Retry affordance. Optional so standalone call sites (e.g. the editor preview) can omit it. */
-	refetch?: () => void;
 	/** Gate for the drill-down right-click menu. Off by default in V2. */
 	enableDrillDown?: boolean;
 	/** Render context (dashboard widget vs. standalone vs. editor); see PanelMode. */
 	panelMode: PanelMode;
 	/** Dashboard-level preferences propagated to every panel; shell resolves, renderer consumes. */
 	dashboardPreference?: DashboardPreference;
-	/** Free-text header filter, applied client-side. Only meaningful for kinds that declare `actions.search`. */
+	/**
+	 * Free-text filter from the header search box, applied client-side. Only
+	 * meaningful for kinds that declare `actions.search`; others ignore it.
+	 */
 	searchTerm?: string;
 	/** Server-side paging handles. Present only for raw/list panels; others ignore it. */
 	pagination?: PanelPagination;
 }
 
-// The single plugin variant for kind K, picked from the generated plugin union.
-// Distributes over the union, coercing each member's nominal kind-enum to its
-// string value (`${VK & string}`) to match K. K = PanelKind recovers the full union.
-type PluginOfKind<K extends PanelKind> =
-	DashboardtypesPanelPluginDTO extends infer V
-		? V extends { kind: infer VK }
-			? `${VK & string}` extends K
-				? V
-				: never
-			: never
-		: never;
-
-// The panel narrowed to kind K: the wire DTO with `plugin` (and `plugin.spec`)
-// fixed to K's single variant, so a renderer reads `panel.spec.plugin.spec` as
-// its own spec type with no cast.
-export type PanelOfKind<K extends PanelKind = PanelKind> = Omit<
-	DashboardtypesPanelDTO,
-	'spec'
-> & {
-	spec: Omit<DashboardtypesPanelSpecDTO, 'plugin'> & {
-		plugin: PluginOfKind<K>;
-	};
-};
-
-// Renderer props for kind K: the base (with `panel` narrowed to K) plus K's
-// interaction surface (PanelInteractionMap[K]), so a renderer sees its exact spec
-// and only the gestures it supports. The default K = PanelKind is the widest surface.
-export type PanelRendererProps<K extends PanelKind = PanelKind> = Omit<
-	BaseRendererProps,
-	'panel'
-> & {
-	panel: PanelOfKind<K>;
-} & PanelInteractionMap[K];
+// Renderer props for a specific kind: shared base plus that kind's interaction
+// surface. Indexing PanelInteractionMap forces it to cover every PanelKind; the
+// default K = PanelKind yields the widest surface (a union over all kinds).
+export type PanelRendererProps<K extends PanelKind = PanelKind> =
+	BaseRendererProps & PanelInteractionMap[K];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts

@@ -89,11 +89,8 @@ export interface SectionControls {
 		spanGaps?: boolean;
 	};
 	buckets: { count?: boolean; width?: boolean; mergeQueries?: boolean };
-	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
-	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
-	// 0 (TimeSeries).
+	// stacking → stackedBarChart (Bar); fillSpans → fill gaps with 0 (TimeSeries).
 	visualization: {
-		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
 		fillSpans?: boolean;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/buildDefaultPluginSpec.test.ts

@@ -1,67 +0,0 @@
-import {
-	DashboardtypesFillModeDTO,
-	DashboardtypesLegendPositionDTO,
-	DashboardtypesLineInterpolationDTO,
-	DashboardtypesLineStyleDTO,
-	DashboardtypesTimePreferenceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { sections as barSections } from '../../kinds/BarChartPanel/sections';
-import { sections as histogramSections } from '../../kinds/HistogramPanel/sections';
-import { sections as listSections } from '../../kinds/ListPanel/sections';
-import { sections as timeSeriesSections } from '../../kinds/TimeSeriesPanel/sections';
-import type { SectionConfig } from '../../types/sections';
-import { buildDefaultPluginSpec } from '../buildDefaultPluginSpec';
-
-describe('buildDefaultPluginSpec', () => {
-	it('seeds the TimeSeries dropdowns/segmented controls with their renderer defaults', () => {
-		expect(buildDefaultPluginSpec(timeSeriesSections)).toStrictEqual({
-			visualization: {
-				timePreference: DashboardtypesTimePreferenceDTO.global_time,
-			},
-			legend: { position: DashboardtypesLegendPositionDTO.bottom },
-			chartAppearance: {
-				lineStyle: DashboardtypesLineStyleDTO.solid,
-				lineInterpolation: DashboardtypesLineInterpolationDTO.spline,
-				fillMode: DashboardtypesFillModeDTO.none,
-			},
-		});
-	});
-
-	it('omits chartAppearance for a kind that does not declare it (Bar)', () => {
-		expect(buildDefaultPluginSpec(barSections)).toStrictEqual({
-			visualization: {
-				timePreference: DashboardtypesTimePreferenceDTO.global_time,
-			},
-			legend: { position: DashboardtypesLegendPositionDTO.bottom },
-		});
-	});
-
-	it('seeds only the legend for Histogram (no visualization section)', () => {
-		expect(buildDefaultPluginSpec(histogramSections)).toStrictEqual({
-			legend: { position: DashboardtypesLegendPositionDTO.bottom },
-		});
-	});
-
-	it('returns an empty spec for a kind with no seeded controls (List)', () => {
-		expect(buildDefaultPluginSpec(listSections)).toStrictEqual({});
-	});
-
-	it('does not seed controls that already show a clear default', () => {
-		// `axes` and `formatting` stay unset — their empty state is the chart default.
-		const sections: SectionConfig[] = [
-			{ kind: 'axes', controls: { minMax: true, logScale: true } },
-			{ kind: 'formatting', controls: { unit: true, decimals: true } },
-			{ kind: 'thresholds', controls: { variant: 'label' } },
-			{ kind: 'contextLinks' },
-		];
-		expect(buildDefaultPluginSpec(sections)).toStrictEqual({});
-	});
-
-	it('only seeds the legend position when the kind exposes that control', () => {
-		const sections: SectionConfig[] = [
-			{ kind: 'legend', controls: { colors: true } },
-		];
-		expect(buildDefaultPluginSpec(sections)).toStrictEqual({});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/buildDefaultQueries.test.ts

@@ -1,20 +0,0 @@
-import { buildDefaultQueries } from '../buildDefaultQueries';
-
-describe('buildDefaultQueries', () => {
-	it('seeds a List panel with a runnable logs query ordered by timestamp desc', () => {
-		const queries = buildDefaultQueries('signoz/ListPanel');
-
-		expect(queries).toHaveLength(1);
-		// orderBy timestamp desc must survive serialization so the preview opens
-		// pre-sorted (V1 parity).
-		const serialized = JSON.stringify(queries);
-		expect(serialized).toContain('timestamp');
-		expect(serialized).toContain('desc');
-		expect(serialized.toLowerCase()).toContain('logs');
-	});
-
-	it('seeds no query for non-List kinds (they seed from the builder)', () => {
-		expect(buildDefaultQueries('signoz/TimeSeriesPanel')).toStrictEqual([]);
-		expect(buildDefaultQueries('signoz/NumberPanel')).toStrictEqual([]);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/getPanelQueryType.test.ts

@@ -1,50 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
-
-import { getPanelQueryType } from '../getPanelQueryType';
-
-function panelWithEnvelopes(envelopes: unknown[]): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'P' },
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries: envelopes.length
-				? [
-						{
-							spec: {
-								plugin: { kind: 'signoz/CompositeQuery', spec: { queries: envelopes } },
-							},
-						},
-					]
-				: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-describe('getPanelQueryType', () => {
-	it('returns undefined when the panel has no query', () => {
-		expect(getPanelQueryType(panelWithEnvelopes([]))).toBeUndefined();
-	});
-
-	it('reports the builder mode for builder queries', () => {
-		const panel = panelWithEnvelopes([
-			{ type: 'builder_query', spec: { signal: 'traces', name: 'A' } },
-		]);
-		expect(getPanelQueryType(panel)).toBe(EQueryType.QUERY_BUILDER);
-	});
-
-	it('reports PromQL when a promql envelope is present', () => {
-		const panel = panelWithEnvelopes([
-			{ type: 'promql', spec: { query: 'up', name: 'A' } },
-		]);
-		expect(getPanelQueryType(panel)).toBe(EQueryType.PROM);
-	});
-
-	it('reports ClickHouse when a clickhouse_sql envelope is present', () => {
-		const panel = panelWithEnvelopes([
-			{ type: 'clickhouse_sql', spec: { query: 'SELECT 1', name: 'A' } },
-		]);
-		expect(getPanelQueryType(panel)).toBe(EQueryType.CLICKHOUSE);
-	});
-});

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

@@ -1,69 +0,0 @@
-import {
-	DashboardtypesFillModeDTO,
-	DashboardtypesLegendPositionDTO,
-	DashboardtypesLineInterpolationDTO,
-	DashboardtypesLineStyleDTO,
-	DashboardtypesTimePreferenceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type { SectionConfig, SectionSpecMap } from '../types/sections';
-
-/**
- * Seeded plugin-spec slices, typed as canonical section slices so each value is
- * checked against its DTO. A partial cross-section, not any single kind's spec,
- * so the union cast stays localized to `createDefaultPanel`.
- */
-export interface DefaultPluginSpec {
-	visualization?: SectionSpecMap['visualization'];
-	legend?: SectionSpecMap['legend'];
-	chartAppearance?: SectionSpecMap['chartAppearance'];
-}
-
-/**
- * Seeds per-kind config defaults derived from the kind's declared `sections` so the
- * config pane opens populated. Values equal the renderer fallbacks (display only).
- * Controls whose empty state already IS the default are left unset.
- */
-export function buildDefaultPluginSpec(
-	sections: SectionConfig[],
-): DefaultPluginSpec {
-	const spec: DefaultPluginSpec = {};
-
-	sections.forEach((section) => {
-		switch (section.kind) {
-			case 'visualization':
-				if (section.controls.timePreference) {
-					spec.visualization = {
-						timePreference: DashboardtypesTimePreferenceDTO.global_time,
-					};
-				}
-				break;
-			case 'legend':
-				if (section.controls.position) {
-					spec.legend = { position: DashboardtypesLegendPositionDTO.bottom };
-				}
-				break;
-			case 'chartAppearance': {
-				const chartAppearance: SectionSpecMap['chartAppearance'] = {};
-				if (section.controls.lineStyle) {
-					chartAppearance.lineStyle = DashboardtypesLineStyleDTO.solid;
-				}
-				if (section.controls.lineInterpolation) {
-					chartAppearance.lineInterpolation =
-						DashboardtypesLineInterpolationDTO.spline;
-				}
-				if (section.controls.fillMode) {
-					chartAppearance.fillMode = DashboardtypesFillModeDTO.none;
-				}
-				if (Object.keys(chartAppearance).length > 0) {
-					spec.chartAppearance = chartAppearance;
-				}
-				break;
-			}
-			default:
-				break;
-		}
-	});
-
-	return spec;
-}

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

@@ -1,14 +0,0 @@
-import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
-import { listViewInitialLogQuery, PANEL_TYPES } from 'constants/queryBuilder';
-
-import { toPerses } from '../../queryV5/persesQueryAdapters';
-import { PANEL_KIND_TO_PANEL_TYPE, type PanelKind } from '../types/panelKind';
-
-/** Seed query for a new panel. Only List needs one (logs, timestamp desc) so its
- * preview runs on open; other kinds start empty and seed from the builder. */
-export function buildDefaultQueries(kind: PanelKind): DashboardtypesQueryDTO[] {
-	if (PANEL_KIND_TO_PANEL_TYPE[kind] === PANEL_TYPES.LIST) {
-		return toPerses(listViewInitialLogQuery, PANEL_TYPES.LIST);
-	}
-	return [];
-}

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

@@ -1,20 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
-
-import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
-import { deriveQueryType } from '../../queryV5/persesQueryAdapters';
-
-/**
- * The authoring mode (builder / ClickHouse / PromQL) of a panel's query. Returns
- * `undefined` when the panel has no query yet so callers can hide query-type chrome
- * (e.g. the editor preview's "Plotted with" tag) rather than defaulting to builder.
- */
-export function getPanelQueryType(
-	panel: DashboardtypesPanelDTO,
-): EQueryType | undefined {
-	const envelopes = toQueryEnvelopes(panel.spec.queries);
-	if (envelopes.length === 0) {
-		return undefined;
-	}
-	return deriveQueryType(envelopes);
-}

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

@@ -1,12 +1,11 @@
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 
 import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
 import landscapeUrl from '@/assets/Icons/landscape.svg';
 
-import { useCreatePanel } from '../../hooks/useCreatePanel';
-import PanelTypeSelectionModal from '../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import styles from './DashboardEmptyState.module.scss';
 
 interface DashboardEmptyStateProps {
@@ -16,8 +15,9 @@ interface DashboardEmptyStateProps {
 function DashboardEmptyState({
 	canAddPanel,
 }: DashboardEmptyStateProps): JSX.Element {
-	const { isPickerOpen, openPicker, closePicker, createPanel } =
-		useCreatePanel();
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 
 	return (
 		<section className={styles.emptyState}>
@@ -48,7 +48,7 @@ function DashboardEmptyState({
 						<Button
 							color="primary"
 							prefix={<Plus size="md" />}
-							onClick={(): void => openPicker()}
+							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
 							testId="add-panel"
 						>
 							New Panel
@@ -56,11 +56,6 @@ function DashboardEmptyState({
 					)}
 				</div>
 			</div>
-			<PanelTypeSelectionModal
-				open={isPickerOpen}
-				onClose={closePicker}
-				onSelect={createPanel}
-			/>
 		</section>
 	);
 }

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

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesTimePreferenceDTO,
+	DashboardtypesPanelPluginKindDTO as PanelKind,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { panelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
@@ -10,12 +12,15 @@ import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/us
 import type { DashboardSection } from '../../utils';
 import { usePanelInteractions } from './hooks/usePanelInteractions';
 import PanelBody from './PanelBody/PanelBody';
+import UnsupportedPanelBody from './PanelBody/UnsupportedPanelBody';
 import PanelHeader from './PanelHeader/PanelHeader';
 import styles from './Panel.module.scss';
 
 /**
- * Layout context for the panel actions menu — present only in editable mode. No
- * callbacks: the menu resolves its own mutations from store-backed hooks.
+ * Layout context for the panel actions menu — pure data, present only in
+ * editable mode. No callbacks: the menu resolves its own mutations from
+ * store-backed hooks (useDeletePanel / useMovePanelToSection), and edit is
+ * URL-driven (useOpenPanelEditor).
  */
 export interface PanelActionsConfig {
 	currentLayoutIndex: number;
@@ -32,8 +37,10 @@ interface PanelProps {
 }
 
 /**
- * A single dashboard panel (header + body). Thin orchestrator: fetching lives in
- * `usePanelQuery`, interactions in `usePanelInteractions`, state in `PanelBody`.
+ * A single dashboard panel: chrome (header) + content (body). Thin orchestrator
+ * — data fetching lives in `usePanelQuery`, cross-panel interactions in
+ * `usePanelInteractions`, and the loading/error/chart state machine in
+ * `PanelBody`.
  */
 function Panel({
 	panel,
@@ -41,15 +48,17 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	const name = panel.spec.display.name;
+	const name = panel.spec.display?.name;
 	const description = panel.spec.display?.description;
-	const fullKind = panel.spec.plugin.kind;
+	const fullKind = panel.spec.plugin?.kind as unknown as PanelKind;
+	const kind = fullKind?.replace(/^signoz\//, '') ?? 'unknown';
+	const queryCount = panel.spec.queries?.length ?? 0;
 
-	// A per-panel time preference is surfaced as a header pill. `visualization` is
-	// common to every plugin-spec variant — localized cast reads it without
-	// narrowing on kind.
+	// A per-panel relative time preference (anything other than global_time) is
+	// surfaced as a pill in the header. `visualization` is common to every
+	// plugin-spec variant — localized cast reads it without narrowing on kind.
 	const timePreference = (
-		panel.spec.plugin.spec as
+		panel.spec.plugin?.spec as
 			| { visualization?: { timePreference?: DashboardtypesTimePreferenceDTO } }
 			| undefined
 	)?.visualization?.timePreference;
@@ -57,28 +66,41 @@ function Panel({
 
 	const panelDefinition = getPanelDefinition(fullKind);
 
-	// Header search: only kinds that declare it render the box. The term is owned
-	// here and threaded to both the header (input) and renderer (filter).
+	// Header search: only kinds that declare it (e.g. tables) render the box; the
+	// term is owned here and threaded to both the header (input) and the renderer
+	// (filter), the two being siblings under this orchestrator.
 	const searchable = !!panelDefinition?.actions.search;
 	const [searchTerm, setSearchTerm] = useState('');
 
-	const { data, isFetching, error, refetch, pagination } = usePanelQuery({
-		panel,
-		panelId,
-		// Lazy: fetch only once on screen (undefined → visible) and a renderer exists.
-		enabled: !!panelDefinition && isVisible !== false,
-	});
+	const { data, isLoading, isFetching, error, refetch, pagination } =
+		usePanelQuery({
+			panel,
+			panelId,
+			// Lazy: only fetch once the section is on screen (undefined → treat as
+			// visible) and a renderer exists for the kind.
+			enabled: !!panelDefinition && isVisible !== false,
+		});
 
 	const { onDragSelect, dashboardPreference } = usePanelInteractions();
 
+	const headerTitle = useMemo(() => {
+		if (!description) {
+			return name;
+		}
+		return (
+			<TooltipSimple title={description}>
+				<span>{name}</span>
+			</TooltipSimple>
+		);
+	}, [name, description]);
+
 	return (
 		<div
 			className={styles.panel}
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
 			<PanelHeader
-				name={name}
-				description={description}
+				title={headerTitle}
 				panelId={panelId}
 				panelKind={fullKind}
 				isFetching={isFetching}
@@ -90,13 +112,13 @@ function Panel({
 				searchTerm={searchTerm}
 				onSearchChange={setSearchTerm}
 			/>
-			{panelDefinition && (
+			{panelDefinition ? (
 				<PanelBody
 					panelDefinition={panelDefinition}
 					panel={panel}
 					panelId={panelId}
 					data={data}
-					isLoading={isFetching}
+					isLoading={isLoading}
 					error={error}
 					refetch={refetch}
 					onDragSelect={onDragSelect}
@@ -104,6 +126,9 @@ function Panel({
 					searchTerm={searchable ? searchTerm : undefined}
 					pagination={pagination}
 				/>
+			) : (
+				// TODO: remove this after all panel kinds are supported
+				<UnsupportedPanelBody kind={kind} queryCount={queryCount} />
 			)}
 		</div>
 	);

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

@@ -1,4 +1,5 @@
-// Generic centred body — used by the loading indicator.
+// Generic centred body — used by the loading indicator and the
+// unsupported-kind fallback.
 .body {
 	flex: 1;
 	display: flex;
@@ -10,6 +11,10 @@
 	text-align: center;
 }
 
+.bodyKind {
+	margin-bottom: 6px;
+}
+
 // Container for the rendered chart — fills the panel below the header and lets
 // the chart shrink (min-* 0) so it resizes with the grid cell.
 .chartContainer {
@@ -18,3 +23,26 @@
 	min-height: 0;
 	min-width: 0;
 }
+
+// Error state — shown only when there's no stale data to fall back to.
+.error {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 12px;
+	text-align: center;
+}
+
+.errorIcon {
+	color: var(--bg-cherry-500);
+}
+
+.errorMessage {
+	color: var(--l2-foreground);
+	font-size: 12px;
+	max-width: 90%;
+	overflow-wrap: anywhere;
+}

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

@@ -1,11 +1,11 @@
 import { Spin } from 'antd';
-import { Loader, RotateCw, SquarePlus, TriangleAlert } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { Loader, TriangleAlert } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import PanelMessage from 'pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
-import { hasRunnableQueries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
 import type {
 	PanelPagination,
 	PanelQueryData,
@@ -15,7 +15,8 @@ import { panelStatusFromError } from '../PanelStatus/utils';
 import styles from './PanelBody.module.scss';
 
 interface PanelBodyProps {
-	/** Resolved renderer for the panel kind (`Panel` handles the unsupported case). */
+	/** Resolved renderer for the panel kind — always present (`Panel` renders the
+	 * unsupported fallback itself when none is registered). */
 	panelDefinition: RenderablePanelDefinition;
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
@@ -35,8 +36,13 @@ interface PanelBodyProps {
 }
 
 /**
- * Renders a panel's body as a state machine: not-configured / error+no-data /
- * first-load / renderer. The renderer keeps stale data mounted across refetches.
+ * Renders a panel whose kind has a registered renderer, as an explicit state
+ * machine:
+ *
+ *   error + no data → error message with retry
+ *   first load (no data) → loading indicator
+ *   otherwise → the kind's renderer (owns its own "No Data" state and keeps
+ *               stale data mounted during background refetches)
  */
 function PanelBody({
 	panelDefinition,
@@ -52,39 +58,25 @@ function PanelBody({
 	searchTerm,
 	pagination,
 }: PanelBodyProps): JSX.Element {
-	// react-query keeps the previous response during refetches, so its presence is
-	// the "have something to show" signal — only fail hard when there's nothing.
+	// react-query keeps the previous response during background refetches, so
+	// `data.response` presence is the "have something to show" signal — surface a
+	// hard failure only when there's nothing to keep on screen.
 	const hasData = !!data.response;
 
-	// Not-configured panel: no runnable query, so nothing to error/load on.
-	if (!hasRunnableQueries(panel.spec.queries)) {
-		return (
-			<PanelMessage
-				icon={<SquarePlus size={18} />}
-				title="Nothing to visualize yet"
-				description="This panel has no query. Add one to start plotting data."
-				data-testid="panel-no-query"
-			/>
-		);
-	}
-
 	if (error && !hasData) {
-		// Parse the API error (as the header popover does) to show the backend
-		// message, not the raw axios "status code 4xx".
+		// Parse the API error like the header popover does, so the body shows the
+		// backend message (not the raw axios "status code 4xx").
 		const errorDetail = panelStatusFromError(error);
 		return (
-			<PanelMessage
-				icon={<TriangleAlert size={18} />}
-				tone="danger"
-				title="Couldn’t load panel data"
-				description={errorDetail?.message || 'Something went wrong while fetching.'}
-				action={{
-					label: 'Retry',
-					onClick: refetch,
-					icon: <RotateCw size={14} />,
-				}}
-				data-testid="panel-error"
-			/>
+			<div className={styles.error} data-testid="panel-error">
+				<TriangleAlert size={20} className={styles.errorIcon} />
+				<Typography.Text className={styles.errorMessage}>
+					{errorDetail?.message || 'Failed to load panel data'}
+				</Typography.Text>
+				<Button variant="outlined" color="secondary" onClick={refetch}>
+					Retry
+				</Button>
+			</div>
 		);
 	}
 
@@ -106,7 +98,6 @@ function PanelBody({
 				data={data}
 				isLoading={isLoading}
 				error={error}
-				refetch={refetch}
 				onDragSelect={onDragSelect}
 				panelMode={panelMode}
 				enableDrillDown={false}

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

@@ -0,0 +1,30 @@
+import styles from './PanelBody.module.scss';
+
+interface UnsupportedPanelBodyProps {
+	/** Short, signoz-prefix-stripped panel kind (e.g. "TablePanel"). */
+	kind: string;
+	queryCount: number;
+}
+
+/**
+ * Body shown when no renderer is registered for the panel's kind. Split out so
+ * `PanelBody` only ever runs with a resolved renderer.
+ */
+function UnsupportedPanelBody({
+	kind,
+	queryCount,
+}: UnsupportedPanelBodyProps): JSX.Element {
+	return (
+		<div className={styles.body} data-testid="panel-unknown-kind-fallback">
+			<div>
+				<div className={styles.bodyKind}>{kind} panel</div>
+				<div>
+					{queryCount} {queryCount === 1 ? 'query' : 'queries'} · not yet supported
+					in V2
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default UnsupportedPanelBody;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/__tests__/PanelBody.test.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-import PanelBody from '../PanelBody';
-
-// Stub the renderer so these tests focus on PanelBody's state machine.
-const MockRenderer = (): JSX.Element => <div data-testid="mock-renderer" />;
-
-const panelDefinition = {
-	Renderer: MockRenderer,
-} as unknown as RenderablePanelDefinition;
-
-function panelWith(queries: unknown[]): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'P' },
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries,
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-const baseProps = {
-	panelDefinition,
-	panelId: 'p1',
-	data: {} as PanelQueryData,
-	isLoading: false,
-	error: null,
-	refetch: jest.fn(),
-	onDragSelect: jest.fn(),
-};
-
-describe('PanelBody', () => {
-	it('shows the not-configured state when the panel has no runnable query', () => {
-		render(<PanelBody {...baseProps} panel={panelWith([])} />);
-
-		expect(screen.getByTestId('panel-no-query')).toBeInTheDocument();
-		expect(screen.getByText('Nothing to visualize yet')).toBeInTheDocument();
-		expect(screen.queryByTestId('mock-renderer')).not.toBeInTheDocument();
-	});
-
-	it('renders the kind renderer once a runnable query is present', () => {
-		const panel = panelWith([
-			{
-				spec: {
-					plugin: {
-						kind: 'signoz/CompositeQuery',
-						spec: {
-							queries: [
-								{ type: 'builder_query', spec: { signal: 'traces', name: 'A' } },
-							],
-						},
-					},
-				},
-			},
-		]);
-
-		render(<PanelBody {...baseProps} panel={panel} />);
-
-		expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
-		expect(screen.queryByTestId('panel-no-query')).not.toBeInTheDocument();
-	});
-});

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

@@ -53,8 +53,3 @@
 	border: 1px solid var(--l3-border);
 	cursor: default;
 }
-
-.descriptionTooltip {
-	max-width: 240px;
-	padding: 12px;
-}

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

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
-import { Info, Loader } from '@signozhq/icons';
+import { useMemo, type ReactNode } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import type { Querybuildertypesv5QueryWarnDataDTO as WarningDTO } from 'api/generated/services/sigNoz.schemas';
+import { Loader } from '@signozhq/icons';
 import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 
@@ -18,10 +18,9 @@ import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface PanelHeaderProps {
-	name: string;
-	description?: string;
+	title: ReactNode;
 	panelId: string;
-	/** Full plugin kind — drives kind-gated menu actions. */
+	/** Full plugin kind — drives kind-gated menu actions; */
 	panelKind: PanelKind;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
 	isFetching: boolean;
@@ -39,18 +38,11 @@ interface PanelHeaderProps {
 	searchTerm?: string;
 	/** Pushes a new search term up to the shell. */
 	onSearchChange?: (value: string) => void;
-	/**
-	 * Suppress the actions menu entirely — for the editor preview, where
-	 * panel-level actions don't apply (some survive their gates without
-	 * `panelActions`, so omitting it isn't enough).
-	 */
-	hideActions?: boolean;
 }
 
 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
 function PanelHeader({
-	name,
-	description,
+	title,
 	panelId,
 	panelKind,
 	isFetching,
@@ -61,7 +53,6 @@ function PanelHeader({
 	searchable,
 	searchTerm = '',
 	onSearchChange,
-	hideActions,
 }: PanelHeaderProps): JSX.Element {
 	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);
 
@@ -73,20 +64,7 @@ function PanelHeader({
 	return (
 		<div className={cx(styles.header, 'panel-drag-handle')}>
 			<div className={styles.headerLeft}>
-				<Typography.Text className={styles.headerTitle}>{name}</Typography.Text>
-				{description && (
-					<TooltipSimple
-						title={description}
-						arrow
-						tooltipContentProps={{ className: styles.descriptionTooltip }}
-					>
-						<Info
-							className={styles.headerInfoIcon}
-							size={14}
-							data-testid="panel-header-info-icon"
-						/>
-					</TooltipSimple>
-				)}
+				<Typography.Text className={styles.headerTitle}>{title}</Typography.Text>
 				{isFetching && (
 					<Loader
 						size={12}
@@ -95,8 +73,8 @@ function PanelHeader({
 					/>
 				)}
 			</div>
-			{/* `panel-no-drag` opts this region out of the drag handle so clicks hit
-			    the controls instead of starting a panel drag. */}
+			{/* `panel-no-drag` opts this region out of the grid drag handle so the
+			    actions menu is clickable instead of starting a panel drag. */}
 			<div className={cx('panel-no-drag', styles.actions)}>
 				{searchable && onSearchChange && (
 					<PanelHeaderSearch value={searchTerm ?? ''} onChange={onSearchChange} />
@@ -113,13 +91,11 @@ function PanelHeader({
 					<PanelStatusPopover variant="warning" detail={warningDetail} />
 				)}
 				{/* Renders nothing when no action survives its gates (kind/role/context). */}
-				{!hideActions && (
-					<PanelActionsMenu
-						panelId={panelId}
-						panelKind={panelKind}
-						panelActions={panelActions}
-					/>
-				)}
+				<PanelActionsMenu
+					panelId={panelId}
+					panelKind={panelKind}
+					panelActions={panelActions}
+				/>
 			</div>
 		</div>
 	);

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

@@ -1,14 +1,13 @@
 import { Modal } from 'antd';
 import { Button } from '@signozhq/ui/button';
 
-import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
 import styles from './PanelTypeSelectionModal.module.scss';
 
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (pluginKind: PanelKind) => void;
+	onSelect: (pluginKind: string) => void;
 }
 
 function PanelTypeSelectionModal({

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

@@ -15,11 +15,7 @@ export const PANEL_TYPES: PanelType[] = [
 		label: 'Time Series',
 		icon: <ChartLine size={16} />,
 	},
-	{
-		pluginKind: 'signoz/NumberPanel',
-		label: 'Number',
-		icon: <Hash size={16} />,
-	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
 	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
 	{
 		pluginKind: 'signoz/BarChartPanel',

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -1,7 +1,5 @@
-import type { PanelKind } from '../../../Panels/types/panelKind';
-
 export interface PanelType {
-	pluginKind: PanelKind;
+	pluginKind: string;
 	label: string;
 	icon: JSX.Element;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/PanelHeader.test.tsx

@@ -7,23 +7,23 @@ import type { Warning } from 'types/api';
 import PanelHeader from '../PanelHeader/PanelHeader';
 import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
-// Status indicators use a radix tooltip, which needs a TooltipProvider ancestor
-// (supplied globally by AppLayout at runtime).
+// PanelHeader's status indicators render a radix tooltip, which needs a
+// TooltipProvider ancestor (supplied globally by AppLayout at runtime).
 const renderWithProvider = (ui: ReactElement): ReturnType<typeof render> =>
 	render(<TooltipProvider>{ui}</TooltipProvider>);
 
-// Stub the actions menu (its gating logic is tested separately) so this asserts
-// only whether the menu mounts, per the `hideActions` switch.
+// The actions menu has its own gating logic (kind/role/context) and its own
+// tests; stub it so this test exercises only the header's status indicators.
 jest.mock(
 	'../PanelActionsMenu/PanelActionsMenu',
 	() =>
-		function MockPanelActionsMenu(): ReactElement {
-			return <div data-testid="panel-actions-menu" />;
+		function MockPanelActionsMenu(): null {
+			return null;
 		},
 );
 
 const baseProps = {
-	name: 'My panel',
+	title: 'My panel',
 	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
 	panelId: 'panel-1',
 	isFetching: false,
@@ -36,27 +36,6 @@ const warning: Warning = {
 	warnings: [],
 };
 
-describe('PanelHeader title and description', () => {
-	it('renders the panel name', () => {
-		renderWithProvider(<PanelHeader {...baseProps} />);
-		expect(screen.getByText('My panel')).toBeInTheDocument();
-	});
-
-	it('shows the description info icon when a description is provided', () => {
-		renderWithProvider(
-			<PanelHeader {...baseProps} description="What this panel measures" />,
-		);
-		expect(screen.getByTestId('panel-header-info-icon')).toBeInTheDocument();
-	});
-
-	it('renders no description info icon when there is no description', () => {
-		renderWithProvider(<PanelHeader {...baseProps} />);
-		expect(
-			screen.queryByTestId('panel-header-info-icon'),
-		).not.toBeInTheDocument();
-	});
-});
-
 describe('PanelHeader status indicators', () => {
 	it('shows the error indicator whenever an error is present', () => {
 		renderWithProvider(<PanelHeader {...baseProps} error={new Error('boom')} />);
@@ -97,8 +76,8 @@ describe('PanelHeader search', () => {
 
 		await user.click(screen.getByTestId('panel-header-search-trigger'));
 
-		// Input is controlled to a fixed `searchTerm`, so each keystroke reports a
-		// single character — one is enough to confirm changes propagate.
+		// The input is controlled to the (fixed) `searchTerm` here, so each keystroke
+		// reports a single character — assert one to confirm changes are propagated.
 		const input = screen.getByTestId('panel-header-search-input');
 		await user.type(input, 'f');
 		expect(onSearchChange).toHaveBeenCalledWith('f');
@@ -124,18 +103,6 @@ describe('PanelHeader search', () => {
 	});
 });
 
-describe('PanelHeader actions menu', () => {
-	it('mounts the actions menu by default', () => {
-		renderWithProvider(<PanelHeader {...baseProps} />);
-		expect(screen.getByTestId('panel-actions-menu')).toBeInTheDocument();
-	});
-
-	it('hides the actions menu when hideActions is set (editor preview)', () => {
-		renderWithProvider(<PanelHeader {...baseProps} hideActions />);
-		expect(screen.queryByTestId('panel-actions-menu')).not.toBeInTheDocument();
-	});
-});
-
 describe('PanelHeader time-preference pill', () => {
 	it('shows the pill with the short label when the panel overrides the dashboard time', () => {
 		renderWithProvider(

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

@@ -0,0 +1,73 @@
+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> => {
+			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/useClonePanel.ts

@@ -59,6 +59,7 @@ export function useClonePanel({
 				}),
 			);
 
+			// toast.promise reports the failure, so no separate error modal here.
 			toast.promise(clone, {
 				loading: 'Cloning panel…',
 				success: 'Panel cloned',
@@ -66,13 +67,13 @@ export function useClonePanel({
 				position: 'top-center',
 			});
 
-			// Refetch only on success; toast.promise owns the error UX, so swallow
-			// the rejection to avoid an unhandled rejection.
+			// Refetch only on success; swallow the rejection (toast owns the error
+			// UX) to avoid an unhandled rejection.
 			try {
 				await clone;
 				refetch();
 			} catch {
-				// no-op
+				// no-op — toast.promise owns the error UX.
 			}
 		},
 		[sections, dashboardId, refetch],

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

@@ -3,10 +3,11 @@ import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 
 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
-import { useCreatePanel } from '../../../hooks/useCreatePanel';
 import type { DashboardSection } from '../../../utils';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
 import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import { useDeleteSection } from '../hooks/useDeleteSection';
@@ -21,16 +22,24 @@ import styles from './Section.module.scss';
 
 interface SectionProps {
 	section: DashboardSection;
+	/** Adds a panel to this section; present only in editable sectioned mode. */
+	onAddPanel?: (args: AddPanelArgs) => void;
 	/** All sections — layout context for the panel menu's move/delete actions. */
 	sections?: DashboardSection[];
 	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
 	dragHandle?: SectionDragHandle;
 }
 
-function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
+function Section({
+	section,
+	onAddPanel,
+	sections,
+	dragHandle,
+}: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const { isPickerOpen, openPicker, closePicker, createPanel } =
-		useCreatePanel();
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
@@ -56,6 +65,15 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 		[rename],
 	);
 
+	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const handleSelectPanelType = useCallback(
+		(pluginKind: string): void => {
+			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+			setIsAddingPanel(false);
+		},
+		[onAddPanel, section.layoutIndex],
+	);
+
 	const { deleteSection } = useDeleteSection({ section });
 	const handleDeleteSection = useCallback((): void => {
 		void deleteSection();
@@ -103,7 +121,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 					isEditable
 						? {
 								onRename: (): void => setIsRenaming(true),
-								onAddPanel: (): void => openPicker(section.layoutIndex),
+								onAddPanel: (): void => setIsAddingPanel(true),
 								onDeleteSection: (): void => setIsDeleteOpen(true),
 							}
 						: undefined
@@ -120,7 +138,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 								variant="dashed"
 								color="secondary"
 								prefix={<Plus size="md" />}
-								onClick={(): void => openPicker(section.layoutIndex)}
+								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
 								testId={`section-add-panel-${section.id}`}
 							>
 								New Panel
@@ -138,9 +156,9 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 				onSubmit={handleRenameSubmit}
 			/>
 			<PanelTypeSelectionModal
-				open={isPickerOpen}
-				onClose={closePicker}
-				onSelect={createPanel}
+				open={isAddingPanel}
+				onClose={(): void => setIsAddingPanel(false)}
+				onSelect={handleSelectPanelType}
 			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}

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

@@ -11,6 +11,7 @@ import {
 import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { DashboardSection } from '../../utils';
+import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { useSectionDragReorder } from './hooks/useSectionDragReorder';
 import Section from './Section/Section';
@@ -34,6 +35,8 @@ function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
 		onDragCancel,
 	} = useSectionDragReorder({ sections, layouts });
 
+	const onAddPanel = useAddPanelToSection({ sections });
+
 	// Only titled sections participate in reordering; untitled (free-flow)
 	// blocks render in place without a drag handle.
 	const sortableIds = useMemo(
@@ -63,9 +66,19 @@ function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
 			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
 				{orderedSections.map((section) =>
 					section.title ? (
-						<SortableSection key={section.id} section={section} sections={sections} />
+						<SortableSection
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+						/>
 					) : (
-						<Section key={section.id} section={section} sections={sections} />
+						<Section
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+						/>
 					),
 				)}
 			</SortableContext>

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

@@ -2,16 +2,19 @@ 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 Section from './Section/Section';
 
 interface SortableSectionProps {
 	section: DashboardSection;
 	sections: DashboardSection[];
+	onAddPanel: (args: AddPanelArgs) => void;
 }
 
 function SortableSection({
 	section,
 	sections,
+	onAddPanel,
 }: SortableSectionProps): JSX.Element {
 	const {
 		attributes,
@@ -38,6 +41,7 @@ function SortableSection({
 			<Section
 				section={section}
 				sections={sections}
+				onAddPanel={onAddPanel}
 				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
 			/>
 		</div>

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

@@ -1,142 +0,0 @@
-import type {
-	DashboardGridItemDTO,
-	DashboardtypesLayoutDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { createDefaultPanel, createPanelOps } from '../patchOps';
-
-function item(y: number, height: number): DashboardGridItemDTO {
-	return { x: 0, y, width: 6, height, content: { $ref: '#/spec/panels/x' } };
-}
-
-function itemAt(
-	x: number,
-	y: number,
-	width: number,
-	height: number,
-): DashboardGridItemDTO {
-	return { x, y, width, height, content: { $ref: '#/spec/panels/x' } };
-}
-
-function section(items: DashboardGridItemDTO[]): DashboardtypesLayoutDTO {
-	return {
-		kind: 'Grid',
-		spec: { display: { title: 'S' }, items },
-	} as DashboardtypesLayoutDTO;
-}
-
-describe('createDefaultPanel', () => {
-	it('builds a Panel of the given kind with no queries (filled in on save)', () => {
-		const panel = createDefaultPanel('signoz/NumberPanel');
-		expect(panel.kind).toBe('Panel');
-		expect(panel.spec.plugin.kind).toBe('signoz/NumberPanel');
-		expect(panel.spec.queries).toStrictEqual([]);
-		expect(panel.spec.display.name).toBe('New panel');
-	});
-});
-
-describe('createPanelOps', () => {
-	const panel = createDefaultPanel('signoz/TimeSeriesPanel');
-
-	it('adds the panel + a grid item in the requested section', () => {
-		const layouts = [section([item(0, 6)]), section([])];
-		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
-
-		expect(ops).toHaveLength(2);
-		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/panels/p1' });
-		expect(ops[1]).toMatchObject({
-			op: 'add',
-			path: '/spec/layouts/0/spec/items/-',
-		});
-		expect((ops[1].value as DashboardGridItemDTO).content?.$ref).toBe(
-			'#/spec/panels/p1',
-		);
-	});
-
-	it('fills the empty right half of a row instead of wrapping to a new one', () => {
-		// Left half filled → new 6-wide panel fits at x:6 in the same row.
-		const layouts = [section([item(0, 6)])];
-		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
-
-		const value = ops[1].value as DashboardGridItemDTO;
-		expect(value.x).toBe(6);
-		expect(value.y).toBe(0);
-	});
-
-	it('wraps to a new row when the last row is full', () => {
-		// Full-width (12) row leaves no room → panel drops to the next row.
-		const layouts = [section([itemAt(0, 0, 12, 6)])];
-		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
-
-		const value = ops[1].value as DashboardGridItemDTO;
-		expect(value.x).toBe(0);
-		expect(value.y).toBe(6);
-	});
-
-	it('ignores a gap in an upper row and only fills the last row', () => {
-		// Upper-row gap is ignored when the last row is full → starts a fresh row.
-		const layouts = [section([itemAt(0, 0, 6, 6), itemAt(0, 6, 12, 6)])];
-		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
-
-		const value = ops[1].value as DashboardGridItemDTO;
-		expect(value.x).toBe(0);
-		expect(value.y).toBe(12);
-	});
-
-	it('fills the right of the last row when it has room', () => {
-		// Half-filled last row → panel sits at x:6 of that row.
-		const layouts = [section([itemAt(0, 0, 12, 6), itemAt(0, 6, 6, 6)])];
-		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
-
-		const value = ops[1].value as DashboardGridItemDTO;
-		expect(value.x).toBe(6);
-		expect(value.y).toBe(6);
-	});
-
-	it('checks the last row of the target section only, not other sections', () => {
-		// Placement uses the target section's (1) last row, ignoring section 0's gap.
-		const layouts = [
-			section([itemAt(0, 0, 6, 6)]),
-			section([itemAt(0, 0, 12, 6)]),
-		];
-		const ops = createPanelOps({ layouts, layoutIndex: 1, panelId: 'p1', panel });
-
-		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
-		const value = ops[1].value as DashboardGridItemDTO;
-		expect(value.x).toBe(0);
-		expect(value.y).toBe(6);
-	});
-
-	it('falls back to the last section when no index is requested', () => {
-		const layouts = [section([]), section([item(0, 6)])];
-		const ops = createPanelOps({
-			layouts,
-			layoutIndex: undefined,
-			panelId: 'p1',
-			panel,
-		});
-
-		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
-	});
-
-	it('falls back to the last section when the requested index is out of range', () => {
-		const layouts = [section([])];
-		const ops = createPanelOps({ layouts, layoutIndex: 5, panelId: 'p1', panel });
-		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
-	});
-
-	it('creates a section first when the dashboard has none', () => {
-		const ops = createPanelOps({
-			layouts: [],
-			layoutIndex: undefined,
-			panelId: 'p1',
-			panel,
-		});
-
-		expect(ops).toHaveLength(3);
-		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/layouts/-' });
-		expect(ops[1]).toMatchObject({ op: 'add', path: '/spec/panels/p1' });
-		expect(ops[2].path).toBe('/spec/layouts/0/spec/items/-');
-		expect((ops[2].value as DashboardGridItemDTO).y).toBe(0);
-	});
-});