docs: fix the signoz docs troubleshooting guide url

* chore: metricName to post body for POST /api/v2/metrics/{metric_name}/metadata

* chore: metricName to query param for GET /api/v2/metrics/{metric_name}/metadata

* chore: added metricName in api get metric attributes

* chore: highlights api modified

* chore: alerts api modified

* chore: dashboards api modified

* chore: description added for metric_name query params

* feat(metrics-explorer): integrate metricName query/body API change in frontend (#11818)

* feat(metrics-explorer): integrate metricName query/body API change in frontend

The metrics-explorer endpoints moved metric_name off the URL path: the
five GETs (attributes, metadata, highlights, alerts, dashboards) now take
a required `metricName` query param, and POST /metadata reads metricName
from the request body.

- Regenerate the orval client from the updated openapi spec, so the GET
  helpers build `/api/v2/metrics/<op>?metricName=...` (URL-encoded, so
  slashed cloud metric names work) and updateMetricMetadata posts to
  `/api/v2/metrics/metadata` with metricName in the body.
- Collapse the useGetMetricAttributes call to the single merged params
  object (metricName + start/end).
- Drop the now-removed pathParams wrapper from both updateMetricMetadata
  call sites; the payload builders already include metricName in the body.
- Update the Metadata test to assert metricName inside the request body.

* revert(metrics-explorer): drop slashed-metric-name band-aid guards

These two defensive guards were added as temporary workarounds for the
metric_name-with-slash bug (SigNoz/signoz#11527, #11528), which returned
200 + HTML instead of JSON. The root cause is fixed by moving metricName
to a query/body param, so the band-aids are no longer needed and revert
to the original intended code.

- MetricDetails.tsx: `!metricMetadataResponse?.data` -> `!metricMetadataResponse`
- AllAttributes.tsx: `?.data?.attributes` -> `?.data.attributes`

* chore: added description for metricName query params

---------

Co-authored-by: Ashwin Bhatkal <ashwin96@gmail.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

.github/workflows/goci.yaml

@@ -140,3 +140,20 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate config web-settings
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in web settings schema. Run go run cmd/enterprise/*.go generate config web-settings locally and commit."; exit 1)
+  transaction-groups:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-transaction-groups
+        run: |
+          go run cmd/enterprise/*.go generate config transaction-groups
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in transaction groups schema. Run go run cmd/enterprise/*.go generate config transaction-groups locally and commit."; exit 1)

cmd/genconfig.go

@@ -6,12 +6,15 @@ import (
 	"reflect"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/web"
 	"github.com/spf13/cobra"
 	"github.com/swaggest/jsonschema-go"
 )
 
-const webSettingsSchemaPath = "docs/config/web-settings.json"
+const webSettingsSchemaPath = "frontend/src/schemas/generated/webSettings.schema.json"
+
+const transactionGroupsSchemaPath = "frontend/src/schemas/generated/transactionGroups.schema.json"
 
 func registerGenerateConfig(parentCmd *cobra.Command) {
 	configCmd := &cobra.Command{
@@ -27,6 +30,14 @@ func registerGenerateConfig(parentCmd *cobra.Command) {
 		},
 	})
 
+	configCmd.AddCommand(&cobra.Command{
+		Use:   "transaction-groups",
+		Short: "Generate JSON Schema for transaction groups",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return generateTransactionGroups()
+		},
+	})
+
 	parentCmd.AddCommand(configCmd)
 }
 
@@ -52,6 +63,7 @@ func generateWebSettings() error {
 		return err
 	}
 
+	schema.WithTitle("WebSettings")
 	data, err := json.MarshalIndent(schema, "", "  ")
 	if err != nil {
 		return err
@@ -59,3 +71,31 @@ func generateWebSettings() error {
 
 	return os.WriteFile(webSettingsSchemaPath, append(data, '\n'), 0o600)
 }
+
+func generateTransactionGroups() error {
+	falseVal := false
+	noAdditional := jsonschema.SchemaOrBool{TypeBoolean: &falseVal}
+
+	reflector := jsonschema.Reflector{}
+	reflector.DefaultOptions = append(reflector.DefaultOptions,
+		jsonschema.InterceptSchema(func(params jsonschema.InterceptSchemaParams) (bool, error) {
+			if params.Value.Kind() == reflect.Struct {
+				params.Schema.AdditionalProperties = &noAdditional
+			}
+			return false, nil
+		}),
+	)
+
+	schema, err := reflector.Reflect(authtypes.TransactionGroups{})
+	if err != nil {
+		return err
+	}
+
+	schema.WithTitle("TransactionGroups")
+	data, err := json.MarshalIndent(schema, "", "  ")
+	if err != nil {
+		return err
+	}
+
+	return os.WriteFile(transactionGroupsSchemaPath, append(data, '\n'), 0o600)
+}

deploy/MIGRATION.md

@@ -1,48 +1,76 @@
-# Migrating from the install script to Foundry
+# Migrating from the install script and `deploy/` to Foundry
+
+The install script (`install.sh`) and the bundled Compose and Swarm files
+under `deploy/` are deprecated in favor of [Foundry][foundry], the supported
+way to install and manage SigNoz. This guide moves an existing Docker Compose
+or Docker Swarm deployment to Foundry and reattaches your existing volumes, so
+your data is preserved.
 
 > [!IMPORTANT]
-> The install script is now deprecated and will no longer receive updates.
+> This guide is only for **existing** `install.sh` / `deploy/` deployments.
+> Setting up SigNoz for the first time? Skip migration and install Foundry
+> directly: [SigNoz install docs][install-docs].
 
-This guide walks you through migrating an existing SigNoz deployment running via
-Docker Compose to [Foundry](https://signoz.io/docs/install/docker/).
+## How it works
 
-> [!NOTE]
-> Setting up SigNoz for the first time? You don't need this guide — follow the [SigNoz installation docs](https://signoz.io/docs/install/) instead.
+Foundry splits a deployment into two commands:
 
-## Overview
-To stay up to date on new installation platforms and patterns, please refer to [Foundry](https://github.com/SigNoz/foundry).
+- `foundryctl forge` generates the deployment manifests from a `casting.yaml`.
+  It never touches running containers, so it is safe to re-run while you
+  iterate.
+- `foundryctl cast` applies those manifests: it (re)creates the containers and
+  reuses the volumes you point it at.
 
-Two `foundryctl` commands are used throughout this guide:
-- **`forge`** — generates deployment manifests from your `casting.yaml`. It does not touch running containers, so it is safe to re-run while you iterate.
-- **`cast`** — applies the generated manifests: it creates and starts the containers (and pulls new images).
+You write one `casting.yaml`, point a few patches at your existing data
+volumes, then cast. The steps below are the same for Compose and Swarm; they
+differ only in the casting (step 3) and how you stop the old stack (step 5).
 
 ## Prerequisites
-- [ ] Install Foundry - `curl -fsSL https://signoz.io/foundry.sh | bash`
 
-## Migration Steps
-> [!WARNING]
-> **Before proceeding, back up both:**
-> - **Your docker volumes** — these hold your data.
-> - **Your existing `docker-compose.yaml` (and any config it references)** — keep a copy somewhere safe. The compose manifests are no longer distributed by SigNoz, so this backup is your only way to roll back to your previous setup.
+- An existing SigNoz deployment from `install.sh` or `deploy/` (Compose or
+  Swarm).
+- `foundryctl` (installed in step 1).
 
-1. Make a note of the volume names used by your existing deployment for the following components:
-- ClickHouse
-- SigNoz
-- ZooKeeper
+## Migrate
 
-> If you used the docker compose file we provided, the volumes will be `signoz-clickhouse`, `signoz-sqlite`, and `signoz-zookeeper-1`.
+### 1. Install Foundry
 
-2. Generate your `casting.yaml`. Based on internal testing, the following casting should generate the manifests that mimic the legacy docker compose setup (compare against your backed-up `docker-compose.yaml`). Once created, run `foundryctl forge -f casting.yaml`.
+```bash
+curl -fsSL https://signoz.io/foundry.sh | bash
+```
 
-Foundry has a [Docker Compose example](https://github.com/SigNoz/foundry/tree/main/docs/examples/docker/compose). Please use it as a reference.
+### 2. Keep your rollback path
 
-> [!WARNING]
-> If your deployment had more than 1 shard or replica, you will need to adjust your manifest volumes accordingly.
+This migration reattaches your existing volumes in place; it does not move or
+delete your data. The only destructive action is passing `--volumes` / `-v`
+when you stop the old stack (step 5), so avoid that flag.
 
 > [!IMPORTANT]
-> The `replica` and `shard` macros below are placeholders. Replace them with the values from your existing ClickHouse configuration (check the `macros` section of your current ClickHouse config, e.g. `config.xml`/`metrika.xml`), otherwise the generated manifests will not match your existing data.
+> Keep a copy of your existing `docker-compose.yaml` / stack file (and any
+> config it references). SigNoz no longer distributes these files, so this copy
+> is your only way to roll back.
+
+### 3. Write your `casting.yaml`
+
+Use the casting for your deployment. Both reproduce the legacy single-node
+setup (ClickHouse + ZooKeeper + SQLite) and reattach your existing volumes;
+they differ only in `spec.deployment.flavor` and the volume-reuse patch
+(Compose volumes have a `name` to replace; Swarm volumes are bare, so the whole
+entry is replaced). If your deployment ran more than one shard or replica,
+adjust the volume patches accordingly. The
+[Docker Compose example][compose-example] is a useful reference.
+
+> [!IMPORTANT]
+> The `replica` and `shard` macros are placeholders. Replace them with the
+> values from your existing ClickHouse config (the `macros` section of
+> `config.xml` / `metrika.xml`), or the generated manifests will not match your
+> existing data.
+
+<details>
+<summary><b>Docker Compose</b> casting.yaml</summary>
 
 ```yaml
+# casting.yaml
 apiVersion: v1alpha1
 kind: Installation
 metadata:
@@ -61,8 +89,8 @@ spec:
         data:
           config-0-0.yaml: |
             macros:
-              replica: "example01-01-1" # replace with your existing ClickHouse replica macro (see legacy configuration files for reference)
-              shard: "01"               # replace with your existing ClickHouse shard macro (see legacy configuration files for reference)
+              replica: "example01-01-1" # replace with your replica macro
+              shard: "01" # replace with your shard macro
   patches:
     - target: "deployment/compose.yaml"
       operations:
@@ -80,50 +108,165 @@ spec:
           value: root
 ```
 
-> [!NOTE]
-> The `user: root` patch on the ZooKeeper service is required so the container can read/write the data in your reused ZooKeeper volume, which was created with `root`-owned files by the legacy compose setup. Without it, ZooKeeper may fail to start with permission errors.
+</details>
 
-If you had custom configurations for features like SMTP or additional ingestion processors/receivers, you will need to include those in your casting file via [patches](https://github.com/SigNoz/foundry/blob/main/docs/concepts/patches.md), [custom configuration](https://github.com/SigNoz/foundry/blob/main/docs/concepts/moldings.md#custom-config-files) or [environment variables](https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md#molding-spec) based on your previous configuration.
+<details>
+<summary><b>Docker Swarm</b> casting.yaml</summary>
 
-3. Review your manifests, we suggest executing the following checks on your manifests before proceeding:
-- [ ] Validate the container images match what your deployment had, Foundry uses `latest` on generation by default.
-- [ ] If your signoz version was older than latest, please check the [upgrade path](https://signoz.io/docs/operate/upgrade/) first.
-- [ ] Check the produced manifests in `pours/deployment` match your older configurations. Extra consideration and review needs to be done on `compose.yaml` as this will be the main entry point for your new deployment.
-- [ ] The configuration files for clickhouse are now in YAML so validate your custom settings are present.
+```yaml
+# casting.yaml
+apiVersion: v1alpha1
+kind: Installation
+metadata:
+  name: signoz
+spec:
+  deployment:
+    flavor: swarm
+    mode: docker
+  metastore:
+    kind: sqlite
+  telemetrykeeper:
+    kind: zookeeper
+  telemetrystore:
+    spec:
+      config:
+        data:
+          config-0-0.yaml: |
+            macros:
+              replica: "example01-01-1" # replace with your replica macro
+              shard: "01" # replace with your shard macro
+  patches:
+    - target: "deployment/compose.yaml"
+      operations:
+        - op: replace
+          path: /volumes/signoz-telemetrykeeper-0-data
+          value:
+            name: signoz-zookeeper-1
+        - op: replace
+          path: /volumes/signoz-telemetrystore-0-0-data
+          value:
+            name: signoz-clickhouse
+        - op: replace
+          path: /volumes/signoz-metastore-sqlite-0-data
+          value:
+            name: signoz-sqlite
+        - op: add
+          path: /services/signoz-telemetrykeeper-zookeeper-0/user
+          value: root
+```
 
-4. Execute a `docker compose down`. **Do not** include parameters such as `--volumes` (or `-v`), as it will wipe the volumes we need to maintain and reuse to avoid data loss. 
+</details>
 
 > [!NOTE]
-> This will generate downtime so please plan accordingly.
+> The `user: root` patch on the ZooKeeper service lets the container read and
+> write the data in your reused ZooKeeper volume, whose files the legacy setup
+> created as `root`. Without it, ZooKeeper may fail to start with permission
+> errors.
 
-5. Validate the SigNoz containers are down with `docker ps -a`. Multiple containers cannot bind the same volume.
+If you had custom configuration (SMTP, extra ingestion receivers/processors,
+or custom ClickHouse settings), carry it over via [patches][patches],
+[custom config files][custom-config], or [environment variables][env-vars].
 
-6. Run `foundryctl cast -f casting.yaml`. This will recreate the containers based on the spec. This process will download new container images.
+### 4. Generate and review the manifests
+
+```bash
+foundryctl forge -f casting.yaml
+```
+
+Review `pours/deployment/` before deploying:
+
+- [ ] Container images match your current deployment. Foundry generates with
+  `latest` by default; if your SigNoz version was older than latest, check the
+  [upgrade path][upgrade-path] first.
+- [ ] The generated manifests match your previous configuration, especially
+  `compose.yaml` (the new entry point for your deployment).
+- [ ] The ClickHouse config is now YAML rather than XML; confirm your custom
+  settings carried over (see [ClickHouse configuration files][ch-config] for
+  the XML-to-YAML mapping).
+
+### 5. Stop the old deployment
+
+Use the command for your deployment. Do **not** pass `--volumes` / `-v`; that
+would delete the data you are migrating.
+
+```bash
+docker compose down        # Compose
+docker stack rm signoz     # Swarm
+```
 
 > [!NOTE]
-> When `cast` is run, the migration container will execute its migrations.
+> This causes downtime, so plan accordingly.
 
-## Verifying the Migration
-- SigNoz containers will be up and running.
-- Log in to the SigNoz UI and verify that data is present.
-    - Signoz will run on localhost:8080
-- Validate that your data ingestion is receiving data.
-    - Ingesters will receive data on localhost:4317(grpc) and localhost:4318(http)
-- Review the logs from both ClickHouse and ZooKeeper; no errors should be present.
+Confirm nothing is still bound to the volumes before continuing:
 
-## Rolling Back
-Because step 4 brought the legacy stack down *without* `-v`, your original volumes
-are untouched and still hold your data. To roll back:
+```bash
+docker ps -a
+```
 
-- Stop and remove the containers created by Foundry (`docker compose down`, again without `-v`).
-- Confirm the containers are gone with `docker ps -a` so nothing else is bound to the volumes.
-- Reapply your original docker compose file (`docker compose up -d`). It will reattach to the
-  existing volumes and restore your prior state.
+### 6. Deploy with Foundry
+
+```bash
+foundryctl cast -f casting.yaml
+```
+
+This recreates the containers against your existing volumes and pulls the
+images. The migration container runs the schema migrations as part of `cast`.
+
+**Prefer not to use `cast`?** The manifests in `pours/deployment/` are standard
+Docker artifacts you can apply yourself. Run the command from that directory so
+the relative config paths resolve:
+
+```bash
+cd pours/deployment
+docker compose up -d                        # Compose
+docker stack deploy -c compose.yaml signoz  # Swarm
+```
+
+## Verify
+
+- All SigNoz containers are running.
+- The UI is reachable on `http://localhost:8080`, and OTLP on `4317` (gRPC)
+  and `4318` (HTTP), so already-instrumented apps and saved bookmarks keep
+  working.
+- Your existing data is present in the UI, and new data is being ingested.
+- ClickHouse and ZooKeeper logs show no errors.
+
+## Roll back
+
+Step 5 left your volumes untouched, so your data is intact. To return to the
+previous setup:
+
+1. Bring down the Foundry deployment (`docker compose down` or
+   `docker stack rm signoz`, again without `-v`).
+2. Confirm the containers are gone with `docker ps -a`.
+3. Re-apply your backed-up stack: `docker compose up -d` (Compose) or
+   `docker stack deploy -c docker-compose.yaml signoz` (Swarm). It reattaches
+   the same volumes and restores your prior state.
 
 ## Troubleshooting
-- Please reach out to our community on [Slack](https://signoz.io/slack).
+
+If the migration runs into trouble, see
+[Troubleshooting Foundry][troubleshooting] for how to capture what we need to
+help (the `--debug` output, the exit code, and your `casting.yaml`), then reach
+out on [Slack][slack].
 
 ## References
-- [SigNoz Docker installation docs](https://signoz.io/docs/install/docker/)
-- [SigNoz documentation](https://signoz.io/docs)
-- [Foundry](https://github.com/SigNoz/foundry)
+
+- [Foundry][foundry]
+- [Casting file reference][casting-ref]
+- [Custom config files][custom-config]
+- [Patches][patches]
+- [SigNoz documentation][signoz-docs]
+
+[foundry]: https://github.com/SigNoz/foundry
+[install-docs]: https://signoz.io/docs/install/
+[compose-example]: https://github.com/SigNoz/foundry/tree/main/docs/examples/docker/compose
+[patches]: https://github.com/SigNoz/foundry/blob/main/docs/concepts/patches.md
+[custom-config]: https://github.com/SigNoz/foundry/blob/main/docs/concepts/moldings.md#custom-config-files
+[env-vars]: https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md#molding-spec
+[casting-ref]: https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md
+[ch-config]: https://clickhouse.com/docs/operations/configuration-files
+[upgrade-path]: https://signoz.io/docs/operate/upgrade/
+[troubleshooting]: https://signoz.io/docs/setup/foundry/troubleshooting/faq/
+[slack]: https://signoz.io/slack
+[signoz-docs]: https://signoz.io/docs

docs/api/openapi.yml

@@ -651,8 +651,6 @@ components:
           $ref: '#/components/schemas/AuthtypesTransactionGroups'
       required:
       - name
-      - description
-      - transactionGroups
       type: object
     AuthtypesPostableRotateToken:
       properties:
@@ -2407,6 +2405,46 @@ components:
         to_user:
           type: string
       type: object
+    CoretypesKind:
+      enum:
+      - anonymous
+      - organization
+      - role
+      - serviceaccount
+      - user
+      - notification-channel
+      - route-policy
+      - apdex-setting
+      - auth-domain
+      - session
+      - cloud-integration
+      - cloud-integration-service
+      - integration
+      - dashboard
+      - public-dashboard
+      - ingestion-key
+      - ingestion-limit
+      - pipeline
+      - user-preference
+      - org-preference
+      - quick-filter
+      - ttl-setting
+      - rule
+      - planned-maintenance
+      - saved-view
+      - trace-funnel
+      - factor-password
+      - factor-api-key
+      - license
+      - subscription
+      - logs
+      - traces
+      - metrics
+      - audit-logs
+      - meter-metrics
+      - logs-field
+      - traces-field
+      type: string
     CoretypesObject:
       properties:
         resource:
@@ -2448,7 +2486,7 @@ components:
     CoretypesResourceRef:
       properties:
         kind:
-          type: string
+          $ref: '#/components/schemas/CoretypesKind'
         type:
           $ref: '#/components/schemas/CoretypesType'
       required:
@@ -15662,16 +15700,20 @@ paths:
       summary: List metric names
       tags:
       - metrics
-  /api/v2/metrics/{metric_name}/alerts:
+  /api/v2/metrics/alerts:
     get:
       deprecated: false
       description: This endpoint returns associated alerts for a specified metric
       operationId: GetMetricAlerts
       parameters:
-      - in: path
-        name: metric_name
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
         required: true
         schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15726,28 +15768,36 @@ paths:
       summary: Get metric alerts
       tags:
       - metrics
-  /api/v2/metrics/{metric_name}/attributes:
+  /api/v2/metrics/attributes:
     get:
       deprecated: false
       description: This endpoint returns attribute keys and their unique values for
         a specified metric
       operationId: GetMetricAttributes
       parameters:
-      - in: query
-        name: start
-        schema:
-          nullable: true
-          type: integer
-      - in: query
-        name: end
-        schema:
-          nullable: true
-          type: integer
-      - in: path
-        name: metric_name
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
         required: true
         schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
           type: string
+      - description: Start of the time range as a Unix timestamp in milliseconds.
+        in: query
+        name: start
+        schema:
+          description: Start of the time range as a Unix timestamp in milliseconds.
+          nullable: true
+          type: integer
+      - description: End of the time range as a Unix timestamp in milliseconds.
+        in: query
+        name: end
+        schema:
+          description: End of the time range as a Unix timestamp in milliseconds.
+          nullable: true
+          type: integer
       responses:
         "200":
           content:
@@ -15801,16 +15851,20 @@ paths:
       summary: Get metric attributes
       tags:
       - metrics
-  /api/v2/metrics/{metric_name}/dashboards:
+  /api/v2/metrics/dashboards:
     get:
       deprecated: false
       description: This endpoint returns associated dashboards for a specified metric
       operationId: GetMetricDashboards
       parameters:
-      - in: path
-        name: metric_name
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
         required: true
         schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15865,17 +15919,21 @@ paths:
       summary: Get metric dashboards
       tags:
       - metrics
-  /api/v2/metrics/{metric_name}/highlights:
+  /api/v2/metrics/highlights:
     get:
       deprecated: false
       description: This endpoint returns highlights like number of datapoints, totaltimeseries,
         active time series, last received time for a specified metric
       operationId: GetMetricHighlights
       parameters:
-      - in: path
-        name: metric_name
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
         required: true
         schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15930,17 +15988,79 @@ paths:
       summary: Get metric highlights
       tags:
       - metrics
-  /api/v2/metrics/{metric_name}/metadata:
+  /api/v2/metrics/inspect:
+    post:
+      deprecated: false
+      description: Returns raw time series data points for a metric within a time
+        range (max 30 minutes). Each series includes labels and timestamp/value pairs.
+      operationId: InspectMetrics
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsRequest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsResponse'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Inspect raw metric data points
+      tags:
+      - metrics
+  /api/v2/metrics/metadata:
     get:
       deprecated: false
       description: This endpoint returns metadata information like metric description,
         unit, type, temporality, monotonicity for a specified metric
       operationId: GetMetricMetadata
       parameters:
-      - in: path
-        name: metric_name
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
         required: true
         schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -16000,12 +16120,6 @@ paths:
       description: This endpoint helps to update metadata information like metric
         description, unit, type, temporality, monotonicity for a specified metric
       operationId: UpdateMetricMetadata
-      parameters:
-      - in: path
-        name: metric_name
-        required: true
-        schema:
-          type: string
       requestBody:
         content:
           application/json:
@@ -16046,64 +16160,6 @@ paths:
       summary: Update metric metadata
       tags:
       - metrics
-  /api/v2/metrics/inspect:
-    post:
-      deprecated: false
-      description: Returns raw time series data points for a metric within a time
-        range (max 30 minutes). Each series includes labels and timestamp/value pairs.
-      operationId: InspectMetrics
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsResponse'
-                  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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Inspect raw metric data points
-      tags:
-      - metrics
   /api/v2/metrics/onboarding:
     get:
       deprecated: false

frontend/package.json

@@ -25,7 +25,7 @@
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
     "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:config:web-settings": "json2ts ../docs/config/web-settings.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM docs/config/web-settings.json */'"
+    "generate:config:web-settings": "json2ts ./src/schemas/generated/webSettings.schema.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM frontend/src/schemas/generated/webSettings.schema.json */'"
   },
   "engines": {
     "node": ">=22.0.0",

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

@@ -19,16 +19,15 @@ import type {
 
 import type {
 	GetMetricAlerts200,
-	GetMetricAlertsPathParameters,
+	GetMetricAlertsParams,
 	GetMetricAttributes200,
 	GetMetricAttributesParams,
-	GetMetricAttributesPathParameters,
 	GetMetricDashboards200,
-	GetMetricDashboardsPathParameters,
+	GetMetricDashboardsParams,
 	GetMetricHighlights200,
-	GetMetricHighlightsPathParameters,
+	GetMetricHighlightsParams,
 	GetMetricMetadata200,
-	GetMetricMetadataPathParameters,
+	GetMetricMetadataParams,
 	GetMetricsOnboardingStatus200,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
@@ -40,7 +39,6 @@ import type {
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
 	RenderErrorResponseDTO,
-	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -146,27 +144,26 @@ export const invalidateListMetrics = async (
  * @summary Get metric alerts
  */
 export const getMetricAlerts = (
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAlerts200>({
-		url: `/api/v2/metrics/${metricName}/alerts`,
+		url: `/api/v2/metrics/alerts`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricAlertsQueryKey = ({
-	metricName,
-}: GetMetricAlertsPathParameters) => {
-	return [`/api/v2/metrics/${metricName}/alerts`] as const;
+export const getGetMetricAlertsQueryKey = (params?: GetMetricAlertsParams) => {
+	return [`/api/v2/metrics/alerts`, ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -177,19 +174,13 @@ export const getGetMetricAlertsQueryOptions = <
 ) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricAlertsQueryKey({ metricName });
+	const queryKey = queryOptions?.queryKey ?? getGetMetricAlertsQueryKey(params);
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getMetricAlerts>>> = ({
 		signal,
-	}) => getMetricAlerts({ metricName }, signal);
+	}) => getMetricAlerts(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAlerts>>,
 		TError,
 		TData
@@ -209,7 +200,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -218,7 +209,7 @@ export function useGetMetricAlerts<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAlertsQueryOptions({ metricName }, options);
+	const queryOptions = getGetMetricAlertsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -232,11 +223,11 @@ export function useGetMetricAlerts<
  */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAlertsQueryKey({ metricName }) },
+		{ queryKey: getGetMetricAlertsQueryKey(params) },
 		options,
 	);
 
@@ -248,12 +239,11 @@ export const invalidateGetMetricAlerts = async (
  * @summary Get metric attributes
  */
 export const getMetricAttributes = (
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
+	params: GetMetricAttributesParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAttributes200>({
-		url: `/api/v2/metrics/${metricName}/attributes`,
+		url: `/api/v2/metrics/attributes`,
 		method: 'GET',
 		params,
 		signal,
@@ -261,21 +251,16 @@ export const getMetricAttributes = (
 };
 
 export const getGetMetricAttributesQueryKey = (
-	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
 ) => {
-	return [
-		`/api/v2/metrics/${metricName}/attributes`,
-		...(params ? [params] : []),
-	] as const;
+	return [`/api/v2/metrics/attributes`, ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricAttributesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
+	params: GetMetricAttributesParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAttributes>>,
@@ -287,19 +272,13 @@ export const getGetMetricAttributesQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ??
-		getGetMetricAttributesQueryKey({ metricName }, params);
+		queryOptions?.queryKey ?? getGetMetricAttributesQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricAttributes>>
-	> = ({ signal }) => getMetricAttributes({ metricName }, params, signal);
+	> = ({ signal }) => getMetricAttributes(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAttributes>>,
 		TError,
 		TData
@@ -319,8 +298,7 @@ export function useGetMetricAttributes<
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
+	params: GetMetricAttributesParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAttributes>>,
@@ -329,11 +307,7 @@ export function useGetMetricAttributes<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAttributesQueryOptions(
-		{ metricName },
-		params,
-		options,
-	);
+	const queryOptions = getGetMetricAttributesQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -347,12 +321,11 @@ export function useGetMetricAttributes<
  */
 export const invalidateGetMetricAttributes = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
+	params: GetMetricAttributesParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAttributesQueryKey({ metricName }, params) },
+		{ queryKey: getGetMetricAttributesQueryKey(params) },
 		options,
 	);
 
@@ -364,27 +337,28 @@ export const invalidateGetMetricAttributes = async (
  * @summary Get metric dashboards
  */
 export const getMetricDashboards = (
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
-		url: `/api/v2/metrics/${metricName}/dashboards`,
+		url: `/api/v2/metrics/dashboards`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricDashboardsQueryKey = ({
-	metricName,
-}: GetMetricDashboardsPathParameters) => {
-	return [`/api/v2/metrics/${metricName}/dashboards`] as const;
+export const getGetMetricDashboardsQueryKey = (
+	params?: GetMetricDashboardsParams,
+) => {
+	return [`/api/v2/metrics/dashboards`, ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -396,18 +370,13 @@ export const getGetMetricDashboardsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricDashboards>>
-	> = ({ signal }) => getMetricDashboards({ metricName }, signal);
+	> = ({ signal }) => getMetricDashboards(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricDashboards>>,
 		TError,
 		TData
@@ -427,7 +396,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -436,10 +405,7 @@ export function useGetMetricDashboards<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricDashboardsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -453,11 +419,11 @@ export function useGetMetricDashboards<
  */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricDashboardsQueryKey({ metricName }) },
+		{ queryKey: getGetMetricDashboardsQueryKey(params) },
 		options,
 	);
 
@@ -469,27 +435,28 @@ export const invalidateGetMetricDashboards = async (
  * @summary Get metric highlights
  */
 export const getMetricHighlights = (
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
-		url: `/api/v2/metrics/${metricName}/highlights`,
+		url: `/api/v2/metrics/highlights`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricHighlightsQueryKey = ({
-	metricName,
-}: GetMetricHighlightsPathParameters) => {
-	return [`/api/v2/metrics/${metricName}/highlights`] as const;
+export const getGetMetricHighlightsQueryKey = (
+	params?: GetMetricHighlightsParams,
+) => {
+	return [`/api/v2/metrics/highlights`, ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -501,18 +468,13 @@ export const getGetMetricHighlightsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricHighlights>>
-	> = ({ signal }) => getMetricHighlights({ metricName }, signal);
+	> = ({ signal }) => getMetricHighlights(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricHighlights>>,
 		TError,
 		TData
@@ -532,7 +494,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -541,10 +503,7 @@ export function useGetMetricHighlights<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricHighlightsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricHighlightsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -558,219 +517,17 @@ export function useGetMetricHighlights<
  */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricHighlightsQueryKey({ metricName }) },
+		{ queryKey: getGetMetricHighlightsQueryKey(params) },
 		options,
 	);
 
 	return queryClient;
 };
 
-/**
- * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Get metric metadata
- */
-export const getMetricMetadata = (
-	{ metricName }: GetMetricMetadataPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricMetadata200>({
-		url: `/api/v2/metrics/${metricName}/metadata`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricMetadataQueryKey = ({
-	metricName,
-}: GetMetricMetadataPathParameters) => {
-	return [`/api/v2/metrics/${metricName}/metadata`] as const;
-};
-
-export const getGetMetricMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey({ metricName });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricMetadata>>
-	> = ({ signal }) => getMetricMetadata({ metricName }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricMetadata>>
->;
-export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get metric metadata
- */
-
-export function useGetMetricMetadata<
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricMetadataQueryOptions({ metricName }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get metric metadata
- */
-export const invalidateGetMetricMetadata = async (
-	queryClient: QueryClient,
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricMetadataQueryKey({ metricName }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint helps to update metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Update metric metadata
- */
-export const updateMetricMetadata = (
-	{ metricName }: UpdateMetricMetadataPathParameters,
-	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/metrics/${metricName}/metadata`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: metricsexplorertypesUpdateMetricMetadataRequestDTO,
-		signal,
-	});
-};
-
-export const getUpdateMetricMetadataMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricMetadata>>,
-		TError,
-		{
-			pathParams: UpdateMetricMetadataPathParameters;
-			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateMetricMetadata>>,
-	TError,
-	{
-		pathParams: UpdateMetricMetadataPathParameters;
-		data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateMetricMetadata'];
-	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 updateMetricMetadata>>,
-		{
-			pathParams: UpdateMetricMetadataPathParameters;
-			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateMetricMetadata(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateMetricMetadataMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateMetricMetadata>>
->;
-export type UpdateMetricMetadataMutationBody =
-	| BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>
-	| undefined;
-export type UpdateMetricMetadataMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update metric metadata
- */
-export const useUpdateMetricMetadata = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricMetadata>>,
-		TError,
-		{
-			pathParams: UpdateMetricMetadataPathParameters;
-			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateMetricMetadata>>,
-	TError,
-	{
-		pathParams: UpdateMetricMetadataPathParameters;
-		data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateMetricMetadataMutationOptions(options));
-};
 /**
  * Returns raw time series data points for a metric within a time range (max 30 minutes). Each series includes labels and timestamp/value pairs.
  * @summary Inspect raw metric data points
@@ -854,6 +611,188 @@ export const useInspectMetrics = <
 > => {
 	return useMutation(getInspectMetricsMutationOptions(options));
 };
+/**
+ * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Get metric metadata
+ */
+export const getMetricMetadata = (
+	params: GetMetricMetadataParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricMetadata200>({
+		url: `/api/v2/metrics/metadata`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricMetadataQueryKey = (
+	params?: GetMetricMetadataParams,
+) => {
+	return [`/api/v2/metrics/metadata`, ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricMetadata>>
+	> = ({ signal }) => getMetricMetadata(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricMetadata>>
+>;
+export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get metric metadata
+ */
+
+export function useGetMetricMetadata<
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricMetadataQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get metric metadata
+ */
+export const invalidateGetMetricMetadata = async (
+	queryClient: QueryClient,
+	params: GetMetricMetadataParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricMetadataQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint helps to update metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Update metric metadata
+ */
+export const updateMetricMetadata = (
+	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/metrics/metadata`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricsexplorertypesUpdateMetricMetadataRequestDTO,
+		signal,
+	});
+};
+
+export const getUpdateMetricMetadataMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricMetadata>>,
+		TError,
+		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateMetricMetadata>>,
+	TError,
+	{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
+	TContext
+> => {
+	const mutationKey = ['updateMetricMetadata'];
+	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 updateMetricMetadata>>,
+		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return updateMetricMetadata(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateMetricMetadataMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateMetricMetadata>>
+>;
+export type UpdateMetricMetadataMutationBody =
+	| BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>
+	| undefined;
+export type UpdateMetricMetadataMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update metric metadata
+ */
+export const useUpdateMetricMetadata = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricMetadata>>,
+		TError,
+		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateMetricMetadata>>,
+	TError,
+	{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
+	TContext
+> => {
+	return useMutation(getUpdateMetricMetadataMutationOptions(options));
+};
 /**
  * Lightweight endpoint that checks if any non-SigNoz metrics have been ingested, used for onboarding status detection
  * @summary Check if non-SigNoz metrics have been received

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

@@ -2094,6 +2094,45 @@ export interface AuthtypesGettableTokenDTO {
 	tokenType?: string;
 }
 
+export enum CoretypesKindDTO {
+	anonymous = 'anonymous',
+	organization = 'organization',
+	role = 'role',
+	serviceaccount = 'serviceaccount',
+	user = 'user',
+	'notification-channel' = 'notification-channel',
+	'route-policy' = 'route-policy',
+	'apdex-setting' = 'apdex-setting',
+	'auth-domain' = 'auth-domain',
+	session = 'session',
+	'cloud-integration' = 'cloud-integration',
+	'cloud-integration-service' = 'cloud-integration-service',
+	integration = 'integration',
+	dashboard = 'dashboard',
+	'public-dashboard' = 'public-dashboard',
+	'ingestion-key' = 'ingestion-key',
+	'ingestion-limit' = 'ingestion-limit',
+	pipeline = 'pipeline',
+	'user-preference' = 'user-preference',
+	'org-preference' = 'org-preference',
+	'quick-filter' = 'quick-filter',
+	'ttl-setting' = 'ttl-setting',
+	rule = 'rule',
+	'planned-maintenance' = 'planned-maintenance',
+	'saved-view' = 'saved-view',
+	'trace-funnel' = 'trace-funnel',
+	'factor-password' = 'factor-password',
+	'factor-api-key' = 'factor-api-key',
+	license = 'license',
+	subscription = 'subscription',
+	logs = 'logs',
+	traces = 'traces',
+	metrics = 'metrics',
+	'audit-logs' = 'audit-logs',
+	'meter-metrics' = 'meter-metrics',
+	'logs-field' = 'logs-field',
+	'traces-field' = 'traces-field',
+}
 export enum CoretypesTypeDTO {
 	user = 'user',
 	serviceaccount = 'serviceaccount',
@@ -2104,10 +2143,7 @@ export enum CoretypesTypeDTO {
 	telemetryresource = 'telemetryresource',
 }
 export interface CoretypesResourceRefDTO {
-	/**
-	 * @type string
-	 */
-	kind: string;
+	kind: CoretypesKindDTO;
 	type: CoretypesTypeDTO;
 }
 
@@ -2243,12 +2279,12 @@ export interface AuthtypesPostableRoleDTO {
 	/**
 	 * @type string
 	 */
-	description: string;
+	description?: string;
 	/**
 	 * @type string
 	 */
 	name: string;
-	transactionGroups: AuthtypesTransactionGroupsDTO;
+	transactionGroups?: AuthtypesTransactionGroupsDTO;
 }
 
 export interface AuthtypesPostableRotateTokenDTO {
@@ -10334,9 +10370,14 @@ export type ListMetrics200 = {
 	status: string;
 };
 
-export type GetMetricAlertsPathParameters = {
+export type GetMetricAlertsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricAlerts200 = {
 	data: MetricsexplorertypesMetricAlertsResponseDTO;
 	/**
@@ -10345,18 +10386,20 @@ export type GetMetricAlerts200 = {
 	status: string;
 };
 
-export type GetMetricAttributesPathParameters = {
-	metricName: string;
-};
 export type GetMetricAttributesParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
+	metricName: string;
 	/**
 	 * @type integer,null
-	 * @description undefined
+	 * @description Start of the time range as a Unix timestamp in milliseconds.
 	 */
 	start?: number | null;
 	/**
 	 * @type integer,null
-	 * @description undefined
+	 * @description End of the time range as a Unix timestamp in milliseconds.
 	 */
 	end?: number | null;
 };
@@ -10369,9 +10412,14 @@ export type GetMetricAttributes200 = {
 	status: string;
 };
 
-export type GetMetricDashboardsPathParameters = {
+export type GetMetricDashboardsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricDashboards200 = {
 	data: MetricsexplorertypesMetricDashboardsResponseDTO;
 	/**
@@ -10380,9 +10428,14 @@ export type GetMetricDashboards200 = {
 	status: string;
 };
 
-export type GetMetricHighlightsPathParameters = {
+export type GetMetricHighlightsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
+
 export type GetMetricHighlights200 = {
 	data: MetricsexplorertypesMetricHighlightsResponseDTO;
 	/**
@@ -10391,22 +10444,24 @@ export type GetMetricHighlights200 = {
 	status: string;
 };
 
-export type GetMetricMetadataPathParameters = {
-	metricName: string;
-};
-export type GetMetricMetadata200 = {
-	data: MetricsexplorertypesMetricMetadataDTO;
+export type InspectMetrics200 = {
+	data: MetricsexplorertypesInspectMetricsResponseDTO;
 	/**
 	 * @type string
 	 */
 	status: string;
 };
 
-export type UpdateMetricMetadataPathParameters = {
+export type GetMetricMetadataParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
 	metricName: string;
 };
-export type InspectMetrics200 = {
-	data: MetricsexplorertypesInspectMetricsResponseDTO;
+
+export type GetMetricMetadata200 = {
+	data: MetricsexplorertypesMetricMetadataDTO;
 	/**
 	 * @type string
 	 */

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -191,9 +191,6 @@ function TimeSeries({
 		if (metrics[0] && yAxisUnit) {
 			updateMetricMetadata(
 				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
 					data: buildUpdateMetricYAxisUnitPayload(
 						metricNames[0],
 						metrics[0],

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -48,18 +48,14 @@ function AllAttributes({
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes(
-		{
-			metricName,
-		},
-		{
-			start: minTime ? Math.floor(minTime / 1000000) : undefined,
-			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-		},
-	);
+	} = useGetMetricAttributes({
+		metricName,
+		start: minTime ? Math.floor(minTime / 1000000) : undefined,
+		end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
+	});
 
 	const attributes = useMemo(
-		() => attributesData?.data?.attributes ?? [],
+		() => attributesData?.data.attributes ?? [],
 		[attributesData],
 	);
 

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -237,9 +237,6 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				pathParams: {
-					metricName,
-				},
 				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -56,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse?.data) {
+		if (!metricMetadataResponse) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Metadata.test.tsx

@@ -195,14 +195,12 @@ describe('Metadata', () => {
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
 				data: expect.objectContaining({
+					metricName: MOCK_METRIC_NAME,
 					type: MetrictypesTypeDTO.sum,
 					temporality: MetrictypesTemporalityDTO.cumulative,
 					unit: 'By',
 					isMonotonic: true,
 				}),
-				pathParams: {
-					metricName: MOCK_METRIC_NAME,
-				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/RolesSettings/__tests__/utils.authz.test.ts

@@ -1,4 +1,5 @@
 import type {
+	CoretypesKindDTO,
 	CoretypesObjectGroupDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -56,7 +57,7 @@ const baseAuthzResources: AuthzResources = {
 
 // API payload resource refs — only kind+type, no allowedVerbs (matches CoretypesResourceRefDTO shape)
 const dashboardResourceRef = {
-	kind: 'dashboard',
+	kind: 'dashboard' as CoretypesKindDTO,
 	type: 'metaresource' as CoretypesTypeDTO,
 };
 const alertResourceRef = {

frontend/src/container/RolesSettings/utils.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import type {
+	CoretypesKindDTO,
 	CoretypesObjectGroupDTO,
 	CoretypesResourceRefDTO,
 	CoretypesTypeDTO,
@@ -147,7 +148,7 @@ export function buildPatchPayload({
 			continue;
 		}
 		const resourceDef: CoretypesResourceRefDTO = {
-			kind: found.kind,
+			kind: found.kind as CoretypesKindDTO,
 			type: found.type as CoretypesTypeDTO,
 		};
 

frontend/src/hooks/useAuthZ/utils.ts

@@ -2,13 +2,13 @@ import {
 	AuthtypesTransactionDTO,
 	CoretypesTypeDTO,
 	AuthtypesRelationDTO,
+	CoretypesKindDTO,
 } from '../../api/generated/services/sigNoz.schemas';
 import permissionsType from './permissions.type';
 import {
 	AuthZObject,
 	AuthZRelation,
 	BrandedPermission,
-	ResourceName,
 	ResourcesForRelation,
 	ResourceType,
 } from './types';
@@ -87,7 +87,7 @@ export function permissionToTransactionDto(
 		relation: relation as AuthtypesRelationDTO,
 		object: {
 			resource: {
-				kind: resourceName as ResourceName,
+				kind: resourceName as CoretypesKindDTO,
 				type: type as CoretypesTypeDTO,
 			},
 			selector: selector || '*',

frontend/src/hooks/useInlineOverflowCount.ts

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseInlineOverflowCountOptions {
+	itemCount: number;
+	/** Horizontal gap between items, in px. */
+	gap?: number;
+	/** Width kept free at the end of the line for a trailing "+N" trigger, in px. */
+	reserveWidth?: number;
+	/** Pause measuring (e.g. while expanded) without unmounting. */
+	enabled?: boolean;
+}
+
+interface UseInlineOverflowCountResult {
+	containerRef: React.RefObject<HTMLDivElement>;
+	visibleCount: number;
+	overflowCount: number;
+}
+
+/**
+ * Measures how many of a container's children (each marked
+ * `data-overflow-item="true"`) fit on a single line, reserving `reserveWidth`
+ * for a trailing "+N" trigger. Item widths are cached, so children hidden with
+ * `display: none` still count toward the fit; measuring pauses while `enabled`
+ * is false.
+ */
+export function useInlineOverflowCount({
+	itemCount,
+	gap = 8,
+	reserveWidth = 0,
+	enabled = true,
+}: UseInlineOverflowCountOptions): UseInlineOverflowCountResult {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [visibleCount, setVisibleCount] = useState(itemCount);
+	const itemWidthsRef = useRef<number[]>([]);
+	const enabledRef = useRef(enabled);
+	enabledRef.current = enabled;
+
+	useEffect(() => {
+		itemWidthsRef.current = [];
+		setVisibleCount(itemCount);
+	}, [itemCount]);
+
+	const measure = useCallback((): void => {
+		const container = containerRef.current;
+		if (!container || !enabledRef.current) {
+			return;
+		}
+		const itemElements = Array.from(container.children).filter(
+			(itemElement): itemElement is HTMLElement =>
+				itemElement instanceof HTMLElement &&
+				itemElement.dataset.overflowItem === 'true',
+		);
+		if (itemElements.length === 0) {
+			setVisibleCount(0);
+			return;
+		}
+
+		itemElements.forEach((itemElement, index) => {
+			if (itemElement.offsetWidth > 0) {
+				itemWidthsRef.current[index] = itemElement.offsetWidth;
+			}
+		});
+		const cachedWidths: number[] = [];
+		for (let index = 0; index < itemElements.length; index += 1) {
+			const cachedWidth = itemWidthsRef.current[index];
+			if (cachedWidth == null) {
+				// Width not cached yet — reveal everything for one frame so it gets
+				// measured, then the next pass collapses accurately.
+				setVisibleCount(itemElements.length);
+				return;
+			}
+			cachedWidths.push(cachedWidth);
+		}
+
+		const containerWidth = container.clientWidth;
+		const totalWidth = cachedWidths.reduce(
+			(runningTotal, itemWidth, index) =>
+				runningTotal + itemWidth + (index > 0 ? gap : 0),
+			0,
+		);
+		if (totalWidth <= containerWidth) {
+			setVisibleCount(itemElements.length);
+			return;
+		}
+
+		const availableWidth = containerWidth - reserveWidth;
+		let usedWidth = 0;
+		let fitCount = 0;
+		for (let index = 0; index < cachedWidths.length; index += 1) {
+			const itemWidthWithGap = cachedWidths[index] + (index > 0 ? gap : 0);
+			if (usedWidth + itemWidthWithGap > availableWidth && fitCount > 0) {
+				break;
+			}
+			usedWidth += itemWidthWithGap;
+			fitCount += 1;
+		}
+		setVisibleCount(Math.max(1, fitCount));
+	}, [gap, reserveWidth]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return undefined;
+		}
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(container);
+		Array.from(container.children).forEach((child) => observer.observe(child));
+		measure();
+		return (): void => observer.disconnect();
+	}, [measure, itemCount, enabled]);
+
+	return {
+		containerRef,
+		visibleCount,
+		overflowCount: Math.max(0, itemCount - visibleCount),
+	};
+}

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/DashboardActions/DashboardActions.module.scss

@@ -1,11 +1,7 @@
 .dashboardActionsContainer {
 	display: flex;
 	flex-wrap: wrap;
+	align-items: center;
 	justify-content: flex-end;
 	gap: 12px;
 }
-
-.dashboardActionsSecondary {
-	display: flex;
-	gap: 12px;
-}

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

@@ -1,32 +1,42 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import {
+	Braces,
 	ClipboardCopy,
 	Configure,
-	Ellipsis,
+	Copy,
 	FileJson,
 	Fullscreen,
+	Grid3X3,
 	LockKeyhole,
 	PenLine,
 	Plus,
+	SquareStack,
 	Trash2,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
+import { cloneDashboardV2 } from 'api/generated/services/dashboard';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
 
 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DashboardSettings from '../../DashboardSettings';
+import { useAddSection } from '../../PanelsAndSectionsLayout/Section/hooks/useAddSection';
+import SectionTitleModal from '../../PanelsAndSectionsLayout/Section/SectionTitleModal';
+import JsonEditorDrawer from '../JsonEditorDrawer/JsonEditorDrawer';
 import SettingsDrawer from '../SettingsDrawer';
 import styles from './DashboardActions.module.scss';
 import { useDashboardStore } from '../../store/useDashboardStore';
@@ -55,14 +65,31 @@ function DashboardActions({
 	const canEdit = useDashboardStore((s) => s.isEditable);
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
+	const { safeNavigate } = useSafeNavigate();
+	const { showErrorModal } = useErrorModal();
 
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
+	const [isJsonEditorOpen, setIsJsonEditorOpen] = useState<boolean>(false);
+	const [isCloning, setIsCloning] = useState<boolean>(false);
+	const [isNewSectionOpen, setIsNewSectionOpen] = useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
 	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
 
+	const { addSection, isSaving: isAddingSection } = useAddSection({
+		layouts: dashboard.spec.layouts,
+	});
+
+	const handleCreateSection = useCallback(
+		async (title: string): Promise<void> => {
+			await addSection(title);
+			setIsNewSectionOpen(false);
+		},
+		[addSection],
+	);
+
 	useEffect(() => {
 		if (state.error) {
 			toast.error(t('something_went_wrong', { ns: 'common' }));
@@ -89,6 +116,24 @@ function DashboardActions({
 		URL.revokeObjectURL(url);
 	}, [dashboardDataJSON, title]);
 
+	const handleClone = useCallback(async (): Promise<void> => {
+		if (!dashboard.id) {
+			return;
+		}
+		try {
+			setIsCloning(true);
+			const response = await cloneDashboardV2({ id: dashboard.id });
+			toast.success('Dashboard cloned');
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
+			);
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsCloning(false);
+		}
+	}, [dashboard.id, safeNavigate, showErrorModal]);
+
 	const handleConfirmDelete = useCallback((): void => {
 		deleteDashboardMutation.mutate(undefined, {
 			onSuccess: () => {
@@ -99,17 +144,24 @@ function DashboardActions({
 	}, [deleteDashboardMutation]);
 
 	const menuItems = useMemo<MenuItem[]>(() => {
-		const editGroup: MenuItem[] = [];
+		const dashboardGroup: MenuItem[] = [];
 		if (canEdit) {
-			editGroup.push({
+			dashboardGroup.push({
 				key: 'rename',
 				label: 'Rename',
 				icon: <PenLine size={14} />,
 				onClick: onOpenRename,
 			});
 		}
+		dashboardGroup.push({
+			key: 'clone',
+			label: 'Clone dashboard',
+			icon: <Copy size={14} />,
+			disabled: isCloning,
+			onClick: (): void => void handleClone(),
+		});
 		if (isAuthor || user.role === USER_ROLES.ADMIN) {
-			editGroup.push({
+			dashboardGroup.push({
 				key: 'lock',
 				label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
 				icon: <LockKeyhole size={14} />,
@@ -117,14 +169,14 @@ function DashboardActions({
 				onClick: onLockToggle,
 			});
 		}
-		editGroup.push({
+		dashboardGroup.push({
 			key: 'fullscreen',
 			label: 'Full screen',
 			icon: <Fullscreen size={14} />,
 			onClick: handle.enter,
 		});
 
-		const exportGroup: MenuItem[] = [
+		const dataGroup: MenuItem[] = [
 			{
 				key: 'export',
 				label: 'Export JSON',
@@ -139,7 +191,35 @@ function DashboardActions({
 			},
 		];
 
-		const dangerGroup: MenuItem[] = [
+		const layoutGroup: MenuItem[] = [];
+		if (canEdit) {
+			layoutGroup.push({
+				key: 'new-section',
+				label: 'New section',
+				icon: <SquareStack size={14} />,
+				onClick: (): void => setIsNewSectionOpen(true),
+			});
+		}
+
+		const items: MenuItem[] = [
+			{
+				type: 'group',
+				key: 'group-dashboard',
+				label: 'Dashboard',
+				children: dashboardGroup,
+			},
+			{ type: 'group', key: 'group-data', label: 'Data', children: dataGroup },
+		];
+		if (layoutGroup.length > 0) {
+			items.push({
+				type: 'group',
+				key: 'group-layout',
+				label: 'Layout',
+				children: layoutGroup,
+			});
+		}
+		items.push(
+			{ type: 'divider', key: 'divider-danger' },
 			{
 				key: 'delete',
 				label: 'Delete dashboard',
@@ -147,74 +227,85 @@ function DashboardActions({
 				danger: true,
 				onClick: (): void => setIsDeleteOpen(true),
 			},
-		];
-
-		return [editGroup, exportGroup, dangerGroup]
-			.filter((group) => group.length > 0)
-			.flatMap((group, index) =>
-				index > 0 ? [{ type: 'divider' } as MenuItem, ...group] : group,
-			);
+		);
+		return items;
 	}, [
-		isDashboardLocked,
+		canEdit,
+		isCloning,
 		isAuthor,
 		user.role,
+		isDashboardLocked,
 		dashboard.createdBy,
 		onOpenRename,
+		handleClone,
 		onLockToggle,
 		handle.enter,
 		exportJSON,
 		setCopy,
 		dashboardDataJSON,
-		canEdit,
 	]);
 
 	return (
 		<div className={styles.dashboardActionsContainer}>
-			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<div className={styles.dashboardActionsSecondary}>
-				<DropdownMenuSimple menu={{ items: menuItems }}>
+			<DropdownMenuSimple menu={{ items: menuItems }}>
+				<Button
+					variant="solid"
+					color="secondary"
+					size="md"
+					prefix={<Grid3X3 size="md" />}
+					testId="options"
+				>
+					Actions
+				</Button>
+			</DropdownMenuSimple>
+			{canEdit && (
+				<>
 					<Button
 						variant="solid"
 						color="secondary"
-						size="icon"
-						prefix={<Ellipsis size="md" />}
-						testId="options"
-					/>
-				</DropdownMenuSimple>
-				{canEdit && (
-					<>
-						<Button
-							variant="solid"
-							color="secondary"
-							prefix={<Configure size="md" />}
-							testId="show-drawer"
-							onClick={(): void => setIsSettingsDrawerOpen(true)}
-							size="md"
-						>
-							Configure
-						</Button>
-						<SettingsDrawer
-							drawerTitle="Dashboard Configuration"
-							isOpen={isSettingsDrawerOpen}
-							onClose={(): void => setIsSettingsDrawerOpen(false)}
-						>
-							<DashboardSettings dashboard={dashboard} />
-						</SettingsDrawer>
-					</>
-				)}
-				{!isDashboardLocked && (
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onAddPanel}
-						prefix={<Plus size="md" />}
-						testId="add-panel-header"
+						prefix={<Configure size="md" />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
 						size="md"
 					>
-						New Panel
+						Configure
 					</Button>
-				)}
-			</div>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
+			<Button
+				variant="solid"
+				color="secondary"
+				prefix={<Braces size="md" />}
+				testId="edit-json"
+				onClick={(): void => setIsJsonEditorOpen(true)}
+				size="md"
+			>
+				Edit as JSON
+			</Button>
+			{!isDashboardLocked && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onAddPanel}
+					prefix={<Plus size="md" />}
+					testId="add-panel-header"
+					size="md"
+				>
+					New Panel
+				</Button>
+			)}
+			<JsonEditorDrawer
+				dashboard={dashboard}
+				isOpen={isJsonEditorOpen}
+				onClose={(): void => setIsJsonEditorOpen(false)}
+			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
 				title={`Delete dashboard"?`}
@@ -223,6 +314,15 @@ function DashboardActions({
 				onConfirm={handleConfirmDelete}
 				onClose={(): void => setIsDeleteOpen(false)}
 			/>
+			<SectionTitleModal
+				open={isNewSectionOpen}
+				heading="New section"
+				okText="Create section"
+				initialValue=""
+				isSaving={isAddingSection}
+				onClose={(): void => setIsNewSectionOpen(false)}
+				onSubmit={handleCreateSection}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -1,19 +1,9 @@
 .dashboardInfo {
 	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	width: 40%;
-
-	@media (min-width: 1280px) {
-		width: 30%;
-	}
-}
-
-.dashboardTitleContainer {
-	display: flex;
+	flex: 1;
 	align-items: center;
 	gap: 8px;
-	width: 100%;
+	min-width: 0;
 }
 
 .dashboardImage {
@@ -21,9 +11,8 @@
 }
 
 .dashboardTitle {
-	flex: 1;
+	flex: 0 1 auto;
 	min-width: 0;
-	max-width: fit-content;
 	color: var(--l1-foreground);
 	font-size: 18px;
 	font-weight: 500;
@@ -37,6 +26,19 @@
 	cursor: text !important;
 }
 
+.descriptionIcon {
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+	cursor: help;
+}
+
+.divider {
+	flex-shrink: 0;
+	width: 1px;
+	height: 18px;
+	background: var(--l2-border);
+}
+
 .dashboardTitleEditor {
 	display: flex;
 	align-items: center;
@@ -54,8 +56,13 @@
 	flex-shrink: 0;
 }
 
+/* Flexes into the remaining space and clips so the ResizeObserver can measure
+   how many tags fit before collapsing the rest into a `+N` badge. */
 .dashboardTags {
 	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
+	flex: 1 1 0;
+	align-items: center;
+	gap: 4px;
+	min-width: 0;
+	overflow: hidden;
 }

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

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
+import { Check, Globe, LockKeyhole, SolidInfoCircle, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -9,6 +9,7 @@ import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
 
 import styles from './DashboardInfo.module.scss';
+import { useVisibleTagCount } from './useVisibleTagCount';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
 interface DashboardInfoProps {
@@ -45,6 +46,11 @@ function DashboardInfo({
 	const hasTags = tags.length > 0;
 	const hasDescription = !isEmpty(description);
 
+	const { containerRef, visibleCount } = useVisibleTagCount(tags);
+	const needsOverflow = tags.length > visibleCount;
+	const visibleTags = needsOverflow ? tags.slice(0, visibleCount) : tags;
+	const remainingTags = needsOverflow ? tags.slice(visibleCount) : [];
+
 	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -56,83 +62,106 @@ function DashboardInfo({
 
 	return (
 		<div className={styles.dashboardInfo}>
-			<div className={styles.dashboardTitleContainer}>
-				<img src={image} alt={title} className={styles.dashboardImage} />
-				{isEditing ? (
-					<div className={styles.dashboardTitleEditor}>
-						<Input
-							autoFocus
-							value={draft}
-							testId="dashboard-title-input"
-							maxLength={120}
-							className={styles.dashboardTitleInput}
-							onChange={(e): void => onDraftChange(e.target.value)}
-							onKeyDown={onKeyDown}
-						/>
-						<Button
-							type="button"
-							variant="outlined"
-							color="primary"
-							size="icon"
-							className={styles.dashboardTitleActionButton}
-							aria-label="Save title"
-							testId="dashboard-title-save"
-							onClick={onCommit}
-						>
-							<Check size={14} />
-						</Button>
-						<Button
-							type="button"
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							className={styles.dashboardTitleActionButton}
-							aria-label="Cancel title edit"
-							testId="dashboard-title-cancel"
-							onClick={onCancel}
-						>
-							<X size={14} />
-						</Button>
-					</div>
-				) : (
-					<TooltipSimple title={title}>
-						<Typography.Text
-							className={cx(styles.dashboardTitle, {
-								[styles.dashboardTitleHover]: canEdit,
-							})}
-							data-testid="dashboard-title"
-							onClick={canEdit ? onStartEdit : undefined}
-						>
-							{title}
-						</Typography.Text>
-					</TooltipSimple>
-				)}
+			<img src={image} alt={title} className={styles.dashboardImage} />
 
-				{isPublicDashboard && (
-					<TooltipSimple title="This dashboard is publicly accessible">
-						<Globe size={14} />
-					</TooltipSimple>
-				)}
-
-				{isDashboardLocked && (
-					<TooltipSimple title="This dashboard is locked">
-						<LockKeyhole size={14} />
-					</TooltipSimple>
-				)}
-			</div>
-
-			{hasTags && (
-				<div className={styles.dashboardTags}>
-					{tags.map((tag) => (
-						<Badge key={tag} color="warning" variant="outline">
-							{tag}
-						</Badge>
-					))}
+			{isEditing ? (
+				<div className={styles.dashboardTitleEditor}>
+					<Input
+						autoFocus
+						value={draft}
+						testId="dashboard-title-input"
+						maxLength={120}
+						className={styles.dashboardTitleInput}
+						onChange={(e): void => onDraftChange(e.target.value)}
+						onKeyDown={onKeyDown}
+					/>
+					<Button
+						type="button"
+						variant="outlined"
+						color="primary"
+						size="icon"
+						className={styles.dashboardTitleActionButton}
+						aria-label="Save title"
+						testId="dashboard-title-save"
+						onClick={onCommit}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						type="button"
+						variant="outlined"
+						color="secondary"
+						size="icon"
+						className={styles.dashboardTitleActionButton}
+						aria-label="Cancel title edit"
+						testId="dashboard-title-cancel"
+						onClick={onCancel}
+					>
+						<X size={14} />
+					</Button>
 				</div>
+			) : (
+				<TooltipSimple title={title}>
+					<Typography.Text
+						className={cx(styles.dashboardTitle, {
+							[styles.dashboardTitleHover]: canEdit,
+						})}
+						data-testid="dashboard-title"
+						onClick={canEdit ? onStartEdit : undefined}
+					>
+						{title}
+					</Typography.Text>
+				</TooltipSimple>
 			)}
 
 			{hasDescription && (
-				<Typography.Text color="muted">{description}</Typography.Text>
+				<TooltipSimple title={description}>
+					<SolidInfoCircle
+						className={styles.descriptionIcon}
+						size={14}
+						data-testid="dashboard-description-info"
+					/>
+				</TooltipSimple>
+			)}
+
+			{isPublicDashboard && (
+				<TooltipSimple title="This dashboard is publicly accessible">
+					<Globe size={14} />
+				</TooltipSimple>
+			)}
+
+			{isDashboardLocked && (
+				<TooltipSimple title="This dashboard is locked">
+					<LockKeyhole size={14} />
+				</TooltipSimple>
+			)}
+
+			{hasTags && (
+				<>
+					<span className={styles.divider} />
+					<div
+						ref={containerRef}
+						className={styles.dashboardTags}
+						data-testid="dashboard-tags"
+					>
+						{visibleTags.map((tag) => (
+							<Badge key={tag} color="warning" variant="outline">
+								{tag}
+							</Badge>
+						))}
+						{remainingTags.length > 0 && (
+							<TooltipSimple title={remainingTags.join(', ')}>
+								<Badge
+									color="warning"
+									variant="outline"
+									data-testid="dashboard-tags-overflow"
+								>
+									+{remainingTags.length}
+								</Badge>
+							</TooltipSimple>
+						)}
+					</div>
+				</>
 			)}
 		</div>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/useVisibleTagCount.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+	BADGE_GAP,
+	estimateBadgeWidth,
+	OVERFLOW_BADGE_WIDTH,
+} from 'components/Alerts/LabelColumn/utils';
+
+interface Result {
+	containerRef: React.RefObject<HTMLDivElement>;
+	visibleCount: number;
+}
+
+/**
+ * Measures how many tags fit in the container and returns the visible count,
+ * reserving room for the `+N` overflow badge. Reuses the badge-width estimation
+ * from the alerts LabelColumn so dashboards and alerts overflow identically.
+ */
+export function useVisibleTagCount(tags: string[]): Result {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [visibleCount, setVisibleCount] = useState(tags.length);
+
+	const calculateVisible = useCallback(
+		(width: number): number => {
+			if (width <= 0) {
+				return 1;
+			}
+			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
+			let usedWidth = 0;
+			let count = 0;
+			for (const tag of tags) {
+				const badgeWidth = estimateBadgeWidth(tag) + BADGE_GAP;
+				if (usedWidth + badgeWidth > availableWidth && count > 0) {
+					break;
+				}
+				usedWidth += badgeWidth;
+				count += 1;
+			}
+			return Math.max(1, count);
+		},
+		[tags],
+	);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return undefined;
+		}
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry && entry.contentRect.width > 0) {
+				setVisibleCount(calculateVisible(entry.contentRect.width));
+			}
+		});
+		observer.observe(container);
+		if (container.clientWidth > 0) {
+			setVisibleCount(calculateVisible(container.clientWidth));
+		}
+		return (): void => observer.disconnect();
+	}, [calculateVisible]);
+
+	return { containerRef, visibleCount };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardPageToolbar.module.scss

@@ -5,7 +5,9 @@
 	color: var(--l2-foreground);
 	background-color: var(--l1-background);
 	padding: 16px;
-	box-shadow: 0 2px 2px 0px var(--l2-border);
+	box-shadow:
+		0 1px 0 0 var(--l2-border),
+		0 6px 12px -10px var(--l2-border);
 }
 
 .dashboardPageToolbarSubContainer {
@@ -16,5 +18,22 @@
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
+	gap: 16px;
 	width: 100%;
 }
+
+.toolbarRow2 {
+	width: 100%;
+	margin-top: 12px;
+
+	&::after {
+		display: block;
+		clear: both;
+		content: '';
+	}
+}
+
+.timeCluster {
+	float: right;
+	margin: 0 0 0 16px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.module.scss

@@ -0,0 +1,72 @@
+.root {
+	:global(.ant-drawer-wrapper-body) {
+		border-left: 1px solid var(--l1-border);
+		background: var(--l2-background);
+	}
+
+	:global(.ant-drawer-header) {
+		height: 48px;
+		border-bottom: 1px solid var(--l1-border);
+
+		:global(.ant-drawer-title) {
+			color: var(--l2-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 500;
+		}
+	}
+
+	:global(.ant-drawer-body) {
+		padding: 0;
+		display: flex;
+		min-height: 0;
+	}
+
+	:global(.ant-drawer-footer) {
+		padding: 12px 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.body {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	flex-direction: column;
+}
+
+.editor {
+	flex: 1;
+	min-height: 0;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.validation {
+	min-width: 0;
+	overflow: hidden;
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.validationValid {
+	color: var(--bg-forest-400);
+}
+
+.validationInvalid {
+	color: var(--bg-cherry-400);
+}
+
+.footerActions {
+	display: flex;
+	flex-shrink: 0;
+	gap: 8px;
+}

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

@@ -0,0 +1,141 @@
+import { KeyboardEvent, useCallback } from 'react';
+import MEditor from '@monaco-editor/react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import { Drawer } from 'antd';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { useCopyToClipboard } from 'react-use';
+import { toast } from '@signozhq/ui/sonner';
+
+import { defineJsonEditorTheme, JSON_EDITOR_THEME } from './editorTheme';
+import styles from './JsonEditorDrawer.module.scss';
+import JsonEditorToolbar from './JsonEditorToolbar';
+import { useJsonEditor } from './useJsonEditor';
+
+interface JsonEditorDrawerProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+function JsonEditorDrawer({
+	dashboard,
+	isOpen,
+	onClose,
+}: JsonEditorDrawerProps): JSX.Element {
+	const [, copyToClipboard] = useCopyToClipboard();
+
+	const { draft, setDraft, validity, isDirty, isSaving, format, reset, apply } =
+		useJsonEditor({ dashboard, isOpen, onApplied: onClose });
+
+	const onCopy = useCallback((): void => {
+		copyToClipboard(draft);
+		toast.success('JSON copied to clipboard');
+	}, [copyToClipboard, draft]);
+
+	const onDownload = useCallback((): void => {
+		const blob = new Blob([draft], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = `${dashboard.name || 'dashboard'}.json`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	}, [draft, dashboard.name]);
+
+	const onKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+				event.preventDefault();
+				void apply();
+			}
+		},
+		[apply],
+	);
+
+	const applyDisabled = !isDirty || !validity.valid || isSaving;
+	const validationText = validity.valid
+		? `Valid JSON · ${validity.lineCount} lines`
+		: `Line ${validity.errorLine ?? '?'} · ${validity.message ?? 'Invalid JSON'}`;
+
+	return (
+		<Drawer
+			title="Dashboard JSON"
+			placement="right"
+			width={660}
+			onClose={onClose}
+			open={isOpen}
+			rootClassName={styles.root}
+			footer={
+				<div className={styles.footer}>
+					<Typography.Text
+						className={cx(styles.validation, {
+							[styles.validationValid]: validity.valid,
+							[styles.validationInvalid]: !validity.valid,
+						})}
+						data-testid="json-editor-validation"
+					>
+						{validationText}
+					</Typography.Text>
+					<div className={styles.footerActions}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="md"
+							testId="json-editor-cancel"
+							onClick={onClose}
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							size="md"
+							testId="json-editor-apply"
+							disabled={applyDisabled}
+							onClick={(): void => void apply()}
+						>
+							Apply changes
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+			<div className={styles.body} onKeyDown={onKeyDown}>
+				<JsonEditorToolbar
+					isDirty={isDirty}
+					onFormat={format}
+					onCopy={onCopy}
+					onDownload={onDownload}
+					onReset={reset}
+				/>
+				<div className={styles.editor}>
+					<MEditor
+						language="json"
+						height="100%"
+						value={draft}
+						onChange={(value): void => setDraft(value ?? '')}
+						options={{
+							scrollbar: { alwaysConsumeMouseWheel: false },
+							minimap: { enabled: false },
+							fontSize: 13,
+							fontFamily: 'Space Mono',
+						}}
+						theme="vs-dark"
+						onMount={(editor, monaco): void => {
+							defineJsonEditorTheme(monaco, editor.getContainerDomNode());
+							monaco.editor.setTheme(JSON_EDITOR_THEME);
+							void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
+						}}
+					/>
+				</div>
+			</div>
+		</Drawer>
+	);
+}
+
+export default JsonEditorDrawer;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.module.scss

@@ -0,0 +1,12 @@
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--l1-border);
+	background: var(--l1-background);
+}
+
+.spacer {
+	flex: 1;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.tsx

@@ -0,0 +1,69 @@
+import { AlignLeft, Copy, Download, RotateCcw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+import styles from './JsonEditorToolbar.module.scss';
+
+interface JsonEditorToolbarProps {
+	isDirty: boolean;
+	onFormat: () => void;
+	onCopy: () => void;
+	onDownload: () => void;
+	onReset: () => void;
+}
+
+function JsonEditorToolbar({
+	isDirty,
+	onFormat,
+	onCopy,
+	onDownload,
+	onReset,
+}: JsonEditorToolbarProps): JSX.Element {
+	return (
+		<div className={styles.toolbar}>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<AlignLeft size={14} />}
+				testId="json-editor-format"
+				onClick={onFormat}
+			>
+				Format
+			</Button>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<Copy size={14} />}
+				testId="json-editor-copy"
+				onClick={onCopy}
+			>
+				Copy
+			</Button>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<Download size={14} />}
+				testId="json-editor-download"
+				onClick={onDownload}
+			>
+				Download
+			</Button>
+			<div className={styles.spacer} />
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<RotateCcw size={14} />}
+				testId="json-editor-reset"
+				disabled={!isDirty}
+				onClick={onReset}
+			>
+				Reset
+			</Button>
+		</div>
+	);
+}
+
+export default JsonEditorToolbar;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/JsonEditorDrawer.test.tsx

@@ -0,0 +1,165 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import JsonEditorDrawer from '../JsonEditorDrawer';
+import { useJsonEditor } from '../useJsonEditor';
+
+jest.mock('../useJsonEditor', () => ({ useJsonEditor: jest.fn() }));
+
+jest.mock('@monaco-editor/react', () => ({
+	__esModule: true,
+	default: ({
+		value,
+		onChange,
+	}: {
+		value: string;
+		onChange: (next?: string) => void;
+	}): JSX.Element => (
+		<textarea
+			aria-label="json-editor"
+			data-testid="monaco"
+			value={value}
+			onChange={(e): void => onChange(e.target.value)}
+		/>
+	),
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [unknown, jest.Mock] => [{}, jest.fn()],
+}));
+
+const mockUseJsonEditor = useJsonEditor as jest.Mock;
+
+const dashboard = {
+	id: 'dash-1',
+	name: 'My dashboard',
+} as unknown as DashboardtypesGettableDashboardV2DTO;
+
+function hookValue(
+	overrides: Partial<ReturnType<typeof useJsonEditor>> = {},
+): ReturnType<typeof useJsonEditor> {
+	return {
+		draft: '{\n  "a": 1\n}',
+		setDraft: jest.fn(),
+		validity: { valid: true, lineCount: 3 },
+		isDirty: true,
+		isSaving: false,
+		format: jest.fn(),
+		reset: jest.fn(),
+		apply: jest.fn().mockResolvedValue(undefined),
+		...overrides,
+	};
+}
+
+describe('JsonEditorDrawer', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('renders the toolbar, editor and footer actions when open', () => {
+		mockUseJsonEditor.mockReturnValue(hookValue());
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
+
+		expect(screen.getByTestId('json-editor-format')).toBeInTheDocument();
+		expect(screen.getByTestId('json-editor-copy')).toBeInTheDocument();
+		expect(screen.getByTestId('json-editor-download')).toBeInTheDocument();
+		expect(screen.getByTestId('json-editor-reset')).toBeInTheDocument();
+		expect(screen.getByTestId('json-editor-apply')).toBeInTheDocument();
+		expect(screen.getByTestId('monaco')).toBeInTheDocument();
+	});
+
+	it('shows a valid status with the line count', () => {
+		mockUseJsonEditor.mockReturnValue(
+			hookValue({ validity: { valid: true, lineCount: 12 } }),
+		);
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
+
+		expect(screen.getByTestId('json-editor-validation')).toHaveTextContent(
+			'Valid JSON · 12 lines',
+		);
+	});
+
+	it('shows the error line and message when invalid', () => {
+		mockUseJsonEditor.mockReturnValue(
+			hookValue({
+				validity: {
+					valid: false,
+					lineCount: 4,
+					errorLine: 3,
+					message: 'Unexpected token',
+				},
+			}),
+		);
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
+
+		expect(screen.getByTestId('json-editor-validation')).toHaveTextContent(
+			'Line 3 · Unexpected token',
+		);
+	});
+
+	it('disables Apply when not dirty, invalid, or saving', () => {
+		mockUseJsonEditor.mockReturnValue(hookValue({ isDirty: false }));
+		const { rerender } = render(
+			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
+		);
+		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
+
+		mockUseJsonEditor.mockReturnValue(
+			hookValue({ validity: { valid: false, lineCount: 1 } }),
+		);
+		rerender(
+			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
+		);
+		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
+
+		mockUseJsonEditor.mockReturnValue(hookValue({ isSaving: true }));
+		rerender(
+			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
+		);
+		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
+	});
+
+	it('wires toolbar and footer buttons to the hook callbacks', () => {
+		const value = hookValue();
+		mockUseJsonEditor.mockReturnValue(value);
+		const onClose = jest.fn();
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={onClose} />);
+
+		fireEvent.click(screen.getByTestId('json-editor-format'));
+		expect(value.format).toHaveBeenCalled();
+
+		fireEvent.click(screen.getByTestId('json-editor-reset'));
+		expect(value.reset).toHaveBeenCalled();
+
+		fireEvent.click(screen.getByTestId('json-editor-apply'));
+		expect(value.apply).toHaveBeenCalled();
+
+		fireEvent.click(screen.getByTestId('json-editor-cancel'));
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it('forwards editor changes to setDraft', () => {
+		const value = hookValue();
+		mockUseJsonEditor.mockReturnValue(value);
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
+
+		fireEvent.change(screen.getByTestId('monaco'), {
+			target: { value: '{"b":2}' },
+		});
+		expect(value.setDraft).toHaveBeenCalledWith('{"b":2}');
+	});
+
+	it('applies on Cmd/Ctrl+Enter', () => {
+		const value = hookValue();
+		mockUseJsonEditor.mockReturnValue(value);
+		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
+
+		fireEvent.keyDown(screen.getByTestId('monaco'), {
+			key: 'Enter',
+			metaKey: true,
+		});
+		expect(value.apply).toHaveBeenCalled();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/useJsonEditor.test.tsx

@@ -0,0 +1,179 @@
+import { act, renderHook } from '@testing-library/react';
+import { updateDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { toast } from '@signozhq/ui/sonner';
+
+import { useJsonEditor } from '../useJsonEditor';
+
+const mockRefetch = jest.fn();
+const mockShowErrorModal = jest.fn();
+
+jest.mock('../../../store/useDashboardStore', () => ({
+	useDashboardStore: (selector: (state: unknown) => unknown): unknown =>
+		selector({ dashboardId: 'dash-1', refetch: mockRefetch }),
+}));
+
+jest.mock('providers/ErrorModalProvider', () => ({
+	useErrorModal: (): { showErrorModal: jest.Mock } => ({
+		showErrorModal: mockShowErrorModal,
+	}),
+}));
+
+jest.mock('api/generated/services/dashboard', () => ({
+	updateDashboardV2: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const mockUpdate = updateDashboardV2 as jest.Mock;
+const mockToastSuccess = toast.success as jest.Mock;
+
+const dashboard = {
+	id: 'dash-1',
+	name: 'My dashboard',
+	schemaVersion: 'v6',
+	image: 'icon.png',
+	tags: [{ key: 'env', value: 'prod' }],
+	spec: {
+		display: { name: 'My dashboard' },
+		panels: {},
+		layouts: [],
+		variables: [],
+	},
+} as unknown as DashboardtypesGettableDashboardV2DTO;
+
+const serialized = JSON.stringify(dashboard, null, 2);
+
+describe('useJsonEditor', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUpdate.mockResolvedValue({});
+	});
+
+	it('seeds the draft from the dashboard and reports valid, non-dirty state', () => {
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		expect(result.current.draft).toBe(serialized);
+		expect(result.current.isDirty).toBe(false);
+		expect(result.current.validity.valid).toBe(true);
+		expect(result.current.validity.lineCount).toBe(serialized.split('\n').length);
+	});
+
+	it('flags invalid JSON with a line number and marks the draft dirty', () => {
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		act(() => result.current.setDraft('{\n  "name": ,\n}'));
+
+		expect(result.current.validity.valid).toBe(false);
+		expect(result.current.validity.message).toBeDefined();
+		expect(result.current.isDirty).toBe(true);
+	});
+
+	it('format() pretty-prints valid JSON and leaves invalid JSON untouched', () => {
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		act(() => result.current.setDraft('{"a":1}'));
+		act(() => result.current.format());
+		expect(result.current.draft).toBe('{\n  "a": 1\n}');
+
+		act(() => result.current.setDraft('{bad'));
+		act(() => result.current.format());
+		expect(result.current.draft).toBe('{bad');
+	});
+
+	it('reset() restores the last-applied text', () => {
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		act(() => result.current.setDraft('edited'));
+		expect(result.current.isDirty).toBe(true);
+
+		act(() => result.current.reset());
+		expect(result.current.draft).toBe(serialized);
+		expect(result.current.isDirty).toBe(false);
+	});
+
+	it('apply() is a no-op when the draft is unchanged or invalid', async () => {
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		await act(async () => {
+			await result.current.apply();
+		});
+		expect(mockUpdate).not.toHaveBeenCalled();
+
+		act(() => result.current.setDraft('{bad'));
+		await act(async () => {
+			await result.current.apply();
+		});
+		expect(mockUpdate).not.toHaveBeenCalled();
+	});
+
+	it('apply() PUTs the narrowed body, toasts, refetches and calls onApplied', async () => {
+		const onApplied = jest.fn();
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied }),
+		);
+
+		const next = { ...dashboard, name: 'Renamed' };
+		act(() => result.current.setDraft(JSON.stringify(next)));
+		await act(async () => {
+			await result.current.apply();
+		});
+
+		expect(mockUpdate).toHaveBeenCalledTimes(1);
+		expect(mockUpdate).toHaveBeenCalledWith(
+			{ id: 'dash-1' },
+			expect.objectContaining({
+				name: 'Renamed',
+				schemaVersion: 'v6',
+				spec: next.spec,
+				tags: next.tags,
+			}),
+		);
+		expect(mockToastSuccess).toHaveBeenCalled();
+		expect(mockRefetch).toHaveBeenCalled();
+		expect(onApplied).toHaveBeenCalled();
+	});
+
+	it('apply() surfaces errors through the error modal', async () => {
+		mockUpdate.mockRejectedValueOnce(new Error('boom'));
+		const { result } = renderHook(() =>
+			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
+		);
+
+		act(() =>
+			result.current.setDraft(JSON.stringify({ ...dashboard, name: 'X' })),
+		);
+		await act(async () => {
+			await result.current.apply();
+		});
+
+		expect(mockShowErrorModal).toHaveBeenCalled();
+	});
+
+	it('re-seeds the draft when the drawer re-opens', () => {
+		const onApplied = jest.fn();
+		const { result, rerender } = renderHook(
+			(props: { isOpen: boolean }) =>
+				useJsonEditor({ dashboard, isOpen: props.isOpen, onApplied }),
+			{ initialProps: { isOpen: false } },
+		);
+
+		act(() => result.current.setDraft('stale edit'));
+		expect(result.current.draft).toBe('stale edit');
+
+		rerender({ isOpen: true });
+		expect(result.current.draft).toBe(serialized);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/dashboardToUpdatable.ts

@@ -0,0 +1,26 @@
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesDashboardSpecDTO,
+	DashboardtypesUpdatableDashboardV2DTO,
+	TagtypesPostableTagDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Narrow a parsed (full Gettable-shaped) dashboard JSON down to the PUT-updatable
+ * body. The editor shows the whole dashboard for readability, but the update
+ * endpoint only accepts `{ name, schemaVersion, image, tags, spec }` — the
+ * server owns `id`, `locked`, timestamps, etc., so we drop them here.
+ */
+export function dashboardToUpdatable(
+	parsed: Record<string, unknown>,
+): DashboardtypesUpdatableDashboardV2DTO {
+	const dashboard = parsed as Partial<DashboardtypesGettableDashboardV2DTO>;
+
+	return {
+		name: dashboard.name ?? '',
+		schemaVersion: dashboard.schemaVersion ?? 'v6',
+		image: dashboard.image,
+		tags: (dashboard.tags as TagtypesPostableTagDTO[] | null | undefined) ?? null,
+		spec: dashboard.spec as DashboardtypesDashboardSpecDTO,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/editorTheme.ts

@@ -0,0 +1,47 @@
+import type { Monaco } from '@monaco-editor/react';
+
+export const JSON_EDITOR_THEME = 'signoz-json';
+
+function token(el: HTMLElement, name: string): string {
+	return getComputedStyle(el).getPropertyValue(name).trim().replace('#', '');
+}
+
+function isDark(hex: string): boolean {
+	if (hex.length < 6) {
+		return true;
+	}
+	const r = parseInt(hex.slice(0, 2), 16);
+	const g = parseInt(hex.slice(2, 4), 16);
+	const b = parseInt(hex.slice(4, 6), 16);
+	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+
+export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
+	const background = token(el, '--l1-background');
+	const foreground = token(el, '--l1-foreground');
+	const keyColor = token(el, '--bg-vanilla-400');
+	const valueColor = token(el, '--bg-robin-400');
+
+	const rules: { token: string; foreground: string }[] = [];
+	if (keyColor) {
+		rules.push({ token: 'string.key.json', foreground: keyColor });
+	}
+	if (valueColor) {
+		rules.push({ token: 'string.value.json', foreground: valueColor });
+	}
+
+	const colors: Record<string, string> = {};
+	if (background) {
+		colors['editor.background'] = `#${background}`;
+	}
+	if (foreground) {
+		colors['editor.foreground'] = `#${foreground}`;
+	}
+
+	monaco.editor.defineTheme(JSON_EDITOR_THEME, {
+		base: isDark(background) ? 'vs-dark' : 'vs',
+		inherit: true,
+		rules,
+		colors,
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/useJsonEditor.ts

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { updateDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { dashboardToUpdatable } from './dashboardToUpdatable';
+import { useDashboardStore } from '../../store/useDashboardStore';
+
+export interface JsonValidity {
+	valid: boolean;
+	lineCount: number;
+	/** 1-based line of the parse error, when known. */
+	errorLine?: number;
+	message?: string;
+}
+
+interface Params {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	isOpen: boolean;
+	onApplied: () => void;
+}
+
+interface Result {
+	draft: string;
+	setDraft: (next: string) => void;
+	validity: JsonValidity;
+	isDirty: boolean;
+	isSaving: boolean;
+	format: () => void;
+	reset: () => void;
+	apply: () => Promise<void>;
+}
+
+const serialize = (dashboard: DashboardtypesGettableDashboardV2DTO): string =>
+	JSON.stringify(dashboard, null, 2);
+
+/** Derive a 1-based line number from a `JSON.parse` "position N" error message. */
+function errorLineFromMessage(
+	source: string,
+	message: string,
+): number | undefined {
+	const match = /position (\d+)/.exec(message);
+	if (!match) {
+		return undefined;
+	}
+	const position = Number(match[1]);
+	return source.slice(0, position).split('\n').length;
+}
+
+/**
+ * Editor state for the dashboard JSON drawer: tracks the editable `draft`
+ * against the last-applied text, exposes live validation, and applies changes
+ * via the full-document update endpoint.
+ */
+export function useJsonEditor({
+	dashboard,
+	isOpen,
+	onApplied,
+}: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	const [appliedText, setAppliedText] = useState<string>(() =>
+		serialize(dashboard),
+	);
+	const [draft, setDraft] = useState<string>(appliedText);
+	const [isSaving, setIsSaving] = useState(false);
+
+	// Re-seed the editor from the current dashboard each time the drawer opens so
+	// it always reflects the latest persisted state (e.g. after a refetch).
+	useEffect(() => {
+		if (isOpen) {
+			const next = serialize(dashboard);
+			setAppliedText(next);
+			setDraft(next);
+		}
+	}, [isOpen, dashboard]);
+
+	const validity = useMemo<JsonValidity>(() => {
+		const lineCount = draft.split('\n').length;
+		try {
+			JSON.parse(draft);
+			return { valid: true, lineCount };
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Invalid JSON';
+			return {
+				valid: false,
+				lineCount,
+				errorLine: errorLineFromMessage(draft, message),
+				message,
+			};
+		}
+	}, [draft]);
+
+	const isDirty = draft !== appliedText;
+
+	const format = useCallback((): void => {
+		try {
+			setDraft(JSON.stringify(JSON.parse(draft), null, 2));
+		} catch {
+			// Leave the draft untouched when it can't be parsed.
+		}
+	}, [draft]);
+
+	const reset = useCallback((): void => {
+		setDraft(appliedText);
+	}, [appliedText]);
+
+	const apply = useCallback(async (): Promise<void> => {
+		if (!validity.valid || !isDirty) {
+			return;
+		}
+		try {
+			setIsSaving(true);
+			const parsed = JSON.parse(draft) as Record<string, unknown>;
+			await updateDashboardV2({ id: dashboardId }, dashboardToUpdatable(parsed));
+			toast.success('Dashboard updated');
+			refetch();
+			onApplied();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		dashboardId,
+		validity.valid,
+		isDirty,
+		draft,
+		refetch,
+		onApplied,
+		showErrorModal,
+	]);
+
+	return {
+		draft,
+		setDraft,
+		validity,
+		isDirty,
+		isSaving,
+		format,
+		reset,
+		apply,
+	};
+}

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
@@ -12,12 +12,12 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 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';
@@ -50,8 +50,9 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const createPanel = useCreatePanel();
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -107,8 +108,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		setIsAddingPanel(true);
-	}, [id]);
+		setIsPanelTypeSelectionModalOpen(true);
+	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
 		<section className={styles.dashboardPageToolbarContainer}>
@@ -139,15 +140,15 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				/>
 			</div>
 
-			<VariablesBar dashboard={dashboard} />
-			<PanelTypeSelectionModal
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={(pluginKind): void => {
-					setIsAddingPanel(false);
-					createPanel({ pluginKind });
-				}}
-			/>
+			{/* Row 2: the time selector floats top-right (declared first so the
+			    variables bar's content wraps around it); the variables bar
+			    collapses to one line and, when expanded, wraps full-width under it. */}
+			<div className={styles.toolbarRow2}>
+				<div className={styles.timeCluster}>
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+				</div>
+				<VariablesBar dashboard={dashboard} />
+			</div>
 		</section>
 	);
 }

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

@@ -9,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 (
@@ -33,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();
 	});
 
@@ -53,21 +54,6 @@ describe('ThresholdsSection', () => {
 		]);
 	});
 
-	it('persists an empty-string label when none is provided', () => {
-		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} />);
-
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		fireEvent.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} />);
@@ -79,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();
 	});
@@ -96,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

@@ -23,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,
@@ -55,7 +58,7 @@ function LabelThresholdRow({
 			isEditing={isEditing}
 			summary={summary}
 			onEdit={onEdit}
-			onSave={(): void => onSave({ ...draft, label: draft.label ?? '' })}
+			onSave={(): void => onSave(draft)}
 			onDiscard={onDiscard}
 			onRemove={onRemove}
 		>

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

@@ -3,14 +3,12 @@ import type {
 	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,
@@ -33,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: string,
-): TelemetrytypesTelemetryFieldKeyDTO[] {
-	if (signal === 'logs') {
-		return sanitizeSelectFields(
-			defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
-		);
-	}
-	if (signal === '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,29 +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;
 	isLoading: boolean;
-	/** Background refresh in flight — drives the header's subtle refetch spinner. */
-	isFetching: boolean;
 	error: Error | null;
 	/** Re-run the query (drives PanelBody's error-state retry). */
 	refetch: () => void;
@@ -34,70 +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,
 	isLoading,
-	isFetching,
 	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={isLoading}
-						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__/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/hooks/__tests__/useSwitchColumnsOnSignalChange.test.ts

@@ -12,8 +12,8 @@ import {
 import { sanitizeSelectFields } from '../../ListColumnsEditor/selectFields';
 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[],
 );
@@ -73,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' }]);

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

@@ -3,13 +3,12 @@ import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesPanelSpecDTO,
 } 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';
 import { isEqual } from 'lodash-es';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
 import { fromPerses, toPerses } from '../../queryV5/persesQueryAdapters';
@@ -20,24 +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;
-	/**
-	 * Datasource to seed a new panel's builder with — the panel kind's first
-	 * supported signal (e.g. List supports only logs/traces, not metrics).
-	 */
-	defaultDataSource?: DataSource;
 }
 
 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;
@@ -45,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,
-	defaultDataSource,
 }: 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 && defaultDataSource
-				? initialQueriesMap[defaultDataSource]
-				: fromPerses(savedQueries, panelType),
-		[savedQueries, panelType, defaultDataSource],
+		() => 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,
@@ -84,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)
@@ -95,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;
@@ -112,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(','),
@@ -138,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) {
@@ -154,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/useSeedNewListColumns.ts

@@ -1,44 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { DashboardtypesPanelSpecDTO } 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: string | undefined;
-	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,16 +1,36 @@
 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';
+
+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). */
@@ -22,10 +42,11 @@ interface UseSwitchColumnsOnSignalChangeArgs {
 }
 
 /**
- * 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,29 +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;
-
-		if (!enabled || !signal) {
-			return;
-		}
-		// 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) {
+		if (!enabled) {
 			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));
+		// 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;
+		}
+		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

@@ -29,7 +29,6 @@ import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
 import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
@@ -40,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. */
@@ -51,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,
@@ -91,7 +79,7 @@ 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 panelDef = getPanelDefinition(draft.spec.plugin.kind);
 	const {
 		data,
 		isLoading,
@@ -103,27 +91,23 @@ function PanelEditorContainer({
 	} = usePanelQuery({
 		panel: draft,
 		panelId,
-		enabled: !!panelDefinition,
+		enabled: !!panelDef,
 	});
 
-	// A new panel defaults to its kind's first supported signal (e.g. List → logs);
-	// drives both the seed query's datasource and the seed of its default columns.
-	const defaultDataSource = panelDefinition?.supportedSignals[0];
-
+	// 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,
-		defaultDataSource,
 	});
 
 	// 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
@@ -132,8 +116,10 @@ function PanelEditorContainer({
 		| TelemetrytypesSignalDTO
 		| undefined;
 
-	// Swap the List panel's columns to the new source's defaults on a datasource
-	// change (V1 kept a per-datasource 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,
@@ -141,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: defaultDataSource,
-		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);
@@ -188,20 +166,17 @@ function PanelEditorContainer({
 							onLayoutChanged={onMainLayoutChanged}
 						>
 							<ResizablePanel minSize="55%" maxSize="65%" defaultSize="60%">
-								{panelDefinition && (
-									<PreviewPane
-										panelId={panelId}
-										panel={draft}
-										panelDefinition={panelDefinition}
-										data={data}
-										isLoading={isLoading || isFetching}
-										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%">

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(
-	pluginKind: PanelKind,
-	layoutIndex?: number,
-): string {
-	const params = new URLSearchParams({ [PANEL_KIND_PARAM]: pluginKind });
-	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/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/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/sections.ts

@@ -1,3 +1,5 @@
 import type { SectionConfig } from '../../types/sections';
 
-export const sections: SectionConfig[] = [];
+// 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/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/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/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/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,
@@ -25,7 +27,12 @@ export const PANELS: PanelRegistry = {
 export function getPanelDefinition(
 	kind: PanelKind,
 ): RenderablePanelDefinition | undefined {
-	// 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 | 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/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/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,13 +1,11 @@
-import { useState } from 'react';
 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 {
@@ -17,8 +15,9 @@ interface DashboardEmptyStateProps {
 function DashboardEmptyState({
 	canAddPanel,
 }: DashboardEmptyStateProps): JSX.Element {
-	const createPanel = useCreatePanel();
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 
 	return (
 		<section className={styles.emptyState}>
@@ -49,7 +48,7 @@ function DashboardEmptyState({
 						<Button
 							color="primary"
 							prefix={<Plus size="md" />}
-							onClick={(): void => setIsAddingPanel(true)}
+							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
 							testId="add-panel"
 						>
 							New Panel
@@ -57,14 +56,6 @@ function DashboardEmptyState({
 					)}
 				</div>
 			</div>
-			<PanelTypeSelectionModal
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={(pluginKind): void => {
-					setIsAddingPanel(false);
-					createPanel({ pluginKind });
-				}}
-			/>
 		</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,8 +66,9 @@ 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('');
 
@@ -66,20 +76,31 @@ function Panel({
 		usePanelQuery({
 			panel,
 			panelId,
-			// Lazy: fetch only once on screen (undefined → visible) and a renderer exists.
+			// 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}
@@ -91,13 +112,13 @@ function Panel({
 				searchTerm={searchTerm}
 				onSearchChange={setSearchTerm}
 			/>
-			{panelDefinition && (
+			{panelDefinition ? (
 				<PanelBody
 					panelDefinition={panelDefinition}
 					panel={panel}
 					panelId={panelId}
 					data={data}
-					isLoading={isLoading || isFetching}
+					isLoading={isLoading}
 					error={error}
 					refetch={refetch}
 					onDragSelect={onDragSelect}
@@ -105,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/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,17 +3,17 @@ 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 { PanelKind } from '../../../Panels/types/panelKind';
 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';
 import { useRenameSection } from '../hooks/useRenameSection';
 import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
-import RenameSectionModal from '../RenameSectionModal';
+import SectionTitleModal from '../SectionTitleModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
 import SectionHeader, {
 	type SectionDragHandle,
@@ -22,15 +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 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):
@@ -58,11 +67,11 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 
 	const [isAddingPanel, setIsAddingPanel] = useState(false);
 	const handleSelectPanelType = useCallback(
-		(pluginKind: PanelKind): void => {
+		(pluginKind: string): void => {
+			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
 			setIsAddingPanel(false);
-			createPanel({ pluginKind, layoutIndex: section.layoutIndex });
 		},
-		[createPanel, section.layoutIndex],
+		[onAddPanel, section.layoutIndex],
 	);
 
 	const { deleteSection } = useDeleteSection({ section });
@@ -129,7 +138,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 								variant="dashed"
 								color="secondary"
 								prefix={<Plus size="md" />}
-								onClick={(): void => setIsAddingPanel(true)}
+								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
 								testId={`section-add-panel-${section.id}`}
 							>
 								New Panel
@@ -137,8 +146,10 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 						)}
 					</div>
 				))}
-			<RenameSectionModal
+			<SectionTitleModal
 				open={isRenaming}
+				heading="Rename section"
+				okText="Rename"
 				initialValue={section.title}
 				isSaving={isSaving}
 				onClose={(): void => setIsRenaming(false)}

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/SectionTitleModal.tsx

@@ -2,21 +2,30 @@ import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 import { Input } from '@signozhq/ui/input';
 
-interface RenameSectionModalProps {
+interface SectionTitleModalProps {
 	open: boolean;
+	/** Modal heading, e.g. "Rename section" / "New section". */
+	heading: string;
+	/** Confirm button label, e.g. "Rename" / "Create section". */
+	okText: string;
 	initialValue: string;
 	isSaving: boolean;
+	placeholder?: string;
 	onClose: () => void;
 	onSubmit: (title: string) => void;
 }
 
-function RenameSectionModal({
+/** Title-entry modal shared by section create and rename. */
+function SectionTitleModal({
 	open,
+	heading,
+	okText,
 	initialValue,
 	isSaving,
+	placeholder = 'Section name',
 	onClose,
 	onSubmit,
-}: RenameSectionModalProps): JSX.Element {
+}: SectionTitleModalProps): JSX.Element {
 	const [value, setValue] = useState<string>(initialValue);
 
 	// Reseed the field each time the modal opens.
@@ -36,19 +45,19 @@ function RenameSectionModal({
 	return (
 		<Modal
 			open={open}
-			title="Rename section"
+			title={heading}
 			onCancel={onClose}
 			onOk={submit}
-			okText="Rename"
+			okText={okText}
 			okButtonProps={{ disabled: isSaving || !value.trim() }}
 			destroyOnClose
 		>
 			<Input
-				testId="rename-section-input"
+				testId="section-title-input"
 				autoFocus
 				value={value}
 				maxLength={120}
-				placeholder="Section name"
+				placeholder={placeholder}
 				onChange={(e): void => setValue(e.target.value)}
 				onKeyDown={(e): void => {
 					if (e.key === 'Enter') {
@@ -61,4 +70,4 @@ function RenameSectionModal({
 	);
 }
 
-export default RenameSectionModal;
+export default SectionTitleModal;

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/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -12,6 +12,27 @@ import {
 } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 
+const SECTION_SELECTOR = '[data-testid^="dashboard-section-"]';
+
+/**
+ * Waits (via rAF) for the refetch to render the appended section, then scrolls
+ * it into view. Polls because `refetch` resolves before React commits the new
+ * section to the DOM; bails after ~40 frames.
+ */
+function scrollToNewSection(prevCount: number, attempts = 40): void {
+	const sections = document.querySelectorAll(SECTION_SELECTOR);
+	if (sections.length > prevCount) {
+		sections[sections.length - 1]?.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+		});
+		return;
+	}
+	if (attempts > 0) {
+		requestAnimationFrame(() => scrollToNewSection(prevCount, attempts - 1));
+	}
+}
+
 interface Params {
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 }
@@ -42,10 +63,12 @@ export function useAddSection({ layouts }: Params): Result {
 				!layouts || layouts.length === 0
 					? reorderLayoutsOp([newGridLayout(trimmed)])
 					: addSectionOp(trimmed);
+			const prevSectionCount = document.querySelectorAll(SECTION_SELECTOR).length;
 			try {
 				setIsSaving(true);
 				await patchDashboardV2({ id: dashboardId }, [op]);
 				refetch();
+				scrollToNewSection(prevSectionCount);
 			} catch (error) {
 				showErrorModal(error as APIError);
 			} finally {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -101,7 +101,7 @@ function VariableSelector({
 				${variable.name}
 				{variable.description ? (
 					<Tooltip title={variable.description}>
-						<SolidInfoCircle className={styles.infoIcon} size="md" />
+						<SolidInfoCircle className={styles.infoIcon} size={14} />
 					</Tooltip>
 				) : null}
 			</Typography.Text>

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.module.scss

@@ -1,12 +1,55 @@
-/* Mirrors the V1 dashboard variable bar: each variable is a connected pill —
-   a robin `$name` segment joined to a value segment. */
-/* Sits inside the already-padded sticky toolbar section, so it only needs a top
-   gap from the tags — horizontal/bottom padding comes from the toolbar. */
 .bar {
+	min-width: 0;
+}
+
+.strip {
+	display: flow-root;
+}
+
+.stripExpanded {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12px;
+	gap: 8px;
 	padding-top: 12px;
+	overflow: visible;
+	clear: both;
+
+	.variableSlot,
+	.moreButton {
+		margin: 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		animation: variablesExpandIn 200ms ease-out;
+	}
+}
+
+@keyframes variablesExpandIn {
+	from {
+		opacity: 0;
+		transform: translateY(-6px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.variableSlot {
+	display: inline-flex;
+	align-items: center;
+	margin-right: 8px;
+	vertical-align: top;
+}
+
+.variableSlotHidden {
+	display: none;
+}
+
+.moreButton {
+	display: inline-flex;
+	vertical-align: top;
 }
 
 .variableItem {
@@ -21,7 +64,7 @@
 	align-items: center;
 	gap: 4px;
 	padding: 6px 6px 6px 8px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l3-border);
 	border-radius: 2px 0 0 2px;
 	background: var(--l3-background);
 	color: var(--bg-robin-300);
@@ -33,8 +76,10 @@
 }
 
 .infoIcon {
-	margin-left: 4px;
+	display: inline-flex;
+	margin-left: 2px;
 	color: var(--l2-foreground);
+	vertical-align: middle;
 }
 
 .variableValue {
@@ -42,7 +87,7 @@
 	min-width: 120px;
 	height: 32px;
 	align-items: center;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l3-border);
 	border-left: none;
 	border-radius: 0 2px 2px 0;
 	background: var(--l2-background);
@@ -55,8 +100,6 @@
 	}
 }
 
-/* Inner control fills the value segment; the segment provides the frame, so the
-   control itself is borderless/transparent. */
 .control {
 	width: 100%;
 	min-width: 120px;

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

@@ -1,4 +1,9 @@
+import { useState } from 'react';
+import { ChevronLeft } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import cx from 'classnames';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { useInlineOverflowCount } from 'hooks/useInlineOverflowCount';
 
 import { useVariableSelection } from './useVariableSelection';
 import VariableSelector from './VariableSelector';
@@ -11,33 +16,76 @@ interface VariablesBarProps {
 /**
  * Runtime variable selector bar shown above the panels. Renders one control per
  * dashboard variable; selections live in the store + URL (never the spec).
+ *
+ * The pills sit on the line left of the floated time selector and collapse the
+ * overflow behind a `+N` trigger. Expanding lets the bar wrap onto full-width
+ * lines that flow underneath the time selector. Every selector stays mounted
+ * either way so auto-selection and option fetching keep driving the panels.
  */
 function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 	const { variables, dependencyData, selection, setSelection } =
 		useVariableSelection(dashboard);
+	const [expanded, setExpanded] = useState(false);
+	const { containerRef, visibleCount, overflowCount } = useInlineOverflowCount({
+		itemCount: variables.length,
+		gap: 8,
+		reserveWidth: 48,
+		enabled: !expanded,
+	});
 
 	if (variables.length === 0) {
 		return null;
 	}
 
+	const hasOverflow = overflowCount > 0;
+
 	return (
 		<div className={styles.bar} data-testid="dashboard-variables-bar">
-			{variables.map((variable) => (
-				<VariableSelector
-					key={variable.name}
-					variable={variable}
-					variables={variables}
-					parents={dependencyData.parentGraph[variable.name] ?? []}
-					selections={selection}
-					selection={
-						selection[variable.name] ?? {
-							value: variable.multiSelect ? [] : '',
-							allSelected: false,
-						}
-					}
-					onChange={(next): void => setSelection(variable.name, next)}
-				/>
-			))}
+			<div
+				ref={containerRef}
+				className={cx(styles.strip, { [styles.stripExpanded]: expanded })}
+			>
+				{variables.map((variable, index) => (
+					<div
+						key={variable.name}
+						data-overflow-item="true"
+						className={cx(styles.variableSlot, {
+							[styles.variableSlotHidden]:
+								!expanded && hasOverflow && index >= visibleCount,
+						})}
+					>
+						<VariableSelector
+							variable={variable}
+							variables={variables}
+							parents={dependencyData.parentGraph[variable.name] ?? []}
+							selections={selection}
+							selection={
+								selection[variable.name] ?? {
+									value: variable.multiSelect ? [] : '',
+									allSelected: false,
+								}
+							}
+							onChange={(next): void => setSelection(variable.name, next)}
+						/>
+					</div>
+				))}
+
+				{hasOverflow && (
+					<span className={styles.moreButton}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="md"
+							prefix={expanded ? <ChevronLeft size={14} /> : undefined}
+							aria-expanded={expanded}
+							testId="dashboard-variables-more"
+							onClick={(): void => setExpanded((prev) => !prev)}
+						>
+							{expanded ? 'Less' : `+${overflowCount}`}
+						</Button>
+					</span>
+				)}
+			</div>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/ValueSelector.tsx

@@ -73,7 +73,7 @@ function ValueSelector({
 
 	return (
 		<CustomSelect
-			className={styles.select}
+			className={styles.control}
 			data-testid={testId}
 			options={optionData}
 			value={

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);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useCreatePanel.ts

@@ -1,34 +0,0 @@
-import { useCallback } from 'react';
-import { generatePath } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-
-import { newPanelSearch, NEW_PANEL_ID } from '../PanelEditor/newPanelRoute';
-import type { PanelKind } from '../Panels/types/panelKind';
-import { useDashboardStore } from '../store/useDashboardStore';
-
-interface CreatePanelArgs {
-	pluginKind: PanelKind;
-	/** Section to add the panel to on save; omitted → last/new section. */
-	layoutIndex?: number;
-}
-
-/**
- * Navigates to the panel editor to create a new panel of the given kind. Nothing
- * is persisted until save, so cancelling leaves the dashboard untouched.
- */
-export function useCreatePanel(): (args: CreatePanelArgs) => void {
-	const { safeNavigate } = useSafeNavigate();
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-
-	return useCallback(
-		({ pluginKind, layoutIndex }: CreatePanelArgs): void => {
-			const path = generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, {
-				dashboardId,
-				panelId: NEW_PANEL_ID,
-			});
-			safeNavigate(`${path}${newPanelSearch(pluginKind, layoutIndex)}`);
-		},
-		[safeNavigate, dashboardId],
-	);
-}

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import PanelTypeSelectionModal from 'container/DashboardContainer/PanelTypeSelectionModal';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 
@@ -65,6 +66,9 @@ function DashboardContainer({
 				/>
 				<PanelsAndSectionsLayout layouts={spec.layouts} panels={spec.panels} />
 			</div>
+			{/* Shared panel-type picker (V1 component): opened from any "New Panel"
+			    trigger; navigates to the widget editor route on selection. */}
+			<PanelTypeSelectionModal />
 		</FullScreen>
 	);
 }

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

@@ -3,22 +3,17 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
-	DashboardtypesPanelPluginDTO,
-	DashboardtypesQueryDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	DashboardtypesPanelKindDTO,
-	DashboardtypesPatchOpDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesPatchOpDTO } from 'api/generated/services/sigNoz.schemas';
 
-import type { PanelKind } from './Panels/types/panelKind';
-import type { DefaultPluginSpec } from './Panels/utils/buildDefaultPluginSpec';
 import type { GridItem } from './utils';
 
 /**
- * Pure (no React/network) RFC-6902 JSON-Patch builders for the V2 dashboard
- * spec. Pointers target the postable shape: `/spec/layouts/...`,
- * `/spec/panels/...`.
+ * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
+ * intentionally side-effect-free (no React, no network) so they can be unit
+ * tested and reused by the layout hooks. JSON pointers target the postable
+ * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
+ * patches in DashboardSettings/Overview and DashboardDescription).
  */
 
 const { add, replace, remove } = DashboardtypesPatchOpDTO;
@@ -30,27 +25,29 @@ export function panelRef(panelId: string): string {
 }
 
 /**
- * Builds a fresh panel of the given kind to seed the editor. The caller resolves
- * `pluginSpec` (config defaults) and `queries` (a kind's seed query) so this stays
- * free of the React panel registry.
+ * Builds a minimal, backend-valid panel for a given plugin kind. The spec
+ * requires exactly one query whose plugin kind is allowed for the panel;
+ * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
+ * validated, so an empty builder query is the safe default. The real query is
+ * filled in once the panel editor lands.
  */
-export function createDefaultPanel(
-	pluginKind: PanelKind,
-	pluginSpec: DefaultPluginSpec = {},
-	queries: DashboardtypesQueryDTO[] = [],
-): DashboardtypesPanelDTO {
+export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
+	// The DTO types plugin/query kinds as large generated enum unions; the kind
+	// here is chosen dynamically by the user, so we build the structurally-valid
+	// shape and assert the type.
 	return {
-		kind: DashboardtypesPanelKindDTO.Panel,
+		kind: 'Panel',
 		spec: {
 			display: { name: 'New panel' },
-			// `plugin` is a discriminated union; kind is runtime-chosen, so assert here.
-			plugin: {
-				kind: pluginKind,
-				spec: pluginSpec,
-			} as DashboardtypesPanelPluginDTO,
-			queries,
+			plugin: { kind: pluginKind, spec: {} },
+			queries: [
+				{
+					kind: 'TimeSeriesQuery',
+					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
+				},
+			],
 		},
-	};
+	} as unknown as DashboardtypesPanelDTO;
 }
 
 /** Converts a UI grid item back into the spec's grid-item DTO shape. */
@@ -118,93 +115,6 @@ export function addPanelToSectionOps({
 	];
 }
 
-interface CreatePanelOpsArgs {
-	/** Current sections, used to resolve the target and the next free row. */
-	layouts: DashboardtypesLayoutDTO[];
-	/** Preferred section (from the "Add panel" trigger); falls back to the last. */
-	layoutIndex: number | undefined;
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-}
-
-const NEW_PANEL_SIZE = { width: 6, height: 6 };
-
-/** Columns in the section grid — mirrors `cols` on SectionGrid's GridLayout. */
-const GRID_COLS = 12;
-
-/**
- * Placement for a new grid item: drop it right of the last row if there's room,
- * else wrap to a fresh row at the bottom. Only the last row is considered (items
- * sharing the greatest top-y); gaps in earlier rows are left alone.
- */
-function findFreeSlot(
-	items: DashboardGridItemDTO[],
-	width: number,
-): { x: number; y: number } {
-	const w = Math.min(width, GRID_COLS);
-	if (items.length === 0) {
-		return { x: 0, y: 0 };
-	}
-
-	const bottom = items.reduce(
-		(max, it) => Math.max(max, (it.y ?? 0) + (it.height ?? 0)),
-		0,
-	);
-	const lastRowY = items.reduce((max, it) => Math.max(max, it.y ?? 0), 0);
-	const lastRowRightEdge = items
-		.filter((it) => (it.y ?? 0) === lastRowY)
-		.reduce((max, it) => Math.max(max, (it.x ?? 0) + (it.width ?? 0)), 0);
-
-	if (lastRowRightEdge + w <= GRID_COLS) {
-		return { x: lastRowRightEdge, y: lastRowY };
-	}
-	return { x: 0, y: bottom };
-}
-
-/**
- * Ops to persist a brand-new panel (editor save path): resolve the target
- * section (requested index if valid, else last, else a freshly-created one) and
- * place the panel via `findFreeSlot`.
- */
-export function createPanelOps({
-	layouts,
-	layoutIndex,
-	panelId,
-	panel,
-}: CreatePanelOpsArgs): DashboardtypesJSONPatchOperationDTO[] {
-	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-
-	const requested =
-		layoutIndex !== undefined && layouts[layoutIndex] !== undefined
-			? layoutIndex
-			: layouts.length - 1;
-
-	let targetIndex = requested;
-	let items: DashboardGridItemDTO[] = layouts[requested]?.spec.items ?? [];
-	if (targetIndex < 0) {
-		// No sections yet — create an untitled one and target it.
-		ops.push(addSectionOp(''));
-		targetIndex = 0;
-		items = [];
-	}
-
-	const { x, y } = findFreeSlot(items, NEW_PANEL_SIZE.width);
-	ops.push(
-		...addPanelToSectionOps({
-			panelId,
-			panel,
-			layoutIndex: targetIndex,
-			item: {
-				x,
-				y,
-				...NEW_PANEL_SIZE,
-				content: { $ref: panelRef(panelId) },
-			},
-		}),
-	);
-	return ops;
-}
-
 interface MovePanelArgs {
 	sourceIndex: number;
 	sourceItems: GridItem[];

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/prepareRawTable.test.ts

@@ -124,33 +124,14 @@ describe('prepareRawTable', () => {
 		expect(table?.columns).not.toContain('attributes_string');
 	});
 
-	// Trace rows nest resource attributes the same way logs do: the span fields
-	// (`name`, `duration_nano`) are top-level, but `service.name` lives under
-	// `resources_string`, so it must be lifted to render (V1 parity).
-	const traceRow = {
-		timestamp: '2026-06-24T16:43:57Z',
-		data: {
-			name: 'resolve',
-			duration_nano: 4120000,
-			attributes_string: {},
-			resources_string: { 'service.name': 'adservice' },
-		},
-	};
-
-	it('flattens nested resource maps for traces so service.name resolves', () => {
+	it('does not flatten for non-log signals (traces return flat data)', () => {
 		const table = prepareRawTable({
-			results: [result([traceRow])],
-			selectFields: [field('name'), field('duration_nano'), field('service.name')],
+			results: [result([logRow])],
+			selectFields: [],
 			signal: TelemetrytypesSignalDTO.traces,
 		});
 
-		expect(table?.rows[0]).toMatchObject({
-			name: 'resolve',
-			duration_nano: 4120000,
-			'service.name': 'adservice',
-		});
-		// The structured map is retained for the drawer, lifted child is a column.
 		expect(table?.rows[0]).toHaveProperty('resources_string');
-		expect(table?.columns).toContain('service.name');
+		expect(table?.rows[0]).not.toHaveProperty('service.name');
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters.ts

@@ -48,7 +48,7 @@ const isBuilderQueryEnvelope = (
 	envelope: Querybuildertypesv5QueryEnvelopeDTO,
 ): boolean => envelope.type === Querybuildertypesv5QueryTypeDTO.builder_query;
 
-export function deriveQueryType(
+function deriveQueryType(
 	envelopes: Querybuildertypesv5QueryEnvelopeDTO[],
 ): EQueryType {
 	if (envelopes.some((e) => e.type === Querybuildertypesv5QueryTypeDTO.promql)) {

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/prepareRawTable.ts

@@ -25,9 +25,9 @@ interface PrepareRawTableArgs {
 	/** The panel's chosen columns; when empty, columns are derived from the rows. */
 	selectFields: TelemetrytypesTelemetryFieldKeyDTO[];
 	/**
-	 * Panel telemetry signal. `logs`/`traces` flatten nested attribute/resource
-	 * maps one level so selected fields (e.g. `service.name`) resolve (V1
-	 * `FlatLogData` parity). Absent on the derive-columns fallback.
+	 * Panel telemetry signal. `logs` flattens nested attribute/resource maps one
+	 * level so selected fields (e.g. `service.name`) resolve (V1 `FlatLogData`
+	 * parity). Absent on the derive-columns fallback.
 	 */
 	signal?: TelemetrytypesSignalDTO;
 }
@@ -85,11 +85,7 @@ export function prepareRawTable({
 		return undefined;
 	}
 
-	// Logs and traces both nest resource/attribute maps; lift them so selected
-	// fields like `service.name` resolve to a column (V1 parity).
-	const shouldFlatten =
-		signal === TelemetrytypesSignalDTO.logs ||
-		signal === TelemetrytypesSignalDTO.traces;
+	const shouldFlatten = signal === TelemetrytypesSignalDTO.logs;
 	const rows: RawTableRow[] = result.rows.map((row, index) => {
 		const data = row.data ?? {};
 		return {