fix: address comments

.github/workflows/integrationci.yaml

@@ -58,7 +58,6 @@ jobs:
           - querierai
           - rawexportdata
           - promqlconformance
-          - promapiconformance
           - querierauthz
           - role
           - rootuser

cmd/community/server.go

@@ -46,7 +46,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -104,8 +103,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/server.go

@@ -63,7 +63,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
-	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -137,8 +136,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule, systemDashboardRegistry)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

docs/api/openapi.yml

@@ -2559,7 +2559,6 @@ components:
       - factor-api-key
       - license
       - subscription
-      - deployment-host
       - logs
       - traces
       - metrics
@@ -2944,51 +2943,6 @@ components:
         publicDashboard:
           $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
       type: object
-    DashboardtypesGettableSystemDashboard:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        createdBy:
-          type: string
-        image:
-          type: string
-        locked:
-          type: boolean
-        name:
-          type: string
-        orgId:
-          type: string
-        schemaVersion:
-          type: string
-        source:
-          $ref: '#/components/schemas/DashboardtypesSource'
-        spec:
-          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
-        tags:
-          items:
-            $ref: '#/components/schemas/TagtypesGettableTag'
-          nullable: true
-          type: array
-        updatedAt:
-          format: date-time
-          type: string
-        updatedBy:
-          type: string
-      required:
-      - orgId
-      - locked
-      - source
-      - schemaVersion
-      - name
-      - tags
-      - spec
-      type: object
-    DashboardtypesHeaderOptions:
-      properties:
-        hide:
-          type: boolean
-      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3326,11 +3280,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelBackground:
-      enum:
-      - solid
-      - transparent
-      type: string
     DashboardtypesPanelFormatting:
       properties:
         decimalPrecision:
@@ -3351,7 +3300,6 @@ components:
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
-          signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
         propertyName: kind
       oneOf:
@@ -3362,7 +3310,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3373,7 +3320,6 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
-      - signoz/TextPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3447,18 +3393,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/TextPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesTextPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec:
       properties:
         kind:
@@ -3750,36 +3684,6 @@ components:
       - color
       - columnName
       type: object
-    DashboardtypesTextAlign:
-      enum:
-      - left
-      - center
-      - right
-      type: string
-    DashboardtypesTextMode:
-      enum:
-      - markdown
-      type: string
-    DashboardtypesTextPanelSpec:
-      properties:
-        headerOptions:
-          $ref: '#/components/schemas/DashboardtypesHeaderOptions'
-        mode:
-          $ref: '#/components/schemas/DashboardtypesTextMode'
-        presentation:
-          $ref: '#/components/schemas/DashboardtypesTextPresentation'
-        text:
-          type: string
-      type: object
-    DashboardtypesTextPresentation:
-      properties:
-        background:
-          $ref: '#/components/schemas/DashboardtypesPanelBackground'
-        textAlign:
-          $ref: '#/components/schemas/DashboardtypesTextAlign'
-        verticalAlign:
-          $ref: '#/components/schemas/DashboardtypesVerticalAlign'
-      type: object
     DashboardtypesTextVariableSpec:
       properties:
         constant:
@@ -3989,12 +3893,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesVerticalAlign:
-      enum:
-      - top
-      - center
-      - bottom
-      type: string
     ErrorsJSON:
       properties:
         code:
@@ -6561,148 +6459,6 @@ components:
       type: object
     PreferencetypesValue:
       type: object
-    PrometheusErrorResponseSchema:
-      properties:
-        error:
-          type: string
-        errorType:
-          enum:
-          - bad_data
-          - execution
-          - canceled
-          - timeout
-          - internal
-          type: string
-        status:
-          enum:
-          - error
-          type: string
-      required:
-      - status
-      - errorType
-      - error
-      type: object
-    PrometheusMatrixDataSchema:
-      properties:
-        result:
-          items:
-            $ref: '#/components/schemas/PrometheusMatrixSeriesSchema'
-          nullable: true
-          type: array
-        resultType:
-          enum:
-          - matrix
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusMatrixSeriesSchema:
-      properties:
-        metric:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        values:
-          items:
-            $ref: '#/components/schemas/PrometheusSamplePairSchema'
-          nullable: true
-          type: array
-      required:
-      - metric
-      - values
-      type: object
-    PrometheusQueryDataSchema:
-      oneOf:
-      - $ref: '#/components/schemas/PrometheusMatrixDataSchema'
-      - $ref: '#/components/schemas/PrometheusVectorDataSchema'
-      - $ref: '#/components/schemas/PrometheusScalarDataSchema'
-      - $ref: '#/components/schemas/PrometheusStringDataSchema'
-      type: object
-    PrometheusSamplePairSchema:
-      description: 'A [timestamp, value] pair: float unix seconds, then the string-encoded
-        sample value ("NaN", "+Inf", "-Inf" included).'
-      items:
-        oneOf:
-        - type: number
-        - type: string
-      maxItems: 2
-      minItems: 2
-      nullable: true
-      type: array
-    PrometheusScalarDataSchema:
-      properties:
-        result:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-        resultType:
-          enum:
-          - scalar
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusStringDataSchema:
-      properties:
-        result:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-        resultType:
-          enum:
-          - string
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusSuccessResponseSchema:
-      properties:
-        data:
-          $ref: '#/components/schemas/PrometheusQueryDataSchema'
-        infos:
-          items:
-            type: string
-          type: array
-        status:
-          enum:
-          - success
-          type: string
-        warnings:
-          items:
-            type: string
-          type: array
-      required:
-      - status
-      - data
-      type: object
-    PrometheusVectorDataSchema:
-      properties:
-        result:
-          items:
-            $ref: '#/components/schemas/PrometheusVectorSampleSchema'
-          nullable: true
-          type: array
-        resultType:
-          enum:
-          - vector
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusVectorSampleSchema:
-      properties:
-        metric:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        value:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-      required:
-      - metric
-      - value
-      type: object
     PromotetypesPromotePath:
       properties:
         indexes:
@@ -9466,6 +9222,10 @@ paths:
         name: name
         schema:
           type: string
+      - in: query
+        name: existingQuery
+        schema:
+          type: string
       responses:
         "200":
           content:
@@ -15602,73 +15362,6 @@ paths:
       summary: Migrate dashboard to v2
       tags:
       - dashboard
-  /api/v2/dashboards/system/{name}:
-    get:
-      deprecated: false
-      description: Returns a dashboard SigNoz ships and owns, addressed by its stable
-        definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards
-        are read-only and upgraded through releases. The dashboard's own `name` field
-        carries a reserved prefix that the path segment must not include.
-      operationId: GetSystemDashboard
-      parameters:
-      - in: path
-        name: name
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableSystemDashboard'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - dashboard:read
-      - tokenizer:
-        - dashboard:read
-      summary: Get system dashboard
-      tags:
-      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false
@@ -24253,9 +23946,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:list
+        - VIEWER
       - tokenizer:
-        - deployment-host:list
+        - VIEWER
       summary: Get host info from Zeus.
       tags:
       - zeus
@@ -24309,9 +24002,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:update
+        - ADMIN
       - tokenizer:
-        - deployment-host:update
+        - ADMIN
       summary: Put host in Zeus for a deployment.
       tags:
       - zeus
@@ -25121,374 +24814,6 @@ paths:
       summary: Replace variables
       tags:
       - querier
-  /prometheus/api/v1/query:
-    get:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQuery
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-          to the server''s current time.'
-        in: query
-        name: time
-        schema:
-          description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-            to the server''s current time.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          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
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus instant query
-      tags:
-      - prometheus
-    post:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryPost
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-          to the server''s current time.'
-        in: query
-        name: time
-        schema:
-          description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-            to the server''s current time.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          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
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus instant query
-      tags:
-      - prometheus
-  /prometheus/api/v1/query_range:
-    get:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryRange
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Range start: RFC3339 or float unix seconds.'
-        in: query
-        name: start
-        required: true
-        schema:
-          description: 'Range start: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Range end: RFC3339 or float unix seconds.'
-        in: query
-        name: end
-        required: true
-        schema:
-          description: 'Range end: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Resolution step: duration string or float seconds.'
-        in: query
-        name: step
-        required: true
-        schema:
-          description: 'Resolution step: duration string or float seconds.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          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
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus range query
-      tags:
-      - prometheus
-    post:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryRangePost
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Range start: RFC3339 or float unix seconds.'
-        in: query
-        name: start
-        required: true
-        schema:
-          description: 'Range start: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Range end: RFC3339 or float unix seconds.'
-        in: query
-        name: end
-        required: true
-        schema:
-          description: 'Range end: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Resolution step: duration string or float seconds.'
-        in: query
-        name: step
-        required: true
-        schema:
-          description: 'Resolution step: duration string or float seconds.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          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
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus range query
-      tags:
-      - prometheus
 servers:
 - description: The fully qualified URL to the SigNoz APIServer.
   url: https://{host}:{port}{base_path}

docs/contributing/prometheus.md

@@ -299,11 +299,8 @@ substituted. One subtlety makes it exact: we write stale markers at absent
 grid points. Without them, the engine's lookback would resurrect a point
 from up to `lookback` earlier. The marker encodes "absent here" the way the
 engine itself encodes it. Units evaluate concurrently. Each unit is one
-grid statement: the group-key join resolves the matchers, and the samples
-primary key takes the metric name straight from the selector. Only a
-selector without a static `__name__` runs the series lookup first, to learn
-the concrete metric names. A step of 0 is an instant query: a single
-evaluation at `end`.
+series lookup plus one grid statement. A step of 0 is an instant query: a
+single evaluation at `end`.
 
 A note on the window sliver: when the window is narrower than the step, the
 grid windows cover only `window/step` of the timeline. A sample in a gap
@@ -318,9 +315,8 @@ selectors and `last_over_time` transpile at window < step too.
 
 ## Series lookup
 
-The engine path resolves matchers once per selector (`selectSeries`); the
-transpiled path builds the same conditions into its group-key join. Both
-read the same tables. The series tables hold one row per (fingerprint, bucket)
+Both paths resolve matchers the same way, once per selector
+(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
 at 1h/6h/1d/1w granularities. The shared schema package
 (`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
 fits the window. It rounds the window start down to the bucket boundary, so

ee/modules/dashboard/impldashboard/module.go

@@ -32,9 +32,9 @@ type module struct {
 	tagModule          tag.Module
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -361,14 +361,6 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
 
-func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
-	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
-}
-
-func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
-}
-
 func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
 	return module.store.RunInTx(ctx, func(ctx context.Context) error {
 		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {

frontend/.oxlintrc.json

@@ -565,12 +565,12 @@
       }
     },
     {
-      // Root dashboard pages own the fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
       // Everywhere else must use useDashboardFetchRequired().
       "files": [
-        "src/pages/DashboardPage/DashboardPage.tsx",
-        "src/pages/DashboardPage/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
+        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
       ],
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"

frontend/jest.config.ts

@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|remark-gfm|mdast-util-gfm|mdast-util-gfm-autolink-literal|mdast-util-gfm-footnote|mdast-util-gfm-strikethrough|mdast-util-gfm-table|mdast-util-gfm-task-list-item|mdast-util-find-and-replace|mdast-util-phrasing|mdast-util-to-markdown|markdown-table|longest-streak|ccount|escape-string-regexp|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/src/AppRoutes/pageComponents.ts

@@ -102,10 +102,15 @@ export const DashboardPage = Loadable(
 	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
 );
 
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
+);
+
 export const DashboardPanelEditorPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPage/PanelEditorPage/PanelEditorPage'
+			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPageV2/PanelEditorPage/PanelEditorPage'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -13,6 +13,7 @@ import {
 	DashboardPage,
 	DashboardPanelEditorPage,
 	DashboardsListPage,
+	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
 	ForgotPassword,
@@ -182,6 +183,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+		isPrivate: true,
+		key: 'DASHBOARD_WIDGET',
+	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
 		exact: true,

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
+import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
+
+/**
+ * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const createPublicDashboard = async (
+	props: CreatePublicDashboardProps,
+): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {
+
+    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
+
+	try {
+		const response = await axios.post(
+			`/dashboards/${dashboardId}/public`,
+			{ timeRangeEnabled, defaultTimeRange },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default createPublicDashboard;

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardData;

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboard` hook (or `getPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardMeta;

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -0,0 +1,34 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { MetricRangePayloadV5 } from 'api/v5/v5';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
+
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
+	try {
+		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {
+			params: {
+				startTime: props.startTime,
+				endTime: props.endTime,
+			},
+		});
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardWidgetData;

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -0,0 +1,29 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
+
+/**
+ * @deprecated Use the generated `useDeletePublicDashboard` hook (or `deletePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const revokePublicDashboardAccess = async (
+	props: RevokePublicDashboardAccessProps,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}/public`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default revokePublicDashboardAccess;

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
+
+/**
+ * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const updatePublicDashboard = async (
+	props: UpdatePublicDashboardProps,
+): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {
+
+    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
+
+	try {
+		const response = await axios.put(
+			`/dashboards/${dashboardId}/public`,
+			{ timeRangeEnabled, defaultTimeRange },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updatePublicDashboard;

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

@@ -46,8 +46,6 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
-	GetSystemDashboard200,
-	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
@@ -1887,108 +1885,6 @@ export const useMigrateDashboardV2 = <
 > => {
 	return useMutation(getMigrateDashboardV2MutationOptions(options));
 };
-/**
- * Returns a dashboard SigNoz ships and owns, addressed by its stable definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards are read-only and upgraded through releases. The dashboard's own `name` field carries a reserved prefix that the path segment must not include.
- * @summary Get system dashboard
- */
-export const getSystemDashboard = (
-	{ name }: GetSystemDashboardPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetSystemDashboard200>({
-		url: `/api/v2/dashboards/system/${name}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetSystemDashboardQueryKey = ({
-	name,
-}: GetSystemDashboardPathParameters) => {
-	return [`/api/v2/dashboards/system/${name}`] as const;
-};
-
-export const getGetSystemDashboardQueryOptions = <
-	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ name }: GetSystemDashboardPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getSystemDashboard>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetSystemDashboardQueryKey({ name });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getSystemDashboard>>
-	> = ({ signal }) => getSystemDashboard({ name }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!name,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getSystemDashboard>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetSystemDashboardQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getSystemDashboard>>
->;
-export type GetSystemDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get system dashboard
- */
-
-export function useGetSystemDashboard<
-	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ name }: GetSystemDashboardPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getSystemDashboard>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetSystemDashboardQueryOptions({ name }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get system dashboard
- */
-export const invalidateGetSystemDashboard = async (
-	queryClient: QueryClient,
-	{ name }: GetSystemDashboardPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetSystemDashboardQueryKey({ name }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -1,396 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	PrometheusErrorResponseSchemaDTO,
-	PrometheusQueryParams,
-	PrometheusQueryPostParams,
-	PrometheusQueryRangeParams,
-	PrometheusQueryRangePostParams,
-	PrometheusSuccessResponseSchemaDTO,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType } from '../../../generatedAPIInstance';
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus instant query
- */
-export const prometheusQuery = (
-	params: PrometheusQueryParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryQueryKey = (params?: PrometheusQueryParams) => {
-	return [`/prometheus/api/v1/query`, ...(params ? [params] : [])] as const;
-};
-
-export const getPrometheusQueryQueryOptions = <
-	TData = Awaited<ReturnType<typeof prometheusQuery>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQuery>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getPrometheusQueryQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof prometheusQuery>>> = ({
-		signal,
-	}) => prometheusQuery(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof prometheusQuery>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type PrometheusQueryQueryResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQuery>>
->;
-export type PrometheusQueryQueryError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus instant query
- */
-
-export function usePrometheusQuery<
-	TData = Awaited<ReturnType<typeof prometheusQuery>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQuery>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getPrometheusQueryQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Prometheus instant query
- */
-export const invalidatePrometheusQuery = async (
-	queryClient: QueryClient,
-	params: PrometheusQueryParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getPrometheusQueryQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus instant query
- */
-export const prometheusQueryPost = (
-	params: PrometheusQueryPostParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query`,
-		method: 'POST',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryPostMutationOptions = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryPost>>,
-		TError,
-		{ params: PrometheusQueryPostParams },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof prometheusQueryPost>>,
-	TError,
-	{ params: PrometheusQueryPostParams },
-	TContext
-> => {
-	const mutationKey = ['prometheusQueryPost'];
-	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 prometheusQueryPost>>,
-		{ params: PrometheusQueryPostParams }
-	> = (props) => {
-		const { params } = props ?? {};
-
-		return prometheusQueryPost(params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PrometheusQueryPostMutationResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryPost>>
->;
-
-export type PrometheusQueryPostMutationError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus instant query
- */
-export const usePrometheusQueryPost = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryPost>>,
-		TError,
-		{ params: PrometheusQueryPostParams },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof prometheusQueryPost>>,
-	TError,
-	{ params: PrometheusQueryPostParams },
-	TContext
-> => {
-	return useMutation(getPrometheusQueryPostMutationOptions(options));
-};
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus range query
- */
-export const prometheusQueryRange = (
-	params: PrometheusQueryRangeParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query_range`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryRangeQueryKey = (
-	params?: PrometheusQueryRangeParams,
-) => {
-	return [
-		`/prometheus/api/v1/query_range`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getPrometheusQueryRangeQueryOptions = <
-	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryRangeParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQueryRange>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getPrometheusQueryRangeQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof prometheusQueryRange>>
-	> = ({ signal }) => prometheusQueryRange(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof prometheusQueryRange>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type PrometheusQueryRangeQueryResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryRange>>
->;
-export type PrometheusQueryRangeQueryError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus range query
- */
-
-export function usePrometheusQueryRange<
-	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryRangeParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQueryRange>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getPrometheusQueryRangeQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Prometheus range query
- */
-export const invalidatePrometheusQueryRange = async (
-	queryClient: QueryClient,
-	params: PrometheusQueryRangeParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getPrometheusQueryRangeQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus range query
- */
-export const prometheusQueryRangePost = (
-	params: PrometheusQueryRangePostParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query_range`,
-		method: 'POST',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryRangePostMutationOptions = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-		TError,
-		{ params: PrometheusQueryRangePostParams },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-	TError,
-	{ params: PrometheusQueryRangePostParams },
-	TContext
-> => {
-	const mutationKey = ['prometheusQueryRangePost'];
-	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 prometheusQueryRangePost>>,
-		{ params: PrometheusQueryRangePostParams }
-	> = (props) => {
-		const { params } = props ?? {};
-
-		return prometheusQueryRangePost(params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PrometheusQueryRangePostMutationResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>
->;
-
-export type PrometheusQueryRangePostMutationError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus range query
- */
-export const usePrometheusQueryRangePost = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-		TError,
-		{ params: PrometheusQueryRangePostParams },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-	TError,
-	{ params: PrometheusQueryRangePostParams },
-	TContext
-> => {
-	return useMutation(getPrometheusQueryRangePostMutationOptions(options));
-};

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

@@ -2175,7 +2175,6 @@ export enum CoretypesKindDTO {
 	'factor-api-key' = 'factor-api-key',
 	license = 'license',
 	subscription = 'subscription',
-	'deployment-host' = 'deployment-host',
 	logs = 'logs',
 	traces = 'traces',
 	metrics = 'metrics',
@@ -4277,58 +4276,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesListPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind {
-	'signoz/TextPanel' = 'signoz/TextPanel',
-}
-export interface DashboardtypesHeaderOptionsDTO {
-	/**
-	 * @type boolean
-	 */
-	hide?: boolean;
-}
-
-export enum DashboardtypesTextModeDTO {
-	markdown = 'markdown',
-}
-export enum DashboardtypesPanelBackgroundDTO {
-	solid = 'solid',
-	transparent = 'transparent',
-}
-export enum DashboardtypesTextAlignDTO {
-	left = 'left',
-	center = 'center',
-	right = 'right',
-}
-export enum DashboardtypesVerticalAlignDTO {
-	top = 'top',
-	center = 'center',
-	bottom = 'bottom',
-}
-export interface DashboardtypesTextPresentationDTO {
-	background?: DashboardtypesPanelBackgroundDTO;
-	textAlign?: DashboardtypesTextAlignDTO;
-	verticalAlign?: DashboardtypesVerticalAlignDTO;
-}
-
-export interface DashboardtypesTextPanelSpecDTO {
-	headerOptions?: DashboardtypesHeaderOptionsDTO;
-	mode?: DashboardtypesTextModeDTO;
-	presentation?: DashboardtypesTextPresentationDTO;
-	/**
-	 * @type string
-	 */
-	text?: string;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO {
-	/**
-	 * @enum signoz/TextPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTOKind;
-	spec: DashboardtypesTextPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -4336,8 +4283,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -5013,53 +4959,6 @@ export interface DashboardtypesGettablePublicDashboardDataV2DTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
-export interface DashboardtypesGettableSystemDashboardDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	image?: string;
-	/**
-	 * @type boolean
-	 */
-	locked: boolean;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	schemaVersion: string;
-	source: DashboardtypesSourceDTO;
-	spec: DashboardtypesDashboardSpecDTO;
-	/**
-	 * @type array,null
-	 */
-	tags: TagtypesGettableTagDTO[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export enum DashboardtypesPatchOpDTO {
 	add = 'add',
 	remove = 'remove',
@@ -5259,7 +5158,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
-	'signoz/TextPanel' = 'signoz/TextPanel',
 }
 /**
  * @nullable
@@ -8075,164 +7973,6 @@ export interface PreferencetypesUpdatablePreferenceDTO {
 	value?: unknown;
 }
 
-export enum PrometheusErrorResponseSchemaDTOErrorType {
-	bad_data = 'bad_data',
-	execution = 'execution',
-	canceled = 'canceled',
-	timeout = 'timeout',
-	internal = 'internal',
-}
-export enum PrometheusErrorResponseSchemaDTOStatus {
-	error = 'error',
-}
-export interface PrometheusErrorResponseSchemaDTO {
-	/**
-	 * @type string
-	 */
-	error: string;
-	/**
-	 * @enum bad_data,execution,canceled,timeout,internal
-	 * @type string
-	 */
-	errorType: PrometheusErrorResponseSchemaDTOErrorType;
-	/**
-	 * @enum error
-	 * @type string
-	 */
-	status: PrometheusErrorResponseSchemaDTOStatus;
-}
-
-export enum PrometheusMatrixDataSchemaDTOResultType {
-	matrix = 'matrix',
-}
-export type PrometheusSamplePairSchemaDTOItem = number | string;
-
-/**
- * A [timestamp, value] pair: float unix seconds, then the string-encoded sample value ("NaN", "+Inf", "-Inf" included).
- * @minItems 2
- * @maxItems 2
- * @nullable
- */
-export type PrometheusSamplePairSchemaDTO =
-	| PrometheusSamplePairSchemaDTOItem[]
-	| null;
-
-export type PrometheusMatrixSeriesSchemaDTOMetricAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type PrometheusMatrixSeriesSchemaDTOMetric =
-	PrometheusMatrixSeriesSchemaDTOMetricAnyOf | null;
-
-export interface PrometheusMatrixSeriesSchemaDTO {
-	/**
-	 * @type object,null
-	 */
-	metric: PrometheusMatrixSeriesSchemaDTOMetric;
-	/**
-	 * @type array,null
-	 */
-	values: (PrometheusSamplePairSchemaDTO | null)[] | null;
-}
-
-export interface PrometheusMatrixDataSchemaDTO {
-	/**
-	 * @type array,null
-	 */
-	result: PrometheusMatrixSeriesSchemaDTO[] | null;
-	/**
-	 * @enum matrix
-	 * @type string
-	 */
-	resultType: PrometheusMatrixDataSchemaDTOResultType;
-}
-
-export type PrometheusVectorSampleSchemaDTOMetricAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type PrometheusVectorSampleSchemaDTOMetric =
-	PrometheusVectorSampleSchemaDTOMetricAnyOf | null;
-
-export interface PrometheusVectorSampleSchemaDTO {
-	/**
-	 * @type object,null
-	 */
-	metric: PrometheusVectorSampleSchemaDTOMetric;
-	value: PrometheusSamplePairSchemaDTO | null;
-}
-
-export enum PrometheusVectorDataSchemaDTOResultType {
-	vector = 'vector',
-}
-export interface PrometheusVectorDataSchemaDTO {
-	/**
-	 * @type array,null
-	 */
-	result: PrometheusVectorSampleSchemaDTO[] | null;
-	/**
-	 * @enum vector
-	 * @type string
-	 */
-	resultType: PrometheusVectorDataSchemaDTOResultType;
-}
-
-export enum PrometheusScalarDataSchemaDTOResultType {
-	scalar = 'scalar',
-}
-export interface PrometheusScalarDataSchemaDTO {
-	result: PrometheusSamplePairSchemaDTO | null;
-	/**
-	 * @enum scalar
-	 * @type string
-	 */
-	resultType: PrometheusScalarDataSchemaDTOResultType;
-}
-
-export enum PrometheusStringDataSchemaDTOResultType {
-	string = 'string',
-}
-export interface PrometheusStringDataSchemaDTO {
-	result: PrometheusSamplePairSchemaDTO | null;
-	/**
-	 * @enum string
-	 * @type string
-	 */
-	resultType: PrometheusStringDataSchemaDTOResultType;
-}
-
-export type PrometheusQueryDataSchemaDTO =
-	| PrometheusMatrixDataSchemaDTO
-	| PrometheusVectorDataSchemaDTO
-	| PrometheusScalarDataSchemaDTO
-	| PrometheusStringDataSchemaDTO;
-
-export enum PrometheusSuccessResponseSchemaDTOStatus {
-	success = 'success',
-}
-export interface PrometheusSuccessResponseSchemaDTO {
-	data: PrometheusQueryDataSchemaDTO;
-	/**
-	 * @type array
-	 */
-	infos?: string[];
-	/**
-	 * @enum success
-	 * @type string
-	 */
-	status: PrometheusSuccessResponseSchemaDTOStatus;
-	/**
-	 * @type array
-	 */
-	warnings?: string[];
-}
-
 export interface PromotetypesWrappedIndexDTO {
 	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
 	/**
@@ -10508,6 +10248,11 @@ export type GetAIObservabilityFieldsValuesParams = {
 	 * @description undefined
 	 */
 	name?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	existingQuery?: string;
 };
 
 export type GetAIObservabilityFieldsValues200 = {
@@ -11572,17 +11317,6 @@ export type MigrateDashboardV2200 = {
 	status: string;
 };
 
-export type GetSystemDashboardPathParameters = {
-	name: string;
-};
-export type GetSystemDashboard200 = {
-	data: DashboardtypesGettableSystemDashboardDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFeatures200 = {
 	/**
 	 * @type array
@@ -12741,115 +12475,3 @@ export type ReplaceVariables200 = {
 	 */
 	status: string;
 };
-
-export type PrometheusQueryParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Evaluation timestamp: RFC3339 or float unix seconds. Defaults to the server's current time.
-	 */
-	time?: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryPostParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Evaluation timestamp: RFC3339 or float unix seconds. Defaults to the server's current time.
-	 */
-	time?: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryRangeParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Range start: RFC3339 or float unix seconds.
-	 */
-	start: string;
-	/**
-	 * @type string
-	 * @description Range end: RFC3339 or float unix seconds.
-	 */
-	end: string;
-	/**
-	 * @type string
-	 * @description Resolution step: duration string or float seconds.
-	 */
-	step: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryRangePostParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Range start: RFC3339 or float unix seconds.
-	 */
-	start: string;
-	/**
-	 * @type string
-	 * @description Range end: RFC3339 or float unix seconds.
-	 */
-	end: string;
-	/**
-	 * @type string
-	 * @description Resolution step: duration string or float seconds.
-	 */
-	step: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};

frontend/src/api/v1/dashboards/create.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/create';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const create = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/dashboards', {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default create;

frontend/src/api/v1/dashboards/getAll.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard, PayloadProps } from 'types/api/dashboard/getAll';
+
+const getAll = async (): Promise<SuccessResponseV2<Dashboard[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>('/dashboards');
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getAll;

frontend/src/api/v1/dashboards/id/delete.ts

@@ -0,0 +1,21 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/delete';
+
+const deleteDashboard = async (
+	props: Props,
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default deleteDashboard;

frontend/src/api/v1/dashboards/id/get.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/get';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const get = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/api/v1/dashboards/id/lock.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/lockUnlock';
+
+const lock = async (props: Props): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put<PayloadProps>(
+			`/dashboards/${props.id}/lock`,
+			{ lock: props.lock },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default lock;

frontend/src/api/v1/dashboards/id/update.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { PayloadProps, Props } from 'types/api/dashboard/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/dashboards/${props.id}`, {
+			...props.data,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/assets/CustomIcons/ApacheIcon.tsx

@@ -0,0 +1,176 @@
+export default function ApacheIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M8.7112 1.05739C8.3796 1.30831 8.08524 1.60498 7.83691 1.93853L8.17977 2.58567C8.40218 2.26279 8.64677 1.95576 8.91177 1.66681C8.93063 1.64581 8.94091 1.63596 8.94091 1.63596L8.91177 1.66681C8.66003 1.95965 8.43081 2.27111 8.22606 2.59853C8.67305 2.56672 9.11808 2.51165 9.55934 2.43353C9.60936 2.25525 9.62374 2.06886 9.60168 1.88502C9.57962 1.70118 9.52154 1.52349 9.43077 1.3621C9.43077 1.3621 9.09991 0.828957 8.7112 1.05739Z"
+				fill="url(#paint0_linear_2061_4195)"
+			/>
+			<path
+				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.16872 4.25736C7.273 4.0625 7.37858 3.87221 7.48543 3.6865C7.59629 3.49393 7.70829 3.3075 7.82143 3.12721L7.84115 3.09507C7.95315 2.91793 8.066 2.74779 8.17972 2.58464L7.83686 1.9375L7.75886 2.03393C7.65986 2.15736 7.55743 2.29107 7.452 2.43036C7.33329 2.58893 7.21115 2.75779 7.08729 2.93564C6.97286 3.09979 6.85672 3.27164 6.74058 3.44993C6.64158 3.60121 6.54258 3.75721 6.444 3.91707L6.43286 3.93507L6.879 4.8145C6.97443 4.62707 7.071 4.44136 7.16872 4.25736Z"
+				fill="url(#paint1_linear_2061_4195)"
+			/>
+			<path
+				d="M5.13606 9.22519C5.07692 9.38748 5.01763 9.55305 4.95821 9.72191L4.95563 9.72919L4.93035 9.80076C4.89049 9.91476 4.85535 10.015 4.77563 10.2503C4.92444 10.3467 5.0416 10.4847 5.11249 10.6472C5.10283 10.4581 5.01907 10.2804 4.87935 10.1526C5.16043 10.1981 5.44862 10.1654 5.71236 10.0581C5.97609 9.95074 6.20521 9.77291 6.37463 9.54405C6.40102 9.50088 6.42464 9.45607 6.44535 9.40991C6.37459 9.49741 6.28141 9.56408 6.17575 9.6028C6.07008 9.64152 5.95589 9.65084 5.84535 9.62976C6.20937 9.49539 6.51802 9.24316 6.72221 8.91319C6.76978 8.83691 6.81563 8.75376 6.86278 8.66162C6.6974 8.84328 6.48756 8.97872 6.25393 9.05463C6.02029 9.13053 5.77091 9.14426 5.53035 9.09448L5.16949 9.13391C5.15706 9.16434 5.14721 9.19476 5.13606 9.22519Z"
+				fill="url(#paint2_linear_2061_4195)"
+			/>
+			<path
+				d="M5.30448 8.417C5.38248 8.21528 5.46276 8.01157 5.54533 7.80586C5.62419 7.60871 5.70519 7.41057 5.78833 7.21143C5.87148 7.01228 5.95633 6.81228 6.0429 6.61143C6.1309 6.40828 6.22076 6.20557 6.31248 6.00328C6.40419 5.801 6.49633 5.60257 6.5889 5.408C6.62262 5.33714 6.65662 5.26643 6.6909 5.19586C6.75005 5.07414 6.80962 4.95343 6.86962 4.83371C6.87262 4.82728 6.87605 4.82086 6.87948 4.81443L6.4329 3.93457L6.41105 3.97014C6.30733 4.14157 6.20362 4.313 6.10205 4.49128C6.00048 4.66957 5.89848 4.853 5.80205 5.03814C5.7189 5.19443 5.63776 5.35157 5.55862 5.50957L5.51148 5.606C5.41419 5.80614 5.32633 5.99943 5.24705 6.18543C5.15705 6.396 5.07762 6.59686 5.00876 6.788C4.9629 6.91357 4.92305 7.03486 4.88362 7.151C4.85233 7.25043 4.82276 7.34986 4.79448 7.451C4.72762 7.68471 4.67048 7.91771 4.62305 8.15L5.07133 9.035C5.13076 8.87671 5.19162 8.71614 5.2539 8.55328L5.30448 8.417Z"
+				fill="url(#paint3_linear_2061_4195)"
+			/>
+			<path
+				d="M4.615 8.18082C4.55868 8.46014 4.51975 8.74268 4.49843 9.02682C4.49843 9.03668 4.49843 9.04653 4.49629 9.05639C4.3547 8.8778 4.1801 8.72808 3.982 8.61539C4.24526 8.95089 4.41819 9.34823 4.48429 9.76953C4.28982 9.78674 4.0942 9.75338 3.91643 9.67268C4.05057 9.80984 4.21714 9.91096 4.40072 9.96668C4.14974 10.0146 3.9168 10.1307 3.72743 10.3022C3.97375 10.178 4.25059 10.1271 4.525 10.1557C4.21858 11.024 3.91129 11.9827 3.604 13.0001C3.64664 12.988 3.6856 12.9655 3.71739 12.9346C3.74918 12.9037 3.7728 12.8654 3.78615 12.8231C3.841 12.6388 4.20443 11.4298 4.77443 9.84068L4.82372 9.70439L4.83743 9.66625C4.89772 9.49968 4.96015 9.32968 5.02472 9.15625L5.06758 9.03753V9.03539L4.62143 8.15039C4.61929 8.16025 4.61672 8.17053 4.615 8.18082Z"
+				fill="url(#paint4_linear_2061_4195)"
+			/>
+			<path
+				d="M6.94843 4.89059L6.90986 4.96987C6.87129 5.04959 6.83214 5.13102 6.79243 5.21416C6.74957 5.30416 6.70671 5.3963 6.66386 5.49059C6.64157 5.53816 6.621 5.58573 6.59743 5.63416C6.53057 5.7793 6.46286 5.92916 6.39429 6.08373C6.30857 6.27402 6.22286 6.47173 6.13714 6.67687C6.054 6.87259 5.96971 7.07516 5.88429 7.28459C5.80314 7.48459 5.721 7.68973 5.63786 7.90002C5.56386 8.08888 5.48914 8.28273 5.41371 8.48159C5.40986 8.49145 5.40643 8.50087 5.403 8.51073C5.32814 8.70873 5.25257 8.91187 5.17629 9.12016L5.17114 9.1343L5.532 9.09487L5.51057 9.09102C6.039 8.98351 6.52026 8.7126 6.88629 8.31659C7.0686 8.1182 7.22683 7.89896 7.35771 7.66345C7.47147 7.46033 7.57252 7.25036 7.66029 7.03473C7.74386 6.83245 7.824 6.61387 7.90114 6.37645C7.79448 6.43086 7.68084 6.47037 7.56343 6.49388C7.54157 6.49859 7.52057 6.50287 7.49657 6.50673C7.47257 6.51059 7.45071 6.51445 7.42757 6.51745C7.80325 6.36305 8.10458 6.06924 8.26843 5.69759C8.12155 5.79773 7.95733 5.86966 7.78414 5.90973C7.75586 5.91616 7.72757 5.92087 7.69843 5.92516L7.677 5.92816C7.80484 5.87656 7.92565 5.80903 8.03657 5.72716C8.05843 5.71087 8.07943 5.69373 8.1 5.67573C8.13129 5.64873 8.16086 5.62045 8.18914 5.59002C8.20714 5.57116 8.22471 5.55145 8.24186 5.53087C8.28293 5.48179 8.32059 5.42996 8.35457 5.37573C8.36529 5.35859 8.376 5.34145 8.38629 5.32345C8.39957 5.29773 8.41243 5.27245 8.42486 5.24716C8.481 5.13402 8.526 5.03288 8.56157 4.94459C8.57957 4.90173 8.595 4.85888 8.60829 4.82116C8.61386 4.80616 8.619 4.79116 8.62371 4.7783C8.63786 4.73545 8.64943 4.69816 8.65843 4.66473C8.66941 4.62595 8.67828 4.58661 8.685 4.54688C8.67015 4.5586 8.65454 4.56934 8.63829 4.57902C8.4822 4.66169 8.31419 4.71953 8.14029 4.75045H8.13257L8.08157 4.75859L8.09057 4.75473L6.957 4.87902L6.94843 4.89059Z"
+				fill="url(#paint5_linear_2061_4195)"
+			/>
+			<path
+				d="M8.22475 2.59871C8.12404 2.75343 8.01389 2.92914 7.89561 3.12843L7.87675 3.16014C7.77446 3.33157 7.66604 3.52114 7.55147 3.72886C7.45261 3.90771 7.34989 4.10014 7.24332 4.30614C7.15018 4.48586 7.05418 4.67671 6.95532 4.87871L8.08889 4.75443C8.33914 4.65567 8.55501 4.48583 8.70989 4.26586C8.74804 4.211 8.78618 4.15357 8.82432 4.09443C8.94089 3.91271 9.05489 3.71257 9.15689 3.51371C9.25018 3.33322 9.33429 3.14813 9.40889 2.95914C9.44758 2.86102 9.48092 2.76087 9.50875 2.65914C9.52932 2.58028 9.54561 2.50571 9.55804 2.43457C9.11675 2.51236 8.67172 2.56715 8.22475 2.59871Z"
+				fill="url(#paint6_linear_2061_4195)"
+			/>
+			<path
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="#BE202E"
+			/>
+			<path
+				opacity="0.35"
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="#BE202E"
+			/>
+			<path
+				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
+				fill="url(#paint7_linear_2061_4195)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2061_4195"
+					x1="7.26579"
+					y1="1.16584"
+					x2="9.7782"
+					y2="0.46843"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F69923" />
+					<stop offset="0.312" stopColor="#F79A23" />
+					<stop offset="0.838" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_2061_4195"
+					x1="1.76109"
+					y1="12.4382"
+					x2="6.87606"
+					y2="1.48267"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint2_linear_2061_4195"
+					x1="3.47784"
+					y1="11.6287"
+					x2="6.5258"
+					y2="5.10046"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#282662" />
+					<stop offset="0.095" stopColor="#662E8D" />
+					<stop offset="0.788" stopColor="#9F2064" />
+					<stop offset="0.949" stopColor="#CD2032" />
+				</linearGradient>
+				<linearGradient
+					id="paint3_linear_2061_4195"
+					x1="1.94596"
+					y1="11.7748"
+					x2="7.06094"
+					y2="0.819304"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint4_linear_2061_4195"
+					x1="2.46768"
+					y1="11.0455"
+					x2="5.15578"
+					y2="5.28798"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#282662" />
+					<stop offset="0.095" stopColor="#662E8D" />
+					<stop offset="0.788" stopColor="#9F2064" />
+					<stop offset="0.949" stopColor="#CD2032" />
+				</linearGradient>
+				<linearGradient
+					id="paint5_linear_2061_4195"
+					x1="3.08048"
+					y1="12.3044"
+					x2="8.19546"
+					y2="1.3489"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint6_linear_2061_4195"
+					x1="2.70679"
+					y1="12.9581"
+					x2="7.82195"
+					y2="2.00223"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+				<linearGradient
+					id="paint7_linear_2061_4195"
+					x1="3.41759"
+					y1="12.4619"
+					x2="8.53277"
+					y2="1.50629"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.323" stopColor="#9E2064" />
+					<stop offset="0.63" stopColor="#C92037" />
+					<stop offset="0.751" stopColor="#CD2335" />
+					<stop offset="1" stopColor="#E97826" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/DockerIcon.tsx

@@ -0,0 +1,28 @@
+export default function DockerIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4220)">
+				<path
+					d="M13.574 5.82107C13.2652 5.60679 12.5575 5.52644 12.0042 5.63358C11.9398 5.09788 11.6439 4.62915 11.1292 4.21399L10.8332 3.99971L10.6274 4.30774C10.37 4.70951 10.2413 5.27198 10.2799 5.80768C10.2928 5.99517 10.3571 6.32998 10.5502 6.62461C10.37 6.73175 9.99686 6.86567 9.50789 6.86567H0.204685L0.17895 6.97281C0.0888774 7.5085 0.0888774 9.18254 1.14401 10.4682C1.9418 11.4458 3.12561 11.9414 4.68258 11.9414C8.05386 11.9414 10.5502 10.3209 11.7211 7.38797C12.1843 7.40136 13.1751 7.38797 13.677 6.38354C13.6898 6.35676 13.7156 6.30319 13.8056 6.10231L13.8571 5.99517L13.574 5.82107ZM7.6421 2.04443H6.22668V3.38367H7.6421V2.04443ZM7.6421 3.65151H6.22668V4.99074H7.6421V3.65151ZM5.96933 3.65151H4.5539V4.99074H5.96933V3.65151ZM4.29655 3.65151H2.88113V4.99074H4.29655V3.65151ZM2.62378 5.25859H1.20835V6.59782H2.62378V5.25859ZM4.29655 5.25859H2.88113V6.59782H4.29655V5.25859ZM5.96933 5.25859H4.5539V6.59782H5.96933V5.25859ZM7.6421 5.25859H6.22668V6.59782H7.6421V5.25859ZM9.31488 5.25859H7.89945V6.59782H9.31488V5.25859Z"
+					fill="#2396ED"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4220">
+					<rect
+						width="13.7143"
+						height="13.7143"
+						fill="white"
+						transform="translate(0.142822 0.143066)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/ElasticSearchIcon.tsx

@@ -0,0 +1,36 @@
+export default function ElasticSearchIcon(): JSX.Element {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.38041 6.94508L9.70241 8.45858L13.0524 5.52158C13.1019 5.27892 13.1255 5.03171 13.1229 4.78408C13.1236 3.9846 12.8681 3.20592 12.3941 2.56216C11.92 1.9184 11.2522 1.44339 10.4885 1.20675C9.72487 0.970101 8.9055 0.984259 8.15047 1.24714C7.39544 1.51003 6.74446 2.00782 6.29291 2.66758L5.73291 5.56008L6.38041 6.94508Z"
+				fill="#FED10A"
+			/>
+			<path
+				d="M2.943 10.4593C2.89356 10.7062 2.86994 10.9575 2.8725 11.2093C2.87361 12.012 3.13177 12.7932 3.60915 13.4385C4.08654 14.0838 4.75804 14.5592 5.52528 14.7952C6.29252 15.0311 7.11514 15.0151 7.87262 14.7495C8.63009 14.4839 9.28259 13.9827 9.7345 13.3193L10.2845 10.4398L9.55 9.02928L6.215 7.50928L2.943 10.4593Z"
+				fill="#24BBB1"
+			/>
+			<path
+				d="M2.92394 4.71302L5.19994 5.25002L5.69994 2.66552C5.39077 2.43015 5.01365 2.30134 4.62509 2.29839C4.23654 2.29544 3.8575 2.41852 3.54479 2.64916C3.23208 2.8798 3.00256 3.20559 2.89063 3.57768C2.77869 3.94978 2.79039 4.34813 2.92394 4.71302Z"
+				fill="#EF5098"
+			/>
+			<path
+				d="M2.72503 5.2583C2.23266 5.42016 1.80253 5.73058 1.49379 6.14687C1.18505 6.56317 1.01286 7.0649 1.00091 7.58305C0.988962 8.1012 1.13784 8.61033 1.42706 9.04041C1.71628 9.4705 2.13164 9.80042 2.61603 9.9848L5.81003 7.0998L5.22653 5.8498L2.72503 5.2583Z"
+				fill="#17A8E0"
+			/>
+			<path
+				d="M10.312 13.3197C10.6209 13.5543 10.9975 13.6825 11.3853 13.6851C11.7732 13.6877 12.1514 13.5646 12.4634 13.3342C12.7755 13.1038 13.0044 12.7785 13.116 12.407C13.2276 12.0356 13.2159 11.6379 13.0825 11.2737L10.812 10.7412L10.312 13.3197Z"
+				fill="#93C83E"
+			/>
+			<path
+				d="M10.7735 10.145L13.2735 10.7285C13.7666 10.5672 14.1976 10.257 14.507 9.84058C14.8165 9.42415 14.9891 8.922 15.0013 8.40333C15.0134 7.88467 14.8643 7.375 14.5747 6.94457C14.2851 6.51414 13.8691 6.18413 13.384 6L10.1135 8.8665L10.7735 10.145Z"
+				fill="#0779A1"
+			/>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/HerokuIcon.tsx

@@ -0,0 +1,27 @@
+function HerokuIcon(): JSX.Element {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4245)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M13.6285 0H2.10787C1.31283 0 0.666748 0.644312 0.666748 1.44112V14.5602C0.666748 15.3557 1.31283 16 2.10787 16H13.6285C14.4237 16 15.0678 15.3557 15.0678 14.5602V1.44112C15.0678 0.644312 14.4237 0 13.6285 0ZM14.2677 14.5602C14.2677 14.9135 13.9815 15.1994 13.6285 15.1994H2.10787C1.75506 15.1994 1.46688 14.9135 1.46688 14.5602V1.44112C1.46688 1.08654 1.75506 0.800133 2.10787 0.800133H13.6285C13.9815 0.800133 14.2677 1.08654 14.2677 1.44112V14.5602ZM4.26699 13.6009L6.06823 12.0002L4.26699 10.3999V13.6009ZM10.7719 7.11485C10.4481 6.78927 9.8569 6.40038 8.86819 6.40038C7.78342 6.40038 6.66611 6.68302 5.86752 6.94177V2.40082H4.26704V9.33907L5.39807 8.82667C5.41688 8.81826 7.24025 8.00086 8.86819 8.00086C9.68027 8.00086 9.86022 8.44796 9.86885 8.82158V13.6009H11.4676V8.801C11.4693 8.6983 11.4592 7.81051 10.7719 7.11485ZM8.66761 5.00027H10.2681C10.9912 4.1811 11.3597 3.30903 11.4677 2.40066H9.86881C9.69063 3.30726 9.29643 4.17424 8.66761 5.00027Z"
+					fill="#6762A6"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4245">
+					<rect width="16" height="16" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
+export default HerokuIcon;

frontend/src/assets/CustomIcons/MongoDBIcon.tsx

@@ -0,0 +1,68 @@
+export default function MongoDBIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M7.26568 13.0004L6.94382 12.8937C6.94382 12.8937 6.98668 11.2651 6.39739 11.1507C6.01168 10.7015 6.45439 -8.02403 7.86439 11.0868C7.59687 11.2225 7.39217 11.4564 7.29311 11.7395C7.24001 12.1577 7.23082 12.5803 7.26568 13.0004Z"
+				fill="url(#paint0_linear_2061_4238)"
+			/>
+			<path
+				d="M7.43957 11.4272C8.29654 10.7821 8.95282 9.90701 9.33214 8.90369C9.71147 7.90037 9.79826 6.81 9.58243 5.75931C8.95243 2.98002 7.46058 2.06631 7.29986 1.71745C7.1612 1.50022 7.04284 1.27068 6.94629 1.03174L7.065 8.7756C7.065 8.7756 6.819 11.1422 7.43957 11.4272Z"
+				fill="url(#paint1_linear_2061_4238)"
+			/>
+			<path
+				d="M6.78015 11.5296C6.78015 11.5296 4.15687 9.74286 4.30858 6.58214C4.32273 5.62928 4.54121 4.69054 4.94926 3.82935C5.3573 2.96816 5.94542 2.20456 6.67387 1.59014C6.759 1.51782 6.82663 1.42715 6.87168 1.32493C6.91674 1.22272 6.93805 1.11163 6.93401 1C7.0973 1.35143 7.07072 6.247 7.08787 6.81957C7.1543 9.04686 6.96401 11.1091 6.78015 11.5296Z"
+				fill="url(#paint2_linear_2061_4238)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2061_4238"
+					x1="5.1021"
+					y1="7.10853"
+					x2="8.80138"
+					y2="8.36386"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop offset="0.231" stopColor="#999875" />
+					<stop offset="0.563" stopColor="#9B9977" />
+					<stop offset="0.683" stopColor="#A09F7E" />
+					<stop offset="0.768" stopColor="#A9A889" />
+					<stop offset="0.837" stopColor="#B7B69A" />
+					<stop offset="0.896" stopColor="#C9C7B0" />
+					<stop offset="0.948" stopColor="#DEDDCB" />
+					<stop offset="0.994" stopColor="#F8F6EB" />
+					<stop offset="1" stopColor="#FBF9EF" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_2061_4238"
+					x1="6.45855"
+					y1="0.976404"
+					x2="8.09399"
+					y2="11.1888"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#48A547" />
+					<stop offset="1" stopColor="#3F9143" />
+				</linearGradient>
+				<linearGradient
+					id="paint2_linear_2061_4238"
+					x1="4.08293"
+					y1="6.89501"
+					x2="8.47176"
+					y2="5.42519"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#41A247" />
+					<stop offset="0.352" stopColor="#4BA74B" />
+					<stop offset="0.956" stopColor="#67B554" />
+					<stop offset="1" stopColor="#69B655" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

frontend/src/assets/CustomIcons/NginxIcon.tsx

@@ -0,0 +1,22 @@
+function NginxIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.97775 1H7.00561C7.14837 1.068 7.28743 1.14353 7.42218 1.22629C8.97332 2.11829 10.5245 3.01057 12.0756 3.90314C12.1356 3.93517 12.1846 3.9845 12.2163 4.04472C12.2479 4.10493 12.2607 4.17327 12.253 4.24086C12.2496 6.12186 12.253 8.00243 12.2509 9.88257C12.2307 9.9723 12.1759 10.0504 12.0983 10.0999C10.4489 11.0496 8.79932 11.9987 7.14961 12.9473C7.10963 12.9778 7.06144 12.9956 7.01125 12.9984C6.96106 13.0012 6.91118 12.9889 6.86803 12.9631C5.21661 12.0163 3.56675 11.0677 1.91846 10.1174C1.86489 10.0921 1.82003 10.0515 1.78952 10.0007C1.75901 9.94988 1.74423 9.89119 1.74703 9.832C1.74703 7.95143 1.74703 6.071 1.74703 4.19071C1.74299 4.13178 1.75661 4.07299 1.78616 4.02184C1.8157 3.97069 1.85983 3.92951 1.91289 3.90357C3.46203 3.01271 5.01118 2.12129 6.56032 1.22929C6.69832 1.15043 6.83375 1.06686 6.97775 1Z"
+				fill="#019639"
+			/>
+			<path
+				d="M3.90007 4.65924C3.90007 6.21039 3.90007 7.76167 3.90007 9.3131C3.89809 9.39901 3.91326 9.48446 3.94468 9.56445C3.9761 9.64444 4.02315 9.71736 4.08307 9.77896C4.19794 9.89243 4.34824 9.96309 4.5089 9.97916C4.66956 9.99522 4.83087 9.95572 4.96593 9.86724C5.05634 9.80581 5.13035 9.72321 5.18152 9.62662C5.23269 9.53003 5.25946 9.4224 5.2595 9.3131C5.2595 8.19024 5.25736 7.06739 5.2595 5.94453C6.28322 7.17024 7.30907 8.39424 8.33707 9.61653C8.4799 9.76122 8.65676 9.86772 8.85145 9.92628C9.04614 9.98484 9.25242 9.99357 9.45136 9.95167C9.59184 9.924 9.71973 9.85198 9.81624 9.74622C9.91275 9.64045 9.97278 9.50652 9.9875 9.3641C9.98979 7.78096 9.98979 6.19796 9.9875 4.6151C9.97275 4.44614 9.8952 4.28884 9.77016 4.17425C9.64512 4.05966 9.48168 3.99609 9.31207 3.99609C9.14247 3.99609 8.97902 4.05966 8.85399 4.17425C8.72895 4.28884 8.6514 4.44614 8.63665 4.6151C8.63665 5.75596 8.62979 6.89553 8.63665 8.03596C7.63122 6.85053 6.63822 5.65481 5.63665 4.4651C5.5046 4.29578 5.32979 4.16474 5.13023 4.08549C4.93067 4.00624 4.71359 3.98165 4.50136 4.01424C4.34059 4.03214 4.19154 4.10704 4.08124 4.22536C3.97093 4.34369 3.90666 4.49761 3.90007 4.65924Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
+
+export default NginxIcon;

frontend/src/assets/CustomIcons/RedisIcon.tsx

@@ -0,0 +1,60 @@
+export default function RedisIcon(): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_2061_4282)">
+				<path
+					d="M13.3198 10.158C12.5879 10.5395 8.79654 12.0984 7.98938 12.5192C7.18221 12.94 6.73382 12.936 6.09616 12.6312C5.45855 12.3263 1.42388 10.6966 0.697072 10.3492C0.333858 10.1756 0.142822 10.029 0.142822 9.8906V8.50438C0.142822 8.50438 5.3955 7.3609 6.24348 7.05667C7.09141 6.75244 7.38563 6.74145 8.10723 7.00578C8.82895 7.2702 13.1439 8.0487 13.8571 8.30992L13.8568 9.67653C13.8569 9.81356 13.6923 9.96388 13.3198 10.158Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 8.77972C12.5877 9.16104 8.79642 10.72 7.98926 11.1407C7.18215 11.5616 6.73376 11.5575 6.09615 11.2527C5.45849 10.9481 1.42397 9.31805 0.697221 8.97086C-0.029529 8.62345 -0.0447433 8.38436 0.66915 8.10482C1.38304 7.82518 5.39544 6.25098 6.24353 5.94675C7.09145 5.64263 7.38561 5.63154 8.10722 5.89597C8.82888 6.16029 12.5975 7.66034 13.3106 7.9215C14.024 8.18298 14.0513 8.39829 13.3195 8.77972Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M13.3198 7.91483C12.5879 8.29637 8.79654 9.85519 7.98938 10.2762C7.18221 10.6968 6.73382 10.6928 6.09616 10.388C5.4585 10.0833 1.42388 8.45338 0.697072 8.10597C0.333858 7.9324 0.142822 7.78604 0.142822 7.64756V6.26119C0.142822 6.26119 5.3955 5.11776 6.24348 4.81353C7.09141 4.50929 7.38563 4.49826 8.10723 4.76263C8.829 5.02701 13.144 5.80535 13.8571 6.06661L13.8568 7.43338C13.8569 7.57036 13.6923 7.72069 13.3198 7.91483Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 6.53701C12.5877 6.91844 8.79642 8.47726 7.98926 8.89817C7.18215 9.31892 6.73376 9.3148 6.09615 9.00998C5.45849 8.70537 1.42397 7.07541 0.697221 6.72816C-0.029529 6.38085 -0.0447433 6.14171 0.66915 5.86207C1.38304 5.58258 5.39549 4.00828 6.24353 3.7041C7.09145 3.39992 7.38561 3.38889 8.10722 3.65326C8.82888 3.91758 12.5975 5.41753 13.3106 5.6788C14.024 5.94023 14.0513 6.15558 13.3195 6.53701Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M13.3198 5.58855C12.5879 5.96998 8.79654 7.5289 7.98938 7.94987C7.18221 8.37062 6.73382 8.36649 6.09616 8.06167C5.4585 7.75701 1.42388 6.12705 0.697072 5.7798C0.333858 5.60607 0.142822 5.45965 0.142822 5.32133V3.9349C0.142822 3.9349 5.3955 2.79153 6.24348 2.48735C7.09141 2.18307 7.38563 2.17214 8.10723 2.43646C8.829 2.70083 13.144 3.47917 13.8571 3.74044L13.8568 5.10715C13.8569 5.24403 13.6923 5.39435 13.3198 5.58855Z"
+					fill="#912626"
+				/>
+				<path
+					d="M13.3195 4.21078C12.5876 4.59221 8.79639 6.15113 7.98923 6.57188C7.18212 6.99263 6.73373 6.98851 6.09612 6.68385C5.45852 6.37903 1.42394 4.74917 0.697248 4.40187C-0.0295558 4.05462 -0.0447165 3.81542 0.669123 3.53583C1.38302 3.2563 5.39546 1.68221 6.2435 1.37792C7.09143 1.07369 7.38559 1.06276 8.1072 1.32714C8.82886 1.59151 12.5975 3.09146 13.3106 3.35272C14.0239 3.61394 14.0513 3.82935 13.3195 4.21078Z"
+					fill="#C6302B"
+				/>
+				<path
+					d="M8.67572 2.86218L7.49661 2.9846L7.23267 3.61974L6.80635 2.91099L5.44483 2.78863L6.46076 2.42226L6.15594 1.85986L7.1071 2.23186L8.00378 1.93829L7.76142 2.51981L8.67572 2.86218ZM7.16228 5.94351L4.96172 5.03081L8.11494 4.54679L7.16228 5.94351ZM4.11138 3.21522C5.04219 3.21522 5.79674 3.50772 5.79674 3.86847C5.79674 4.22933 5.04219 4.52177 4.11138 4.52177C3.18058 4.52177 2.42603 4.22927 2.42603 3.86847C2.42603 3.50772 3.18058 3.21522 4.11138 3.21522Z"
+					fill="white"
+				/>
+				<path
+					d="M10.0693 3.0357L11.9355 3.77316L10.0709 4.50993L10.0693 3.0357Z"
+					fill="#621B1C"
+				/>
+				<path
+					d="M8.00464 3.85234L10.0693 3.03564L10.0709 4.50988L9.86844 4.58906L8.00464 3.85234Z"
+					fill="#9A2928"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_2061_4282">
+					<rect
+						width="13.7143"
+						height="13.7143"
+						fill="white"
+						transform="translate(0.142822 0.143066)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from '@signozhq/icons';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -5,16 +5,16 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,15 +5,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { CardContainer } from 'container/WidgetCard/styles';
+import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,7 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -6,9 +6,9 @@ import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -8,7 +8,7 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -4,9 +4,10 @@ import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import useUpdatedQuery from 'container/WidgetCard/hooks/useResolveQuery';
+import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -79,6 +80,7 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
+	const { dashboardData } = useDashboardStore();
 	const { notifications } = useNotifications();
 
 	return useCallback(
@@ -110,6 +112,7 @@ export function useNavigateToExplorer(): (
 						panelTypes: PANEL_TYPES.TIME_SERIES,
 						timePreferance: 'GLOBAL_TIME',
 					},
+					dashboardData,
 				})
 					.then((query) => {
 						preparedQuery = query;
@@ -133,6 +136,13 @@ export function useNavigateToExplorer(): (
 
 			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
-		[prepareQuery, minTime, maxTime, getUpdatedQuery, notifications],
+		[
+			prepareQuery,
+			minTime,
+			maxTime,
+			getUpdatedQuery,
+			dashboardData,
+			notifications,
+		],
 	);
 }

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -7,8 +7,9 @@ import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -68,7 +69,9 @@ function ExplorerCard({
 		setIsOpen(newOpen);
 	};
 
-	const { viewName, viewKey } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+
+	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
 	const { options } = useOptionsMenu({
 		storageKey:

frontend/src/components/ExplorerCard/constants.ts

@@ -1,3 +1,5 @@
+import { QueryParams } from 'constants/query';
+
 export const ExploreHeaderToolTip = {
 	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
@@ -7,3 +9,5 @@ export const SaveButtonText = {
 	SAVE_AS_NEW_VIEW: 'Save as new view',
 	SAVE_VIEW: 'Save view',
 };
+
+export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey;

frontend/src/components/Graph/index.tsx

@@ -28,7 +28,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { generateGridTitle } from 'utils/generateGridTitle';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';

frontend/src/components/MarkdownEditor/EditorStatusBar.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import type { CursorPosition } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-interface EditorStatusBarProps {
-	cursor: CursorPosition;
-	length: number;
-	maxLength: number;
-	hint?: ReactNode;
-}
-
-function EditorStatusBar({
-	cursor,
-	length,
-	maxLength,
-	hint,
-}: EditorStatusBarProps): JSX.Element {
-	const isOverLimit = length > maxLength;
-
-	return (
-		<div className={styles.statusBar} data-testid="markdown-editor-status">
-			<Typography.Text className={styles.statusPosition}>
-				{`Ln ${cursor.line}, Col ${cursor.column}`}
-				<span className={styles.statusSeparator}>·</span>
-				<span
-					className={cx(styles.statusCount, {
-						[styles.statusCountOverLimit]: isOverLimit,
-					})}
-					data-testid="markdown-editor-char-count"
-				>
-					{isOverLimit
-						? `${length} / ${maxLength} chars`
-						: `${length} chars`}
-				</span>
-			</Typography.Text>
-			{hint && (
-				<Typography.Text className={styles.statusHint}>{hint}</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-export default EditorStatusBar;

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -1,93 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-	Bold,
-	CodeXml,
-	Heading,
-	Italic,
-	Link,
-	List,
-	ListOrdered,
-	Table,
-	Type,
-} from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-
-import InsertVariableMenu from './InsertVariableMenu';
-import MarkdownHelp from './MarkdownHelp';
-import type { EditorCommand, EditorVariable } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-const COMMAND_ICONS: Record<string, ReactNode> = {
-	heading: <Heading size={14} />,
-	bold: <Bold size={14} />,
-	italic: <Italic size={14} />,
-	'bulleted-list': <List size={14} />,
-	'numbered-list': <ListOrdered size={14} />,
-	link: <Link size={14} />,
-	code: <CodeXml size={14} />,
-	table: <Table size={14} />,
-};
-
-interface EditorToolbarProps {
-	formatLabel: string;
-	commands: EditorCommand[];
-	onRunCommand: (command: EditorCommand) => void;
-	variables: EditorVariable[];
-	onInsertVariable: (name: string) => void;
-	disabled: boolean;
-	extra?: ReactNode;
-}
-
-function EditorToolbar({
-	formatLabel,
-	commands,
-	onRunCommand,
-	variables,
-	onInsertVariable,
-	disabled,
-	extra,
-}: EditorToolbarProps): JSX.Element {
-	return (
-		<div className={styles.toolbar} data-testid="markdown-editor-toolbar">
-			<span className={styles.formatChip}>
-				<Type size={14} />
-				<Typography.Text className={styles.formatLabel}>
-					{formatLabel}
-				</Typography.Text>
-			</span>
-			<span className={styles.toolbarDivider} />
-			<div className={styles.commands}>
-				{commands.map((command) => (
-					<TooltipSimple key={command.id} title={command.label}>
-						<Button
-							type="button"
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							disabled={disabled}
-							aria-label={command.label}
-							data-testid={`markdown-command-${command.id}`}
-							onClick={(): void => onRunCommand(command)}
-						>
-							{COMMAND_ICONS[command.id]}
-						</Button>
-					</TooltipSimple>
-				))}
-			</div>
-			<div className={styles.toolbarEnd}>
-				{extra}
-				<InsertVariableMenu
-					variables={variables}
-					onSelect={onInsertVariable}
-					disabled={disabled}
-				/>
-				<MarkdownHelp />
-			</div>
-		</div>
-	);
-}
-
-export default EditorToolbar;

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -1,91 +0,0 @@
-import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { EditorVariable } from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-interface InsertVariableMenuProps {
-	variables: EditorVariable[];
-	/** Receives the variable name; the caller decides the token syntax. */
-	onSelect: (name: string) => void;
-	disabled: boolean;
-}
-
-function toMenuItems(
-	variables: EditorVariable[],
-	onSelect: (name: string) => void,
-): MenuItem[] {
-	return variables.map((variable) => ({
-		key: variable.name,
-		label: (
-			<span
-				className={styles.variableRow}
-				data-testid={`markdown-variable-${variable.name}`}
-			>
-				<span className={styles.variableName}>{`$${variable.name}`}</span>
-				{variable.badge && (
-					<span className={styles.variableBadge}>{variable.badge}</span>
-				)}
-			</span>
-		),
-		onClick: (): void => onSelect(variable.name),
-	}));
-}
-
-/** Searchable variable picker; hidden entirely when there is nothing to insert. */
-function InsertVariableMenu({
-	variables,
-	onSelect,
-	disabled,
-}: InsertVariableMenuProps): JSX.Element | null {
-	const [search, setSearch] = useState('');
-
-	const matches = useMemo(() => {
-		const query = search.trim().toLowerCase();
-		return query
-			? variables.filter((variable) => variable.name.toLowerCase().includes(query))
-			: variables;
-	}, [variables, search]);
-
-	const items = useMemo(
-		() => toMenuItems(matches, onSelect),
-		[matches, onSelect],
-	);
-
-	if (variables.length === 0) {
-		return null;
-	}
-
-	return (
-		<DropdownMenuSimple
-			className={styles.variableMenu}
-			menu={{
-				items,
-				search: {
-					placeholder: 'Search variables',
-					searchIcon: <Search size={14} />,
-					onSearchChange: setSearch,
-				},
-			}}
-		>
-			<Button
-				type="button"
-				variant="outlined"
-				color="secondary"
-				size="sm"
-				disabled={disabled}
-				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
-				suffix={<ChevronDown size={14} />}
-				className={styles.insertVariable}
-				data-testid="markdown-insert-variable"
-			>
-				Insert variable
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default InsertVariableMenu;

frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -1,253 +0,0 @@
-@use '../../styles/scrollbar' as *;
-
-.container {
-	// Read by the decoration theme in `markdownHighlight`, which can't see SCSS.
-	--md-syntax-heading: var(--text-vanilla-100);
-	--md-syntax-strong: var(--text-vanilla-100);
-	--md-syntax-emphasis: var(--text-vanilla-300);
-	--md-syntax-quote: var(--text-vanilla-400);
-	--md-syntax-marker: var(--text-robin-300);
-	--md-syntax-code: var(--text-forest-400);
-	--md-syntax-link: var(--text-robin-400);
-	--md-syntax-variable: var(--text-amber-400);
-
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-	background: var(--l1-background);
-}
-
-:global(body.lightMode) .container {
-	--md-syntax-heading: var(--text-ink-400);
-	--md-syntax-strong: var(--text-ink-400);
-	--md-syntax-emphasis: var(--text-ink-200);
-	--md-syntax-quote: var(--text-neutral-light-100);
-	--md-syntax-marker: var(--text-robin-500);
-	--md-syntax-code: var(--text-forest-700);
-	--md-syntax-link: var(--text-robin-500);
-	--md-syntax-variable: var(--text-sienna-500);
-}
-
-.toolbar {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.formatChip {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 4px 8px;
-	border: 1px solid var(--l1-border);
-	border-radius: 2px;
-	color: var(--text-sienna-400);
-}
-
-.formatLabel {
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-}
-
-.toolbarDivider {
-	width: 1px;
-	height: 16px;
-	flex-shrink: 0;
-	background: var(--l1-border);
-}
-
-.commands {
-	display: flex;
-	align-items: center;
-	gap: 2px;
-}
-
-.toolbarEnd {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-left: auto;
-}
-
-.insertVariable {
-	white-space: nowrap;
-}
-
-.insertVariableIcon {
-	color: var(--text-amber-400);
-}
-
-// The ui library's dropdown assumes a global border-box reset this app doesn't
-// have (`box-sizing` is set on `body` only and doesn't inherit): its items are
-// `width: 100%` + padding, so in the portal they lay out content-box and
-// overflow the popup by the padding — clipping the flush-right badge.
-.variableMenu,
-.variableMenu * {
-	box-sizing: border-box;
-}
-
-.variableMenu {
-	width: 320px;
-}
-
-// Shrinkable, so a clamped popup truncates the name instead of clipping the
-// badge at the content's `overflow: hidden` edge.
-.variableRow {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	flex: 1;
-	min-width: 0;
-}
-
-.variableName {
-	font-family: var(--font-family-sf-mono);
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.variableBadge {
-	flex-shrink: 0;
-	margin-left: auto;
-	padding: 2px 6px;
-	border: 1px solid color-mix(in srgb, var(--text-amber-400) 40%, transparent);
-	border-radius: 4px;
-	font-family: var(--font-family-sf-mono);
-	font-size: 10px;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: var(--text-amber-400);
-}
-
-.editorArea {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-}
-
-.codeMirror {
-	height: 100%;
-	font-family: var(--font-family-sf-mono);
-	font-size: 13px;
-
-	:global(.cm-editor) {
-		height: 100%;
-		background: transparent;
-	}
-
-	:global(.cm-editor.cm-focused) {
-		outline: none;
-	}
-
-	:global(.cm-gutters) {
-		background: transparent;
-		border-right: none;
-		color: var(--text-neutral-dark-200);
-	}
-
-	:global(.cm-scroller) {
-		line-height: 20px;
-		padding: 0 12px;
-		@include custom-scrollbar;
-	}
-
-	:global(.cm-content) {
-		padding: 8px 0;
-	}
-}
-
-.statusBar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	flex-shrink: 0;
-	padding: 6px 12px;
-	border-top: 1px solid var(--l1-border);
-}
-
-.statusPosition {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-family-sf-mono);
-	font-size: 11px;
-	color: var(--text-neutral-dark-200);
-}
-
-.statusSeparator {
-	color: var(--l1-border);
-}
-
-.statusCount {
-	color: inherit;
-}
-
-.statusCountOverLimit {
-	color: var(--text-cherry-400);
-	font-weight: 600;
-}
-
-.statusHint {
-	font-size: 11px;
-	color: var(--text-neutral-dark-200);
-}
-
-.helpContent {
-	width: 280px;
-	max-height: 320px;
-	overflow-y: auto;
-	@include custom-scrollbar;
-}
-
-.helpTitle {
-	display: block;
-	margin-bottom: 8px;
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--text-neutral-dark-200);
-}
-
-.helpList {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	margin: 0;
-}
-
-.helpRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-
-	dt {
-		margin: 0;
-
-		code {
-			font-family: var(--font-family-sf-mono);
-			font-size: 11px;
-			color: var(--text-forest-400);
-		}
-	}
-
-	dd {
-		margin: 0;
-		font-size: 11px;
-		color: var(--text-neutral-dark-200);
-	}
-}
-
-// The help popover portals out of `.container`, so it can't inherit its tokens.
-:global(body.lightMode) .helpRow dt code {
-	color: var(--text-forest-700);
-}

frontend/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,245 +0,0 @@
-import {
-	type ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import { githubLight } from '@uiw/codemirror-theme-github';
-import CodeMirror, {
-	type BasicSetupOptions,
-	EditorView,
-	type ViewUpdate,
-} from '@uiw/react-codemirror';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { formatVariableToken, MARKDOWN_MAX_LENGTH } from './constants';
-import EditorStatusBar from './EditorStatusBar';
-import EditorToolbar from './EditorToolbar';
-import { applyTransform, replaceDocument } from './editorDocument';
-import { insertText, MARKDOWN_COMMANDS } from './markdownCommands';
-import { markdownHighlight } from './markdownHighlight';
-import type {
-	CursorPosition,
-	EditorCommand,
-	EditorTransform,
-	EditorVariable,
-} from './types';
-
-import styles from './MarkdownEditor.module.scss';
-
-/** What the status bar reports. */
-type DocumentStatus = CursorPosition & { length: number };
-
-// No language grammar is loaded, so bracket/indent/completion behaviour would only
-// get in the way of prose. `indentWithTab` stays off so Tab keeps moving focus.
-const BASIC_SETUP: BasicSetupOptions = {
-	lineNumbers: true,
-	highlightActiveLine: true,
-	highlightActiveLineGutter: true,
-	foldGutter: false,
-	autocompletion: false,
-	bracketMatching: false,
-	closeBrackets: false,
-	indentOnInput: false,
-	syntaxHighlighting: false,
-	highlightSelectionMatches: false,
-	rectangularSelection: false,
-	crosshairCursor: false,
-	searchKeymap: false,
-	foldKeymap: false,
-	lintKeymap: false,
-	completionKeymap: false,
-	closeBracketsKeymap: false,
-};
-
-const EMPTY_VARIABLES: EditorVariable[] = [];
-
-export interface MarkdownEditorProps {
-	/** Seeds the document; replaced only from outside. See the sync effect. */
-	value: string;
-	onChange: (value: string) => void;
-	/** Offered by the "Insert variable" menu; the button disables when empty. */
-	variables?: EditorVariable[];
-	/** What the character counter reports against. */
-	maxLength?: number;
-	placeholder?: string;
-	readOnly?: boolean;
-	/** Shown on the toolbar chip. */
-	formatLabel?: string;
-	/** Rendered before the "Insert variable" menu. */
-	toolbarExtra?: ReactNode;
-	/** Right-hand status-bar note, e.g. "Preview updates as you type". */
-	statusHint?: ReactNode;
-	autoFocus?: boolean;
-	className?: string;
-	testId?: string;
-}
-
-/**
- * Source editor for Markdown bodies. Source-only: it neither parses nor renders
- * the body, so the preview surface and its sanitisation stay the caller's concern.
- */
-function MarkdownEditor({
-	value,
-	onChange,
-	variables = EMPTY_VARIABLES,
-	maxLength = MARKDOWN_MAX_LENGTH,
-	placeholder = 'Write Markdown…',
-	readOnly = false,
-	formatLabel = 'Markdown',
-	toolbarExtra,
-	statusHint,
-	autoFocus = false,
-	className,
-	testId = 'markdown-editor',
-}: MarkdownEditorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const viewRef = useRef<EditorView | null>(null);
-	// Set while a programmatic replacement is in flight, so the caller isn't told
-	// about a change it asked for. `dispatch` runs listeners synchronously, so the
-	// window is exactly one call.
-	const isSyncingRef = useRef(false);
-	const previousValueRef = useRef(value);
-	const hasSeededRef = useRef(false);
-	const [isEditorReady, setIsEditorReady] = useState(false);
-	const [status, setStatus] = useState<DocumentStatus>(() => ({
-		line: 1,
-		column: 1,
-		length: value.length,
-	}));
-
-	const syncDocument = useCallback((view: EditorView, next: string): void => {
-		isSyncingRef.current = true;
-		replaceDocument(view, next);
-		isSyncingRef.current = false;
-	}, []);
-
-	const onCreateEditor = useCallback((view: EditorView): void => {
-		viewRef.current = view;
-		setIsEditorReady(true);
-	}, []);
-
-	/**
-	 * Seeds the document, then applies external replacements — nothing else. Keeping
-	 * keystrokes out of this round-trip is what stops a stale `value` from replacing
-	 * the document and resetting the caret when typing outpaces React.
-	 *
-	 * The seed can't go in `onCreateEditor`: the wrapper defaults its own `value` to
-	 * `''` and reconciles against it once the view exists, wiping anything written
-	 * before that. `isEditorReady` puts this effect after that pass, since a parent's
-	 * effects flush after its children's.
-	 *
-	 * Focus marks ownership: a replacement arriving mid-typing is dropped rather than
-	 * applied over the author.
-	 */
-	useEffect(() => {
-		const view = viewRef.current;
-		if (!view) {
-			return;
-		}
-
-		const previous = previousValueRef.current;
-		previousValueRef.current = value;
-		const isSeeding = !hasSeededRef.current;
-		hasSeededRef.current = true;
-
-		if (!isSeeding && (value === previous || view.hasFocus)) {
-			return;
-		}
-		if (view.state.doc.toString() !== value) {
-			syncDocument(view, value);
-		}
-	}, [value, isEditorReady, syncDocument]);
-
-	const handleChange = useCallback(
-		(next: string): void => {
-			if (!isSyncingRef.current) {
-				onChange(next);
-			}
-		},
-		[onChange],
-	);
-
-	const runTransform = useCallback((transform: EditorTransform): void => {
-		const view = viewRef.current;
-		if (view) {
-			applyTransform(view, transform);
-		}
-	}, []);
-
-	const onRunCommand = useCallback(
-		(command: EditorCommand): void => runTransform(command.run),
-		[runTransform],
-	);
-
-	const onInsertVariable = useCallback(
-		(name: string): void =>
-			runTransform((snapshot) => insertText(snapshot, formatVariableToken(name))),
-		[runTransform],
-	);
-
-	const extensions = useMemo(
-		() => [markdownHighlight(), EditorView.lineWrapping],
-		[],
-	);
-
-	// From the document, not `value`: the caller may debounce or drop a change, and
-	// the counter has to match what the author sees.
-	const onUpdate = useCallback((update: ViewUpdate): void => {
-		if (!update.selectionSet && !update.docChanged) {
-			return;
-		}
-		const { head } = update.state.selection.main;
-		const line = update.state.doc.lineAt(head);
-		setStatus({
-			line: line.number,
-			column: head - line.from + 1,
-			length: update.state.doc.length,
-		});
-	}, []);
-
-	return (
-		<div className={cx(styles.container, className)} data-testid={testId}>
-			<EditorToolbar
-				formatLabel={formatLabel}
-				commands={MARKDOWN_COMMANDS}
-				onRunCommand={onRunCommand}
-				variables={variables}
-				onInsertVariable={onInsertVariable}
-				disabled={readOnly}
-				extra={toolbarExtra}
-			/>
-			<div className={styles.editorArea}>
-				<CodeMirror
-					className={styles.codeMirror}
-					// No `value`: passing it re-enables the wrapper's own reconciliation,
-					// and with it the caret reset.
-					onCreateEditor={onCreateEditor}
-					onChange={handleChange}
-					onUpdate={onUpdate}
-					theme={isDarkMode ? copilot : githubLight}
-					basicSetup={BASIC_SETUP}
-					placeholder={placeholder}
-					editable={!readOnly}
-					readOnly={readOnly}
-					indentWithTab={false}
-					autoFocus={autoFocus}
-					extensions={extensions}
-					height="100%"
-				/>
-			</div>
-			<EditorStatusBar
-				cursor={status}
-				length={status.length}
-				maxLength={maxLength}
-				hint={statusHint}
-			/>
-		</div>
-	);
-}
-
-export default MarkdownEditor;

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -1,44 +0,0 @@
-import { CircleHelp } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import { MARKDOWN_HELP_ITEMS } from './constants';
-
-import styles from './MarkdownEditor.module.scss';
-
-function MarkdownHelp(): JSX.Element {
-	return (
-		<Popover>
-			<PopoverTrigger asChild>
-				<Button
-					type="button"
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					aria-label="Markdown syntax help"
-					data-testid="markdown-help-trigger"
-				>
-					<CircleHelp size={14} />
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent align="end" className={styles.helpContent}>
-				<Typography.Text className={styles.helpTitle}>
-					Markdown syntax
-				</Typography.Text>
-				<dl className={styles.helpList}>
-					{MARKDOWN_HELP_ITEMS.map((item) => (
-						<div key={item.syntax} className={styles.helpRow}>
-							<dt>
-								<code>{item.syntax}</code>
-							</dt>
-							<dd>{item.label}</dd>
-						</div>
-					))}
-				</dl>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export default MarkdownHelp;

frontend/src/components/MarkdownEditor/__tests__/MarkdownEditor.test.tsx

@@ -1,270 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { EditorView } from '@uiw/react-codemirror';
-import { mockCodeMirrorDomApis } from 'components/QueryBuilderV2/QueryV2/__tests__/codemirrorDomMocks';
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import MarkdownEditor from '../MarkdownEditor';
-import type { EditorVariable } from '../types';
-
-beforeAll(() => {
-	mockCodeMirrorDomApis();
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => true,
-}));
-
-const VARIABLES: EditorVariable[] = [
-	{ name: 'environment', badge: 'QUERY' },
-	{ name: 'service', badge: 'CUSTOM' },
-];
-
-/** A caller whose state trails the editor by one keystroke. */
-function LaggingHarness(): JSX.Element {
-	const [value, setValue] = useState('');
-	const previousRef = useRef('');
-	const onChange = useCallback((next: string): void => {
-		setValue(previousRef.current);
-		previousRef.current = next;
-	}, []);
-
-	return <MarkdownEditor value={value} onChange={onChange} />;
-}
-
-/** Pushes a replacement in from outside the editor. */
-function ExternalHarness(): JSX.Element {
-	const [value, setValue] = useState('before');
-
-	return (
-		<>
-			<button type="button" onClick={(): void => setValue('after')}>
-				push
-			</button>
-			<MarkdownEditor value={value} onChange={setValue} />
-		</>
-	);
-}
-
-function Harness({
-	initialValue = '',
-	maxLength,
-	variables = VARIABLES,
-}: {
-	initialValue?: string;
-	maxLength?: number;
-	variables?: EditorVariable[];
-}): JSX.Element {
-	const [value, setValue] = useState(initialValue);
-	return (
-		<MarkdownEditor
-			value={value}
-			onChange={setValue}
-			variables={variables}
-			maxLength={maxLength}
-			statusHint="Preview updates as you type"
-		/>
-	);
-}
-
-const getView = (): EditorView => {
-	const dom = document.querySelector('.cm-editor');
-	const view = dom ? EditorView.findFromDOM(dom as HTMLElement) : null;
-	if (!view) {
-		throw new Error('editor view not mounted');
-	}
-	return view;
-};
-
-const select = (from: number, to: number): void => {
-	act(() => {
-		getView().dispatch({ selection: { anchor: from, head: to } });
-	});
-};
-
-const documentText = (): string => getView().state.doc.toString();
-
-describe('MarkdownEditor', () => {
-	it('reports the caret position and character count', async () => {
-		render(<Harness initialValue={'one\ntwo'} />);
-
-		select(5, 5);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('markdown-editor-status')).toHaveTextContent(
-				'Ln 2, Col 2',
-			);
-		});
-		expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-			'7 chars',
-		);
-	});
-
-	it('flags a body over the character cap', async () => {
-		render(<Harness initialValue="123456" maxLength={5} />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-				'6 / 5 chars',
-			);
-		});
-	});
-
-	it('applies a toolbar command to the selection', async () => {
-		render(<Harness initialValue="a word b" />);
-
-		select(2, 6);
-		await userEvent.click(screen.getByTestId('markdown-command-bold'));
-
-		await waitFor(() => {
-			expect(documentText()).toBe('a **word** b');
-		});
-	});
-
-	it('inserts a variable token at the caret', async () => {
-		render(<Harness initialValue="env: " />);
-
-		select(5, 5);
-		await userEvent.click(screen.getByTestId('markdown-insert-variable'));
-
-		// The row shows the name and kind badge.
-		const row = await screen.findByTestId('markdown-variable-environment');
-		expect(row).toHaveTextContent('$environment');
-		expect(row).toHaveTextContent('QUERY');
-
-		// fireEvent: userEvent's pointer-down path walks DOM selection APIs the
-		// CodeMirror mocks stub out.
-		fireEvent.click(row);
-
-		await waitFor(() => {
-			expect(documentText()).toBe('env: $environment');
-		});
-	});
-
-	it('colours Markdown syntax and variable tokens in the source', async () => {
-		render(<Harness initialValue={'## Runbook\nowner {{team}}'} />);
-
-		await waitFor(() => {
-			expect(document.querySelector('.cm-md-heading')).toBeInTheDocument();
-		});
-		expect(document.querySelector('.cm-md-variable')).toHaveTextContent(
-			'{{team}}',
-		);
-	});
-
-	describe('uncontrolled document', () => {
-		const type = (at: number, text: string): void => {
-			act(() => {
-				getView().dispatch({
-					changes: { from: at, insert: text },
-					selection: { anchor: at + text.length },
-				});
-			});
-		};
-
-		const focusEditor = (): void => {
-			act(() => {
-				getView().focus();
-			});
-		};
-
-		it('keeps the document and caret while the caller lags behind the typing', () => {
-			render(<LaggingHarness />);
-			focusEditor();
-
-			type(0, 'a');
-			type(1, 'b');
-			type(2, 'c');
-
-			expect(documentText()).toBe('abc');
-			expect(getView().state.selection.main.head).toBe(3);
-		});
-
-		it('reports every keystroke to the caller', () => {
-			const onChange = jest.fn();
-			render(<MarkdownEditor value="ab" onChange={onChange} />);
-
-			type(2, 'c');
-
-			expect(onChange).toHaveBeenLastCalledWith('abc');
-		});
-
-		it('does not report the seed back as a change', () => {
-			const onChange = jest.fn();
-			render(<MarkdownEditor value="seeded" onChange={onChange} />);
-
-			expect(documentText()).toBe('seeded');
-			expect(onChange).not.toHaveBeenCalled();
-		});
-
-		it('applies an external replacement while the editor is unfocused', async () => {
-			render(<ExternalHarness />);
-
-			await userEvent.click(screen.getByRole('button', { name: 'push' }));
-
-			expect(documentText()).toBe('after');
-		});
-
-		it('ignores a replacement that arrives while the author is still typing', () => {
-			render(<ExternalHarness />);
-			focusEditor();
-
-			// fireEvent: a real click would blur the editor first. This covers an update
-			// arriving on its own, while the author is still in the document.
-			fireEvent.click(screen.getByRole('button', { name: 'push' }));
-
-			expect(documentText()).toBe('before');
-		});
-
-		it('counts characters from the document, not from the lagging value', async () => {
-			render(<MarkdownEditor value="ab" onChange={jest.fn()} />);
-
-			type(2, 'cde');
-
-			await waitFor(() => {
-				expect(screen.getByTestId('markdown-editor-char-count')).toHaveTextContent(
-					'5 chars',
-				);
-			});
-		});
-	});
-
-	it('offers both list kinds in the toolbar', () => {
-		render(<Harness />);
-
-		expect(
-			screen.getByTestId('markdown-command-bulleted-list'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByTestId('markdown-command-numbered-list'),
-		).toBeInTheDocument();
-	});
-
-	it('disables authoring affordances when read-only', () => {
-		render(
-			<MarkdownEditor
-				value="body"
-				onChange={jest.fn()}
-				variables={VARIABLES}
-				readOnly
-			/>,
-		);
-
-		expect(screen.getByTestId('markdown-command-bold')).toBeDisabled();
-		expect(screen.getByTestId('markdown-insert-variable')).toBeDisabled();
-	});
-
-	it('hides the insert-variable control when none are available', () => {
-		render(<Harness variables={[]} />);
-
-		expect(
-			screen.queryByTestId('markdown-insert-variable'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/MarkdownEditor/__tests__/markdownCommands.test.ts

@@ -1,258 +0,0 @@
-import { insertText, MARKDOWN_COMMANDS } from '../markdownCommands';
-import type { EditorSnapshot, EditorTransform } from '../types';
-
-const commandById = (id: string): EditorTransform => {
-	const command = MARKDOWN_COMMANDS.find((entry) => entry.id === id);
-	if (!command) {
-		throw new Error(`unknown command: ${id}`);
-	}
-	return command.run;
-};
-
-const heading = commandById('heading');
-const bold = commandById('bold');
-const italic = commandById('italic');
-const bulletedList = commandById('bulleted-list');
-const numberedList = commandById('numbered-list');
-const link = commandById('link');
-const code = commandById('code');
-const table = commandById('table');
-
-/** `|` marks a caret, `[...]` a range, so expectations read like the editor looks. */
-const snapshot = (marked: string): EditorSnapshot => {
-	if (marked.includes('|')) {
-		const caret = marked.indexOf('|');
-		return {
-			text: marked.replace('|', ''),
-			selectionStart: caret,
-			selectionEnd: caret,
-		};
-	}
-	const start = marked.indexOf('[');
-	const end = marked.indexOf(']') - 1;
-	return {
-		text: marked.replace('[', '').replace(']', ''),
-		selectionStart: start,
-		selectionEnd: end,
-	};
-};
-
-const selectionOf = (result: EditorSnapshot): string =>
-	result.text.slice(result.selectionStart, result.selectionEnd);
-
-describe('heading', () => {
-	it('prefixes the caret line and keeps the caret on the same character', () => {
-		const result = heading(snapshot('Chec|kout'));
-
-		expect(result.text).toBe('## Checkout');
-		expect(result.selectionStart).toBe(7);
-	});
-
-	it('strips the prefix when every selected line already has one', () => {
-		const result = heading({
-			text: '## one\n### two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-
-	it('adds the prefix when only some selected lines have one', () => {
-		const result = heading({
-			text: '## one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 10,
-		});
-
-		expect(result.text).toBe('## ## one\n## two');
-	});
-
-	it('does not pull in the line after a selection ending on a line break', () => {
-		const result = heading({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 4,
-		});
-
-		expect(result.text).toBe('## one\ntwo');
-	});
-});
-
-describe('bulleted list', () => {
-	it('bullets every line of a multi-line selection', () => {
-		const result = bulletedList({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 7,
-		});
-
-		expect(result.text).toBe('- one\n- two');
-		expect(selectionOf(result)).toBe('- one\n- two');
-	});
-
-	it('unbullets a list written with a different marker', () => {
-		const result = bulletedList({
-			text: '* one\n+ two',
-			selectionStart: 0,
-			selectionEnd: 11,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-});
-
-describe('numbered list', () => {
-	it('numbers each line of the selection in order', () => {
-		const result = numberedList({
-			text: 'one\ntwo\nthree',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('1. one\n2. two\n3. three');
-	});
-
-	it('unnumbers a list whose numbering is not sequential', () => {
-		const result = numberedList({
-			text: '1. one\n5. two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('one\ntwo');
-	});
-});
-
-describe('switching between list kinds', () => {
-	it('converts bullets to numbers rather than marking them twice', () => {
-		const result = numberedList({
-			text: '- one\n- two',
-			selectionStart: 0,
-			selectionEnd: 11,
-		});
-
-		expect(result.text).toBe('1. one\n2. two');
-	});
-
-	it('converts numbers to bullets', () => {
-		const result = bulletedList({
-			text: '1. one\n2. two',
-			selectionStart: 0,
-			selectionEnd: 13,
-		});
-
-		expect(result.text).toBe('- one\n- two');
-	});
-
-	it('keeps indentation so nested items stay nested', () => {
-		const result = numberedList({
-			text: 'one\n    - nested',
-			selectionStart: 0,
-			selectionEnd: 16,
-		});
-
-		expect(result.text).toBe('1. one\n    2. nested');
-	});
-});
-
-describe('bold and italic', () => {
-	it('wraps the selection and keeps the original text selected', () => {
-		const result = bold(snapshot('a [word] b'));
-
-		expect(result.text).toBe('a **word** b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('unwraps when the markers sit inside the selection', () => {
-		const result = bold({
-			text: 'a **word** b',
-			selectionStart: 2,
-			selectionEnd: 10,
-		});
-
-		expect(result.text).toBe('a word b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('unwraps when the markers sit just outside the selection', () => {
-		const result = bold({
-			text: 'a **word** b',
-			selectionStart: 4,
-			selectionEnd: 8,
-		});
-
-		expect(result.text).toBe('a word b');
-		expect(selectionOf(result)).toBe('word');
-	});
-
-	it('leaves the caret between the markers when nothing is selected', () => {
-		const result = italic(snapshot('a |b'));
-
-		expect(result.text).toBe('a __b');
-		expect(result.selectionStart).toBe(3);
-		expect(result.selectionEnd).toBe(3);
-	});
-
-	it('does not mistake a leading document boundary for a marker', () => {
-		const result = bold(snapshot('[word] tail'));
-
-		expect(result.text).toBe('**word** tail');
-	});
-});
-
-describe('link', () => {
-	it('selects the url when the label came from the selection', () => {
-		const result = link(snapshot('see [docs] now'));
-
-		expect(result.text).toBe('see [docs](https://) now');
-		expect(selectionOf(result)).toBe('https://');
-	});
-
-	it('selects the label placeholder when nothing was selected', () => {
-		const result = link(snapshot('see |'));
-
-		expect(result.text).toBe('see [text](https://)');
-		expect(selectionOf(result)).toBe('text');
-	});
-});
-
-describe('code', () => {
-	it('uses backticks for a single-line selection', () => {
-		const result = code(snapshot('run [npm] here'));
-
-		expect(result.text).toBe('run `npm` here');
-	});
-
-	it('fences a multi-line selection and selects its content', () => {
-		const result = code({
-			text: 'one\ntwo',
-			selectionStart: 0,
-			selectionEnd: 7,
-		});
-
-		expect(result.text).toBe('```\none\ntwo\n```');
-		expect(selectionOf(result)).toBe('one\ntwo');
-	});
-});
-
-describe('table', () => {
-	it('starts the skeleton on its own line and selects the first header cell', () => {
-		const result = table(snapshot('intro|'));
-
-		expect(result.text).toBe(
-			'intro\n| Column | Column |\n| --- | --- |\n|  |  |',
-		);
-		expect(selectionOf(result)).toBe('Column');
-	});
-});
-
-describe('insertText', () => {
-	it('replaces the selection and leaves the caret after the insertion', () => {
-		const result = insertText(snapshot('env is [old]'), '{{env}}');
-
-		expect(result.text).toBe('env is {{env}}');
-		expect(result.selectionStart).toBe(14);
-		expect(result.selectionEnd).toBe(14);
-	});
-});

frontend/src/components/MarkdownEditor/constants.ts

@@ -1,24 +0,0 @@
-// The body is persisted inline in the dashboard JSON, so its length is capped.
-export const MARKDOWN_MAX_LENGTH = 16000;
-
-/** The canonical syntax; the renderer resolves the other three too. */
-export const formatVariableToken = (name: string): string => `$${name}`;
-
-export const MARKDOWN_HELP_ITEMS: { syntax: string; label: string }[] = [
-	// First: consecutive lines joining into one paragraph is the CommonMark rule
-	// authors trip over before any of the formatting syntax.
-	{ syntax: 'blank line', label: 'New paragraph' },
-	{ syntax: '2 spaces + ⏎', label: 'Line break' },
-	{ syntax: '# Heading', label: 'Heading (1–6 #)' },
-	{ syntax: '**bold**', label: 'Bold' },
-	{ syntax: '_italic_', label: 'Italic' },
-	{ syntax: '- item', label: 'Bulleted list' },
-	{ syntax: '1. item', label: 'Numbered list' },
-	{ syntax: '- [ ] task', label: 'Task list' },
-	{ syntax: '[label](url)', label: 'Link' },
-	{ syntax: '![alt](url)', label: 'Image' },
-	{ syntax: '`code`', label: 'Inline code' },
-	{ syntax: '```lang', label: 'Code block' },
-	{ syntax: '> quote', label: 'Blockquote' },
-	{ syntax: '| a | b |', label: 'Table' },
-];

frontend/src/components/MarkdownEditor/editorDocument.ts

@@ -1,69 +0,0 @@
-import { EditorView } from '@uiw/react-codemirror';
-
-import type { EditorSnapshot, EditorTransform } from './types';
-
-// Narrows a whole-document replacement to the range that changed, so a toolbar
-// action doesn't invalidate the document's decorations or scroll position.
-function toChangeSpec(
-	previous: string,
-	next: string,
-): { from: number; to: number; insert: string } | null {
-	if (previous === next) {
-		return null;
-	}
-
-	const shorter = Math.min(previous.length, next.length);
-	let start = 0;
-	while (start < shorter && previous[start] === next[start]) {
-		start += 1;
-	}
-
-	let previousEnd = previous.length;
-	let nextEnd = next.length;
-	while (
-		previousEnd > start &&
-		nextEnd > start &&
-		previous[previousEnd - 1] === next[nextEnd - 1]
-	) {
-		previousEnd -= 1;
-		nextEnd -= 1;
-	}
-
-	return { from: start, to: previousEnd, insert: next.slice(start, nextEnd) };
-}
-
-export function readSnapshot(view: EditorView): EditorSnapshot {
-	const range = view.state.selection.main;
-	return {
-		text: view.state.doc.toString(),
-		selectionStart: range.from,
-		selectionEnd: range.to,
-	};
-}
-
-/** Returns whether the transform ran, as CodeMirror's keymap contract expects. */
-export function applyTransform(
-	view: EditorView,
-	transform: EditorTransform,
-): boolean {
-	if (view.state.readOnly) {
-		return false;
-	}
-
-	const next = transform(readSnapshot(view));
-	const changes = toChangeSpec(view.state.doc.toString(), next.text);
-	view.dispatch({
-		...(changes ? { changes } : {}),
-		selection: { anchor: next.selectionStart, head: next.selectionEnd },
-		scrollIntoView: true,
-	});
-	view.focus();
-	return true;
-}
-
-/** Replaces the whole document, for seeding and external replacements. */
-export function replaceDocument(view: EditorView, next: string): void {
-	view.dispatch({
-		changes: { from: 0, to: view.state.doc.length, insert: next },
-	});
-}

frontend/src/components/MarkdownEditor/markdownCommands.ts

@@ -1,269 +0,0 @@
-import type { EditorCommand, EditorSnapshot, EditorTransform } from './types';
-
-const BOLD_MARKER = '**';
-const ITALIC_MARKER = '_';
-const INLINE_CODE_MARKER = '`';
-const CODE_FENCE = '```';
-const HEADING_PREFIX = '## ';
-const BULLET_MARKER = '- ';
-
-const HEADING_PATTERN = /^ {0,3}#{1,6} /;
-const BULLET_LIST_PATTERN = /^[ \t]*[-*+] /;
-const ORDERED_LIST_PATTERN = /^[ \t]*\d+\. /;
-// Either kind of marker, matched after the indent has been split off.
-const LIST_MARKER_PATTERN = /^(?:[-*+]|\d+\.) /;
-const INDENT_PATTERN = /^[ \t]*/;
-
-const LINK_LABEL_PLACEHOLDER = 'text';
-const LINK_URL_PLACEHOLDER = 'https://';
-const TABLE_CELL_PLACEHOLDER = 'Column';
-const TABLE_SNIPPET = [
-	`| ${TABLE_CELL_PLACEHOLDER} | ${TABLE_CELL_PLACEHOLDER} |`,
-	'| --- | --- |',
-	'|  |  |',
-].join('\n');
-
-interface LineRange {
-	start: number;
-	end: number;
-}
-
-// A selection ending exactly on a line break stops there rather than pulling in
-// the next line, so "select the line, hit list" doesn't bullet the line below too.
-function expandToLines(text: string, from: number, to: number): LineRange {
-	const end = to > from && text[to - 1] === '\n' ? to - 1 : to;
-	const breakBefore = from === 0 ? -1 : text.lastIndexOf('\n', from - 1);
-	const breakAfter = text.indexOf('\n', end);
-	return {
-		start: breakBefore + 1,
-		end: breakAfter === -1 ? text.length : breakAfter,
-	};
-}
-
-/** Pads `block` so it starts and ends on its own line. */
-function replaceWithBlock(
-	snapshot: EditorSnapshot,
-	block: string,
-): { text: string; blockStart: number } {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const before = text.slice(0, selectionStart);
-	const after = text.slice(selectionEnd);
-	const lead = before === '' || before.endsWith('\n') ? '' : '\n';
-	const trail = after === '' || after.startsWith('\n') ? '' : '\n';
-	return {
-		text: before + lead + block + trail + after,
-		blockStart: before.length + lead.length,
-	};
-}
-
-/** Rewrites every line the selection touches. */
-function replaceLines(
-	snapshot: EditorSnapshot,
-	mapLines: (lines: string[]) => string[],
-): EditorSnapshot {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const { start, end } = expandToLines(text, selectionStart, selectionEnd);
-	const lines = text.slice(start, end).split('\n');
-	const nextLines = mapLines(lines);
-	const block = nextLines.join('\n');
-	const nextText = text.slice(0, start) + block + text.slice(end);
-
-	if (selectionStart !== selectionEnd) {
-		return {
-			text: nextText,
-			selectionStart: start,
-			selectionEnd: start + block.length,
-		};
-	}
-
-	// Caret-only: the range covers one line, so shift by that line's delta.
-	const shifted = selectionStart + nextLines[0].length - lines[0].length;
-	const caret = Math.min(Math.max(shifted, start), start + nextLines[0].length);
-	return { text: nextText, selectionStart: caret, selectionEnd: caret };
-}
-
-/** Strips `prefix` when every selected line already matches `pattern`, else adds it. */
-function toggleLinePrefix(prefix: string, pattern: RegExp): EditorTransform {
-	return (snapshot): EditorSnapshot =>
-		replaceLines(snapshot, (lines) => {
-			const isApplied = lines.every((line) => pattern.test(line));
-			return lines.map((line) =>
-				isApplied ? line.replace(pattern, '') : `${prefix}${line}`,
-			);
-		});
-}
-
-/**
- * Toggles this kind of list marker. A line carrying the *other* kind is converted
- * rather than marked twice, and indentation is preserved so nesting survives.
- * `markerAt` takes the line's position, which is what lets an ordered list number.
- */
-function toggleList(
-	pattern: RegExp,
-	markerAt: (index: number) => string,
-): EditorTransform {
-	return (snapshot): EditorSnapshot =>
-		replaceLines(snapshot, (lines) => {
-			const isApplied = lines.every((line) => pattern.test(line));
-			return lines.map((line, index) => {
-				const indent = INDENT_PATTERN.exec(line)?.[0] ?? '';
-				const body = line.slice(indent.length).replace(LIST_MARKER_PATTERN, '');
-				return isApplied
-					? `${indent}${body}`
-					: `${indent}${markerAt(index)}${body}`;
-			});
-		});
-}
-
-/**
- * Unwraps when the markers are already there, whether they sit inside the selection
- * (`**bold**` selected whole) or just outside it (only `bold` selected).
- */
-function toggleWrap(marker: string): EditorTransform {
-	return ({ text, selectionStart, selectionEnd }): EditorSnapshot => {
-		const selected = text.slice(selectionStart, selectionEnd);
-		const width = marker.length;
-
-		if (
-			selected.length >= width * 2 &&
-			selected.startsWith(marker) &&
-			selected.endsWith(marker)
-		) {
-			const inner = selected.slice(width, -width);
-			return {
-				text: text.slice(0, selectionStart) + inner + text.slice(selectionEnd),
-				selectionStart,
-				selectionEnd: selectionStart + inner.length,
-			};
-		}
-
-		if (
-			selectionStart >= width &&
-			text.slice(selectionStart - width, selectionStart) === marker &&
-			text.slice(selectionEnd, selectionEnd + width) === marker
-		) {
-			return {
-				text:
-					text.slice(0, selectionStart - width) +
-					selected +
-					text.slice(selectionEnd + width),
-				selectionStart: selectionStart - width,
-				selectionEnd: selectionStart - width + selected.length,
-			};
-		}
-
-		return {
-			text:
-				text.slice(0, selectionStart) +
-				marker +
-				selected +
-				marker +
-				text.slice(selectionEnd),
-			selectionStart: selectionStart + width,
-			selectionEnd: selectionStart + width + selected.length,
-		};
-	};
-}
-
-/** Lands the selection on whichever half is still a placeholder. */
-const insertLink: EditorTransform = ({
-	text,
-	selectionStart,
-	selectionEnd,
-}): EditorSnapshot => {
-	const selected = text.slice(selectionStart, selectionEnd);
-	const label = selected || LINK_LABEL_PLACEHOLDER;
-	const snippet = `[${label}](${LINK_URL_PLACEHOLDER})`;
-	const nextText =
-		text.slice(0, selectionStart) + snippet + text.slice(selectionEnd);
-	// `[` + label + `](` is label.length + 3 characters.
-	const target = selected
-		? {
-				from: selectionStart + label.length + 3,
-				length: LINK_URL_PLACEHOLDER.length,
-			}
-		: { from: selectionStart + 1, length: label.length };
-
-	return {
-		text: nextText,
-		selectionStart: target.from,
-		selectionEnd: target.from + target.length,
-	};
-};
-
-/** Backticks for a single-line selection, a fence for a multi-line one. */
-const insertCode: EditorTransform = (snapshot): EditorSnapshot => {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const selected = text.slice(selectionStart, selectionEnd);
-	if (!selected.includes('\n')) {
-		return toggleWrap(INLINE_CODE_MARKER)(snapshot);
-	}
-
-	const { text: nextText, blockStart } = replaceWithBlock(
-		snapshot,
-		`${CODE_FENCE}\n${selected}\n${CODE_FENCE}`,
-	);
-	const contentStart = blockStart + CODE_FENCE.length + 1;
-	return {
-		text: nextText,
-		selectionStart: contentStart,
-		selectionEnd: contentStart + selected.length,
-	};
-};
-
-/** Selects the first header cell, for immediate typing. */
-const insertTable: EditorTransform = (snapshot): EditorSnapshot => {
-	const { text, blockStart } = replaceWithBlock(snapshot, TABLE_SNIPPET);
-	const firstCell = blockStart + TABLE_SNIPPET.indexOf(TABLE_CELL_PLACEHOLDER);
-	return {
-		text,
-		selectionStart: firstCell,
-		selectionEnd: firstCell + TABLE_CELL_PLACEHOLDER.length,
-	};
-};
-
-/** Replaces the selection and leaves the caret after the insertion. */
-export function insertText(
-	snapshot: EditorSnapshot,
-	value: string,
-): EditorSnapshot {
-	const { text, selectionStart, selectionEnd } = snapshot;
-	const caret = selectionStart + value.length;
-	return {
-		text: text.slice(0, selectionStart) + value + text.slice(selectionEnd),
-		selectionStart: caret,
-		selectionEnd: caret,
-	};
-}
-
-/** Display order. A new action is an entry here plus an icon in `EditorToolbar`. */
-export const MARKDOWN_COMMANDS: EditorCommand[] = [
-	{
-		id: 'heading',
-		label: 'Heading',
-		run: toggleLinePrefix(HEADING_PREFIX, HEADING_PATTERN),
-	},
-	{
-		id: 'bold',
-		label: 'Bold',
-		run: toggleWrap(BOLD_MARKER),
-	},
-	{
-		id: 'italic',
-		label: 'Italic',
-		run: toggleWrap(ITALIC_MARKER),
-	},
-	{
-		id: 'bulleted-list',
-		label: 'Bulleted list',
-		run: toggleList(BULLET_LIST_PATTERN, () => BULLET_MARKER),
-	},
-	{
-		id: 'numbered-list',
-		label: 'Numbered list',
-		run: toggleList(ORDERED_LIST_PATTERN, (index) => `${index + 1}. `),
-	},
-	{ id: 'link', label: 'Link', run: insertLink },
-	{ id: 'code', label: 'Code', run: insertCode },
-	{ id: 'table', label: 'Table', run: insertTable },
-];

frontend/src/components/MarkdownEditor/markdownHighlight.ts

@@ -1,149 +0,0 @@
-import type { Extension, Line, Range } from '@codemirror/state';
-import {
-	Decoration,
-	type DecorationSet,
-	EditorView,
-	ViewPlugin,
-	type ViewUpdate,
-} from '@codemirror/view';
-
-const FENCE_PATTERN = /^ {0,3}(```|~~~)/;
-const HEADING_PATTERN = /^ {0,3}#{1,6} /;
-const QUOTE_PATTERN = /^ {0,3}> ?/;
-const LIST_MARKER_PATTERN = /^ {0,3}([-*+]|\d+\.) /;
-
-/**
- * Convention: capture group 1, when present, is a left guard the token excludes —
- * the token runs from the end of that group to the end of the match. Lookbehind is
- * avoided for Safari compatibility, so guards are captured rather than asserted.
- */
-const INLINE_PATTERNS: { pattern: RegExp; className: string }[] = [
-	{ pattern: /`[^`\n]+`/g, className: 'cm-md-code' },
-	{ pattern: /\*\*[^*\n]+\*\*/g, className: 'cm-md-strong' },
-	{ pattern: /(^|[^\w*_`])_[^_\n]+_(?![\w_])/g, className: 'cm-md-emphasis' },
-	{ pattern: /!?\[[^\]\n]*\]\([^)\n]*\)/g, className: 'cm-md-link' },
-	{
-		// The four variable syntaxes a dashboard body may carry.
-		pattern:
-			/\{\{\s*\.?[\w.-]+\s*\}\}|\[\[\s*[\w.-]+\s*\]\]|\$(?!__)[A-Za-z_]\w*(?:\.\w+)*/g,
-		className: 'cm-md-variable',
-	},
-];
-
-const MARKS = {
-	heading: Decoration.mark({ class: 'cm-md-heading' }),
-	quote: Decoration.mark({ class: 'cm-md-quote' }),
-	listMarker: Decoration.mark({ class: 'cm-md-list-marker' }),
-	code: Decoration.mark({ class: 'cm-md-code' }),
-} as const;
-
-const INLINE_MARKS = INLINE_PATTERNS.map(({ pattern, className }) => ({
-	pattern,
-	mark: Decoration.mark({ class: className }),
-}));
-
-function pushInlineMarks(
-	lineText: string,
-	lineFrom: number,
-	ranges: Range<Decoration>[],
-): void {
-	INLINE_MARKS.forEach(({ pattern, mark }) => {
-		pattern.lastIndex = 0;
-		let match = pattern.exec(lineText);
-		while (match !== null) {
-			const guardLength = match[1]?.length ?? 0;
-			const from = lineFrom + match.index + guardLength;
-			const to = lineFrom + match.index + match[0].length;
-			if (to > from) {
-				ranges.push(mark.range(from, to));
-			}
-			match = pattern.exec(lineText);
-		}
-	});
-}
-
-function pushBlockMark(line: Line, ranges: Range<Decoration>[]): void {
-	if (HEADING_PATTERN.test(line.text)) {
-		ranges.push(MARKS.heading.range(line.from, line.to));
-		return;
-	}
-	if (QUOTE_PATTERN.test(line.text)) {
-		ranges.push(MARKS.quote.range(line.from, line.to));
-		return;
-	}
-	const listMarker = LIST_MARKER_PATTERN.exec(line.text);
-	if (listMarker) {
-		ranges.push(
-			MARKS.listMarker.range(line.from, line.from + listMarker[0].length),
-		);
-	}
-}
-
-// Scans the whole document rather than the viewport: fenced blocks opening above
-// the visible range would otherwise be mis-detected. Bounded by the length cap.
-function buildDecorations(view: EditorView): DecorationSet {
-	const { doc } = view.state;
-	const ranges: Range<Decoration>[] = [];
-	let isInsideFence = false;
-
-	for (let lineNumber = 1; lineNumber <= doc.lines; lineNumber += 1) {
-		const line = doc.line(lineNumber);
-		const isFenceDelimiter = FENCE_PATTERN.test(line.text);
-
-		if (isFenceDelimiter || isInsideFence) {
-			if (line.to > line.from) {
-				ranges.push(MARKS.code.range(line.from, line.to));
-			}
-			isInsideFence = isFenceDelimiter ? !isInsideFence : isInsideFence;
-		} else {
-			pushBlockMark(line, ranges);
-			pushInlineMarks(line.text, line.from, ranges);
-		}
-	}
-
-	return Decoration.set(ranges, true);
-}
-
-// Colours come from custom properties so the SCSS module owns light/dark.
-const syntaxTheme = EditorView.theme({
-	'.cm-md-heading': {
-		color: 'var(--md-syntax-heading)',
-		fontWeight: '600',
-	},
-	'.cm-md-quote': { color: 'var(--md-syntax-quote)', fontStyle: 'italic' },
-	'.cm-md-list-marker': { color: 'var(--md-syntax-marker)' },
-	'.cm-md-code': { color: 'var(--md-syntax-code)' },
-	'.cm-md-strong': { color: 'var(--md-syntax-strong)', fontWeight: '600' },
-	'.cm-md-emphasis': {
-		color: 'var(--md-syntax-emphasis)',
-		fontStyle: 'italic',
-	},
-	'.cm-md-link': { color: 'var(--md-syntax-link)' },
-	'.cm-md-variable': { color: 'var(--md-syntax-variable)' },
-});
-
-const highlightPlugin = ViewPlugin.fromClass(
-	class {
-		decorations: DecorationSet;
-
-		constructor(view: EditorView) {
-			this.decorations = buildDecorations(view);
-		}
-
-		update(update: ViewUpdate): void {
-			if (update.docChanged || update.viewportChanged) {
-				this.decorations = buildDecorations(update.view);
-			}
-		}
-	},
-	{ decorations: (plugin): DecorationSet => plugin.decorations },
-);
-
-/**
- * Decorations rather than a grammar, so the editor stays on the CodeMirror packages
- * already bundled — no `@codemirror/lang-markdown` / `@lezer` for what is only a
- * colouring pass over a body the renderer parses for real.
- */
-export function markdownHighlight(): Extension {
-	return [highlightPlugin, syntaxTheme];
-}

frontend/src/components/MarkdownEditor/types.ts

@@ -1,27 +0,0 @@
-/** The value every editor command reads and returns. */
-export interface EditorSnapshot {
-	text: string;
-	selectionStart: number;
-	selectionEnd: number;
-}
-
-export type EditorTransform = (snapshot: EditorSnapshot) => EditorSnapshot;
-
-export interface EditorVariable {
-	name: string;
-	/** Short tag for the variable's kind, e.g. "QUERY". */
-	badge?: string;
-}
-
-export interface EditorCommand {
-	id: string;
-	/** Accessible name and tooltip for the toolbar button. */
-	label: string;
-	run: EditorTransform;
-}
-
-/** 1-based, as the status bar reports it. */
-export interface CursorPosition {
-	line: number;
-	column: number;
-}

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -0,0 +1,585 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import configureStore from 'redux-mock-store';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';
+
+// Mock the dashboard variables query
+jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
+	__esModule: true,
+	default: jest.fn(() =>
+		Promise.resolve({
+			payload: {
+				variableValues: ['option1', 'option2', 'option3', 'option4'],
+			},
+		}),
+	),
+}));
+
+// Mock scrollIntoView which isn't available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Constants
+const TEST_VARIABLE_NAME = 'test_variable';
+const TEST_VARIABLE_ID = 'test-var-id';
+
+// Create a mock store
+const mockStore = configureStore([])({
+	globalTime: {
+		minTime: Date.now() - 3600000, // 1 hour ago
+		maxTime: Date.now(),
+	},
+});
+
+// Test data
+const createMockVariable = (
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable => ({
+	id: TEST_VARIABLE_ID,
+	name: TEST_VARIABLE_NAME,
+	description: 'Test variable description',
+	type: 'QUERY',
+	queryValue: 'SELECT DISTINCT value FROM table',
+	customValue: '',
+	sort: 'ASC',
+	multiSelect: false,
+	showALLOption: true,
+	selectedValue: [],
+	allSelected: false,
+	...overrides,
+});
+
+function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+		},
+	});
+
+	return (
+		<Provider store={mockStore}>
+			<QueryClientProvider client={queryClient}>
+				<VirtuosoMockContext.Provider
+					value={{ viewportHeight: 300, itemHeight: 40 }}
+				>
+					{children}
+				</VirtuosoMockContext.Provider>
+			</QueryClientProvider>
+		</Provider>
+	);
+}
+
+describe('VariableItem Integration Tests', () => {
+	let user: ReturnType<typeof userEvent.setup>;
+	let mockOnValueUpdate: jest.Mock;
+
+	beforeEach(() => {
+		user = userEvent.setup();
+		mockOnValueUpdate = jest.fn();
+		jest.clearAllMocks();
+	});
+
+	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
+	describe('CustomSelect Integration (VI)', () => {
+		it('VI-01: Single select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: false,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('option1')).toBeInTheDocument();
+				expect(screen.getByText('option2')).toBeInTheDocument();
+				expect(screen.getByText('option3')).toBeInTheDocument();
+			});
+
+			// Select an option
+			const option1 = screen.getByText('option1');
+			await user.click(option1);
+
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				TEST_VARIABLE_NAME,
+				TEST_VARIABLE_ID,
+				'option1',
+				false,
+			);
+		});
+	});
+
+	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
+	describe('CustomMultiSelect Integration (VI)', () => {
+		it('VI-02: Multi select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3,option4',
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomMultiSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				// Should show ALL option
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Wait for Virtuoso to render the custom options
+			await waitFor(
+				() => {
+					expect(screen.getByText('option1')).toBeInTheDocument();
+					expect(screen.getByText('option2')).toBeInTheDocument();
+					expect(screen.getByText('option3')).toBeInTheDocument();
+					expect(screen.getByText('option4')).toBeInTheDocument();
+				},
+				{ timeout: 5000 },
+			);
+		});
+	});
+
+	// ===== 3. TEXTBOX VARIABLE TYPE =====
+	describe('Textbox Variable Integration', () => {
+		it('VI-03: Textbox variable handling', async () => {
+			const variable = createMockVariable({
+				type: 'TEXTBOX',
+				selectedValue: 'initial-value',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render a regular input
+			const textInput = screen.getByDisplayValue('initial-value');
+			expect(textInput).toBeInTheDocument();
+			expect(textInput.tagName).toBe('INPUT');
+
+			// Clear and type new value
+			await user.clear(textInput);
+			await user.type(textInput, 'new-text-value');
+
+			// Blur the input to trigger the value update
+			await user.tab();
+
+			// Should call onValueUpdate after blur
+			await waitFor(
+				() => {
+					expect(mockOnValueUpdate).toHaveBeenCalledWith(
+						TEST_VARIABLE_NAME,
+						TEST_VARIABLE_ID,
+						'new-text-value',
+						false,
+					);
+				},
+				{ timeout: 1000 },
+			);
+		});
+	});
+
+	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
+	describe('Value Persistence and State Management', () => {
+		it('VI-04: All selected state handling', () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'service1,service2,service3',
+				selectedValue: ['service1', 'service2', 'service3'],
+				allSelected: true,
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show "ALL" instead of individual values
+			expect(screen.getByText('ALL')).toBeInTheDocument();
+		});
+
+		it('VI-05: Dropdown behavior with temporary selections', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'item1,item2,item3',
+				selectedValue: ['item1'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Wait for dropdown to open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+	});
+
+	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
+	describe('Accessibility and User Experience', () => {
+		it('VI-06: Variable description tooltip', async () => {
+			const variable = createMockVariable({
+				description: 'This variable controls the service selection',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show info icon
+			const infoIcon = document.querySelector('.info-icon');
+			expect(infoIcon).toBeInTheDocument();
+
+			// Hover to show tooltip
+			if (infoIcon) {
+				await user.hover(infoIcon);
+			}
+
+			await waitFor(() => {
+				expect(
+					screen.getByText('This variable controls the service selection'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('VI-07: Variable name display', () => {
+			const variable = createMockVariable({
+				name: 'service_name',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show variable name with $ prefix
+			expect(screen.getByText('$service_name')).toBeInTheDocument();
+		});
+
+		it('VI-08: Max tag count behavior', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
+				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to render
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			// Should show limited number of tags with "+ X more"
+			const tags = document.querySelectorAll('.ant-select-selection-item');
+
+			// The component should render without crashing
+			expect(tags.length).toBeGreaterThanOrEqual(0);
+		});
+	});
+
+	// ===== 8. SEARCH INTERACTION TESTS =====
+	describe('Search Interaction Tests', () => {
+		it('VI-14: Search persistence across dropdown open/close', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			const searchInput = document.querySelector(
+				'.ant-select-selection-search-input',
+			);
+			expect(searchInput).toBeInTheDocument();
+
+			if (searchInput) {
+				await user.type(searchInput, 'search-text');
+			}
+
+			// Verify search text is in input
+			await waitFor(() => {
+				expect(searchInput).toHaveValue('search-text');
+			});
+
+			// Press Escape to close dropdown
+			await user.keyboard('{Escape}');
+
+			// Dropdown should close and search text should be cleared
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+				expect(searchInput).toHaveValue('');
+			});
+		});
+	});
+
+	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
+	describe('Advanced Keyboard Navigation (VI)', () => {
+		it('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+				selectedValue: ['option1', 'option2', 'option3'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Navigate to chips using arrow keys
+			await user.keyboard('{ArrowLeft}');
+
+			// Use Shift + Arrow to navigate between chips
+			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
+
+			// Use Del to delete the active chip
+			await user.keyboard('{Delete}');
+
+			// Note: The component may not immediately call onValueUpdate
+			// This test verifies the chip deletion behavior
+			await waitFor(() => {
+				// Check if a chip was removed from the selection
+				const selectionItems = document.querySelectorAll(
+					'.ant-select-selection-item',
+				);
+				expect(selectionItems.length).toBeLessThan(3);
+			});
+		});
+	});
+
+	// ===== 11. ADVANCED UI STATES =====
+	describe('Advanced UI States (VI)', () => {
+		it('VI-19: No data with previous value selected in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: '',
+				multiSelect: true,
+				selectedValue: ['previous-value'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Should show no data message (the component may not show this exact text)
+			await waitFor(() => {
+				// Check if dropdown is empty or shows no data indication
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+
+		it('VI-20: Always editable accessibility in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+
+			// Should be editable
+			expect(combobox).not.toBeDisabled();
+			await user.click(combobox);
+			expect(combobox).toHaveFocus();
+
+			// Should still be interactive
+			expect(combobox).not.toBeDisabled();
+		});
+	});
+
+	// ===== 13. DROPDOWN PERSISTENCE =====
+	describe('Dropdown Persistence (VI)', () => {
+		it('VI-24: Dropdown stays open for non-save actions in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Navigate with arrow keys (non-save action)
+			await user.keyboard('{ArrowDown}');
+			await user.keyboard('{ArrowDown}');
+
+			// Dropdown should still be open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+
+			// Only ESC should close the dropdown
+			await user.keyboard('{Escape}');
+
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+			});
+		});
+	});
+});

frontend/src/components/NewSelect/utils.ts

@@ -1,26 +1,11 @@
+import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
+
 import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
 export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
 
-/** De-duplicate options by `value`, keeping the first occurrence. */
-export const uniqueOptions = (options: OptionData[]): OptionData[] => {
-	const deduped: OptionData[] = [];
-	const seenValues = new Set<string>();
-
-	options.forEach((option) => {
-		const value = option.value || '';
-		if (seenValues.has(value)) {
-			return;
-		}
-		seenValues.add(value);
-		deduped.push(option);
-	});
-
-	return deduped;
-};
-
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -241,29 +241,28 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						))
 					)}
 
-					{!showOnlyWhereClause &&
-						currentQuery.builder.queryFormulas?.length > 0 && (
-							<div className="qb-formulas-container">
-								{currentQuery.builder.queryFormulas.map((formula, index) => {
-									const query =
-										currentQuery.builder.queryData[index] ||
-										currentQuery.builder.queryData[0];
+					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
+						<div className="qb-formulas-container">
+							{currentQuery.builder.queryFormulas.map((formula, index) => {
+								const query =
+									currentQuery.builder.queryData[index] ||
+									currentQuery.builder.queryData[0];
 
-									return (
-										<div key={formula.queryName} className="qb-formula">
-											<Formula
-												filterConfigs={filterConfigs}
-												query={query}
-												formula={formula}
-												index={index}
-												isAdditionalFilterEnable={false}
-												isQBV2
-											/>
-										</div>
-									);
-								})}
-							</div>
-						)}
+								return (
+									<div key={formula.queryName} className="qb-formula">
+										<Formula
+											filterConfigs={filterConfigs}
+											query={query}
+											formula={formula}
+											index={index}
+											isAdditionalFilterEnable={false}
+											isQBV2
+										/>
+									</div>
+								);
+							})}
+						</div>
+					)}
 
 					{shouldShowFooter && (
 						<QueryFooter
@@ -291,7 +290,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							</div>
 						))}
 
-						{currentQuery.builder.queryFormulas?.map((formula) => (
+						{currentQuery.builder.queryFormulas.map((formula) => (
 							<div key={formula.queryName} className="formula-name">
 								{formula.queryName}
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -17,6 +17,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 // Shrink the suggestion-fetch debounce (300ms in prod) so these integration
 // tests aren't paced by it; coalescing semantics stay intact.
 jest.mock('../QuerySearch/constants', () => ({

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -21,6 +21,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
@@ -146,16 +152,15 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			/>,
 		);
 
-		// Wait for the mount fetch specifically. A debounced fetch from an earlier test
-		// can still land after mockClear(), so waiting on "any call" would let this
-		// assert against that one instead and make the result order-dependent.
-		await waitFor(
-			() =>
-				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
-					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
-				),
-			{ timeout: 2000 },
-		);
+		// Wait for debounced API call (300ms debounce + some buffer)
+		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
+			timeout: 2000,
+		});
+
+		const lastArgs = mockedGetKeysOnMount.mock.calls[
+			mockedGetKeysOnMount.mock.calls.length - 1
+		]?.[0] as { signal: unknown; searchText: string };
+		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
 	});
 
 	it('calls provided onRun on Mod-Enter', async () => {

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

@@ -212,32 +212,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
 
-	it('does not crash when builder.queryFormulas/queryTraceOperator are missing (partial/legacy query)', () => {
-		const currentQueryBase = baseQBContext.currentQuery as Query;
-
-		mockedUseQueryBuilder.mockReturnValue({
-			...baseQBContext,
-			currentQuery: {
-				...currentQueryBase,
-				builder: {
-					queryData: currentQueryBase.builder.queryData,
-					queryFormulas: undefined as unknown as [],
-					queryTraceOperator: undefined as unknown as [],
-				},
-			},
-		});
-
-		expect(() =>
-			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />),
-		).not.toThrow();
-
-		// query list still renders from queryData, formulas block is skipped
-		expect(document.querySelector('.query-names-section')).toBeInTheDocument();
-		expect(
-			document.querySelector('.qb-formulas-container'),
-		).not.toBeInTheDocument();
-	});
-
 	it('fx button is disabled when functions already exist', () => {
 		const currentQueryBase = baseQBContext.currentQuery as Query;
 		const supersetQueryBase = baseQBContext.supersetQuery as Query;

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/RecentSearches.test.tsx

@@ -31,6 +31,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('api/querySuggestions/getKeySuggestions', () => ({
 	getKeySuggestions: jest.fn().mockResolvedValue({
 		data: { data: { keys: {} } },

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -4,7 +4,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
@@ -110,7 +110,10 @@ describe('ServiceAccountDrawer — permissions', () => {
 	it('shows PermissionDeniedCallout in Keys tab when list-keys permission is denied', async () => {
 		server.use(setupAuthzDeny(APIKeyListPermission));
 
-		renderDrawer({ account: 'sa-1', tab: 'keys' });
+		renderDrawer();
+		await screen.findByDisplayValue('CI Bot');
+
+		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
 
 		await waitFor(() => {
 			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@signozhq/ui/typography';
-import { timeItems } from 'constants/timePreference';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({
 	key: item.enum,

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
-} from 'constants/timePreference';
+} from 'container/NewWidget/RightContainer/timeItems';
 
 import { menuItems } from './config';
 

frontend/src/components/ValueGraph/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleAlert } from '@signozhq/icons';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 

frontend/src/components/ValueGraph/utils.ts

@@ -1,5 +1,5 @@
-import { evaluateThresholdWithConvertedValue } from 'container/WidgetCard/Panels/TablePanel/utils';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 function doesValueSatisfyThreshold(
 	rawValue: number,

frontend/src/constants/panelTypes.ts

@@ -1,6 +1,6 @@
 import Uplot from 'components/Uplot';
-import GridTableComponent from 'container/WidgetCard/Panels/TablePanel';
-import GridValueComponent from 'container/WidgetCard/Panels/ValuePanel';
+import GridTableComponent from 'container/GridTableComponent';
+import GridValueComponent from 'container/GridValueComponent';
 import LogsPanelComponent from 'container/LogsPanelTable/LogsPanelComponent';
 import TracesTableComponent from 'container/TracesTableComponent/TracesTableComponent';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/constants/routes.ts

@@ -16,6 +16,7 @@ const ROUTES = {
 	APPLICATION: '/services',
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
+	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',
 	DASHBOARD_PANEL_EDITOR: '/dashboard/:dashboardId/panel/:panelId',
 	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -2,7 +2,7 @@ import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AlertListTabs } from 'pages/AlertList/types';
-import { NEW_PANEL_ID } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { NEW_PANEL_ID } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import { matchPath } from 'react-router-dom';
 
 /**

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -6,7 +6,7 @@ import {
 	getAllEndpointsWidgetData,
 	getGroupByFiltersFromGroupByValues,
 } from 'container/ApiMonitoring/utils';
-import GridCard from 'container/WidgetCard/Card';
+import GridCard from 'container/GridCardLayout/GridCard';
 import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { isEqual } from 'lodash-es';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/MetricOverTimeGraph.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import GridCard from 'container/WidgetCard/Card';
-import { Widgets } from 'types/api/widgets/widget';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 function MetricOverTimeGraph({
 	widget,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -11,10 +11,10 @@ import {
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
-import BarChart from 'lib/visualization/charts/BarChart/BarChart';
-import { handleGraphClick } from 'container/WidgetCard/Card/utils';
-import { useGraphClickToShowButton } from 'container/WidgetCard/hooks/useGraphClickToShowButton';
-import useNavigateToExplorerPages from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
+import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
+import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -23,7 +23,7 @@ import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import ErrorState from './ErrorState';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -1,7 +1,7 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'lib/visualization/panels/utils/baseConfigBuilder';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -17,7 +17,7 @@ jest.mock('container/ApiMonitoring/utils', () => ({
 	getGroupByFiltersFromGroupByValues: jest.fn(),
 }));
 
-jest.mock('container/WidgetCard/Card', () => ({
+jest.mock('container/GridCardLayout/GridCard', () => ({
 	__esModule: true,
 	default: jest.fn().mockImplementation(({ customOnRowClick }) => (
 		<div data-testid="grid-card-mock">

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,12 +21,15 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock('lib/visualization/charts/BarChart/BarChart', () => ({
-	__esModule: true,
-	default: jest
-		.fn()
-		.mockImplementation(() => <div data-testid="bar-chart-mock" />),
-}));
+jest.mock(
+	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
+	() => ({
+		__esModule: true,
+		default: jest
+			.fn()
+			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
+	}),
+);
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -40,7 +43,7 @@ jest.mock('components/CeleryTask/useNavigateToExplorer', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
+jest.mock('container/GridCardLayout/useGraphClickToShowButton', () => ({
 	useGraphClickToShowButton: (): {
 		componentClick: boolean;
 		htmlRef: HTMLElement | null;
@@ -50,7 +53,7 @@ jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useNavigateToExplorerPages', () => ({
+jest.mock('container/GridCardLayout/useNavigateToExplorerPages', () => ({
 	__esModule: true,
 	default: (): { navigateToExplorerPages: jest.Mock } => ({
 		navigateToExplorerPages: jest.fn(),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -10,7 +10,7 @@ import {
 } from 'components/QuickFilters/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { GraphClickMetaData } from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import { GraphClickMetaData } from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/utils';
 import dayjs from 'dayjs';
@@ -18,7 +18,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { cloneDeep } from 'lodash-es';
 import { ArrowUpDown, ChevronDown, ChevronRight, Info } from '@signozhq/icons';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import {
 	BaseAutocompleteData,

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

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import BarChart from 'lib/visualization/charts/BarChart/BarChart';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';

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

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'lib/visualization/panels/utils/baseConfigBuilder';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -98,7 +98,7 @@ jest.mock('api/channels/getAll', () => ({
 }));
 
 // Mock alert format categories
-jest.mock('constants/formats/alertFormatCategories', () => ({
+jest.mock('container/NewWidget/RightContainer/alertFomatCategories', () => ({
 	getCategoryByOptionId: jest.fn(() => ({ name: 'bytes' })),
 	getCategorySelectOptionByName: jest.fn(() => [
 		{ label: 'Bytes', value: 'bytes' },

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryParams } from 'constants/query';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import ChartPreviewComponent from 'container/FormAlertRules/ChartPreview';
-import PlotTag from 'components/PlotTag/PlotTag';
+import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
 import { AppState } from 'store/reducers';

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -44,7 +44,7 @@ jest.mock(
 		},
 );
 jest.mock(
-	'components/PlotTag/PlotTag',
+	'container/NewWidget/LeftContainer/WidgetGraph/PlotTag',
 	() =>
 		function MockPlotTag(props: any): JSX.Element {
 			return (

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -0,0 +1,440 @@
+.dashboard-description-container {
+	box-shadow: none;
+	border: none;
+	background: unset;
+	box-shadow: none;
+	color: var(--l2-foreground);
+
+	.ant-card-body {
+		padding: 0px;
+	}
+
+	.dashboard-details {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 16px 16px 0px 16px;
+		align-items: flex-start;
+
+		.left-section {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 45%;
+
+			.dashboard-img {
+				height: 16px;
+				width: 16px;
+			}
+
+			.dashboard-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 24px; /* 150% */
+				letter-spacing: -0.08px;
+				max-width: 80%;
+
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.public-dashboard-icon {
+				margin-right: 4px;
+			}
+		}
+
+		.right-section {
+			display: flex;
+			width: 55%;
+			justify-content: flex-end;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 14px;
+
+			.icons {
+				display: flex;
+				align-items: center;
+				width: 32px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.icons:hover {
+				background-color: unset;
+			}
+			.configure-button {
+				display: flex;
+				align-items: center;
+				width: 93px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.add-panel-btn {
+				display: flex;
+				width: 119px;
+				height: 34px;
+				padding: 5.937px 11.875px;
+				justify-content: center;
+				align-items: center;
+				color: var(--primary-foreground);
+				background: var(--primary-background);
+				font-family: Inter;
+				font-size: 11.875px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 17.812px; /* 150% */
+			}
+		}
+	}
+
+	.dashboard-tags {
+		display: flex;
+		gap: 6px;
+		padding: 16px 16px 0px 16px;
+		flex-wrap: wrap;
+
+		.tag {
+			display: flex;
+			padding: 4px 8px;
+			justify-content: center;
+			align-items: center;
+			border-radius: 20px;
+			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			color: var(--bg-sienna-400);
+			text-align: center;
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+			margin-inline-end: 0px;
+		}
+	}
+	.dashboard-description-section {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 22px; /* 157.143% */
+		letter-spacing: -0.07px;
+		padding: 20px 16px 0px 16px;
+		/* Preserve author-entered line breaks in the description. */
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+
+		a {
+			color: var(--accent-primary);
+			text-decoration: underline;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+	}
+
+	.dashboard-variables {
+		padding: 16px 16px 18px 16px;
+	}
+}
+
+.dashboard-description {
+	display: -webkit-box;
+	-webkit-line-clamp: 2; /* Show up to 2 lines */
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.dashboard-settings {
+	width: 191px;
+	height: 302px;
+	flex-shrink: 0;
+
+	.ant-popover-inner {
+		padding: 0px;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		) !important;
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+
+	.menu-content {
+		display: flex;
+		flex-direction: column;
+
+		section {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+
+			.ant-btn {
+				display: flex;
+				width: 100%;
+				height: unset;
+				padding: 8px;
+				align-items: center;
+				gap: 12px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				border-top: none;
+
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+		}
+
+		.section-1,
+		.section-2 {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.delete-dashboard .ant-btn {
+			color: var(--bg-cherry-400) !important;
+		}
+	}
+}
+
+.rename-dashboard {
+	.ant-modal-content {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		.ant-modal-header {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+			.ant-modal-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		.ant-modal-body {
+			padding: 16px;
+
+			.dashboard-content {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.name-text {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.dashboard-name-input {
+					display: flex;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		.ant-modal-footer {
+			padding: 16px;
+			margin-top: 0px;
+			.dashboard-rename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancel-btn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+
+					.ant-btn-icon {
+						margin-inline-end: 0px;
+					}
+				}
+
+				.rename-btn {
+					display: flex;
+					align-items: center;
+					display: flex;
+					width: 169px;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+
+					.ant-btn-icon {
+						margin-inline-end: 0px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.section-naming {
+	.ant-modal-content {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		.ant-modal-header {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+			.ant-modal-title {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		.ant-modal-body {
+			padding: 16px;
+
+			.section-naming-content {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.name-text {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.section-name-input {
+					display: flex;
+					width: 320px;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		.ant-modal-footer {
+			padding: 16px;
+			margin-top: 0px;
+			.dashboard-rename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancel-btn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+
+					.ant-btn-icon {
+						margin-inline-end: 0px;
+					}
+				}
+
+				.rename-btn {
+					display: flex;
+					align-items: center;
+					display: flex;
+					width: 140px;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+
+					.ant-btn-icon {
+						margin-inline-end: 0px;
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.styles.scss

@@ -0,0 +1,43 @@
+.settings-container-root {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+		.ant-drawer-header {
+			height: 48px;
+			border-bottom: 1px solid var(--l1-border);
+			padding: 14px 14px 14px 11px;
+
+			.ant-drawer-header-title {
+				gap: 16px;
+
+				.ant-drawer-title {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+					padding-left: 16px;
+					border-left: 1px solid var(--l1-border);
+				}
+
+				.ant-drawer-close {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		.ant-drawer-body {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -0,0 +1,34 @@
+import { memo, PropsWithChildren, ReactElement } from 'react';
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import './SettingsDrawer.styles.scss';
+
+type SettingsDrawerProps = PropsWithChildren<{
+	drawerTitle: string;
+	isOpen: boolean;
+	onClose: () => void;
+}>;
+
+function SettingsDrawer({
+	children,
+	drawerTitle,
+	isOpen,
+	onClose,
+}: SettingsDrawerProps): JSX.Element {
+	return (
+		<Drawer
+			title={drawerTitle}
+			placement="right"
+			width="50%"
+			onClose={onClose}
+			open={isOpen}
+			rootClassName="settings-container-root"
+		>
+			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
+			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
+		</Drawer>
+	);
+}
+
+export default memo(SettingsDrawer);

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -0,0 +1,235 @@
+import { ReactNode } from 'react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import {
+	getDashboardById,
+	getNonIntegrationDashboardById,
+} from 'mocks-server/__mockdata__/dashboards';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	resetDashboard,
+	useDashboardStore,
+} from 'providers/Dashboard/store/useDashboardStore';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+import DashboardDescription from '..';
+
+function DashboardBootstrapWrapper({
+	dashboardId,
+	children,
+}: {
+	dashboardId: string;
+	children: ReactNode;
+}): JSX.Element {
+	useDashboardBootstrap(dashboardId);
+	// eslint-disable-next-line react/jsx-no-useless-fragment
+	return <>{children}</>;
+}
+
+interface MockSafeNavigateReturn {
+	safeNavigate: jest.MockedFunction<(url: string) => void>;
+}
+
+const DASHBOARD_TEST_ID = 'dashboard-title';
+const DASHBOARD_TITLE_TEXT = 'thor';
+const DASHBOARD_PATH = '/dashboard/4';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+}));
+
+jest.mock(
+	'container/TopNav/DateTimeSelectionV2/index.tsx',
+	() =>
+		function MockDateTimeSelection(): JSX.Element {
+			return <div>MockDateTimeSelection</div>;
+		},
+);
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): MockSafeNavigateReturn => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+describe('Dashboard landing page actions header tests', () => {
+	beforeEach(() => {
+		mockSafeNavigate.mockClear();
+		sessionStorage.clear();
+		resetDashboard();
+	});
+
+	it('unlock dashboard should be disabled for integrations created dashboards', async () => {
+		const mockLocation = {
+			pathname: `${process.env.FRONTEND_API_ENDPOINT}${DASHBOARD_PATH}`,
+			search: '',
+		};
+		(useLocation as jest.Mock).mockReturnValue(mockLocation);
+		const { getByTestId } = render(
+			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
+				<DashboardBootstrapWrapper dashboardId="4">
+					<DashboardDescription
+						handle={{
+							active: false,
+							enter: (): Promise<void> => Promise.resolve(),
+							exit: (): Promise<void> => Promise.resolve(),
+							node: { current: null },
+						}}
+					/>
+				</DashboardBootstrapWrapper>
+			</MemoryRouter>,
+		);
+
+		await waitFor(() =>
+			expect(getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
+				DASHBOARD_TITLE_TEXT,
+			),
+		);
+
+		const dashboardSettingsTrigger = getByTestId('options');
+
+		await fireEvent.click(dashboardSettingsTrigger);
+
+		const lockUnlockButton = screen.getByTestId('lock-unlock-dashboard');
+
+		await waitFor(() => expect(lockUnlockButton).toBeDisabled());
+	});
+
+	it('unlock dashboard should not be disabled for non integration created dashboards', async () => {
+		const mockLocation = {
+			pathname: `${process.env.FRONTEND_API_ENDPOINT}${DASHBOARD_PATH}`,
+			search: '',
+		};
+		(useLocation as jest.Mock).mockReturnValue(mockLocation);
+		server.use(
+			rest.get('http://localhost/api/v1/dashboards/4', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(getNonIntegrationDashboardById)),
+			),
+		);
+		const { getByTestId } = render(
+			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
+				<DashboardBootstrapWrapper dashboardId="4">
+					<DashboardDescription
+						handle={{
+							active: false,
+							enter: (): Promise<void> => Promise.resolve(),
+							exit: (): Promise<void> => Promise.resolve(),
+							node: { current: null },
+						}}
+					/>
+				</DashboardBootstrapWrapper>
+			</MemoryRouter>,
+		);
+
+		await waitFor(() =>
+			expect(getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
+				DASHBOARD_TITLE_TEXT,
+			),
+		);
+
+		const dashboardSettingsTrigger = getByTestId('options');
+
+		await fireEvent.click(dashboardSettingsTrigger);
+
+		const lockUnlockButton = screen.getByTestId('lock-unlock-dashboard');
+
+		await waitFor(() => expect(lockUnlockButton).not.toBeDisabled());
+	});
+
+	it('should navigate to base dashboard list URL when no saved params exist', async () => {
+		const user = userEvent.setup();
+		const mockLocation = {
+			pathname: DASHBOARD_PATH,
+			search: '',
+		};
+
+		(useLocation as jest.Mock).mockReturnValue(mockLocation);
+
+		const { getByText } = render(
+			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
+				<DashboardBootstrapWrapper dashboardId="4">
+					<DashboardDescription
+						handle={{
+							active: false,
+							enter: (): Promise<void> => Promise.resolve(),
+							exit: (): Promise<void> => Promise.resolve(),
+							node: { current: null },
+						}}
+					/>
+				</DashboardBootstrapWrapper>
+			</MemoryRouter>,
+		);
+
+		await waitFor(() =>
+			expect(screen.getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
+				DASHBOARD_TITLE_TEXT,
+			),
+		);
+
+		const dashboardButton = getByText('Dashboard /');
+		await user.click(dashboardButton);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith('/dashboard');
+	});
+
+	it('should navigate to dashboard list with saved query params when present', async () => {
+		const user = userEvent.setup();
+		const savedParams = 'columnKey=createdAt&order=ascend&page=2&search=foo';
+		sessionStorage.setItem('dashboardsListQueryParams', savedParams);
+
+		const mockLocation = {
+			pathname: DASHBOARD_PATH,
+			search: '',
+		};
+
+		(useLocation as jest.Mock).mockReturnValue(mockLocation);
+
+		useDashboardStore.setState({
+			dashboardData: getDashboardById.data as unknown as Dashboard,
+			layouts: [],
+			panelMap: {},
+			setPanelMap: jest.fn(),
+			setLayouts: jest.fn(),
+			setDashboardData: jest.fn(),
+			columnWidths: {},
+		});
+
+		const { getByText } = render(
+			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
+				<DashboardDescription
+					handle={{
+						active: false,
+						enter: (): Promise<void> => Promise.resolve(),
+						exit: (): Promise<void> => Promise.resolve(),
+						node: { current: null },
+					}}
+				/>
+			</MemoryRouter>,
+		);
+
+		await waitFor(() =>
+			expect(screen.getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
+				DASHBOARD_TITLE_TEXT,
+			),
+		);
+
+		const dashboardButton = getByText('Dashboard /');
+		await user.click(dashboardButton);
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith({
+			pathname: '/dashboard',
+			search: `?${savedParams}`,
+		});
+	});
+});

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -0,0 +1,621 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { FullScreenHandle } from 'react-full-screen';
+import { Layout } from 'react-grid-layout';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import {
+	Check,
+	ClipboardCopy,
+	Ellipsis,
+	FileJson,
+	FolderKanban,
+	Fullscreen,
+	Globe,
+	LockKeyhole,
+	PenLine,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { Button, Card, Modal, Popover, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import { Input } from '@signozhq/ui/input';
+import logEvent from 'api/common/logEvent';
+import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
+import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
+import { useGetPublicDashboardMeta } from 'hooks/dashboard/useGetPublicDashboardMeta';
+import { useLockDashboard } from 'hooks/dashboard/useLockDashboard';
+import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
+import {
+	selectIsDashboardLocked,
+	useDashboardStore,
+} from 'providers/Dashboard/store/useDashboardStore';
+import { sortLayout } from 'providers/Dashboard/util';
+import { DashboardData } from 'types/api/dashboard/getAll';
+import { Props } from 'types/api/dashboard/update';
+import { ROLES, USER_ROLES } from 'types/roles';
+import { linkifyText } from 'utils/linkifyText';
+import { ComponentTypes } from 'utils/permission';
+import { v4 as uuid } from 'uuid';
+
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
+import DashboardSettings from '../DashboardSettings';
+import { Base64Icons } from '../DashboardSettings/General/utils';
+import DashboardVariableSelection from '../DashboardVariablesSelection';
+import PanelTypeSelectionModal from '../PanelTypeSelectionModal';
+import SettingsDrawer from './SettingsDrawer';
+import { VariablesSettingsTab } from './types';
+import {
+	DEFAULT_ROW_NAME,
+	downloadObjectAsJson,
+	sanitizeDashboardData,
+} from './utils';
+
+import './Description.styles.scss';
+
+interface DashboardDescriptionProps {
+	handle: FullScreenHandle;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+	const { handle } = props;
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
+	const {
+		dashboardData,
+		panelMap,
+		setPanelMap,
+		layouts,
+		setLayouts,
+		setDashboardData,
+	} = useDashboardStore();
+
+	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const handleDashboardLockToggle = useLockDashboard();
+
+	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+		useState<boolean>(false);
+
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	const isPublicDashboardEnabled = isCloudUser || isEnterpriseSelfHostedUser;
+
+	const selectedData = dashboardData
+		? {
+				...dashboardData.data,
+				uuid: dashboardData.id,
+			}
+		: ({} as DashboardData);
+	const { dashboardVariables } = useDashboardVariables();
+
+	const {
+		title = '',
+		description,
+		tags,
+		image = Base64Icons[0],
+	} = selectedData || {};
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+
+	const [sectionName, setSectionName] = useState<string>(DEFAULT_ROW_NAME);
+
+	const updateDashboardMutation = useUpdateDashboard();
+
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
+		useState<boolean>(false);
+
+	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+
+	const [isPanelNameModalOpen, setIsPanelNameModalOpen] =
+		useState<boolean>(false);
+
+	const [isPublicDashboard, setIsPublicDashboard] = useState<boolean>(false);
+
+	let isAuthor = false;
+
+	if (dashboardData && user && user.email) {
+		isAuthor = dashboardData?.createdBy === user?.email;
+	}
+
+	let permissions: ComponentTypes[] = ['add_panel'];
+
+	if (isDashboardLocked) {
+		permissions = ['add_panel_locked_dashboard'];
+	}
+
+	const { notifications } = useNotifications();
+
+	const userRole: ROLES | null =
+		dashboardData?.createdBy === user?.email
+			? (USER_ROLES.AUTHOR as ROLES)
+			: user.role;
+
+	const [addPanelPermission] = useComponentPermission(permissions, userRole);
+
+	const onEmptyWidgetHandler = useCallback(() => {
+		setIsPanelTypeSelectionModalOpen(true);
+		logEvent('Dashboard Detail: Add new panel clicked', {
+			dashboardId: dashboardData?.id,
+			dashboardName: dashboardData?.data.title,
+			numberOfPanels: dashboardData?.data.widgets?.length,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [setIsPanelTypeSelectionModalOpen]);
+
+	const handleLockDashboardToggle = (): void => {
+		setIsDashbordSettingsOpen(false);
+		handleDashboardLockToggle(!isDashboardLocked);
+	};
+
+	const onNameChangeHandler = (): void => {
+		if (!dashboardData) {
+			return;
+		}
+		const updatedDashboard: Props = {
+			id: dashboardData.id,
+
+			data: {
+				...dashboardData.data,
+				title: updatedTitle,
+			},
+		};
+		updateDashboardMutation.mutate(updatedDashboard, {
+			onSuccess: (updatedDashboard) => {
+				notifications.success({
+					message: 'Dashboard renamed successfully',
+				});
+				setIsRenameDashboardOpen(false);
+				if (updatedDashboard.data) {
+					setDashboardData(updatedDashboard.data);
+				}
+			},
+			onError: () => {
+				setIsRenameDashboardOpen(true);
+			},
+		});
+	};
+
+	const [state, setCopy] = useCopyToClipboard();
+
+	const { t } = useTranslation(['dashboard', 'common']);
+
+	// used to set the initial value for the updatedTitle
+	// the context value is sometimes not available during the initial render
+	// due to which the updatedTitle is set to some previous value
+	useEffect(() => {
+		if (dashboardData) {
+			setUpdatedTitle(dashboardData.data.title);
+		}
+	}, [dashboardData]);
+
+	useEffect(() => {
+		if (state.error) {
+			notifications.error({
+				message: t('something_went_wrong', {
+					ns: 'common',
+				}),
+			});
+		}
+
+		if (state.value) {
+			notifications.success({
+				message: t('success', {
+					ns: 'common',
+				}),
+			});
+		}
+	}, [state.error, state.value, t, notifications]);
+
+	function handleAddRow(): void {
+		if (!dashboardData) {
+			return;
+		}
+		const id = uuid();
+
+		const newRowWidgetMap: { widgets: Layout[]; collapsed: boolean } = {
+			widgets: [],
+			collapsed: false,
+		};
+		const currentRowIdx = 0;
+		for (let j = currentRowIdx; j < layouts.length; j++) {
+			if (!panelMap[layouts[j].i]) {
+				newRowWidgetMap.widgets.push(layouts[j]);
+			} else {
+				break;
+			}
+		}
+
+		const updatedDashboard: Props = {
+			id: dashboardData.id,
+
+			data: {
+				...dashboardData.data,
+				layout: [
+					{
+						i: id,
+						w: 12,
+						minW: 12,
+						minH: 1,
+						maxH: 1,
+						x: 0,
+						h: 1,
+						y: 0,
+					},
+					...layouts.filter((e) => e.i !== PANEL_TYPES.EMPTY_WIDGET),
+				],
+				panelMap: { ...panelMap, [id]: newRowWidgetMap },
+				widgets: [
+					...(dashboardData.data.widgets || []),
+					{
+						id,
+						title: sectionName,
+						description: '',
+						panelTypes: PANEL_GROUP_TYPES.ROW,
+					},
+				],
+			},
+		};
+
+		updateDashboardMutation.mutate(updatedDashboard, {
+			onSuccess: (updatedDashboard) => {
+				if (updatedDashboard.data) {
+					if (updatedDashboard.data.data.layout) {
+						setLayouts(sortLayout(updatedDashboard.data.data.layout));
+					}
+					setDashboardData(updatedDashboard.data);
+					setPanelMap(updatedDashboard.data?.data?.panelMap || {});
+				}
+
+				setIsPanelNameModalOpen(false);
+				setSectionName(DEFAULT_ROW_NAME);
+			},
+		});
+	}
+
+	const {
+		data: publicDashboardResponse,
+		isLoading: isLoadingPublicDashboardData,
+		isFetching: isFetchingPublicDashboardData,
+		error: errorPublicDashboardData,
+		isError: isErrorPublicDashboardData,
+	} = useGetPublicDashboardMeta(
+		dashboardData?.id || '',
+		!!dashboardData?.id && isPublicDashboardEnabled,
+	);
+
+	useEffect(() => {
+		if (!isLoadingPublicDashboardData && !isFetchingPublicDashboardData) {
+			if (isErrorPublicDashboardData) {
+				const errorDetails = errorPublicDashboardData?.getErrorDetails();
+
+				if (errorDetails?.error?.code === 'public_dashboard_not_found') {
+					setIsPublicDashboard(false);
+				}
+			} else {
+				const publicDashboardData = publicDashboardResponse?.data;
+				if (publicDashboardData?.publicPath) {
+					setIsPublicDashboard(true);
+				}
+			}
+		}
+	}, [
+		isLoadingPublicDashboardData,
+		isFetchingPublicDashboardData,
+		isErrorPublicDashboardData,
+		errorPublicDashboardData,
+		publicDashboardResponse?.data,
+	]);
+
+	const onConfigureClick = useCallback((): void => {
+		setIsSettingsDrawerOpen(true);
+	}, []);
+
+	const onSettingsDrawerClose = useCallback((): void => {
+		setIsSettingsDrawerOpen(false);
+		// good use case for a state library like Jotai
+		if (variablesSettingsTabHandle.current) {
+			variablesSettingsTabHandle.current.resetState();
+		}
+	}, []);
+
+	return (
+		<Card className="dashboard-description-container">
+			<DashboardHeader />
+			<section className="dashboard-details">
+				<div className="left-section">
+					<img src={image} alt="dashboard-img" className="dashboard-img" />
+					<Tooltip title={title.length > 30 ? title : ''}>
+						<Typography.Text
+							className="dashboard-title"
+							data-testid="dashboard-title"
+						>
+							{title}
+						</Typography.Text>
+					</Tooltip>
+
+					{isPublicDashboard && (
+						<Tooltip title="This dashboard is publicly accessible">
+							<Globe size={14} className="public-dashboard-icon" />
+						</Tooltip>
+					)}
+
+					{isDashboardLocked && (
+						<Tooltip title="This dashboard is locked">
+							<LockKeyhole size={14} className="lock-dashboard-icon" />
+						</Tooltip>
+					)}
+				</div>
+				<div className="right-section">
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+					<Popover
+						open={isDashboardSettingsOpen}
+						arrow={false}
+						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
+						rootClassName="dashboard-settings"
+						content={
+							<div className="menu-content">
+								<section className="section-1">
+									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
+										<Tooltip
+											title={
+												dashboardData?.createdBy === 'integration' &&
+												'Dashboards created by integrations cannot be unlocked'
+											}
+										>
+											<Button
+												type="text"
+												icon={<LockKeyhole size={14} />}
+												disabled={dashboardData?.createdBy === 'integration'}
+												onClick={handleLockDashboardToggle}
+												data-testid="lock-unlock-dashboard"
+											>
+												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
+											</Button>
+										</Tooltip>
+									)}
+
+									{!isDashboardLocked && editDashboard && (
+										<Button
+											type="text"
+											icon={<PenLine size={14} />}
+											onClick={(): void => {
+												setIsRenameDashboardOpen(true);
+												setIsDashbordSettingsOpen(false);
+											}}
+										>
+											Rename
+										</Button>
+									)}
+
+									<Button
+										type="text"
+										icon={<Fullscreen size={14} />}
+										onClick={handle.enter}
+									>
+										Full screen
+									</Button>
+								</section>
+								<section className="section-2">
+									{!isDashboardLocked && addPanelPermission && (
+										<Button
+											type="text"
+											icon={<FolderKanban size={14} />}
+											onClick={(): void => {
+												setIsPanelNameModalOpen(true);
+												setIsDashbordSettingsOpen(false);
+											}}
+										>
+											New section
+										</Button>
+									)}
+
+									<Button
+										type="text"
+										icon={<FileJson size={14} />}
+										onClick={(): void => {
+											downloadObjectAsJson(
+												sanitizeDashboardData(selectedData),
+												selectedData.title,
+											);
+											setIsDashbordSettingsOpen(false);
+										}}
+									>
+										Export JSON
+									</Button>
+									<Button
+										type="text"
+										icon={<ClipboardCopy size={14} />}
+										onClick={(): void => {
+											setCopy(
+												JSON.stringify(sanitizeDashboardData(selectedData), null, 2),
+											);
+											setIsDashbordSettingsOpen(false);
+										}}
+									>
+										Copy as JSON
+									</Button>
+								</section>
+								<section className="delete-dashboard">
+									<DeleteButton
+										createdBy={dashboardData?.createdBy || ''}
+										name={dashboardData?.data.title || ''}
+										id={String(dashboardData?.id) || ''}
+										isLocked={isDashboardLocked}
+										routeToListPage
+									/>
+								</section>
+							</div>
+						}
+						trigger="click"
+						placement="bottomRight"
+					>
+						<Button
+							icon={<Ellipsis size={14} />}
+							type="text"
+							className="icons"
+							data-testid="options"
+						/>
+					</Popover>
+					{!isDashboardLocked && editDashboard && (
+						<>
+							<Button
+								type="text"
+								className="configure-button"
+								icon={<ConfigureIcon />}
+								data-testid="show-drawer"
+								onClick={onConfigureClick}
+							>
+								Configure
+							</Button>
+							<SettingsDrawer
+								drawerTitle="Dashboard Configuration"
+								isOpen={isSettingsDrawerOpen}
+								onClose={onSettingsDrawerClose}
+							>
+								<DashboardSettings
+									variablesSettingsTabHandle={variablesSettingsTabHandle}
+								/>
+							</SettingsDrawer>
+						</>
+					)}
+					{!isDashboardLocked && addPanelPermission && (
+						<Button
+							className="add-panel-btn"
+							onClick={onEmptyWidgetHandler}
+							icon={<Plus size="md" />}
+							type="primary"
+							data-testid="add-panel-header"
+						>
+							New Panel
+						</Button>
+					)}
+				</div>
+			</section>
+			{(tags?.length || 0) > 0 && (
+				<div className="dashboard-tags">
+					{tags?.map((tag) => (
+						<Badge key={tag} className="tag" color="vanilla">
+							{tag}
+						</Badge>
+					))}
+				</div>
+			)}
+			{!isEmpty(description) && (
+				<section className="dashboard-description-section">
+					{linkifyText(description ?? '')}
+				</section>
+			)}
+
+			{!isEmpty(dashboardVariables) && (
+				<section className="dashboard-variables">
+					<DashboardVariableSelection />
+				</section>
+			)}
+			<PanelTypeSelectionModal />
+
+			<Modal
+				open={isRenameDashboardOpen}
+				title="Rename Dashboard"
+				onOk={(): void => {
+					// handle update dashboard here
+				}}
+				onCancel={(): void => {
+					setIsRenameDashboardOpen(false);
+				}}
+				rootClassName="rename-dashboard"
+				footer={
+					<div className="dashboard-rename">
+						<Button
+							type="primary"
+							icon={<Check size={14} />}
+							className="rename-btn"
+							onClick={onNameChangeHandler}
+							disabled={updateDashboardMutation.isLoading}
+						>
+							Rename Dashboard
+						</Button>
+						<Button
+							type="text"
+							icon={<X size={14} />}
+							className="cancel-btn"
+							onClick={(): void => setIsRenameDashboardOpen(false)}
+						>
+							Cancel
+						</Button>
+					</div>
+				}
+			>
+				<div className="dashboard-content">
+					<Typography.Text className="name-text">Enter a new name</Typography.Text>
+					<Input
+						data-testid="dashboard-name"
+						className="dashboard-name-input"
+						value={updatedTitle}
+						onChange={(e): void => setUpdatedTitle(e.target.value)}
+					/>
+				</div>
+			</Modal>
+			<Modal
+				open={isPanelNameModalOpen}
+				title="New Section"
+				rootClassName="section-naming"
+				onOk={(): void => handleAddRow()}
+				onCancel={(): void => {
+					setIsPanelNameModalOpen(false);
+					setSectionName(DEFAULT_ROW_NAME);
+				}}
+				footer={
+					<div className="dashboard-rename">
+						<Button
+							type="primary"
+							icon={<Check size={14} />}
+							className="rename-btn"
+							onClick={(): void => handleAddRow()}
+							disabled={updateDashboardMutation.isLoading}
+						>
+							Create Section
+						</Button>
+						<Button
+							type="text"
+							icon={<X size={14} />}
+							className="cancel-btn"
+							onClick={(): void => {
+								setIsPanelNameModalOpen(false);
+								setSectionName(DEFAULT_ROW_NAME);
+							}}
+						>
+							Cancel
+						</Button>
+					</div>
+				}
+			>
+				<div className="section-naming-content">
+					<Typography.Text className="name-text">Enter Section name</Typography.Text>
+					<Input
+						data-testid="section-name"
+						className="section-name-input"
+						value={sectionName}
+						onChange={(e): void => setSectionName(e.target.value)}
+					/>
+				</div>
+			</Modal>
+		</Card>
+	);
+}
+
+export default DashboardDescription;

frontend/src/container/DashboardContainer/DashboardDescription/types.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+
+export interface VariablesSettingsTab {
+	resetState: () => void;
+}
+
+export type VariablesSettingsTabHandle =
+	MutableRefObject<VariablesSettingsTab | null>;

frontend/src/container/DashboardContainer/DashboardDescription/utils.ts

@@ -0,0 +1,40 @@
+import { DashboardData, IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export function sanitizeDashboardData(
+	selectedData: DashboardData,
+): DashboardData {
+	if (!selectedData?.variables) {
+		return selectedData;
+	}
+
+	const updatedVariables = Object.entries(selectedData.variables).reduce(
+		(acc, [key, value]) => {
+			const { selectedValue: _selectedValue, ...rest } = value;
+			acc[key] = rest;
+			return acc;
+		},
+		{} as Record<string, IDashboardVariable>,
+	);
+
+	return {
+		...selectedData,
+		variables: updatedVariables,
+	};
+}
+
+export function downloadObjectAsJson(
+	exportObj: unknown,
+	exportName: string,
+): void {
+	const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
+		JSON.stringify(exportObj),
+	)}`;
+	const downloadAnchorNode = document.createElement('a');
+	downloadAnchorNode.setAttribute('href', dataStr);
+	downloadAnchorNode.setAttribute('download', `${exportName}.json`);
+	document.body.appendChild(downloadAnchorNode); // required for firefox
+	downloadAnchorNode.click();
+	downloadAnchorNode.remove();
+}
+
+export const DEFAULT_ROW_NAME = 'Sample Row';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettings.styles.scss

@@ -0,0 +1,123 @@
+.delete-variable-name {
+	font-weight: 700;
+	color: rgb(207, 19, 34);
+	font-style: italic;
+}
+
+.apply-to-all-variable-name {
+	font-weight: 700;
+	color: var(--bg-robin-400);
+	font-style: italic;
+}
+
+.dashboard-variable-settings-table {
+	.variable-name-drag {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		.ant-table-cell {
+			padding: 0px !important;
+			border: none !important;
+			color: var(--bg-robin-400);
+			font-family: 'Space Mono';
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 128.571% */
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.variable-description-actions {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		flex: 1 0 0;
+
+		.variable-description {
+			color: var(--bg-sienna-400);
+			font-family: 'Space Mono';
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 128.571% */
+			letter-spacing: -0.07px;
+		}
+
+		.actions-btns {
+			position: absolute;
+			right: 10px;
+			display: none;
+
+			&:hover {
+				display: inline-flex;
+			}
+
+			.edit-variable-button {
+				width: 26px;
+				height: 22px;
+				border-radius: 2px;
+				display: flex;
+				padding: 4px 6px;
+				align-items: center;
+				gap: 3px;
+				background: var(--l1-border);
+			}
+
+			.delete-variable-button {
+				width: 26px;
+				height: 22px;
+				border-radius: 2px;
+				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+				display: flex;
+				padding: 4px 6px;
+				align-items: center;
+				gap: 3px;
+				color: red;
+			}
+
+			.apply-to-all-button {
+				width: min-content;
+				height: 22px;
+				border-radius: 2px;
+				display: flex;
+				padding: 0px 6px;
+				align-items: center;
+				gap: 3px;
+				background: var(--l1-border);
+			}
+		}
+	}
+
+	.ant-table-cell-row-hover {
+		.actions-btns {
+			display: inline-flex;
+		}
+	}
+
+	.ant-table-thead {
+		.ant-table-cell {
+			padding: 8px 12px;
+			border: 1px solid var(--l1-border);
+			background: unset;
+		}
+
+		.ant-table-cell::before {
+			display: none;
+		}
+	}
+
+	.ant-table-tbody {
+		.ant-table-cell {
+			padding: 14px;
+			border: 1px solid var(--l1-border);
+		}
+	}
+
+	.ant-table-row {
+		.ant-table-cell:nth-child(even) {
+			background: color-mix(in srgb, var(--l1-border) 40%, transparent);
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -0,0 +1,62 @@
+.settings-tabs {
+	.ant-tabs-nav-list {
+		height: 32px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		transition: opacity 0.1s !important;
+
+		.ant-tabs-tab + .ant-tabs-tab {
+			margin: 0px;
+		}
+
+		.ant-tabs-tab:not(:last-child) {
+			border-right: 1px solid var(--l1-border) !important;
+		}
+
+		.overview-btn {
+			width: 114px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.variables-btn {
+			width: 114px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.public-dashboard-btn {
+			width: 150px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&.disabled-btn {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.ant-tabs-ink-bar {
+			display: none;
+		}
+
+		.ant-tabs-tab-active {
+			.overview-btn,
+			.variables-btn,
+			.public-dashboard-btn {
+				color: var(--primary-background);
+				background: var(--l1-border);
+			}
+		}
+	}
+
+	.ant-tabs-nav::before {
+		border-bottom: none;
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -0,0 +1,31 @@
+.dynamic-variable-container {
+	margin: 24px 0;
+
+	.dynamic-variable-config-container {
+		display: grid;
+		grid-template-columns: 1fr 32px 16px 200px;
+		gap: 16px;
+		align-items: center;
+		width: 100%;
+
+		.ant-select {
+			.ant-select-selector {
+				border-radius: 4px;
+				border: 1px solid var(--l1-border);
+			}
+		}
+
+		.ant-input {
+			border-radius: 4px;
+			border: 1px solid var(--l1-border);
+			max-width: 300px;
+		}
+
+		.dynamic-variable-from-text {
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-weight: 500;
+			white-space: nowrap;
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -0,0 +1,230 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import CustomSelect from 'components/NewSelect/CustomSelect';
+import TextToolTip from 'components/TextToolTip';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useDebounce from 'hooks/useDebounce';
+import { Info } from '@signozhq/icons';
+import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
+import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
+
+import './DynamicVariable.styles.scss';
+
+enum AttributeSource {
+	ALL_TELEMETRY = 'All telemetry',
+	LOGS = 'Logs',
+	METRICS = 'Metrics',
+	TRACES = 'Traces',
+}
+
+function DynamicVariable({
+	setDynamicVariablesSelectedValue,
+	dynamicVariablesSelectedValue,
+	errorAttributeKeyMessage,
+}: {
+	setDynamicVariablesSelectedValue: Dispatch<
+		SetStateAction<
+			| {
+					name: string;
+					value: string;
+			  }
+			| undefined
+		>
+	>;
+	dynamicVariablesSelectedValue:
+		| {
+				name: string;
+				value: string;
+		  }
+		| undefined;
+	errorAttributeKeyMessage?: string;
+}): JSX.Element {
+	const sources = [
+		AttributeSource.ALL_TELEMETRY,
+		AttributeSource.LOGS,
+		AttributeSource.TRACES,
+		AttributeSource.METRICS,
+	];
+
+	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
+	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
+	const [selectedAttribute, setSelectedAttribute] = useState<string>();
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+	const [errorMessage, setErrorMessage] = useState<string>();
+	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	const [filteredAttributes, setFilteredAttributes] = useState<
+		Record<string, FieldKey[]>
+	>({});
+
+	useEffect(() => {
+		if (dynamicVariablesSelectedValue?.name) {
+			setSelectedAttribute(dynamicVariablesSelectedValue.name);
+		}
+
+		if (dynamicVariablesSelectedValue?.value) {
+			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
+		}
+	}, [
+		dynamicVariablesSelectedValue?.name,
+		dynamicVariablesSelectedValue?.value,
+	]);
+
+	const { data, error, isLoading, refetch } = useGetFieldKeys({
+		signal:
+			attributeSource === AttributeSource.ALL_TELEMETRY
+				? undefined
+				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
+		name: debouncedApiSearchText,
+	});
+
+	const isComplete = useMemo(() => data?.data?.complete === true, [data]);
+
+	useEffect(() => {
+		if (data) {
+			const newAttributes = data.data?.keys ?? {};
+			setAttributes(newAttributes);
+			setFilteredAttributes(newAttributes);
+		}
+	}, [data]);
+
+	// Handle error from useGetFieldKeys
+	useEffect(() => {
+		if (error) {
+			// Check if error is retryable (5xx) or not (4xx)
+			const isRetryable = checkIfRetryableError(error);
+			setIsRetryableError(isRetryable);
+		}
+	}, [error]);
+
+	// refetch when attributeSource changes
+	useEffect(() => {
+		if (attributeSource) {
+			refetch();
+		}
+	}, [attributeSource, refetch, debouncedApiSearchText]);
+
+	// Handle search based on whether we have complete data or not
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				// If complete is true, do client-side filtering
+				if (!text) {
+					setFilteredAttributes(attributes);
+					return;
+				}
+
+				const filtered: Record<string, FieldKey[]> = {};
+				Object.keys(attributes).forEach((key) => {
+					if (key.toLowerCase().includes(text.toLowerCase())) {
+						filtered[key] = attributes[key];
+					}
+				});
+				setFilteredAttributes(filtered);
+			} else {
+				// If complete is false, debounce the API call
+				setApiSearchText(text);
+			}
+		},
+		[attributes, isComplete],
+	);
+
+	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
+	useEffect(() => {
+		if (selectedAttribute || attributeSource) {
+			setDynamicVariablesSelectedValue({
+				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
+				value:
+					attributeSource ||
+					dynamicVariablesSelectedValue?.value ||
+					AttributeSource.ALL_TELEMETRY,
+			});
+		}
+	}, [
+		selectedAttribute,
+		attributeSource,
+		setDynamicVariablesSelectedValue,
+		dynamicVariablesSelectedValue?.name,
+		dynamicVariablesSelectedValue?.value,
+	]);
+
+	const isDarkMode = useIsDarkMode();
+	const errorText = (error as any)?.message || errorMessage;
+	return (
+		<div className="dynamic-variable-container">
+			<div className="dynamic-variable-config-container">
+				<CustomSelect
+					placeholder="Select a field"
+					options={Object.keys(filteredAttributes).map((key) => ({
+						label: key,
+						value: key,
+					}))}
+					loading={isLoading}
+					status={errorText ? 'error' : undefined}
+					onChange={(value): void => {
+						setSelectedAttribute(value);
+					}}
+					showSearch
+					errorMessage={errorText as any}
+					value={selectedAttribute || dynamicVariablesSelectedValue?.name}
+					onSearch={handleSearch}
+					onRetry={(): void => {
+						// reset error message
+						setErrorMessage(undefined);
+						setIsRetryableError(true);
+						refetch();
+					}}
+					showRetryButton={isRetryableError}
+				/>
+				<Typography className="dynamic-variable-from-text">from</Typography>
+				<span style={{ display: 'inline-flex', alignItems: 'center' }}>
+					<TextToolTip
+						text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
+						useFilledIcon={false}
+						outlinedIcon={
+							<Info
+								size={14}
+								style={{
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+									marginTop: 1,
+								}}
+							/>
+						}
+					/>
+				</span>
+				<Select
+					placeholder="Source"
+					defaultValue={AttributeSource.ALL_TELEMETRY}
+					options={sources.map((source) => ({ label: source, value: source }))}
+					onChange={(value): void => setAttributeSource(value as AttributeSource)}
+					value={attributeSource || dynamicVariablesSelectedValue?.value}
+				/>
+			</div>
+			{errorAttributeKeyMessage && (
+				<div>
+					<Typography.Text color="warning">
+						{errorAttributeKeyMessage}
+					</Typography.Text>
+				</div>
+			)}
+		</div>
+	);
+}
+
+DynamicVariable.defaultProps = {
+	errorAttributeKeyMessage: '',
+};
+
+export default DynamicVariable;

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -0,0 +1,382 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+
+import DynamicVariable from '../DynamicVariable';
+
+// Mock scrollIntoView since it's not available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Mock dependencies
+jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
+	useGetFieldKeys: jest.fn(),
+}));
+
+jest.mock('hooks/useDebounce', () => ({
+	__esModule: true,
+	default: (value: any): any => value, // Return the same value without debouncing for testing
+}));
+
+describe('DynamicVariable Component', () => {
+	const mockSetDynamicVariablesSelectedValue = jest.fn();
+	const ATTRIBUTE_PLACEHOLDER = 'Select a field';
+	const LOADING_TEXT = 'Refreshing values...';
+	const DEFAULT_PROPS = {
+		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
+		dynamicVariablesSelectedValue: undefined,
+		errorAttributeKeyMessage: '',
+	};
+
+	const mockFieldKeysResponse = {
+		data: {
+			keys: {
+				'service.name': [],
+				'http.status_code': [],
+				duration: [],
+			},
+			complete: true,
+		},
+		httpStatusCode: 200,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Default mock implementation
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+	});
+
+	// Helper function to get the attribute select element
+	const getAttributeSelect = (): HTMLElement =>
+		screen.getAllByRole('combobox')[0];
+
+	// Helper function to get the source select element
+	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
+
+	it('renders with default state', () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Check for main components
+		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
+		expect(screen.getByText('All telemetry')).toBeInTheDocument();
+		expect(screen.getByText('from')).toBeInTheDocument();
+	});
+
+	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
+		const selectedValue = {
+			name: 'service.name',
+			value: 'Logs',
+		};
+
+		render(
+			<DynamicVariable
+				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
+				dynamicVariablesSelectedValue={selectedValue}
+			/>,
+		);
+
+		// Verify values are set
+		expect(screen.getByText('service.name')).toBeInTheDocument();
+		expect(screen.getByText('Logs')).toBeInTheDocument();
+	});
+
+	it('shows loading state when fetching data', () => {
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: null,
+			isLoading: true,
+			refetch: jest.fn(),
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Should show loading state
+		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
+	});
+
+	it('shows error message when API fails', () => {
+		const errorMessage = 'Failed to fetch field keys';
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: { message: errorMessage },
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Should show error message
+		expect(screen.getByText(errorMessage)).toBeInTheDocument();
+	});
+
+	it('updates filteredAttributes when data is loaded', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Wait for options to appear in the dropdown
+		await waitFor(() => {
+			// Looking for option-content elements inside the CustomSelect dropdown
+			const options = document.querySelectorAll('.option-content');
+			expect(options.length).toBeGreaterThan(0);
+
+			// Check if all expected options are present
+			let foundServiceName = false;
+			let foundHttpStatusCode = false;
+			let foundDuration = false;
+
+			options.forEach((option) => {
+				const text = option.textContent?.trim();
+				if (text === 'service.name') {
+					foundServiceName = true;
+				}
+				if (text === 'http.status_code') {
+					foundHttpStatusCode = true;
+				}
+				if (text === 'duration') {
+					foundDuration = true;
+				}
+			});
+
+			expect(foundServiceName).toBe(true);
+			expect(foundHttpStatusCode).toBe(true);
+			expect(foundDuration).toBe(true);
+		});
+	});
+
+	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Wait for options to appear, then click on service.name
+		await waitFor(() => {
+			// Need to find the option-item containing service.name
+			const serviceNameOption = screen.getByText('service.name');
+			expect(serviceNameOption).not.toBeNull();
+			expect(serviceNameOption?.textContent).toBe('service.name');
+
+			// Click on the option-item that contains service.name
+			const optionElement = serviceNameOption?.closest('.option-item');
+			if (optionElement) {
+				fireEvent.click(optionElement);
+			}
+		});
+
+		// Check if the setter was called with the correct value
+		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
+			name: 'service.name',
+			value: 'All telemetry',
+		});
+	});
+
+	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Get the Select component
+		const select = screen
+			.getByText('All telemetry')
+			.closest('div[class*="ant-select"]');
+		expect(select).toBeInTheDocument();
+
+		// Directly call the onChange handler by simulating the Select's onChange
+		// Find the props.onChange of the Select component and call it directly
+		fireEvent.mouseDown(select as HTMLElement);
+
+		// Use a more specific selector to find the "Logs" option
+		const optionsContainer = document.querySelector(
+			'.rc-virtual-list-holder-inner',
+		);
+		expect(optionsContainer).not.toBeNull();
+
+		// Find the option with Logs text content
+		const logsOption = Array.from(
+			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
+		)
+			.find((element) => element.textContent === 'Logs')
+			?.closest('.ant-select-item-option');
+
+		expect(logsOption).not.toBeNull();
+
+		// Click on it
+		if (logsOption) {
+			fireEvent.click(logsOption);
+		}
+
+		// Check if the setter was called with the correct value
+		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
+			expect.objectContaining({
+				value: 'Logs',
+			}),
+		);
+	});
+
+	it('filters attributes locally when complete is true', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Mock the filter function behavior
+		const attributeKeys = Object.keys(mockFieldKeysResponse.data.keys);
+
+		// Only "http.status_code" should match the filter
+		const expectedFilteredKeys = attributeKeys.filter((key) =>
+			key.includes('http'),
+		);
+
+		// Verify our expected filtering logic
+		expect(expectedFilteredKeys).toContain('http.status_code');
+		expect(expectedFilteredKeys).not.toContain('service.name');
+		expect(expectedFilteredKeys).not.toContain('duration');
+
+		// Now verify the component's filtering ability by inputting the search text
+		const inputElement = screen
+			.getAllByRole('combobox')[0]
+			.querySelector('input');
+		if (inputElement) {
+			fireEvent.change(inputElement, { target: { value: 'http' } });
+		}
+	});
+
+	it('triggers API call when complete is false and search text changes', async () => {
+		const mockRefetch = jest.fn();
+
+		// Set up the mock to indicate that data is not complete
+		// and needs to be fetched from the server
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					keys: {
+						'http.status_code': [],
+					},
+					complete: false, // This indicates server-side filtering is needed
+				},
+				httpStatusCode: 200,
+			},
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		// Render with Logs as the initial source
+		render(
+			<DynamicVariable
+				{...DEFAULT_PROPS}
+				dynamicVariablesSelectedValue={{
+					name: '',
+					value: 'Logs',
+				}}
+			/>,
+		);
+
+		// Clear any initial calls
+		mockRefetch.mockClear();
+
+		// Now test the search functionality
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Find the input element and simulate typing
+		const inputElement = document.querySelector(
+			'.ant-select-selection-search-input',
+		);
+
+		if (inputElement) {
+			// Simulate typing in the search input
+			fireEvent.change(inputElement, { target: { value: 'http' } });
+
+			// Verify that the input has the correct value
+			expect((inputElement as HTMLInputElement).value).toBe('http');
+
+			// Wait for the effect to run and verify refetch was called
+			await waitFor(
+				() => {
+					expect(mockRefetch).toHaveBeenCalled();
+				},
+				{ timeout: 3000 },
+			); // Increase timeout to give more time for the effect to run
+		}
+	});
+
+	it('triggers refetch when attributeSource changes', async () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Clear any initial calls
+		mockRefetch.mockClear();
+
+		// Find and click on the source select to open dropdown
+		const sourceSelectElement = getSourceSelect();
+		fireEvent.mouseDown(sourceSelectElement);
+
+		// Find and click on the "Metrics" option
+		const metricsOption = screen.getByText('Metrics');
+		fireEvent.click(metricsOption);
+
+		// Wait for the effect to run
+		await waitFor(() => {
+			// Verify that refetch was called after source selection
+			expect(mockRefetch).toHaveBeenCalled();
+		});
+	});
+
+	it('shows retry button when error occurs', () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: { message: 'Failed to fetch field keys' },
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Find and click reload icon (retry button)
+		const reloadIcon = screen.getByTestId('retry-button');
+		fireEvent.click(reloadIcon);
+
+		// Should trigger refetch
+		expect(mockRefetch).toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -0,0 +1,420 @@
+.query-container {
+	display: flex;
+	flex-flow: row wrap;
+	min-width: 0;
+	gap: 1rem;
+	margin-bottom: 1rem;
+	flex-direction: column;
+}
+
+.variable-item-container {
+	display: flex;
+	flex-direction: column;
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+
+	.all-variables {
+		display: flex;
+		padding: 10px 16px;
+		align-items: center;
+		gap: 8px;
+		border-bottom: 1px solid var(--l1-border);
+		.all-variables-btn {
+			display: flex;
+			align-items: center;
+			height: 24px;
+			padding: 0px;
+			color: var(--muted-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 128.571% */
+		}
+
+		.all-variables-btn:hover {
+			background-color: unset !important;
+		}
+	}
+
+	.variable-item-content {
+		padding: 12px 16px 20px 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+
+		.variable-name-section {
+			flex-direction: column;
+			gap: 8px;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+			}
+
+			.name-input {
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				padding: 6px 6px 6px 8px;
+			}
+		}
+		.variable-description-section {
+			flex-direction: column;
+			gap: 8px;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+			}
+
+			.description-input {
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				padding: 6px 6px 6px 8px;
+			}
+		}
+
+		.variable-type-section {
+			justify-content: space-between;
+			margin-bottom: 0px;
+			align-items: center;
+
+			.variable-type-label-container {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+			}
+
+			.variable-type-btn-group {
+				display: grid;
+				grid-template-columns: max-content max-content max-content max-content;
+				height: 32px;
+				flex-shrink: 0;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l2-background);
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+				.ant-btn {
+					width: 114px;
+					height: 32px;
+					flex-shrink: 0;
+					border-radius: 2px 0px 0px 2px;
+					width: 100%;
+				}
+
+				.variable-type-btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 4px;
+
+					.sidenav-beta-tag {
+						margin-left: 4px;
+					}
+
+					div {
+						display: flex;
+						align-items: center;
+					}
+				}
+
+				.variable-type-btn + .variable-type-btn {
+					border-left: 1px solid var(--l1-border);
+				}
+				.selected {
+					background: var(--l1-border);
+				}
+			}
+		}
+
+		.sort-values-section {
+			justify-content: space-between;
+			margin-bottom: 0;
+
+			.typography-variables {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.typography-sort {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 166.667% */
+				letter-spacing: -0.06px;
+			}
+
+			.sort-input {
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+
+				.ant-select-selector {
+					width: 192px;
+					height: 32px;
+					padding: 6px 6px 6px 8px;
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		.multiple-values-section {
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 0;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				width: 339px;
+			}
+		}
+
+		.all-option-section {
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 0;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				width: 339px;
+			}
+		}
+
+		.default-value-section {
+			display: grid;
+			grid-template-columns: max-content 1fr;
+
+			.typography-variables {
+				display: block;
+			}
+
+			.default-value-description {
+				display: block;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+		}
+
+		.dynamic-variable-section {
+			justify-content: space-between;
+			margin-bottom: 0;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				width: 339px;
+			}
+		}
+
+		.variable-textbox-section {
+			justify-content: space-between;
+			margin-bottom: 0;
+			align-items: center;
+
+			.typography-variables {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+			}
+
+			.default-input {
+				display: flex;
+				height: 32px;
+				padding: 6px 6px 6px 8px;
+				align-items: flex-start;
+				gap: 4px;
+				flex: 1 0 0;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				width: 342px;
+			}
+		}
+
+		.variable-custom-section {
+			margin-bottom: 0px;
+			.custom-collapse {
+				width: 100%;
+				border-radius: 3px 3px 0px 0px;
+				border: 1px solid var(--l1-border);
+
+				.ant-collapse-item {
+					border-bottom: none;
+				}
+
+				.ant-collapse-header {
+					height: 38px;
+					border-radius: 3px 3px 0px 0px;
+					background: var(--l3-background);
+					align-items: center;
+					padding: 12px;
+					gap: 8px;
+
+					.ant-collapse-expand-icon {
+						padding-inline-end: 0px;
+					}
+
+					.ant-collapse-header-text {
+						color: var(--bg-robin-400);
+						font-family: 'Space Mono';
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 18px; /* 128.571% */
+						display: flex;
+						padding: 1px 2px;
+						align-items: center;
+						gap: 10px;
+						border-radius: 2px;
+						background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+					}
+				}
+
+				.ant-collapse-content {
+					border-top: none;
+
+					.ant-collapse-content-box {
+						padding: 0px;
+					}
+
+					.comma-input {
+						height: 109px;
+						border: none;
+					}
+				}
+			}
+		}
+
+		.variables-preview-section {
+			display: flex;
+			flex-direction: column;
+			margin-bottom: 0px;
+			border-radius: 0px 0px 3px 3px;
+			border: 1px solid var(--l1-border);
+			height: 108px;
+			margin-top: -20px;
+			border-collapse: collapse;
+			gap: 5px;
+			flex-flow: column;
+
+			.typography-variables {
+				color: var(--bg-robin-400);
+				font-family: 'Space Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				display: inline-flex;
+				padding: 1px 2px;
+				align-items: center;
+				gap: 10px;
+				border-radius: 0px 0px 2px 0px;
+				background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+			}
+
+			.preview-values {
+				padding: 4.5px 11px;
+				display: flex;
+				overflow-y: auto;
+				flex-flow: wrap;
+				gap: 8px;
+
+				[data-slot='badge'] {
+					height: 30px;
+					color: var(--l1-foreground);
+					font-family: 'Space Mono';
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px;
+					display: inline-flex;
+					letter-spacing: -0.07px;
+					align-items: center;
+					border-radius: 2px;
+					border: 1px solid var(--l1-border);
+					margin-inline-end: 0px;
+				}
+			}
+		}
+	}
+}
+
+.variable-item-footer {
+	margin-top: 12px;
+	display: flex;
+	flex-direction: row-reverse;
+
+	.footer-btn-discard {
+		display: flex;
+		align-items: center;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-border);
+		height: 34px;
+		padding: 4px 8px 4px 10px;
+		box-shadow: none;
+	}
+
+	.footer-btn-save {
+		display: flex;
+		align-items: center;
+		border-radius: 2px;
+		border: 1px solid var(--primary-background);
+		background: var(--primary-background);
+		width: 123px;
+		height: 34px;
+		padding: 4px 8px 4px 10px;
+		box-shadow: none;
+	}
+}