chore: remove dot_metrics_enable and associated code

* chore: refactored the config builder and added base config builder

* chore: added a common chart wrapper

* chore: tsc fix

* fix: pr review changes

* fix: pr review changes

* chore: added different tooltips

* chore: removed dayjs extention

* feat: added new barpanel component

* fix: added fix for pr review changes

* chore: added support for bar alignment configuration

* chore: updated structure for bar panel

* chore: pr review fix

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     container_name: schema-migrator-async
     command:
       - async

.devenv/docker/signoz-otel-collector/compose.yaml

@@ -4,7 +4,6 @@ services:
     container_name: signoz-otel-collector-dev
     command:
       - --config=/etc/otel-collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
     environment:

.github/CODEOWNERS

@@ -133,5 +133,8 @@
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
 /frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
 
-## UplotV2 
-/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
+## Dashboard Libs + Components
+/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
+/frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
+/frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
+/frontend/src/components/NewSelect/ @SigNoz/pulse-frontend

.github/workflows/goci.yaml

@@ -93,3 +93,13 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
+      - name: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install-frontend
+        run: cd frontend && yarn install
+      - name: generate-api-clients
+        run: |
+          cd frontend && yarn generate:api
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)

cmd/community/server.go

@@ -18,8 +18,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/role"
-	"github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -78,18 +76,15 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ dashboard.Module) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, _ role.Setter, _ role.Granter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
-		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, _ []role.RegisterTypeable) role.Setter {
-			return implrole.NewSetter(implrole.NewStore(store), authz)
-		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)

cmd/enterprise/server.go

@@ -14,7 +14,6 @@ import (
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/ee/modules/role/implrole"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
@@ -29,8 +28,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/role"
-	pkgimplrole "github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -118,18 +115,15 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, dashboardModule dashboard.Module) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), licensing, dashboardModule)
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, roleSetter, granter, queryParser, querier, licensing)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
-		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
-			return implrole.NewSetter(pkgimplrole.NewStore(store), authz, licensing, registry)
-		},
 	)
 
 	if err != nil {

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.110.1
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,12 +209,11 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.142.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -233,7 +232,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.110.1
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,12 +150,11 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.142.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     configs:
       - source: otel-collector-config
         target: /etc/otel-collector-config.yaml
@@ -176,7 +175,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.110.1}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,13 +213,12 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -239,7 +238,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +249,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.110.1}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,13 +144,12 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -166,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-async
     command:
       - async

docs/api/openapi.yml

@@ -607,6 +607,178 @@ paths:
       summary: Update auth domain
       tags:
       - authdomains
+  /api/v1/fields/keys:
+    get:
+      deprecated: false
+      description: This endpoint returns field keys
+      operationId: GetFieldsKeys
+      parameters:
+      - in: query
+        name: signal
+        schema:
+          type: string
+      - in: query
+        name: source
+        schema:
+          type: string
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: fieldContext
+        schema:
+          type: string
+      - in: query
+        name: fieldDataType
+        schema:
+          type: string
+      - in: query
+        name: metricName
+        schema:
+          type: string
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldKeys'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get field keys
+      tags:
+      - fields
+  /api/v1/fields/values:
+    get:
+      deprecated: false
+      description: This endpoint returns field values
+      operationId: GetFieldsValues
+      parameters:
+      - in: query
+        name: signal
+        schema:
+          type: string
+      - in: query
+        name: source
+        schema:
+          type: string
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: fieldContext
+        schema:
+          type: string
+      - in: query
+        name: fieldDataType
+        schema:
+          type: string
+      - in: query
+        name: metricName
+        schema:
+          type: string
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      - in: query
+        name: name
+        schema:
+          type: string
+      - in: query
+        name: existingQuery
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldValues'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get field values
+      tags:
+      - fields
   /api/v1/getResetPasswordToken/{id}:
     get:
       deprecated: false
@@ -4183,6 +4355,8 @@ components:
           type: string
         unit:
           type: string
+      required:
+      - name
       type: object
     Querybuildertypesv5QueryData:
       properties:
@@ -4244,6 +4418,68 @@ components:
           format: date-time
           type: string
       type: object
+    TelemetrytypesGettableFieldKeys:
+      properties:
+        complete:
+          type: boolean
+        keys:
+          additionalProperties:
+            items:
+              $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+            type: array
+          nullable: true
+          type: object
+      required:
+      - keys
+      - complete
+      type: object
+    TelemetrytypesGettableFieldValues:
+      properties:
+        complete:
+          type: boolean
+        values:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldValues'
+      required:
+      - values
+      - complete
+      type: object
+    TelemetrytypesTelemetryFieldKey:
+      properties:
+        description:
+          type: string
+        fieldContext:
+          type: string
+        fieldDataType:
+          type: string
+        name:
+          type: string
+        signal:
+          type: string
+        unit:
+          type: string
+      required:
+      - name
+      type: object
+    TelemetrytypesTelemetryFieldValues:
+      properties:
+        boolValues:
+          items:
+            type: boolean
+          type: array
+        numberValues:
+          items:
+            format: double
+            type: number
+          type: array
+        relatedValues:
+          items:
+            type: string
+          type: array
+        stringValues:
+          items:
+            type: string
+          type: array
+      type: object
     TypesChangePasswordRequest:
       properties:
         newPassword:

ee/authz/openfgaauthz/provider.go

@@ -2,12 +2,18 @@ package openfgaauthz
 
 import (
 	"context"
+	"slices"
 
+	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/authz/authzstore/sqlauthzstore"
 	pkgopenfgaauthz "github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -15,84 +21,320 @@ import (
 
 type provider struct {
 	pkgAuthzService authz.AuthZ
+	openfgaServer   *openfgaserver.Server
+	licensing       licensing.Licensing
+	store           roletypes.Store
+	registry        []authz.RegisterTypeable
 }
 
-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, licensing licensing.Licensing, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
-		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema)
+		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, licensing, registry)
 	})
 }
 
-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile) (authz.AuthZ, error) {
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, licensing licensing.Licensing, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
 	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
 	}
 
+	openfgaServer, err := openfgaserver.NewOpenfgaServer(ctx, pkgAuthzService)
+	if err != nil {
+		return nil, err
+	}
+
 	return &provider{
 		pkgAuthzService: pkgAuthzService,
+		openfgaServer:   openfgaServer,
+		licensing:       licensing,
+		store:           sqlauthzstore.NewSqlAuthzStore(sqlstore),
+		registry:        registry,
 	}, nil
 }
 
 func (provider *provider) Start(ctx context.Context) error {
-	return provider.pkgAuthzService.Start(ctx)
+	return provider.openfgaServer.Start(ctx)
 }
 
 func (provider *provider) Stop(ctx context.Context) error {
-	return provider.pkgAuthzService.Stop(ctx)
+	return provider.openfgaServer.Stop(ctx)
 }
 
 func (provider *provider) Check(ctx context.Context, tuple *openfgav1.TupleKey) error {
-	return provider.pkgAuthzService.Check(ctx, tuple)
+	return provider.openfgaServer.Check(ctx, tuple)
 }
 
-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
-	if err != nil {
-		return err
-	}
-
-	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
-
-	err = provider.BatchCheck(ctx, tuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
 }
 
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	if err != nil {
-		return err
-	}
-
-	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
-
-	err = provider.BatchCheck(ctx, tuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
 }
 
 func (provider *provider) BatchCheck(ctx context.Context, tuples []*openfgav1.TupleKey) error {
-	return provider.pkgAuthzService.BatchCheck(ctx, tuples)
+	return provider.openfgaServer.BatchCheck(ctx, tuples)
 }
 
 func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
-	return provider.pkgAuthzService.ListObjects(ctx, subject, relation, typeable)
+	return provider.openfgaServer.ListObjects(ctx, subject, relation, typeable)
 }
 
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
-	return provider.pkgAuthzService.Write(ctx, additions, deletions)
+	return provider.openfgaServer.Write(ctx, additions, deletions)
+}
+
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*roletypes.Role, error) {
+	return provider.pkgAuthzService.Get(ctx, orgID, id)
+}
+
+func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*roletypes.Role, error) {
+	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
+}
+
+func (provider *provider) List(ctx context.Context, orgID valuer.UUID) ([]*roletypes.Role, error) {
+	return provider.pkgAuthzService.List(ctx, orgID)
+}
+
+func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.UUID, names []string) ([]*roletypes.Role, error) {
+	return provider.pkgAuthzService.ListByOrgIDAndNames(ctx, orgID, names)
+}
+
+func (provider *provider) Grant(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
+	return provider.pkgAuthzService.Grant(ctx, orgID, name, subject)
+}
+
+func (provider *provider) ModifyGrant(ctx context.Context, orgID valuer.UUID, existingRoleName string, updatedRoleName string, subject string) error {
+	return provider.pkgAuthzService.ModifyGrant(ctx, orgID, existingRoleName, updatedRoleName, subject)
+}
+
+func (provider *provider) Revoke(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
+	return provider.pkgAuthzService.Revoke(ctx, orgID, name, subject)
+}
+
+func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.UUID, managedRoles []*roletypes.Role) error {
+	return provider.pkgAuthzService.CreateManagedRoles(ctx, orgID, managedRoles)
+}
+
+func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
+	tuples := make([]*openfgav1.TupleKey, 0)
+
+	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
+	if err != nil {
+		return err
+	}
+	tuples = append(tuples, grantTuples...)
+
+	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
+	if err != nil {
+		return err
+	}
+	tuples = append(tuples, managedRoleTuples...)
+
+	return provider.Write(ctx, tuples, nil)
+}
+
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := provider.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
+	_, err := provider.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+	}
+
+	if existingRole != nil {
+		return roletypes.NewRoleFromStorableRole(existingRole), nil
+	}
+
+	err = provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+	if err != nil {
+		return nil, err
+	}
+
+	return role, nil
+}
+
+func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
+	typeables := make([]authtypes.Typeable, 0)
+	for _, register := range provider.registry {
+		typeables = append(typeables, register.MustGetTypeables()...)
+	}
+	// role module cannot self register itself!
+	typeables = append(typeables, provider.MustGetTypeables()...)
+
+	resources := make([]*authtypes.Resource, 0)
+	for _, typeable := range typeables {
+		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
+	}
+
+	return resources
+}
+
+func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+	storableRole, err := provider.store.Get(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	objects := make([]*authtypes.Object, 0)
+	for _, resource := range provider.GetResources(ctx) {
+		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
+			resourceObjects, err := provider.
+				ListObjects(
+					ctx,
+					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.ID.String(), orgID, &authtypes.RelationAssignee),
+					relation,
+					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
+				)
+			if err != nil {
+				return nil, err
+			}
+
+			objects = append(objects, resourceObjects...)
+		}
+	}
+
+	return objects, nil
+}
+
+func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := provider.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return provider.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+	_, err := provider.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
+	if err != nil {
+		return err
+	}
+
+	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
+	if err != nil {
+		return err
+	}
+
+	err = provider.Write(ctx, additionTuples, deletionTuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	_, err := provider.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableRole, err := provider.store.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	role := roletypes.NewRoleFromStorableRole(storableRole)
+	err = role.CanEditDelete()
+	if err != nil {
+		return err
+	}
+
+	return provider.store.Delete(ctx, orgID, id)
+}
+
+func (provider *provider) MustGetTypeables() []authtypes.Typeable {
+	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
+}
+
+func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	tuples := []*openfgav1.TupleKey{}
+
+	// Grant the admin role to the user
+	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
+	adminTuple, err := authtypes.TypeableRole.Tuples(
+		adminSubject,
+		authtypes.RelationAssignee,
+		[]authtypes.Selector{
+			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAdminRoleName),
+		},
+		orgID,
+	)
+	if err != nil {
+		return nil, err
+	}
+	tuples = append(tuples, adminTuple...)
+
+	// Grant the admin role to the anonymous user
+	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+	anonymousTuple, err := authtypes.TypeableRole.Tuples(
+		anonymousSubject,
+		authtypes.RelationAssignee,
+		[]authtypes.Selector{
+			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAnonymousRoleName),
+		},
+		orgID,
+	)
+	if err != nil {
+		return nil, err
+	}
+	tuples = append(tuples, anonymousTuple...)
+
+	return tuples, nil
+}
+
+func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	transactionsByRole := make(map[string][]*authtypes.Transaction)
+	for _, register := range provider.registry {
+		for roleName, txns := range register.MustGetManagedRoleTransactions() {
+			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
+		}
+	}
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for roleName, transactions := range transactionsByRole {
+		for _, txn := range transactions {
+			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
+			txnTuples, err := typeable.Tuples(
+				authtypes.MustNewSubject(
+					authtypes.TypeableRole,
+					roleName,
+					orgID,
+					&authtypes.RelationAssignee,
+				),
+				txn.Relation,
+				[]authtypes.Selector{txn.Object.Selector},
+				orgID,
+			)
+			if err != nil {
+				return nil, err
+			}
+			tuples = append(tuples, txnTuples...)
+		}
+	}
+
+	return tuples, nil
 }

ee/authz/openfgaserver/server.go

@@ -0,0 +1,83 @@
+package openfgaserver
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	openfgav1 "github.com/openfga/api/proto/openfga/v1"
+)
+
+type Server struct {
+	pkgAuthzService authz.AuthZ
+}
+
+func NewOpenfgaServer(ctx context.Context, pkgAuthzService authz.AuthZ) (*Server, error) {
+
+	return &Server{
+		pkgAuthzService: pkgAuthzService,
+	}, nil
+}
+
+func (server *Server) Start(ctx context.Context) error {
+	return server.pkgAuthzService.Start(ctx)
+}
+
+func (server *Server) Stop(ctx context.Context) error {
+	return server.pkgAuthzService.Stop(ctx)
+}
+
+func (server *Server) Check(ctx context.Context, tuple *openfgav1.TupleKey) error {
+	return server.pkgAuthzService.Check(ctx, tuple)
+}
+
+func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
+	if err != nil {
+		return err
+	}
+
+	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
+	if err != nil {
+		return err
+	}
+
+	err = server.BatchCheck(ctx, tuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+	if err != nil {
+		return err
+	}
+
+	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
+	if err != nil {
+		return err
+	}
+
+	err = server.BatchCheck(ctx, tuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (server *Server) BatchCheck(ctx context.Context, tuples []*openfgav1.TupleKey) error {
+	return server.pkgAuthzService.BatchCheck(ctx, tuples)
+}
+
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
+	return server.pkgAuthzService.ListObjects(ctx, subject, relation, typeable)
+}
+
+func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
+	return server.pkgAuthzService.Write(ctx, additions, deletions)
+}

ee/modules/dashboard/impldashboard/module.go

@@ -11,7 +11,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/role"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -26,13 +25,11 @@ type module struct {
 	pkgDashboardModule dashboard.Module
 	store              dashboardtypes.Store
 	settings           factory.ScopedProviderSettings
-	roleSetter         role.Setter
-	granter            role.Granter
 	querier            querier.Querier
 	licensing          licensing.Licensing
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) 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) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
 	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser)
 
@@ -40,8 +37,6 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		pkgDashboardModule: pkgDashboardModule,
 		store:              store,
 		settings:           scopedProviderSettings,
-		roleSetter:         roleSetter,
-		granter:            granter,
 		querier:            querier,
 		licensing:          licensing,
 	}
@@ -61,29 +56,6 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.Newf(errors.TypeAlreadyExists, dashboardtypes.ErrCodePublicDashboardAlreadyExists, "dashboard with id %s is already public", storablePublicDashboard.DashboardID)
 	}
 
-	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
-	if err != nil {
-		return err
-	}
-
-	err = module.granter.Grant(ctx, orgID, roletypes.SigNozAnonymousRoleName, authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.StringValue(), orgID, nil))
-	if err != nil {
-		return err
-	}
-
-	additionObject := authtypes.MustNewObject(
-		authtypes.Resource{
-			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-			Type: authtypes.TypeMetaResource,
-		},
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
-	)
-
-	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, []*authtypes.Object{additionObject}, nil)
-	if err != nil {
-		return err
-	}
-
 	err = module.store.CreatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 	if err != nil {
 		return err
@@ -128,6 +100,7 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 
 	return []authtypes.Selector{
 		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }
 
@@ -190,29 +163,6 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	publicDashboard, err := module.GetPublic(ctx, orgID, dashboardID)
-	if err != nil {
-		return err
-	}
-
-	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
-	if err != nil {
-		return err
-	}
-
-	deletionObject := authtypes.MustNewObject(
-		authtypes.Resource{
-			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-			Type: authtypes.TypeMetaResource,
-		},
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
-	)
-
-	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
-	if err != nil {
-		return err
-	}
-
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err
@@ -250,10 +200,6 @@ func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, m
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }
 
-func (module *module) MustGetTypeables() []authtypes.Typeable {
-	return module.pkgDashboardModule.MustGetTypeables()
-}
-
 func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.List(ctx, orgID)
 }
@@ -266,34 +212,27 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, role, lock)
 }
 
-func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
-	publicDashboard, err := module.store.GetPublic(ctx, dashboardID.String())
-	if err != nil {
-		return err
-	}
-
-	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
-	if err != nil {
-		return err
-	}
-
-	deletionObject := authtypes.MustNewObject(
-		authtypes.Resource{
-			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-			Type: authtypes.TypeMetaResource,
-		},
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
-	)
-
-	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
-	if err != nil {
-		return err
-	}
-
-	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
-	if err != nil {
-		return err
-	}
-
-	return nil
+func (module *module) MustGetTypeables() []authtypes.Typeable {
+	return module.pkgDashboardModule.MustGetTypeables()
+}
+
+func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
+	return map[string][]*authtypes.Transaction{
+		roletypes.SigNozAnonymousRoleName: {
+			{
+				Relation: authtypes.RelationRead,
+				Object: *authtypes.MustNewObject(
+					authtypes.Resource{
+						Type: authtypes.TypeMetaResource,
+						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+					},
+					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
+				),
+			},
+		},
+	}
+}
+
+func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
+	return module.store.DeletePublic(ctx, dashboardID.StringValue())
 }

ee/modules/role/implrole/setter.go

@@ -1,165 +0,0 @@
-package implrole
-
-import (
-	"context"
-	"slices"
-
-	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/modules/role"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/roletypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type setter struct {
-	store     roletypes.Store
-	authz     authz.AuthZ
-	licensing licensing.Licensing
-	registry  []role.RegisterTypeable
-}
-
-func NewSetter(store roletypes.Store, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
-	return &setter{
-		store:     store,
-		authz:     authz,
-		licensing: licensing,
-		registry:  registry,
-	}
-}
-
-func (setter *setter) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
-	_, err := setter.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	return setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
-}
-
-func (setter *setter) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
-	_, err := setter.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := setter.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return roletypes.NewRoleFromStorableRole(existingRole), nil
-	}
-
-	err = setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
-}
-
-func (setter *setter) GetResources(_ context.Context) []*authtypes.Resource {
-	typeables := make([]authtypes.Typeable, 0)
-	for _, register := range setter.registry {
-		typeables = append(typeables, register.MustGetTypeables()...)
-	}
-	// role module cannot self register itself!
-	typeables = append(typeables, setter.MustGetTypeables()...)
-
-	resources := make([]*authtypes.Resource, 0)
-	for _, typeable := range typeables {
-		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-	}
-
-	return resources
-}
-
-func (setter *setter) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
-	storableRole, err := setter.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	objects := make([]*authtypes.Object, 0)
-	for _, resource := range setter.GetResources(ctx) {
-		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
-			resourceObjects, err := setter.
-				authz.
-				ListObjects(
-					ctx,
-					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.ID.String(), orgID, &authtypes.RelationAssignee),
-					relation,
-					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
-				)
-			if err != nil {
-				return nil, err
-			}
-
-			objects = append(objects, resourceObjects...)
-		}
-	}
-
-	return objects, nil
-}
-
-func (setter *setter) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
-	_, err := setter.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	return setter.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
-}
-
-func (setter *setter) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
-	_, err := setter.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
-	if err != nil {
-		return err
-	}
-
-	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
-	if err != nil {
-		return err
-	}
-
-	err = setter.authz.Write(ctx, additionTuples, deletionTuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (setter *setter) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	_, err := setter.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	storableRole, err := setter.store.Get(ctx, orgID, id)
-	if err != nil {
-		return err
-	}
-
-	role := roletypes.NewRoleFromStorableRole(storableRole)
-	err = role.CanEditDelete()
-	if err != nil {
-		return err
-	}
-
-	return setter.store.Delete(ctx, orgID, id)
-}
-
-func (setter *setter) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
-}

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

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
-	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
@@ -56,7 +55,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
-		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),

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

@@ -67,14 +67,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	if constants.IsDotMetricsEnabled {
-		for idx, feature := range featureSet {
-			if feature.Name == licensetypes.DotMetricsEnabled {
-				featureSet[idx].Active = true
-			}
-		}
-	}
-
 	ah.Respond(w, featureSet)
 }
 

ee/query-service/app/server.go

@@ -211,7 +211,7 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
-	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz, s.signoz.Modules.RoleGetter)
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
 
 	r.Use(otelmux.Middleware(
 		"apiserver",
@@ -237,7 +237,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
-	apiHandler.RegisterFieldsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)

ee/query-service/constants/constants.go

@@ -18,14 +18,3 @@ func GetOrDefaultEnv(key string, fallback string) string {
 	return v
 }
 
-// constant functions that override env vars
-
-const DotMetricsEnabled = "DOT_METRICS_ENABLED"
-
-var IsDotMetricsEnabled = false
-
-func init() {
-	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
-		IsDotMetricsEnabled = true
-	}
-}

ee/query-service/rules/anomaly.go

@@ -15,7 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/transition"
-	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 
 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
@@ -63,6 +63,8 @@ type AnomalyRule struct {
 	seasonality anomaly.Seasonality
 }
 
+var _ baserules.Rule = (*AnomalyRule)(nil)
+
 func NewAnomalyRule(
 	id string,
 	orgID valuer.UUID,
@@ -490,7 +492,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 			continue
 		}
 
-		if a.State == model.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration() {
+		if a.State == model.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration().Duration() {
 			a.State = model.StateFiring
 			a.FiredAt = ts
 			state := model.StateFiring
@@ -553,7 +555,7 @@ func (r *AnomalyRule) String() string {
 	ar := ruletypes.PostableRule{
 		AlertName:         r.Name(),
 		RuleCondition:     r.Condition(),
-		EvalWindow:        ruletypes.Duration(r.EvalWindow()),
+		EvalWindow:        r.EvalWindow(),
 		Labels:            r.Labels().Map(),
 		Annotations:       r.Annotations().Map(),
 		PreferredChannels: r.PreferredChannels(),

ee/query-service/rules/anomaly_test.go

@@ -40,7 +40,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 	// Test basic AlertOnAbsent functionality (without AbsentFor grace period)
 
 	baseTime := time.Unix(1700000000, 0)
-	evalWindow := 5 * time.Minute
+	evalWindow := valuer.MustParseTextDuration("5m")
 	evalTime := baseTime.Add(5 * time.Minute)
 
 	target := 500.0
@@ -50,8 +50,8 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
-			EvalWindow: ruletypes.Duration(evalWindow),
-			Frequency:  ruletypes.Duration(1 * time.Minute),
+			EvalWindow: evalWindow,
+			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
 			CompareOp: ruletypes.ValueIsAbove,
@@ -147,7 +147,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 	// 3. Alert fires only if t2 - t1 > AbsentFor
 
 	baseTime := time.Unix(1700000000, 0)
-	evalWindow := 5 * time.Minute
+	evalWindow := valuer.MustParseTextDuration("5m")
 
 	// Set target higher than test data so regular threshold alerts don't fire
 	target := 500.0
@@ -157,8 +157,8 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
-			EvalWindow: ruletypes.Duration(evalWindow),
-			Frequency:  ruletypes.Duration(time.Minute),
+			EvalWindow: evalWindow,
+			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
 			CompareOp:     ruletypes.ValueIsAbove,

ee/query-service/rules/manager.go

@@ -48,7 +48,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)
 
 		// create ch rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {
 
@@ -72,7 +72,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)
 
 		// create promql rule task for evaluation
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -96,7 +96,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)
 
 		// create anomaly rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
 		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
@@ -213,8 +213,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 	return alertsFound, nil
 }
 
-// newTask returns an appropriate group for
-// rule type
+// newTask returns an appropriate group for the rule type
 func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID valuer.UUID) baserules.Task {
 	if taskType == baserules.TaskTypeCh {
 		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)

frontend/__mocks__/uplotMock.ts

@@ -12,6 +12,8 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
+	linear: jest.Mock;
+	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -23,10 +25,23 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Create mock paths
-const mockPaths: MockUPlotPaths = {
-	spline: jest.fn(),
-	bars: jest.fn(),
+// Path builder: (self, seriesIdx, idx0, idx1) => paths or null
+const createMockPathBuilder = (name: string): jest.Mock =>
+	jest.fn(() => ({
+		name, // To test if the correct pathBuilder is used
+		stroke: jest.fn(),
+		fill: jest.fn(),
+		clip: jest.fn(),
+	}));
+
+// Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
+const mockPaths = {
+	spline: jest.fn(() => createMockPathBuilder('spline')),
+	bars: jest.fn(() => createMockPathBuilder('bars')),
+	linear: jest.fn(() => createMockPathBuilder('linear')),
+	stepped: jest.fn((opts?: { align?: number }) =>
+		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
+	),
 };
 
 // Mock static methods

frontend/jest.config.ts

@@ -17,6 +17,8 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^@signozhq/icons$':
+			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -19,7 +19,7 @@
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
 		"test:changedsince": "jest --changedSince=main --coverage --silent",
-		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh && prettier --write src/api/generated && (eslint --fix src/api/generated || true)"
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
 	},
 	"engines": {
 		"node": ">=16.15.0"
@@ -52,6 +52,7 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
 		"@signozhq/resizable": "0.0.0",

frontend/public/Logos/convex-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="184" height="188" fill="none" viewBox="0 0 184 188"><path fill="#f3b01c" d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122"/><path fill="#8d2676" d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555"/><path fill="#ee342f" d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704"/></svg>

frontend/public/locales/en/titles.json

@@ -1,6 +1,7 @@
 {
 	"SIGN_UP": "SigNoz | Sign Up",
 	"LOGIN": "SigNoz | Login",
+	"FORGOT_PASSWORD": "SigNoz | Forgot Password",
 	"HOME": "SigNoz | Home",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",

frontend/scripts/post-types-generation.sh

@@ -1,5 +1,6 @@
 #!/bin/bash
 
+echo "\n\n---\nRenamed tag files to index.ts...\n"
 # Rename tag files to index.ts in services directories
 # tags-split creates: services/tagName/tagName.ts -> rename to services/tagName/index.ts
 find src/api/generated/services -mindepth 1 -maxdepth 1 -type d | while read -r dir; do
@@ -11,4 +12,33 @@ find src/api/generated/services -mindepth 1 -maxdepth 1 -type d | while read -r
   fi
 done
 
-echo "Tag files renamed to index.ts"
+echo "\n✅ Tag files renamed to index.ts"
+
+# Format generated files
+echo "\n\n---\nRunning prettier...\n"
+if ! prettier --write src/api/generated; then
+  echo "Prettier formatting failed!"
+  exit 1
+fi
+echo "\n✅ Prettier formatting successful"
+
+
+# Fix linting issues
+echo "\n\n---\nRunning eslint...\n"
+if ! yarn lint --fix --quiet src/api/generated; then
+  echo "ESLint check failed! Please fix linting errors before proceeding."
+  exit 1
+fi
+echo "\n✅ ESLint check successful"
+
+
+# Check for type errors
+echo "\n\n---\nChecking for type errors...\n"
+if ! tsc --noEmit; then
+  echo "Type check failed! Please fix type errors before proceeding."
+  exit 1
+fi
+echo "\n✅ Type check successful"
+
+
+echo "\n\n---\n ✅✅✅ API generation complete!"

frontend/src/AppRoutes/pageComponents.ts

@@ -194,6 +194,10 @@ export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );
 
+export const ForgotPassword = Loadable(
+	() => import(/* webpackChunkName: "ForgotPassword" */ 'pages/ForgotPassword'),
+);
+
 export const UnAuthorized = Loadable(
 	() => import(/* webpackChunkName: "UnAuthorized" */ 'pages/UnAuthorized'),
 );

frontend/src/AppRoutes/routes.ts

@@ -17,6 +17,7 @@ import {
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
+	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
 	InstalledIntegrations,
@@ -339,6 +340,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'LOGIN',
 	},
+	{
+		path: ROUTES.FORGOT_PASSWORD,
+		exact: true,
+		component: ForgotPassword,
+		isPrivate: false,
+		key: 'FORGOT_PASSWORD',
+	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
 		exact: true,

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -11,6 +11,7 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -32,7 +33,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload);
+		const response = await axios.post(`/variables/query`, payload, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -19,6 +19,7 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
+	abortSignal?: AbortSignal,
 ): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};
 
@@ -47,7 +48,10 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await axios.get('/fields/values', { params });
+		const response = await axios.get('/fields/values', {
+			params,
+			signal: abortSignal,
+		});
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

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

@@ -0,0 +1,222 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useQuery } from 'react-query';
+
+import { GeneratedAPIInstance } from '../../../index';
+import type {
+	GetFieldsKeys200,
+	GetFieldsKeysParams,
+	GetFieldsValues200,
+	GetFieldsValuesParams,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
+/**
+ * This endpoint returns field keys
+ * @summary Get field keys
+ */
+export const getFieldsKeys = (
+	params?: GetFieldsKeysParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetFieldsKeys200>({
+		url: `/api/v1/fields/keys`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetFieldsKeysQueryKey = (params?: GetFieldsKeysParams) => {
+	return ['getFieldsKeys', ...(params ? [params] : [])] as const;
+};
+
+export const getGetFieldsKeysQueryOptions = <
+	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
+	TError = RenderErrorResponseDTO
+>(
+	params?: GetFieldsKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getFieldsKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetFieldsKeysQueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getFieldsKeys>>> = ({
+		signal,
+	}) => getFieldsKeys(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getFieldsKeys>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetFieldsKeysQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getFieldsKeys>>
+>;
+export type GetFieldsKeysQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get field keys
+ */
+
+export function useGetFieldsKeys<
+	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
+	TError = RenderErrorResponseDTO
+>(
+	params?: GetFieldsKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getFieldsKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetFieldsKeysQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get field keys
+ */
+export const invalidateGetFieldsKeys = async (
+	queryClient: QueryClient,
+	params?: GetFieldsKeysParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetFieldsKeysQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint returns field values
+ * @summary Get field values
+ */
+export const getFieldsValues = (
+	params?: GetFieldsValuesParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetFieldsValues200>({
+		url: `/api/v1/fields/values`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetFieldsValuesQueryKey = (params?: GetFieldsValuesParams) => {
+	return ['getFieldsValues', ...(params ? [params] : [])] as const;
+};
+
+export const getGetFieldsValuesQueryOptions = <
+	TData = Awaited<ReturnType<typeof getFieldsValues>>,
+	TError = RenderErrorResponseDTO
+>(
+	params?: GetFieldsValuesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getFieldsValues>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetFieldsValuesQueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getFieldsValues>>> = ({
+		signal,
+	}) => getFieldsValues(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getFieldsValues>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetFieldsValuesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getFieldsValues>>
+>;
+export type GetFieldsValuesQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get field values
+ */
+
+export function useGetFieldsValues<
+	TData = Awaited<ReturnType<typeof getFieldsValues>>,
+	TError = RenderErrorResponseDTO
+>(
+	params?: GetFieldsValuesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getFieldsValues>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetFieldsValuesQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get field values
+ */
+export const invalidateGetFieldsValues = async (
+	queryClient: QueryClient,
+	params?: GetFieldsValuesParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetFieldsValuesQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -1049,7 +1049,7 @@ export interface Querybuildertypesv5OrderByKeyDTO {
 	/**
 	 * @type string
 	 */
-	name?: string;
+	name: string;
 	/**
 	 * @type string
 	 */
@@ -1141,6 +1141,79 @@ export interface RoletypesRoleDTO {
 	updatedAt?: Date;
 }
 
+/**
+ * @nullable
+ */
+export type TelemetrytypesGettableFieldKeysDTOKeys = {
+	[key: string]: TelemetrytypesTelemetryFieldKeyDTO[];
+} | null;
+
+export interface TelemetrytypesGettableFieldKeysDTO {
+	/**
+	 * @type boolean
+	 */
+	complete: boolean;
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	keys: TelemetrytypesGettableFieldKeysDTOKeys;
+}
+
+export interface TelemetrytypesGettableFieldValuesDTO {
+	/**
+	 * @type boolean
+	 */
+	complete: boolean;
+	values: TelemetrytypesTelemetryFieldValuesDTO;
+}
+
+export interface TelemetrytypesTelemetryFieldKeyDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	fieldContext?: string;
+	/**
+	 * @type string
+	 */
+	fieldDataType?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	signal?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export interface TelemetrytypesTelemetryFieldValuesDTO {
+	/**
+	 * @type array
+	 */
+	boolValues?: boolean[];
+	/**
+	 * @type array
+	 */
+	numberValues?: number[];
+	/**
+	 * @type array
+	 */
+	relatedValues?: string[];
+	/**
+	 * @type array
+	 */
+	stringValues?: string[];
+}
+
 export interface TypesChangePasswordRequestDTO {
 	/**
 	 * @type string
@@ -1588,6 +1661,132 @@ export type DeleteAuthDomainPathParameters = {
 export type UpdateAuthDomainPathParameters = {
 	id: string;
 };
+export type GetFieldsKeysParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	signal?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	source?: string;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	startUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	endUnixMilli?: number;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	fieldContext?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	fieldDataType?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	metricName?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	searchText?: string;
+};
+
+export type GetFieldsKeys200 = {
+	data?: TelemetrytypesGettableFieldKeysDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
+export type GetFieldsValuesParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	signal?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	source?: string;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	startUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	endUnixMilli?: number;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	fieldContext?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	fieldDataType?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	metricName?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	searchText?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	existingQuery?: string;
+};
+
+export type GetFieldsValues200 = {
+	data?: TelemetrytypesGettableFieldValuesDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
 export type GetResetPasswordTokenPathParameters = {
 	id: string;
 };

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sClustersListPayload {
 	filters: TagFilter;
@@ -64,41 +64,39 @@ export const getK8sClustersList = async (
 	props: K8sClustersListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/clusters/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sDaemonSetsListPayload {
 	filters: TagFilter;
@@ -71,42 +71,39 @@ export const getK8sDaemonSetsList = async (
 	props: K8sDaemonSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
 	try {
-		// filter prep (unchanged)…
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/daemonsets/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sDeploymentsListPayload {
 	filters: TagFilter;
@@ -71,41 +71,39 @@ export const getK8sDeploymentsList = async (
 	props: K8sDeploymentsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/deployments/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sJobsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sJobsListPayload {
 	filters: TagFilter;
@@ -71,41 +71,39 @@ export const getK8sJobsList = async (
 	props: K8sJobsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sJobsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/jobs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sNamespacesListPayload {
 	filters: TagFilter;
@@ -62,41 +62,39 @@ export const getK8sNamespacesList = async (
 	props: K8sNamespacesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/namespaces/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sNodesListPayload {
 	filters: TagFilter;
@@ -66,41 +66,39 @@ export const getK8sNodesList = async (
 	props: K8sNodesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/nodes/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sPodsListPayload {
 	filters: TagFilter;
@@ -102,41 +102,39 @@ export const getK8sPodsList = async (
 	props: K8sPodsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/pods/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sVolumesListPayload {
 	filters: TagFilter;
@@ -86,39 +86,37 @@ export const getK8sVolumesList = async (
 	props: K8sVolumesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sVolumesListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/pvcs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sStatefulSetsListPayload {
 	filters: TagFilter;
@@ -69,39 +69,37 @@ export const getK8sStatefulSetsList = async (
 	props: K8sStatefulSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-									} else {
-										acc.push(item);
-									}
+		const requestProps = Array.isArray(props.filters?.items)
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
+									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+			  }
+			: props;
 
 		const response = await axios.post('/statefulsets/list', requestProps, {
 			signal,

frontend/src/api/utils.ts

@@ -25,7 +25,7 @@ export const Logout = async (): Promise<void> => {
 	history.push(ROUTES.LOGIN);
 };
 
-export const UnderscoreToDotMap: Record<string, string> = {
+export const AttributeKeyMap: Record<string, string> = {
 	k8s_cluster_name: 'k8s.cluster.name',
 	k8s_cluster_uid: 'k8s.cluster.uid',
 	k8s_namespace_name: 'k8s.namespace.name',

frontend/src/auto-import-registry.d.ts

@@ -18,6 +18,7 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/resizable';

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -23,9 +23,6 @@ import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
-import { FeatureKeys } from '../../../constants/features';
-import { useAppContext } from '../../../providers/App/App';
-
 import './Metrics.styles.scss';
 
 interface MetricsTabProps {
@@ -50,11 +47,6 @@ function Metrics({
 	handleTimeChange,
 	isModalTimeSelection,
 }: MetricsTabProps): JSX.Element {
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const {
 		visibilities,
 		setElement,
@@ -69,14 +61,8 @@ function Metrics({
 	});
 
 	const queryPayloads = useMemo(
-		() =>
-			getHostQueryPayload(
-				hostName,
-				timeRange.startTime,
-				timeRange.endTime,
-				dotMetricsEnabled,
-			),
-		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
+		() => getHostQueryPayload(hostName, timeRange.startTime, timeRange.endTime),
+		[hostName, timeRange.startTime, timeRange.endTime],
 	);
 
 	const queries = useQueries(

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -73,6 +73,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
+	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -140,10 +141,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
 	// Define allOptionShown earlier in the code
-	const allOptionShown = useMemo(
-		() => value === ALL_SELECTED_VALUE || value === 'ALL',
-		[value],
-	);
+	const allOptionShown = value === ALL_SELECTED_VALUE;
 
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
@@ -1684,6 +1682,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
+						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -1701,7 +1700,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{errorMessage && !loading && (
+					{!loading && waitingMessage && (
+						<div className="navigation-loading">
+							<div className="navigation-icons">
+								<LoadingOutlined />
+							</div>
+							<div className="navigation-text" title={waitingMessage}>
+								{waitingMessage}
+							</div>
+						</div>
+					)}
+					{errorMessage && !loading && !waitingMessage && (
 						<div className="navigation-error">
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
@@ -1723,6 +1732,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
+						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -1765,6 +1775,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDarkMode,
 		isDynamicVariable,
 		showRetryButton,
+		waitingMessage,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -63,6 +63,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showRetryButton = true,
 	isDynamicVariable = false,
+	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -568,6 +569,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
+						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -583,6 +585,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
+					{!loading && waitingMessage && (
+						<div className="navigation-loading">
+							<div className="navigation-icons">
+								<LoadingOutlined />
+							</div>
+							<div className="navigation-text" title={waitingMessage}>
+								{waitingMessage}
+							</div>
+						</div>
+					)}
 					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
@@ -605,6 +617,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
+						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -641,6 +654,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		showRetryButton,
 		isDarkMode,
 		isDynamicVariable,
+		waitingMessage,
 	]);
 
 	// Handle dropdown visibility changes

frontend/src/components/NewSelect/types.ts

@@ -30,6 +30,7 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	showIncompleteDataMessage?: boolean;
 	showRetryButton?: boolean;
 	isDynamicVariable?: boolean;
+	waitingMessage?: string;
 }
 
 export interface CustomTagProps {
@@ -66,4 +67,5 @@ export interface CustomMultiSelectProps
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;
+	waitingMessage?: string;
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -648,7 +648,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											) : (
 												<Typography.Text
 													className="value-string"
-													ellipsis={{ tooltip: { placement: 'top' } }}
+													ellipsis={{
+														tooltip: {
+															placement: 'top',
+															mouseEnterDelay: 0.2,
+															mouseLeaveDelay: 0,
+														},
+													}}
 												>
 													{String(value)}
 												</Typography.Text>

frontend/src/constants/features.ts

@@ -8,5 +8,4 @@ export enum FeatureKeys {
 	PREMIUM_SUPPORT = 'premium_support',
 	ANOMALY_DETECTION = 'anomaly_detection',
 	ONBOARDING_V3 = 'onboarding_v3',
-	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 }

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
 	SIGN_UP: '/signup',
 	LOGIN: '/login',
+	FORGOT_PASSWORD: '/forgot-password',
 	HOME: '/home',
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',

frontend/src/container/AllError/index.tsx

@@ -41,8 +41,6 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { FeatureKeys } from '../../constants/features';
-import { useAppContext } from '../../providers/App/App';
 import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
@@ -415,11 +413,6 @@ function AllErrors(): JSX.Element {
 		},
 	];
 
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
 		(
 			paginations: TablePaginationConfig,
@@ -455,7 +448,7 @@ function AllErrors(): JSX.Element {
 	useEffect(() => {
 		if (!isUndefined(errorCountResponse.data?.payload)) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
+				(val) => val.tagKey === getResourceDeploymentKeys(),
 			)?.tagValue;
 
 			logEvent('Exception: List page visited', {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table, Typography } from 'antd';
+import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -14,11 +14,13 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
 import { get } from 'lodash-es';
+import { MoveUpRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import DOCLINKS from 'utils/docLinks';
 
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
@@ -125,51 +127,67 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			<Table
-				className={cx('api-monitoring-domain-list-table')}
-				dataSource={isFetching || isLoading ? [] : formattedDataForTable}
-				columns={columnsConfig}
-				loading={{
-					spinning: isFetching || isLoading,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-domains-message-container">
-								<div className="no-filtered-domains-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
+				<div className="no-filtered-domains-message-container">
+					<div className="no-filtered-domains-message-content">
+						<img
+							src="/Icons/emptyState.svg"
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>
 
-									<Typography.Text className="no-filtered-domains-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+						<div className="no-filtered-domains-message">
+							<div className="no-domain-title">
+								No External API calls detected with applied filters.
 							</div>
-						),
-				}}
-				scroll={{ x: true }}
-				tableLayout="fixed"
-				onRow={(record, index): { onClick: () => void; className: string } => ({
-					onClick: (): void => {
-						if (index !== undefined) {
-							const dataIndex = formattedDataForTable.findIndex(
-								(item) => item.key === record.key,
-							);
-							setSelectedDomainIndex(dataIndex);
-							setParams({ selectedDomain: record.domainName });
-							logEvent('API Monitoring: Domain name row clicked', {});
-						}
-					},
-					className: 'expanded-clickable-row',
-				})}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
-				}
-			/>
+							<div className="no-domain-subtitle">
+								Ensure all HTTP client spans are being sent with kind as{' '}
+								<span className="attribute">Client</span> and url set in{' '}
+								<span className="attribute">url.full</span> or{' '}
+								<span className="attribute">http.url</span> attribute.
+							</div>
+							<a
+								href={DOCLINKS.EXTERNAL_API_MONITORING}
+								target="_blank"
+								rel="noreferrer"
+								className="external-api-doc-link"
+							>
+								Learn how External API monitoring works in SigNoz{' '}
+								<MoveUpRight size={14} />
+							</a>
+						</div>
+					</div>
+				</div>
+			)}
+			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
+				<Table
+					className="api-monitoring-domain-list-table"
+					dataSource={isFetching || isLoading ? [] : formattedDataForTable}
+					columns={columnsConfig}
+					loading={{
+						spinning: isFetching || isLoading,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					scroll={{ x: true }}
+					tableLayout="fixed"
+					onRow={(record, index): { onClick: () => void; className: string } => ({
+						onClick: (): void => {
+							if (index !== undefined) {
+								const dataIndex = formattedDataForTable.findIndex(
+									(item) => item.key === record.key,
+								);
+								setSelectedDomainIndex(dataIndex);
+								setParams({ selectedDomain: record.domainName });
+								logEvent('API Monitoring: Domain name row clicked', {});
+							}
+						},
+						className: 'expanded-clickable-row',
+					})}
+					rowClassName={(_, index): string =>
+						index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+					}
+				/>
+			)}
 			{selectedDomainIndex !== -1 && (
 				<DomainDetails
 					domainData={formattedDataForTable[selectedDomainIndex]}

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -180,10 +180,59 @@
 
 	.no-filtered-domains-message {
 		margin-top: 8px;
+		display: flex;
+		gap: 8px;
+		flex-direction: column;
+
+		.no-domain-title {
+			color: var(--bg-vanilla-100, #fff);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+		}
+
+		.no-domain-subtitle {
+			color: var(--bg-vanilla-400, #c0c1c3);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+
+			.attribute {
+				font-family: 'Space Mono';
+			}
+		}
+
+		.external-api-doc-link {
+			display: flex;
+			flex-direction: row;
+			gap: 4px;
+			align-items: center;
+		}
 	}
 }
 
 .lightMode {
+	.no-filtered-domains-message-container {
+		.no-filtered-domains-message-content {
+			.no-filtered-domains-message {
+				.no-domain-title {
+					color: var(--text-ink-500);
+				}
+
+				.no-domain-subtitle {
+					color: var(--text-ink-400);
+
+					.attribute {
+						font-family: 'Space Mono';
+					}
+				}
+			}
+		}
+	}
 	.api-monitoring-domain-list-table {
 		.ant-table {
 			.ant-table-thead > tr > th {

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

@@ -18,8 +18,8 @@ import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynam
 import { getWidgetsHavingDynamicVariableAttribute } from 'hooks/dashboard/utils';
 import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
-import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
 import { isEmpty, map } from 'lodash-es';
 import {
 	ArrowLeft,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx

@@ -1,10 +1,11 @@
-import { memo, useMemo } from 'react';
-import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
-import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import { memo, useEffect, useMemo } from 'react';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { VariableItemProps } from './VariableItem';
+import { customVariableSelectStrategy } from './variableSelectStrategy/customVariableSelectStrategy';
 
 type CustomVariableInputProps = Pick<
 	VariableItemProps,
@@ -29,16 +30,31 @@ function CustomVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
+		strategy: customVariableSelectStrategy,
 	});
 
+	// Apply default on mount — options are available synchronously for custom variables
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(applyDefaultIfNeeded, []);
+
+	const selectOptions = useMemo(
+		() =>
+			optionsData.map((option) => ({
+				label: option.toString(),
+				value: option.toString(),
+			})),
+		[optionsData],
+	);
+
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={optionsData}
+			options={selectOptions}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -13,7 +13,6 @@ import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import DynamicVariableSelection from './DynamicVariableSelection';
 import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
@@ -153,14 +152,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 			{sortedVariablesArray.map((variable) => {
 				const key = `${variable.name}${variable.id}${variable.order}`;
 
-				return variable.type === 'DYNAMIC' ? (
-					<DynamicVariableSelection
-						key={key}
-						existingVariables={dashboardVariables}
-						variableData={variable}
-						onValueUpdate={onValueUpdate}
-					/>
-				) : (
+				return (
 					<VariableItem
 						key={key}
 						existingVariables={dashboardVariables}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -0,0 +1,343 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useDebounce from 'hooks/useDebounce';
+import { isEmpty } from 'lodash-es';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
+
+import SelectVariableInput from './SelectVariableInput';
+import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
+import { getOptionsForDynamicVariable } from './util';
+import { VariableItemProps } from './VariableItem';
+import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
+
+import './DashboardVariableSelection.styles.scss';
+
+type DynamicVariableInputProps = Pick<
+	VariableItemProps,
+	'variableData' | 'onValueUpdate' | 'existingVariables'
+>;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function DynamicVariableInput({
+	variableData,
+	onValueUpdate,
+	existingVariables,
+}: DynamicVariableInputProps): JSX.Element {
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
+
+	const [isComplete, setIsComplete] = useState<boolean>(false);
+
+	const [filteredOptionsData, setFilteredOptionsData] = useState<
+		(string | number | boolean)[]
+	>([]);
+
+	const [relatedValues, setRelatedValues] = useState<string[]>([]);
+	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
+		[],
+	);
+
+	// Track dropdown open state for auto-checking new values
+	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	// Build a memoized list of all currently available option strings (normalized + related)
+	const allAvailableOptionStrings = useMemo(
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
+		[optionsData, relatedValues],
+	);
+
+	const {
+		value,
+		tempSelection,
+		setTempSelection,
+		handleClear,
+		enableSelectAll,
+		defaultValue,
+		applyDefaultIfNeeded,
+		onChange,
+		onDropdownVisibleChange,
+	} = useDashboardVariableSelectHelper({
+		variableData,
+		optionsData,
+		onValueUpdate,
+		strategy: dynamicVariableSelectStrategy,
+		allAvailableOptionStrings,
+	});
+
+	// Create a dependency key from all dynamic variables
+	const dynamicVariablesKey = useMemo(() => {
+		if (!existingVariables) {
+			return 'no_variables';
+		}
+
+		const dynamicVars = Object.values(existingVariables)
+			.filter((v) => v.type === 'DYNAMIC')
+			.map(
+				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
+			)
+			.join('|');
+
+		return dynamicVars || 'no_dynamic_variables';
+	}, [existingVariables]);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// existing query is the query made from the other dynamic variables around this one with there current values
+	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const existingQuery = useMemo(() => {
+		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
+			return '';
+		}
+
+		const queryParts: string[] = [];
+
+		Object.entries(existingVariables).forEach(([, variable]) => {
+			// Skip the current variable being processed
+			if (variable.id === variableData.id) {
+				return;
+			}
+
+			// Only include dynamic variables that have selected values and are not selected as ALL
+			if (
+				variable.type === 'DYNAMIC' &&
+				variable.dynamicVariablesAttribute &&
+				variable.selectedValue &&
+				!isEmpty(variable.selectedValue) &&
+				(variable.showALLOption ? !variable.allSelected : true)
+			) {
+				const attribute = variable.dynamicVariablesAttribute;
+				const values = Array.isArray(variable.selectedValue)
+					? variable.selectedValue
+					: [variable.selectedValue];
+
+				// Filter out empty values and convert to strings
+				const validValues = values
+					.filter((val) => val !== null && val !== undefined && val !== '')
+					.map((val) => val.toString());
+
+				if (validValues.length > 0) {
+					// Format values for query - wrap strings in quotes, keep numbers as is
+					const formattedValues = validValues.map((val) => {
+						// Check if value is a number
+						const numValue = Number(val);
+						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+							return val; // Keep as number
+						}
+						// Escape single quotes and wrap in quotes
+						return `'${val.replace(/'/g, "\\'")}'`;
+					});
+
+					if (formattedValues.length === 1) {
+						queryParts.push(`${attribute} = ${formattedValues[0]}`);
+					} else {
+						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
+					}
+				}
+			}
+		});
+
+		return queryParts.join(' AND ');
+	}, [
+		existingVariables,
+		variableData.id,
+		variableData.dynamicVariablesAttribute,
+	]);
+
+	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
+	const handleSelectDropdownVisibilityChange = useCallback(
+		(visible: boolean): void => {
+			setIsDropdownOpen(visible);
+
+			onDropdownVisibleChange(visible);
+
+			if (!visible) {
+				setFilteredOptionsData(optionsData);
+				setRelatedValues(originalRelatedValues);
+				setApiSearchText('');
+			}
+		},
+		[onDropdownVisibleChange, optionsData, originalRelatedValues],
+	);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+			debouncedApiSearchText,
+			variableData.dynamicVariablesSource,
+			variableData.dynamicVariablesAttribute,
+		],
+		{
+			enabled:
+				variableData.type === 'DYNAMIC' &&
+				!!variableData.dynamicVariablesSource &&
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+					existingQuery,
+				),
+			onSuccess: (data) => {
+				const newNormalizedValues = data.data?.normalizedValues || [];
+				const newRelatedValues = data.data?.relatedValues || [];
+
+				if (!debouncedApiSearchText) {
+					setOptionsData(newNormalizedValues);
+					setIsComplete(data.data?.complete || false);
+				}
+				setFilteredOptionsData(newNormalizedValues);
+				setRelatedValues(newRelatedValues);
+				setOriginalRelatedValues(newRelatedValues);
+
+				// Only run auto-check logic when necessary to avoid performance issues
+				if (variableData.allSelected && isDropdownOpen) {
+					// Build the latest full list from API (normalized + related)
+					const latestValues = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					// Update temp selection to exactly reflect latest API values when ALL is active
+					const currentStrings = Array.isArray(tempSelection)
+						? tempSelection.map((v) => v.toString())
+						: tempSelection
+						? [tempSelection.toString()]
+						: [];
+					const areSame =
+						currentStrings.length === latestValues.length &&
+						latestValues.every((v) => currentStrings.includes(v));
+					if (!areSame) {
+						setTempSelection(latestValues);
+					}
+				}
+
+				// Apply default if no value is selected (e.g., new variable, first load)
+				if (!debouncedApiSearchText) {
+					const allNewOptions = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+					applyDefaultIfNeeded(allNewOptions);
+				}
+			},
+			onError: (error: any) => {
+				if (error) {
+					let message = SOMETHING_WENT_WRONG;
+					if (error?.message) {
+						message = error?.message;
+					} else {
+						message =
+							'Please make sure configuration is valid and you have required setup and permissions';
+					}
+					setErrorMessage(message);
+
+					// Check if error is retryable (5xx) or not (4xx)
+					const isRetryable = checkIfRetryableError(error);
+					setIsRetryableError(isRetryable);
+				}
+			},
+		},
+	);
+
+	const handleRetry = useCallback((): void => {
+		setErrorMessage(null);
+		setIsRetryableError(true);
+		refetch();
+	}, [refetch]);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					setRelatedValues(originalRelatedValues);
+					return;
+				}
+
+				const lowerText = text.toLowerCase();
+				setFilteredOptionsData(
+					optionsData.filter((option) =>
+						option.toString().toLowerCase().includes(lowerText),
+					),
+				);
+				setRelatedValues(
+					originalRelatedValues.filter((val) =>
+						val.toLowerCase().includes(lowerText),
+					),
+				);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData, originalRelatedValues],
+	);
+
+	const selectOptions = useMemo(
+		() =>
+			getOptionsForDynamicVariable(filteredOptionsData || [], relatedValues || []),
+		[filteredOptionsData, relatedValues],
+	);
+
+	return (
+		<SelectVariableInput
+			variableId={variableData.id}
+			options={selectOptions}
+			value={value}
+			onChange={onChange}
+			onDropdownVisibleChange={handleSelectDropdownVisibilityChange}
+			onClear={handleClear}
+			enableSelectAll={enableSelectAll}
+			defaultValue={defaultValue}
+			isMultiSelect={variableData.multiSelect}
+			// dynamic variable specific + API related props
+			loading={isLoading}
+			errorMessage={errorMessage}
+			onRetry={handleRetry}
+			isDynamicVariable
+			showRetryButton={isRetryableError}
+			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+			onSearch={handleSearch}
+		/>
+	);
+}
+
+export default memo(DynamicVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -1,602 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
-import { isEmpty, isUndefined } from 'lodash-es';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-import {
-	areArraysEqual,
-	getOptionsForDynamicVariable,
-	getSelectValue,
-	uniqueValues,
-} from './util';
-
-import './DashboardVariableSelection.styles.scss';
-
-interface DynamicVariableSelectionProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		arg1: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-}
-
-function DynamicVariableSelection({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableSelectionProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [relatedValues, setRelatedValues] = useState<string[]>([]);
-	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
-		[],
-	);
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	// Track dropdown open state for auto-checking new values
-	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) {
-			return 'no_variables';
-		}
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// existing query is the query made from the other dynamic variables around this one with there current values
-	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
-
-		const queryParts: string[] = [];
-
-		Object.entries(existingVariables).forEach(([, variable]) => {
-			// Skip the current variable being processed
-			if (variable.id === variableData.id) {
-				return;
-			}
-
-			// Only include dynamic variables that have selected values and are not selected as ALL
-			if (
-				variable.type === 'DYNAMIC' &&
-				variable.dynamicVariablesAttribute &&
-				variable.selectedValue &&
-				!isEmpty(variable.selectedValue) &&
-				(variable.showALLOption ? !variable.allSelected : true)
-			) {
-				const attribute = variable.dynamicVariablesAttribute;
-				const values = Array.isArray(variable.selectedValue)
-					? variable.selectedValue
-					: [variable.selectedValue];
-
-				// Filter out empty values and convert to strings
-				const validValues = values
-					.filter((value) => value !== null && value !== undefined && value !== '')
-					.map((value) => value.toString());
-
-				if (validValues.length > 0) {
-					// Format values for query - wrap strings in quotes, keep numbers as is
-					const formattedValues = validValues.map((value) => {
-						// Check if value is a number
-						const numValue = Number(value);
-						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-							return value; // Keep as number
-						}
-						// Escape single quotes and wrap in quotes
-						return `'${value.replace(/'/g, "\\'")}'`;
-					});
-
-					if (formattedValues.length === 1) {
-						queryParts.push(`${attribute} = ${formattedValues[0]}`);
-					} else {
-						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
-					}
-				}
-			}
-		});
-
-		return queryParts.join(' AND ');
-	}, [
-		existingVariables,
-		variableData.id,
-		variableData.dynamicVariablesAttribute,
-	]);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-			debouncedApiSearchText,
-		],
-		{
-			enabled: variableData.type === 'DYNAMIC',
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-					existingQuery,
-				),
-			onSuccess: (data) => {
-				const newNormalizedValues = data.data?.normalizedValues || [];
-				const newRelatedValues = data.data?.relatedValues || [];
-
-				if (!debouncedApiSearchText) {
-					setOptionsData(newNormalizedValues);
-					setIsComplete(data.data?.complete || false);
-				}
-				setFilteredOptionsData(newNormalizedValues);
-				setRelatedValues(newRelatedValues);
-				setOriginalRelatedValues(newRelatedValues);
-
-				// Only run auto-check logic when necessary to avoid performance issues
-				if (variableData.allSelected && isDropdownOpen) {
-					// Build the latest full list from API (normalized + related)
-					const latestValues = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					// Update temp selection to exactly reflect latest API values when ALL is active
-					const currentStrings = Array.isArray(tempSelection)
-						? tempSelection.map((v) => v.toString())
-						: tempSelection
-						? [tempSelection.toString()]
-						: [];
-					const areSame =
-						currentStrings.length === latestValues.length &&
-						latestValues.every((v) => currentStrings.includes(v));
-					if (!areSame) {
-						setTempSelection(latestValues);
-					}
-				}
-			},
-			onError: (error: any) => {
-				if (error) {
-					let message = SOMETHING_WENT_WRONG;
-					if (error?.message) {
-						message = error?.message;
-					} else {
-						message =
-							'Please make sure configuration is valid and you have required setup and permissions';
-					}
-					setErrorMessage(message);
-
-					// Check if error is retryable (5xx) or not (4xx)
-					const isRetryable = checkIfRetryableError(error);
-					setIsRetryableError(isRetryable);
-				}
-			},
-		},
-	);
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					// For ALL selection in dynamic variables, pass null to avoid storing values
-					// The parent component will handle this appropriately
-					onValueUpdate(variableData.name, variableData.id, null, true);
-				} else {
-					// Build union of available options shown in dropdown (normalized + related)
-					const allAvailableOptionStrings = [
-						...new Set([
-							...optionsData.map((v) => v.toString()),
-							...relatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					const haveCustomValuesSelected =
-						Array.isArray(value) &&
-						!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
-
-					onValueUpdate(
-						variableData.name,
-						variableData.id,
-						value,
-						allAvailableOptionStrings.every((v) => value.includes(v.toString())),
-						haveCustomValuesSelected,
-					);
-				}
-			}
-		},
-		[variableData, onValueUpdate, optionsData, relatedValues],
-	);
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesSource &&
-			variableData.dynamicVariablesAttribute
-		) {
-			refetch();
-		}
-	}, [
-		refetch,
-		variableData.dynamicVariablesSource,
-		variableData.dynamicVariablesAttribute,
-		debouncedApiSearchText,
-	]);
-
-	// Build a memoized list of all currently available option strings (normalized + related)
-	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
-		[optionsData, relatedValues],
-	);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					setRelatedValues(originalRelatedValues);
-					return;
-				}
-
-				const localFilteredOptionsData: (string | number | boolean)[] = [];
-				optionsData.forEach((option) => {
-					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
-						localFilteredOptionsData.push(option);
-					}
-				});
-				setFilteredOptionsData(localFilteredOptionsData);
-				setRelatedValues(
-					originalRelatedValues.filter((value) =>
-						value.toLowerCase().includes(text.toLowerCase()),
-					),
-				);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData, originalRelatedValues],
-	);
-
-	const { selectedValue } = variableData;
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
-			: selectedValueStringified;
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = useCallback(
-		(inputValue: string | string[]): void => {
-			// Store the selection in temporary state while dropdown is open
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			const sanitizedValue = uniqueValues(value);
-			setTempSelection(sanitizedValue);
-		},
-		[variableData.multiSelect],
-	);
-
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Update dropdown open state for auto-checking
-		setIsDropdownOpen(visible);
-
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
-				// When ALL is selected, set selection to exactly the latest available values
-				const latestAll = [...allAvailableOptionStrings];
-				setTempSelection(latestAll);
-			} else {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-			}
-		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Only call handleChange if there's actually a change in the selection
-			const currentValue = variableData.selectedValue;
-
-			// Helper function to check if arrays have the same elements regardless of order
-			const areArraysEqualIgnoreOrder = (a: any[], b: any[]): boolean => {
-				if (a.length !== b.length) {
-					return false;
-				}
-				const sortedA = [...a].sort();
-				const sortedB = [...b].sort();
-				return areArraysEqual(sortedA, sortedB);
-			};
-
-			// If ALL was selected before and remains ALL after, skip updating
-			const wasAllSelected = enableSelectAll && variableData.allSelected;
-			const isAllSelectedAfter =
-				enableSelectAll &&
-				Array.isArray(tempSelection) &&
-				tempSelection.length === allAvailableOptionStrings.length &&
-				allAvailableOptionStrings.every((v) => tempSelection.includes(v));
-
-			if (wasAllSelected && isAllSelectedAfter) {
-				setTempSelection(undefined);
-				return;
-			}
-
-			const hasChanged =
-				tempSelection !== currentValue &&
-				!(
-					Array.isArray(tempSelection) &&
-					Array.isArray(currentValue) &&
-					areArraysEqualIgnoreOrder(tempSelection, currentValue)
-				);
-
-			if (hasChanged) {
-				handleChange(tempSelection);
-			}
-			setTempSelection(undefined);
-		}
-
-		// Always reset filtered data when dropdown closes, regardless of tempSelection state
-		if (!visible) {
-			setFilteredOptionsData(optionsData);
-			setRelatedValues(originalRelatedValues);
-			setApiSearchText('');
-		}
-	};
-
-	useEffect(
-		() => (): void => {
-			// Cleanup on unmount
-			setTempSelection(undefined);
-			setFilteredOptionsData([]);
-			setRelatedValues([]);
-			setApiSearchText('');
-		},
-		[],
-	);
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else if (variableData.allSelected) {
-						// If ALL is selected but no stored values, derive from available options
-						// This handles the case where we don't store values in localStorage for ALL
-						value = allAvailableOptionStrings;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		variableData.allSelected,
-		selectedValue,
-		tempSelection,
-		optionsData,
-		allAvailableOptionStrings,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
-
-	return (
-		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
-				${variableData.name}
-				{variableData.description && (
-					<Tooltip title={variableData.description}>
-						<InfoCircleOutlined className="info-icon" />
-					</Tooltip>
-				)}
-			</Typography.Text>
-			<div className="variable-value">
-				{variableData.multiSelect ? (
-					<CustomMultiSelect
-						key={variableData.id}
-						options={getOptionsForDynamicVariable(
-							filteredOptionsData || [],
-							relatedValues || [],
-						)}
-						defaultValue={variableData.defaultValue}
-						onChange={handleTempChange}
-						bordered={false}
-						placeholder="Select value"
-						placement="bottomLeft"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						maxTagCount={2}
-						getPopupContainer={popupContainer}
-						value={
-							(tempSelection || selectValue) === ALL_SELECT_VALUE
-								? 'ALL'
-								: tempSelection || selectValue
-						}
-						onDropdownVisibleChange={handleDropdownVisibleChange}
-						errorMessage={errorMessage}
-						// eslint-disable-next-line react/no-unstable-nested-components
-						maxTagPlaceholder={(omittedValues): JSX.Element => {
-							const maxDisplayValues = 10;
-							const valuesToShow = omittedValues.slice(0, maxDisplayValues);
-							const hasMore = omittedValues.length > maxDisplayValues;
-							const tooltipText =
-								valuesToShow.map(({ value }) => value).join(', ') +
-								(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
-
-							return (
-								<Tooltip title={tooltipText}>
-									<span>+ {omittedValues.length} </span>
-								</Tooltip>
-							);
-						}}
-						onClear={(): void => {
-							handleChange([]);
-						}}
-						enableAllSelection={enableSelectAll}
-						maxTagTextLength={30}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							setErrorMessage(null);
-							setIsRetryableError(true);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-						isDynamicVariable
-						showRetryButton={isRetryableError}
-					/>
-				) : (
-					<CustomSelect
-						key={variableData.id}
-						onChange={handleChange}
-						bordered={false}
-						placeholder="Select value"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						getPopupContainer={popupContainer}
-						options={getOptionsForDynamicVariable(
-							filteredOptionsData || [],
-							relatedValues || [],
-						)}
-						value={selectValue}
-						defaultValue={variableData.defaultValue}
-						errorMessage={errorMessage}
-						onSearch={handleSearch}
-						// eslint-disable-next-line sonarjs/no-identical-functions
-						onRetry={(): void => {
-							setErrorMessage(null);
-							setIsRetryableError(true);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-						isDynamicVariable
-						showRetryButton={isRetryableError}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DynamicVariableSelection;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -1,13 +1,11 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
 import { isArray, isString } from 'lodash-es';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -15,20 +13,18 @@ import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { areArraysEqual, checkAPIInvocation } from './util';
+import { VariableItemProps } from './VariableItem';
+import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
-interface QueryVariableInputProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
-	dependencyData: IDependencyData | null;
-}
+type QueryVariableInputProps = Pick<
+	VariableItemProps,
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
+>;
 
 function QueryVariableInput({
 	variableData,
@@ -56,13 +52,15 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
+		strategy: queryVariableSelectStrategy,
 	});
 
-	const validVariableUpdate = (): boolean => {
+	const validVariableUpdate = useCallback((): boolean => {
 		if (!variableData.name) {
 			return false;
 		}
@@ -70,86 +68,100 @@ function QueryVariableInput({
 			variablesToGetUpdated.length &&
 				variablesToGetUpdated[0] === variableData.name,
 		);
-	};
+	}, [variableData.name, variablesToGetUpdated]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const getOptions = (variablesRes: VariableResponseProps | null): void => {
-		try {
-			setErrorMessage(null);
+	const getOptions = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+		(variablesRes: VariableResponseProps | null): void => {
+			try {
+				setErrorMessage(null);
 
-			if (
-				variablesRes?.variableValues &&
-				Array.isArray(variablesRes?.variableValues)
-			) {
-				const newOptionsData = sortValues(
-					variablesRes?.variableValues,
-					variableData.sort,
-				);
+				if (
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
+				) {
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
+					);
 
-				const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
 
-				if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-					let valueNotInList = false;
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						let valueNotInList = false;
 
-					if (isArray(variableData.selectedValue)) {
-						variableData.selectedValue.forEach((val) => {
-							if (!newOptionsData.includes(val)) {
-								valueNotInList = true;
-							}
-						});
-					} else if (
-						isString(variableData.selectedValue) &&
-						!newOptionsData.includes(variableData.selectedValue)
-					) {
-						valueNotInList = true;
-					}
-
-					// variablesData.allSelected is added for the case where on change of options we need to update the
-					// local storage
-					if (
-						variableData.name &&
-						(validVariableUpdate() || valueNotInList || variableData.allSelected)
-					) {
-						if (
-							variableData.allSelected &&
-							variableData.multiSelect &&
-							variableData.showALLOption
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								if (!newOptionsData.includes(val)) {
+									valueNotInList = true;
+								}
+							});
+						} else if (
+							isString(variableData.selectedValue) &&
+							!newOptionsData.includes(variableData.selectedValue)
 						) {
-							onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+							valueNotInList = true;
+						}
 
-							// Update tempSelection to maintain ALL state when dropdown is open
-							if (tempSelection !== undefined) {
-								setTempSelection(newOptionsData.map((option) => option.toString()));
-							}
-						} else {
-							const value = variableData.selectedValue;
-							let allSelected = false;
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
+							if (
+								variableData.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
 
-							if (variableData.multiSelect) {
-								const { selectedValue } = variableData;
-								allSelected =
-									newOptionsData.length > 0 &&
-									Array.isArray(selectedValue) &&
-									newOptionsData.every((option) => selectedValue.includes(option));
-							}
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;
 
-							if (variableData.name && variableData.id) {
-								onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (variableData.name && variableData.id) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
 							}
 						}
-					}
 
-					setOptionsData(newOptionsData);
-				} else {
-					setVariablesToGetUpdated((prev) =>
-						prev.filter((name) => name !== variableData.name),
-					);
+						setOptionsData(newOptionsData);
+						// Apply default if no value is selected (e.g., new variable, first load)
+						applyDefaultIfNeeded(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
+					}
 				}
+			} catch (e) {
+				console.error(e);
 			}
-		} catch (e) {
-			console.error(e);
-		}
-	};
+		},
+		[
+			variableData,
+			optionsData,
+			onValueUpdate,
+			tempSelection,
+			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
+			applyDefaultIfNeeded,
+		],
+	);
 
 	const { isLoading, refetch } = useQuery(
 		[
@@ -162,7 +174,6 @@ function QueryVariableInput({
 		{
 			enabled:
 				variableData &&
-				variableData.type === 'QUERY' &&
 				checkAPIInvocation(
 					variablesToGetUpdated,
 					variableData,
@@ -207,10 +218,19 @@ function QueryVariableInput({
 		refetch();
 	}, [refetch]);
 
+	const selectOptions = useMemo(
+		() =>
+			optionsData.map((option) => ({
+				label: option.toString(),
+				value: option.toString(),
+			})),
+		[optionsData],
+	);
+
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={optionsData}
+			options={selectOptions}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -3,6 +3,7 @@ import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
 import { Popover, Tooltip, Typography } from 'antd';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { OptionData } from 'components/NewSelect/types';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ALL_SELECT_VALUE } from '../utils';
@@ -12,7 +13,7 @@ const errorIconStyle = { margin: '0 0.5rem' };
 
 interface SelectVariableInputProps {
 	variableId: string;
-	options: (string | number | boolean)[];
+	options: OptionData[];
 	value: string | string[] | undefined;
 	enableSelectAll: boolean;
 	isMultiSelect: boolean;
@@ -23,13 +24,17 @@ interface SelectVariableInputProps {
 	loading?: boolean;
 	errorMessage?: string | null;
 	onRetry?: () => void;
+	isDynamicVariable?: boolean;
+	showRetryButton?: boolean;
+	showIncompleteDataMessage?: boolean;
+	onSearch?: (searchTerm: string) => void;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
 
-function maxTagPlaceholder(
+export const renderMaxTagPlaceholder = (
 	omittedValues: { label?: React.ReactNode; value?: string | number }[],
-): JSX.Element {
+): JSX.Element => {
 	const valuesToShow = omittedValues.slice(0, MAX_TAG_DISPLAY_VALUES);
 	const hasMore = omittedValues.length > MAX_TAG_DISPLAY_VALUES;
 	const tooltipText =
@@ -41,7 +46,7 @@ function maxTagPlaceholder(
 			<span>+ {omittedValues.length} </span>
 		</Tooltip>
 	);
-}
+};
 
 function SelectVariableInput({
 	variableId,
@@ -56,16 +61,11 @@ function SelectVariableInput({
 	enableSelectAll,
 	isMultiSelect,
 	defaultValue,
+	isDynamicVariable,
+	showRetryButton,
+	showIncompleteDataMessage,
+	onSearch,
 }: SelectVariableInputProps): JSX.Element {
-	const selectOptions = useMemo(
-		() =>
-			options.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[options],
-	);
-
 	const commonProps = useMemo(
 		() => ({
 			// main props
@@ -82,23 +82,33 @@ function SelectVariableInput({
 			showSearch: true,
 			bordered: false,
 
-			// dynamic props
+			// changing props
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
-			options: selectOptions,
+			options,
 			errorMessage,
 			onRetry,
+
+			// dynamic variable only props
+			isDynamicVariable,
+			showRetryButton,
+			showIncompleteDataMessage,
+			onSearch,
 		}),
 		[
 			variableId,
 			defaultValue,
 			onChange,
 			loading,
-			selectOptions,
+			options,
 			value,
 			errorMessage,
 			onRetry,
+			isDynamicVariable,
+			showRetryButton,
+			showIncompleteDataMessage,
+			onSearch,
 		],
 	);
 
@@ -110,11 +120,11 @@ function SelectVariableInput({
 					placement="bottomLeft"
 					maxTagCount={2}
 					onDropdownVisibleChange={onDropdownVisibleChange}
-					maxTagPlaceholder={maxTagPlaceholder}
+					maxTagPlaceholder={renderMaxTagPlaceholder}
 					onClear={onClear}
 					enableAllSelection={enableSelectAll}
 					maxTagTextLength={30}
-					allowClear={value !== ALL_SELECT_VALUE && value !== 'ALL'}
+					allowClear={value !== ALL_SELECT_VALUE}
 				/>
 			) : (
 				<CustomSelect {...commonProps} />

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -5,6 +5,7 @@ import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/da
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
+import DynamicVariableInput from './DynamicVariableInput';
 import QueryVariableInput from './QueryVariableInput';
 import TextboxVariableInput from './TextboxVariableInput';
 
@@ -16,8 +17,9 @@ export interface VariableItemProps {
 	onValueUpdate: (
 		name: string,
 		id: string,
-		arg1: IDashboardVariable['selectedValue'],
+		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
 	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
@@ -68,6 +70,13 @@ function VariableItem({
 						dependencyData={dependencyData}
 					/>
 				)}
+				{variableType === 'DYNAMIC' && (
+					<DynamicVariableInput
+						variableData={variableData}
+						onValueUpdate={onValueUpdate}
+						existingVariables={existingVariables}
+					/>
+				)}
 			</div>
 		</div>
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DynamicVariableInput.test.tsx

@@ -5,7 +5,7 @@ import * as ReactRedux from 'react-redux';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import DynamicVariableSelection from '../DynamicVariableSelection';
+import DynamicVariableInput from '../DynamicVariableInput';
 
 // Don't mock the components - use real ones
 
@@ -54,7 +54,7 @@ const mockApiResponse = {
 // Mock scrollIntoView since it's not available in JSDOM
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
-describe('DynamicVariableSelection Component', () => {
+describe('DynamicVariableInput Component', () => {
 	const mockOnValueUpdate = jest.fn();
 
 	const mockDynamicVariableData: IDashboardVariable = {
@@ -108,18 +108,13 @@ describe('DynamicVariableSelection Component', () => {
 
 	it('renders with single select variable correctly', () => {
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
-		// Verify component renders correctly
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
 		// Verify the selected value is displayed
 		const selectedItem = screen.getByRole('combobox');
 		expect(selectedItem).toBeInTheDocument();
@@ -136,18 +131,13 @@ describe('DynamicVariableSelection Component', () => {
 		};
 
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={multiSelectWithAllSelected}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
-		// Verify variable name is rendered
-		expect(
-			screen.getByText(`$${multiSelectWithAllSelected.name}`),
-		).toBeInTheDocument();
-
 		// In ALL selected mode, there should be an "ALL" text element
 		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
@@ -164,18 +154,13 @@ describe('DynamicVariableSelection Component', () => {
 		});
 
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
-		// Verify component renders in loading state
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
 		// Open dropdown to see loading text
 		const selectElement = screen.getByRole('combobox');
 		fireEvent.mouseDown(selectElement);
@@ -199,18 +184,13 @@ describe('DynamicVariableSelection Component', () => {
 		});
 
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
-		// Verify the component renders
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
 		// For error states, we should check that error handling is in place
 		// Without opening the dropdown as the error message might be handled differently
 		expect(ReactQuery.useQuery).toHaveBeenCalled();
@@ -219,7 +199,7 @@ describe('DynamicVariableSelection Component', () => {
 
 	it('makes API call to fetch variable values', () => {
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
@@ -235,6 +215,8 @@ describe('DynamicVariableSelection Component', () => {
 				'2023-01-01T00:00:00Z', // minTime from useSelector mock
 				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
 				'',
+				'Traces',
+				'service.name',
 			],
 			expect.objectContaining({
 				enabled: true, // Type is 'DYNAMIC'
@@ -255,16 +237,13 @@ describe('DynamicVariableSelection Component', () => {
 		};
 
 		render(
-			<DynamicVariableSelection
+			<DynamicVariableInput
 				variableData={customVariable}
 				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
-		// Verify the component correctly displays the selected value
-		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
-
 		// Find the selection item in the component using data-testid
 		const selectElement = screen.getByTestId('variable-select');
 		expect(selectElement).toBeInTheDocument();

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -63,10 +63,10 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(screen.getByText('option1')).toBeInTheDocument();
+			expect(await screen.findByText('option1')).toBeInTheDocument();
 		});
 
-		test('should show placeholder when no previous and no default', async () => {
+		test('should auto-select first option when no previous and no default', async () => {
 			const variable: IDashboardVariable = {
 				id: TEST_VARIABLE_ID,
 				name: TEST_VARIABLE_NAME,
@@ -85,7 +85,8 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(screen.getByText('Select value')).toBeInTheDocument();
+			// With the new variable select strategy, the first option is auto-selected
+			expect(await screen.findByText('option1')).toBeInTheDocument();
 		});
 	});
 
@@ -110,7 +111,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(screen.getByText('ALL')).toBeInTheDocument();
+			expect(await screen.findByText('ALL')).toBeInTheDocument();
 		});
 	});
 
@@ -134,7 +135,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(screen.getByText('Select value')).toBeInTheDocument();
+			expect(await screen.findByText('Select value')).toBeInTheDocument();
 		});
 	});
 });

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -1,8 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash-es';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
+import { ALL_SELECT_VALUE } from '../utils';
 import { areArraysEqual, getSelectValue } from './util';
+import { VariableSelectStrategy } from './variableSelectStrategy/variableSelectStrategyTypes';
+import {
+	areArraysEqualIgnoreOrder,
+	uniqueValues,
+} from './variableSelectStrategy/variableSelectStrategyUtils';
 
 interface UseDashboardVariableSelectHelperParams {
 	variableData: IDashboardVariable;
@@ -12,7 +18,11 @@ interface UseDashboardVariableSelectHelperParams {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
 	) => void;
+	strategy: VariableSelectStrategy;
+	/** Override for all available option strings (default: optionsData.map(String)) */
+	allAvailableOptionStrings?: string[];
 }
 
 interface UseDashboardVariableSelectHelperReturn {
@@ -31,6 +41,11 @@ interface UseDashboardVariableSelectHelperReturn {
 	onChange: (value: string | string[]) => void;
 	onDropdownVisibleChange: (visible: boolean) => void;
 	handleClear: () => void;
+
+	// Default value helpers
+	applyDefaultIfNeeded: (
+		overrideOptions?: (string | number | boolean)[],
+	) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -38,6 +53,8 @@ export function useDashboardVariableSelectHelper({
 	variableData,
 	optionsData,
 	onValueUpdate,
+	strategy,
+	allAvailableOptionStrings,
 }: UseDashboardVariableSelectHelperParams): UseDashboardVariableSelectHelperReturn {
 	const { selectedValue } = variableData;
 
@@ -52,11 +69,37 @@ export function useDashboardVariableSelectHelper({
 
 	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
 
+	const effectiveAllAvailableOptionStrings = useMemo(
+		() => allAvailableOptionStrings ?? optionsData.map((v) => v.toString()),
+		[allAvailableOptionStrings, optionsData],
+	);
+
 	const selectValue =
 		variableData.allSelected && enableSelectAll
-			? 'ALL'
+			? ALL_SELECT_VALUE
 			: selectedValueStringified;
 
+	const getDefaultValue = useCallback(
+		(overrideOptions?: (string | number | boolean)[]) => {
+			const options = overrideOptions || optionsData;
+			if (variableData.multiSelect) {
+				if (variableData.showALLOption) {
+					return variableData.defaultValue || options.map((o) => o.toString());
+				}
+				return variableData.defaultValue || options?.[0]?.toString();
+			}
+			return variableData.defaultValue || options[0]?.toString();
+		},
+		[
+			variableData.multiSelect,
+			variableData.showALLOption,
+			variableData.defaultValue,
+			optionsData,
+		],
+	);
+
+	const defaultValue = useMemo(() => getDefaultValue(), [getDefaultValue]);
+
 	const handleChange = useCallback(
 		(inputValue: string | string[]): void => {
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
@@ -69,29 +112,21 @@ export function useDashboardVariableSelectHelper({
 			) {
 				return;
 			}
-			if (variableData.name) {
-				// Check if ALL is effectively selected by comparing with available options
-				const isAllSelected =
-					Array.isArray(value) &&
-					value.length > 0 &&
-					optionsData.every((option) => value.includes(option.toString()));
 
-				if (isAllSelected && variableData.showALLOption) {
-					// For ALL selection, pass optionsData as the value and set allSelected to true
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
+			strategy.handleChange({
+				value,
+				variableData,
+				optionsData,
+				allAvailableOptionStrings: effectiveAllAvailableOptionStrings,
+				onValueUpdate,
+			});
 		},
 		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			variableData.showALLOption,
-			onValueUpdate,
+			variableData,
 			optionsData,
+			effectiveAllAvailableOptionStrings,
+			onValueUpdate,
+			strategy,
 		],
 	);
 
@@ -99,79 +134,96 @@ export function useDashboardVariableSelectHelper({
 		(inputValue: string | string[]): void => {
 			// Store the selection in temporary state while dropdown is open
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			setTempSelection(value);
+			setTempSelection(uniqueValues(value));
 		},
 		[variableData.multiSelect],
 	);
 
-	// Apply default value on first render if no selection exists
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
+	// Single select onChange: apply default if value is empty
+	const handleSingleSelectChange = useCallback(
+		(inputValue: string | string[]): void => {
+			if (isEmpty(inputValue)) {
+				if (defaultValue !== undefined) {
+					handleChange(defaultValue as string | string[]);
 				}
+				return;
 			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	// Apply default values when needed
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
+			handleChange(inputValue);
+		},
+		[handleChange, defaultValue],
+	);
 
 	// Handle dropdown visibility changes
 	const onDropdownVisibleChange = useCallback(
 		(visible: boolean): void => {
 			// Initialize temp selection when opening dropdown
 			if (visible) {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+				if (variableData.allSelected && enableSelectAll) {
+					// When ALL is selected, show all available options as individually checked
+					setTempSelection([...effectiveAllAvailableOptionStrings]);
+				} else {
+					setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+				}
 			}
 			// Apply changes when closing dropdown
 			else if (!visible && tempSelection !== undefined) {
-				// Call handleChange with the temporarily stored selection
-				handleChange(tempSelection);
+				// If ALL was selected before AND all options remain selected, skip updating
+				const wasAllSelected = enableSelectAll && variableData.allSelected;
+				const isAllSelectedAfter =
+					enableSelectAll &&
+					Array.isArray(tempSelection) &&
+					tempSelection.length === effectiveAllAvailableOptionStrings.length &&
+					effectiveAllAvailableOptionStrings.every((v) => tempSelection.includes(v));
+
+				if (wasAllSelected && isAllSelectedAfter) {
+					setTempSelection(undefined);
+					return;
+				}
+
+				// Apply default if closing with empty selection
+				let valueToApply = tempSelection;
+				if (isEmpty(tempSelection) && defaultValue !== undefined) {
+					valueToApply = defaultValue as string | string[];
+				}
+
+				// Order-agnostic change detection
+				const currentValue = variableData.selectedValue;
+				const hasChanged =
+					valueToApply !== currentValue &&
+					!(
+						Array.isArray(valueToApply) &&
+						Array.isArray(currentValue) &&
+						areArraysEqualIgnoreOrder(valueToApply, currentValue)
+					);
+
+				if (hasChanged) {
+					handleChange(valueToApply);
+				}
 				setTempSelection(undefined);
 			}
 		},
-		[variableData, tempSelection, handleChange],
+		[
+			variableData,
+			enableSelectAll,
+			effectiveAllAvailableOptionStrings,
+			tempSelection,
+			handleChange,
+			defaultValue,
+		],
+	);
+
+	// Explicit function for callers to apply default on mount / data load
+	// Pass overrideOptions when freshly-loaded options aren't in state yet (async callers)
+	const applyDefaultIfNeeded = useCallback(
+		(overrideOptions?: (string | number | boolean)[]): void => {
+			if (isEmpty(selectValue)) {
+				const defaultValueFromOptions = getDefaultValue(overrideOptions);
+				if (defaultValueFromOptions !== undefined) {
+					handleChange(defaultValueFromOptions as string | string[]);
+				}
+			}
+		},
+		[selectValue, handleChange, getDefaultValue],
 	);
 
 	const handleClear = useCallback((): void => {
@@ -182,11 +234,9 @@ export function useDashboardVariableSelectHelper({
 		? tempSelection || selectValue
 		: selectValue;
 
-	const defaultValue = variableData.defaultValue || selectValue;
-
 	const onChange = useMemo(() => {
-		return variableData.multiSelect ? handleTempChange : handleChange;
-	}, [variableData.multiSelect, handleTempChange, handleChange]);
+		return variableData.multiSelect ? handleTempChange : handleSingleSelectChange;
+	}, [variableData.multiSelect, handleTempChange, handleSingleSelectChange]);
 
 	return {
 		tempSelection,
@@ -197,5 +247,6 @@ export function useDashboardVariableSelectHelper({
 		value,
 		defaultValue,
 		onChange,
+		applyDefaultIfNeeded,
 	};
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -363,25 +363,6 @@ export const uniqueOptions = (options: OptionData[]): OptionData[] => {
 	return uniqueOptions;
 };
 
-export const uniqueValues = (values: string[] | string): string[] | string => {
-	if (Array.isArray(values)) {
-		const uniqueValues: string[] = [];
-		const seenValues = new Set<string>();
-
-		values.forEach((value) => {
-			if (seenValues.has(value)) {
-				return;
-			}
-			seenValues.add(value);
-			uniqueValues.push(value);
-		});
-
-		return uniqueValues;
-	}
-
-	return values;
-};
-
 export const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx

@@ -0,0 +1,4 @@
+import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const customVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx

@@ -0,0 +1,20 @@
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const defaultVariableSelectStrategy: VariableSelectStrategy = {
+	handleChange({ value, variableData, optionsData, onValueUpdate }) {
+		if (!variableData.name) {
+			return;
+		}
+
+		const isAllSelected =
+			Array.isArray(value) &&
+			value.length > 0 &&
+			optionsData.every((option) => value.includes(option.toString()));
+
+		if (isAllSelected && variableData.showALLOption) {
+			onValueUpdate(variableData.name, variableData.id, optionsData, true);
+		} else {
+			onValueUpdate(variableData.name, variableData.id, value, false);
+		}
+	},
+};

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx

@@ -0,0 +1,37 @@
+import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
+
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const dynamicVariableSelectStrategy: VariableSelectStrategy = {
+	handleChange({
+		value,
+		variableData,
+		allAvailableOptionStrings,
+		onValueUpdate,
+	}) {
+		if (!variableData.name) {
+			return;
+		}
+
+		if (
+			value === ALL_SELECT_VALUE ||
+			(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+		) {
+			onValueUpdate(variableData.name, variableData.id, null, true);
+		} else {
+			// For ALL selection in dynamic variables, pass null to avoid storing values
+			// The parent component will handle this appropriately
+			const haveCustomValuesSelected =
+				Array.isArray(value) &&
+				!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
+
+			onValueUpdate(
+				variableData.name,
+				variableData.id,
+				value,
+				allAvailableOptionStrings.every((v) => value.includes(v.toString())),
+				haveCustomValuesSelected,
+			);
+		}
+	},
+};

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx

@@ -0,0 +1,4 @@
+import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const queryVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -0,0 +1,17 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export interface VariableSelectStrategy {
+	handleChange(params: {
+		value: string | string[];
+		variableData: IDashboardVariable;
+		optionsData: (string | number | boolean)[];
+		allAvailableOptionStrings: string[];
+		onValueUpdate: (
+			name: string,
+			id: string,
+			value: IDashboardVariable['selectedValue'],
+			allSelected: boolean,
+			haveCustomValuesSelected?: boolean,
+		) => void;
+	}): void;
+}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts

@@ -0,0 +1,32 @@
+import { isEqual } from 'lodash-es';
+
+export const areArraysEqualIgnoreOrder = (
+	a: (string | number | boolean)[],
+	b: (string | number | boolean)[],
+): boolean => {
+	if (a.length !== b.length) {
+		return false;
+	}
+	const sortedA = [...a].sort();
+	const sortedB = [...b].sort();
+	return isEqual(sortedA, sortedB);
+};
+
+export const uniqueValues = (values: string[] | string): string[] | string => {
+	if (Array.isArray(values)) {
+		const uniqueValues: string[] = [];
+		const seenValues = new Set<string>();
+
+		values.forEach((value) => {
+			if (seenValues.has(value)) {
+				return;
+			}
+			seenValues.add(value);
+			uniqueValues.push(value);
+		});
+
+		return uniqueValues;
+	}
+
+	return values;
+};

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import * as ReactRedux from 'react-redux';
 import {
 	act,
@@ -15,13 +15,22 @@ import {
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import DynamicVariableSelection from '../DashboardVariablesSelection/DynamicVariableSelection';
+import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
 
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
 }));
 
+// Mock useQuery from react-query
+jest.mock('react-query', () => {
+	const originalModule = jest.requireActual('react-query');
+	return {
+		...originalModule,
+		useQuery: jest.fn(),
+	};
+});
+
 describe('Dynamic Variable Default Behavior', () => {
 	const mockOnValueUpdate = jest.fn();
 	const mockApiResponse = {
@@ -59,6 +68,46 @@ describe('Dynamic Variable Default Behavior', () => {
 		// Mock getFieldValues API to return our test data
 		(getFieldValues as jest.Mock).mockResolvedValue(mockApiResponse);
 
+		// Mock useQuery implementation to avoid infinite re-renders
+		// and ensure onSuccess is called once
+		(useQuery as jest.Mock).mockImplementation((key, options) => {
+			const { onSuccess, enabled, queryFn } = options || {};
+			const variableName = key[1];
+			const dynamicVarsKey = key[2];
+
+			React.useEffect(() => {
+				if (enabled !== false) {
+					if (onSuccess) {
+						// For 'services' tests:
+						// 1. "Default to ALL" expectations imply empty options -> [] behavior. This happens when selectedValue is undefined (dynamicVarsKey has 'null').
+						// 2. "ALL Option Special Value" needs full options to render the "ALL" item in dropdown. This happens when selectedValue is defined.
+						if (
+							variableName === 'services' &&
+							typeof dynamicVarsKey === 'string' &&
+							dynamicVarsKey.includes('null')
+						) {
+							onSuccess({
+								...mockApiResponse,
+								data: { ...mockApiResponse.data, normalizedValues: [] },
+							});
+						} else {
+							onSuccess(mockApiResponse);
+						}
+					}
+					if (queryFn) {
+						queryFn();
+					}
+				}
+			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
+
+			return {
+				isLoading: false,
+				isError: false,
+				data: mockApiResponse,
+				refetch: jest.fn(),
+			};
+		});
+
 		jest.spyOn(ReactRedux, 'useSelector').mockReturnValue({
 			minTime: '2023-01-01T00:00:00Z',
 			maxTime: '2023-01-02T00:00:00Z',
@@ -84,7 +133,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -120,7 +169,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -164,7 +213,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -172,9 +221,6 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});
 
-			// Component should render without errors
-			expect(screen.getByText('$service')).toBeInTheDocument();
-
 			// Check if the dropdown is present
 			const selectElement = screen.getByRole('combobox');
 			expect(selectElement).toBeInTheDocument();
@@ -232,7 +278,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -267,7 +313,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -293,7 +339,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(screen.queryByText('backend')).not.toBeInTheDocument();
 		});
 
-		it('should default to ALL when no default and no previous selection', async () => {
+		it('sahould default to ALL when no default and no previous selection', async () => {
 			const variableData: IDashboardVariable = {
 				id: 'var21',
 				name: 'services',
@@ -311,7 +357,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -345,7 +391,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(mockOnValueUpdate).toHaveBeenCalledWith(
 				'services',
 				'var21',
-				[], // Empty array when allSelected is true
+				[],
 				true, // allSelected = true
 				false,
 			);
@@ -371,7 +417,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -408,7 +454,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableSelection
+					<DynamicVariableInput
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -416,9 +462,6 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});
 
-			// Component should render without errors
-			expect(screen.getByText('$services')).toBeInTheDocument();
-
 			// Check if ALL is displayed in the UI (in the main selection area)
 			const allTextElement = screen.getByText('ALL');
 			expect(allTextElement).toBeInTheDocument();

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
+import {
+	BarTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { useBarChartStacking } from '../../hooks/useBarChartStacking';
+import { BarChartProps } from '../types';
+
+export default function BarChart(props: BarChartProps): JSX.Element {
+	const { children, isStackedBarChart, config, data, ...rest } = props;
+
+	const chartData = useBarChartStacking({
+		data,
+		isStackedBarChart,
+		config,
+	});
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			const tooltipProps: BarTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				isStackedBarChart: isStackedBarChart,
+			};
+			return <BarChartTooltip {...tooltipProps} />;
+		},
+		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
+	);
+
+	return (
+		<ChartWrapper
+			{...rest}
+			config={config}
+			data={chartData}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useRef } from 'react';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import {
+	LegendPosition,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
+import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
+import noop from 'lodash-es/noop';
+import uPlot from 'uplot';
+
+import { ChartProps } from '../types';
+
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
+
+export default function ChartWrapper({
+	legendConfig = { position: LegendPosition.BOTTOM },
+	config,
+	data,
+	width: containerWidth,
+	height: containerHeight,
+	showTooltip = true,
+	canPinTooltip = false,
+	syncMode,
+	syncKey,
+	onDestroy = noop,
+	children,
+	layoutChildren,
+	renderTooltip,
+	'data-testid': testId,
+}: ChartProps): JSX.Element {
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const legendComponent = useCallback(
+		(averageLegendWidth: number): React.ReactNode => {
+			return (
+				<Legend
+					config={config}
+					position={legendConfig.position}
+					averageLegendWidth={averageLegendWidth}
+				/>
+			);
+		},
+		[config, legendConfig.position],
+	);
+
+	const renderTooltipCallback = useCallback(
+		(args: TooltipRenderArgs): React.ReactNode => {
+			if (renderTooltip) {
+				return renderTooltip(args);
+			}
+			return null;
+		},
+		[renderTooltip],
+	);
+
+	return (
+		<PlotContextProvider>
+			<ChartLayout
+				config={config}
+				containerWidth={containerWidth}
+				containerHeight={containerHeight}
+				legendConfig={legendConfig}
+				legendComponent={legendComponent}
+				layoutChildren={layoutChildren}
+			>
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
+					<UPlotChart
+						config={config}
+						data={data}
+						width={chartWidth}
+						height={chartHeight}
+						plotRef={(plot): void => {
+							plotInstanceRef.current = plot;
+						}}
+						onDestroy={(plot: uPlot): void => {
+							plotInstanceRef.current = null;
+							onDestroy(plot);
+						}}
+						data-testid={testId}
+					>
+						{children}
+						{showTooltip && (
+							<TooltipPlugin
+								config={config}
+								canPinTooltip={canPinTooltip}
+								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
+								syncKey={syncKey}
+								render={renderTooltipCallback}
+							/>
+						)}
+					</UPlotChart>
+				)}
+			</ChartLayout>
+		</PlotContextProvider>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -1,104 +1,46 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
 import {
-	LegendPosition,
+	TimeSeriesTooltipProps,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import _noop from 'lodash-es/noop';
-import uPlot from 'uplot';
 
-import { ChartProps } from '../types';
+import { TimeSeriesChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
+export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
+	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
 
-export default function TimeSeries({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	disableTooltip = false,
-	canPinTooltip = false,
-	timezone,
-	yAxisUnit,
-	decimalPrecision,
-	syncMode,
-	syncKey,
-	onDestroy = _noop,
-	children,
-	layoutChildren,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: TimeSeriesTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[config, legendConfig.position],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{!disableTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={(props: TooltipRenderArgs): React.ReactNode => (
-									<Tooltip
-										{...props}
-										timezone={timezone}
-										yAxisUnit={yAxisUnit}
-										decimalPrecision={decimalPrecision}
-									/>
-								)}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
+		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
+			{children}
+		</ChartWrapper>
 	);
 }

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,29 +1,39 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig } from 'lib/uPlotV2/components/types';
+import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
-	disableTooltip?: boolean;
+	showTooltip?: boolean;
 	timezone: string;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
+	'data-testid'?: string;
 }
-
-interface TimeSeriesChartProps extends BaseChartProps {
+interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
-	legendConfig: LegendConfig;
 	data: uPlot.AlignedData;
+	syncMode?: DashboardCursorSync;
+	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
 	layoutChildren?: React.ReactNode;
-	'data-testid'?: string;
 }
 
-export type ChartProps = TimeSeriesChartProps;
+export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {
+	legendConfig: LegendConfig;
+}
+
+export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+	legendConfig: LegendConfig;
+	isStackedBarChart?: boolean;
+}
+
+export type ChartProps = TimeSeriesChartProps | BarChartProps;

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -0,0 +1,116 @@
+import uPlot, { AlignedData } from 'uplot';
+
+/**
+ * Stack data cumulatively (top-down: first series = top, last = bottom).
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ */
+export function stackSeries(
+	data: AlignedData,
+	omit: (seriesIndex: number) => boolean,
+): { data: AlignedData; bands: uPlot.Band[] } {
+	const timeAxis = data[0];
+	const pointCount = timeAxis.length;
+	const valueSeriesCount = data.length - 1; // exclude time axis
+
+	const stackedSeries = buildStackedSeries({
+		data,
+		valueSeriesCount,
+		pointCount,
+		omit,
+	});
+	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
+
+	return {
+		data: [timeAxis, ...stackedSeries] as AlignedData,
+		bands,
+	};
+}
+
+interface BuildStackedSeriesParams {
+	data: AlignedData;
+	valueSeriesCount: number;
+	pointCount: number;
+	omit: (seriesIndex: number) => boolean;
+}
+
+/**
+ * Accumulate from last series upward: last series = raw values, first = total.
+ * Omitted series are copied as-is (no accumulation).
+ */
+function buildStackedSeries({
+	data,
+	valueSeriesCount,
+	pointCount,
+	omit,
+}: BuildStackedSeriesParams): (number | null)[][] {
+	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
+	const cumulativeSums = Array(pointCount).fill(0) as number[];
+
+	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
+		const rawValues = data[seriesIndex] as (number | null)[];
+
+		if (omit(seriesIndex)) {
+			stackedSeries[seriesIndex - 1] = rawValues;
+		} else {
+			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
+				const numericValue = rawValue == null ? 0 : Number(rawValue);
+				return (cumulativeSums[pointIndex] += numericValue);
+			});
+		}
+	}
+
+	return stackedSeries;
+}
+
+/**
+ * Bands define fill between consecutive visible series for stacked appearance.
+ * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+function buildFillBands(
+	seriesLength: number,
+	omit: (seriesIndex: number) => boolean,
+): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+
+	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
+			seriesLength,
+			seriesIndex,
+			omit,
+		);
+		if (nextVisibleSeriesIndex !== -1) {
+			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
+		}
+	}
+
+	return bands;
+}
+
+function findNextVisibleSeriesIndex(
+	seriesLength: number,
+	afterIndex: number,
+	omit: (seriesIndex: number) => boolean,
+): number {
+	for (let i = afterIndex + 1; i < seriesLength; i++) {
+		if (!omit(i)) {
+			return i;
+		}
+	}
+	return -1;
+}
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
+		bands.push({ series: [seriesIndex, seriesIndex + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -0,0 +1,125 @@
+import {
+	MutableRefObject,
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { has } from 'lodash-es';
+import uPlot from 'uplot';
+
+import { stackSeries } from '../charts/utils/stackSeriesUtils';
+
+/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
+function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
+	return !plot.series[seriesIndex]?.show;
+}
+
+function canApplyStacking(
+	unstackedData: uPlot.AlignedData | null,
+	plot: uPlot,
+	isUpdating: boolean,
+): boolean {
+	return (
+		!isUpdating &&
+		!!unstackedData &&
+		!!plot.data &&
+		unstackedData[0]?.length === plot.data[0]?.length
+	);
+}
+
+function setupStackingHooks(
+	config: UPlotConfigBuilder,
+	applyStackingToChart: (plot: uPlot) => void,
+	isUpdatingRef: MutableRefObject<boolean>,
+): () => void {
+	const onDataChange = (plot: uPlot): void => {
+		if (!isUpdatingRef.current) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const onSeriesVisibilityChange = (
+		plot: uPlot,
+		_seriesIdx: number | null,
+		opts: uPlot.Series,
+	): void => {
+		if (!has(opts, 'focus')) {
+			applyStackingToChart(plot);
+		}
+	};
+
+	const removeSetDataHook = config.addHook('setData', onDataChange);
+	const removeSetSeriesHook = config.addHook(
+		'setSeries',
+		onSeriesVisibilityChange,
+	);
+
+	return (): void => {
+		removeSetDataHook?.();
+		removeSetSeriesHook?.();
+	};
+}
+
+export interface UseBarChartStackingParams {
+	data: uPlot.AlignedData;
+	isStackedBarChart?: boolean;
+	config: UPlotConfigBuilder | null;
+}
+
+/**
+ * Handles stacking for bar charts: computes initial stacked data and re-stacks
+ * when data or series visibility changes (e.g. legend toggles).
+ */
+export function useBarChartStacking({
+	data,
+	isStackedBarChart = false,
+	config,
+}: UseBarChartStackingParams): uPlot.AlignedData {
+	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
+	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
+	unstackedDataRef.current = isStackedBarChart ? data : null;
+
+	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
+	const isUpdatingChartRef = useRef(false);
+
+	const chartData = useMemo((): uPlot.AlignedData => {
+		if (!isStackedBarChart || !data || data.length < 2) {
+			return data;
+		}
+		const noSeriesHidden = (): boolean => false; // include all series in initial stack
+		const { data: stacked } = stackSeries(data, noSeriesHidden);
+		return stacked;
+	}, [data, isStackedBarChart]);
+
+	const applyStackingToChart = useCallback((plot: uPlot): void => {
+		const unstacked = unstackedDataRef.current;
+		if (
+			!unstacked ||
+			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
+		) {
+			return;
+		}
+
+		const shouldExcludeSeries = (idx: number): boolean =>
+			isSeriesHidden(plot, idx);
+		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
+
+		plot.delBand(null);
+		bands.forEach((band: uPlot.Band) => plot.addBand(band));
+
+		isUpdatingChartRef.current = true;
+		plot.setData(stacked);
+		isUpdatingChartRef.current = false;
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!isStackedBarChart || !config) {
+			return undefined;
+		}
+		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
+	}, [isStackedBarChart, config, applyStackingToChart]);
+
+	return chartData;
+}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import ContextMenu from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+import { getTimeRange } from 'utils/getTimeRange';
+
+import BarChart from '../../charts/BarChart/BarChart';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
+import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
+
+import '../Panel.styles.scss';
+
+function BarPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		onDragSelect,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(queryResponse);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [queryResponse]);
+
+	const {
+		coordinates,
+		popoverPosition,
+		onClose,
+		menuItemsConfig,
+		clickHandlerWithContextMenu,
+	} = usePanelContextMenu({
+		widget,
+		queryResponse,
+	});
+
+	const config = useMemo(() => {
+		return prepareBarPanelConfig({
+			widget,
+			isDarkMode,
+			currentQuery: widget.query,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			timezone,
+			panelMode,
+			minTimeScale: minTimeScale,
+			maxTimeScale: maxTimeScale,
+		});
+	}, [
+		widget,
+		isDarkMode,
+		queryResponse?.data?.payload,
+		clickHandlerWithContextMenu,
+		onDragSelect,
+		minTimeScale,
+		maxTimeScale,
+		timezone,
+		panelMode,
+	]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareBarPanelData(queryResponse?.data?.payload);
+	}, [queryResponse?.data?.payload]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+	]);
+
+	const onPlotDestroy = useCallback(() => {
+		uPlotRef.current = null;
+	}, []);
+
+	const onPlotRef = useCallback((plot: uPlot | null): void => {
+		uPlotRef.current = plot;
+	}, []);
+
+	return (
+		<div className="panel-container" ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<BarChart
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={onPlotRef}
+					onDestroy={onPlotDestroy}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+					isStackedBarChart={widget.stackedBarChart ?? false}
+				>
+					<ContextMenu
+						coordinates={coordinates}
+						popoverPosition={popoverPosition}
+						title={menuItemsConfig.header as string}
+						items={menuItemsConfig.items}
+						onClose={onClose}
+					/>
+				</BarChart>
+			)}
+		</div>
+	);
+}
+
+export default BarPanel;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -0,0 +1,108 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryData } from 'types/api/widgets/getQuery';
+import { AlignedData } from 'uplot';
+
+import { PanelMode } from '../types';
+import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+
+export function prepareBarPanelData(
+	apiResponse: MetricRangePayloadProps,
+): AlignedData {
+	const seriesList = apiResponse?.data?.result || [];
+	const timestampArr = getXAxisTimestamps(seriesList);
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
+	return [timestampArr, ...yAxisValuesArr];
+}
+
+export function prepareBarPanelConfig({
+	widget,
+	isDarkMode,
+	currentQuery,
+	onClick,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	panelMode,
+	minTimeScale,
+	maxTimeScale,
+}: {
+	widget: Widgets;
+	isDarkMode: boolean;
+	currentQuery: Query;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	apiResponse: MetricRangePayloadProps;
+	timezone: Timezone;
+	panelMode: PanelMode;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		onClick,
+		onDragSelect,
+		apiResponse,
+		timezone,
+		panelMode,
+		panelType: PANEL_TYPES.BAR,
+		minTimeScale,
+		maxTimeScale,
+	});
+
+	builder.setCursor({
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	if (widget.stackedBarChart) {
+		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		builder.setBands(getInitialStackedBands(seriesCount));
+	}
+
+	const seriesList: QueryData[] = apiResponse?.data?.result || [];
+	seriesList.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '', // query
+			series.legend || '',
+		);
+
+		const label = currentQuery
+			? getLegend(series, currentQuery, baseLabelName)
+			: baseLabelName;
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.BAR,
+			label: label,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
+			isDarkMode,
+		});
+	});
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -6,7 +6,6 @@ import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { LineInterpolation } from 'lib/uPlotV2/config/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
@@ -73,55 +72,28 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	}, [queryResponse?.data?.payload]);
 
 	const config = useMemo(() => {
-		const tzDate = (timestamp: number): Date =>
-			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
 		return prepareUPlotConfig({
-			widgetId: widget.id || '',
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			tzDate,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-			isLogScale: widget?.isLogScale ?? false,
-			thresholds: {
-				scaleKey: 'y',
-				thresholds: (widget.thresholds || []).map((threshold) => ({
-					thresholdValue: threshold.thresholdValue ?? 0,
-					thresholdColor: threshold.thresholdColor,
-					thresholdUnit: threshold.thresholdUnit,
-					thresholdLabel: threshold.thresholdLabel,
-				})),
-				yAxisUnit: widget.yAxisUnit,
-			},
-			yAxisUnit: widget.yAxisUnit || '',
-			softMin: widget.softMin === undefined ? null : widget.softMin,
-			softMax: widget.softMax === undefined ? null : widget.softMax,
-			spanGaps: false,
-			colorMapping: widget.customLegendColors ?? {},
-			lineInterpolation: LineInterpolation.Spline,
+			widget,
 			isDarkMode,
+			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			currentQuery: widget.query,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			timezone,
 			panelMode,
+			minTimeScale: minTimeScale,
+			maxTimeScale: maxTimeScale,
 		});
 	}, [
-		widget.id,
-		maxTimeScale,
-		minTimeScale,
-		timezone.value,
-		widget.customLegendColors,
-		widget.isLogScale,
-		widget.softMax,
-		widget.softMin,
+		widget,
 		isDarkMode,
-		queryResponse?.data?.payload,
-		widget.query,
-		widget.thresholds,
-		widget.yAxisUnit,
-		panelMode,
 		clickHandlerWithContextMenu,
 		onDragSelect,
+		queryResponse?.data?.payload,
+		panelMode,
+		minTimeScale,
+		maxTimeScale,
+		timezone,
 	]);
 
 	const layoutChildren = useMemo(() => {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -1,3 +1,4 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -5,23 +6,20 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
-	DistributionType,
 	DrawStyle,
 	LineInterpolation,
 	LineStyle,
-	SelectionPreferencesSource,
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
 export const prepareChartData = (
 	apiResponse: MetricRangePayloadProps,
@@ -34,112 +32,39 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widgetId,
-	apiResponse,
-	tzDate,
-	minTimeScale,
-	maxTimeScale,
-	isLogScale,
-	thresholds,
-	softMin,
-	softMax,
-	spanGaps,
-	colorMapping,
-	lineInterpolation,
+	widget,
 	isDarkMode,
 	currentQuery,
-	onDragSelect,
 	onClick,
-	yAxisUnit,
+	onDragSelect,
+	apiResponse,
+	timezone,
 	panelMode,
+	minTimeScale,
+	maxTimeScale,
 }: {
-	widgetId: string;
-	apiResponse: MetricRangePayloadProps;
-	tzDate: uPlot.LocalDateFromUnix;
-	minTimeScale: number | undefined;
-	maxTimeScale: number | undefined;
-	isLogScale: boolean;
-	softMin: number | null;
-	softMax: number | null;
-	spanGaps: boolean;
-	colorMapping: Record<string, string>;
-	lineInterpolation: LineInterpolation;
+	widget: Widgets;
 	isDarkMode: boolean;
-	thresholds: ThresholdsDrawHookOptions;
 	currentQuery: Query;
-	yAxisUnit: string;
+	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
+	apiResponse: MetricRangePayloadProps;
+	timezone: Timezone;
 	panelMode: PanelMode;
+	minTimeScale?: number;
+	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = new UPlotConfigBuilder({
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		onClick,
 		onDragSelect,
-		widgetId,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	// X scale – time axis
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: softMin ?? undefined,
-		softMax: softMax ?? undefined,
-		thresholds,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	builder.addThresholds(thresholds);
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: false,
-		panelType: PANEL_TYPES.TIME_SERIES,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: false,
-		yAxisUnit,
+		apiResponse,
+		timezone,
+		panelMode,
 		panelType: PANEL_TYPES.TIME_SERIES,
+		minTimeScale,
+		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -157,14 +82,16 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping,
-			spanGaps,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: true,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation,
+			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
+
 	return builder;
 };

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,6 +14,11 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
+export interface SeriesVisibilityState {
+	labels: string[];
+	visibility: boolean[];
+}
+
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -0,0 +1,271 @@
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import type { GraphVisibilityState } from '../../types';
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from '../legendVisibilityUtils';
+
+describe('legendVisibilityUtils', () => {
+	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
+
+	beforeEach(() => {
+		localStorage.clear();
+		jest.spyOn(window.localStorage.__proto__, 'getItem');
+		jest.spyOn(window.localStorage.__proto__, 'setItem');
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getStoredSeriesVisibility', () => {
+		it('returns null when there is no stored visibility state', () => {
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
+		});
+
+		it('returns null when widget has no stored dataIndex', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+
+		it('returns visibility array by index when widget state exists', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'Memory', show: false },
+					],
+				},
+				{
+					name: 'widget-2',
+					dataIndex: [{ label: 'Errors', show: true }],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).not.toBeNull();
+			expect(result).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
+		});
+
+		it('returns visibility by index including duplicate labels', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'CPU', show: false },
+						{ label: 'Memory', show: false },
+					],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).not.toBeNull();
+			expect(result).toEqual({
+				labels: ['CPU', 'CPU', 'Memory'],
+				visibility: [true, false, false],
+			});
+		});
+
+		it('returns null on malformed JSON in localStorage', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+
+		it('returns null when widget id is not found', () => {
+			const stored: GraphVisibilityState[] = [
+				{
+					name: 'another-widget',
+					dataIndex: [{ label: 'CPU', show: true }],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(stored));
+
+			const result = getStoredSeriesVisibility('widget-1');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('updateSeriesVisibilityToLocalStorage', () => {
+		it('creates new visibility state when none exists', () => {
+			const seriesVisibility = [
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			];
+
+			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
+		});
+
+		it('adds a new widget entry when other widgets already exist', () => {
+			const existing: GraphVisibilityState[] = [
+				{
+					name: 'widget-existing',
+					dataIndex: [{ label: 'Errors', show: true }],
+				},
+			];
+			localStorage.setItem(storageKey, JSON.stringify(existing));
+
+			const newVisibility = [{ label: 'CPU', show: false }];
+
+			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-new');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+		});
+
+		it('updates existing widget visibility when entry already exists', () => {
+			const initialVisibility: GraphVisibilityState[] = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'CPU', show: true },
+						{ label: 'Memory', show: true },
+					],
+				},
+			];
+
+			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
+
+			const updatedVisibility = [
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			];
+
+			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [false, true],
+			});
+		});
+
+		it('silently handles malformed existing JSON without throwing', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			expect(() =>
+				updateSeriesVisibilityToLocalStorage('widget-1', [
+					{ label: 'CPU', show: true },
+				]),
+			).not.toThrow();
+		});
+
+		it('when existing JSON is malformed, overwrites with valid data for the widget', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			updateSeriesVisibilityToLocalStorage('widget-1', [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
+
+			const stored = getStoredSeriesVisibility('widget-1');
+			expect(stored).not.toBeNull();
+			expect(stored).toEqual({
+				labels: ['x-axis', 'CPU'],
+				visibility: [true, false],
+			});
+			const expected = [
+				{
+					name: 'widget-1',
+					dataIndex: [
+						{ label: 'x-axis', show: true },
+						{ label: 'CPU', show: false },
+					],
+				},
+			];
+			expect(localStorage.setItem).toHaveBeenCalledWith(
+				storageKey,
+				JSON.stringify(expected),
+			);
+		});
+
+		it('preserves other widgets when updating one widget', () => {
+			const existing: GraphVisibilityState[] = [
+				{ name: 'widget-a', dataIndex: [{ label: 'A', show: true }] },
+				{ name: 'widget-b', dataIndex: [{ label: 'B', show: false }] },
+			];
+			localStorage.setItem(storageKey, JSON.stringify(existing));
+
+			updateSeriesVisibilityToLocalStorage('widget-b', [
+				{ label: 'B', show: true },
+			]);
+
+			expect(getStoredSeriesVisibility('widget-a')).toEqual({
+				labels: ['A'],
+				visibility: [true],
+			});
+			expect(getStoredSeriesVisibility('widget-b')).toEqual({
+				labels: ['B'],
+				visibility: [true],
+			});
+		});
+
+		it('calls setItem with storage key and stringified visibility states', () => {
+			updateSeriesVisibilityToLocalStorage('widget-1', [
+				{ label: 'CPU', show: true },
+			]);
+
+			expect(localStorage.setItem).toHaveBeenCalledTimes(1);
+			expect(localStorage.setItem).toHaveBeenCalledWith(
+				storageKey,
+				expect.any(String),
+			);
+			const [_, value] = (localStorage.setItem as jest.Mock).mock.calls[0];
+			expect((): void => JSON.parse(value)).not.toThrow();
+			expect(JSON.parse(value)).toEqual([
+				{ name: 'widget-1', dataIndex: [{ label: 'CPU', show: true }] },
+			]);
+		});
+
+		it('stores empty dataIndex when seriesVisibility is empty', () => {
+			updateSeriesVisibilityToLocalStorage('widget-1', []);
+
+			const raw = localStorage.getItem(storageKey);
+			expect(raw).not.toBeNull();
+			const parsed = JSON.parse(raw ?? '[]');
+			expect(parsed).toEqual([{ name: 'widget-1', dataIndex: [] }]);
+			expect(getStoredSeriesVisibility('widget-1')).toBeNull();
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -0,0 +1,127 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import onClickPlugin, {
+	OnClickPluginOpts,
+} from 'lib/uPlotLib/plugins/onClickPlugin';
+import {
+	DistributionType,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import { PanelMode } from '../types';
+
+export interface BaseConfigBuilderProps {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	isDarkMode: boolean;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	timezone: Timezone;
+	panelMode: PanelMode;
+	panelType: PANEL_TYPES;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+export function buildBaseConfig({
+	widget,
+	isDarkMode,
+	onClick,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	panelMode,
+	panelType,
+	minTimeScale,
+	maxTimeScale,
+}: BaseConfigBuilderProps): UPlotConfigBuilder {
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
+	const builder = new UPlotConfigBuilder({
+		onDragSelect,
+		widgetId: widget.id,
+		tzDate,
+		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
+			: SelectionPreferencesSource.IN_MEMORY,
+	});
+
+	const thresholdOptions: ThresholdsDrawHookOptions = {
+		scaleKey: 'y',
+		thresholds: (widget.thresholds || []).map((threshold) => ({
+			thresholdValue: threshold.thresholdValue ?? 0,
+			thresholdColor: threshold.thresholdColor,
+			thresholdUnit: threshold.thresholdUnit,
+			thresholdLabel: threshold.thresholdLabel,
+		})),
+		yAxisUnit: widget.yAxisUnit,
+	};
+
+	builder.addThresholds(thresholdOptions);
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	// Y scale – value axis, driven primarily by softMin/softMax and data
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		min: undefined,
+		max: undefined,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		thresholds: thresholdOptions,
+		logBase: widget.isLogScale ? 10 : undefined,
+		distribution: widget.isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	if (typeof onClick === 'function') {
+		builder.addPlugin(
+			onClickPlugin({
+				onClick,
+				apiResponse,
+			}),
+		);
+	}
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		isLogScale: widget.isLogScale,
+		panelType,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		isLogScale: widget.isLogScale,
+		yAxisUnit: widget.yAxisUnit,
+		panelType,
+	});
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,15 +1,20 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
+import {
+	GraphVisibilityState,
+	SeriesVisibilityItem,
+	SeriesVisibilityState,
+} from '../types';
 
 /**
- * Retrieves the visibility map for a specific widget from localStorage
+ * Retrieves the stored series visibility for a specific widget from localStorage by index.
+ * Index 0 is the x-axis (time); indices 1, 2, ... are data series (same order as uPlot plot.series).
  * @param widgetId - The unique identifier of the widget
- * @returns A Map of series labels to their visibility state, or null if not found
+ * @returns visibility[i] = show state for series at index i, or null if not found
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): Map<string, boolean> | null {
+): SeriesVisibilityState | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -24,8 +29,15 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return new Map(widgetState.dataIndex.map((item) => [item.label, item.show]));
-	} catch {
+		return {
+			labels: widgetState.dataIndex.map((item) => item.label),
+			visibility: widgetState.dataIndex.map((item) => item.show),
+		};
+	} catch (error) {
+		if (error instanceof SyntaxError) {
+			// If the stored data is malformed, remove it
+			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		}
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
 	}
@@ -35,40 +47,31 @@ export function updateSeriesVisibilityToLocalStorage(
 	widgetId: string,
 	seriesVisibility: SeriesVisibilityItem[],
 ): void {
+	let visibilityStates: GraphVisibilityState[] = [];
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-
-		let visibilityStates: GraphVisibilityState[];
-
-		if (!storedData) {
-			visibilityStates = [
-				{
-					name: widgetId,
-					dataIndex: seriesVisibility,
-				},
-			];
-		} else {
-			visibilityStates = JSON.parse(storedData);
+		visibilityStates = JSON.parse(storedData || '[]');
+	} catch (error) {
+		if (error instanceof SyntaxError) {
+			visibilityStates = [];
 		}
-		const widgetState = visibilityStates.find((state) => state.name === widgetId);
-
-		if (!widgetState) {
-			visibilityStates = [
-				...visibilityStates,
-				{
-					name: widgetId,
-					dataIndex: seriesVisibility,
-				},
-			];
-		} else {
-			widgetState.dataIndex = seriesVisibility;
-		}
-
-		localStorage.setItem(
-			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
-			JSON.stringify(visibilityStates),
-		);
-	} catch {
-		// Silently handle parsing errors - fall back to default visibility
 	}
+	const widgetState = visibilityStates.find((state) => state.name === widgetId);
+
+	if (widgetState) {
+		widgetState.dataIndex = seriesVisibility;
+	} else {
+		visibilityStates = [
+			...visibilityStates,
+			{
+				name: widgetId,
+				dataIndex: seriesVisibility,
+			},
+		];
+	}
+
+	localStorage.setItem(
+		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+		JSON.stringify(visibilityStates),
+	);
 }

frontend/src/container/ForgotPassword/ForgotPassword.styles.scss

@@ -0,0 +1,93 @@
+.forgot-password-title {
+	font-family: var(--label-large-600-font-family);
+	font-size: var(--label-large-600-font-size);
+	font-weight: var(--label-large-600-font-weight);
+	letter-spacing: var(--label-large-600-letter-spacing);
+	line-height: 1.45;
+	color: var(--l1-foreground);
+	margin: 0;
+}
+
+.forgot-password-description {
+	font-family: var(--paragraph-base-400-font-family);
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	letter-spacing: -0.065px;
+	color: var(--l2-foreground);
+	margin: 0;
+	text-align: center;
+	max-width: 317px;
+}
+
+.forgot-password-form {
+	width: 100%;
+
+	// Label styling
+	.forgot-password-label {
+		font-family: Inter, sans-serif;
+		font-size: 13px;
+		font-weight: 600;
+		line-height: 1;
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin-bottom: 12px;
+		display: block;
+
+		.lightMode & {
+			color: var(--text-ink-500);
+		}
+	}
+
+	// Parent container for fields
+	.forgot-password-field {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.ant-form {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		.ant-form-item {
+			margin-bottom: 0px;
+			width: 100%;
+		}
+	}
+}
+
+.forgot-password-actions {
+	display: flex;
+	gap: 12px;
+	width: 100%;
+
+	> .forgot-password-back-button,
+	> .login-submit-btn {
+		flex: 1 1 0%;
+	}
+}
+
+.forgot-password-back-button {
+	height: 32px;
+	padding: 10px 16px;
+	border-radius: 2px;
+	font-family: Inter, sans-serif;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	background: var(--l3-background);
+	border: 1px solid var(--l3-border);
+	color: var(--l1-foreground);
+
+	&:hover:not(:disabled) {
+		background: var(--l3-border);
+		border-color: var(--l3-border);
+		opacity: 0.9;
+	}
+}

frontend/src/container/ForgotPassword/SuccessScreen.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@signozhq/button';
+import { ArrowLeft, Mail } from '@signozhq/icons';
+
+interface SuccessScreenProps {
+	onBackToLogin: () => void;
+}
+
+function SuccessScreen({ onBackToLogin }: SuccessScreenProps): JSX.Element {
+	return (
+		<div className="login-form-container">
+			<div className="forgot-password-form">
+				<div className="login-form-header">
+					<div className="login-form-emoji">
+						<Mail size={32} />
+					</div>
+					<h4 className="forgot-password-title">Check your email</h4>
+					<p className="forgot-password-description">
+						We&apos;ve sent a password reset link to your email. Please check your
+						inbox and follow the instructions to reset your password.
+					</p>
+				</div>
+
+				<div className="login-form-actions forgot-password-actions">
+					<Button
+						variant="solid"
+						color="primary"
+						type="button"
+						data-testid="back-to-login"
+						className="login-submit-btn"
+						onClick={onBackToLogin}
+						prefixIcon={<ArrowLeft size={12} />}
+					>
+						Back to login
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default SuccessScreen;

frontend/src/container/ForgotPassword/__tests__/ForgotPassword.test.tsx

@@ -0,0 +1,402 @@
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import {
+	createErrorResponse,
+	handleInternalServerError,
+	rest,
+	server,
+} from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+
+import ForgotPassword, { ForgotPasswordRouteState } from '../index';
+
+// Mock dependencies
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+		},
+	},
+}));
+
+const mockHistoryPush = history.push as jest.MockedFunction<
+	typeof history.push
+>;
+
+const FORGOT_PASSWORD_ENDPOINT = '*/api/v2/factor_password/forgot';
+
+// Mock data
+const mockSingleOrg: OrgSessionContext[] = [
+	{
+		id: 'org-1',
+		name: 'Test Organization',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+];
+
+const mockMultipleOrgs: OrgSessionContext[] = [
+	{
+		id: 'org-1',
+		name: 'Organization One',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+	{
+		id: 'org-2',
+		name: 'Organization Two',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+];
+
+const TEST_EMAIL = 'jest.test@signoz.io';
+
+const defaultProps: ForgotPasswordRouteState = {
+	email: TEST_EMAIL,
+	orgs: mockSingleOrg,
+};
+
+const multiOrgProps: ForgotPasswordRouteState = {
+	email: TEST_EMAIL,
+	orgs: mockMultipleOrgs,
+};
+
+describe('ForgotPassword Component', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('Initial Render', () => {
+		it('renders forgot password form with all required elements', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			expect(screen.getByText(/forgot your password\?/i)).toBeInTheDocument();
+			expect(
+				screen.getByText(/send a reset link to your inbox/i),
+			).toBeInTheDocument();
+			expect(screen.getByTestId('email')).toBeInTheDocument();
+			expect(screen.getByTestId('forgot-password-submit')).toBeInTheDocument();
+			expect(screen.getByTestId('forgot-password-back')).toBeInTheDocument();
+		});
+
+		it('pre-fills email from props', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const emailInput = screen.getByTestId('email');
+			expect(emailInput).toHaveValue(TEST_EMAIL);
+		});
+
+		it('disables email input field', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const emailInput = screen.getByTestId('email');
+			expect(emailInput).toBeDisabled();
+		});
+
+		it('does not show organization dropdown for single org', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
+			expect(screen.queryByText('Organization Name')).not.toBeInTheDocument();
+		});
+
+		it('enables submit button when email is provided with single org', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).not.toBeDisabled();
+		});
+	});
+
+	describe('Multiple Organizations', () => {
+		it('shows organization dropdown when multiple orgs exist', () => {
+			render(<ForgotPassword {...multiOrgProps} />);
+
+			expect(screen.getByTestId('orgId')).toBeInTheDocument();
+			expect(screen.getByText('Organization Name')).toBeInTheDocument();
+		});
+
+		it('disables submit button when org is not selected', () => {
+			const propsWithoutOrgId: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgs: mockMultipleOrgs,
+			};
+
+			render(<ForgotPassword {...propsWithoutOrgId} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('enables submit button after selecting an organization', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<ForgotPassword {...multiOrgProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+
+			// Click on the dropdown to reveal the options
+			await user.click(screen.getByRole('combobox'));
+			await user.click(screen.getByText('Organization One'));
+
+			await waitFor(() => {
+				expect(submitButton).not.toBeDisabled();
+			});
+		});
+
+		it('pre-selects organization when orgId is provided', () => {
+			const propsWithOrgId: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgId: 'org-1',
+				orgs: mockMultipleOrgs,
+			};
+
+			render(<ForgotPassword {...propsWithOrgId} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).not.toBeDisabled();
+		});
+	});
+
+	describe('Form Submission - Success', () => {
+		it('successfully submits forgot password request and shows success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
+			expect(
+				screen.getByText(/we've sent a password reset link/i),
+			).toBeInTheDocument();
+		});
+
+		it('shows back to login button on success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
+		});
+
+		it('redirects to login when clicking back to login on success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
+
+			const backToLoginButton = screen.getByTestId('back-to-login');
+			await user.click(backToLoginButton);
+
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
+	});
+
+	describe('Form Submission - Error Handling', () => {
+		it('displays error message when forgot password API fails', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(
+					FORGOT_PASSWORD_ENDPOINT,
+					createErrorResponse(400, 'USER_NOT_FOUND', 'User not found'),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
+		});
+
+		it('displays error message when API returns server error', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(rest.post(FORGOT_PASSWORD_ENDPOINT, handleInternalServerError));
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(
+				await screen.findByText(/internal server error occurred/i),
+			).toBeInTheDocument();
+		});
+
+		it('clears error message on new submission attempt', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			let requestCount = 0;
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) => {
+					requestCount += 1;
+					if (requestCount === 1) {
+						return res(
+							ctx.status(400),
+							ctx.json({
+								error: {
+									code: 'USER_NOT_FOUND',
+									message: 'User not found',
+								},
+							}),
+						);
+					}
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
+
+			// Click submit again
+			await user.click(submitButton);
+
+			await waitFor(() => {
+				expect(screen.queryByText(/user not found/i)).not.toBeInTheDocument();
+			});
+			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
+		});
+	});
+
+	describe('Navigation', () => {
+		it('redirects to login when clicking back button on form', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const backButton = screen.getByTestId('forgot-password-back');
+			await user.click(backButton);
+
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
+	});
+
+	describe('Loading States', () => {
+		it('shows loading state during API call', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			// Button should show loading state
+			expect(await screen.findByText(/sending\.\.\./i)).toBeInTheDocument();
+		});
+
+		it('disables submit button during loading', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			await waitFor(() => {
+				expect(submitButton).toBeDisabled();
+			});
+		});
+	});
+
+	describe('Edge Cases', () => {
+		it('handles empty email gracefully', () => {
+			const propsWithEmptyEmail: ForgotPasswordRouteState = {
+				email: '',
+				orgs: mockSingleOrg,
+			};
+
+			render(<ForgotPassword {...propsWithEmptyEmail} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('handles whitespace-only email', () => {
+			const propsWithWhitespaceEmail: ForgotPasswordRouteState = {
+				email: '   ',
+				orgs: mockSingleOrg,
+			};
+
+			render(<ForgotPassword {...propsWithWhitespaceEmail} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('handles empty orgs array by disabling submission', () => {
+			const propsWithNoOrgs: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgs: [],
+			};
+
+			render(<ForgotPassword {...propsWithNoOrgs} />);
+
+			// Should not show org dropdown
+			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
+			// Submit should be disabled because no orgId can be determined
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+	});
+});

frontend/src/container/ForgotPassword/index.tsx

@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { Button } from '@signozhq/button';
+import { ArrowLeft, ArrowRight } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Select } from 'antd';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { useForgotPassword } from 'api/generated/services/users';
+import { AxiosError } from 'axios';
+import AuthError from 'components/AuthError/AuthError';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+
+import SuccessScreen from './SuccessScreen';
+
+import './ForgotPassword.styles.scss';
+import 'container/Login/Login.styles.scss';
+
+type FormValues = {
+	email: string;
+	orgId: string;
+};
+
+export type ForgotPasswordRouteState = {
+	email: string;
+	orgId?: string;
+	orgs: OrgSessionContext[];
+};
+
+function ForgotPassword({
+	email,
+	orgId,
+	orgs,
+}: ForgotPasswordRouteState): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const {
+		mutate: forgotPasswordMutate,
+		isLoading,
+		isSuccess,
+		error: mutationError,
+	} = useForgotPassword();
+
+	const errorMessage = useMemo(() => {
+		if (!mutationError) {
+			return undefined;
+		}
+
+		try {
+			ErrorResponseHandlerV2(mutationError as AxiosError<ErrorV2Resp>);
+		} catch (apiError) {
+			return apiError as APIError;
+		}
+	}, [mutationError]);
+
+	const initialOrgId = useMemo((): string | undefined => {
+		if (orgId) {
+			return orgId;
+		}
+
+		if (orgs.length === 1) {
+			return orgs[0]?.id;
+		}
+
+		return undefined;
+	}, [orgId, orgs]);
+
+	const watchedEmail = Form.useWatch('email', form);
+	const selectedOrgId = Form.useWatch('orgId', form);
+
+	useEffect(() => {
+		form.setFieldsValue({
+			email,
+			orgId: initialOrgId,
+		});
+	}, [email, form, initialOrgId]);
+
+	const hasMultipleOrgs = orgs.length > 1;
+
+	const isSubmitEnabled = useMemo((): boolean => {
+		if (isLoading) {
+			return false;
+		}
+
+		if (!watchedEmail?.trim()) {
+			return false;
+		}
+
+		// Ensure we have an orgId (either selected from dropdown or the initial one)
+		const currentOrgId = hasMultipleOrgs ? selectedOrgId : initialOrgId;
+		return Boolean(currentOrgId);
+	}, [watchedEmail, selectedOrgId, isLoading, initialOrgId, hasMultipleOrgs]);
+
+	const handleSubmit = useCallback((): void => {
+		const values = form.getFieldsValue();
+		const currentOrgId = hasMultipleOrgs ? values.orgId : initialOrgId;
+
+		if (!currentOrgId) {
+			return;
+		}
+
+		// Call the forgot password API
+		forgotPasswordMutate({
+			data: {
+				email: values.email,
+				orgId: currentOrgId,
+				frontendBaseURL: window.location.origin,
+			},
+		});
+	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
+
+	const handleBackToLogin = useCallback((): void => {
+		history.push(ROUTES.LOGIN);
+	}, []);
+
+	// Success screen
+	if (isSuccess) {
+		return <SuccessScreen onBackToLogin={handleBackToLogin} />;
+	}
+
+	// Form screen
+	return (
+		<div className="login-form-container">
+			<Form
+				form={form}
+				onFinish={handleSubmit}
+				className="forgot-password-form"
+				initialValues={{
+					email,
+					orgId: initialOrgId,
+				}}
+			>
+				<div className="login-form-header">
+					<div className="login-form-emoji">
+						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
+					</div>
+					<h4 className="forgot-password-title">Forgot your password?</h4>
+					<p className="forgot-password-description">
+						Send a reset link to your inbox and get back to monitoring.
+					</p>
+				</div>
+
+				<div className="login-form-card">
+					<div className="forgot-password-field">
+						<label className="forgot-password-label" htmlFor="forgotPasswordEmail">
+							Email address
+						</label>
+						<Form.Item name="email">
+							<Input
+								type="email"
+								id="forgotPasswordEmail"
+								data-testid="email"
+								required
+								disabled
+								className="login-form-input"
+							/>
+						</Form.Item>
+					</div>
+
+					{hasMultipleOrgs && (
+						<div className="forgot-password-field">
+							<label className="forgot-password-label" htmlFor="orgId">
+								Organization Name
+							</label>
+							<Form.Item
+								name="orgId"
+								rules={[{ required: true, message: 'Please select your organization' }]}
+							>
+								<Select
+									id="orgId"
+									data-testid="orgId"
+									className="login-form-input login-form-select-no-border"
+									placeholder="Select your organization"
+									options={orgs.map((org) => ({
+										value: org.id,
+										label: org.name || 'default',
+									}))}
+								/>
+							</Form.Item>
+						</div>
+					)}
+				</div>
+
+				{errorMessage && <AuthError error={errorMessage} />}
+
+				<div className="login-form-actions forgot-password-actions">
+					<Button
+						variant="solid"
+						type="button"
+						data-testid="forgot-password-back"
+						className="forgot-password-back-button"
+						onClick={handleBackToLogin}
+						prefixIcon={<ArrowLeft size={12} />}
+					>
+						Back to login
+					</Button>
+
+					<Button
+						disabled={!isSubmitEnabled}
+						loading={isLoading}
+						variant="solid"
+						color="primary"
+						type="submit"
+						data-testid="forgot-password-submit"
+						className="login-submit-btn"
+						suffixIcon={<ArrowRight size={12} />}
+					>
+						{isLoading ? 'Sending...' : 'Send reset link'}
+					</Button>
+				</div>
+			</Form>
+		</div>
+	);
+}
+
+export default ForgotPassword;

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -33,8 +33,8 @@ import { useChartMutable } from 'hooks/useChartMutable';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import GetMinMax from 'lib/getMinMax';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -8,8 +8,8 @@ import { populateMultipleResults } from 'container/NewWidget/LeftContainer/Widge
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -6,7 +6,7 @@ import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
-import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AppState } from 'store/reducers';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -30,7 +30,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 
-import { FeatureKeys } from '../../../constants/features';
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
 
@@ -211,19 +210,13 @@ function ServiceMetrics({
 
 	const topLevelOperations = useMemo(() => Object.entries(data || {}), [data]);
 
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const queryRangeRequestData = useMemo(
 		() =>
 			getQueryRangeRequestData({
 				topLevelOperations,
 				globalSelectedInterval,
-				dotMetricsEnabled,
 			}),
-		[globalSelectedInterval, topLevelOperations, dotMetricsEnabled],
+		[globalSelectedInterval, topLevelOperations],
 	);
 
 	const dataQueries = useGetQueriesRange(

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -23,8 +23,6 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { FeatureKeys } from '../../constants/features';
-import { useAppContext } from '../../providers/App/App';
 import HostsListControls from './HostsListControls';
 import HostsListTable from './HostsListTable';
 import { getHostListsQuery, GetHostsQuickFiltersConfig } from './utils';
@@ -146,11 +144,6 @@ function HostsList(): JSX.Element {
 		entityVersion: '',
 	});
 
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			const isNewFilterAdded = value?.items?.length !== filters?.items?.length;
@@ -221,7 +214,7 @@ function HostsList(): JSX.Element {
 						</div>
 						<QuickFilters
 							source={QuickFiltersSource.INFRA_MONITORING}
-							config={GetHostsQuickFiltersConfig(dotMetricsEnabled)}
+							config={GetHostsQuickFiltersConfig()}
 							handleFilterVisibilityChange={handleFilterVisibilityChange}
 							onFilterChange={handleQuickFiltersChange}
 						/>

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -71,20 +71,12 @@ describe('InfraMonitoringHosts utils', () => {
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {
-		it('should return correct config when dotMetricsEnabled is true', () => {
-			const result = GetHostsQuickFiltersConfig(true);
+		it('should return correct config with dot-notation keys', () => {
+			const result = GetHostsQuickFiltersConfig();
 
 			expect(result[0].attributeKey.key).toBe('host.name');
 			expect(result[1].attributeKey.key).toBe('os.type');
 			expect(result[0].aggregateAttribute).toBe('system.cpu.load_average.15m');
 		});
-
-		it('should return correct config when dotMetricsEnabled is false', () => {
-			const result = GetHostsQuickFiltersConfig(false);
-
-			expect(result[0].attributeKey.key).toBe('host_name');
-			expect(result[1].attributeKey.key).toBe('os_type');
-			expect(result[0].aggregateAttribute).toBe('system_cpu_load_average_15m');
-		});
 	});
 });

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -211,32 +211,18 @@ export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	},
 ];
 
-export function GetHostsQuickFiltersConfig(
-	dotMetricsEnabled: boolean,
-): IQuickFiltersConfig[] {
-	// These keys don’t change with dotMetricsEnabled
-	const hostNameKey = dotMetricsEnabled ? 'host.name' : 'host_name';
-	const osTypeKey = dotMetricsEnabled ? 'os.type' : 'os_type';
-	// This metric stays the same regardless of notation
-	const metricName = dotMetricsEnabled
-		? 'system.cpu.load_average.15m'
-		: 'system_cpu_load_average_15m';
-
-	const environmentKey = dotMetricsEnabled
-		? 'deployment.environment'
-		: 'deployment_environment';
-
+export function GetHostsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Host Name',
 			attributeKey: {
-				key: hostNameKey,
+				key: 'host.name',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
+			aggregateAttribute: 'system.cpu.load_average.15m',
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -244,12 +230,12 @@ export function GetHostsQuickFiltersConfig(
 			type: FiltersType.CHECKBOX,
 			title: 'OS Type',
 			attributeKey: {
-				key: osTypeKey,
+				key: 'os.type',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
+			aggregateAttribute: 'system.cpu.load_average.15m',
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -257,7 +243,7 @@ export function GetHostsQuickFiltersConfig(
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: environmentKey,
+				key: 'deployment.environment',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts

@@ -46,95 +46,34 @@ export const getClusterMetricsQueryPayload = (
 	cluster: K8sClustersData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const getKey = (dotKey: string, underscoreKey: string): string =>
-		dotMetricsEnabled ? dotKey : underscoreKey;
-	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.usage',
-		'k8s_pod_cpu_usage',
-	);
-	const k8sNodeAllocatableCpuKey = getKey(
-		'k8s.node.allocatable_cpu',
-		'k8s_node_allocatable_cpu',
-	);
-	const k8sPodMemoryUsageKey = getKey(
-		'k8s.pod.memory.usage',
-		'k8s_pod_memory_usage',
-	);
-	const k8sNodeAllocatableMemoryKey = getKey(
-		'k8s.node.allocatable_memory',
-		'k8s_node_allocatable_memory',
-	);
-	const k8sNodeConditionReadyKey = getKey(
-		'k8s.node.condition_ready',
-		'k8s_node_condition_ready',
-	);
-	const k8sDeploymentAvailableKey = getKey(
-		'k8s.deployment.available',
-		'k8s_deployment_available',
-	);
-	const k8sDeploymentDesiredKey = getKey(
-		'k8s.deployment.desired',
-		'k8s_deployment_desired',
-	);
-	const k8sStatefulsetCurrentPodsKey = getKey(
-		'k8s.statefulset.current_pods',
-		'k8s_statefulset_current_pods',
-	);
-	const k8sStatefulsetDesiredPodsKey = getKey(
-		'k8s.statefulset.desired_pods',
-		'k8s_statefulset_desired_pods',
-	);
-	const k8sStatefulsetReadyPodsKey = getKey(
-		'k8s.statefulset.ready_pods',
-		'k8s_statefulset_ready_pods',
-	);
-	const k8sStatefulsetUpdatedPodsKey = getKey(
-		'k8s.statefulset.updated_pods',
-		'k8s_statefulset_updated_pods',
-	);
-	const k8sDaemonsetCurrentScheduledNodesKey = getKey(
-		'k8s.daemonset.current_scheduled_nodes',
-		'k8s_daemonset_current_scheduled_nodes',
-	);
-	const k8sDaemonsetDesiredScheduledNodesKey = getKey(
-		'k8s.daemonset.desired_scheduled_nodes',
-		'k8s_daemonset_desired_scheduled_nodes',
-	);
-	const k8sDaemonsetReadyNodesKey = getKey(
-		'k8s.daemonset.ready_nodes',
-		'k8s_daemonset_ready_nodes',
-	);
-	const k8sJobActivePodsKey = getKey(
-		'k8s.job.active_pods',
-		'k8s_job_active_pods',
-	);
-	const k8sJobSuccessfulPodsKey = getKey(
-		'k8s.job.successful_pods',
-		'k8s_job_successful_pods',
-	);
-	const k8sJobFailedPodsKey = getKey(
-		'k8s.job.failed_pods',
-		'k8s_job_failed_pods',
-	);
-	const k8sJobDesiredSuccessfulPodsKey = getKey(
-		'k8s.job.desired_successful_pods',
-		'k8s_job_desired_successful_pods',
-	);
-	const k8sClusterNameKey = getKey('k8s.cluster.name', 'k8s_cluster_name');
-	const k8sNodeNameKey = getKey('k8s.node.name', 'k8s_node_name');
-	const k8sDeploymentNameKey = getKey(
-		'k8s.deployment.name',
-		'k8s_deployment_name',
-	);
-	const k8sNamespaceNameKey = getKey('k8s.namespace.name', 'k8s_namespace_name');
-	const k8sStatefulsetNameKey = getKey(
-		'k8s.statefulset.name',
-		'k8s_statefulset_name',
-	);
-	const k8sDaemonsetNameKey = getKey('k8s.daemonset.name', 'k8s_daemonset_name');
-	const k8sJobNameKey = getKey('k8s.job.name', 'k8s_job_name');
+	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
+	const k8sNodeAllocatableCpuKey = 'k8s.node.allocatable_cpu';
+	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
+	const k8sNodeAllocatableMemoryKey = 'k8s.node.allocatable_memory';
+	const k8sNodeConditionReadyKey = 'k8s.node.condition_ready';
+	const k8sDeploymentAvailableKey = 'k8s.deployment.available';
+	const k8sDeploymentDesiredKey = 'k8s.deployment.desired';
+	const k8sStatefulsetCurrentPodsKey = 'k8s.statefulset.current_pods';
+	const k8sStatefulsetDesiredPodsKey = 'k8s.statefulset.desired_pods';
+	const k8sStatefulsetReadyPodsKey = 'k8s.statefulset.ready_pods';
+	const k8sStatefulsetUpdatedPodsKey = 'k8s.statefulset.updated_pods';
+	const k8sDaemonsetCurrentScheduledNodesKey =
+		'k8s.daemonset.current_scheduled_nodes';
+	const k8sDaemonsetDesiredScheduledNodesKey =
+		'k8s.daemonset.desired_scheduled_nodes';
+	const k8sDaemonsetReadyNodesKey = 'k8s.daemonset.ready_nodes';
+	const k8sJobActivePodsKey = 'k8s.job.active_pods';
+	const k8sJobSuccessfulPodsKey = 'k8s.job.successful_pods';
+	const k8sJobFailedPodsKey = 'k8s.job.failed_pods';
+	const k8sJobDesiredSuccessfulPodsKey = 'k8s.job.desired_successful_pods';
+	const k8sClusterNameKey = 'k8s.cluster.name';
+	const k8sNodeNameKey = 'k8s.node.name';
+	const k8sDeploymentNameKey = 'k8s.deployment.name';
+	const k8sNamespaceNameKey = 'k8s.namespace.name';
+	const k8sStatefulsetNameKey = 'k8s.statefulset.name';
+	const k8sDaemonsetNameKey = 'k8s.daemonset.name';
+	const k8sJobNameKey = 'k8s.job.name';
 
 	return [
 		{