chore: rearrange and readable

* feat: add store methods for minimal trace fetch

* feat: break down waterfall module to handle large spans

Handling large traces in two steps to avoid high
memory allocation

* refactor: keep the waterfall changes in new api version

This is to avoid the contract change in existing v3

* chore: avoid unnecessary diffs

* refactor: move conversion logic to types

* chore: update openapi specs

* refactor: use sqlbuider for queries

* chore: fix comment

* chore: avoid passing request type to module

* refactor: avoid passing whole summary object around

* chore: remove trace_id from querying since its already known

* chore: remove unused reference column from query

* chore: update openapi specs

.github/workflows/goci.yaml

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

.github/workflows/jsci.yaml

@@ -90,3 +90,26 @@ jobs:
         run: |
           cd frontend && pnpm generate:api
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run pnpm generate:api in frontend/ locally and commit."; exit 1)
+  web-settings:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install-pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 10
+      - name: install-frontend
+        run: cd frontend && pnpm install
+      - name: generate-web-settings
+        run: |
+          cd frontend && pnpm generate:config:web-settings
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated web settings types. Run pnpm generate:config:web-settings in frontend/ locally and commit."; exit 1)

cmd/community/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz-community /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/community/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz-community /root/signoz-community
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz-community

cmd/community/server.go

@@ -115,7 +115,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			return querier.NewHandler(ps, q, a)
 		},
-		func(_ sqlstore.SQLStore, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
+		func(_ sqlstore.SQLStore, _ dashboard.Module, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {

cmd/enterprise/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.integration

@@ -26,7 +26,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

cmd/enterprise/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.with-web.integration

@@ -35,7 +35,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

cmd/enterprise/server.go

@@ -167,7 +167,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			communityHandler := querier.NewHandler(ps, q, a)
 			return eequerier.NewHandler(ps, q, communityHandler)
 		},
-		func(sqlStore sqlstore.SQLStore, global global.Global, zeus zeus.Zeus, gateway gateway.Gateway, licensing licensing.Licensing, serviceAccount serviceaccount.Module, config cloudintegration.Config) (cloudintegration.Module, error) {
+		func(sqlStore sqlstore.SQLStore, dashboardModule dashboard.Module, global global.Global, zeus zeus.Zeus, gateway gateway.Gateway, licensing licensing.Licensing, serviceAccount serviceaccount.Module, config cloudintegration.Config) (cloudintegration.Module, error) {
 			defStore := pkgcloudintegration.NewServiceDefinitionStore()
 			awsCloudProviderModule, err := implcloudprovider.NewAWSCloudProvider(defStore)
 			if err != nil {
@@ -179,7 +179,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 				cloudintegrationtypes.CloudProviderTypeAzure: azureCloudProviderModule,
 			}
 
-			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
+			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))

cmd/genconfig.go

@@ -0,0 +1,61 @@
+package cmd
+
+import (
+	"encoding/json"
+	"os"
+	"reflect"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/web"
+	"github.com/spf13/cobra"
+	"github.com/swaggest/jsonschema-go"
+)
+
+const webSettingsSchemaPath = "docs/config/web-settings.json"
+
+func registerGenerateConfig(parentCmd *cobra.Command) {
+	configCmd := &cobra.Command{
+		Use:   "config",
+		Short: "Generate JSON Schema for config",
+	}
+
+	configCmd.AddCommand(&cobra.Command{
+		Use:   "web-settings",
+		Short: "Generate JSON Schema for web settings",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return generateWebSettings()
+		},
+	})
+
+	parentCmd.AddCommand(configCmd)
+}
+
+func generateWebSettings() error {
+	falseVal := false
+	noAdditional := jsonschema.SchemaOrBool{TypeBoolean: &falseVal}
+
+	reflector := jsonschema.Reflector{}
+	reflector.DefaultOptions = append(reflector.DefaultOptions,
+		jsonschema.InterceptSchema(func(params jsonschema.InterceptSchemaParams) (bool, error) {
+			if params.Value.Kind() == reflect.Struct {
+				params.Schema.AdditionalProperties = &noAdditional
+			}
+			return false, nil
+		}),
+		jsonschema.InterceptDefName(func(t reflect.Type, defaultDefName string) string {
+			return strings.TrimPrefix(defaultDefName, "Web")
+		}),
+	)
+
+	schema, err := reflector.Reflect(web.Settings{})
+	if err != nil {
+		return err
+	}
+
+	data, err := json.MarshalIndent(schema, "", "  ")
+	if err != nil {
+		return err
+	}
+
+	return os.WriteFile(webSettingsSchemaPath, append(data, '\n'), 0o600)
+}

cmd/generate.go

@@ -17,6 +17,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 
 	registerGenerateOpenAPI(generateCmd)
 	registerGenerateAuthz(generateCmd)
+	registerGenerateConfig(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -60,6 +60,14 @@ web:
   index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
+  # Settings exposed to the web.
+  settings:
+    posthog:
+      # Whether to enable PostHog in web.
+      enabled: true
+    appcues:
+      # Whether to enable Appcues in web.
+      enabled: true
 
 ##################### Cache #####################
 cache:
@@ -174,6 +182,11 @@ alertmanager:
     poll_interval: 1m
     # The URL under which Alertmanager is externally reachable (for example, if Alertmanager is served via a reverse proxy). Used for generating relative and absolute links back to Alertmanager itself.
     external_url: http://localhost:8080
+    # The list of globs from which SigNoz's alertmanager notification templates are loaded (e.g. the email.signoz.html layout).
+    # This mirrors the upstream alertmanager `templates` config option. The upstream default templates (default.tmpl, email.tmpl)
+    # are always loaded from the embedded alertmanager assets, so only SigNoz's own templates need to be listed here.
+    templates:
+      - /opt/signoz/conf/templates/alertmanager/*.gotmpl
     # The global configuration for the alertmanager. All the exahustive fields can be found in the upstream: https://github.com/prometheus/alertmanager/blob/efa05feffd644ba4accb526e98a8c6545d26a783/config/config.go#L833
     global:
       # ResolveTimeout is the time after which an alert is declared resolved if it has not been updated.

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule
@@ -5641,6 +5645,19 @@ components:
       type: object
     Sigv4SigV4Config:
       type: object
+    SpantypesEvent:
+      properties:
+        attributeMap:
+          additionalProperties: {}
+          type: object
+        isError:
+          type: boolean
+        name:
+          type: string
+        timeUnixNano:
+          minimum: 0
+          type: integer
+      type: object
     SpantypesFieldContext:
       enum:
       - attribute
@@ -5655,6 +5672,44 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableWaterfallTrace:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          nullable: true
+          type: array
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        hasMore:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesWaterfallSpan'
+          nullable: true
+          type: array
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -5682,6 +5737,50 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableWaterfall:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          nullable: true
+          type: array
+        limit:
+          minimum: 0
+          type: integer
+        selectedSpanId:
+          type: string
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
+    SpantypesSpanAggregation:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      type: object
+    SpantypesSpanAggregationResult:
+      properties:
+        aggregation:
+          $ref: '#/components/schemas/SpantypesSpanAggregationType'
+        field:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+        value:
+          additionalProperties:
+            minimum: 0
+            type: integer
+          nullable: true
+          type: object
+      type: object
+    SpantypesSpanAggregationType:
+      enum:
+      - span_count
+      - execution_time_percentage
+      - duration
+      type: string
     SpantypesSpanMapper:
       properties:
         config:
@@ -5812,6 +5911,78 @@ components:
           nullable: true
           type: string
       type: object
+    SpantypesWaterfallSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        db_name:
+          type: string
+        db_operation:
+          type: string
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          nullable: true
+          type: array
+        external_http_method:
+          type: string
+        external_http_url:
+          type: string
+        flags:
+          minimum: 0
+          type: integer
+        has_children:
+          type: boolean
+        has_error:
+          type: boolean
+        http_host:
+          type: string
+        http_method:
+          type: string
+        http_url:
+          type: string
+        is_remote:
+          type: string
+        kind_string:
+          type: string
+        level:
+          minimum: 0
+          type: integer
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        response_status_code:
+          type: string
+        span_id:
+          type: string
+        status_code:
+          type: integer
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        sub_tree_node_count:
+          minimum: 0
+          type: integer
+        time_unix:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+        trace_state:
+          type: string
+      type: object
     TelemetrytypesFieldContext:
       enum:
       - metric
@@ -5904,179 +6075,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesGettableWaterfallTrace:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregationResult'
-          nullable: true
-          type: array
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesPostableWaterfall:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesSpanAggregation'
-          nullable: true
-          type: array
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesSpanAggregation:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-      type: object
-    TracedetailtypesSpanAggregationResult:
-      properties:
-        aggregation:
-          $ref: '#/components/schemas/TracedetailtypesSpanAggregationType'
-        field:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-        value:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-      type: object
-    TracedetailtypesSpanAggregationType:
-      enum:
-      - span_count
-      - execution_time_percentage
-      - duration
-      type: string
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        time_unix:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -18896,7 +18894,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/TracedetailtypesPostableWaterfall'
+              $ref: '#/components/schemas/SpantypesPostableWaterfall'
       responses:
         "200":
           content:
@@ -18904,7 +18902,78 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/TracedetailtypesGettableWaterfallTrace'
+                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get waterfall view for a trace
+      tags:
+      - tracedetail
+  /api/v4/traces/{traceID}/waterfall:
+    post:
+      deprecated: false
+      description: Returns the waterfall view of spans including all spans if total
+        spans are under a limit, a max count otherwise. Aggregations are dropped compared
+        to v3
+      operationId: GetWaterfallV4
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableWaterfall'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
                   status:
                     type: string
                 required:

docs/config/web-settings.json

@@ -0,0 +1,42 @@
+{
+  "required": [
+    "posthog",
+    "appcues"
+  ],
+  "additionalProperties": false,
+  "definitions": {
+    "Appcues": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
+    },
+    "Posthog": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
+    }
+  },
+  "properties": {
+    "appcues": {
+      "$ref": "#/definitions/Appcues"
+    },
+    "posthog": {
+      "$ref": "#/definitions/Posthog"
+    }
+  },
+  "type": "object"
+}

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/awscloudprovider.go

@@ -54,11 +54,6 @@ func (provider *awscloudprovider) GetServiceDefinition(ctx context.Context, serv
 		return nil, err
 	}
 
-	// override cloud integration dashboard id
-	for index, dashboard := range serviceDef.Assets.Dashboards {
-		serviceDef.Assets.Dashboards[index].ID = cloudintegrationtypes.GetCloudIntegrationDashboardID(cloudintegrationtypes.CloudProviderTypeAWS, serviceID.StringValue(), dashboard.ID)
-	}
-
 	return serviceDef, nil
 }
 

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/azurecloudprovider.go

@@ -38,11 +38,6 @@ func (provider *azurecloudprovider) GetServiceDefinition(ctx context.Context, se
 		return nil, err
 	}
 
-	// override cloud integration dashboard id.
-	for index, dashboard := range serviceDef.Assets.Dashboards {
-		serviceDef.Assets.Dashboards[index].ID = cloudintegrationtypes.GetCloudIntegrationDashboardID(cloudintegrationtypes.CloudProviderTypeAzure, serviceID.StringValue(), dashboard.ID)
-	}
-
 	return serviceDef, nil
 }
 

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -3,7 +3,6 @@ package implcloudintegration
 import (
 	"context"
 	"fmt"
-	"sort"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -11,6 +10,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
@@ -23,6 +23,7 @@ import (
 
 type module struct {
 	store             cloudintegrationtypes.Store
+	dashboardModule   dashboard.Module
 	gateway           gateway.Gateway
 	zeus              zeus.Zeus
 	licensing         licensing.Licensing
@@ -34,6 +35,7 @@ type module struct {
 
 func NewModule(
 	store cloudintegrationtypes.Store,
+	dashboardModule dashboard.Module,
 	global global.Global,
 	zeus zeus.Zeus,
 	gateway gateway.Gateway,
@@ -44,6 +46,7 @@ func NewModule(
 ) (cloudintegration.Module, error) {
 	return &module{
 		store:             store,
+		dashboardModule:   dashboardModule,
 		global:            global,
 		zeus:              zeus,
 		gateway:           gateway,
@@ -254,7 +257,41 @@ func (module *module) DisconnectAccount(ctx context.Context, orgID valuer.UUID,
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	return module.store.RemoveAccount(ctx, orgID, accountID, provider)
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		services, err := module.store.ListServices(ctx, accountID)
+		if err != nil {
+			return err
+		}
+
+		sharedServices, err := module.store.ListSharedServices(ctx, orgID, provider, accountID)
+		if err != nil {
+			return err
+		}
+
+		for _, svc := range services {
+			svcCfg, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, svc.Config)
+			if err != nil {
+				return err
+			}
+			if !svcCfg.IsMetricsEnabled(provider) {
+				continue
+			}
+
+			if cloudintegrationtypes.IsServiceSharedWithMetricsEnabled(provider, sharedServices[svc.Type]) {
+				continue
+			}
+
+			if err := module.deprovisionDashboards(ctx, orgID, provider, svc.Type); err != nil {
+				return err
+			}
+		}
+
+		if err := module.store.DeleteServicesByCloudIntegrationID(ctx, orgID, accountID); err != nil {
+			return err
+		}
+
+		return module.store.RemoveAccount(ctx, orgID, accountID, provider)
+	})
 }
 
 func (module *module) ListServicesMetadata(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, integrationID valuer.UUID) ([]*cloudintegrationtypes.ServiceMetadata, error) {
@@ -331,12 +368,16 @@ func (module *module) GetService(ctx context.Context, orgID valuer.UUID, service
 
 			integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
 		}
+
+		if err := module.enrichDashboardIDs(ctx, orgID, provider, serviceID, serviceDefinition); err != nil {
+			return nil, err
+		}
 	}
 
 	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
 }
 
-func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
+func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
 	_, err := module.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())
@@ -357,10 +398,21 @@ func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, serv
 		return err
 	}
 
-	return module.store.CreateService(ctx, cloudintegrationtypes.NewStorableCloudIntegrationService(service, string(configJSON)))
+	metricsEnabled := service.Config.IsMetricsEnabled(provider)
+	storableService := cloudintegrationtypes.NewStorableCloudIntegrationService(service, string(configJSON))
+
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.CreateService(ctx, storableService); err != nil {
+			return err
+		}
+		if metricsEnabled {
+			return module.provisionDashboards(ctx, orgID, createdBy, creator, provider, service, serviceDefinition)
+		}
+		return nil
+	})
 }
 
-func (module *module) UpdateService(ctx context.Context, orgID valuer.UUID, integrationService *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
+func (module *module) UpdateService(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, integrationService *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
 	_, err := module.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())
@@ -381,43 +433,28 @@ func (module *module) UpdateService(ctx context.Context, orgID valuer.UUID, inte
 		return err
 	}
 
+	metricsEnabled := integrationService.Config.IsMetricsEnabled(provider)
 	storableService := cloudintegrationtypes.NewStorableCloudIntegrationService(integrationService, string(configJSON))
 
-	return module.store.UpdateService(ctx, storableService)
-}
-
-func (module *module) GetDashboardByID(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.Dashboard, error) {
-	_, err := module.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())
-	}
-
-	_, _, _, err = cloudintegrationtypes.ParseCloudIntegrationDashboardID(id)
-	if err != nil {
-		return nil, err
-	}
-
-	allDashboards, err := module.listDashboards(ctx, orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	for _, d := range allDashboards {
-		if d.ID == id {
-			return d, nil
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.UpdateService(ctx, storableService); err != nil {
+			return err
 		}
-	}
 
-	return nil, errors.New(errors.TypeNotFound, cloudintegrationtypes.ErrCodeCloudIntegrationNotFound, "cloud integration dashboard not found")
-}
+		if metricsEnabled {
+			return module.provisionDashboards(ctx, orgID, createdBy, creator, provider, integrationService, serviceDefinition)
+		}
 
-func (module *module) ListDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
-	_, err := module.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())
-	}
+		sharedServices, err := module.store.ListSharedServices(ctx, orgID, provider, integrationService.CloudIntegrationID)
+		if err != nil {
+			return err
+		}
+		if cloudintegrationtypes.IsServiceSharedWithMetricsEnabled(provider, sharedServices[integrationService.Type]) {
+			return nil
+		}
 
-	return module.listDashboards(ctx, orgID)
+		return module.deprovisionDashboards(ctx, orgID, provider, integrationService.Type)
+	})
 }
 
 func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
@@ -493,52 +530,73 @@ func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID,
 	return factorAPIKey.Key, nil
 }
 
-func (module *module) listDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
-	var allDashboards []*dashboardtypes.Dashboard
+// provisionDashboards creates dashboard and integration_dashboard rows for each dashboard in the service definition.
+// Must be called within a transaction (ctx carries the tx).
+func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, provider cloudintegrationtypes.CloudProviderType, service *cloudintegrationtypes.CloudIntegrationService, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
+	// TODO: DB calls are in for loop, can be optimized later.
+	for _, dashboard := range serviceDefinition.Assets.Dashboards {
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, service.Type, dashboard.ID)
 
-	for provider := range module.cloudProvidersMap {
-		cloudProvider, err := module.getCloudProvider(provider)
-		if err != nil {
-			return nil, err
+		existing, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
+		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		if existing != nil {
+			continue
 		}
 
-		connectedAccounts, err := module.store.ListConnectedAccounts(ctx, orgID, provider)
+		createdDashboard, err := module.dashboardModule.Create(ctx, orgID, createdBy, creator, dashboardtypes.SourceIntegration, dashboardtypes.PostableDashboard(dashboard.Definition))
 		if err != nil {
-			return nil, err
+			return err
 		}
 
-		for _, storableAccount := range connectedAccounts {
-			storedServices, err := module.store.ListServices(ctx, storableAccount.ID)
-			if err != nil {
-				return nil, err
-			}
-
-			for _, storedSvc := range storedServices {
-				serviceConfig, err := cloudintegrationtypes.NewServiceConfigFromJSON(provider, storedSvc.Config)
-				if err != nil || !serviceConfig.IsMetricsEnabled(provider) {
-					continue
-				}
-
-				svcDef, err := cloudProvider.GetServiceDefinition(ctx, storedSvc.Type)
-				if err != nil || svcDef == nil {
-					continue
-				}
-
-				dashboards := cloudintegrationtypes.GetDashboardsFromAssets(
-					storedSvc.Type.StringValue(),
-					orgID,
-					provider,
-					storableAccount.CreatedAt,
-					svcDef.Assets,
-				)
-				allDashboards = append(allDashboards, dashboards...)
-			}
+		integrationDashboard := cloudintegrationtypes.NewStorableIntegrationDashboard(createdDashboard.ID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
+		if err := module.store.CreateIntegrationDashboard(ctx, integrationDashboard); err != nil {
+			return err
 		}
 	}
 
-	sort.Slice(allDashboards, func(i, j int) bool {
-		return allDashboards[i].ID < allDashboards[j].ID
-	})
-
-	return allDashboards, nil
+	return nil
+}
+
+// deprovisionDashboards deletes all dashboard and integration_dashboard rows for the given service.
+// make sure to call this within a transaction.
+func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID) error {
+	slugPrefix := cloudintegrationtypes.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
+	rows, err := module.store.ListIntegrationDashboardsBySlugPrefix(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slugPrefix)
+	if err != nil {
+		return err
+	}
+	for _, row := range rows {
+		dashID, err := valuer.NewUUID(row.DashboardID)
+		if err != nil {
+			return err
+		}
+
+		if err := module.store.DeleteIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, row.Slug); err != nil {
+			return err
+		}
+
+		if err := module.dashboardModule.DeleteUnsafe(ctx, orgID, dashID); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+// enrichDashboardIDs replaces the raw dashboard name in each Dashboard.ID with the provisioned UUID.
+// TODO: remove this hack and send idiomatic response to client.
+func (module *module) enrichDashboardIDs(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
+	for i, d := range serviceDefinition.Assets.Dashboards {
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
+		row, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
+		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				continue
+			}
+			return err
+		}
+		serviceDefinition.Assets.Dashboards[i].ID = row.DashboardID
+	}
+	return nil
 }

ee/modules/dashboard/impldashboard/module.go

@@ -162,24 +162,11 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
 
-	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		err := module.store.DeletePublic(ctx, id.String())
-		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-			return err
-		}
+	return module.delete(ctx, orgID, id)
+}
 
-		err = module.store.Delete(ctx, orgID, id)
-		if err != nil {
-			return err
-		}
-
-		return nil
-	})
-	if err != nil {
-		return err
-	}
-
-	return nil
+func (module *module) DeleteUnsafe(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.delete(ctx, orgID, id)
 }
 
 func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
@@ -221,8 +208,8 @@ func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 	return stats, nil
 }
 
-func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
-	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, data)
+func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, source, data)
 }
 
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
@@ -244,3 +231,12 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
+
+func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		return module.store.Delete(ctx, orgID, id)
+	})
+}

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

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -24,7 +23,6 @@ type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
-	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	GatewayUrl                    string
 	// Querier Influx Interval
@@ -42,7 +40,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		IntegrationsController:        opts.IntegrationsController,
-		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
@@ -91,17 +88,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 }
 
-func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
-
-	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
-
-	router.HandleFunc(
-		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
-		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
-	).Methods(http.MethodGet)
-
-}
-
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
 	versionResponse := basemodel.GetVersionResponse{
 		Version:        version.Info.Version(),

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

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

ee/query-service/app/server.go

@@ -30,7 +30,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -86,20 +85,13 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	// initiate opamp
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
-	integrationsController, err := integrations.NewController(signoz.SQLStore)
+	integrationsController, err := integrations.NewController(signoz.SQLStore, signoz.Modules.Dashboard)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create integrations controller: %w", err,
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"couldn't create cloud provider integrations controller: %w", err,
-		)
-	}
-
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
@@ -134,7 +126,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		DataConnector:                 reader,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
-		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
 		GatewayUrl:                    config.Gateway.URL.String(),
@@ -200,7 +191,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
-	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)

frontend/index.html

@@ -94,6 +94,19 @@
 				}
 			})();
 		</script>
+		<script type="application/json" id="signoz-boot-settings">
+			[[.Settings]]
+		</script>
+		<script>
+			try {
+				var _el = document.getElementById('signoz-boot-settings');
+				window.signozBootData = {
+					settings: _el ? JSON.parse(_el.textContent) : null,
+				};
+			} catch (e) {
+				window.signozBootData = { settings: null };
+			}
+		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 
@@ -135,7 +148,10 @@
 		</script>
 		<script>
 			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
-			if (APPCUES_APP_ID) {
+			var appcuesSettings =
+				((window.signozBootData || {}).settings || {}).appcues || {};
+			var appcuesEnabled = appcuesSettings.enabled !== false;
+			if (APPCUES_APP_ID && appcuesEnabled) {
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;

frontend/jest.config.ts

@@ -47,10 +47,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)/)',
+		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -24,7 +24,8 @@
     "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"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
+    "generate:config:web-settings": "json2ts ../docs/config/web-settings.json -o src/types/generated/webSettings.ts --style.useTabs --style.tabWidth=1 --style.singleQuote --bannerComment '/* AUTO GENERATED FILE - DO NOT EDIT - GENERATED FROM docs/config/web-settings.json */'"
   },
   "engines": {
     "node": ">=22.0.0",
@@ -49,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.21",
+    "@signozhq/ui": "0.0.22",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -160,8 +161,8 @@
     "@testing-library/user-event": "14.4.3",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "4.2.2",
-    "@types/event-source-polyfill": "^1.0.0",
     "@types/d3-hierarchy": "1.1.11",
+    "@types/event-source-polyfill": "^1.0.0",
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
@@ -187,6 +188,7 @@
     "is-ci": "^3.0.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
+    "json-schema-to-typescript": "^15.0.4",
     "lint-staged": "^17.0.4",
     "msw": "1.3.2",
     "orval": "8.9.1",
@@ -241,4 +243,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/plugins/rules/no-antd-components.mjs

@@ -19,8 +19,6 @@ const BANNED_COMPONENTS = {
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
-	Select:
-		'Use SelectSimple / ComboboxSimple from @signozhq/ui/select or @signozhq/ui/combobox instead of antd Select.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.21
-        version: 0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.22
+        version: 0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -449,6 +449,9 @@ importers:
       jest-styled-components:
         specifier: ^7.2.0
         version: 7.2.0(styled-components@5.3.11(react-dom@18.2.0(react@18.2.0))(react-is@19.2.6)(react@18.2.0))
+      json-schema-to-typescript:
+        specifier: ^15.0.4
+        version: 15.0.4
       lint-staged:
         specifier: ^17.0.4
         version: 17.0.4
@@ -457,7 +460,7 @@ importers:
         version: 1.3.2(typescript@5.9.3)
       orval:
         specifier: 8.9.1
-        version: 8.9.1(typescript@5.9.3)
+        version: 8.9.1(prettier@3.8.3)(typescript@5.9.3)
       oxfmt:
         specifier: 0.47.0
         version: 0.47.0
@@ -545,6 +548,10 @@ packages:
     peerDependencies:
       react: '>=16.9.0'
 
+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    resolution: {integrity: sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==}
+    engines: {node: '>= 16'}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -1991,6 +1998,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@jsdevtools/ono@7.1.3':
+    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
+
   '@keyv/bigmap@1.3.1':
     resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
     engines: {node: '>= 18'}
@@ -3269,8 +3279,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.21':
-    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
+  '@signozhq/ui@0.0.22':
+    resolution: {integrity: sha512-CJDyA4H+uXG/U2/d7/nRMNY6WIW0YWc843mfzUQALjm+xOhbO4T+qt67THjV4s1wTMs1cZLkmScbMddf+hXLIQ==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -6066,6 +6076,11 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  json-schema-to-typescript@15.0.4:
+    resolution: {integrity: sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -7104,6 +7119,11 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier@3.8.3:
+    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -9044,6 +9064,12 @@ snapshots:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.0
 
+  '@apidevtools/json-schema-ref-parser@11.9.3':
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.15
+      js-yaml: 4.1.1
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -10798,6 +10824,8 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
     optional: true
 
+  '@jsdevtools/ono@7.1.3': {}
+
   '@keyv/bigmap@1.3.1(keyv@5.6.0)':
     dependencies:
       hashery: 1.5.1
@@ -12013,7 +12041,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -15374,6 +15402,18 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
+  json-schema-to-typescript@15.0.4:
+    dependencies:
+      '@apidevtools/json-schema-ref-parser': 11.9.3
+      '@types/json-schema': 7.0.15
+      '@types/lodash': 4.17.24
+      is-glob: 4.0.3
+      js-yaml: 4.1.1
+      lodash: 4.18.1
+      minimist: 1.2.8
+      prettier: 3.8.3
+      tinyglobby: 0.2.15
+
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -16290,7 +16330,7 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
-  orval@8.9.1(typescript@5.9.3):
+  orval@8.9.1(prettier@3.8.3)(typescript@5.9.3):
     dependencies:
       '@commander-js/extra-typings': 14.0.0(commander@14.0.2)
       '@orval/angular': 8.9.1(typescript@5.9.3)
@@ -16321,6 +16361,8 @@ snapshots:
       typedoc: 0.28.19(typescript@5.9.3)
       typedoc-plugin-coverage: 4.0.2(typedoc@0.28.19(typescript@5.9.3))
       typedoc-plugin-markdown: 4.11.0(typedoc@0.28.19(typescript@5.9.3))
+    optionalDependencies:
+      prettier: 3.8.3
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
@@ -16581,6 +16623,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier@3.8.3: {}
+
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1

frontend/public/locales/en-GB/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "Select one or more channels",
+	"placeholder_channel_select": "select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/public/locales/en/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "Select one or more channels",
+	"placeholder_channel_select": "select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/src/AppRoutes/index.tsx

@@ -35,6 +35,7 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
+import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -332,7 +333,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (process.env.POSTHOG_KEY) {
+			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
 				posthog.init(process.env.POSTHOG_KEY, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well

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

@@ -225,6 +225,10 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1714,6 +1718,10 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {
@@ -6655,6 +6663,28 @@ export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
 	name: string;
 }
 
+export type SpantypesEventDTOAttributeMap = { [key: string]: unknown };
+
+export interface SpantypesEventDTO {
+	/**
+	 * @type object
+	 */
+	attributeMap?: SpantypesEventDTOAttributeMap;
+	/**
+	 * @type boolean
+	 */
+	isError?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timeUnixNano?: number;
+}
+
 export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
@@ -6721,6 +6751,219 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export enum SpantypesSpanAggregationTypeDTO {
+	span_count = 'span_count',
+	execution_time_percentage = 'execution_time_percentage',
+	duration = 'duration',
+}
+export type SpantypesSpanAggregationResultDTOValueAnyOf = {
+	[key: string]: number;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanAggregationResultDTOValue =
+	SpantypesSpanAggregationResultDTOValueAnyOf | null;
+
+export interface SpantypesSpanAggregationResultDTO {
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	/**
+	 * @type object,null
+	 */
+	value?: SpantypesSpanAggregationResultDTOValue;
+}
+
+export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesWaterfallSpanDTOAttributes =
+	SpantypesWaterfallSpanDTOAttributesAnyOf | null;
+
+export type SpantypesWaterfallSpanDTOResourceAnyOf = { [key: string]: string };
+
+/**
+ * @nullable
+ */
+export type SpantypesWaterfallSpanDTOResource =
+	SpantypesWaterfallSpanDTOResourceAnyOf | null;
+
+export interface SpantypesWaterfallSpanDTO {
+	/**
+	 * @type object,null
+	 */
+	attributes?: SpantypesWaterfallSpanDTOAttributes;
+	/**
+	 * @type string
+	 */
+	db_name?: string;
+	/**
+	 * @type string
+	 */
+	db_operation?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano?: number;
+	/**
+	 * @type array,null
+	 */
+	events?: SpantypesEventDTO[] | null;
+	/**
+	 * @type string
+	 */
+	external_http_method?: string;
+	/**
+	 * @type string
+	 */
+	external_http_url?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	flags?: number;
+	/**
+	 * @type boolean
+	 */
+	has_children?: boolean;
+	/**
+	 * @type boolean
+	 */
+	has_error?: boolean;
+	/**
+	 * @type string
+	 */
+	http_host?: string;
+	/**
+	 * @type string
+	 */
+	http_method?: string;
+	/**
+	 * @type string
+	 */
+	http_url?: string;
+	/**
+	 * @type string
+	 */
+	is_remote?: string;
+	/**
+	 * @type string
+	 */
+	kind_string?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id?: string;
+	/**
+	 * @type object,null
+	 */
+	resource?: SpantypesWaterfallSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	response_status_code?: string;
+	/**
+	 * @type string
+	 */
+	span_id?: string;
+	/**
+	 * @type integer
+	 */
+	status_code?: number;
+	/**
+	 * @type string
+	 */
+	status_code_string?: string;
+	/**
+	 * @type string
+	 */
+	status_message?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	sub_tree_node_count?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix?: number;
+	/**
+	 * @type string
+	 */
+	trace_id?: string;
+	/**
+	 * @type string
+	 */
+	trace_state?: string;
+}
+
+export interface SpantypesGettableWaterfallTraceDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: SpantypesSpanAggregationResultDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis?: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint?: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName?: string;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesWaterfallSpanDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount?: number;
+	/**
+	 * @type array,null
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -6770,6 +7013,31 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 	name: string;
 }
 
+export interface SpantypesSpanAggregationDTO {
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
+}
+
+export interface SpantypesPostableWaterfallDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: SpantypesSpanAggregationDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+	/**
+	 * @type array,null
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
 export interface SpantypesSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -6878,281 +7146,6 @@ export interface TelemetrytypesGettableFieldValuesDTO {
 	values: TelemetrytypesTelemetryFieldValuesDTO;
 }
 
-export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
-
-export interface TracedetailtypesEventDTO {
-	/**
-	 * @type object
-	 */
-	attributeMap?: TracedetailtypesEventDTOAttributeMap;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timeUnixNano?: number;
-}
-
-export type TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf =
-	{ [key: string]: number };
-
-/**
- * @nullable
- */
-export type TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap =
-	TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMapAnyOf | null;
-
-export enum TracedetailtypesSpanAggregationTypeDTO {
-	span_count = 'span_count',
-	execution_time_percentage = 'execution_time_percentage',
-	duration = 'duration',
-}
-export type TracedetailtypesSpanAggregationResultDTOValueAnyOf = {
-	[key: string]: number;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesSpanAggregationResultDTOValue =
-	TracedetailtypesSpanAggregationResultDTOValueAnyOf | null;
-
-export interface TracedetailtypesSpanAggregationResultDTO {
-	aggregation?: TracedetailtypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
-	/**
-	 * @type object,null
-	 */
-	value?: TracedetailtypesSpanAggregationResultDTOValue;
-}
-
-export type TracedetailtypesWaterfallSpanDTOAttributesAnyOf = {
-	[key: string]: unknown;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOAttributes =
-	TracedetailtypesWaterfallSpanDTOAttributesAnyOf | null;
-
-export type TracedetailtypesWaterfallSpanDTOResourceAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOResource =
-	TracedetailtypesWaterfallSpanDTOResourceAnyOf | null;
-
-export interface TracedetailtypesWaterfallSpanDTO {
-	/**
-	 * @type object,null
-	 */
-	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array,null
-	 */
-	events?: TracedetailtypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type object,null
-	 */
-	resource?: TracedetailtypesWaterfallSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	time_unix?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
-export interface TracedetailtypesGettableWaterfallTraceDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: TracedetailtypesSpanAggregationResultDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type object,null
-	 */
-	serviceNameToTotalDurationMap?: TracedetailtypesGettableWaterfallTraceDTOServiceNameToTotalDurationMap;
-	/**
-	 * @type array,null
-	 */
-	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-	/**
-	 * @type array,null
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-export interface TracedetailtypesSpanAggregationDTO {
-	aggregation?: TracedetailtypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
-}
-
-export interface TracedetailtypesPostableWaterfallDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: TracedetailtypesSpanAggregationDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-	/**
-	 * @type array,null
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
 export interface TypesChangePasswordRequestDTO {
 	/**
 	 * @type string
@@ -9232,7 +9225,18 @@ export type GetWaterfallPathParameters = {
 	traceID: string;
 };
 export type GetWaterfall200 = {
-	data: TracedetailtypesGettableWaterfallTraceDTO;
+	data: SpantypesGettableWaterfallTraceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetWaterfallV4PathParameters = {
+	traceID: string;
+};
+export type GetWaterfallV4200 = {
+	data: SpantypesGettableWaterfallTraceDTO;
 	/**
 	 * @type string
 	 */

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

@@ -14,8 +14,10 @@ import type {
 import type {
 	GetWaterfall200,
 	GetWaterfallPathParameters,
+	GetWaterfallV4200,
+	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	TracedetailtypesPostableWaterfallDTO,
+	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -27,14 +29,14 @@ import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
  */
 export const getWaterfall = (
 	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesPostableWaterfallDTO?: BodyType<TracedetailtypesPostableWaterfallDTO>,
+	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetWaterfall200>({
 		url: `/api/v3/traces/${traceID}/waterfall`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesPostableWaterfallDTO,
+		data: spantypesPostableWaterfallDTO,
 		signal,
 	});
 };
@@ -48,7 +50,7 @@ export const getGetWaterfallMutationOptions = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -57,7 +59,7 @@ export const getGetWaterfallMutationOptions = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
@@ -74,7 +76,7 @@ export const getGetWaterfallMutationOptions = <
 		Awaited<ReturnType<typeof getWaterfall>>,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -89,7 +91,7 @@ export type GetWaterfallMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getWaterfall>>
 >;
 export type GetWaterfallMutationBody =
-	| BodyType<TracedetailtypesPostableWaterfallDTO>
+	| BodyType<SpantypesPostableWaterfallDTO>
 	| undefined;
 export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
 
@@ -105,7 +107,7 @@ export const useGetWaterfall = <
 		TError,
 		{
 			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
 		},
 		TContext
 	>;
@@ -114,9 +116,108 @@ export const useGetWaterfall = <
 	TError,
 	{
 		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<TracedetailtypesPostableWaterfallDTO>;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
 	},
 	TContext
 > => {
 	return useMutation(getGetWaterfallMutationOptions(options));
 };
+/**
+ * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3
+ * @summary Get waterfall view for a trace
+ */
+export const getWaterfallV4 = (
+	{ traceID }: GetWaterfallV4PathParameters,
+	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetWaterfallV4200>({
+		url: `/api/v4/traces/${traceID}/waterfall`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableWaterfallDTO,
+		signal,
+	});
+};
+
+export const getGetWaterfallV4MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfallV4>>,
+		TError,
+		{
+			pathParams: GetWaterfallV4PathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getWaterfallV4>>,
+	TError,
+	{
+		pathParams: GetWaterfallV4PathParameters;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getWaterfallV4'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getWaterfallV4>>,
+		{
+			pathParams: GetWaterfallV4PathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getWaterfallV4(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetWaterfallV4MutationResult = NonNullable<
+	Awaited<ReturnType<typeof getWaterfallV4>>
+>;
+export type GetWaterfallV4MutationBody =
+	| BodyType<SpantypesPostableWaterfallDTO>
+	| undefined;
+export type GetWaterfallV4MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get waterfall view for a trace
+ */
+export const useGetWaterfallV4 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfallV4>>,
+		TError,
+		{
+			pathParams: GetWaterfallV4PathParameters;
+			data?: BodyType<SpantypesPostableWaterfallDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getWaterfallV4>>,
+	TError,
+	{
+		pathParams: GetWaterfallV4PathParameters;
+		data?: BodyType<SpantypesPostableWaterfallDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetWaterfallV4MutationOptions(options));
+};

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Row } from 'antd';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Row, Select, Spin } from 'antd';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
 } from 'components/CeleryTask/CeleryUtils';
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
+import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -48,7 +48,7 @@ export function FilterSelect({
 			: getValuesFromQueryParams(queryParam, urlQuery) || [];
 
 	// Memoize options to include the typed value if not present
-	const mergedOptions = useMemo<ComboboxSimpleItem[]>(() => {
+	const mergedOptions = useMemo(() => {
 		if (
 			!!searchValue.trim().length &&
 			!options.some((opt) => opt.value === searchValue)
@@ -84,16 +84,35 @@ export function FilterSelect({
 		],
 	);
 
+	// Update searchValue on user input
+	const handleSearchInput = (input: string): void => {
+		setSearchValue(input);
+		handleSearch(input);
+	};
+
 	return (
-		<ComboboxSimple
+		<Select
 			key={filterType.toString()}
 			placeholder={placeholder}
-			multiple={isMultiple}
-			items={mergedOptions}
+			showSearch
+			{...(isMultiple ? { mode: 'multiple' } : {})}
+			options={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
+			onSearch={handleSearchInput}
+			maxTagCount={4}
+			allowClear
+			maxTagPlaceholder={SelectMaxTagPlaceholder}
 			value={selectValue}
-			emptyPlaceholder={`No ${placeholder} found`}
+			notFoundContent={
+				isFetching ? (
+					<span>
+						<Spin size="small" /> Loading...
+					</span>
+				) : (
+					<span>No {placeholder} found</span>
+				)
+			}
 			onChange={handleSelectChange}
 		/>
 	);

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,7 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -26,18 +27,30 @@ function CeleryTaskConfigOptions(): JSX.Element {
 				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
 					Task Name
 				</Typography.Text>
-				<ComboboxSimple
+				<Select
 					placeholder="Task Name"
-					multiple
-					items={options}
+					showSearch
+					mode="multiple"
+					options={options}
 					loading={isFetching}
 					className="config-select-option"
+					onSearch={handleSearch}
+					maxTagCount={4}
+					maxTagPlaceholder={SelectMaxTagPlaceholder}
 					value={getValuesFromQueryParams(QueryParams.taskName, urlQuery) || []}
-					emptyPlaceholder="No Task Name found"
+					notFoundContent={
+						isFetching ? (
+							<span>
+								<Spin size="small" /> Loading...
+							</span>
+						) : (
+							<span>No Task Name found</span>
+						)
+					}
 					onChange={(value): void => {
 						handleSearch('');
 						setQueryParamsFromOptions(
-							value as string[],
+							value,
 							urlQuery,
 							history,
 							location,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -21,7 +21,7 @@ export interface Filters {
 }
 
 export interface GetAllFiltersResponse {
-	options: ComboboxSimpleItem[];
+	options: DefaultOptionType[];
 	isFetching: boolean;
 }
 

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -17,7 +17,7 @@ export const useCeleryFilterOptions = (
 	searchText: string;
 	handleSearch: (value: string) => void;
 	isFetching: boolean;
-	options: ComboboxSimpleItem[];
+	options: DefaultOptionType[];
 } => {
 	const [searchText, setSearchText] = useState<string>('');
 	const { isFetching, options } = useGetAllFilters({

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -5,25 +5,17 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import {
-	Combobox,
-	ComboboxCommand,
-	ComboboxContent,
-	ComboboxEmpty,
-	ComboboxItem,
-	ComboboxList,
-	ComboboxMultiTrigger,
-	ComboboxPill,
-} from '@signozhq/ui/combobox';
-import { Tag, Tooltip } from 'antd';
+import { Select, Tag, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
+import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
 import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
 import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
@@ -46,6 +38,7 @@ import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -54,6 +47,7 @@ import {
 	IBuilderQuery,
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
@@ -99,6 +93,8 @@ function ClientSideQBSearch(
 
 	const isDarkMode = useIsDarkMode();
 
+	const selectRef = useRef<BaseSelectRef>(null);
+
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 
 	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
@@ -218,7 +214,7 @@ function ClientSideQBSearch(
 	}, []);
 
 	const onInputKeyDownHandler = useCallback(
-		(event: KeyboardEvent<HTMLInputElement>): void => {
+		(event: KeyboardEvent<Element>): void => {
 			if (event.key === 'Backspace' && !searchValue) {
 				event.stopPropagation();
 				setTags((prev) => prev.slice(0, -1));
@@ -520,23 +516,29 @@ function ClientSideQBSearch(
 		[tags],
 	);
 
-	const renderPill = (value: string, index: number): React.ReactElement => {
+	const onTagRender = ({
+		value,
+		closable,
+		onClose,
+	}: CustomTagProps): React.ReactElement => {
 		const { tagOperator } = getTagToken(value);
 		const isInNin = isInNInOperator(tagOperator);
 		const chipValue = isInNin
 			? value?.trim()?.replace(/,\s*$/, '')
 			: value?.trim();
 
-		const tagDetails = tags[index];
+		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
+		const tagDetails = tags[indexInQueryTags];
 
 		const onCloseHandler = (): void => {
+			onClose();
 			setSearchValue('');
 			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
 		};
 
-		const tagEditHandler = (next: string): void => {
+		const tagEditHandler = (value: string): void => {
 			setCurrentFilterItem(tagDetails);
-			setSearchValue(next);
+			setSearchValue(value);
 			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
 			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
 		};
@@ -544,13 +546,12 @@ function ClientSideQBSearch(
 		const isDisabled = !!searchValue;
 
 		return (
-			<ComboboxPill
-				key={`${value}-${index}`}
-				value={value}
-				onRemove={onCloseHandler}
-				className="qb-search-bar-tokenised-tags"
-			>
-				<Tag closable={false} className={tagDetails?.key?.type || ''}>
+			<span className="qb-search-bar-tokenised-tags">
+				<Tag
+					closable={!searchValue && closable}
+					onClose={onCloseHandler}
+					className={tagDetails?.key?.type || ''}
+				>
 					<Tooltip title={chipValue}>
 						<TypographyText
 							$isInNin={isInNin}
@@ -566,7 +567,7 @@ function ClientSideQBSearch(
 						</TypographyText>
 					</Tooltip>
 				</Tag>
-			</ComboboxPill>
+			</span>
 		);
 	};
 
@@ -587,73 +588,59 @@ function ClientSideQBSearch(
 		);
 	}, [isDarkMode, isOpen, suffixIcon]);
 
-	const handleItemSelect = (rawValue: string): void => {
-		handleDropdownSelect(rawValue);
-		setIsOpen(true);
-	};
-
-	const handleInputKeyDownWrapper = (
-		e: KeyboardEvent<HTMLInputElement>,
-	): void => {
-		onInputKeyDownHandler(e);
-	};
-
 	return (
-		<div className="query-builder-search-v2" style={selectStyle}>
-			<Combobox open={isOpen} onOpenChange={setIsOpen}>
-				<ComboboxMultiTrigger
-					id="client-side-qb-search-trigger"
-					testId="client-side-qb-search"
-					className={className ?? 'query-builder-search client-side-qb-search'}
-					placeholder={placeholder ?? PLACEHOLDER}
-					inputValue={searchValue}
-					onInputChange={handleSearch}
-					onKeyDown={handleInputKeyDownWrapper}
-					onFocus={(): void => setIsOpen(true)}
-					disabled={!attributeKeys.length}
-				>
-					{queryTags.map((tagValue, idx) => renderPill(tagValue, idx))}
-				</ComboboxMultiTrigger>
-				<ComboboxContent
-					onCloseAutoFocus={(): void => {
-						handleOnBlur();
-					}}
-				>
-					<ComboboxCommand shouldFilter={false}>
-						<ComboboxList>
-							{dropdownOptions.map((option) => {
-								let val = option.value as unknown as string;
-								try {
-									if (isObject(option.value)) {
-										val = JSON.stringify(option.value);
-									}
-								} catch {
-									val = String(option.value);
-								}
-								const itemKey = isObject(val) ? `select-option` : String(val);
-								return (
-									<ComboboxItem
-										key={itemKey}
-										value={String(val)}
-										onSelect={(): void => handleItemSelect(String(val))}
-									>
-										<Suggestions
-											label={option.label}
-											value={option.value}
-											option={currentState}
-											searchValue={searchValue}
-										/>
-									</ComboboxItem>
-								);
-							})}
-							<ComboboxEmpty>No results found.</ComboboxEmpty>
-						</ComboboxList>
-					</ComboboxCommand>
-				</ComboboxContent>
-			</Combobox>
-			<div className="qb-search-suffix" aria-hidden>
-				{suffixIconContent}
-			</div>
+		<div className="query-builder-search-v2 ">
+			<Select
+				ref={selectRef}
+				getPopupContainer={popupContainer}
+				virtual={false}
+				showSearch
+				tagRender={onTagRender}
+				transitionName=""
+				choiceTransitionName=""
+				filterOption={false}
+				open={isOpen}
+				suffixIcon={suffixIconContent}
+				onDropdownVisibleChange={setIsOpen}
+				autoClearSearchValue={false}
+				mode="multiple"
+				placeholder={placeholder}
+				value={queryTags}
+				searchValue={searchValue}
+				className={className}
+				rootClassName="query-builder-search client-side-qb-search"
+				disabled={!attributeKeys.length}
+				style={selectStyle}
+				onSearch={handleSearch}
+				onSelect={handleDropdownSelect}
+				onInputKeyDown={onInputKeyDownHandler}
+				notFoundContent={null}
+				showAction={['focus']}
+				onBlur={handleOnBlur}
+			>
+				{dropdownOptions.map((option) => {
+					let val = option.value;
+					try {
+						if (isObject(option.value)) {
+							val = JSON.stringify(option.value);
+						} else {
+							val = option.value;
+						}
+					} catch {
+						val = option.value;
+					}
+					return (
+						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
+							<Suggestions
+								label={option.label}
+								value={option.value}
+								option={currentState}
+								searchValue={searchValue}
+							/>
+						</Select.Option>
+					);
+				})}
+			</Select>
 		</div>
 	);
 }

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,15 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Dropdown, MenuProps, Popover, Row, Space } from 'antd';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -23,7 +31,11 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
 import SaveViewWithName from './SaveViewWithName';
-import { ExplorerCardHeadContainer, OffSetCol } from './styles';
+import {
+	DropDownOverlay,
+	ExplorerCardHeadContainer,
+	OffSetCol,
+} from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
 import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
@@ -152,26 +164,6 @@ function ExplorerCard({
 
 	const showSaveView = false;
 
-	const viewItems = useMemo(
-		() =>
-			(viewsData?.data.data ?? []).map((view) => ({
-				value: view.name,
-				label: (
-					<MenuItemGenerator
-						viewName={view.name}
-						viewKey={viewKey}
-						createdBy={view.createdBy}
-						uuid={view.id}
-						refetchAllView={refetchAllView}
-						viewData={viewsData?.data.data ?? []}
-						sourcePage={sourcepage}
-					/>
-				),
-				displayValue: view.name,
-			})),
-		[refetchAllView, sourcepage, viewKey, viewsData?.data.data],
-	);
-
 	return (
 		<>
 			{showSaveView && (
@@ -191,12 +183,30 @@ function ExplorerCard({
 							<Space size="large">
 								{viewsData?.data.data && viewsData?.data.data.length && (
 									<Space>
-										<ComboboxSimple
+										<Select
+											getPopupContainer={popupContainer}
 											loading={isLoading || isRefetching}
+											showSearch
 											placeholder="Select a view"
-											items={viewItems}
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
 											value={viewName || undefined}
-										/>
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.id} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.id}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
 									</Space>
 								)}
 								{isQueryUpdated && (

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,28 +35,21 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		border-radius: 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 25px;
-
-		&.input__has-label-after {
-			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-
-		&.input__has-close-button {
-			border-right: none;
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
+		line-height: 27px;
 
 		&::placeholder {
-			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -70,24 +63,25 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		height: 100%;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		height: 38px;
 		width: 38px;
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 2px;
-			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-			background: var(--input-with-label-background-color, var(--l2-background));
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
 
 		.label {
 			border-left: none;
-			border-radius: 0px 2px 2px 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -44,10 +44,7 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className={cx('input', {
-					'input__has-label-after': !labelAfter,
-					'input__has-close-button': !!onClose,
-				})}
+				className="input"
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
-import { Plus, Trash2, X } from '@signozhq/icons';
+import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
 import { toast } from '@signozhq/ui/sonner';
+import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
@@ -15,6 +15,7 @@ import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
 import { getBaseUrl } from 'utils/basePath';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './InviteMembersModal.styles.scss';
@@ -253,17 +254,18 @@ function InviteMembersModal({
 										)}
 									</div>
 									<div className="team-member-cell role-cell">
-										<SelectSimple
+										<Select
 											value={row.role || undefined}
 											onChange={(role): void => updateRole(row.id, role as ROLES)}
 											className="team-member-role-select"
 											placeholder="Select roles"
-											items={[
-												{ value: 'VIEWER', label: 'Viewer' },
-												{ value: 'EDITOR', label: 'Editor' },
-												{ value: 'ADMIN', label: 'Admin' },
-											]}
-										/>
+											suffixIcon={<ChevronDown size={14} />}
+											getPopupContainer={popupContainer}
+										>
+											<Select.Option value="VIEWER">Viewer</Select.Option>
+											<Select.Option value="EDITOR">Editor</Select.Option>
+											<Select.Option value="ADMIN">Admin</Select.Option>
+										</Select>
 									</div>
 									<div className="team-member-cell action-cell">
 										{rows.length > 1 && (

frontend/src/components/Logs/ListLogView/index.tsx

@@ -5,7 +5,10 @@ import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -196,7 +199,7 @@ function ListLogView({
 							{updatedSelecedFields.some((field) => field.name === 'body') && (
 								<LogGeneralField
 									fieldKey="Log"
-									fieldValue={flattenLogData.body}
+									fieldValue={getBodyDisplayString(logData.body)}
 									linesPerRow={linesPerRow}
 									fontSize={fontSize}
 								/>

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
@@ -113,11 +113,15 @@ function OptionsMenu({
 
 	function handleColumnSelection(
 		currentIndex: number,
-		optionsData: ComboboxSimpleItem[],
+		optionsData: DefaultOptionType[],
 	): void {
+		const currentItem = optionsData[currentIndex];
 		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect && selectedValue) {
-			addColumn?.onSelect(selectedValue);
+		if (addColumn && addColumn?.onSelect) {
+			addColumn?.onSelect(selectedValue, {
+				label: currentItem.label,
+				disabled: false,
+			});
 
 			// if the last element is selected then select the previous one
 			if (currentIndex === itemLength - 1) {
@@ -171,7 +175,7 @@ function OptionsMenu({
 			}
 			case 'Enter':
 				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData as ComboboxSimpleItem[]);
+				handleColumnSelection(currentIndex, optionsData);
 				break;
 			default:
 				break;
@@ -313,10 +317,7 @@ function OptionsMenu({
 									}}
 									onClick={(eve): void => {
 										eve.stopPropagation();
-										handleColumnSelection(
-											index,
-											(addColumn?.options || []) as ComboboxSimpleItem[],
-										);
+										handleColumnSelection(index, addColumn?.options || []);
 									}}
 								>
 									<div className="name">

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -10,8 +10,7 @@ import {
 	Loader,
 	X,
 } from '@signozhq/icons';
-import { Modal, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -182,8 +181,8 @@ function AttributeCheckList({
 	const [filter, setFilter] = useState<AttributesFilters>(AttributesFilters.ALL);
 	const [treeData, setTreeData] = useState<TreeDataNode[]>([]);
 
-	const handleFilterChange = (value: string | string[]): void => {
-		setFilter(value as AttributesFilters);
+	const handleFilterChange = (value: AttributesFilters): void => {
+		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const history = useHistory();
@@ -238,11 +237,11 @@ function AttributeCheckList({
 				</div>
 			) : (
 				<div className="modal-content">
-					<SelectSimple
+					<Select
 						defaultValue={AttributesFilters.ALL}
 						className="attribute-select"
 						onChange={handleFilterChange}
-						items={[
+						options={[
 							{
 								value: AttributesFilters.ALL,
 								label: AttributeLabels({ title: 'Attributes: All' }),

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
@@ -35,7 +35,7 @@ export function ComingSoon(): JSX.Element {
 }
 
 export function SelectMaxTagPlaceholder(
-	omittedValues: Partial<ComboboxSimpleItem>[],
+	omittedValues: Partial<DefaultOptionType>[],
 ): JSX.Element {
 	return (
 		<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,9 +18,7 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
-import { Select } from 'antd';
-import { Button, Checkbox } from 'antd';
+import { Button, Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,7 +16,6 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Select, Spin } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -13,25 +13,48 @@ interface ListViewOrderByProps {
 	dataSource: DataSource;
 }
 
+// Loader component for the dropdown when loading or no results
+function Loader({ isLoading }: { isLoading: boolean }): JSX.Element {
+	return (
+		<div className="order-by-loading-container">
+			{isLoading ? <Spin size="default" /> : 'No results found'}
+		</div>
+	);
+}
+
 function ListViewOrderBy({
 	value,
 	onChange,
 	dataSource,
 }: ListViewOrderByProps): JSX.Element {
-	const [selectOptions, setSelectOptions] = useState<ComboboxSimpleItem[]>([]);
+	const [searchInput, setSearchInput] = useState('');
+	const [debouncedInput, setDebouncedInput] = useState('');
+	const [selectOptions, setSelectOptions] = useState<
+		{ label: string; value: string }[]
+	>([]);
+	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-	// Fetch key suggestions once; ComboboxSimple handles local filtering.
+	// Fetch key suggestions based on debounced input
 	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource],
+		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
 		queryFn: async () => {
 			const response = await getKeySuggestions({
 				signal: dataSource,
-				searchText: '',
+				searchText: debouncedInput,
 			});
 			return response.data;
 		},
 	});
 
+	useEffect(
+		() => (): void => {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+		},
+		[],
+	);
+
 	// Update options when API data changes
 	useEffect(() => {
 		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
@@ -39,33 +62,52 @@ function ListViewOrderBy({
 			: [];
 
 		const keyNames = rawKeys.map((key) => key.name);
-		const uniqueKeys = [...new Set(['timestamp', ...keyNames])];
+		const uniqueKeys = [
+			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
+		];
 
-		const updatedOptions: ComboboxSimpleItem[] = uniqueKeys.flatMap((key) => [
+		const updatedOptions = uniqueKeys.flatMap((key) => [
 			{ label: `${key} (desc)`, value: `${key}:desc` },
 			{ label: `${key} (asc)`, value: `${key}:asc` },
 		]);
 
 		setSelectOptions(updatedOptions);
-	}, [data]);
+	}, [data, searchInput]);
 
-	const handleChange = useMemo(
-		() =>
-			(val: string | string[]): void => {
-				onChange(val as string);
-			},
-		[onChange],
-	);
+	// Handle search input with debounce
+	const handleSearch = (input: string): void => {
+		setSearchInput(input);
+
+		// Filter current options for instant client-side match
+		const filteredOptions = selectOptions.filter((option) =>
+			option.value.toLowerCase().includes(input.trim().toLowerCase()),
+		);
+
+		// If no match found or input is empty, trigger debounced fetch
+		if (filteredOptions.length === 0 || input === '') {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+
+			debounceTimer.current = setTimeout(() => {
+				setDebouncedInput(input);
+			}, 100);
+		}
+	};
 
 	return (
-		<ComboboxSimple
+		<Select
+			showSearch
 			value={value}
-			onChange={handleChange}
-			loading={isLoading}
+			onChange={onChange}
+			onSearch={handleSearch}
+			notFoundContent={<Loader isLoading={isLoading} />}
 			placeholder="Select a field"
 			style={{ width: 200 }}
-			items={selectOptions}
-			emptyPlaceholder="No results found"
+			options={selectOptions}
+			filterOption={(input, option): boolean =>
+				(option?.value ?? '').toLowerCase().includes(input.trim().toLowerCase())
+			}
 		/>
 	);
 }

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -22,37 +22,6 @@
 	border-right: none;
 	border-left: none;
 
-	--select-trigger-height: 2.25rem;
-	--select-trigger-background-color: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--select-trigger-border-color: var(
-		--query-builder-v2-border-color,
-		var(--l2-border)
-	);
-
-	--combobox-trigger-height: 2.25rem;
-	--combobox-trigger-padding: 7px var(--spacing-6);
-	--combobox-trigger-background-color: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--combobox-trigger-border-color: var(
-		--query-builder-v2-border-color,
-		var(--l2-border)
-	);
-
-	[data-slot='combobox-trigger'],
-	[data-slot='select-trigger'] {
-		color: var(--query-builder-v2-color, var(--l2-foreground));
-	}
-
-	[data-slot='combobox-placeholder'],
-	[data-slot='select-placeholder'] {
-		color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-	}
-
 	.qb-content-container {
 		display: flex;
 		flex-direction: column;
@@ -111,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--query-builder-v2-border-color, var(--l2-border)),
-					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+					var(--l1-border),
+					var(--l1-border) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -132,8 +101,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted
-						var(--query-builder-v2-border-color, var(--l2-border));
+					border-left: 6px dotted var(--l1-border);
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -146,8 +114,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -273,8 +241,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted
-							var(--query-builder-v2-border-color, var(--l2-border));
+						border-left: 6px dotted var(--l1-border);
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -287,8 +254,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--query-builder-v2-border-color, var(--l2-border)),
-							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+							var(--l1-border),
+							var(--l1-border) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -306,16 +273,6 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
-
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					);
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-					&:placeholder {
-						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-					}
 				}
 
 				.formula-legend {
@@ -325,30 +282,15 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						color: var(--query-builder-v2-color, var(--l2-foreground));
+						background: var(--l2-background);
+						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;
-
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-						&:placeholder {
-							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-						}
 					}
 				}
 			}
@@ -381,8 +323,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -453,8 +395,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -470,7 +412,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -515,7 +457,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+			border: 1px solid var(--l1-border) !important;
 			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -57,7 +57,6 @@
 
 		.group-by-filter-container {
 			min-width: 340px !important;
-			--combobox-trigger-height: auto;
 		}
 
 		.metrics-aggregation-section-content-item {
@@ -147,3 +146,17 @@
 		}
 	}
 }
+
+.metrics-operators-select {
+	border-radius: 2px;
+	border: 1.005px solid var(--l1-border);
+	background: var(--l1-background);
+
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -118,6 +118,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										value={queryAggregation.timeAggregation || ''}
 										onChange={handleChangeOperator}
 										operators={operators}
+										className="metrics-operators-select"
 									/>
 								</div>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -6,13 +6,11 @@
 	gap: 8px;
 	width: 100%;
 
-	--select-trigger-width: auto;
-
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 25px;
+		line-height: 27px;
 		&::placeholder {
-			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -24,9 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		color: var(--query-builder-v2-color, var(--l2-foreground));
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -35,23 +33,20 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-		background: var(--query-builder-v2-background-color, var(--l2-background));
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 
 		.ant-select-item {
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l1-foreground);
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
@@ -60,18 +55,12 @@
 
 			&:hover,
 			&.ant-select-item-option-active {
-				background: var(
-					--query-builder-v2-selected-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 			}
 
 			&.ant-select-item-option-selected {
-				background: var(
-					--query-builder-v2-selected-background-color,
-					var(--l3-background)
-				) !important;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l1-border);
 				font-weight: 600;
 			}
 		}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo } from 'react';
-import { SelectSimple, type SelectSimpleItem } from '@signozhq/ui/select';
+import { Select } from 'antd';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
@@ -10,6 +10,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { SelectOption } from 'types/common/select';
 
 import {
 	getPreviousQueryFromKey,
@@ -20,7 +21,7 @@ import {
 
 import './MetricsSelect.styles.scss';
 
-export const SOURCE_OPTIONS: SelectSimpleItem[] = [
+export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
 	{ value: 'metrics', label: 'Metrics' },
 	{ value: 'meter', label: 'Meter' },
 ];
@@ -139,14 +140,14 @@ export const MetricsSelect = memo(function MetricsSelect({
 	return (
 		<div className="metrics-source-select-container">
 			{signalSourceChangeEnabled && (
-				<SelectSimple
+				<Select
 					className="source-selector"
 					placeholder="Source"
-					items={SOURCE_OPTIONS}
+					options={SOURCE_OPTIONS}
 					value={source}
 					defaultValue="metrics"
-					testId={`metrics-source-selector-${index}`}
-					onChange={(value): void => handleSignalSourceChange(value as string)}
+					data-testid={`metrics-source-selector-${index}`}
+					onChange={handleSignalSourceChange}
 				/>
 			)}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -22,35 +22,34 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l2-foreground);
 		}
 
 		.tab {
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid
-					var(--query-builder-v2-border-color, var(--l2-border));
+				border-left: 1px solid var(--l1-border);
 			}
 		}
 
 		.tab::before {
-			background: var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--l1-border);
 		}
 
 		.selected-view {
 			color: var(--text-robin-500);
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 
 			display: none;
 		}
 
 		.selected-view::before {
-			background: var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--l1-border);
 		}
 	}
 
@@ -59,7 +58,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--l1-border);
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -72,13 +71,10 @@
 	align-items: center;
 
 	.having-filter-select-container {
-		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		padding-right: 38px;
+		align-items: center;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -103,17 +99,15 @@
 				}
 
 				.cm-content {
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-					border-left-width: 0px;
-					border-right-width: 0px;
+					border-radius: 2px;
+					border: 1px solid var(--l1-border);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
-						border-color: var(--query-builder-v2-border-color, var(--l2-border));
+						border-color: var(--l1-border);
 					}
 				}
 
@@ -217,32 +211,17 @@
 				}
 
 				.cm-line {
-					min-height: 34px;
-					line-height: 32px !important;
+					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -251,11 +230,8 @@
 					}
 
 					.chip-decorator {
-						background: var(
-							--query-builder-v2-chip-decorator-background-color,
-							var(--l3-background)
-						) !important;
-						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+						background: var(--l3-background) !important;
+						color: var(--l1-foreground) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -263,36 +239,24 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(
-						--query-builder-v2-selection-background-color,
-						var(--l3-background)
-					) !important;
+					background: var(--l3-background) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
-
-				.cm-placeholder {
-					color: var(
-						--query-builder-v2-placeholder-color,
-						var(--l3-foreground)
-					) !important;
-				}
 			}
 		}
 
 		.close-btn {
-			position: absolute;
-			top: 0;
-			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			background: var(--query-builder-v2-background-color, var(--l2-background));
-			height: 100%;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			height: 38px;
 			width: 38px;
 
+			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
 		}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+				color: var(--l2-foreground) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,15 +51,14 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--query-builder-v2-border-color, var(--l2-border));
+							border-color: var(--l1-border);
 						}
 					}
 
@@ -75,7 +74,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -119,7 +118,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -128,10 +127,7 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(
-										--query-builder-v2-selection-background-color,
-										var(--l3-background)
-									) !important;
+									background: var(--l3-background) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -146,24 +142,15 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -172,11 +159,8 @@
 						}
 
 						.chip-decorator {
-							background: var(
-								--query-builder-v2-chip-decorator-background-color,
-								var(--l3-background)
-							) !important;
-							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -184,10 +168,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -220,11 +201,12 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-				background: var(--query-builder-v2-background-color, var(--l2-background));
-				height: 100%;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				height: 38px;
 				width: 38px;
 
+				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -235,13 +217,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
+				color: var(--l1-foreground);
 				opacity: 0.5;
 			}
 		}
@@ -258,7 +240,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--query-builder-v2-color, var(--l2-foreground));
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -269,8 +251,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--query-builder-v2-border-color, var(--l2-border));
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		background-color: var(--l1-border);
+		border: 1px solid var(--l1-border);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -34,14 +34,11 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
+			background-color: var(--l1-background) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -80,16 +77,16 @@
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--query-builder-v2-border-color, var(--l2-border));
+				border-color: var(--l1-border);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			outline: 1px solid var(--l1-border);
 		}
 
 		.cm-tooltip-autocomplete {
@@ -151,17 +148,11 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+					background-color: var(--l1-background) !important;
+					color: var(--l2-foreground) !important;
 
 					&:hover {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 					}
 
 					.cm-completionIcon {
@@ -169,10 +160,7 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -184,49 +172,25 @@
 		}
 
 		.cm-line {
-			line-height: 36px !important;
+			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(
-				--query-builder-v2-selection-background-color,
-				var(--l3-background)
-			) !important;
+			background: var(--l3-background) !important;
 			opacity: 0.5 !important;
 		}
-
-		.cm-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
-		}
 	}
 
 	.cursor-position {

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss

@@ -51,6 +51,10 @@
 			}
 		}
 	}
+	.duration-input-slider {
+		padding: 12px 0px;
+		margin-top: 12px;
+	}
 }
 
 .divider {

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,10 +1,11 @@
 import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Checkbox, Select } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import './RolesSelect.styles.scss';
 
@@ -73,6 +74,7 @@ interface BaseProps {
 	id?: string;
 	placeholder?: string;
 	className?: string;
+	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
 	roles?: AuthtypesRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
@@ -110,13 +112,14 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});
 
 	const roles = externalRoles ?? data?.data ?? [];
-	const items: ComboboxSimpleItem[] = getRoleOptions(roles);
+	const options = getRoleOptions(roles);
 
 	const {
 		mode,
 		id,
 		placeholder = 'Select role',
 		className,
+		getPopupContainer = popupContainer,
 		loading = internalLoading,
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
@@ -124,47 +127,55 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		disabled,
 	} = props;
 
-	const emptyPlaceholder = isError
-		? error?.message || 'Failed to load roles'
-		: 'No roles available';
+	const notFoundContent = isError ? (
+		<ErrorContent error={error} onRefetch={onRefetch} />
+	) : undefined;
 
 	if (mode === 'multiple') {
 		const { value = [], onChange } = props as MultipleProps;
 		return (
-			<>
-				<ComboboxSimple
-					id={id}
-					multiple
-					value={value}
-					onChange={(v): void => onChange?.(v as string[])}
-					placeholder={placeholder}
-					className={cx('roles-select', className)}
-					loading={loading}
-					emptyPlaceholder={emptyPlaceholder}
-					items={items}
-					style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-				/>
-				{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
-			</>
+			<Select
+				id={id}
+				mode="multiple"
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				className={cx('roles-select', className)}
+				loading={loading}
+				notFoundContent={notFoundContent}
+				options={options}
+				optionFilterProp="label"
+				optionRender={(option): JSX.Element => (
+					<Checkbox
+						checked={value.includes(option.value as string)}
+						style={{ pointerEvents: 'none' }}
+					>
+						{option.label}
+					</Checkbox>
+				)}
+				getPopupContainer={getPopupContainer}
+				disabled={disabled}
+			/>
 		);
 	}
 
-	const { value, onChange } = props as SingleProps;
+	const { value, onChange, allowClear = true } = props as SingleProps;
 	return (
-		<>
-			<ComboboxSimple
-				id={id}
-				value={value || undefined}
-				onChange={(v): void => onChange?.((v as string) || undefined)}
-				placeholder={placeholder}
-				className={cx('roles-single-select', className)}
-				loading={loading}
-				emptyPlaceholder={emptyPlaceholder}
-				items={items}
-				style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-			/>
-			{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
-		</>
+		<Select
+			id={id}
+			showSearch
+			value={value || undefined}
+			onChange={onChange}
+			placeholder={placeholder}
+			allowClear={allowClear}
+			className={cx('roles-single-select', className)}
+			loading={loading}
+			notFoundContent={notFoundContent}
+			options={options}
+			optionFilterProp="label"
+			getPopupContainer={getPopupContainer}
+			disabled={disabled}
+		/>
 	);
 }
 

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,11 +1,7 @@
 import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
-import {
-	ComboboxSimple,
-	ComboboxSimpleGroup,
-	ComboboxSimpleItem,
-} from '@signozhq/ui/combobox';
-import { Tooltip } from 'antd';
+import { Select, Tooltip } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
 import classNames from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
@@ -46,53 +42,69 @@ function YAxisUnitSelector({
 		return '';
 	}, [initialValue, value, loading]);
 
-	const categoriesToRender = useMemo(
-		() => categoriesOverride || getYAxisCategories(source),
-		[categoriesOverride, source],
-	);
+	const handleSearch = (
+		searchTerm: string,
+		currentOption: DefaultOptionType | undefined,
+	): boolean => {
+		if (!currentOption?.value) {
+			return false;
+		}
 
-	const groups: ComboboxSimpleGroup[] = useMemo(
-		() =>
-			categoriesToRender.map((category) => ({
-				heading: category.name,
-				items: category.units.map((unit): ComboboxSimpleItem => {
-					const aliases = Array.from(
-						UniversalYAxisUnitMappings[unit.id as UniversalYAxisUnit] ?? [],
-					);
-					return {
-						value: unit.id,
-						label: unit.name,
-						keywords: aliases,
-					};
-				}),
-			})),
-		[categoriesToRender],
-	);
+		const search = searchTerm.toLowerCase();
+		const unitId = currentOption.value.toString().toLowerCase();
+		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
 
-	const handleChange = (val: string | string[]): void => {
-		onChange(val as UniversalYAxisUnit);
+		// Check label and id
+		if (unitId.includes(search) || unitLabel.includes(search)) {
+			return true;
+		}
+
+		// Check aliases (from the mapping) using array iteration
+		const aliases = Array.from(
+			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
+		);
+
+		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
+	const categoriesToRender = useMemo(() => {
+		return categoriesOverride || getYAxisCategories(source);
+	}, [categoriesOverride, source]);
+
 	return (
 		<div
 			className={classNames('y-axis-unit-selector-component', containerClassName)}
 		>
-			<ComboboxSimple
-				value={universalUnit ?? undefined}
-				onChange={handleChange}
+			<Select
+				showSearch
+				value={universalUnit}
+				onChange={onChange}
 				placeholder={placeholder}
+				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
+				suffixIcon={
+					incompatibleUnitMessage ? (
+						<Tooltip title={incompatibleUnitMessage}>
+							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						</Tooltip>
+					) : undefined
+				}
 				className={classNames({
-					'warning-state': !!incompatibleUnitMessage,
+					'warning-state': incompatibleUnitMessage,
 				})}
-				testId={dataTestId}
-				groups={groups}
-			/>
-			{incompatibleUnitMessage && (
-				<Tooltip title={incompatibleUnitMessage}>
-					<SolidAlertTriangle role="img" aria-label="warning" size="md" />
-				</Tooltip>
-			)}
+				data-testid={dataTestId}
+				allowClear
+			>
+				{categoriesToRender.map((category) => (
+					<Select.OptGroup key={category.name} label={category.name}>
+						{category.units.map((unit) => (
+							<Select.Option key={unit.id} value={unit.id}>
+								{unit.name}
+							</Select.Option>
+						))}
+					</Select.OptGroup>
+				))}
+			</Select>
 		</div>
 	);
 }

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -1,8 +1,5 @@
 .y-axis-unit-selector-component {
-	--combobox-trigger-background-color: var(--l2-background);
-	--combobox-trigger-border-color: var(--l2-border);
-
-	[data-slot='combobox-trigger'] {
+	.ant-select {
 		width: 220px;
 	}
 }

frontend/src/constants/app.ts

@@ -10,9 +10,6 @@ export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;
 
 export const INVITE_MEMBERS_HASH = '#invite-team-members';
 
-export const SIGNOZ_UPGRADE_PLAN_URL =
-	'https://upgrade.signoz.io/upgrade-from-app';
-
 export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';

frontend/src/constants/features.ts

@@ -11,4 +11,5 @@ export enum FeatureKeys {
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
+	USE_DASHBOARD_V2 = 'use_dashboard_v2',
 }

frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.module.scss

@@ -0,0 +1,64 @@
+// Collapsed activity summary — one row that hides the underlying
+// thinking + tool-call steps. Reuses the same quiet treatment as
+// ThinkingStep / ToolCallStep so it sits flush in the assistant bubble.
+.activityGroup {
+	width: 100%;
+	font-size: 12px;
+}
+
+.activityHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	color: var(--l3-foreground);
+	user-select: none;
+	transition: color 0.12s ease;
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		color: var(--l1-foreground);
+	}
+}
+
+.sparkleIcon {
+	flex-shrink: 0;
+	color: var(--accent-primary);
+
+	&.iconPulsing {
+		animation: activityGroupPulse 1.4s ease-in-out infinite;
+	}
+}
+
+@keyframes activityGroupPulse {
+	0%,
+	100% {
+		opacity: 0.55;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
+.activitySummary {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 400;
+}
+
+.toggleChevron {
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.activityBody {
+	display: flex;
+	flex-direction: column;
+	padding: 2px 0 4px;
+}

frontend/src/container/AIAssistant/components/ActivityGroup/ActivityGroup.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { ChevronDown, ChevronRight, Sparkles } from '@signozhq/icons';
+
+import { formatTime } from 'utils/timeUtils';
+
+import { StreamingToolCall } from '../../types';
+import ThinkingStep, { ThinkingContent, thinkingLabel } from '../ThinkingStep';
+import ToolCallStep, {
+	getToolDisplayLabel,
+	ToolCallContent,
+} from '../ToolCallStep';
+
+import styles from './ActivityGroup.module.scss';
+
+export type ActivityItem =
+	| { id: string; kind: 'thinking'; content: string }
+	| { id: string; kind: 'tool'; toolCall: StreamingToolCall };
+
+interface ActivityGroupProps {
+	items: ActivityItem[];
+	/**
+	 * True only for the trailing activity group of an active stream — drives
+	 * the live "Working…" label and the elapsed-time tick (which re-stamps on
+	 * approval/clarification resume so wait time isn't counted).
+	 */
+	isLive?: boolean;
+}
+
+/**
+ * Single-item groups get a step-specific summary so the user doesn't see a
+ * pointless "Worked through 1 step". Multi-item groups roll up into the
+ * generic "Working… / Worked through N steps" treatment.
+ */
+function buildSummary(
+	items: ActivityItem[],
+	isLive: boolean,
+	elapsed: number,
+): string {
+	if (items.length === 1) {
+		const [only] = items;
+		if (only.kind === 'thinking') {
+			return thinkingLabel(isLive);
+		}
+		return getToolDisplayLabel(only.toolCall);
+	}
+	const stepLabel = `${items.length} steps`;
+	if (!isLive) {
+		return `Worked through ${stepLabel}`;
+	}
+	// Suppress the elapsed token until ≥ 1s — the first tick fires after
+	// 1s anyway, and showing "0s" or "<1s" briefly adds noise.
+	return elapsed >= 1000
+		? `Working… · ${formatTime(elapsed / 1000)} · ${stepLabel}`
+		: `Working… · ${stepLabel}`;
+}
+
+/**
+ * Single collapsed summary row that hides a run of thinking + tool-call steps.
+ * Expands to show each underlying step inline. Used for every activity row
+ * (including single-item ones) so all "what the agent did" rows share a
+ * consistent ✨-led visual contract.
+ */
+export default function ActivityGroup({
+	items,
+	isLive = false,
+}: ActivityGroupProps): JSX.Element {
+	const [expanded, setExpanded] = useState(false);
+
+	// Captures the moment this live phase started. Re-stamped on every
+	// false→true transition so a stream that pauses on
+	// approval/clarification and resumes doesn't roll the user's wait time
+	// into the elapsed counter.
+	const startedAtRef = useRef<number>(Date.now());
+	const wasLiveRef = useRef<boolean>(isLive);
+	const [elapsed, setElapsed] = useState(0);
+
+	useEffect(() => {
+		if (isLive && !wasLiveRef.current) {
+			startedAtRef.current = Date.now();
+			setElapsed(0);
+		}
+		wasLiveRef.current = isLive;
+
+		if (!isLive) {
+			return undefined;
+		}
+		// Tick once per second — the display is integer-second precision, so
+		// faster ticks would just re-render the bubble for no visible change.
+		const id = window.setInterval(() => {
+			setElapsed(Date.now() - startedAtRef.current);
+		}, 1000);
+		return (): void => window.clearInterval(id);
+	}, [isLive]);
+
+	const summary = buildSummary(items, isLive, elapsed);
+	const isSingle = items.length === 1;
+
+	const toggle = (): void => setExpanded((v) => !v);
+
+	return (
+		<div className={styles.activityGroup}>
+			<div className={styles.activityHeader} onClick={toggle}>
+				<Sparkles
+					size={12}
+					className={cx(styles.sparkleIcon, { [styles.iconPulsing]: isLive })}
+				/>
+				<span className={styles.activitySummary}>{summary}</span>
+				{expanded ? (
+					<ChevronDown size={12} className={styles.toggleChevron} />
+				) : (
+					<ChevronRight size={12} className={styles.toggleChevron} />
+				)}
+			</div>
+
+			{expanded && (
+				<div className={styles.activityBody}>
+					{isSingle ? (
+						// Single-item: the outer chevron already provides disclosure,
+						// so render the underlying content directly instead of wrapping
+						// it in a second collapsible step row.
+						items[0].kind === 'thinking' ? (
+							<ThinkingContent content={items[0].content} />
+						) : (
+							<ToolCallContent toolCall={items[0].toolCall} />
+						)
+					) : (
+						items.map((item, i) => {
+							// A thinking step is live only while it's the trailing item
+							// in a trailing live group — once any later event (text or
+							// tool) arrives, the pass is done.
+							const isLastItem = i === items.length - 1;
+							return item.kind === 'thinking' ? (
+								<ThinkingStep
+									key={item.id}
+									content={item.content}
+									isLive={isLive && isLastItem}
+								/>
+							) : (
+								<ToolCallStep key={item.id} toolCall={item.toolCall} />
+							);
+						})
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/container/AIAssistant/components/ActivityGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ActivityGroup';
+export type { ActivityItem } from './ActivityGroup';

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -9,11 +9,10 @@ import '../blocks';
 import { useVariant } from '../../VariantContext';
 import { Message, MessageBlock } from '../../types';
 import ActionsSection from '../ActionsSection';
+import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import { RichCodeBlock } from '../blocks';
 import { MessageContext } from '../MessageContext';
 import MessageFeedback from '../MessageFeedback';
-import ThinkingStep from '../ThinkingStep';
-import ToolCallStep from '../ToolCallStep';
 import UserMessageActions from '../UserMessageActions';
 
 import styles from './MessageBubble.module.scss';
@@ -40,38 +39,61 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 const MD_PLUGINS = [remarkGfm];
 const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
 
-/** Renders a single MessageBlock by type. */
-function renderBlock(block: MessageBlock, index: number): JSX.Element {
-	switch (block.type) {
-		case 'thinking':
-			return <ThinkingStep key={index} content={block.content} />;
-		case 'tool_call':
-			// Blocks in a persisted message are always complete — done is always true.
-			return (
-				<ToolCallStep
-					key={index}
-					toolCall={{
-						toolName: block.toolName,
-						input: block.toolInput,
-						result: block.result,
-						done: true,
-						displayText: block.displayText,
-					}}
-				/>
-			);
-		case 'text':
-		default:
-			return (
-				<ReactMarkdown
-					key={index}
-					className={styles.markdown}
-					remarkPlugins={MD_PLUGINS}
-					components={MD_COMPONENTS}
-				>
-					{block.content}
-				</ReactMarkdown>
-			);
+type RenderGroup =
+	| { kind: 'text'; id: string; content: string }
+	| { kind: 'activity'; id: string; items: ActivityItem[] };
+
+/**
+ * Partition message blocks into render groups so consecutive thinking and
+ * tool_call blocks collapse into a single ActivityGroup row. Text blocks
+ * stand alone, mirroring the streaming view.
+ */
+function groupBlocks(blocks: MessageBlock[]): RenderGroup[] {
+	const groups: RenderGroup[] = [];
+	blocks.forEach((block, i) => {
+		if (block.type === 'text') {
+			groups.push({ kind: 'text', id: `text-${i}`, content: block.content });
+			return;
+		}
+		const item: ActivityItem =
+			block.type === 'thinking'
+				? { id: `t-${i}`, kind: 'thinking', content: block.content }
+				: {
+						id: `c-${block.toolCallId}`,
+						kind: 'tool',
+						// Persisted blocks are always complete.
+						toolCall: {
+							toolName: block.toolName,
+							input: block.toolInput,
+							result: block.result,
+							done: true,
+							displayText: block.displayText,
+						},
+					};
+		const last = groups[groups.length - 1];
+		if (last?.kind === 'activity') {
+			last.items.push(item);
+		} else {
+			groups.push({ kind: 'activity', id: `a-${i}`, items: [item] });
+		}
+	});
+	return groups;
+}
+
+function renderGroup(group: RenderGroup): JSX.Element {
+	if (group.kind === 'text') {
+		return (
+			<ReactMarkdown
+				key={group.id}
+				className={styles.markdown}
+				remarkPlugins={MD_PLUGINS}
+				components={MD_COMPONENTS}
+			>
+				{group.content}
+			</ReactMarkdown>
+		);
 	}
+	return <ActivityGroup key={group.id} items={group.items} />;
 }
 
 interface MessageBubbleProps {
@@ -90,6 +112,14 @@ export default function MessageBubble({
 	const isUser = message.role === 'user';
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
 
+	// Recompute groups only when the blocks array identity changes — store
+	// updates that don't touch this message's blocks should not re-render the
+	// underlying ThinkingStep/ToolCallStep children.
+	const groups = useMemo(
+		() => (hasBlocks ? groupBlocks(message.blocks!) : []),
+		[hasBlocks, message.blocks],
+	);
+
 	const messageClass = cx(
 		styles.message,
 		isUser ? styles.user : styles.assistant,
@@ -128,8 +158,7 @@ export default function MessageBubble({
 							<p className={styles.text}>{message.content}</p>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
-								{/* eslint-disable-next-line react/no-array-index-key */}
-								{message.blocks!.map((block, i) => renderBlock(block, i))}
+								{groups.map((g) => renderGroup(g))}
 							</MessageContext.Provider>
 						) : (
 							<MessageContext.Provider value={{ messageId: message.id }}>

frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -10,11 +10,10 @@ import type {
 
 import { useVariant } from '../../VariantContext';
 import { StreamingEventItem } from '../../types';
+import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import ApprovalCard from '../ApprovalCard';
 import { RichCodeBlock } from '../blocks';
 import ClarificationForm from '../ClarificationForm';
-import ThinkingStep from '../ThinkingStep';
-import ToolCallStep from '../ToolCallStep';
 
 import messageStyles from '../MessageBubble/MessageBubble.module.scss';
 import styles from './StreamingMessage.module.scss';
@@ -33,6 +32,59 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 const MD_PLUGINS = [remarkGfm];
 const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
 
+type RenderGroup =
+	| { kind: 'text'; id: string; content: string }
+	| {
+			kind: 'activity';
+			id: string;
+			items: ActivityItem[];
+			isTrailing: boolean;
+	  };
+
+/**
+ * Partition the streaming event timeline into render groups: runs of
+ * consecutive thinking/tool events fold into a single activity group, text
+ * events stay standalone. The last group is flagged as trailing so the
+ * caller can drive a "live" indicator on it.
+ *
+ * Invariant relied on by the ActivityGroup elapsed-time timer: once a
+ * group exists at a given array index, later events only extend its
+ * `items` — they never shrink the array or re-key existing groups. That
+ * keeps each ActivityGroup React instance stable across re-renders so the
+ * timer's `wasLive` → `isLive` re-stamp captures the right transition.
+ * The id fields below piggyback on that invariant: each event's position in
+ * `events` is stable, so the derived id stays stable across re-renders.
+ */
+function groupStreamingEvents(events: StreamingEventItem[]): RenderGroup[] {
+	const groups: RenderGroup[] = [];
+	events.forEach((event, i) => {
+		if (event.kind === 'text') {
+			groups.push({ kind: 'text', id: `text-${i}`, content: event.content });
+			return;
+		}
+		const item: ActivityItem =
+			event.kind === 'thinking'
+				? { id: `t-${i}`, kind: 'thinking', content: event.content }
+				: { id: `c-${i}`, kind: 'tool', toolCall: event.toolCall };
+		const last = groups[groups.length - 1];
+		if (last?.kind === 'activity') {
+			last.items.push(item);
+		} else {
+			groups.push({
+				kind: 'activity',
+				id: `a-${i}`,
+				items: [item],
+				isTrailing: false,
+			});
+		}
+	});
+	const last = groups[groups.length - 1];
+	if (last?.kind === 'activity') {
+		last.isTrailing = true;
+	}
+	return groups;
+}
+
 /** Human-readable labels for execution status codes shown before any events arrive. */
 const STATUS_LABEL: Record<string, string> = {
 	queued: 'Queued…',
@@ -79,6 +131,11 @@ export default function StreamingMessage({
 		[messageStyles.compact]: isCompact,
 	});
 
+	// Recompute groups only when the events array identity changes. The
+	// streaming reducer pushes new entries into the same array reference
+	// once per tick, so this naturally invalidates as events arrive.
+	const groups = useMemo(() => groupStreamingEvents(events), [events]);
+
 	return (
 		<div className={messageClass}>
 			<div className={messageStyles.bubble}>
@@ -88,27 +145,28 @@ export default function StreamingMessage({
 				)}
 				{isEmpty && !statusLabel && <TypingDots />}
 
-				{/* eslint-disable react/no-array-index-key */}
-				{/* Events rendered in arrival order: text, thinking, and tool calls interleaved */}
-				{events.map((event, i) => {
-					if (event.kind === 'tool') {
-						return <ToolCallStep key={i} toolCall={event.toolCall} />;
-					}
-					if (event.kind === 'thinking') {
-						return <ThinkingStep key={i} content={event.content} />;
+				{/* Runs of consecutive thinking + tool events collapse into a
+				    single ActivityGroup; text events render inline between
+				    them. The trailing group is "live" while streaming is
+				    active and not blocked on the user. */}
+				{groups.map((group) => {
+					if (group.kind === 'text') {
+						return (
+							<ReactMarkdown
+								key={group.id}
+								className={messageStyles.markdown}
+								remarkPlugins={MD_PLUGINS}
+								components={MD_COMPONENTS}
+							>
+								{group.content}
+							</ReactMarkdown>
+						);
 					}
+					const groupIsLive = group.isTrailing && !isWaitingOnUser;
 					return (
-						<ReactMarkdown
-							key={i}
-							className={messageStyles.markdown}
-							remarkPlugins={MD_PLUGINS}
-							components={MD_COMPONENTS}
-						>
-							{event.content}
-						</ReactMarkdown>
+						<ActivityGroup key={group.id} items={group.items} isLive={groupIsLive} />
 					);
 				})}
-				{/* eslint-enable react/no-array-index-key */}
 
 				{/* While events are still streaming, append the typing dots so the
 				    user has a clear "more is coming" signal. Hidden when the agent

frontend/src/container/AIAssistant/components/ThinkingStep/ThinkingStep.tsx

@@ -5,11 +5,31 @@ import styles from './ThinkingStep.module.scss';
 
 interface ThinkingStepProps {
 	content: string;
+	/**
+	 * When false, label reads "Thought for a few seconds" — intentionally
+	 * vague because the API doesn't persist precise timing, so showing
+	 * seconds would be inconsistent between fresh and reloaded threads.
+	 */
+	isLive?: boolean;
+}
+
+/** Body of a thinking step — extracted so ActivityGroup can render it directly. */
+export function ThinkingContent({ content }: { content: string }): JSX.Element {
+	return (
+		<div className={styles.body}>
+			<p className={styles.content}>{content}</p>
+		</div>
+	);
+}
+
+export function thinkingLabel(isLive: boolean): string {
+	return isLive ? 'Thinking…' : 'Thought for a few seconds';
 }
 
 /** Collapsible thinking row — chevron + label, content in the expanded body. */
 export default function ThinkingStep({
 	content,
+	isLive = false,
 }: ThinkingStepProps): JSX.Element {
 	const [expanded, setExpanded] = useState(false);
 
@@ -23,14 +43,10 @@ export default function ThinkingStep({
 				) : (
 					<ChevronRight size={12} className={styles.chevron} />
 				)}
-				<span className={styles.label}>Thinking</span>
+				<span className={styles.label}>{thinkingLabel(isLive)}</span>
 			</div>
 
-			{expanded && (
-				<div className={styles.body}>
-					<p className={styles.content}>{content}</p>
-				</div>
-			)}
+			{expanded && <ThinkingContent content={content} />}
 		</div>
 	);
 }

frontend/src/container/AIAssistant/components/ToolCallStep/ToolCallStep.tsx

@@ -10,24 +10,58 @@ interface ToolCallStepProps {
 	toolCall: StreamingToolCall;
 }
 
+/**
+ * Server-supplied `displayText` is the human-friendly title the backend
+ * wants surfaced. Falls back to a derived label
+ * ("signoz_get_dashboard" → "Get Dashboard") when missing.
+ */
+export function getToolDisplayLabel(toolCall: StreamingToolCall): string {
+	const { toolName, displayText } = toolCall;
+	if (displayText && displayText.trim().length > 0) {
+		return displayText;
+	}
+	return toolName
+		.replace(/^[a-z]+_/, '') // strip prefix like "signoz_"
+		.replace(/_/g, ' ')
+		.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Body of a tool-call step — extracted so ActivityGroup can render it directly. */
+export function ToolCallContent({
+	toolCall,
+}: {
+	toolCall: StreamingToolCall;
+}): JSX.Element {
+	const { toolName, input, result, done } = toolCall;
+	return (
+		<div className={styles.body}>
+			<div className={styles.section}>
+				<span className={styles.sectionLabel}>Tool</span>
+				<span className={styles.toolName}>{toolName}</span>
+			</div>
+			<div className={styles.section}>
+				<span className={styles.sectionLabel}>Input</span>
+				<pre className={styles.json}>{JSON.stringify(input, null, 2)}</pre>
+			</div>
+			{done && result !== undefined && (
+				<div className={styles.section}>
+					<span className={styles.sectionLabel}>Output</span>
+					<pre className={styles.json}>
+						{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
+					</pre>
+				</div>
+			)}
+		</div>
+	);
+}
+
 /** Collapsible tool-call row — chevron + label, in/out detail in the body. */
 export default function ToolCallStep({
 	toolCall,
 }: ToolCallStepProps): JSX.Element {
 	const [expanded, setExpanded] = useState(false);
-	const { toolName, input, result, done, displayText } = toolCall;
-
-	// Prefer the server-supplied `displayText` from `ToolCallEventDTO` —
-	// it's the human-friendly title the backend wants surfaced. Fall back
-	// to a derived label ("signoz_get_dashboard" → "Get Dashboard") when
-	// the field is empty / null / missing.
-	const label =
-		displayText && displayText.trim().length > 0
-			? displayText
-			: toolName
-					.replace(/^[a-z]+_/, '') // strip prefix like "signoz_"
-					.replace(/_/g, ' ')
-					.replace(/\b\w/g, (c) => c.toUpperCase());
+	const { done } = toolCall;
+	const label = getToolDisplayLabel(toolCall);
 
 	const toggle = (): void => setExpanded((v) => !v);
 
@@ -44,26 +78,7 @@ export default function ToolCallStep({
 				<span className={styles.label}>{label}</span>
 			</div>
 
-			{expanded && (
-				<div className={styles.body}>
-					<div className={styles.section}>
-						<span className={styles.sectionLabel}>Tool</span>
-						<span className={styles.toolName}>{toolName}</span>
-					</div>
-					<div className={styles.section}>
-						<span className={styles.sectionLabel}>Input</span>
-						<pre className={styles.json}>{JSON.stringify(input, null, 2)}</pre>
-					</div>
-					{done && result !== undefined && (
-						<div className={styles.section}>
-							<span className={styles.sectionLabel}>Output</span>
-							<pre className={styles.json}>
-								{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}
-							</pre>
-						</div>
-					)}
-				</div>
-			)}
+			{expanded && <ToolCallContent toolCall={toolCall} />}
 		</div>
 	);
 }

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -1,4 +1,3 @@
-import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
 import {
@@ -313,16 +312,6 @@ describe('Create Alert Channel (Normal User)', () => {
 				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
 			});
 
-			it.skip('Should check if the upgrade plan message is shown', () => {
-				expect(screen.getByText('Upgrade to a Paid Plan')).toBeInTheDocument();
-				expect(
-					screen.getByText(/This feature is available for paid plans only./),
-				).toBeInTheDocument();
-				const link = screen.getByRole('link', { name: 'Click here' });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute('href', SIGNOZ_UPGRADE_PLAN_URL);
-				expect(screen.getByText(/to Upgrade/)).toBeInTheDocument();
-			});
 			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
 				expect(
 					screen.getByRole('button', { name: 'button_save_channel' }),

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { Select } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import {
@@ -115,11 +115,11 @@ function AllEndPoints({
 
 	// --- GROUP BY STATE SYNC (existing) ---
 	const handleGroupByChange = useCallback(
-		(value: string[]) => {
+		(value: IBuilderQuery['groupBy']) => {
 			const newGroupBy = [];
 
 			for (let index = 0; index < value.length; index++) {
-				const element = value[index];
+				const element = value[index] as unknown as string;
 
 				// Check if the key exists in our cached options first
 				if (allAvailableGroupByOptions[element]) {
@@ -242,14 +242,17 @@ function AllEndPoints({
 			</div>
 			<div className="group-by-container">
 				<div className="group-by-label"> Group by </div>
-				<ComboboxSimple
+				<Select
 					className="group-by-select"
 					loading={isLoadingGroupByFilters}
-					multiple
-					value={groupBy.map((g) => g.key)}
+					mode="multiple"
+					value={groupBy}
+					allowClear
+					maxTagCount="responsive"
 					placeholder="Search for attribute"
-					items={groupByOptions}
-					onChange={(value): void => handleGroupByChange(value as string[])}
+					options={groupByOptions}
+					onChange={handleGroupByChange}
+					onSearch={(value: string): void => setGroupBySearchValue(value)}
 				/>{' '}
 			</div>
 			<div className="endpoints-table-container">

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

@@ -211,14 +211,14 @@
 
 		.group-by-label {
 			display: flex;
-			padding: 4px 15px;
+			padding: 6px 15px;
 			justify-content: center;
 			align-items: center;
 			gap: 4px;
 			flex-shrink: 0;
 
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l2-border);
+			border: 1px solid var(--l1-border);
 			border-right: none;
 			background: var(--l3-background);
 
@@ -227,15 +227,18 @@
 			font-size: 14px;
 			font-style: normal;
 			font-weight: 400;
-			line-height: 22px;
+			line-height: 18px;
 			letter-spacing: -0.07px;
 		}
 
 		.group-by-select {
 			width: 100%;
-			box-sizing: border-box;
-
-			--combobox-trigger-border-radius: 0px;
+			.ant-select-selector {
+				font-size: 14px;
+				border-radius: 2px 0px 0px 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+			}
 		}
 	}
 	// Add border-bottom to table cells when pagination is not present
@@ -458,13 +461,14 @@
 		}
 
 		.endpoint-details-filters-container-dropdown {
-			width: 150px;
+			width: 120px;
 			border-right: 1px solid var(--l1-border);
 			height: 36px;
 			display: flex;
 			align-items: center;
-
-			--combobox-trigger-border-color: transparent;
+			.ant-select-single {
+				height: 32px;
+			}
 		}
 
 		.endpoint-details-filters-container-search {

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

@@ -263,6 +263,7 @@ function EndPointDetails({
 						setSelectedEndPointName={setSelectedEndPointName}
 						endPointDropDownDataQuery={endPointDropDownDataQuery}
 						parentContainerDiv=".endpoint-details-filters-container"
+						dropdownStyle={{ width: 'calc(100% - 36px)' }}
 					/>
 				</div>
 				<div className="endpoint-details-filters-container-search">

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Select } from 'antd';
 import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
 import { SuccessResponse } from 'types/api';
 
@@ -22,33 +22,40 @@ function EndPointsDropDown({
 	selectedEndPointName,
 	setSelectedEndPointName,
 	endPointDropDownDataQuery,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	parentContainerDiv: _parentContainerDiv,
+	parentContainerDiv,
 	dropdownStyle,
 }: EndPointsDropDownProps): JSX.Element {
 	const { data, isLoading, isFetching } = endPointDropDownDataQuery;
 
-	const handleChange = (value: string | string[]): void => {
-		setSelectedEndPointName(value as string);
+	const handleChange = (value: string): void => {
+		setSelectedEndPointName(value);
 	};
 
 	const formattedData = useMemo(
 		() =>
-			getFormattedEndPointDropDownData(
-				data?.payload.data.result[0].table.rows,
-			) as ComboboxSimpleItem[],
+			getFormattedEndPointDropDownData(data?.payload.data.result[0].table.rows),
 		[data?.payload.data.result],
 	);
 
 	return (
-		<ComboboxSimple
+		<Select
 			value={selectedEndPointName || undefined}
 			placeholder="Select endpoint"
 			loading={isLoading || isFetching}
-			style={{ width: '100%', ...dropdownStyle }}
+			style={{ width: '100%' }}
 			onChange={handleChange}
-			items={formattedData}
-			virtualized
+			options={formattedData}
+			getPopupContainer={
+				parentContainerDiv
+					? (): HTMLElement =>
+							document.querySelector(parentContainerDiv) as HTMLElement
+					: (triggerNode): HTMLElement => triggerNode.parentNode as HTMLElement
+			}
+			dropdownStyle={dropdownStyle}
+			allowClear
+			onClear={(): void => {
+				setSelectedEndPointName('');
+			}}
 		/>
 	);
 }

frontend/src/container/Controls/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Button, Flex } from 'antd';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
@@ -59,18 +59,20 @@ function Controls({
 			</Button>
 
 			{showSizeChanger && (
-				<SelectSimple
+				<Select<Pagination['limit']>
 					style={defaultSelectStyle}
-					disabled={isLoading}
-					value={String(countPerPage)}
-					onChange={(value): void =>
-						handleCountItemsPerPageChange(Number(value) as Pagination['limit'])
-					}
-					items={perPageOptions.map((count) => ({
-						value: String(count),
-						label: `${count} / page`,
-					}))}
-				/>
+					loading={isLoading}
+					value={countPerPage}
+					onChange={handleCountItemsPerPageChange}
+					getPopupContainer={popupContainer}
+				>
+					{perPageOptions.map((count) => (
+						<Select.Option
+							key={count}
+							value={count}
+						>{`${count} / page`}</Select.Option>
+					))}
+				</Select>
 			)}
 		</Container>
 	);

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -61,6 +61,10 @@
 				margin-left: 16px;
 			}
 
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
 			[aria-selected='false'] {
 				.periscope-tab {
 					color: var(--l2-foreground);

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

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Button, Tooltip } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -232,18 +231,15 @@ function AlertThreshold({
 					<Typography.Text className="sentence-text">
 						Send a notification when
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={thresholdState.selectedQuery}
-						onChange={(value): void => handleSelectedQueryChange(value as string)}
+						onChange={handleSelectedQueryChange}
 						style={{ width: 80 }}
-						items={queryNames.map((q) => ({
-							value: String(q.value),
-							label: q.label as React.ReactNode,
-						}))}
+						options={queryNames}
 						data-testid="alert-threshold-query-select"
 					/>
 					<Typography.Text className="sentence-text">is</Typography.Text>
-					<SelectSimple
+					<Select
 						value={
 							(normalizeOperator(thresholdState.operator) ??
 								thresholdState.operator) as AlertThresholdOperator
@@ -251,17 +247,17 @@ function AlertThreshold({
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_OPERATOR',
-								payload: value as AlertThresholdOperator,
+								payload: value,
 							});
 						}}
 						style={{ width: 180 }}
-						items={THRESHOLD_OPERATOR_OPTIONS}
+						options={THRESHOLD_OPERATOR_OPTIONS}
 						data-testid="alert-threshold-operator-select"
 					/>
 					<Typography.Text className="sentence-text">
 						the threshold(s)
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={
 							(normalizeMatchType(thresholdState.matchType) ??
 								thresholdState.matchType) as AlertThresholdMatchType
@@ -269,11 +265,11 @@ function AlertThreshold({
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_MATCH_TYPE',
-								payload: value as AlertThresholdMatchType,
+								payload: value,
 							});
 						}}
 						style={{ width: 180 }}
-						items={matchTypeOptionsWithTooltips}
+						options={matchTypeOptionsWithTooltips}
 						data-testid="alert-threshold-match-type-select"
 					/>
 					<Typography.Text className="sentence-text">

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';
 import {
@@ -18,13 +18,19 @@ import {
 } from '../context/types';
 import { normalizeMatchType, normalizeOperator } from '../utils';
 import { AnomalyAndThresholdProps } from './types';
-import { getQueryNames, RoutingPolicyBanner } from './utils';
+import {
+	getQueryNames,
+	NotificationChannelsNotFoundContent,
+	RoutingPolicyBanner,
+} from './utils';
 
 function AnomalyThreshold({
 	channels,
 	isLoadingChannels,
 	isErrorChannels,
+	refreshChannels,
 }: AnomalyAndThresholdProps): JSX.Element {
+	const { user } = useAppContext();
 	const {
 		thresholdState,
 		setThresholdState,
@@ -36,14 +42,13 @@ function AnomalyThreshold({
 
 	const queryNames = getQueryNames(currentQuery);
 
-	const deviationOptions = useMemo(
-		() =>
-			Array.from({ length: 7 }, (_, i) => ({
-				label: (i + 1).toString(),
-				value: (i + 1).toString(),
-			})),
-		[],
-	);
+	const deviationOptions = useMemo(() => {
+		const options = [];
+		for (let i = 1; i <= 7; i++) {
+			options.push({ label: i.toString(), value: i });
+		}
+		return options;
+	}, []);
 
 	const updateThreshold = (
 		id: string,
@@ -66,16 +71,16 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="notification-text" className="sentence-text">
 						Send notification when the observed value for
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={thresholdState.selectedQuery}
-						testId="query-select"
+						data-testid="query-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SELECTED_QUERY',
-								payload: value as string,
+								payload: value,
 							});
 						}}
-						items={queryNames}
+						options={queryNames}
 					/>
 					<Typography.Text
 						data-testid="evaluation-window-text"
@@ -83,16 +88,16 @@ function AnomalyThreshold({
 					>
 						during the last
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={thresholdState.evaluationWindow}
-						testId="evaluation-window-select"
+						data-testid="evaluation-window-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_EVALUATION_WINDOW',
-								payload: value as string,
+								payload: value,
 							});
 						}}
-						items={ANOMALY_TIME_DURATION_OPTIONS}
+						options={ANOMALY_TIME_DURATION_OPTIONS}
 					/>
 				</div>
 				<div className="alert-condition-sentence">
@@ -100,34 +105,34 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="threshold-text" className="sentence-text">
 						is
 					</Typography.Text>
-					<SelectSimple
-						value={thresholdState.thresholds[0].thresholdValue?.toString()}
-						testId="threshold-value-select"
+					<Select
+						value={thresholdState.thresholds[0].thresholdValue}
+						data-testid="threshold-value-select"
 						onChange={(value): void => {
 							updateThreshold(
 								thresholdState.thresholds[0].id,
 								'thresholdValue',
-								(value as string).toString(),
+								value.toString(),
 							);
 						}}
-						items={deviationOptions}
+						options={deviationOptions}
 					/>
 					<Typography.Text data-testid="deviations-text" className="sentence-text">
 						deviations
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={
 							(normalizeOperator(thresholdState.operator) ??
 								thresholdState.operator) as AlertThresholdOperator
 						}
-						testId="operator-select"
+						data-testid="operator-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_OPERATOR',
-								payload: value as AlertThresholdOperator,
+								payload: value,
 							});
 						}}
-						items={ANOMALY_THRESHOLD_OPERATOR_OPTIONS}
+						options={ANOMALY_THRESHOLD_OPERATOR_OPTIONS}
 					/>
 					<Typography.Text
 						data-testid="predicted-data-text"
@@ -135,19 +140,19 @@ function AnomalyThreshold({
 					>
 						the predicted data
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={
 							(normalizeMatchType(thresholdState.matchType) ??
 								thresholdState.matchType) as AlertThresholdMatchType
 						}
-						testId="match-type-select"
+						data-testid="match-type-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_MATCH_TYPE',
-								payload: value as AlertThresholdMatchType,
+								payload: value,
 							});
 						}}
-						items={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
+						options={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
 					/>
 				</div>
 				{/* Sentence 3 */}
@@ -155,16 +160,16 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="using-the-text" className="sentence-text">
 						using the
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={thresholdState.algorithm}
-						testId="algorithm-select"
+						data-testid="algorithm-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_ALGORITHM',
-								payload: value as string,
+								payload: value,
 							});
 						}}
-						items={ANOMALY_ALGORITHM_OPTIONS}
+						options={ANOMALY_ALGORITHM_OPTIONS}
 					/>
 					<Typography.Text
 						data-testid="algorithm-with-text"
@@ -172,16 +177,16 @@ function AnomalyThreshold({
 					>
 						algorithm with
 					</Typography.Text>
-					<SelectSimple
+					<Select
 						value={thresholdState.seasonality}
-						testId="seasonality-select"
+						data-testid="seasonality-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SEASONALITY',
-								payload: value as string,
+								payload: value,
 							});
 						}}
-						items={ANOMALY_SEASONALITY_OPTIONS}
+						options={ANOMALY_SEASONALITY_OPTIONS}
 					/>
 					{notificationSettings.routingPolicies ? (
 						<>
@@ -191,25 +196,35 @@ function AnomalyThreshold({
 							>
 								seasonality to
 							</Typography.Text>
-							<ComboboxSimple
+							<Select
 								value={thresholdState.thresholds[0].channels}
 								onChange={(value): void =>
-									updateThreshold(
-										thresholdState.thresholds[0].id,
-										'channels',
-										value as string[],
-									)
+									updateThreshold(thresholdState.thresholds[0].id, 'channels', value)
 								}
 								style={{ width: 350 }}
-								items={channels.map((channel) => ({
+								options={channels.map((channel) => ({
 									value: channel.id,
 									label: channel.name,
 								}))}
-								multiple
+								mode="multiple"
 								placeholder="Select notification channels"
-								loading={isLoadingChannels}
-								className={isErrorChannels ? 'error' : undefined}
-								emptyPlaceholder="No channels found"
+								showSearch
+								maxTagCount={2}
+								maxTagPlaceholder={(omittedValues): string =>
+									`+${omittedValues.length} more`
+								}
+								maxTagTextLength={10}
+								filterOption={(input, option): boolean =>
+									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
+								}
+								status={isErrorChannels ? 'error' : undefined}
+								disabled={isLoadingChannels}
+								notFoundContent={
+									<NotificationChannelsNotFoundContent
+										user={user}
+										refreshChannels={refreshChannels}
+									/>
+								}
 							/>
 						</>
 					) : (

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,14 +1,14 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Tooltip } from 'antd';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';
 import { AlertThresholdOperator } from '../context/types';
 import { normalizeOperator } from '../utils';
 import { ThresholdItemProps } from './types';
+import { NotificationChannelsNotFoundContent } from './utils';
 
 function ThresholdItem({
 	threshold,
@@ -18,38 +18,36 @@ function ThresholdItem({
 	channels,
 	units,
 	isErrorChannels,
+	refreshChannels,
 	isLoadingChannels,
 }: ThresholdItemProps): JSX.Element {
+	const { user } = useAppContext();
 	const { thresholdState, notificationSettings } = useCreateAlertState();
 	const [showRecoveryThreshold, setShowRecoveryThreshold] = useState(false);
 
 	const yAxisUnitSelect = useMemo(() => {
 		let component = (
-			<SelectSimple
+			<Select
 				placeholder="Unit"
-				value={threshold.unit ? threshold.unit : undefined}
-				onChange={(value): void =>
-					updateThreshold(threshold.id, 'unit', value as string)
-				}
+				value={threshold.unit ? threshold.unit : null}
+				onChange={(value): void => updateThreshold(threshold.id, 'unit', value)}
 				style={{ width: 150 }}
-				items={units}
+				options={units}
 				disabled={units.length === 0}
-				testId="threshold-unit-select"
+				data-testid="threshold-unit-select"
 			/>
 		);
 		if (units.length === 0) {
 			component = (
 				<Tooltip trigger="hover" title="No compatible units available">
-					<SelectSimple
+					<Select
 						placeholder="Unit"
-						value={threshold.unit ? threshold.unit : undefined}
-						onChange={(value): void =>
-							updateThreshold(threshold.id, 'unit', value as string)
-						}
+						value={threshold.unit ? threshold.unit : null}
+						onChange={(value): void => updateThreshold(threshold.id, 'unit', value)}
 						style={{ width: 150 }}
-						items={units}
+						options={units}
 						disabled={units.length === 0}
-						testId="threshold-unit-select"
+						data-testid="threshold-unit-select"
 					/>
 				</Tooltip>
 			);
@@ -119,22 +117,37 @@ function ThresholdItem({
 					{!notificationSettings.routingPolicies && (
 						<>
 							<Typography.Text className="sentence-text">send to</Typography.Text>
-							<ComboboxSimple
+							<Select
 								value={threshold.channels}
 								onChange={(value): void =>
-									updateThreshold(threshold.id, 'channels', value as string[])
+									updateThreshold(threshold.id, 'channels', value)
 								}
-								testId="threshold-notification-channel-select"
+								data-testid="threshold-notification-channel-select"
 								style={{ width: 350 }}
-								items={channels.map((channel) => ({
+								options={channels.map((channel) => ({
 									value: channel.name,
 									label: channel.name,
+									'data-testid': `threshold-notification-channel-option-${threshold.label}`,
 								}))}
-								multiple
+								mode="multiple"
 								placeholder="Select notification channels"
-								loading={isLoadingChannels}
-								className={isErrorChannels ? 'error' : undefined}
-								emptyPlaceholder="No channels found"
+								showSearch
+								maxTagCount={2}
+								maxTagPlaceholder={(omittedValues): string =>
+									`+${omittedValues.length} more`
+								}
+								maxTagTextLength={10}
+								filterOption={(input, option): boolean =>
+									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
+								}
+								status={isErrorChannels ? 'error' : undefined}
+								disabled={isLoadingChannels}
+								notFoundContent={
+									<NotificationChannelsNotFoundContent
+										user={user}
+										refreshChannels={refreshChannels}
+									/>
+								}
 							/>
 						</>
 					)}

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

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';
@@ -66,7 +66,7 @@ const mockChannels: Channels[] = [
 	{ id: TEST_CONSTANTS.CHANNEL_3, name: 'PagerDuty Channel' } as any,
 ];
 
-const mockUnits: ComboboxSimpleItem[] = [
+const mockUnits: DefaultOptionType[] = [
 	{ label: 'Bytes', value: 'bytes' },
 	{ label: 'KB', value: 'kb' },
 	{ label: 'MB', value: 'mb' },

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -11,7 +11,7 @@
 		.alert-condition-tabs {
 			display: flex;
 			border-radius: 2px;
-			border: 1px solid var(--l2-border);
+			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
 			flex-direction: row;
 			border-bottom: none;
@@ -26,19 +26,19 @@
 				padding: 9px;
 				box-shadow: none;
 				border-radius: 0px;
-				border-left: 0.5px solid var(--l2-border);
-				border-bottom: 0.5px solid var(--l2-border);
+				border-left: 0.5px solid var(--l1-border);
+				border-bottom: 0.5px solid var(--l1-border);
 				width: 120px;
 				height: 36px;
 
 				gap: 8px;
 
 				&.active-tab {
-					background-color: var(--l2-background);
+					background-color: var(--l1-background);
 					border-bottom: none;
 
 					&:hover {
-						background-color: var(--l2-background-hover) !important;
+						background-color: var(--l1-background) !important;
 					}
 				}
 
@@ -54,7 +54,7 @@
 				&:hover {
 					background-color: transparent !important;
 					border-left: 1px solid transparent !important;
-					color: var(--l3-foreground);
+					color: var(--l1-foreground);
 				}
 			}
 		}
@@ -65,16 +65,10 @@
 .anomaly-threshold-container {
 	padding: 24px;
 	padding-right: 72px;
-	background-color: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	background-color: var(--l1-background);
+	border: 1px solid var(--l1-border);
 	width: 100%;
 
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
-	--combobox-trigger-background-color: var(--l3-background);
-	--combobox-trigger-border-color: var(--l3-border);
-
 	.alert-condition-sentences {
 		display: flex;
 		flex-direction: column;
@@ -94,6 +88,34 @@
 				align-items: center;
 				gap: 8px;
 			}
+
+			.ant-select {
+				width: 240px;
+
+				.ant-select-selector {
+					background-color: var(--l2-background);
+					border: 1px solid var(--l1-border);
+					color: var(--muted-foreground);
+					font-family: 'Space Mono';
+
+					&:hover {
+						border-color: var(--l1-border);
+					}
+
+					&:focus {
+						border-color: var(--l1-border);
+						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+					}
+				}
+
+				.ant-select-selection-item {
+					color: var(--l1-foreground);
+				}
+
+				.ant-select-arrow {
+					color: var(--muted-foreground);
+				}
+			}
 		}
 	}
 
@@ -129,9 +151,9 @@
 					flex-wrap: wrap;
 
 					.ant-input {
-						background-color: var(--l3-background);
-						border: 1px solid var(--l3-border);
-						color: var(--l2-foreground);
+						background-color: var(--card);
+						border: 1px solid var(--l1-border);
+						color: var(--l1-foreground);
 						height: 32px;
 
 						&::placeholder {
@@ -139,28 +161,28 @@
 						}
 
 						&:hover {
-							border-color: var(--l3-border);
+							border-color: var(--l1-border);
 						}
 
 						&:focus {
-							border-color: var(--l3-border);
+							border-color: var(--l1-border);
 							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 						}
 					}
 
 					.ant-select {
 						.ant-select-selector {
-							background-color: var(--l3-background);
-							border: 1px solid var(--l3-border);
-							color: var(--l2-foreground);
+							background-color: var(--card);
+							border: 1px solid var(--l1-border);
+							color: var(--l1-foreground);
 							height: 32px;
 
 							&:hover {
-								border-color: var(--l2-border);
+								border-color: var(--l1-border);
 							}
 
 							&:focus {
-								border-color: var(--l2-border);
+								border-color: var(--l1-border);
 								box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 							}
 
@@ -170,23 +192,21 @@
 						}
 
 						.ant-select-selection-item {
-							color: var(--l2-foreground);
+							color: var(--l1-foreground);
 						}
 
 						.ant-select-arrow {
-							color: var(--l2-foreground);
+							color: var(--muted-foreground);
 						}
 					}
 
 					.icon-btn {
-						color: var(--l2-foreground);
-						border: 1px solid var(--l3-border);
-						background-color: var(--l3-background);
+						color: var(--muted-foreground);
+						border: 1px solid var(--l1-border);
 						border-radius: 4px;
 						display: flex;
 						align-items: center;
 						justify-content: center;
-						box-shadow: none;
 					}
 				}
 			}
@@ -206,8 +226,8 @@
 					pointer-events: none;
 					cursor: default;
 					color: var(--muted-foreground);
-					background-color: var(--l3-background) !important;
-					border: 1px solid var(--l3-border);
+					background-color: var(--card) !important;
+					border: 1px solid var(--l1-border);
 					border-radius: 4px;
 					display: flex;
 					align-items: center;
@@ -215,9 +235,9 @@
 				}
 
 				.ant-input {
-					background-color: var(--l3-background);
-					border: 1px solid var(--l3-border);
-					color: var(--l2-foreground);
+					background-color: var(--card);
+					border: 1px solid var(--l1-border);
+					color: var(--l1-foreground);
 					height: 32px;
 
 					&::placeholder {
@@ -225,11 +245,11 @@
 					}
 
 					&:hover {
-						border-color: var(--l3-border);
+						border-color: var(--l1-border);
 					}
 
 					&:focus {
-						border-color: var(--l2-border);
+						border-color: var(--l1-border);
 						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 					}
 				}
@@ -238,7 +258,7 @@
 
 		.add-threshold-btn {
 			margin-top: 8px;
-			border: 1px dashed var(--l3-border);
+			border: 1px dashed var(--l1-border);
 			color: var(--l2-foreground);
 			background-color: transparent;
 			border-radius: 4px;
@@ -247,11 +267,10 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			box-shadow: none;
 
 			&:hover {
-				border-color: var(--l2-border);
-				color: var(--l3-foreground);
+				border-color: var(--l1-border);
+				color: var(--l1-foreground);
 			}
 
 			.anticon {
@@ -320,9 +339,8 @@
 		min-width: 240px;
 		width: auto;
 		justify-content: space-between;
-		background-color: var(--l3-background);
-		border: 1px solid var(--l3-border);
-		box-shadow: none;
+		background-color: var(--l2-background);
+		border: 1px solid var(--l1-border);
 
 		.evaluate-alert-conditions-button-left {
 			color: var(--l2-foreground);
@@ -340,7 +358,7 @@
 			.evaluate-alert-conditions-button-right-text {
 				font-size: 12px;
 				font-weight: 500;
-				background-color: var(--l3-border);
+				background-color: var(--l1-border);
 				padding: 1px 4px;
 			}
 		}

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -1,4 +1,4 @@
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { Channels } from 'types/api/channels/getAll';
 
 import {
@@ -23,7 +23,7 @@ export interface ThresholdItemProps {
 	showRemoveButton: boolean;
 	channels: Channels[];
 	isLoadingChannels: boolean;
-	units: ComboboxSimpleItem[];
+	units: DefaultOptionType[];
 	isErrorChannels: boolean;
 	refreshChannels: () => void;
 }

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,7 +1,7 @@
-import { Button, Flex } from 'antd';
+import { Button, Flex, SelectProps } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
+import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
@@ -22,11 +22,11 @@ import { openInNewTab } from 'utils/navigation';
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
 
-export function getQueryNames(currentQuery: Query): ComboboxSimpleItem[] {
+export function getQueryNames(currentQuery: Query): BaseOptionType[] {
 	const involvedQueriesInTraceOperator = getInvolvedQueriesInTraceOperator(
 		currentQuery.builder.queryTraceOperator,
 	);
-	const queryConfig: Record<EQueryType, () => ComboboxSimpleItem[]> = {
+	const queryConfig: Record<EQueryType, () => SelectProps['options']> = {
 		[EQueryType.QUERY_BUILDER]: () => [
 			...(getSelectedQueryOptions(currentQuery.builder.queryData)?.filter(
 				(option) =>
@@ -52,7 +52,7 @@ export function getCategoryByOptionId(id: string): string | undefined {
 
 export function getCategorySelectOptionByName(
 	name: string | undefined,
-): ComboboxSimpleItem[] {
+): DefaultOptionType[] {
 	if (!name) {
 		return [];
 	}
@@ -68,6 +68,7 @@ export function getCategorySelectOptionByName(
 			?.units.map((unit) => ({
 				label: unit.name,
 				value: unit.id,
+				'data-testid': `threshold-unit-select-option-${unit.id}`,
 			})) || []
 	);
 }

frontend/src/container/CreateAlertV2/CreateAlertHeader/LabelsInput.tsx

@@ -3,7 +3,6 @@ import { X } from '@signozhq/icons';
 import { useNotifications } from 'hooks/useNotifications';
 
 import { LabelInputState, LabelsInputProps } from './types';
-import { Button } from '@signozhq/ui/button';
 
 function LabelsInput({
 	labels,
@@ -145,16 +144,14 @@ function LabelsInput({
 			)}
 
 			{!isAdding ? (
-				<Button
+				<button
 					className="labels-input__add-button"
 					type="button"
-					variant="outlined"
-					color="secondary"
 					onClick={handleAddLabelsClick}
 					data-testid="alert-add-label-button"
 				>
 					+ Add labels
-				</Button>
+				</button>
 			) : (
 				<div className="labels-input__input-container">
 					<input

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -39,14 +39,9 @@
 
 	&__input.title {
 		background-color: transparent;
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		color: var(--l1-foreground);
 		width: 100%;
 		min-width: 300px;
-
-		&:hover {
-			background: var(--l2-background);
-		}
 	}
 
 	&__input.description {
@@ -54,6 +49,15 @@
 		background-color: transparent;
 		color: var(--l2-foreground);
 	}
+
+	.ant-btn {
+		display: flex;
+		gap: 4px;
+		align-items: center;
+		color: var(--l1-foreground);
+		border: 1px solid var(--l1-border);
+		margin-right: 16px;
+	}
 }
 
 .labels-input {
@@ -62,7 +66,19 @@
 	gap: 8px;
 
 	&__add-button {
-		width: 80px;
+		width: fit-content;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		border: 1px solid var(--l1-border);
+		background-color: transparent;
+		cursor: pointer;
+		padding: 4px 8px;
+		border-radius: 4px;
+
+		&:hover {
+			border-color: var(--l1-border);
+			color: var(--l1-foreground);
+		}
 	}
 
 	&__existing-labels {
@@ -105,7 +121,6 @@
 		align-items: center;
 		background-color: transparent;
 		border: none;
-		border: 1px solid var(--l2-border);
 	}
 
 	&__input {

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -93,16 +93,16 @@
 			gap: 8px;
 
 			.ant-input {
-				background-color: var(--l3-background);
-				border: 1px solid var(--l3-border);
-				color: var(--l2-foreground);
+				background-color: var(--l2-background);
+				border: 1px solid var(--l1-border);
+				color: var(--l1-foreground);
 
 				&:hover {
-					border-color: var(--l3-border);
+					border-color: var(--l1-border);
 				}
 
 				&:focus {
-					border-color: var(--l3-border);
+					border-color: var(--l1-border);
 					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 				}
 			}

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Input, Tooltip } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { Info } from '@signozhq/icons';
 
@@ -80,8 +79,8 @@ function EvaluationCadence(): JSX.Element {
 								}
 								data-testid="evaluation-cadence-duration-input"
 							/>
-							<SelectSimple
-								items={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+							<Select
+								options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
 								placeholder="Select time unit"
 								style={{ width: 120 }}
 								value={advancedOptions.evaluationCadence.default.timeUnit}
@@ -92,7 +91,7 @@ function EvaluationCadence(): JSX.Element {
 											...advancedOptions.evaluationCadence,
 											default: {
 												...advancedOptions.evaluationCadence.default,
-												timeUnit: value as string,
+												timeUnit: value,
 											},
 										},
 									})

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input } from 'antd';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { Button, DatePicker, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
@@ -43,6 +42,10 @@ function EvaluationCadenceDetails({
 		},
 	});
 
+	const [searchTimezoneString, setSearchTimezoneString] = useState('');
+	const [occurenceSearchString, setOccurenceSearchString] = useState('');
+	const [repeatEverySearchString, setRepeatEverySearchString] = useState('');
+
 	const tabs = [
 		{
 			label: 'Editor',
@@ -90,39 +93,45 @@ function EvaluationCadenceDetails({
 		<div className="editor-view" data-testid="editor-view">
 			<div className="select-group">
 				<Typography.Text>REPEAT EVERY</Typography.Text>
-				<ComboboxSimple
-					items={EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS}
-					value={evaluationCadence.custom.repeatEvery || undefined}
+				<Select
+					options={EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS}
+					value={evaluationCadence.custom.repeatEvery || null}
 					onChange={(value): void =>
 						setEvaluationCadence({
 							...evaluationCadence,
 							custom: {
 								...evaluationCadence.custom,
-								repeatEvery: value as string,
+								repeatEvery: value,
 								occurence: [],
 							},
 						})
 					}
 					placeholder="Select repeat every"
+					showSearch
+					searchValue={repeatEverySearchString}
+					onSearch={setRepeatEverySearchString}
 				/>
 			</div>
 			{evaluationCadence.custom.repeatEvery !== 'day' && (
 				<div className="select-group">
 					<Typography.Text>ON DAY(S)</Typography.Text>
-					<ComboboxSimple
-						items={occurenceOptions}
-						value={evaluationCadence.custom.occurence || []}
-						multiple
+					<Select
+						options={occurenceOptions}
+						value={evaluationCadence.custom.occurence || null}
+						mode="multiple"
 						onChange={(value): void =>
 							setEvaluationCadence({
 								...evaluationCadence,
 								custom: {
 									...evaluationCadence.custom,
-									occurence: value as string[],
+									occurence: value,
 								},
 							})
 						}
 						placeholder="Select day(s)"
+						showSearch
+						searchValue={occurenceSearchString}
+						onSearch={setOccurenceSearchString}
 					/>
 				</div>
 			)}
@@ -143,19 +152,22 @@ function EvaluationCadenceDetails({
 			</div>
 			<div className="select-group">
 				<Typography.Text>TIMEZONE</Typography.Text>
-				<ComboboxSimple
-					items={TIMEZONE_DATA}
-					value={evaluationCadence.custom.timezone || undefined}
+				<Select
+					options={TIMEZONE_DATA}
+					value={evaluationCadence.custom.timezone || null}
 					onChange={(value): void =>
 						setEvaluationCadence({
 							...evaluationCadence,
 							custom: {
 								...evaluationCadence.custom,
-								timezone: value as string,
+								timezone: value,
 							},
 						})
 					}
 					placeholder="Select timezone"
+					onSearch={setSearchTimezoneString}
+					searchValue={searchTimezoneString}
+					showSearch
 				/>
 			</div>
 		</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -1,9 +1,5 @@
 .evaluation-cadence-container {
 	border-bottom: 1px solid var(--l1-border);
-
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
 	.evaluation-cadence-item {
 		border-bottom: none !important;
 	}
@@ -161,6 +157,24 @@
 						font-weight: 500;
 					}
 
+					.ant-select {
+						border: 1px solid var(--l1-border);
+
+						.ant-select-selector {
+							background-color: var(--l2-background);
+							border: 1px solid var(--l1-border);
+							color: var(--l1-foreground);
+
+							&:hover {
+								border-color: var(--l1-border);
+							}
+
+							&:focus {
+								border-color: var(--l1-border);
+							}
+						}
+					}
+
 					.ant-picker {
 						background-color: var(--l2-background);
 						border: 1px solid var(--l1-border);

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
@@ -20,7 +19,7 @@ function EvaluationWindowDetails({
 	const currentHourOptions = useMemo(() => {
 		const options = [];
 		for (let i = 0; i < 60; i++) {
-			options.push({ label: i.toString(), value: i.toString() });
+			options.push({ label: i.toString(), value: i });
 		}
 		return options;
 	}, []);
@@ -28,7 +27,7 @@ function EvaluationWindowDetails({
 	const currentMonthOptions = useMemo(() => {
 		const options = [];
 		for (let i = 1; i <= 31; i++) {
-			options.push({ label: i.toString(), value: i.toString() });
+			options.push({ label: i.toString(), value: i });
 		}
 		return options;
 	}, []);
@@ -124,10 +123,10 @@ function EvaluationWindowDetails({
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING AT MINUTE</Typography.Text>
-					<SelectSimple
-						items={currentHourOptions}
-						value={evaluationWindow.startingAt.number || undefined}
-						onChange={(value): void => handleNumberChange(value as string)}
+					<Select
+						options={currentHourOptions}
+						value={evaluationWindow.startingAt.number || null}
+						onChange={handleNumberChange}
 						placeholder="Select starting at"
 						data-testid="evaluation-window-details-starting-at-select"
 					/>
@@ -152,10 +151,10 @@ function EvaluationWindowDetails({
 				</div>
 				<div className="select-group">
 					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<SelectSimple
-						items={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || undefined}
-						onChange={(value): void => handleTimezoneChange(value as string)}
+					<Select
+						options={TIMEZONE_DATA}
+						value={evaluationWindow.startingAt.timezone || null}
+						onChange={handleTimezoneChange}
 						placeholder="Select timezone"
 						data-testid="evaluation-window-details-timezone-select"
 					/>
@@ -173,10 +172,10 @@ function EvaluationWindowDetails({
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING ON DAY</Typography.Text>
-					<SelectSimple
-						items={currentMonthOptions}
-						value={evaluationWindow.startingAt.number || undefined}
-						onChange={(value): void => handleNumberChange(value as string)}
+					<Select
+						options={currentMonthOptions}
+						value={evaluationWindow.startingAt.number || null}
+						onChange={handleNumberChange}
 						placeholder="Select starting at"
 						data-testid="evaluation-window-details-starting-at-select"
 					/>
@@ -190,10 +189,10 @@ function EvaluationWindowDetails({
 				</div>
 				<div className="select-group">
 					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<SelectSimple
-						items={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || undefined}
-						onChange={(value): void => handleTimezoneChange(value as string)}
+					<Select
+						options={TIMEZONE_DATA}
+						value={evaluationWindow.startingAt.timezone || null}
+						onChange={handleTimezoneChange}
 						placeholder="Select timezone"
 						data-testid="evaluation-window-details-timezone-select"
 					/>
@@ -222,10 +221,10 @@ function EvaluationWindowDetails({
 			</div>
 			<div className="select-group time-select-group">
 				<Typography.Text>UNIT</Typography.Text>
-				<SelectSimple
-					items={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
-					value={evaluationWindow.startingAt.unit || undefined}
-					onChange={(value): void => handleUnitChange(value as string)}
+				<Select
+					options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+					value={evaluationWindow.startingAt.unit || null}
+					onChange={handleUnitChange}
 					placeholder="Select unit"
 					data-testid="evaluation-window-details-custom-rolling-window-unit-select"
 				/>

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Tooltip } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from '@signozhq/icons';
@@ -88,15 +87,16 @@ function MultipleNotifications(): JSX.Element {
 			: 'No grouping fields available';
 		let input = (
 			<div>
-				<SelectSimple
-					items={spaceAggregationOptions}
-					onChange={(value): void => onSelectChange(value as string[])}
-					value={notificationSettings.multipleNotifications || []}
-					multiple
+				<Select
+					options={spaceAggregationOptions}
+					onChange={onSelectChange}
+					value={notificationSettings.multipleNotifications}
+					mode="multiple"
 					placeholder={placeholder}
 					disabled={!isMultipleNotificationsEnabled}
-					maxDisplayedPills={3}
-					testId="multiple-notifications-select"
+					aria-disabled={!isMultipleNotificationsEnabled}
+					maxTagCount={3}
+					data-testid="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
 					<Typography.Text className="multiple-notifications-select-description">

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,5 +1,4 @@
-import { Input } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';
@@ -39,31 +38,31 @@ function NotificationSettings(): JSX.Element {
 				}}
 				data-testid="repeat-notifications-time-input"
 			/>
-			<SelectSimple
-				value={notificationSettings.reNotification.unit || undefined}
+			<Select
+				value={notificationSettings.reNotification.unit || null}
 				placeholder="Select unit"
 				disabled={!notificationSettings.reNotification.enabled}
-				items={RE_NOTIFICATION_TIME_UNIT_OPTIONS}
+				options={RE_NOTIFICATION_TIME_UNIT_OPTIONS}
 				onChange={(value): void => {
 					setNotificationSettings({
 						type: 'SET_RE_NOTIFICATION',
 						payload: {
 							enabled: notificationSettings.reNotification.enabled,
 							value: notificationSettings.reNotification.value,
-							unit: value as string,
+							unit: value,
 							conditions: notificationSettings.reNotification.conditions,
 						},
 					});
 				}}
-				testId="repeat-notifications-unit-select"
+				data-testid="repeat-notifications-unit-select"
 			/>
 			<Typography.Text>while</Typography.Text>
-			<SelectSimple
-				multiple
-				value={notificationSettings.reNotification.conditions || []}
+			<Select
+				mode="multiple"
+				value={notificationSettings.reNotification.conditions || null}
 				placeholder="Select conditions"
 				disabled={!notificationSettings.reNotification.enabled}
-				items={RE_NOTIFICATION_CONDITION_OPTIONS}
+				options={RE_NOTIFICATION_CONDITION_OPTIONS}
 				onChange={(value): void => {
 					setNotificationSettings({
 						type: 'SET_RE_NOTIFICATION',
@@ -71,11 +70,11 @@ function NotificationSettings(): JSX.Element {
 							enabled: notificationSettings.reNotification.enabled,
 							value: notificationSettings.reNotification.value,
 							unit: notificationSettings.reNotification.unit,
-							conditions: value as ('firing' | 'nodata')[],
+							conditions: value,
 						},
 					});
 				}}
-				testId="repeat-notifications-conditions-select"
+				data-testid="repeat-notifications-conditions-select"
 			/>
 		</div>
 	);

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -3,9 +3,6 @@
 	flex-direction: column;
 	margin: 0 16px;
 
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
 	.notification-message-container {
 		display: flex;
 		flex-direction: column;
@@ -57,8 +54,8 @@
 
 		textarea {
 			height: 150px;
-			background: var(--l3-background);
-			border: 1px solid var(--l3-border);
+			background: var(--l2-background);
+			border: 1px solid var(--l1-border);
 			border-radius: 4px;
 			color: var(--l2-foreground) !important;
 			font-family: Inter;
@@ -80,9 +77,8 @@
 			gap: 8px;
 
 			.ant-input {
-				width: 190px;
-				border: 1px solid var(--l3-border);
-				background-color: var(--l3-background);
+				width: 120px;
+				border: 1px solid var(--l1-border);
 			}
 
 			.ant-select {

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

@@ -91,7 +91,6 @@ function ChartPreview({
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
-			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
@@ -107,7 +106,6 @@ function ChartPreview({
 	const renderPromAndChQueryChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
 			headline={headline}
-			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}

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

@@ -17,7 +17,6 @@ import { CreateAlertProvider } from '../../context';
 import ChartPreview from '../ChartPreview/ChartPreview';
 
 const REQUESTS_PER_SEC = 'requests/sec';
-const CHART_PREVIEW_NAME = 'Chart Preview';
 const QUERY_TYPE_TEST_ID = 'query-type';
 const GRAPH_TYPE_TEST_ID = 'graph-type';
 const CHART_PREVIEW_COMPONENT_TEST_ID = 'chart-preview-component';
@@ -34,7 +33,6 @@ jest.mock(
 			return (
 				<div data-testid={CHART_PREVIEW_COMPONENT_TEST_ID}>
 					<div data-testid="headline">{props.headline}</div>
-					<div data-testid="name">{props.name}</div>
 					<div data-testid={QUERY_TYPE_TEST_ID}>{props.query?.queryType}</div>
 					<div data-testid="selected-interval">
 						{props.selectedInterval?.startTime}
@@ -175,12 +173,6 @@ describe('ChartPreview', () => {
 		);
 	});
 
-	it('renders QueryBuilder chart preview with empty name when query type is QUERY_BUILDER', () => {
-		renderChartPreview();
-
-		expect(screen.getByTestId('name')).toHaveTextContent('');
-	});
-
 	it('renders QueryBuilder chart preview with correct props', () => {
 		renderChartPreview();
 
@@ -191,7 +183,6 @@ describe('ChartPreview', () => {
 		expect(screen.getByTestId(GRAPH_TYPE_TEST_ID)).toHaveTextContent(
 			PANEL_TYPES.TIME_SERIES,
 		);
-		expect(screen.getByTestId('name')).toHaveTextContent('');
 		expect(screen.getByTestId('headline')).toBeInTheDocument();
 		expect(screen.getByTestId('selected-interval')).toBeInTheDocument();
 	});
@@ -214,7 +205,6 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.PROM,
 		);
@@ -238,7 +228,6 @@ describe('ChartPreview', () => {
 		expect(
 			screen.getByTestId(CHART_PREVIEW_COMPONENT_TEST_ID),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('name')).toHaveTextContent(CHART_PREVIEW_NAME);
 		expect(screen.getByTestId(QUERY_TYPE_TEST_ID)).toHaveTextContent(
 			EQueryType.CLICKHOUSE,
 		);

frontend/src/container/CreateAlertV2/QuerySection/styles.scss

@@ -37,11 +37,11 @@
 				gap: 8px;
 
 				&.active-tab {
-					background-color: var(--l3-background);
+					background-color: var(--l1-background);
 					border-bottom: none;
 
 					&:hover {
-						background-color: var(--l3-background) !important;
+						background-color: var(--l1-background) !important;
 					}
 				}
 

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

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import CustomSelect from 'components/NewSelect/CustomSelect';
 import TextToolTip from 'components/TextToolTip';
@@ -204,9 +204,10 @@ function DynamicVariable({
 						}
 					/>
 				</span>
-				<SelectSimple
+				<Select
 					placeholder="Source"
-					items={sources.map((source) => ({ label: source, value: source }))}
+					defaultValue={AttributeSource.ALL_TELEMETRY}
+					options={sources.map((source) => ({ label: source, value: source }))}
 					onChange={(value): void => setAttributeSource(value as AttributeSource)}
 					value={attributeSource || dynamicVariablesSelectedValue?.value}
 				/>

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

@@ -5,9 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Button, Collapse, Input, Tag } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
@@ -57,11 +56,7 @@ import { WidgetSelector } from './WidgetSelector';
 
 import './VariableItem.styles.scss';
 
-const SORT_ITEMS = [
-	{ value: VariableSortTypeArr[0], label: 'Disabled' },
-	{ value: VariableSortTypeArr[1], label: 'Ascending' },
-	{ value: VariableSortTypeArr[2], label: 'Descending' },
-];
+const { Option } = Select;
 
 interface VariableItemProps {
 	variableData: IDashboardVariable;
@@ -748,14 +743,19 @@ function VariableItem({
 									<Typography className="typography-variables">Sort Values</Typography>
 								</LabelContainer>
 
-								<SelectSimple
+								<Select
+									defaultActiveFirstOption
+									defaultValue={VariableSortTypeArr[0]}
 									value={variableSortType}
-									onChange={(value): void =>
-										setVariableSortType(value as TSortVariableValuesType)
+									onChange={(value: TSortVariableValuesType): void =>
+										setVariableSortType(value)
 									}
 									className="sort-input"
-									items={SORT_ITEMS}
-								/>
+								>
+									<Option value={VariableSortTypeArr[0]}>Disabled</Option>
+									<Option value={VariableSortTypeArr[1]}>Ascending</Option>
+									<Option value={VariableSortTypeArr[2]}>Descending</Option>
+								</Select>
 							</VariableItemRow>
 							<VariableItemRow className="multiple-values-section">
 								<LabelContainer>
@@ -798,10 +798,10 @@ function VariableItem({
 								<CustomSelect
 									placeholder="Select a default value"
 									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value ?? '')}
-									options={previewValues.map((val) => ({
-										label: val,
-										value: val,
+									onChange={(value): void => setVariableDefaultValue(value)}
+									options={previewValues.map((value) => ({
+										label: value,
+										value,
 									}))}
 								/>
 							</VariableItemRow>

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -98,14 +98,6 @@
 
 .nameIconInput {
 	display: flex;
-
-	--select-trigger-width: 40px;
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-border-color: var(--l1-border);
-
-	[data-slot='select-trigger'] svg {
-		display: none;
-	}
 }
 
 .dashboardImageInput {
@@ -116,7 +108,7 @@
 		padding: 6px;
 		justify-content: center;
 		align-items: center;
-		border-radius: 2var (--l3-border) px 0px 0px 2px;
+		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--l1-border) !important;
 		background: var(--l3-background) !important;