chore(test): test release

* feat: while the funnel steps are invalid, handle auto save in local storage

* chore: handle lightmode style in 'add span to funnel' modal

* fix: don't save incomplete steps state in local storage if last saved configuration has valid steps

* chore: close the 'Add span to funnel' modal on clicking save or discard

* chore: deprecate the run funnel flow for unexecuted funnel

* feat: change the funnel configuration save logic, and deprecate auto save

* refactor: send all steps in the payload of analytics/overview

* refactor: send all steps in the payload of analytics/steps (graph API)

* chore: send all steps in the payload of analytics/steps/overview API

* chore: send funnel steps with slow and error traces + deprecate the refetch on latency type change

* chore: overall improvements

* chore: change the save funnel icon + increase the width of funnel steps

* fix: make the changes w.r.t. the updated funnel steps validation API + bugfixes

* fix: remove funnelId from funnel results APIs

* fix: handle edge case i.e. refetch funnel results on deleting a funnel step

* chore: remove funnel steps configuration cache on removing funnel

* chore: don't refetch the results on changing the latency type

* fix: fix the edge cases of save funnel button being enabled even after saving the funnel steps

* chore: remove the span count column from top traces tables

* fix: fix the failing CI check by removing unnecessary props / fixing the types

.github/CODEOWNERS

@@ -12,4 +12,9 @@
 /pkg/factory/ @grandwizard28
 /pkg/types/ @grandwizard28
 .golangci.yml @grandwizard28
-**/(zeus|licensing|sqlmigration)/ @vikrantgupta25
+/pkg/zeus/ @vikrantgupta25
+/pkg/licensing/ @vikrantgupta25
+/pkg/sqlmigration/ @vikrantgupta25
+/ee/zeus/ @vikrantgupta25
+/ee/licensing/ @vikrantgupta25
+/ee/sqlmigration/ @vikrantgupta25

.github/workflows/build-community.yaml

@@ -74,7 +74,8 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.variant=community
         -X github.com/SigNoz/signoz/pkg/version.hash=${{ needs.prepare.outputs.hash }}
         -X github.com/SigNoz/signoz/pkg/version.time=${{ needs.prepare.outputs.time }}
-        -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}'
+        -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
+        -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./pkg/query-service/Dockerfile.multi-arch

.github/workflows/build-enterprise.yaml

@@ -108,7 +108,8 @@ jobs:
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
         -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.signoz.cloud
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1'
+        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
+        -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./ee/query-service/Dockerfile.multi-arch

.github/workflows/build-staging.yaml

@@ -107,7 +107,8 @@ jobs:
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.staging.signoz.cloud
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.staging.signoz.cloud/api/v1'
+        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.staging.signoz.cloud/api/v1
+        -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       GO_CGO_ENABLED: 1
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./ee/query-service/Dockerfile.multi-arch

README.md

@@ -5,6 +5,8 @@
     <br>SigNoz
 </h1>
 
+ok
+
 <p align="center">All your logs, metrics, and traces in one place. Monitor your application, spot issues before they occur and troubleshoot downtime quickly with rich context. SigNoz is a cost-effective open-source alternative to Datadog and New Relic. Visit <a href="https://signoz.io" target="_blank">signoz.io</a> for the full documentation, tutorials, and guide.</p>
 
 <p align="center">

conf/example.yaml

@@ -165,12 +165,6 @@ alertmanager:
       # Retention of the notification logs.
       retention: 120h
 
-
-##################### Analytics #####################
-analytics:
-  # Whether to enable analytics.
-  enabled: false
-
 ##################### Emailing #####################
 emailing:
   # Whether to enable emailing.
@@ -215,3 +209,21 @@ sharder:
   single:
     # The org id to which this instance belongs to.
     org_id: org_id
+
+##################### Analytics #####################
+analytics:
+  # Whether to enable analytics.
+  enabled: false
+  segment:
+    # The key to use for segment.
+    key: ""
+
+##################### StatsReporter #####################
+statsreporter:
+  # Whether to enable stats reporter. This is used to provide valuable insights to the SigNoz team. It does not collect any sensitive/PII data.
+  enabled: true
+  # The interval at which the stats are collected.
+  interval: 6h
+  collect:
+    # Whether to collect identities and traits (emails).
+    identities: true

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

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.86.2
+    image: signoz/signoz:v0.87.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -100,26 +100,33 @@ services:
     #   - "9000:9000"
     #   - "8123:8123"
     #   - "9181:9181"
+              
+    configs:
+      - source: clickhouse-config
+        target: /etc/clickhouse-server/config.xml
+      - source: clickhouse-users
+        target: /etc/clickhouse-server/users.xml
+      - source: clickhouse-custom-function
+        target: /etc/clickhouse-server/custom-function.xml
+      - source: clickhouse-cluster
+        target: /etc/clickhouse-server/config.d/cluster.xml
+        
     volumes:
-      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
-      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
-      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
-      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
-      - ../common/clickhouse/cluster.xml:/etc/clickhouse-server/config.d/cluster.xml
       - clickhouse:/var/lib/clickhouse/
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.86.2
+    image: signoz/signoz:v0.87.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
     volumes:
-      - ../common/signoz/prometheus.yml:/root/config/prometheus.yml
-      - ../common/dashboards:/root/config/dashboards
       - sqlite:/var/lib/signoz/
+    configs:
+      - source: signoz-prometheus-config
+        target: /root/config/prometheus.yml
     environment:
       - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
       - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
@@ -147,9 +154,11 @@ services:
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
       - --feature-gates=-pkg.translator.prometheus.NormalizeName
-    volumes:
-      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
-      - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
+    configs:
+      - source: otel-collector-config
+        target: /etc/otel-collector-config.yaml
+      - source: otel-manager-config
+        target: /etc/manager-config.yaml
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}}
       - LOW_CARDINAL_EXCEPTION_GROUPING=false
@@ -186,3 +195,26 @@ volumes:
     name: signoz-sqlite
   zookeeper-1:
     name: signoz-zookeeper-1
+
+configs:
+  clickhouse-config:
+    file: ../common/clickhouse/config.xml
+  clickhouse-users:
+    file: ../common/clickhouse/users.xml
+  clickhouse-custom-function:
+    file: ../common/clickhouse/custom-function.xml
+  clickhouse-cluster:
+    file: ../common/clickhouse/cluster.xml
+
+  signoz-prometheus-config:
+    file: ../common/signoz/prometheus.yml
+  # If you have multiple dashboard files, you can list them individually:
+  # dashboard-foo:
+  #   file: ../common/dashboards/foo.json
+  # dashboard-bar:
+  #   file: ../common/dashboards/bar.json
+
+  otel-collector-config:
+    file: ./otel-collector-config.yaml
+  otel-manager-config:
+    file: ../common/signoz/otel-collector-opamp-config.yaml

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.86.2}
+    image: signoz/signoz:${VERSION:-v0.87.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.86.2}
+    image: signoz/signoz:${VERSION:-v0.87.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/contributing/go/endpoint.md

@@ -0,0 +1,51 @@
+# Endpoint
+
+This guide outlines the recommended approach for designing endpoints, with a focus on entity relationships, RESTful structure, and examples from the codebase.
+
+## How do we design an endpoint?
+
+### Understand the core entities and their relationships
+
+Start with understanding the core entities and their relationships. For example:
+
+- **Organization**: an organization can have multiple users
+
+### Structure Endpoints RESTfully
+
+Endpoints should reflect the resource hierarchy and follow RESTful conventions. Use clear, **pluralized resource names** and versioning. For example:
+
+- `POST /v1/organizations` — Create an organization
+- `GET /v1/organizations/:id` — Get an organization by id
+- `DELETE /v1/organizations/:id` — Delete an organization by id
+- `PUT /v1/organizations/:id` — Update an organization by id
+- `GET /v1/organizations/:id/users` — Get all users in an organization
+- `GET /v1/organizations/me/users` — Get all users in my organization
+
+Think in terms of resource navigation in a file system. For example, to find your organization, you would navigate to the root of the file system and then to the `organizations` directory. To find a user in an organization, you would navigate to the `organizations` directory and then to the `id` directory.
+
+```bash
+v1/
+├── organizations/
+│   └── 123/
+│       └── users/
+```
+
+`me` endpoints are special. They are used to determine the actual id via some auth/external mechanism. For `me` endpoints, think of the `me` directory being symlinked to your organization directory. For example, if you are a part of the organization `123`, the `me` directory will be symlinked to `/v1/organizations/123`:
+
+```bash
+v1/
+├── organizations/
+│   └── me/ -> symlink to /v1/organizations/123
+│       └── users/
+│   └── 123/
+│       └── users/
+```
+
+> 💡 **Note**: There are various ways to structure endpoints. Some prefer to use singular resource names instead of `me`. Others prefer to use singular resource names for all endpoints. We have, however, chosen to standardize our endpoints in the manner described above.
+
+## What should I remember?
+
+- Use clear, **plural resource names**
+- Use `me` endpoints for determining the actual id via some auth mechanism
+
+> 💡 **Note**: When in doubt, diagram the relationships and walk through the user flows as if navigating a file system. This will help you design endpoints that are both logical and user-friendly.

docs/contributing/go/provider.md

@@ -0,0 +1,106 @@
+# Provider
+
+SigNoz is built on the provider pattern, a design approach where code is organized into providers that handle specific application responsibilities. Providers act as adapter components that integrate with external services and deliver required functionality to the application.
+
+> 💡 **Note**: Coming from a DDD background? Providers are similar (not exactly the same) to adapter/infrastructure services.
+
+## How to create a new provider?
+
+To create a new provider, create a directory in the `pkg/` directory named after your provider. The provider package consists of four key components:
+
+- **Interface** (`pkg/<name>/<name>.go`): Defines the provider's interface. Other packages should import this interface to use the provider.
+- **Config** (`pkg/<name>/config.go`): Contains provider configuration, implementing the `factory.Config` interface from [factory/config.go](/pkg/factory/config.go).
+- **Implementation** (`pkg/<name>/<implname><name>/provider.go`): Contains the provider implementation, including a `NewProvider` function that returns a `factory.Provider` interface from [factory/provider.go](/pkg/factory/provider.go).
+- **Mock** (`pkg/<name>/<name>test.go`): Provides mocks for the provider, typically used by dependent packages for unit testing.
+
+For example, the [prometheus](/pkg/prometheus) provider delivers a prometheus engine to the application:
+
+- `pkg/prometheus/prometheus.go` - Interface definition
+- `pkg/prometheus/config.go` - Configuration
+- `pkg/prometheus/clickhouseprometheus/provider.go` - Clickhouse-powered implementation
+- `pkg/prometheus/prometheustest/provider.go` - Mock implementation
+
+## How to wire it up?
+
+The `pkg/signoz` package contains the inversion of control container responsible for wiring providers. It handles instantiation, configuration, and assembly of providers based on configuration metadata.
+
+> 💡 **Note**: Coming from a Java background? Providers are similar to Spring beans.
+
+Wiring up a provider involves three steps:
+
+1. Wiring up the configuration
+Add your config from `pkg/<name>/config.go` to the `pkg/signoz/config.Config` struct and in new factories:
+
+```go
+type Config struct {
+    ...
+	MyProvider myprovider.Config `mapstructure:"myprovider"`
+    ...
+}
+
+func NewConfig(ctx context.Context, resolverConfig config.ResolverConfig, ....) (Config, error) {
+    ...
+	configFactories := []factory.ConfigFactory{
+        myprovider.NewConfigFactory(),
+	}
+    ...
+}
+```
+
+2. Wiring up the provider
+Add available provider implementations in `pkg/signoz/provider.go`:
+
+```go
+func NewMyProviderFactories() factory.NamedMap[factory.ProviderFactory[myprovider.MyProvider, myprovider.Config]] {
+	return factory.MustNewNamedMap(
+        myproviderone.NewFactory(),
+        myprovidertwo.NewFactory(),
+	)
+}
+```
+
+3. Instantiate the provider by adding it to the `SigNoz` struct in `pkg/signoz/signoz.go`:
+
+```go
+type SigNoz struct {
+    ...
+    MyProvider myprovider.MyProvider
+    ...
+}
+
+func New(...) (*SigNoz, error) {
+    ...
+    myprovider, err := myproviderone.New(ctx, settings, config.MyProvider, "one/two")
+    if err != nil {
+        return nil, err
+    }
+    ...
+}
+```
+
+## How to use it?
+
+To use a provider, import its interface. For example, to use the prometheus provider, import `pkg/prometheus/prometheus.go`:
+
+```go
+import "github.com/SigNoz/signoz/pkg/prometheus/prometheus"
+
+func CreateSomething(ctx context.Context, prometheus prometheus.Prometheus) {
+    ...
+    prometheus.DoSomething()
+    ...
+}
+```
+
+## Why do we need this?
+
+Like any dependency injection framework, providers decouple the codebase from implementation details. This is especially valuable in SigNoz's large codebase, where we need to swap implementations without changing dependent code. The provider pattern offers several benefits apart from the obvious one of decoupling:
+
+- Configuration is **defined with each provider and centralized in one place**, making it easier to understand and manage through various methods (environment variables, config files, etc.)
+- Provider mocking is **straightforward for unit testing**, with a consistent pattern for locating mocks
+- **Multiple implementations** of the same provider are **supported**, as demonstrated by our sqlstore provider
+
+## What should I remember?
+
+- Use the provider pattern wherever applicable.
+- Always create a provider **irrespective of the number of implementations**. This makes it easier to add new implementations in the future.

ee/licensing/httplicensing/provider.go

@@ -6,11 +6,13 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/ee/licensing/licensingstore/sqllicensingstore"
+	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/analyticstypes"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -23,16 +25,17 @@ type provider struct {
 	config    licensing.Config
 	settings  factory.ScopedProviderSettings
 	orgGetter organization.Getter
+	analytics analytics.Analytics
 	stopChan  chan struct{}
 }
 
-func NewProviderFactory(store sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
+func NewProviderFactory(store sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("http"), func(ctx context.Context, providerSettings factory.ProviderSettings, config licensing.Config) (licensing.Licensing, error) {
-		return New(ctx, providerSettings, config, store, zeus, orgGetter)
+		return New(ctx, providerSettings, config, store, zeus, orgGetter, analytics)
 	})
 }
 
-func New(ctx context.Context, ps factory.ProviderSettings, config licensing.Config, sqlstore sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter) (licensing.Licensing, error) {
+func New(ctx context.Context, ps factory.ProviderSettings, config licensing.Config, sqlstore sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) (licensing.Licensing, error) {
 	settings := factory.NewScopedProviderSettings(ps, "github.com/SigNoz/signoz/ee/licensing/httplicensing")
 	licensestore := sqllicensingstore.New(sqlstore)
 	return &provider{
@@ -42,6 +45,7 @@ func New(ctx context.Context, ps factory.ProviderSettings, config licensing.Conf
 		settings:  settings,
 		orgGetter: orgGetter,
 		stopChan:  make(chan struct{}),
+		analytics: analytics,
 	}, nil
 }
 
@@ -159,6 +163,25 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 		return err
 	}
 
+	stats := licensetypes.NewStatsFromLicense(activeLicense)
+	provider.analytics.Send(ctx,
+		analyticstypes.Track{
+			UserId:     "stats_" + organizationID.String(),
+			Event:      "License Updated",
+			Properties: analyticstypes.NewPropertiesFromMap(stats),
+			Context: &analyticstypes.Context{
+				Extra: map[string]interface{}{
+					analyticstypes.KeyGroupID: organizationID.String(),
+				},
+			},
+		},
+		analyticstypes.Group{
+			UserId:  "stats_" + organizationID.String(),
+			GroupId: organizationID.String(),
+			Traits:  analyticstypes.NewTraitsFromMap(stats),
+		},
+	)
+
 	return nil
 }
 
@@ -211,3 +234,16 @@ func (provider *provider) GetFeatureFlags(ctx context.Context, organizationID va
 
 	return license.Features, nil
 }
+
+func (provider *provider) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
+	activeLicense, err := provider.GetActive(ctx, orgID)
+	if err != nil {
+		if errors.Ast(err, errors.TypeNotFound) {
+			return map[string]any{}, nil
+		}
+
+		return nil, err
+	}
+
+	return licensetypes.NewStatsFromLicense(activeLicense), nil
+}

ee/query-service/.goreleaser.yaml

@@ -39,6 +39,7 @@ builds:
       - -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
       - -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
+      - -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr
       - >-
         {{- if eq .Os "linux" }}-linkmode external -extldflags '-static'{{- end }}
     mod_timestamp: "{{ .CommitTimestamp }}"

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

@@ -12,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	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"
@@ -58,8 +59,9 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
-		FieldsAPI:                     fields.NewAPI(signoz.TelemetryStore, signoz.Instrumentation.Logger()),
+		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
+		QuerierAPI:                    querierAPI.NewAPI(signoz.Querier),
 	})
 
 	if err != nil {

ee/query-service/app/server.go

@@ -122,10 +122,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// initiate opamp
-	_, err = opAmpModel.InitDB(serverOptions.SigNoz.SQLStore.SQLxDB())
-	if err != nil {
-		return nil, err
-	}
+	opAmpModel.InitDB(serverOptions.SigNoz.SQLStore, serverOptions.SigNoz.Instrumentation.Logger(), serverOptions.SigNoz.Modules.OrgGetter)
 
 	integrationsController, err := integrations.NewController(serverOptions.SigNoz.SQLStore)
 	if err != nil {
@@ -143,7 +140,8 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
-		serverOptions.SigNoz.SQLStore, integrationsController.GetPipelinesForInstalledIntegrations,
+		serverOptions.SigNoz.SQLStore,
+		integrationsController.GetPipelinesForInstalledIntegrations,
 	)
 	if err != nil {
 		return nil, err
@@ -151,7 +149,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// initiate agent config handler
 	agentConfMgr, err := agentConf.Initiate(&agentConf.ManagerOptions{
-		DB:            serverOptions.SigNoz.SQLStore.SQLxDB(),
+		Store:         serverOptions.SigNoz.SQLStore,
 		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController},
 	})
 	if err != nil {
@@ -294,6 +292,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterQueryRangeV5Routes(r, am)
 	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)

ee/query-service/main.go

@@ -12,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	"github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
+	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/config"
 	"github.com/SigNoz/signoz/pkg/config/envprovider"
 	"github.com/SigNoz/signoz/pkg/config/fileprovider"
@@ -134,8 +135,8 @@ func main() {
 		zeus.Config(),
 		httpzeus.NewProviderFactory(),
 		licensing.Config(24*time.Hour, 3),
-		func(sqlstore sqlstore.SQLStore, zeus pkgzeus.Zeus, orgGetter organization.Getter) factory.ProviderFactory[pkglicensing.Licensing, pkglicensing.Config] {
-			return httplicensing.NewProviderFactory(sqlstore, zeus, orgGetter)
+		func(sqlstore sqlstore.SQLStore, zeus pkgzeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) factory.ProviderFactory[pkglicensing.Licensing, pkglicensing.Config] {
+			return httplicensing.NewProviderFactory(sqlstore, zeus, orgGetter, analytics)
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),

ee/sqlstore/postgressqlstore/dialect.go

@@ -17,19 +17,21 @@ var (
 )
 
 var (
-	Org              = "org"
-	User             = "user"
-	UserNoCascade    = "user_no_cascade"
-	FactorPassword   = "factor_password"
-	CloudIntegration = "cloud_integration"
+	Org                = "org"
+	User               = "user"
+	UserNoCascade      = "user_no_cascade"
+	FactorPassword     = "factor_password"
+	CloudIntegration   = "cloud_integration"
+	AgentConfigVersion = "agent_config_version"
 )
 
 var (
-	OrgReference              = `("org_id") REFERENCES "organizations" ("id")`
-	UserReference             = `("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE`
-	UserReferenceNoCascade    = `("user_id") REFERENCES "users" ("id")`
-	FactorPasswordReference   = `("password_id") REFERENCES "factor_password" ("id")`
-	CloudIntegrationReference = `("cloud_integration_id") REFERENCES "cloud_integration" ("id") ON DELETE CASCADE`
+	OrgReference                = `("org_id") REFERENCES "organizations" ("id")`
+	UserReference               = `("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE`
+	UserReferenceNoCascade      = `("user_id") REFERENCES "users" ("id")`
+	FactorPasswordReference     = `("password_id") REFERENCES "factor_password" ("id")`
+	CloudIntegrationReference   = `("cloud_integration_id") REFERENCES "cloud_integration" ("id") ON DELETE CASCADE`
+	AgentConfigVersionReference = `("version_id") REFERENCES "agent_config_version" ("id")`
 )
 
 type dialect struct{}
@@ -274,6 +276,8 @@ func (dialect *dialect) RenameTableAndModifyModel(ctx context.Context, bun bun.I
 			fkReferences = append(fkReferences, FactorPasswordReference)
 		} else if reference == CloudIntegration && !slices.Contains(fkReferences, CloudIntegrationReference) {
 			fkReferences = append(fkReferences, CloudIntegrationReference)
+		} else if reference == AgentConfigVersion && !slices.Contains(fkReferences, AgentConfigVersionReference) {
+			fkReferences = append(fkReferences, AgentConfigVersionReference)
 		}
 	}
 

frontend/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-	ignorePatterns: ['src/antlr-parser/*.ts'],
 	env: {
 		browser: true,
 		es2021: true,

frontend/docs/QuerySearch.md

@@ -1,154 +0,0 @@
-# QuerySearch Component Documentation
-
-## Overview
-The QuerySearch component is a sophisticated query builder interface that allows users to construct complex search queries with real-time validation and autocomplete functionality.
-
-## Dependencies
-```typescript
-// Core UI
-import { Card, Collapse, Space, Tag, Typography } from 'antd';
-
-// Code Editor
-import {
-    autocompletion,
-    CompletionContext,
-    CompletionResult,
-    startCompletion,
-} from '@codemirror/autocomplete';
-import { javascript } from '@codemirror/lang-javascript';
-import { ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import CodeMirror, { EditorView, Extension } from '@uiw/react-codemirror';
-
-// Custom Hooks and Utilities
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { queryOperatorSuggestions, validateQuery } from 'utils/antlrQueryUtils';
-import { getQueryContextAtCursor } from 'utils/queryContextUtils';
-```
-
-## Key Features
-1. Real-time query validation
-2. Context-aware autocompletion
-3. Support for various query operators (=, !=, IN, LIKE, etc.)
-4. Support for complex conditions with AND/OR operators
-5. Support for functions (HAS, HASANY, HASALL, HASNONE)
-6. Support for parentheses and nested conditions
-7. Query examples for common use cases
-
-## State Management
-```typescript
-const [query, setQuery] = useState<string>('');
-const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
-const [activeKey, setActiveKey] = useState<string>('');
-const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
-const [queryContext, setQueryContext] = useState<IQueryContext | null>(null);
-const [validation, setValidation] = useState<IValidationResult>({...});
-const [editingMode, setEditingMode] = useState<'key' | 'operator' | 'value' | 'conjunction' | 'function' | 'parenthesis' | 'bracketList' | null>(null);
-```
-
-## Core Functions
-
-### 1. Autocomplete Handler
-```typescript
-function myCompletions(context: CompletionContext): CompletionResult | null {
-    // Handles autocomplete suggestions based on context
-    // Supports different contexts: key, operator, value, function, etc.
-}
-```
-
-### 2. Value Suggestions Fetcher
-```typescript
-const fetchValueSuggestions = useCallback(
-    async (key: string): Promise<void> => {
-        // Fetches value suggestions for a given key
-        // Handles loading states and error cases
-    },
-    [activeKey, isLoadingSuggestions],
-);
-```
-
-### 3. Query Change Handler
-```typescript
-const handleQueryChange = useCallback(async (newQuery: string) => {
-    // Updates query and validates it
-    // Handles validation errors
-}, []);
-```
-
-## Query Context Types
-1. Key context: When editing a field name
-2. Operator context: When selecting an operator
-3. Value context: When entering a value
-4. Conjunction context: When using AND/OR
-5. Function context: When using functions
-6. Parenthesis context: When using parentheses
-7. Bracket list context: When using IN operator
-
-## Example Queries
-```typescript
-const queryExamples = [
-    { label: 'Basic Query', query: "status = 'error'" },
-    { label: 'Multiple Conditions', query: "status = 'error' AND service = 'frontend'" },
-    { label: 'IN Operator', query: "status IN ['error', 'warning']" },
-    { label: 'Function Usage', query: "HAS(service, 'frontend')" },
-    { label: 'Numeric Comparison', query: 'duration > 1000' },
-    // ... more examples
-];
-```
-
-## Performance Optimizations
-1. Uses `useCallback` for memoized functions
-2. Tracks component mount state to prevent updates after unmount
-3. Debounces suggestion fetching
-4. Caches key suggestions
-
-## Error Handling
-```typescript
-try {
-    const validationResponse = validateQuery(newQuery);
-    setValidation(validationResponse);
-} catch (error) {
-    setValidation({
-        isValid: false,
-        message: 'Failed to process query',
-        errors: [error as IDetailedError],
-    });
-}
-```
-
-## Usage Example
-```typescript
-<QuerySearch />
-```
-
-## Styling
-- Uses SCSS for styling
-- Custom classes for different components
-- Theme integration with CodeMirror
-
-## Best Practices
-1. Always validate queries before submission
-2. Handle loading states appropriately
-3. Provide clear error messages
-4. Use appropriate operators for different data types
-5. Consider performance implications of complex queries
-
-## Common Issues and Solutions
-1. Query validation errors
-   - Check syntax and operator usage
-   - Verify data types match operator requirements
-2. Performance issues
-   - Optimize suggestion fetching
-   - Cache frequently used values
-3. UI/UX issues
-   - Ensure clear error messages
-   - Provide helpful suggestions
-   - Show appropriate loading states
-
-## Future Improvements
-1. Add more query examples
-2. Enhance error messages
-3. Improve performance for large datasets
-4. Add more operator support
-5. Enhance UI/UX features 

frontend/package.json

@@ -28,8 +28,6 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
-		"@codemirror/autocomplete": "6.18.6",
-		"@codemirror/lang-javascript": "6.2.3",
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
@@ -45,8 +43,6 @@
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
-		"@uiw/codemirror-theme-copilot": "4.23.11",
-		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/hierarchy": "3.12.0",
@@ -57,7 +53,6 @@
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
 		"axios": "1.8.2",
-		"antlr4": "4.13.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -83,7 +78,7 @@
 		"fontfaceobserver": "2.3.0",
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
-		"http-proxy-middleware": "3.0.3",
+		"http-proxy-middleware": "3.0.5",
 		"http-status-codes": "2.3.0",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
@@ -139,7 +134,7 @@
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "5.94.0",
-		"webpack-dev-server": "^4.15.2",
+		"webpack-dev-server": "^5.2.1",
 		"webpack-retry-chunk-load-plugin": "3.1.1",
 		"xstate": "^4.31.0"
 	},
@@ -202,7 +197,6 @@
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "9.0.0",
 		"copy-webpack-plugin": "^11.0.0",
-		"critters-webpack-plugin": "^3.0.1",
 		"eslint": "^7.32.0",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-airbnb-typescript": "^16.1.4",
@@ -240,7 +234,7 @@
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "5.0.1",
 		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^4.9.2"
+		"webpack-cli": "^5.1.4"
 	},
 	"lint-staged": {
 		"*.(js|jsx|ts|tsx)": [
@@ -256,7 +250,7 @@
 		"xml2js": "0.5.0",
 		"phin": "^3.7.1",
 		"body-parser": "1.20.3",
-		"http-proxy-middleware": "3.0.3",
+		"http-proxy-middleware": "3.0.5",
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
 		"serialize-javascript": "6.0.2",

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

@@ -9,8 +9,8 @@
   "tooltip_notification_channels": "More details on how to setting notification channels",
   "sending_channels_note": "The alerts will be sent to all the configured channels.",
   "loading_channels_message": "Loading Channels..",
-  "page_title_create": "New Notification Channels",
-  "page_title_edit": "Edit Notification Channels",
+  "page_title_create": "New Notification Channel",
+  "page_title_edit": "Edit Notification Channel",
   "button_save_channel": "Save",
   "button_test_channel": "Test",
   "button_return": "Back",

frontend/public/locales/en/channels.json

@@ -9,8 +9,8 @@
   "tooltip_notification_channels": "More details on how to setting notification channels",
   "sending_channels_note": "The alerts will be sent to all the configured channels.",
   "loading_channels_message": "Loading Channels..",
-  "page_title_create": "New Notification Channels",
-  "page_title_edit": "Edit Notification Channels",
+  "page_title_create": "New Notification Channel",
+  "page_title_edit": "Edit Notification Channel",
   "button_save_channel": "Save",
   "button_test_channel": "Test",
   "button_return": "Back",

frontend/src/AppRoutes/Private.tsx

@@ -3,6 +3,7 @@ import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
@@ -14,6 +15,7 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
+import { OrgPreference } from 'types/api/preferences/preference';
 import { Organization } from 'types/api/user/getOrganization';
 import { UserResponse } from 'types/api/user/getUser';
 import { USER_ROLES } from 'types/roles';
@@ -95,7 +97,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			usersData.data
 		) {
 			const isOnboardingComplete = orgPreferences?.find(
-				(preference: Record<string, any>) => preference.key === 'ORG_ONBOARDING',
+				(preference: OrgPreference) =>
+					preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
 			)?.value;
 
 			const isFirstUser = checkFirstTimeUser();

frontend/src/AppRoutes/index.tsx

@@ -193,11 +193,12 @@ function App(): JSX.Element {
 					updatedRoutes = updatedRoutes.filter(
 						(route) => route?.path !== ROUTES.BILLING,
 					);
-
-					if (isEnterpriseSelfHostedUser) {
-						updatedRoutes.push(LIST_LICENSES);
-					}
 				}
+
+				if (isEnterpriseSelfHostedUser) {
+					updatedRoutes.push(LIST_LICENSES);
+				}
+
 				// always add support route for cloud users
 				updatedRoutes = [...updatedRoutes, SUPPORT_ROUTE];
 			} else {

frontend/src/AppRoutes/pageComponents.ts

@@ -128,12 +128,11 @@ export const AlertOverview = Loadable(
 );
 
 export const CreateAlertChannelAlerts = Loadable(
-	() =>
-		import(/* webpackChunkName: "Create Channels" */ 'pages/AlertChannelCreate'),
+	() => import(/* webpackChunkName: "Create Channels" */ 'pages/Settings'),
 );
 
 export const EditAlertChannelsAlerts = Loadable(
-	() => import(/* webpackChunkName: "Edit Channels" */ 'pages/ChannelsEdit'),
+	() => import(/* webpackChunkName: "Edit Channels" */ 'pages/Settings'),
 );
 
 export const AllAlertChannels = Loadable(
@@ -165,7 +164,7 @@ export const APIKeys = Loadable(
 );
 
 export const MySettings = Loadable(
-	() => import(/* webpackChunkName: "All MySettings" */ 'pages/MySettings'),
+	() => import(/* webpackChunkName: "All MySettings" */ 'pages/Settings'),
 );
 
 export const CustomDomainSettings = Loadable(
@@ -222,7 +221,7 @@ export const LogsIndexToFields = Loadable(
 );
 
 export const BillingPage = Loadable(
-	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Billing'),
+	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Settings'),
 );
 
 export const SupportPage = Loadable(
@@ -249,7 +248,7 @@ export const WorkspaceAccessRestricted = Loadable(
 );
 
 export const ShortcutsPage = Loadable(
-	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Shortcuts'),
+	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
 export const InstalledIntegrations = Loadable(

frontend/src/AppRoutes/routes.ts

@@ -7,12 +7,9 @@ import {
 	AlertOverview,
 	AllAlertChannels,
 	AllErrors,
-	APIKeys,
 	ApiMonitoring,
-	BillingPage,
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
-	CustomDomainSettings,
 	DashboardPage,
 	DashboardWidget,
 	EditAlertChannelsAlerts,
@@ -20,7 +17,6 @@ import {
 	ErrorDetails,
 	Home,
 	InfrastructureMonitoring,
-	IngestionSettings,
 	InstalledIntegrations,
 	LicensePage,
 	ListAllALertsPage,
@@ -31,12 +27,10 @@ import {
 	LogsIndexToFields,
 	LogsSaveViews,
 	MetricsExplorer,
-	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
 	Onboarding,
 	OnboardingV2,
-	OrganizationSettings,
 	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
@@ -45,7 +39,6 @@ import {
 	ServicesTablePage,
 	ServiceTopLevelOperationsPage,
 	SettingsPage,
-	ShortcutsPage,
 	SignupPage,
 	SomethingWentWrong,
 	StatusPage,
@@ -150,7 +143,7 @@ const routes: AppRoutes[] = [
 	},
 	{
 		path: ROUTES.SETTINGS,
-		exact: true,
+		exact: false,
 		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
@@ -295,41 +288,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'VERSION',
 	},
-	{
-		path: ROUTES.ORG_SETTINGS,
-		exact: true,
-		component: OrganizationSettings,
-		isPrivate: true,
-		key: 'ORG_SETTINGS',
-	},
-	{
-		path: ROUTES.INGESTION_SETTINGS,
-		exact: true,
-		component: IngestionSettings,
-		isPrivate: true,
-		key: 'INGESTION_SETTINGS',
-	},
-	{
-		path: ROUTES.API_KEYS,
-		exact: true,
-		component: APIKeys,
-		isPrivate: true,
-		key: 'API_KEYS',
-	},
-	{
-		path: ROUTES.MY_SETTINGS,
-		exact: true,
-		component: MySettings,
-		isPrivate: true,
-		key: 'MY_SETTINGS',
-	},
-	{
-		path: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-		exact: true,
-		component: CustomDomainSettings,
-		isPrivate: true,
-		key: 'CUSTOM_DOMAIN_SETTINGS',
-	},
 	{
 		path: ROUTES.LOGS,
 		exact: true,
@@ -393,13 +351,6 @@ const routes: AppRoutes[] = [
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
-	{
-		path: ROUTES.BILLING,
-		exact: true,
-		component: BillingPage,
-		key: 'BILLING',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
 		exact: true,
@@ -421,13 +372,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
-	{
-		path: ROUTES.SHORTCUTS,
-		exact: true,
-		component: ShortcutsPage,
-		isPrivate: true,
-		key: 'SHORTCUTS',
-	},
 	{
 		path: ROUTES.INTEGRATIONS,
 		exact: true,

frontend/src/antlr-parser/FilterQuery.g4

@@ -1,183 +0,0 @@
-grammar FilterQuery;
-
-/*
- * Parser Rules
- */
-
-query
-    : expression ( (AND | OR) expression | expression )*
-    EOF
-    ;
-
-expression
-    : orExpression
-    ;
-
-orExpression
-    : andExpression ( OR andExpression )*
-    ;
-
-andExpression
-    : unaryExpression ( AND unaryExpression | unaryExpression )*
-    ;
-
-unaryExpression
-    : NOT? primary
-    ;
-
-primary
-    : LPAREN orExpression RPAREN
-    | comparison
-    | functionCall
-    | fullText
-    ;
-
-comparison
-    : key EQUALS value
-    | key (NOT_EQUALS | NEQ) value
-    | key LT value
-    | key LE value
-    | key GT value
-    | key GE value
-    | key (LIKE | ILIKE) value
-    | key (NOT_LIKE | NOT_ILIKE) value
-    | key BETWEEN value AND value
-    | key NOT_BETWEEN value AND value
-    | key inClause
-    | key notInClause
-    | key EXISTS
-    | key NOT_EXISTS
-    | key REGEXP value
-    | key NOT_REGEXP value
-    | key CONTAINS value
-    | key NOT_CONTAINS value
-    ;
-
-inClause
-    : IN LPAREN valueList RPAREN
-    | IN LBRACK valueList RBRACK
-    ;
-
-notInClause
-    : NOT_IN LPAREN valueList RPAREN
-    | NOT_IN LBRACK valueList RBRACK
-    ;
-
-valueList
-    : value ( COMMA value )*
-    ;
-
-fullText
-    : QUOTED_TEXT
-    ;
-
-functionCall
-    : (HAS | HASANY | HASALL | HASNONE) LPAREN functionParamList RPAREN
-    ;
-
-functionParamList
-    : functionParam ( COMMA functionParam )*
-    ;
-
-functionParam
-    : key
-    | value
-    | array
-    ;
-
-array
-    : LBRACK valueList RBRACK
-    ;
-
-value
-    : QUOTED_TEXT
-    | NUMBER
-    | BOOL
-    ;
-
-key
-    : KEY
-    ;
-
-/*
- * Lexer Rules
- */
-
-// Common punctuation / symbols
-LPAREN : '(' ;
-RPAREN : ')' ;
-LBRACK : '[' ;
-RBRACK : ']' ;
-COMMA  : ','  ;
-
-EQUALS      : '=' | '==' ;
-NOT_EQUALS  : '!=' ;
-NEQ         : '<>' ;
-LT          : '<' ;
-LE          : '<=' ;
-GT          : '>' ;
-GE          : '>=' ;
-
-// Multi-keyword operators
-LIKE        : [Ll][Ii][Kk][Ee] ;
-NOT_LIKE    : [Nn][Oo][Tt] [ \t]+ [Ll][Ii][Kk][Ee] ;
-ILIKE       : [Ii][Ll][Ii][Kk][Ee] ;
-NOT_ILIKE   : [Nn][Oo][Tt] [ \t]+ [Ii][Ll][Ii][Kk][Ee] ;
-BETWEEN     : [Bb][Ee][Tt][Ww][Ee][Ee][Nn] ;
-NOT_BETWEEN : [Nn][Oo][Tt] [ \t]+ [Bb][Ee][Tt][Ww][Ee][Ee][Nn] ;
-
-EXISTS      : [Ee][Xx][Ii][Ss][Tt][Ss]? ;
-NOT_EXISTS  : [Nn][Oo][Tt] [ \t]+ [Ee][Xx][Ii][Ss][Tt][Ss]? ;
-
-REGEXP      : [Rr][Ee][Gg][Ee][Xx][Pp] ;
-NOT_REGEXP  : [Nn][Oo][Tt] [ \t]+ [Rr][Ee][Gg][Ee][Xx][Pp] ;
-
-CONTAINS    : [Cc][Oo][Nn][Tt][Aa][Ii][Nn][Ss]? ;
-NOT_CONTAINS: [Nn][Oo][Tt] [ \t]+ [Cc][Oo][Nn][Tt][Aa][Ii][Nn][Ss]? ;
-
-IN          : [Ii][Nn] ;
-NOT_IN      : [Nn][Oo][Tt] [ \t]+ [Ii][Nn] ;
-
-// Boolean logic
-NOT         : [Nn][Oo][Tt] ;
-AND         : [Aa][Nn][Dd] ;
-OR          : [Oo][Rr] ;
-
-// Functions
-HAS         : [Hh][Aa][Ss] ;
-HASANY      : [Hh][Aa][Ss][Aa][Nn][Yy] ;
-HASALL      : [Hh][Aa][Ss][Aa][Ll][Ll] ;
-HASNONE     : [Hh][Aa][Ss][Nn][Oo][Nn][Ee] ;
-
-// Boolean values
-BOOL
-    : [Tt][Rr][Uu][Ee]
-    | [Ff][Aa][Ll][Ss][Ee]
-    ;
-
-// Numbers
-NUMBER
-    : DIGIT+ ( '.' DIGIT+ )?
-    ;
-
-// Quoted text
-QUOTED_TEXT
-    : ( '"' ( ~["\\] | '\\' . )* '"'    // double-quoted
-      | '\'' ( ~['\\] | '\\' . )* '\''  // single-quoted
-      )
-    ;
-
-// Keys
-KEY
-    : [a-zA-Z0-9_] [a-zA-Z0-9_.[\]]*
-    ;
-
-// Whitespace
-WS
-    : [ \t\r\n]+ -> skip
-    ;
-
-// Digits fragment
-fragment DIGIT
-    : [0-9]
-    ;

frontend/src/antlr-parser/FilterQuery.tokens

@@ -1,49 +0,0 @@
-LPAREN=1
-RPAREN=2
-LBRACK=3
-RBRACK=4
-COMMA=5
-EQUALS=6
-NOT_EQUALS=7
-NEQ=8
-LT=9
-LE=10
-GT=11
-GE=12
-LIKE=13
-NOT_LIKE=14
-ILIKE=15
-NOT_ILIKE=16
-BETWEEN=17
-NOT_BETWEEN=18
-EXISTS=19
-NOT_EXISTS=20
-REGEXP=21
-NOT_REGEXP=22
-CONTAINS=23
-NOT_CONTAINS=24
-IN=25
-NOT_IN=26
-NOT=27
-AND=28
-OR=29
-HAS=30
-HASANY=31
-HASALL=32
-HASNONE=33
-BOOL=34
-NUMBER=35
-QUOTED_TEXT=36
-KEY=37
-WS=38
-'('=1
-')'=2
-'['=3
-']'=4
-','=5
-'!='=7
-'<>'=8
-'<'=9
-'<='=10
-'>'=11
-'>='=12

frontend/src/antlr-parser/FilterQueryLexer.tokens

@@ -1,49 +0,0 @@
-LPAREN=1
-RPAREN=2
-LBRACK=3
-RBRACK=4
-COMMA=5
-EQUALS=6
-NOT_EQUALS=7
-NEQ=8
-LT=9
-LE=10
-GT=11
-GE=12
-LIKE=13
-NOT_LIKE=14
-ILIKE=15
-NOT_ILIKE=16
-BETWEEN=17
-NOT_BETWEEN=18
-EXISTS=19
-NOT_EXISTS=20
-REGEXP=21
-NOT_REGEXP=22
-CONTAINS=23
-NOT_CONTAINS=24
-IN=25
-NOT_IN=26
-NOT=27
-AND=28
-OR=29
-HAS=30
-HASANY=31
-HASALL=32
-HASNONE=33
-BOOL=34
-NUMBER=35
-QUOTED_TEXT=36
-KEY=37
-WS=38
-'('=1
-')'=2
-'['=3
-']'=4
-','=5
-'!='=7
-'<>'=8
-'<'=9
-'<='=10
-'>'=11
-'>='=12

frontend/src/antlr-parser/FilterQueryLexer.ts

@@ -1,249 +0,0 @@
-// Generated from src/antlr-parser/FilterQuery.g4 by ANTLR 4.13.1
-// noinspection ES6UnusedImports,JSUnusedGlobalSymbols,JSUnusedLocalSymbols
-import {
-	ATN,
-	ATNDeserializer,
-	CharStream,
-	DecisionState, DFA,
-	Lexer,
-	LexerATNSimulator,
-	RuleContext,
-	PredictionContextCache,
-	Token
-} from "antlr4";
-export default class FilterQueryLexer extends Lexer {
-	public static readonly LPAREN = 1;
-	public static readonly RPAREN = 2;
-	public static readonly LBRACK = 3;
-	public static readonly RBRACK = 4;
-	public static readonly COMMA = 5;
-	public static readonly EQUALS = 6;
-	public static readonly NOT_EQUALS = 7;
-	public static readonly NEQ = 8;
-	public static readonly LT = 9;
-	public static readonly LE = 10;
-	public static readonly GT = 11;
-	public static readonly GE = 12;
-	public static readonly LIKE = 13;
-	public static readonly NOT_LIKE = 14;
-	public static readonly ILIKE = 15;
-	public static readonly NOT_ILIKE = 16;
-	public static readonly BETWEEN = 17;
-	public static readonly NOT_BETWEEN = 18;
-	public static readonly EXISTS = 19;
-	public static readonly NOT_EXISTS = 20;
-	public static readonly REGEXP = 21;
-	public static readonly NOT_REGEXP = 22;
-	public static readonly CONTAINS = 23;
-	public static readonly NOT_CONTAINS = 24;
-	public static readonly IN = 25;
-	public static readonly NOT_IN = 26;
-	public static readonly NOT = 27;
-	public static readonly AND = 28;
-	public static readonly OR = 29;
-	public static readonly HAS = 30;
-	public static readonly HASANY = 31;
-	public static readonly HASALL = 32;
-	public static readonly HASNONE = 33;
-	public static readonly BOOL = 34;
-	public static readonly NUMBER = 35;
-	public static readonly QUOTED_TEXT = 36;
-	public static readonly KEY = 37;
-	public static readonly WS = 38;
-	public static readonly EOF = Token.EOF;
-
-	public static readonly channelNames: string[] = [ "DEFAULT_TOKEN_CHANNEL", "HIDDEN" ];
-	public static readonly literalNames: (string | null)[] = [ null, "'('", 
-                                                            "')'", "'['", 
-                                                            "']'", "','", 
-                                                            null, "'!='", 
-                                                            "'<>'", "'<'", 
-                                                            "'<='", "'>'", 
-                                                            "'>='" ];
-	public static readonly symbolicNames: (string | null)[] = [ null, "LPAREN", 
-                                                             "RPAREN", "LBRACK", 
-                                                             "RBRACK", "COMMA", 
-                                                             "EQUALS", "NOT_EQUALS", 
-                                                             "NEQ", "LT", 
-                                                             "LE", "GT", 
-                                                             "GE", "LIKE", 
-                                                             "NOT_LIKE", 
-                                                             "ILIKE", "NOT_ILIKE", 
-                                                             "BETWEEN", 
-                                                             "NOT_BETWEEN", 
-                                                             "EXISTS", "NOT_EXISTS", 
-                                                             "REGEXP", "NOT_REGEXP", 
-                                                             "CONTAINS", 
-                                                             "NOT_CONTAINS", 
-                                                             "IN", "NOT_IN", 
-                                                             "NOT", "AND", 
-                                                             "OR", "HAS", 
-                                                             "HASANY", "HASALL", 
-                                                             "HASNONE", 
-                                                             "BOOL", "NUMBER", 
-                                                             "QUOTED_TEXT", 
-                                                             "KEY", "WS" ];
-	public static readonly modeNames: string[] = [ "DEFAULT_MODE", ];
-
-	public static readonly ruleNames: string[] = [
-		"LPAREN", "RPAREN", "LBRACK", "RBRACK", "COMMA", "EQUALS", "NOT_EQUALS", 
-		"NEQ", "LT", "LE", "GT", "GE", "LIKE", "NOT_LIKE", "ILIKE", "NOT_ILIKE", 
-		"BETWEEN", "NOT_BETWEEN", "EXISTS", "NOT_EXISTS", "REGEXP", "NOT_REGEXP", 
-		"CONTAINS", "NOT_CONTAINS", "IN", "NOT_IN", "NOT", "AND", "OR", "HAS", 
-		"HASANY", "HASALL", "HASNONE", "BOOL", "NUMBER", "QUOTED_TEXT", "KEY", 
-		"WS", "DIGIT",
-	];
-
-
-	constructor(input: CharStream) {
-		super(input);
-		this._interp = new LexerATNSimulator(this, FilterQueryLexer._ATN, FilterQueryLexer.DecisionsToDFA, new PredictionContextCache());
-	}
-
-	public get grammarFileName(): string { return "FilterQuery.g4"; }
-
-	public get literalNames(): (string | null)[] { return FilterQueryLexer.literalNames; }
-	public get symbolicNames(): (string | null)[] { return FilterQueryLexer.symbolicNames; }
-	public get ruleNames(): string[] { return FilterQueryLexer.ruleNames; }
-
-	public get serializedATN(): number[] { return FilterQueryLexer._serializedATN; }
-
-	public get channelNames(): string[] { return FilterQueryLexer.channelNames; }
-
-	public get modeNames(): string[] { return FilterQueryLexer.modeNames; }
-
-	public static readonly _serializedATN: number[] = [4,0,38,359,6,-1,2,0,
-	7,0,2,1,7,1,2,2,7,2,2,3,7,3,2,4,7,4,2,5,7,5,2,6,7,6,2,7,7,7,2,8,7,8,2,9,
-	7,9,2,10,7,10,2,11,7,11,2,12,7,12,2,13,7,13,2,14,7,14,2,15,7,15,2,16,7,
-	16,2,17,7,17,2,18,7,18,2,19,7,19,2,20,7,20,2,21,7,21,2,22,7,22,2,23,7,23,
-	2,24,7,24,2,25,7,25,2,26,7,26,2,27,7,27,2,28,7,28,2,29,7,29,2,30,7,30,2,
-	31,7,31,2,32,7,32,2,33,7,33,2,34,7,34,2,35,7,35,2,36,7,36,2,37,7,37,2,38,
-	7,38,1,0,1,0,1,1,1,1,1,2,1,2,1,3,1,3,1,4,1,4,1,5,1,5,1,5,3,5,93,8,5,1,6,
-	1,6,1,6,1,7,1,7,1,7,1,8,1,8,1,9,1,9,1,9,1,10,1,10,1,11,1,11,1,11,1,12,1,
-	12,1,12,1,12,1,12,1,13,1,13,1,13,1,13,4,13,120,8,13,11,13,12,13,121,1,13,
-	1,13,1,13,1,13,1,13,1,14,1,14,1,14,1,14,1,14,1,14,1,15,1,15,1,15,1,15,4,
-	15,139,8,15,11,15,12,15,140,1,15,1,15,1,15,1,15,1,15,1,15,1,16,1,16,1,16,
-	1,16,1,16,1,16,1,16,1,16,1,17,1,17,1,17,1,17,4,17,161,8,17,11,17,12,17,
-	162,1,17,1,17,1,17,1,17,1,17,1,17,1,17,1,17,1,18,1,18,1,18,1,18,1,18,1,
-	18,3,18,179,8,18,1,19,1,19,1,19,1,19,4,19,185,8,19,11,19,12,19,186,1,19,
-	1,19,1,19,1,19,1,19,1,19,3,19,195,8,19,1,20,1,20,1,20,1,20,1,20,1,20,1,
-	20,1,21,1,21,1,21,1,21,4,21,208,8,21,11,21,12,21,209,1,21,1,21,1,21,1,21,
-	1,21,1,21,1,21,1,22,1,22,1,22,1,22,1,22,1,22,1,22,1,22,3,22,227,8,22,1,
-	23,1,23,1,23,1,23,4,23,233,8,23,11,23,12,23,234,1,23,1,23,1,23,1,23,1,23,
-	1,23,1,23,1,23,3,23,245,8,23,1,24,1,24,1,24,1,25,1,25,1,25,1,25,4,25,254,
-	8,25,11,25,12,25,255,1,25,1,25,1,25,1,26,1,26,1,26,1,26,1,27,1,27,1,27,
-	1,27,1,28,1,28,1,28,1,29,1,29,1,29,1,29,1,30,1,30,1,30,1,30,1,30,1,30,1,
-	30,1,31,1,31,1,31,1,31,1,31,1,31,1,31,1,32,1,32,1,32,1,32,1,32,1,32,1,32,
-	1,32,1,33,1,33,1,33,1,33,1,33,1,33,1,33,1,33,1,33,3,33,307,8,33,1,34,4,
-	34,310,8,34,11,34,12,34,311,1,34,1,34,4,34,316,8,34,11,34,12,34,317,3,34,
-	320,8,34,1,35,1,35,1,35,1,35,5,35,326,8,35,10,35,12,35,329,9,35,1,35,1,
-	35,1,35,1,35,1,35,5,35,336,8,35,10,35,12,35,339,9,35,1,35,3,35,342,8,35,
-	1,36,1,36,5,36,346,8,36,10,36,12,36,349,9,36,1,37,4,37,352,8,37,11,37,12,
-	37,353,1,37,1,37,1,38,1,38,0,0,39,1,1,3,2,5,3,7,4,9,5,11,6,13,7,15,8,17,
-	9,19,10,21,11,23,12,25,13,27,14,29,15,31,16,33,17,35,18,37,19,39,20,41,
-	21,43,22,45,23,47,24,49,25,51,26,53,27,55,28,57,29,59,30,61,31,63,32,65,
-	33,67,34,69,35,71,36,73,37,75,38,77,0,1,0,28,2,0,76,76,108,108,2,0,73,73,
-	105,105,2,0,75,75,107,107,2,0,69,69,101,101,2,0,78,78,110,110,2,0,79,79,
-	111,111,2,0,84,84,116,116,2,0,9,9,32,32,2,0,66,66,98,98,2,0,87,87,119,119,
-	2,0,88,88,120,120,2,0,83,83,115,115,2,0,82,82,114,114,2,0,71,71,103,103,
-	2,0,80,80,112,112,2,0,67,67,99,99,2,0,65,65,97,97,2,0,68,68,100,100,2,0,
-	72,72,104,104,2,0,89,89,121,121,2,0,85,85,117,117,2,0,70,70,102,102,2,0,
-	34,34,92,92,2,0,39,39,92,92,4,0,48,57,65,90,95,95,97,122,6,0,46,46,48,57,
-	65,91,93,93,95,95,97,122,3,0,9,10,13,13,32,32,1,0,48,57,380,0,1,1,0,0,0,
-	0,3,1,0,0,0,0,5,1,0,0,0,0,7,1,0,0,0,0,9,1,0,0,0,0,11,1,0,0,0,0,13,1,0,0,
-	0,0,15,1,0,0,0,0,17,1,0,0,0,0,19,1,0,0,0,0,21,1,0,0,0,0,23,1,0,0,0,0,25,
-	1,0,0,0,0,27,1,0,0,0,0,29,1,0,0,0,0,31,1,0,0,0,0,33,1,0,0,0,0,35,1,0,0,
-	0,0,37,1,0,0,0,0,39,1,0,0,0,0,41,1,0,0,0,0,43,1,0,0,0,0,45,1,0,0,0,0,47,
-	1,0,0,0,0,49,1,0,0,0,0,51,1,0,0,0,0,53,1,0,0,0,0,55,1,0,0,0,0,57,1,0,0,
-	0,0,59,1,0,0,0,0,61,1,0,0,0,0,63,1,0,0,0,0,65,1,0,0,0,0,67,1,0,0,0,0,69,
-	1,0,0,0,0,71,1,0,0,0,0,73,1,0,0,0,0,75,1,0,0,0,1,79,1,0,0,0,3,81,1,0,0,
-	0,5,83,1,0,0,0,7,85,1,0,0,0,9,87,1,0,0,0,11,92,1,0,0,0,13,94,1,0,0,0,15,
-	97,1,0,0,0,17,100,1,0,0,0,19,102,1,0,0,0,21,105,1,0,0,0,23,107,1,0,0,0,
-	25,110,1,0,0,0,27,115,1,0,0,0,29,128,1,0,0,0,31,134,1,0,0,0,33,148,1,0,
-	0,0,35,156,1,0,0,0,37,172,1,0,0,0,39,180,1,0,0,0,41,196,1,0,0,0,43,203,
-	1,0,0,0,45,218,1,0,0,0,47,228,1,0,0,0,49,246,1,0,0,0,51,249,1,0,0,0,53,
-	260,1,0,0,0,55,264,1,0,0,0,57,268,1,0,0,0,59,271,1,0,0,0,61,275,1,0,0,0,
-	63,282,1,0,0,0,65,289,1,0,0,0,67,306,1,0,0,0,69,309,1,0,0,0,71,341,1,0,
-	0,0,73,343,1,0,0,0,75,351,1,0,0,0,77,357,1,0,0,0,79,80,5,40,0,0,80,2,1,
-	0,0,0,81,82,5,41,0,0,82,4,1,0,0,0,83,84,5,91,0,0,84,6,1,0,0,0,85,86,5,93,
-	0,0,86,8,1,0,0,0,87,88,5,44,0,0,88,10,1,0,0,0,89,93,5,61,0,0,90,91,5,61,
-	0,0,91,93,5,61,0,0,92,89,1,0,0,0,92,90,1,0,0,0,93,12,1,0,0,0,94,95,5,33,
-	0,0,95,96,5,61,0,0,96,14,1,0,0,0,97,98,5,60,0,0,98,99,5,62,0,0,99,16,1,
-	0,0,0,100,101,5,60,0,0,101,18,1,0,0,0,102,103,5,60,0,0,103,104,5,61,0,0,
-	104,20,1,0,0,0,105,106,5,62,0,0,106,22,1,0,0,0,107,108,5,62,0,0,108,109,
-	5,61,0,0,109,24,1,0,0,0,110,111,7,0,0,0,111,112,7,1,0,0,112,113,7,2,0,0,
-	113,114,7,3,0,0,114,26,1,0,0,0,115,116,7,4,0,0,116,117,7,5,0,0,117,119,
-	7,6,0,0,118,120,7,7,0,0,119,118,1,0,0,0,120,121,1,0,0,0,121,119,1,0,0,0,
-	121,122,1,0,0,0,122,123,1,0,0,0,123,124,7,0,0,0,124,125,7,1,0,0,125,126,
-	7,2,0,0,126,127,7,3,0,0,127,28,1,0,0,0,128,129,7,1,0,0,129,130,7,0,0,0,
-	130,131,7,1,0,0,131,132,7,2,0,0,132,133,7,3,0,0,133,30,1,0,0,0,134,135,
-	7,4,0,0,135,136,7,5,0,0,136,138,7,6,0,0,137,139,7,7,0,0,138,137,1,0,0,0,
-	139,140,1,0,0,0,140,138,1,0,0,0,140,141,1,0,0,0,141,142,1,0,0,0,142,143,
-	7,1,0,0,143,144,7,0,0,0,144,145,7,1,0,0,145,146,7,2,0,0,146,147,7,3,0,0,
-	147,32,1,0,0,0,148,149,7,8,0,0,149,150,7,3,0,0,150,151,7,6,0,0,151,152,
-	7,9,0,0,152,153,7,3,0,0,153,154,7,3,0,0,154,155,7,4,0,0,155,34,1,0,0,0,
-	156,157,7,4,0,0,157,158,7,5,0,0,158,160,7,6,0,0,159,161,7,7,0,0,160,159,
-	1,0,0,0,161,162,1,0,0,0,162,160,1,0,0,0,162,163,1,0,0,0,163,164,1,0,0,0,
-	164,165,7,8,0,0,165,166,7,3,0,0,166,167,7,6,0,0,167,168,7,9,0,0,168,169,
-	7,3,0,0,169,170,7,3,0,0,170,171,7,4,0,0,171,36,1,0,0,0,172,173,7,3,0,0,
-	173,174,7,10,0,0,174,175,7,1,0,0,175,176,7,11,0,0,176,178,7,6,0,0,177,179,
-	7,11,0,0,178,177,1,0,0,0,178,179,1,0,0,0,179,38,1,0,0,0,180,181,7,4,0,0,
-	181,182,7,5,0,0,182,184,7,6,0,0,183,185,7,7,0,0,184,183,1,0,0,0,185,186,
-	1,0,0,0,186,184,1,0,0,0,186,187,1,0,0,0,187,188,1,0,0,0,188,189,7,3,0,0,
-	189,190,7,10,0,0,190,191,7,1,0,0,191,192,7,11,0,0,192,194,7,6,0,0,193,195,
-	7,11,0,0,194,193,1,0,0,0,194,195,1,0,0,0,195,40,1,0,0,0,196,197,7,12,0,
-	0,197,198,7,3,0,0,198,199,7,13,0,0,199,200,7,3,0,0,200,201,7,10,0,0,201,
-	202,7,14,0,0,202,42,1,0,0,0,203,204,7,4,0,0,204,205,7,5,0,0,205,207,7,6,
-	0,0,206,208,7,7,0,0,207,206,1,0,0,0,208,209,1,0,0,0,209,207,1,0,0,0,209,
-	210,1,0,0,0,210,211,1,0,0,0,211,212,7,12,0,0,212,213,7,3,0,0,213,214,7,
-	13,0,0,214,215,7,3,0,0,215,216,7,10,0,0,216,217,7,14,0,0,217,44,1,0,0,0,
-	218,219,7,15,0,0,219,220,7,5,0,0,220,221,7,4,0,0,221,222,7,6,0,0,222,223,
-	7,16,0,0,223,224,7,1,0,0,224,226,7,4,0,0,225,227,7,11,0,0,226,225,1,0,0,
-	0,226,227,1,0,0,0,227,46,1,0,0,0,228,229,7,4,0,0,229,230,7,5,0,0,230,232,
-	7,6,0,0,231,233,7,7,0,0,232,231,1,0,0,0,233,234,1,0,0,0,234,232,1,0,0,0,
-	234,235,1,0,0,0,235,236,1,0,0,0,236,237,7,15,0,0,237,238,7,5,0,0,238,239,
-	7,4,0,0,239,240,7,6,0,0,240,241,7,16,0,0,241,242,7,1,0,0,242,244,7,4,0,
-	0,243,245,7,11,0,0,244,243,1,0,0,0,244,245,1,0,0,0,245,48,1,0,0,0,246,247,
-	7,1,0,0,247,248,7,4,0,0,248,50,1,0,0,0,249,250,7,4,0,0,250,251,7,5,0,0,
-	251,253,7,6,0,0,252,254,7,7,0,0,253,252,1,0,0,0,254,255,1,0,0,0,255,253,
-	1,0,0,0,255,256,1,0,0,0,256,257,1,0,0,0,257,258,7,1,0,0,258,259,7,4,0,0,
-	259,52,1,0,0,0,260,261,7,4,0,0,261,262,7,5,0,0,262,263,7,6,0,0,263,54,1,
-	0,0,0,264,265,7,16,0,0,265,266,7,4,0,0,266,267,7,17,0,0,267,56,1,0,0,0,
-	268,269,7,5,0,0,269,270,7,12,0,0,270,58,1,0,0,0,271,272,7,18,0,0,272,273,
-	7,16,0,0,273,274,7,11,0,0,274,60,1,0,0,0,275,276,7,18,0,0,276,277,7,16,
-	0,0,277,278,7,11,0,0,278,279,7,16,0,0,279,280,7,4,0,0,280,281,7,19,0,0,
-	281,62,1,0,0,0,282,283,7,18,0,0,283,284,7,16,0,0,284,285,7,11,0,0,285,286,
-	7,16,0,0,286,287,7,0,0,0,287,288,7,0,0,0,288,64,1,0,0,0,289,290,7,18,0,
-	0,290,291,7,16,0,0,291,292,7,11,0,0,292,293,7,4,0,0,293,294,7,5,0,0,294,
-	295,7,4,0,0,295,296,7,3,0,0,296,66,1,0,0,0,297,298,7,6,0,0,298,299,7,12,
-	0,0,299,300,7,20,0,0,300,307,7,3,0,0,301,302,7,21,0,0,302,303,7,16,0,0,
-	303,304,7,0,0,0,304,305,7,11,0,0,305,307,7,3,0,0,306,297,1,0,0,0,306,301,
-	1,0,0,0,307,68,1,0,0,0,308,310,3,77,38,0,309,308,1,0,0,0,310,311,1,0,0,
-	0,311,309,1,0,0,0,311,312,1,0,0,0,312,319,1,0,0,0,313,315,5,46,0,0,314,
-	316,3,77,38,0,315,314,1,0,0,0,316,317,1,0,0,0,317,315,1,0,0,0,317,318,1,
-	0,0,0,318,320,1,0,0,0,319,313,1,0,0,0,319,320,1,0,0,0,320,70,1,0,0,0,321,
-	327,5,34,0,0,322,326,8,22,0,0,323,324,5,92,0,0,324,326,9,0,0,0,325,322,
-	1,0,0,0,325,323,1,0,0,0,326,329,1,0,0,0,327,325,1,0,0,0,327,328,1,0,0,0,
-	328,330,1,0,0,0,329,327,1,0,0,0,330,342,5,34,0,0,331,337,5,39,0,0,332,336,
-	8,23,0,0,333,334,5,92,0,0,334,336,9,0,0,0,335,332,1,0,0,0,335,333,1,0,0,
-	0,336,339,1,0,0,0,337,335,1,0,0,0,337,338,1,0,0,0,338,340,1,0,0,0,339,337,
-	1,0,0,0,340,342,5,39,0,0,341,321,1,0,0,0,341,331,1,0,0,0,342,72,1,0,0,0,
-	343,347,7,24,0,0,344,346,7,25,0,0,345,344,1,0,0,0,346,349,1,0,0,0,347,345,
-	1,0,0,0,347,348,1,0,0,0,348,74,1,0,0,0,349,347,1,0,0,0,350,352,7,26,0,0,
-	351,350,1,0,0,0,352,353,1,0,0,0,353,351,1,0,0,0,353,354,1,0,0,0,354,355,
-	1,0,0,0,355,356,6,37,0,0,356,76,1,0,0,0,357,358,7,27,0,0,358,78,1,0,0,0,
-	24,0,92,121,140,162,178,186,194,209,226,234,244,255,306,311,317,319,325,
-	327,335,337,341,347,353,1,6,0,0];
-
-	private static __ATN: ATN;
-	public static get _ATN(): ATN {
-		if (!FilterQueryLexer.__ATN) {
-			FilterQueryLexer.__ATN = new ATNDeserializer().deserialize(FilterQueryLexer._serializedATN);
-		}
-
-		return FilterQueryLexer.__ATN;
-	}
-
-
-	static DecisionsToDFA = FilterQueryLexer._ATN.decisionToState.map( (ds: DecisionState, index: number) => new DFA(ds, index) );
-}

frontend/src/antlr-parser/FilterQueryListener.ts

@@ -1,201 +0,0 @@
-// Generated from src/antlr-parser/FilterQuery.g4 by ANTLR 4.13.1
-
-import {ParseTreeListener} from "antlr4";
-
-
-import { QueryContext } from "./FilterQueryParser";
-import { ExpressionContext } from "./FilterQueryParser";
-import { OrExpressionContext } from "./FilterQueryParser";
-import { AndExpressionContext } from "./FilterQueryParser";
-import { UnaryExpressionContext } from "./FilterQueryParser";
-import { PrimaryContext } from "./FilterQueryParser";
-import { ComparisonContext } from "./FilterQueryParser";
-import { InClauseContext } from "./FilterQueryParser";
-import { NotInClauseContext } from "./FilterQueryParser";
-import { ValueListContext } from "./FilterQueryParser";
-import { FullTextContext } from "./FilterQueryParser";
-import { FunctionCallContext } from "./FilterQueryParser";
-import { FunctionParamListContext } from "./FilterQueryParser";
-import { FunctionParamContext } from "./FilterQueryParser";
-import { ArrayContext } from "./FilterQueryParser";
-import { ValueContext } from "./FilterQueryParser";
-import { KeyContext } from "./FilterQueryParser";
-
-
-/**
- * This interface defines a complete listener for a parse tree produced by
- * `FilterQueryParser`.
- */
-export default class FilterQueryListener extends ParseTreeListener {
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.query`.
-	 * @param ctx the parse tree
-	 */
-	enterQuery?: (ctx: QueryContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.query`.
-	 * @param ctx the parse tree
-	 */
-	exitQuery?: (ctx: QueryContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.expression`.
-	 * @param ctx the parse tree
-	 */
-	enterExpression?: (ctx: ExpressionContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.expression`.
-	 * @param ctx the parse tree
-	 */
-	exitExpression?: (ctx: ExpressionContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.orExpression`.
-	 * @param ctx the parse tree
-	 */
-	enterOrExpression?: (ctx: OrExpressionContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.orExpression`.
-	 * @param ctx the parse tree
-	 */
-	exitOrExpression?: (ctx: OrExpressionContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.andExpression`.
-	 * @param ctx the parse tree
-	 */
-	enterAndExpression?: (ctx: AndExpressionContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.andExpression`.
-	 * @param ctx the parse tree
-	 */
-	exitAndExpression?: (ctx: AndExpressionContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.unaryExpression`.
-	 * @param ctx the parse tree
-	 */
-	enterUnaryExpression?: (ctx: UnaryExpressionContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.unaryExpression`.
-	 * @param ctx the parse tree
-	 */
-	exitUnaryExpression?: (ctx: UnaryExpressionContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.primary`.
-	 * @param ctx the parse tree
-	 */
-	enterPrimary?: (ctx: PrimaryContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.primary`.
-	 * @param ctx the parse tree
-	 */
-	exitPrimary?: (ctx: PrimaryContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.comparison`.
-	 * @param ctx the parse tree
-	 */
-	enterComparison?: (ctx: ComparisonContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.comparison`.
-	 * @param ctx the parse tree
-	 */
-	exitComparison?: (ctx: ComparisonContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.inClause`.
-	 * @param ctx the parse tree
-	 */
-	enterInClause?: (ctx: InClauseContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.inClause`.
-	 * @param ctx the parse tree
-	 */
-	exitInClause?: (ctx: InClauseContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.notInClause`.
-	 * @param ctx the parse tree
-	 */
-	enterNotInClause?: (ctx: NotInClauseContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.notInClause`.
-	 * @param ctx the parse tree
-	 */
-	exitNotInClause?: (ctx: NotInClauseContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.valueList`.
-	 * @param ctx the parse tree
-	 */
-	enterValueList?: (ctx: ValueListContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.valueList`.
-	 * @param ctx the parse tree
-	 */
-	exitValueList?: (ctx: ValueListContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.fullText`.
-	 * @param ctx the parse tree
-	 */
-	enterFullText?: (ctx: FullTextContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.fullText`.
-	 * @param ctx the parse tree
-	 */
-	exitFullText?: (ctx: FullTextContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.functionCall`.
-	 * @param ctx the parse tree
-	 */
-	enterFunctionCall?: (ctx: FunctionCallContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.functionCall`.
-	 * @param ctx the parse tree
-	 */
-	exitFunctionCall?: (ctx: FunctionCallContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.functionParamList`.
-	 * @param ctx the parse tree
-	 */
-	enterFunctionParamList?: (ctx: FunctionParamListContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.functionParamList`.
-	 * @param ctx the parse tree
-	 */
-	exitFunctionParamList?: (ctx: FunctionParamListContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.functionParam`.
-	 * @param ctx the parse tree
-	 */
-	enterFunctionParam?: (ctx: FunctionParamContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.functionParam`.
-	 * @param ctx the parse tree
-	 */
-	exitFunctionParam?: (ctx: FunctionParamContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.array`.
-	 * @param ctx the parse tree
-	 */
-	enterArray?: (ctx: ArrayContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.array`.
-	 * @param ctx the parse tree
-	 */
-	exitArray?: (ctx: ArrayContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.value`.
-	 * @param ctx the parse tree
-	 */
-	enterValue?: (ctx: ValueContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.value`.
-	 * @param ctx the parse tree
-	 */
-	exitValue?: (ctx: ValueContext) => void;
-	/**
-	 * Enter a parse tree produced by `FilterQueryParser.key`.
-	 * @param ctx the parse tree
-	 */
-	enterKey?: (ctx: KeyContext) => void;
-	/**
-	 * Exit a parse tree produced by `FilterQueryParser.key`.
-	 * @param ctx the parse tree
-	 */
-	exitKey?: (ctx: KeyContext) => void;
-}
-

frontend/src/antlr-parser/FilterQueryVisitor.ts

@@ -1,136 +0,0 @@
-// Generated from src/antlr-parser/FilterQuery.g4 by ANTLR 4.13.1
-
-import {ParseTreeVisitor} from 'antlr4';
-
-
-import { QueryContext } from "./FilterQueryParser";
-import { ExpressionContext } from "./FilterQueryParser";
-import { OrExpressionContext } from "./FilterQueryParser";
-import { AndExpressionContext } from "./FilterQueryParser";
-import { UnaryExpressionContext } from "./FilterQueryParser";
-import { PrimaryContext } from "./FilterQueryParser";
-import { ComparisonContext } from "./FilterQueryParser";
-import { InClauseContext } from "./FilterQueryParser";
-import { NotInClauseContext } from "./FilterQueryParser";
-import { ValueListContext } from "./FilterQueryParser";
-import { FullTextContext } from "./FilterQueryParser";
-import { FunctionCallContext } from "./FilterQueryParser";
-import { FunctionParamListContext } from "./FilterQueryParser";
-import { FunctionParamContext } from "./FilterQueryParser";
-import { ArrayContext } from "./FilterQueryParser";
-import { ValueContext } from "./FilterQueryParser";
-import { KeyContext } from "./FilterQueryParser";
-
-
-/**
- * This interface defines a complete generic visitor for a parse tree produced
- * by `FilterQueryParser`.
- *
- * @param <Result> The return type of the visit operation. Use `void` for
- * operations with no return type.
- */
-export default class FilterQueryVisitor<Result> extends ParseTreeVisitor<Result> {
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.query`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitQuery?: (ctx: QueryContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.expression`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitExpression?: (ctx: ExpressionContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.orExpression`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitOrExpression?: (ctx: OrExpressionContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.andExpression`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitAndExpression?: (ctx: AndExpressionContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.unaryExpression`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitUnaryExpression?: (ctx: UnaryExpressionContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.primary`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitPrimary?: (ctx: PrimaryContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.comparison`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitComparison?: (ctx: ComparisonContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.inClause`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitInClause?: (ctx: InClauseContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.notInClause`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitNotInClause?: (ctx: NotInClauseContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.valueList`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitValueList?: (ctx: ValueListContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.fullText`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitFullText?: (ctx: FullTextContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.functionCall`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitFunctionCall?: (ctx: FunctionCallContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.functionParamList`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitFunctionParamList?: (ctx: FunctionParamListContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.functionParam`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitFunctionParam?: (ctx: FunctionParamContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.array`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitArray?: (ctx: ArrayContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.value`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitValue?: (ctx: ValueContext) => Result;
-	/**
-	 * Visit a parse tree produced by `FilterQueryParser.key`.
-	 * @param ctx the parse tree
-	 * @return the visitor result
-	 */
-	visitKey?: (ctx: KeyContext) => Result;
-}
-

frontend/src/api/apiV1.ts

@@ -3,7 +3,6 @@ const apiV1 = '/api/v1/';
 export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
-export const apiV5 = '/api/v5/';
 export const gatewayApiV1 = '/api/gateway/v1/';
 export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';

frontend/src/api/index.ts

@@ -19,7 +19,6 @@ import apiV1, {
 	apiV2,
 	apiV3,
 	apiV4,
-	apiV5,
 	gatewayApiV1,
 	gatewayApiV2,
 } from './apiV1';
@@ -172,18 +171,6 @@ ApiV4Instance.interceptors.response.use(
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
-// axios V5
-export const ApiV5Instance = axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}${apiV5}`,
-});
-
-ApiV5Instance.interceptors.response.use(
-	interceptorsResponse,
-	interceptorRejected,
-);
-ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
-//
-
 // axios Base
 export const ApiBaseInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,

frontend/src/api/preferences/getAllOrgPreferences.ts

@@ -1,18 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetAllOrgPreferencesResponseProps } from 'types/api/preferences/userOrgPreferences';
-
-const getAllOrgPreferences = async (): Promise<
-	SuccessResponse<GetAllOrgPreferencesResponseProps> | ErrorResponse
-> => {
-	const response = await axios.get(`/org/preferences`);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
-};
-
-export default getAllOrgPreferences;

frontend/src/api/preferences/getAllUserPreference.ts

@@ -1,18 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetAllUserPreferencesResponseProps } from 'types/api/preferences/userOrgPreferences';
-
-const getAllUserPreferences = async (): Promise<
-	SuccessResponse<GetAllUserPreferencesResponseProps> | ErrorResponse
-> => {
-	const response = await axios.get(`/user/preferences`);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
-};
-
-export default getAllUserPreferences;

frontend/src/api/preferences/getOrgPreference.ts

@@ -1,20 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetOrgPreferenceResponseProps } from 'types/api/preferences/userOrgPreferences';
-
-const getOrgPreference = async ({
-	preferenceID,
-}: {
-	preferenceID: string;
-}): Promise<SuccessResponse<GetOrgPreferenceResponseProps> | ErrorResponse> => {
-	const response = await axios.get(`/org/preferences/${preferenceID}`);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
-};
-
-export default getOrgPreference;

frontend/src/api/preferences/getUserPreference.ts

@@ -1,22 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetUserPreferenceResponseProps } from 'types/api/preferences/userOrgPreferences';
-
-const getUserPreference = async ({
-	preferenceID,
-}: {
-	preferenceID: string;
-}): Promise<
-	SuccessResponse<GetUserPreferenceResponseProps> | ErrorResponse
-> => {
-	const response = await axios.get(`/user/preferences/${preferenceID}`);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
-};
-
-export default getUserPreference;

frontend/src/api/preferences/updateOrgPreference.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	UpdateOrgPreferenceProps,
-	UpdateOrgPreferenceResponseProps,
-} from 'types/api/preferences/userOrgPreferences';
-
-const updateOrgPreference = async (
-	preferencePayload: UpdateOrgPreferenceProps,
-): Promise<
-	SuccessResponse<UpdateOrgPreferenceResponseProps> | ErrorResponse
-> => {
-	const response = await axios.put(
-		`/org/preferences/${preferencePayload.preferenceID}`,
-		{
-			preference_value: preferencePayload.value,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default updateOrgPreference;

frontend/src/api/preferences/updateUserPreference.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	UpdateUserPreferenceProps,
-	UpdateUserPreferenceResponseProps,
-} from 'types/api/preferences/userOrgPreferences';
-
-const updateUserPreference = async (
-	preferencePayload: UpdateUserPreferenceProps,
-): Promise<
-	SuccessResponse<UpdateUserPreferenceResponseProps> | ErrorResponse
-> => {
-	const response = await axios.put(
-		`/user/preferences/${preferencePayload.preferenceID}`,
-		{
-			preference_value: preferencePayload.value,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default updateUserPreference;

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -1,11 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import {
-	QueryKeyRequestProps,
-	QueryKeySuggestionsResponseProps,
-} from 'types/api/querySuggestions/types';
-
-export const getKeySuggestions = (
-	props: QueryKeyRequestProps,
-): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> =>
-	axios.get(`/fields/keys?signal=${props.signal}&name=${props.name}`);

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -1,11 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import {
-	QueryKeyValueRequestProps,
-	QueryKeyValueSuggestionsResponseProps,
-} from 'types/api/querySuggestions/types';
-
-export const getValueSuggestions = (
-	props: QueryKeyValueRequestProps,
-): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> =>
-	axios.get(`/fields/values?signal=${props.signal}&name=${props.key}`);

frontend/src/api/traceFunnels/index.ts

@@ -119,6 +119,7 @@ export const updateFunnelSteps = async (
 export interface ValidateFunnelPayload {
 	start_time: number;
 	end_time: number;
+	steps: FunnelStepData[];
 }
 
 export interface ValidateFunnelResponse {
@@ -132,12 +133,11 @@ export interface ValidateFunnelResponse {
 }
 
 export const validateFunnelSteps = async (
-	funnelId: string,
 	payload: ValidateFunnelPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ValidateFunnelResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/validate`,
+		`${FUNNELS_BASE_PATH}/analytics/validate`,
 		payload,
 		{ signal },
 	);
@@ -185,6 +185,7 @@ export interface FunnelOverviewPayload {
 	end_time: number;
 	step_start?: number;
 	step_end?: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelOverviewResponse {
@@ -196,20 +197,17 @@ export interface FunnelOverviewResponse {
 			avg_rate: number;
 			conversion_rate: number | null;
 			errors: number;
-			// TODO(shaheer): remove p99_latency once we have support for latency
-			p99_latency: number;
 			latency: number;
 		};
 	}>;
 }
 
 export const getFunnelOverview = async (
-	funnelId: string,
 	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<FunnelOverviewResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/overview`,
+		`${FUNNELS_BASE_PATH}/analytics/overview`,
 		payload,
 		{
 			signal,
@@ -237,12 +235,11 @@ export interface SlowTraceData {
 }
 
 export const getFunnelSlowTraces = async (
-	funnelId: string,
 	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
+		`${FUNNELS_BASE_PATH}/analytics/slow-traces`,
 		payload,
 		{
 			signal,
@@ -275,7 +272,7 @@ export const getFunnelErrorTraces = async (
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
+		`${FUNNELS_BASE_PATH}/analytics/error-traces`,
 		payload,
 		{
 			signal,
@@ -293,6 +290,7 @@ export const getFunnelErrorTraces = async (
 export interface FunnelStepsPayload {
 	start_time: number;
 	end_time: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelStepGraphMetrics {
@@ -309,12 +307,11 @@ export interface FunnelStepsResponse {
 }
 
 export const getFunnelSteps = async (
-	funnelId: string,
 	payload: FunnelStepsPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<FunnelStepsResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps`,
+		`${FUNNELS_BASE_PATH}/analytics/steps`,
 		payload,
 		{ signal },
 	);
@@ -332,6 +329,7 @@ export interface FunnelStepsOverviewPayload {
 	end_time: number;
 	step_start?: number;
 	step_end?: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelStepsOverviewResponse {
@@ -343,12 +341,11 @@ export interface FunnelStepsOverviewResponse {
 }
 
 export const getFunnelStepsOverview = async (
-	funnelId: string,
 	payload: FunnelStepsOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<FunnelStepsOverviewResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps/overview`,
+		`${FUNNELS_BASE_PATH}/analytics/steps/overview`,
 		payload,
 		{ signal },
 	);

frontend/src/api/v1/org/preferences/list.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps } from 'types/api/preferences/list';
+import { OrgPreference } from 'types/api/preferences/preference';
+
+const listPreference = async (): Promise<
+	SuccessResponseV2<OrgPreference[]>
+> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/org/preferences`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default listPreference;

frontend/src/api/v1/org/preferences/name/get.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/preferences/get';
+import { OrgPreference } from 'types/api/preferences/preference';
+
+const getPreference = async (
+	props: Props,
+): Promise<SuccessResponseV2<OrgPreference>> => {
+	try {
+		const response = await axios.get<PayloadProps>(
+			`/org/preferences/${props.name}`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPreference;

frontend/src/api/v1/org/preferences/name/update.ts

@@ -0,0 +1,22 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/preferences/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put(`/org/preferences/${props.name}`, {
+			value: props.value,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/api/v1/user/preferences/get.ts

@@ -1,24 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/getUserPreference';
-
-const getPreference = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
-	try {
-		const response = await axios.get(`/user/preferences`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getPreference;

frontend/src/api/v1/user/preferences/list.ts

@@ -0,0 +1,21 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps } from 'types/api/preferences/list';
+import { UserPreference } from 'types/api/preferences/preference';
+
+const list = async (): Promise<SuccessResponseV2<UserPreference[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user/preferences`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default list;

frontend/src/api/v1/user/preferences/name/get.ts

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

frontend/src/api/v1/user/preferences/name/update.ts

@@ -0,0 +1,22 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/preferences/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put(`/user/preferences/${props.name}`, {
+			value: props.value,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/api/v5/queryRange/constants.ts

@@ -1,168 +0,0 @@
-// V5 Query Range Constants
-
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import {
-	FunctionName,
-	RequestType,
-	SignalType,
-	Step,
-} from 'types/api/v5/queryRange';
-
-// ===================== Schema and Version Constants =====================
-
-export const SCHEMA_VERSION_V5 = ENTITY_VERSION_V5;
-export const API_VERSION_V5 = 'v5';
-
-// ===================== Default Values =====================
-
-export const DEFAULT_STEP_INTERVAL: Step = '60s';
-export const DEFAULT_LIMIT = 100;
-export const DEFAULT_OFFSET = 0;
-
-// ===================== Request Type Constants =====================
-
-export const REQUEST_TYPES: Record<string, RequestType> = {
-	SCALAR: 'scalar',
-	TIME_SERIES: 'time_series',
-	RAW: 'raw',
-	DISTRIBUTION: 'distribution',
-} as const;
-
-// ===================== Signal Type Constants =====================
-
-export const SIGNAL_TYPES: Record<string, SignalType> = {
-	TRACES: 'traces',
-	LOGS: 'logs',
-	METRICS: 'metrics',
-} as const;
-
-// ===================== Common Aggregation Expressions =====================
-
-export const TRACE_AGGREGATIONS = {
-	COUNT: 'count()',
-	COUNT_DISTINCT_TRACE_ID: 'count_distinct(traceID)',
-	AVG_DURATION: 'avg(duration_nano)',
-	P50_DURATION: 'p50(duration_nano)',
-	P95_DURATION: 'p95(duration_nano)',
-	P99_DURATION: 'p99(duration_nano)',
-	MAX_DURATION: 'max(duration_nano)',
-	MIN_DURATION: 'min(duration_nano)',
-	SUM_DURATION: 'sum(duration_nano)',
-} as const;
-
-export const LOG_AGGREGATIONS = {
-	COUNT: 'count()',
-	COUNT_DISTINCT_HOST: 'count_distinct(host.name)',
-	COUNT_DISTINCT_SERVICE: 'count_distinct(service.name)',
-	COUNT_DISTINCT_CONTAINER: 'count_distinct(container.name)',
-} as const;
-
-// ===================== Common Filter Expressions =====================
-
-export const COMMON_FILTERS = {
-	// Trace filters
-	SERVER_SPANS: "kind_string = 'Server'",
-	CLIENT_SPANS: "kind_string = 'Client'",
-	INTERNAL_SPANS: "kind_string = 'Internal'",
-	ERROR_SPANS: 'http.status_code >= 400',
-	SUCCESS_SPANS: 'http.status_code < 400',
-
-	// Common service filters
-	EXCLUDE_HEALTH_CHECKS: "http.route != '/health' AND http.route != '/ping'",
-	HTTP_REQUESTS: "http.method != ''",
-
-	// Log filters
-	ERROR_LOGS: "severity_text = 'ERROR'",
-	WARN_LOGS: "severity_text = 'WARN'",
-	INFO_LOGS: "severity_text = 'INFO'",
-	DEBUG_LOGS: "severity_text = 'DEBUG'",
-} as const;
-
-// ===================== Common Group By Fields =====================
-
-export const COMMON_GROUP_BY_FIELDS = {
-	SERVICE_NAME: {
-		name: 'service.name',
-		fieldDataType: 'string' as const,
-		fieldContext: 'resource' as const,
-	},
-	HTTP_METHOD: {
-		name: 'http.method',
-		fieldDataType: 'string' as const,
-		fieldContext: 'attribute' as const,
-	},
-	HTTP_ROUTE: {
-		name: 'http.route',
-		fieldDataType: 'string' as const,
-		fieldContext: 'attribute' as const,
-	},
-	HTTP_STATUS_CODE: {
-		name: 'http.status_code',
-		fieldDataType: 'int64' as const,
-		fieldContext: 'attribute' as const,
-	},
-	HOST_NAME: {
-		name: 'host.name',
-		fieldDataType: 'string' as const,
-		fieldContext: 'resource' as const,
-	},
-	CONTAINER_NAME: {
-		name: 'container.name',
-		fieldDataType: 'string' as const,
-		fieldContext: 'resource' as const,
-	},
-} as const;
-
-// ===================== Function Names =====================
-
-export const FUNCTION_NAMES: Record<string, FunctionName> = {
-	CUT_OFF_MIN: 'cutOffMin',
-	CUT_OFF_MAX: 'cutOffMax',
-	CLAMP_MIN: 'clampMin',
-	CLAMP_MAX: 'clampMax',
-	ABSOLUTE: 'absolute',
-	RUNNING_DIFF: 'runningDiff',
-	LOG2: 'log2',
-	LOG10: 'log10',
-	CUM_SUM: 'cumSum',
-	EWMA3: 'ewma3',
-	EWMA5: 'ewma5',
-	EWMA7: 'ewma7',
-	MEDIAN3: 'median3',
-	MEDIAN5: 'median5',
-	MEDIAN7: 'median7',
-	TIME_SHIFT: 'timeShift',
-	ANOMALY: 'anomaly',
-} as const;
-
-// ===================== Common Step Intervals =====================
-
-export const STEP_INTERVALS = {
-	FIFTEEN_SECONDS: '15s',
-	THIRTY_SECONDS: '30s',
-	ONE_MINUTE: '60s',
-	FIVE_MINUTES: '300s',
-	TEN_MINUTES: '600s',
-	FIFTEEN_MINUTES: '900s',
-	THIRTY_MINUTES: '1800s',
-	ONE_HOUR: '3600s',
-	TWO_HOURS: '7200s',
-	SIX_HOURS: '21600s',
-	TWELVE_HOURS: '43200s',
-	ONE_DAY: '86400s',
-} as const;
-
-// ===================== Time Range Presets =====================
-
-export const TIME_RANGE_PRESETS = {
-	LAST_5_MINUTES: 5 * 60 * 1000,
-	LAST_15_MINUTES: 15 * 60 * 1000,
-	LAST_30_MINUTES: 30 * 60 * 1000,
-	LAST_HOUR: 60 * 60 * 1000,
-	LAST_3_HOURS: 3 * 60 * 60 * 1000,
-	LAST_6_HOURS: 6 * 60 * 60 * 1000,
-	LAST_12_HOURS: 12 * 60 * 60 * 1000,
-	LAST_24_HOURS: 24 * 60 * 60 * 1000,
-	LAST_3_DAYS: 3 * 24 * 60 * 60 * 1000,
-	LAST_7_DAYS: 7 * 24 * 60 * 60 * 1000,
-} as const;

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -1,358 +0,0 @@
-import { isEmpty } from 'lodash-es';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
-import {
-	DistributionData,
-	MetricRangePayloadV5,
-	RawData,
-	ScalarData,
-	TimeSeriesData,
-} from 'types/api/v5/queryRange';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-
-/**
- * Converts V5 TimeSeriesData to legacy format
- */
-function convertTimeSeriesData(
-	timeSeriesData: TimeSeriesData,
-	legendMap: Record<string, string>,
-): QueryDataV3 {
-	// Convert V5 time series format to legacy QueryDataV3 format
-	return {
-		queryName: timeSeriesData.queryName,
-		legend: legendMap[timeSeriesData.queryName] || timeSeriesData.queryName,
-		series: timeSeriesData?.aggregations?.flatMap((aggregation) =>
-			aggregation.series.map((series) => ({
-				labels: series.labels
-					? Object.fromEntries(
-							series.labels.map((label) => [label.key.name, label.value]),
-					  )
-					: {},
-				labelsArray: series.labels
-					? series.labels.map((label) => ({ [label.key.name]: label.value }))
-					: [],
-				values: series.values.map((value) => ({
-					timestamp: value.timestamp,
-					value: String(value.value),
-				})),
-			})),
-		),
-		list: null,
-	};
-}
-
-/**
- * Helper function to collect columns from scalar data
- */
-function collectColumnsFromScalarData(
-	scalarData: ScalarData[],
-): { name: string; queryName: string; isValueColumn: boolean }[] {
-	const columnMap = new Map<
-		string,
-		{ name: string; queryName: string; isValueColumn: boolean }
-	>();
-
-	scalarData.forEach((scalar) => {
-		scalar.columns.forEach((col) => {
-			if (col.columnType === 'group') {
-				// For group columns, use the column name as-is
-				const key = `${col.name}_group`;
-				if (!columnMap.has(key)) {
-					columnMap.set(key, {
-						name: col.name,
-						queryName: '', // Group columns don't have query names
-						isValueColumn: false,
-					});
-				}
-			} else if (col.columnType === 'aggregation') {
-				// For aggregation columns, use the query name as the column name
-				const key = `${col.queryName}_aggregation`;
-				if (!columnMap.has(key)) {
-					columnMap.set(key, {
-						name: col.queryName, // Use query name as column name (A, B, etc.)
-						queryName: col.queryName,
-						isValueColumn: true,
-					});
-				}
-			}
-		});
-	});
-
-	return Array.from(columnMap.values()).sort((a, b) => {
-		if (a.isValueColumn !== b.isValueColumn) {
-			return a.isValueColumn ? 1 : -1;
-		}
-		return a.name.localeCompare(b.name);
-	});
-}
-
-/**
- * Helper function to process scalar data rows with unified table structure
- */
-function processScalarDataRows(
-	scalarData: ScalarData[],
-): { data: Record<string, any> }[] {
-	// First, identify all group columns and all value columns
-	const allGroupColumns = new Set<string>();
-	const allValueColumns = new Set<string>();
-
-	scalarData.forEach((scalar) => {
-		scalar.columns.forEach((col) => {
-			if (col.columnType === 'group') {
-				allGroupColumns.add(col.name);
-			} else if (col.columnType === 'aggregation') {
-				// Use query name for value columns to match expected format
-				allValueColumns.add(col.queryName);
-			}
-		});
-	});
-
-	// Create a unified row structure
-	const unifiedRows = new Map<string, Record<string, any>>();
-
-	// Process each scalar result
-	scalarData.forEach((scalar) => {
-		scalar.data.forEach((dataRow) => {
-			const groupColumns = scalar.columns.filter(
-				(col) => col.columnType === 'group',
-			);
-
-			// Create row key based on group columns
-			let rowKey: string;
-			const groupValues: Record<string, any> = {};
-
-			if (groupColumns.length > 0) {
-				const keyParts: string[] = [];
-				groupColumns.forEach((col, index) => {
-					const value = dataRow[index];
-					keyParts.push(String(value));
-					groupValues[col.name] = value;
-				});
-				rowKey = keyParts.join('|');
-			} else {
-				// For scalar values without grouping, create a default row
-				rowKey = 'default_row';
-				// Set all group columns to 'n/a' for this row
-				Array.from(allGroupColumns).forEach((groupCol) => {
-					groupValues[groupCol] = 'n/a';
-				});
-			}
-
-			// Get or create the unified row
-			if (!unifiedRows.has(rowKey)) {
-				const newRow: Record<string, any> = { ...groupValues };
-				// Initialize all value columns to 'n/a'
-				Array.from(allValueColumns).forEach((valueCol) => {
-					newRow[valueCol] = 'n/a';
-				});
-				unifiedRows.set(rowKey, newRow);
-			}
-
-			const row = unifiedRows.get(rowKey)!;
-
-			// Fill in the aggregation values using query name as column name
-			scalar.columns.forEach((col, colIndex) => {
-				if (col.columnType === 'aggregation') {
-					row[col.queryName] = dataRow[colIndex];
-				}
-			});
-		});
-	});
-
-	return Array.from(unifiedRows.values()).map((rowData) => ({
-		data: rowData,
-	}));
-}
-
-/**
- * Converts V5 ScalarData array to legacy format with table structure
- */
-function convertScalarDataArrayToTable(
-	scalarDataArray: ScalarData[],
-	legendMap: Record<string, string>,
-): QueryDataV3 {
-	// If no scalar data, return empty structure
-	if (!scalarDataArray || scalarDataArray.length === 0) {
-		return {
-			queryName: '',
-			legend: '',
-			series: null,
-			list: null,
-			table: {
-				columns: [],
-				rows: [],
-			},
-		};
-	}
-
-	// Collect columns and process rows
-	const columns = collectColumnsFromScalarData(scalarDataArray);
-	const rows = processScalarDataRows(scalarDataArray);
-
-	// Get the primary query name
-	const primaryQuery = scalarDataArray.find((s) =>
-		s.columns.some((c) => c.columnType === 'aggregation'),
-	);
-	const queryName =
-		primaryQuery?.columns.find((c) => c.columnType === 'aggregation')
-			?.queryName ||
-		scalarDataArray[0]?.columns[0]?.queryName ||
-		'';
-
-	return {
-		queryName,
-		legend: legendMap[queryName] || queryName,
-		series: null,
-		list: null,
-		table: {
-			columns,
-			rows,
-		},
-	};
-}
-
-/**
- * Converts V5 RawData to legacy format
- */
-function convertRawData(
-	rawData: RawData,
-	legendMap: Record<string, string>,
-): QueryDataV3 {
-	// Convert V5 raw format to legacy QueryDataV3 format
-	return {
-		queryName: rawData.queryName,
-		legend: legendMap[rawData.queryName] || rawData.queryName,
-		series: null,
-		list: rawData.rows?.map((row) => ({
-			timestamp: row.timestamp,
-			data: {
-				// Map raw data to ILog structure - spread row.data first to include all properties
-				...row.data,
-				date: row.timestamp,
-			} as any,
-		})),
-	};
-}
-
-/**
- * Converts V5 DistributionData to legacy format
- */
-function convertDistributionData(
-	distributionData: DistributionData,
-	legendMap: Record<string, string>,
-): any {
-	// eslint-disable-line @typescript-eslint/no-explicit-any
-	// Convert V5 distribution format to legacy histogram format
-	return {
-		...distributionData,
-		legendMap,
-	};
-}
-
-/**
- * Helper function to convert V5 data based on type
- */
-function convertV5DataByType(
-	v5Data: any,
-	legendMap: Record<string, string>,
-): MetricRangePayloadV3['data'] {
-	switch (v5Data?.type) {
-		case 'time_series': {
-			const timeSeriesData = v5Data.data.results as TimeSeriesData[];
-			return {
-				resultType: 'time_series',
-				result: timeSeriesData.map((timeSeries) =>
-					convertTimeSeriesData(timeSeries, legendMap),
-				),
-			};
-		}
-		case 'scalar': {
-			const scalarData = v5Data.data.results as ScalarData[];
-			// For scalar data, combine all results into a single table
-			const combinedTable = convertScalarDataArrayToTable(scalarData, legendMap);
-			return {
-				resultType: 'scalar',
-				result: [combinedTable],
-			};
-		}
-		case 'raw': {
-			const rawData = v5Data.data.results as RawData[];
-			return {
-				resultType: 'raw',
-				result: rawData.map((raw) => convertRawData(raw, legendMap)),
-			};
-		}
-		case 'distribution': {
-			const distributionData = v5Data.data.results as DistributionData[];
-			return {
-				resultType: 'distribution',
-				result: distributionData.map((distribution) =>
-					convertDistributionData(distribution, legendMap),
-				),
-			};
-		}
-		default:
-			return {
-				resultType: '',
-				result: [],
-			};
-	}
-}
-
-/**
- * Converts V5 API response to legacy format expected by frontend components
- */
-export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5>,
-	legendMap: Record<string, string>,
-	// formatForWeb?: boolean,
-): SuccessResponse<MetricRangePayloadV3> {
-	const { payload } = v5Response;
-	const v5Data = payload?.data;
-
-	// todo - sagar
-	// If formatForWeb is true, return as-is (like existing logic)
-	// Exception: scalar data should always be converted to table format
-	// if (formatForWeb && v5Data?.type !== 'scalar') {
-	// 	return v5Response as any;
-	// }
-
-	// Convert based on V5 response type
-	const convertedData = convertV5DataByType(v5Data, legendMap);
-
-	// Create legacy-compatible response structure
-	const legacyResponse: SuccessResponse<MetricRangePayloadV3> = {
-		...v5Response,
-		payload: {
-			data: convertedData,
-		},
-	};
-
-	// Apply legend mapping (similar to existing logic)
-	if (legacyResponse.payload?.data?.result) {
-		legacyResponse.payload.data.result = legacyResponse.payload.data.result.map(
-			(queryData: any) => {
-				// eslint-disable-line @typescript-eslint/no-explicit-any
-				const newQueryData = queryData;
-				newQueryData.legend = legendMap[queryData.queryName];
-
-				// If metric names is an empty object
-				if (isEmpty(queryData.metric)) {
-					// If metrics list is empty && the user haven't defined a legend then add the legend equal to the name of the query.
-					if (!newQueryData.legend) {
-						newQueryData.legend = queryData.queryName;
-					}
-					// If name of the query and the legend if inserted is same then add the same to the metrics object.
-					if (queryData.queryName === newQueryData.legend) {
-						newQueryData.metric = newQueryData.metric || {};
-						newQueryData.metric[queryData.queryName] = queryData.queryName;
-					}
-				}
-
-				return newQueryData;
-			},
-		);
-	}
-
-	return legacyResponse;
-}

frontend/src/api/v5/queryRange/getQueryRange.ts

@@ -1,51 +0,0 @@
-import { ApiV5Instance } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	MetricRangePayloadV5,
-	QueryRangePayloadV5,
-} from 'types/api/v5/queryRange';
-
-export const getQueryRangeV5 = async (
-	props: QueryRangePayloadV5,
-	version: string,
-	signal: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponse<MetricRangePayloadV5> | ErrorResponse> => {
-	try {
-		if (version && version === ENTITY_VERSION_V5) {
-			const response = await ApiV5Instance.post('/query_range', props, {
-				signal,
-				headers,
-			});
-
-			return {
-				statusCode: 200,
-				error: null,
-				message: response.data.status,
-				payload: response.data,
-				params: props,
-			};
-		}
-
-		// Default V5 behavior
-		const response = await ApiV5Instance.post('/query_range', props, {
-			signal,
-			headers,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-			params: props,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getQueryRangeV5;

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -1,387 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
-import { isEmpty } from 'lodash-es';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	QueryFunctionProps,
-} from 'types/api/queryBuilder/queryBuilderData';
-import {
-	BaseBuilderQuery,
-	FieldContext,
-	FieldDataType,
-	FunctionName,
-	GroupByKey,
-	LogAggregation,
-	MetricAggregation,
-	OrderBy,
-	QueryEnvelope,
-	QueryFunction,
-	QueryRangePayloadV5,
-	QueryType,
-	RequestType,
-	TelemetryFieldKey,
-	TraceAggregation,
-} from 'types/api/v5/queryRange';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-
-type PrepareQueryRangePayloadV5Result = {
-	queryPayload: QueryRangePayloadV5;
-	legendMap: Record<string, string>;
-};
-
-/**
- * Maps panel types to V5 request types
- */
-function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
-	switch (panelType) {
-		case PANEL_TYPES.TIME_SERIES:
-		case PANEL_TYPES.BAR:
-			return 'time_series';
-		case PANEL_TYPES.TABLE:
-		case PANEL_TYPES.PIE:
-		case PANEL_TYPES.VALUE:
-		case PANEL_TYPES.TRACE:
-			return 'scalar';
-		case PANEL_TYPES.LIST:
-			return 'raw';
-		case PANEL_TYPES.HISTOGRAM:
-			return 'distribution';
-		default:
-			return '';
-	}
-}
-
-/**
- * Gets signal type from data source
- */
-function getSignalType(dataSource: string): 'traces' | 'logs' | 'metrics' {
-	if (dataSource === 'traces') return 'traces';
-	if (dataSource === 'logs') return 'logs';
-	return 'metrics';
-}
-
-/**
- * Creates base spec for builder queries
- */
-function createBaseSpec(
-	queryData: IBuilderQuery,
-	requestType: RequestType,
-	panelType?: PANEL_TYPES,
-): BaseBuilderQuery {
-	return {
-		stepInterval: queryData.stepInterval,
-		disabled: queryData.disabled,
-		filter: queryData?.filter?.expression ? queryData.filter : undefined,
-		groupBy:
-			queryData.groupBy?.length > 0
-				? queryData.groupBy.map(
-						(item: any): GroupByKey => ({
-							name: item.key,
-							fieldDataType: item?.dataType,
-							fieldContext: item?.type,
-							description: item?.description,
-							unit: item?.unit,
-							signal: item?.signal,
-							materialized: item?.materialized,
-						}),
-				  )
-				: undefined,
-		limit:
-			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
-				? queryData.limit || queryData.pageSize || undefined
-				: queryData.limit || undefined,
-		offset: requestType === 'raw' ? queryData.offset : undefined,
-		order:
-			queryData.orderBy.length > 0
-				? queryData.orderBy.map(
-						(order: any): OrderBy => ({
-							key: {
-								name: order.columnName,
-							},
-							direction: order.order,
-						}),
-				  )
-				: undefined,
-		// legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
-		having: isEmpty(queryData.havingExpression)
-			? undefined
-			: queryData?.havingExpression,
-		functions: isEmpty(queryData.functions)
-			? undefined
-			: queryData.functions.map(
-					(func: QueryFunctionProps): QueryFunction => ({
-						name: func.name as FunctionName,
-						args: func.args.map((arg) => ({
-							// name: arg.name,
-							value: arg,
-						})),
-					}),
-			  ),
-		selectFields: isEmpty(queryData.selectColumns)
-			? undefined
-			: queryData.selectColumns?.map(
-					(column: BaseAutocompleteData): TelemetryFieldKey => ({
-						name: column.key,
-						fieldDataType: column?.dataType as FieldDataType,
-						fieldContext: column?.type as FieldContext,
-					}),
-			  ),
-	};
-}
-// Utility to parse aggregation expressions with optional alias
-export function parseAggregations(
-	expression: string,
-): { expression: string; alias?: string }[] {
-	const result: { expression: string; alias?: string }[] = [];
-	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+([a-zA-Z0-9_]+))?/g;
-	let match = regex.exec(expression);
-	while (match !== null) {
-		const expr = match[1];
-		const alias = match[2];
-		if (alias) {
-			result.push({ expression: expr, alias });
-		} else {
-			result.push({ expression: expr });
-		}
-		match = regex.exec(expression);
-	}
-	return result;
-}
-
-export function createAggregation(
-	queryData: any,
-): TraceAggregation[] | LogAggregation[] | MetricAggregation[] {
-	if (queryData.dataSource === DataSource.METRICS) {
-		return [
-			{
-				metricName: queryData?.aggregateAttribute?.key,
-				temporality: queryData?.aggregateAttribute?.temporality,
-				timeAggregation: queryData?.timeAggregation,
-				spaceAggregation: queryData?.spaceAggregation,
-			},
-		];
-	}
-
-	if (queryData.aggregations?.length > 0) {
-		return isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
-			? [{ expression: 'count()' }]
-			: parseAggregations(queryData.aggregations?.[0].expression);
-	}
-
-	return [{ expression: 'count()' }];
-}
-
-/**
- * Converts query builder data to V5 builder queries
- */
-function convertBuilderQueriesToV5(
-	builderQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-	requestType: RequestType,
-	panelType?: PANEL_TYPES,
-): QueryEnvelope[] {
-	return Object.entries(builderQueries).map(
-		([queryName, queryData]): QueryEnvelope => {
-			const signal = getSignalType(queryData.dataSource);
-			const baseSpec = createBaseSpec(queryData, requestType, panelType);
-			let spec: QueryEnvelope['spec'];
-
-			const aggregations = createAggregation(queryData);
-
-			switch (signal) {
-				case 'traces':
-					spec = {
-						name: queryName,
-						signal: 'traces' as const,
-						...baseSpec,
-						aggregations: aggregations as TraceAggregation[],
-					};
-					break;
-				case 'logs':
-					spec = {
-						name: queryName,
-						signal: 'logs' as const,
-						...baseSpec,
-						aggregations: aggregations as LogAggregation[],
-					};
-					break;
-				case 'metrics':
-				default:
-					spec = {
-						name: queryName,
-						signal: 'metrics' as const,
-						...baseSpec,
-						aggregations: aggregations as MetricAggregation[],
-						// reduceTo: queryData.reduceTo,
-					};
-					break;
-			}
-
-			return {
-				type: 'builder_query' as QueryType,
-				spec,
-			};
-		},
-	);
-}
-
-/**
- * Converts PromQL queries to V5 format
- */
-function convertPromQueriesToV5(
-	promQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-): QueryEnvelope[] {
-	return Object.entries(promQueries).map(
-		([queryName, queryData]): QueryEnvelope => ({
-			type: 'promql' as QueryType,
-			spec: {
-				name: queryName,
-				query: queryData.query,
-				disabled: queryData.disabled || false,
-				step: queryData.stepInterval,
-				stats: false, // PromQL specific field
-			},
-		}),
-	);
-}
-
-/**
- * Converts ClickHouse queries to V5 format
- */
-function convertClickHouseQueriesToV5(
-	chQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-): QueryEnvelope[] {
-	return Object.entries(chQueries).map(
-		([queryName, queryData]): QueryEnvelope => ({
-			type: 'clickhouse_sql' as QueryType,
-			spec: {
-				name: queryName,
-				query: queryData.query,
-				disabled: queryData.disabled || false,
-				// ClickHouse doesn't have step or stats like PromQL
-			},
-		}),
-	);
-}
-
-/**
- * Converts query formulas to V5 format
- */
-function convertFormulasToV5(
-	formulas: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-): QueryEnvelope[] {
-	return Object.entries(formulas).map(
-		([queryName, formulaData]): QueryEnvelope => ({
-			type: 'builder_formula' as QueryType,
-			spec: {
-				name: queryName,
-				expression: formulaData.expression || '',
-				functions: formulaData.functions,
-			},
-		}),
-	);
-}
-
-/**
- * Helper function to reduce query arrays to objects
- */
-function reduceQueriesToObject(
-	queryArray: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
-): { queries: Record<string, any>; legends: Record<string, string> } {
-	// eslint-disable-line @typescript-eslint/no-explicit-any
-	const legends: Record<string, string> = {};
-	const queries = queryArray.reduce((acc, queryItem) => {
-		if (!queryItem.query) return acc;
-		acc[queryItem.name] = queryItem;
-		legends[queryItem.name] = queryItem.legend;
-		return acc;
-	}, {} as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
-
-	return { queries, legends };
-}
-
-/**
- * Prepares V5 query range payload from GetQueryResultsProps
- */
-export const prepareQueryRangePayloadV5 = ({
-	query,
-	globalSelectedInterval,
-	graphType,
-	selectedTime,
-	tableParams,
-	variables = {},
-	start: startTime,
-	end: endTime,
-}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
-	let legendMap: Record<string, string> = {};
-	const requestType = mapPanelTypeToRequestType(graphType);
-	let queries: QueryEnvelope[] = [];
-
-	console.log('query', query);
-
-	switch (query.queryType) {
-		case EQueryType.QUERY_BUILDER: {
-			const { queryData: data, queryFormulas } = query.builder;
-			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
-			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
-
-			// Combine legend maps
-			legendMap = {
-				...currentQueryData.newLegendMap,
-				...currentFormulas.newLegendMap,
-			};
-
-			// Convert builder queries
-			const builderQueries = convertBuilderQueriesToV5(
-				currentQueryData.data,
-				requestType,
-				graphType,
-			);
-
-			// Convert formulas as separate query type
-			const formulaQueries = convertFormulasToV5(currentFormulas.data);
-
-			// Combine both types
-			queries = [...builderQueries, ...formulaQueries];
-			break;
-		}
-		case EQueryType.PROM: {
-			const promQueries = reduceQueriesToObject(query[query.queryType]);
-			queries = convertPromQueriesToV5(promQueries.queries);
-			legendMap = promQueries.legends;
-			break;
-		}
-		case EQueryType.CLICKHOUSE: {
-			const chQueries = reduceQueriesToObject(query[query.queryType]);
-			queries = convertClickHouseQueriesToV5(chQueries.queries);
-			legendMap = chQueries.legends;
-			break;
-		}
-		default:
-			break;
-	}
-
-	// Calculate time range
-	const { start, end } = getStartEndRangeTime({
-		type: selectedTime,
-		interval: globalSelectedInterval,
-	});
-
-	// Create V5 payload
-	const queryPayload: QueryRangePayloadV5 = {
-		schemaVersion: 'v1',
-		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
-		end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3,
-		requestType,
-		compositeQuery: {
-			queries,
-		},
-		variables,
-	};
-
-	return { legendMap, queryPayload };
-};

frontend/src/api/v5/v5.ts

@@ -1,8 +0,0 @@
-// V5 API exports
-export * from './queryRange/constants';
-export { convertV5ResponseToLegacy } from './queryRange/convertV5Response';
-export { getQueryRangeV5 } from './queryRange/getQueryRange';
-export { prepareQueryRangePayloadV5 } from './queryRange/prepareQueryRangePayloadV5';
-
-// Export types from proper location
-export * from 'types/api/v5/queryRange';

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import ROUTES from 'constants/routes';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -52,11 +53,32 @@ jest.mock('hooks/saveViews/useDeleteView', () => ({
 	})),
 }));
 
+// Mock usePreferenceSync
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 2,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
 describe('ExplorerCard', () => {
 	it('renders a card with a title and a description', () => {
 		render(
 			<MockQueryClientProvider>
-				<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
 			</MockQueryClientProvider>,
 		);
 		expect(screen.queryByText('Query Builder')).not.toBeInTheDocument();
@@ -65,7 +87,9 @@ describe('ExplorerCard', () => {
 	it('renders a save view button', () => {
 		render(
 			<MockQueryClientProvider>
-				<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
 			</MockQueryClientProvider>,
 		);
 		expect(screen.queryByText('Save view')).not.toBeInTheDocument();

frontend/src/components/ExplorerCard/utils.ts

@@ -6,6 +6,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import isEqual from 'lodash-es/isEqual';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 
 import {
 	DeleteViewHandlerProps,
@@ -106,7 +107,11 @@ export const isQueryUpdatedInView = ({
 		!isEqual(
 			options?.selectColumns,
 			extraData && JSON.parse(extraData)?.selectColumns,
-		)
+		) ||
+		(stagedQuery?.builder?.queryData?.[0]?.dataSource === DataSource.LOGS &&
+			(!isEqual(options?.format, extraData && JSON.parse(extraData)?.format) ||
+				!isEqual(options?.maxLines, extraData && JSON.parse(extraData)?.maxLines) ||
+				!isEqual(options?.fontSize, extraData && JSON.parse(extraData)?.fontSize)))
 	);
 };
 

frontend/src/components/Graph/index.tsx

@@ -74,6 +74,7 @@ const formatMap = {
 	'MM/dd HH:mm': DATE_TIME_FORMATS.SLASH_SHORT,
 	'MM/DD': DATE_TIME_FORMATS.DATE_SHORT,
 	'YY-MM': DATE_TIME_FORMATS.YEAR_MONTH,
+	'MMM d, yyyy, h:mm:ss aaaa': DATE_TIME_FORMATS.DASH_DATETIME,
 	YY: DATE_TIME_FORMATS.YEAR_SHORT,
 };
 

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -169,7 +169,6 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
-
 	.ant-drawer-close {
 		padding: 0px;
 	}

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

@@ -1,101 +0,0 @@
-.input-with-label {
-	display: flex;
-	flex-direction: row;
-
-	border-radius: 2px 0px 0px 2px;
-
-	.label {
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: 0.56px;
-
-		max-width: 150px;
-		min-width: 120px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		padding: 0px 8px;
-
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		font-weight: var(--font-weight-light);
-	}
-
-	.input {
-		flex: 1;
-		min-width: 150px;
-		font-family: 'Space Mono', monospace !important;
-
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-
-		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;
-	}
-
-	.close-btn {
-		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		height: 38px;
-		width: 38px;
-	}
-
-	&.labelAfter {
-		.input {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
-
-		.label {
-			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-	}
-}
-
-.lightMode {
-	.input-with-label {
-		.label {
-			color: var(--bg-ink-500) !important;
-
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		.input {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		.close-btn {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		&.labelAfter {
-			.input {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-}

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,71 +0,0 @@
-import './InputWithLabel.styles.scss';
-
-import { Button, Input, Typography } from 'antd';
-import cx from 'classnames';
-import { X } from 'lucide-react';
-import { useState } from 'react';
-
-function InputWithLabel({
-	label,
-	initialValue,
-	placeholder,
-	type,
-	onClose,
-	labelAfter,
-	onChange,
-	className,
-}: {
-	label: string;
-	initialValue?: string | number;
-	placeholder: string;
-	type?: string;
-	onClose?: () => void;
-	labelAfter?: boolean;
-	onChange: (value: string) => void;
-	className?: string;
-}): JSX.Element {
-	const [inputValue, setInputValue] = useState<string>(
-		initialValue ? initialValue.toString() : '',
-	);
-
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.target.value);
-		onChange?.(e.target.value);
-	};
-
-	return (
-		<div
-			className={cx('input-with-label', className, {
-				labelAfter,
-			})}
-		>
-			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
-			<Input
-				className="input"
-				placeholder={placeholder}
-				type={type}
-				value={inputValue}
-				onChange={handleChange}
-				name={label.toLowerCase()}
-			/>
-			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
-			{onClose && (
-				<Button
-					className="periscope-btn ghost close-btn"
-					icon={<X size={16} />}
-					onClick={onClose}
-				/>
-			)}
-		</div>
-	);
-}
-
-InputWithLabel.defaultProps = {
-	type: 'text',
-	onClose: undefined,
-	labelAfter: false,
-	initialValue: undefined,
-	className: undefined,
-};
-
-export default InputWithLabel;

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

@@ -1,553 +0,0 @@
-.query-builder-v2 {
-	display: flex;
-	flex-direction: row;
-	gap: 4px;
-
-	width: 100%;
-
-	border-bottom: 1px solid var(--bg-slate-400);
-	border-top: 1px solid var(--bg-slate-400);
-
-	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', sans-serif;
-
-	border-right: none;
-	border-left: none;
-
-	.qb-content-container {
-		display: flex;
-		flex-direction: column;
-		width: calc(100% - 44px);
-
-		flex: 1;
-
-		position: relative;
-	}
-
-	.qb-content-section {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px;
-
-		flex: 1;
-
-		.qb-header-container {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-
-			margin-left: 32px;
-
-			.query-actions-container {
-				display: flex;
-				flex-direction: row;
-				gap: 8px;
-				justify-content: space-between;
-				align-items: center;
-				width: 100%;
-			}
-		}
-
-		.qb-elements-container {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
-			margin-left: 108px;
-
-			.code-mirror-where-clause,
-			.query-aggregation-container,
-			.query-add-ons,
-			.metrics-aggregation-section-content {
-				position: relative;
-
-				&::before {
-					content: '';
-					position: absolute;
-					left: -10px;
-					top: 12px;
-					width: 6px;
-					height: 6px;
-					border-left: 6px dotted #1d212d;
-				}
-
-				/* Horizontal line pointing from vertical to the item */
-				&::after {
-					content: '';
-					position: absolute;
-					left: -28px;
-					top: 15px;
-					width: 24px;
-					height: 1px;
-					background: repeating-linear-gradient(
-						to right,
-						#1d212d,
-						#1d212d 4px,
-						transparent 4px,
-						transparent 8px
-					);
-				}
-			}
-		}
-	}
-
-	.where-clause-view {
-		.qb-content-section {
-			.qb-elements-container {
-				margin-left: 0px;
-
-				.code-mirror-where-clause,
-				.query-aggregation-container,
-				.query-add-ons,
-				.metrics-aggregation-section-content {
-					&::before {
-						display: none;
-					}
-
-					&::after {
-						display: none;
-					}
-				}
-			}
-		}
-	}
-
-	.query-names-section {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		width: 44px;
-		padding: 8px;
-
-		border-left: 1px solid var(--bg-slate-400);
-
-		.query-name {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			gap: 10px;
-
-			padding: 4px;
-
-			border-radius: 0px 2px 2px 0px;
-
-			border-radius: 2px;
-			border: 1px solid rgba(242, 71, 105, 0.2);
-			background: rgba(242, 71, 105, 0.1);
-
-			color: var(--Sakura-400, #f56c87);
-			font-family: 'Space Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px; /* 128.571% */
-			text-transform: uppercase;
-		}
-
-		.formula-name {
-			display: flex;
-
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			gap: 10px;
-
-			padding: 4px;
-
-			border-radius: 0px 2px 2px 0px;
-
-			border-radius: 2px;
-			border: 1px solid rgba(173, 127, 88, 0.2);
-			background: rgba(173, 127, 88, 0.1);
-
-			color: var(--Sienna-500, #ad7f58);
-			font-family: 'Space Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px; /* 128.571% */
-			text-transform: uppercase;
-		}
-	}
-
-	.qb-formulas-container {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		margin-left: 32px;
-		padding-bottom: 16px;
-		padding-left: 8px;
-
-		.qb-formula {
-			.ant-row {
-				row-gap: 0px !important;
-			}
-
-			.qb-entity-options {
-				margin-left: 8px;
-
-				padding-right: 8px;
-			}
-
-			.formula-container {
-				margin-left: 82px;
-				padding: 4px 0px;
-
-				.ant-col {
-					&::before {
-						content: '';
-						position: absolute;
-						left: -10px;
-						top: 12px;
-						width: 6px;
-						height: 6px;
-						border-left: 6px dotted #1d212d;
-					}
-
-					/* Horizontal line pointing from vertical to the item */
-					&::after {
-						content: '';
-						position: absolute;
-						left: -28px;
-						top: 15px;
-						width: 24px;
-						height: 1px;
-						background: repeating-linear-gradient(
-							to right,
-							#1d212d,
-							#1d212d 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-
-				.formula-expression {
-					border-bottom-left-radius: 0px !important;
-					border-bottom-right-radius: 0px !important;
-
-					font-family: 'Space Mono';
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 16px; /* 128.571% */
-
-					resize: none;
-				}
-
-				.formula-legend {
-					border-top-left-radius: 0px !important;
-					border-top-right-radius: 0px !important;
-
-					.ant-input-group-addon {
-						border-top-left-radius: 0px !important;
-						border-top-right-radius: 0px !important;
-					}
-
-					.ant-input {
-						border-top-left-radius: 0px !important;
-						border-top-right-radius: 0px !important;
-					}
-				}
-			}
-		}
-	}
-
-	.qb-footer {
-		padding: 0 8px 16px 8px;
-
-		.qb-footer-container {
-			display: flex;
-			flex-direction: row;
-			gap: 8px;
-
-			margin-left: 32px;
-
-			.qb-add-new-query {
-				display: flex;
-				flex-direction: row;
-				gap: 8px;
-
-				&::before {
-					content: '';
-					height: calc(100% - 82px);
-					content: '';
-					position: absolute;
-					left: 56px;
-					top: 31px;
-					bottom: 0;
-					width: 1px;
-					background: repeating-linear-gradient(
-						to bottom,
-						#1d212d,
-						#1d212d 4px,
-						transparent 4px,
-						transparent 8px
-					);
-				}
-			}
-		}
-	}
-
-	.qb-entity-options {
-		display: flex;
-		flex-direction: row;
-		gap: 8px;
-
-		.options {
-			.query-name {
-				border-radius: 0px 2px 2px 0px !important;
-				border: 1px solid rgba(242, 71, 105, 0.2) !important;
-				background: rgba(242, 71, 105, 0.1) !important;
-
-				color: var(--Sakura-400, #f56c87) !important;
-				font-family: 'Space Mono';
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				text-transform: uppercase;
-
-				&::before {
-					content: '';
-					height: 120px;
-					content: '';
-					position: absolute;
-					left: 0;
-					top: 31px;
-					bottom: 0;
-					width: 1px;
-					background: repeating-linear-gradient(
-						to bottom,
-						#1d212d,
-						#1d212d 4px,
-						transparent 4px,
-						transparent 8px
-					);
-					left: 15px;
-				}
-			}
-
-			.formula-name {
-				border-radius: 0px 2px 2px 0px;
-				border: 1px solid rgba(173, 127, 88, 0.2);
-				background: rgba(173, 127, 88, 0.1);
-
-				font-family: 'Space Mono';
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				text-transform: uppercase;
-
-				&::before {
-					content: '';
-					height: 65px;
-					content: '';
-					position: absolute;
-					left: 0;
-					top: 31px;
-					bottom: 0;
-					width: 1px;
-					background: repeating-linear-gradient(
-						to bottom,
-						#1d212d,
-						#1d212d 4px,
-						transparent 4px,
-						transparent 8px
-					);
-					left: 15px;
-				}
-			}
-		}
-
-		.query-data-source {
-			margin-left: 8px;
-
-			.ant-select-selector {
-				min-width: 120px;
-
-				border-radius: 2px;
-				border: 1px solid var(--Slate-400, #1d212d);
-				background: var(--Ink-300, #16181d);
-				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			}
-		}
-	}
-
-	.qb-search-container {
-		.metrics-select-container {
-			margin-bottom: 12px;
-		}
-	}
-
-	.qb-search-filter-container {
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		gap: 8px;
-
-		flex-wrap: wrap;
-
-		.query-search-container {
-			flex: 1;
-		}
-
-		.traces-search-filter-container {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 8px;
-
-			width: 180px;
-		}
-
-		.ant-select {
-			height: auto;
-		}
-
-		.ant-select-selector {
-			border-radius: 2px;
-			border: 1px solid var(--Slate-400, #1d212d) !important;
-			background: var(--Ink-300, #16181d) !important;
-			height: 34px !important;
-			box-sizing: border-box !important;
-		}
-
-		.ant-select-arrow {
-			color: var(--bg-vanilla-400) !important;
-		}
-	}
-
-	.query-actions-dropdown {
-		cursor: pointer;
-	}
-}
-
-.lightMode {
-	.query-builder-v2 {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-		border-top: 1px solid var(--bg-vanilla-300);
-
-		.qb-content-section {
-			.qb-elements-container {
-				.code-mirror-where-clause,
-				.query-aggregation-container,
-				.query-add-ons,
-				.metrics-aggregation-section-content {
-					&::before {
-						border-left: 6px dotted var(--bg-vanilla-300);
-					}
-
-					/* Horizontal line pointing from vertical to the item */
-					&::after {
-						background: repeating-linear-gradient(
-							to right,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-			}
-		}
-
-		.query-names-section {
-			border-left: 1px solid var(--bg-vanilla-300);
-		}
-
-		.qb-formulas-container {
-			.qb-formula {
-				.formula-container {
-					.ant-col {
-						&::before {
-							border-left: 6px dotted var(--bg-vanilla-300);
-						}
-
-						/* Horizontal line pointing from vertical to the item */
-						&::after {
-							background: repeating-linear-gradient(
-								to right,
-								var(--bg-vanilla-300),
-								var(--bg-vanilla-300) 4px,
-								transparent 4px,
-								transparent 8px
-							);
-						}
-					}
-				}
-			}
-		}
-
-		.qb-footer {
-			.qb-footer-container {
-				.qb-add-new-query {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-			}
-		}
-
-		.qb-entity-options {
-			.options {
-				.query-name {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-
-				.formula-name {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-						left: 15px;
-					}
-				}
-			}
-
-			.query-data-source {
-				.ant-select-selector {
-					border: 1px solid var(--bg-vanilla-300) !important;
-					background: var(--bg-vanilla-100) !important;
-					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-				}
-			}
-		}
-
-		.qb-search-filter-container {
-			.ant-select-selector {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-			}
-
-			.ant-select-arrow {
-				color: var(--bg-vanilla-400) !important;
-			}
-		}
-	}
-}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,185 +0,0 @@
-import './QueryBuilderV2.styles.scss';
-
-import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
-import { Formula } from 'container/QueryBuilder/components/Formula';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo, useEffect, useMemo, useRef } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
-import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
-import { QueryV2 } from './QueryV2/QueryV2';
-
-export const QueryBuilderV2 = memo(function QueryBuilderV2({
-	config,
-	panelType: newPanelType,
-	filterConfigs = {},
-	queryComponents,
-	isListViewPanel = false,
-	showOnlyWhereClause = false,
-	version,
-}: QueryBuilderProps): JSX.Element {
-	const {
-		currentQuery,
-		addNewBuilderQuery,
-		addNewFormula,
-		handleSetConfig,
-		panelType,
-		initialDataSource,
-	} = useQueryBuilder();
-
-	const containerRef = useRef(null);
-
-	const currentDataSource = useMemo(
-		() =>
-			(config && config.queryVariant === 'static' && config.initialDataSource) ||
-			null,
-		[config],
-	);
-
-	useEffect(() => {
-		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
-			if (newPanelType === PANEL_TYPES.BAR) {
-				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
-				return;
-			}
-			handleSetConfig(newPanelType, currentDataSource);
-		}
-	}, [
-		handleSetConfig,
-		panelType,
-		initialDataSource,
-		currentDataSource,
-		newPanelType,
-	]);
-
-	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: true, isDisabled: true },
-			having: { isHidden: true, isDisabled: true },
-			filters: {
-				customKey: 'body',
-				customOp: OPERATORS.CONTAINS,
-			},
-		};
-
-		return config;
-	}, []);
-
-	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: true, isDisabled: true },
-			having: { isHidden: true, isDisabled: true },
-			limit: { isHidden: true, isDisabled: true },
-			filters: {
-				customKey: 'body',
-				customOp: OPERATORS.CONTAINS,
-			},
-		};
-
-		return config;
-	}, []);
-
-	const queryFilterConfigs = useMemo(() => {
-		if (isListViewPanel) {
-			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
-				? listViewTracesFilterConfigs
-				: listViewLogFilterConfigs;
-		}
-
-		return filterConfigs;
-	}, [
-		isListViewPanel,
-		filterConfigs,
-		currentQuery.builder.queryData,
-		listViewLogFilterConfigs,
-		listViewTracesFilterConfigs,
-	]);
-
-	return (
-		<QueryBuilderV2Provider>
-			<div className="query-builder-v2">
-				<div className="qb-content-container">
-					{isListViewPanel && (
-						<QueryV2
-							ref={containerRef}
-							key={currentQuery.builder.queryData[0].queryName}
-							index={0}
-							query={currentQuery.builder.queryData[0]}
-							filterConfigs={queryFilterConfigs}
-							queryComponents={queryComponents}
-							version={version}
-							isAvailableToDisable={false}
-							queryVariant={config?.queryVariant || 'dropdown'}
-							showOnlyWhereClause={showOnlyWhereClause}
-							isListViewPanel={isListViewPanel}
-						/>
-					)}
-
-					{!isListViewPanel &&
-						currentQuery.builder.queryData.map((query, index) => (
-							<QueryV2
-								ref={containerRef}
-								key={query.queryName}
-								index={index}
-								query={query}
-								filterConfigs={queryFilterConfigs}
-								queryComponents={queryComponents}
-								version={version}
-								isAvailableToDisable={false}
-								queryVariant={config?.queryVariant || 'dropdown'}
-								showOnlyWhereClause={showOnlyWhereClause}
-								isListViewPanel={isListViewPanel}
-							/>
-						))}
-
-					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
-						<div className="qb-formulas-container">
-							{currentQuery.builder.queryFormulas.map((formula, index) => {
-								const query =
-									currentQuery.builder.queryData[index] ||
-									currentQuery.builder.queryData[0];
-
-								return (
-									<div key={formula.queryName} className="qb-formula">
-										<Formula
-											filterConfigs={filterConfigs}
-											query={query}
-											formula={formula}
-											index={index}
-											isAdditionalFilterEnable={false}
-										/>
-									</div>
-								);
-							})}
-						</div>
-					)}
-
-					{!showOnlyWhereClause && !isListViewPanel && (
-						<QueryFooter
-							addNewBuilderQuery={addNewBuilderQuery}
-							addNewFormula={addNewFormula}
-						/>
-					)}
-				</div>
-
-				{!showOnlyWhereClause && !isListViewPanel && (
-					<div className="query-names-section">
-						{currentQuery.builder.queryData.map((query) => (
-							<div key={query.queryName} className="query-name">
-								{query.queryName}
-							</div>
-						))}
-
-						{currentQuery.builder.queryFormulas.map((formula) => (
-							<div key={formula.queryName} className="formula-name">
-								{formula.queryName}
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-		</QueryBuilderV2Provider>
-	);
-});

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -1,62 +0,0 @@
-import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
-
-// Types for the context state
-export type AggregationOption = { func: string; arg: string };
-
-interface QueryBuilderV2ContextType {
-	searchText: string;
-	setSearchText: (text: string) => void;
-	aggregationOptions: AggregationOption[];
-	setAggregationOptions: (options: AggregationOption[]) => void;
-	aggregationInterval: string;
-	setAggregationInterval: (interval: string) => void;
-	queryAddValues: any; // Replace 'any' with a more specific type if available
-	setQueryAddValues: (values: any) => void;
-}
-
-const QueryBuilderV2Context = createContext<
-	QueryBuilderV2ContextType | undefined
->(undefined);
-
-export function QueryBuilderV2Provider({
-	children,
-}: {
-	children: ReactNode;
-}): JSX.Element {
-	const [searchText, setSearchText] = useState('');
-	const [aggregationOptions, setAggregationOptions] = useState<
-		AggregationOption[]
-	>([]);
-	const [aggregationInterval, setAggregationInterval] = useState('');
-	const [queryAddValues, setQueryAddValues] = useState<any>(null); // Replace 'any' if you have a type
-
-	return (
-		<QueryBuilderV2Context.Provider
-			value={useMemo(
-				() => ({
-					searchText,
-					setSearchText,
-					aggregationOptions,
-					setAggregationOptions,
-					aggregationInterval,
-					setAggregationInterval,
-					queryAddValues,
-					setQueryAddValues,
-				}),
-				[searchText, aggregationOptions, aggregationInterval, queryAddValues],
-			)}
-		>
-			{children}
-		</QueryBuilderV2Context.Provider>
-	);
-}
-
-export const useQueryBuilderV2Context = (): QueryBuilderV2ContextType => {
-	const context = useContext(QueryBuilderV2Context);
-	if (!context) {
-		throw new Error(
-			'useQueryBuilderV2Context must be used within a QueryBuilderV2Provider',
-		);
-	}
-	return context;
-};

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

@@ -1,97 +0,0 @@
-.metrics-aggregate-section {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	margin: 4px 0;
-
-	.metrics-time-aggregation-section {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		.metrics-time-aggregation-section-title {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			color: var(--Slate-50, #62687c);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 150% */
-			letter-spacing: 0.48px;
-		}
-	}
-
-	.metrics-space-aggregation-section {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		.metrics-space-aggregation-section-title {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			color: var(--Slate-50, #62687c);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 150% */
-			letter-spacing: 0.48px;
-		}
-	}
-
-	.metrics-aggregation-section-content {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 8px;
-
-		.metrics-aggregation-section-content-item {
-			display: flex;
-			align-items: center;
-			gap: 10px;
-
-			.metrics-aggregation-section-content-item-label {
-				color: var(--Vanilla-400, #c0c1c3);
-				font-family: 'Geist Mono';
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.metrics-aggregation-section-content-item-value {
-				min-width: 320px;
-
-				.ant-select {
-					width: 100%;
-				}
-
-				.ant-select-selector {
-					border-radius: 2px;
-					border: 1.005px solid var(--Slate-400, #1d212d);
-					background: var(--Ink-300, #16181d);
-				}
-			}
-		}
-	}
-}
-
-.metrics-operators-select {
-	border-radius: 2px;
-	border: 1.005px solid var(--Slate-400, #1d212d);
-	background: var(--Ink-300, #16181d);
-
-	color: var(--Vanilla-400, #c0c1c3);
-	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

@@ -1,151 +0,0 @@
-import './MetricsAggregateSection.styles.scss';
-
-import { Tooltip } from 'antd';
-import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import SpaceAggregationOptions from 'container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions';
-import { GroupByFilter, OperatorsSelect } from 'container/QueryBuilder/filters';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { Info } from 'lucide-react';
-import { memo, useCallback, useMemo } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-const MetricsAggregateSection = memo(function MetricsAggregateSection({
-	query,
-	index,
-	version,
-	panelType,
-}: {
-	query: IBuilderQuery;
-	index: number;
-	version: string;
-	panelType: PANEL_TYPES | null;
-}): JSX.Element {
-	const {
-		operators,
-		spaceAggregationOptions,
-		handleChangeQueryData,
-		handleChangeOperator,
-		handleSpaceAggregationChange,
-	} = useQueryOperations({
-		index,
-		query,
-		entityVersion: version,
-	});
-
-	const handleChangeGroupByKeys = useCallback(
-		(value: IBuilderQuery['groupBy']) => {
-			handleChangeQueryData('groupBy', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeAggregateEvery = useCallback(
-		(value: string) => {
-			handleChangeQueryData('stepInterval', Number(value));
-		},
-		[handleChangeQueryData],
-	);
-
-	const showAggregationInterval = useMemo(() => {
-		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
-		if (panelType === PANEL_TYPES.VALUE) {
-			return false;
-		}
-
-		return true;
-	}, [panelType]);
-
-	const disableOperatorSelector =
-		!query?.aggregateAttribute.key || query?.aggregateAttribute.key === '';
-
-	return (
-		<div className="metrics-aggregate-section">
-			<div className="metrics-time-aggregation-section">
-				<div className="metrics-time-aggregation-section-title">
-					AGGREGATE BY TIME{' '}
-					<Tooltip title="AGGREGATE BY TIME">
-						<Info size={12} />
-					</Tooltip>
-				</div>
-
-				<div className="metrics-aggregation-section-content">
-					<div className="metrics-aggregation-section-content-item">
-						<div className="metrics-aggregation-section-content-item-label">
-							Align with
-						</div>
-
-						<div className="metrics-aggregation-section-content-item-value">
-							<OperatorsSelect
-								value={query.aggregateOperator}
-								onChange={handleChangeOperator}
-								operators={operators}
-								className="metrics-operators-select"
-							/>
-						</div>
-					</div>
-
-					{showAggregationInterval && (
-						<div className="metrics-aggregation-section-content-item">
-							<div className="metrics-aggregation-section-content-item-label">
-								aggregated every
-							</div>
-
-							<div className="metrics-aggregation-section-content-item-value">
-								<InputWithLabel
-									onChange={handleChangeAggregateEvery}
-									label="Seconds"
-									placeholder="Enter a number"
-									labelAfter
-									initialValue={query?.stepInterval ?? undefined}
-								/>
-							</div>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="metrics-space-aggregation-section">
-				<div className="metrics-space-aggregation-section-title">
-					AGGREGATE LABELS
-					<Tooltip title="AGGREGATE LABELS">
-						<Info size={12} />
-					</Tooltip>
-				</div>
-
-				<div className="metrics-aggregation-section-content">
-					<div className="metrics-aggregation-section-content-item">
-						<div className="metrics-aggregation-section-content-item-value space-aggregation-select">
-							<SpaceAggregationOptions
-								panelType={panelType}
-								key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
-								aggregatorAttributeType={
-									query?.aggregateAttribute.type as ATTRIBUTE_TYPES
-								}
-								selectedValue={query.spaceAggregation}
-								disabled={disableOperatorSelector}
-								onSelect={handleSpaceAggregationChange}
-								operators={spaceAggregationOptions}
-								qbVersion="v3"
-							/>
-						</div>
-					</div>
-
-					<div className="metrics-aggregation-section-content-item">
-						<div className="metrics-aggregation-section-content-item-label">by</div>
-
-						<div className="metrics-aggregation-section-content-item-value">
-							<GroupByFilter
-								disabled={!query.aggregateAttribute.key}
-								query={query}
-								onChange={handleChangeGroupByKeys}
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-});
-
-export default MetricsAggregateSection;

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

@@ -1,42 +0,0 @@
-.metrics-select-container {
-	margin-bottom: 8px;
-
-	.ant-select-selector {
-		width: 100%;
-		border-radius: 2px;
-		border: 1px solid #1d212d !important;
-		background: #16181d;
-		color: #fff;
-		font-family: 'Geist Mono';
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		min-height: 36px;
-	}
-
-	.ant-select-dropdown {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-
-		.ant-select-item {
-			color: #fff;
-			font-family: 'Geist Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-
-			&:hover {
-				background: rgba(171, 189, 255, 0.04) !important;
-			}
-		}
-	}
-}

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

@@ -1,28 +0,0 @@
-import './MetricsSelect.styles.scss';
-
-import { AggregatorFilter } from 'container/QueryBuilder/filters';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { memo } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-export const MetricsSelect = memo(function MetricsSelect({
-	query,
-	index,
-	version,
-}: {
-	query: IBuilderQuery;
-	index: number;
-	version: string;
-}): JSX.Element {
-	const { handleChangeAggregatorAttribute } = useQueryOperations({
-		index,
-		query,
-		entityVersion: version,
-	});
-
-	return (
-		<div className="metrics-select-container">
-			<AggregatorFilter onChange={handleChangeAggregatorAttribute} query={query} />
-		</div>
-	);
-});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -1,359 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable sonarjs/cognitive-complexity */
-import {
-	autocompletion,
-	closeCompletion,
-	Completion,
-	CompletionContext,
-	completionKeymap,
-	CompletionResult,
-	startCompletion,
-} from '@codemirror/autocomplete';
-import { javascript } from '@codemirror/lang-javascript';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
-import { Button } from 'antd';
-import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
-import { X } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-const havingOperators = [
-	{
-		label: '=',
-		value: '=',
-	},
-	{
-		label: '!=',
-		value: '!=',
-	},
-	{
-		label: '>',
-		value: '>',
-	},
-	{
-		label: '<',
-		value: '<',
-	},
-	{
-		label: '>=',
-		value: '>=',
-	},
-	{
-		label: '<=',
-		value: '<=',
-	},
-	{
-		label: 'IN',
-		value: 'IN',
-	},
-	{
-		label: 'NOT_IN',
-		value: 'NOT_IN',
-	},
-];
-
-// Add common value suggestions
-const commonValues = [
-	{ label: '0', value: '0 ' },
-	{ label: '1', value: '1 ' },
-	{ label: '5', value: '5 ' },
-	{ label: '10', value: '10 ' },
-	{ label: '50', value: '50 ' },
-	{ label: '100', value: '100 ' },
-	{ label: '1000', value: '1000 ' },
-];
-
-const conjunctions = [
-	{ label: 'AND', value: 'AND ' },
-	{ label: 'OR', value: 'OR ' },
-];
-
-function HavingFilter({
-	onClose,
-	onChange,
-	queryData,
-}: {
-	onClose: () => void;
-	onChange: (value: string) => void;
-	queryData: IBuilderQuery;
-}): JSX.Element {
-	const { aggregationOptions } = useQueryBuilderV2Context();
-	const [input, setInput] = useState(
-		queryData?.havingExpression?.expression || '',
-	);
-	const [isFocused, setIsFocused] = useState(false);
-
-	const editorRef = useRef<EditorView | null>(null);
-
-	const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
-
-	const handleChange = (value: string): void => {
-		setInput(value);
-		onChange(value);
-	};
-
-	useEffect(() => {
-		if (isFocused && editorRef.current && options.length > 0) {
-			startCompletion(editorRef.current);
-		}
-	}, [isFocused, options]);
-
-	// Update options when aggregation options change
-	useEffect(() => {
-		const newOptions = [];
-		for (let i = 0; i < aggregationOptions.length; i++) {
-			const opt = aggregationOptions[i];
-			for (let j = 0; j < havingOperators.length; j++) {
-				const operator = havingOperators[j];
-				newOptions.push({
-					label: `${opt.func}(${opt.arg}) ${operator.label}`,
-					value: `${opt.func}(${opt.arg}) ${operator.label} `,
-					apply: (
-						view: EditorView,
-						completion: { label: string; value: string },
-						from: number,
-						to: number,
-					): void => {
-						view.dispatch({
-							changes: { from, to, insert: completion.value },
-							selection: { anchor: from + completion.value.length },
-						});
-						// Trigger value suggestions immediately after operator
-						setTimeout(() => {
-							startCompletion(view);
-						}, 0);
-					},
-				});
-			}
-		}
-		setOptions(newOptions);
-	}, [aggregationOptions]);
-
-	// Helper to check if a string is a number
-	const isNumber = (token: string): boolean => /^-?\d+(\.\d+)?$/.test(token);
-
-	// Helper to check if we're after an operator
-	const isAfterOperator = (tokens: string[]): boolean => {
-		if (tokens.length === 0) return false;
-		const lastToken = tokens[tokens.length - 1];
-		// Check if the last token is exactly an operator or ends with an operator and space
-		return havingOperators.some((op) => {
-			const opWithSpace = `${op.value} `;
-			return lastToken === op.value || lastToken.endsWith(opWithSpace);
-		});
-	};
-
-	// Helper function for applying completion with space
-	const applyCompletionWithSpace = (
-		view: EditorView,
-		completion: Completion,
-		from: number,
-		to: number,
-	): void => {
-		const insertValue =
-			typeof completion.apply === 'string' ? completion.apply : completion.label;
-		const newText = `${insertValue} `;
-		const newPos = from + newText.length;
-
-		view.dispatch({
-			changes: { from, to, insert: newText },
-			selection: { anchor: newPos, head: newPos },
-			effects: EditorView.scrollIntoView(newPos),
-		});
-	};
-
-	const havingAutocomplete = useMemo(() => {
-		// Helper functions for applying completions
-		const forceCompletion = (view: EditorView): void => {
-			setTimeout(() => {
-				if (view) {
-					startCompletion(view);
-				}
-			}, 0);
-		};
-
-		const applyValueCompletion = (
-			view: EditorView,
-			completion: Completion,
-			from: number,
-			to: number,
-		): void => {
-			applyCompletionWithSpace(view, completion, from, to);
-			forceCompletion(view);
-		};
-
-		const applyOperatorCompletion = (
-			view: EditorView,
-			completion: Completion,
-			from: number,
-			to: number,
-		): void => {
-			const insertValue =
-				typeof completion.apply === 'string' ? completion.apply : completion.label;
-			const insertWithSpace = `${insertValue} `;
-			view.dispatch({
-				changes: { from, to, insert: insertWithSpace },
-				selection: { anchor: from + insertWithSpace.length },
-			});
-			forceCompletion(view);
-		};
-
-		return autocompletion({
-			override: [
-				(context: CompletionContext): CompletionResult | null => {
-					const text = context.state.sliceDoc(0, context.pos);
-					const trimmedText = text.trim();
-					const tokens = trimmedText.split(/\s+/).filter(Boolean);
-
-					// Handle empty state when no aggregation options are available
-					if (options.length === 0) {
-						return {
-							from: context.pos,
-							options: [
-								{
-									label:
-										'No aggregation functions available. Please add aggregation functions first.',
-									type: 'text',
-									apply: (): boolean => true,
-								},
-							],
-						};
-					}
-
-					// Show value suggestions after operator
-					if (isAfterOperator(tokens)) {
-						return {
-							from: context.pos,
-							options: [
-								...commonValues.map((value) => ({
-									...value,
-									apply: applyValueCompletion,
-								})),
-								{
-									label: 'Enter a custom number value',
-									type: 'text',
-									apply: applyValueCompletion,
-								},
-							],
-						};
-					}
-
-					// Suggest key/operator pairs and ( for grouping
-					if (
-						tokens.length === 0 ||
-						conjunctions.some((c) => tokens[tokens.length - 1] === c.value.trim()) ||
-						tokens[tokens.length - 1] === '('
-					) {
-						return {
-							from: context.pos,
-							options: options.map((opt) => ({
-								...opt,
-								apply: applyOperatorCompletion,
-							})),
-						};
-					}
-
-					// Show suggestions when typing
-					if (tokens.length > 0) {
-						const lastToken = tokens[tokens.length - 1];
-						const filteredOptions = options.filter((opt) =>
-							opt.label.toLowerCase().includes(lastToken.toLowerCase()),
-						);
-						if (filteredOptions.length > 0) {
-							return {
-								from: context.pos - lastToken.length,
-								options: filteredOptions.map((opt) => ({
-									...opt,
-									apply: applyOperatorCompletion,
-								})),
-							};
-						}
-					}
-
-					// Suggest conjunctions after a value and a space
-					if (
-						tokens.length > 0 &&
-						(isNumber(tokens[tokens.length - 1]) ||
-							tokens[tokens.length - 1] === ')') &&
-						text.endsWith(' ')
-					) {
-						return {
-							from: context.pos,
-							options: conjunctions.map((conj) => ({
-								...conj,
-								apply: applyValueCompletion,
-							})),
-						};
-					}
-
-					// Show all options if no other condition matches
-					return {
-						from: context.pos,
-						options: options.map((opt) => ({
-							...opt,
-							apply: applyOperatorCompletion,
-						})),
-					};
-				},
-			],
-			defaultKeymap: true,
-			closeOnBlur: true,
-			maxRenderedOptions: 200,
-			activateOnTyping: true,
-		});
-	}, [options]);
-
-	return (
-		<div className="having-filter-container">
-			<div className="having-filter-select-container">
-				<CodeMirror
-					value={input}
-					onChange={handleChange}
-					theme={copilot}
-					className="having-filter-select-editor"
-					width="100%"
-					extensions={[
-						havingAutocomplete,
-						javascript({ jsx: false, typescript: false }),
-						keymap.of([
-							...completionKeymap,
-							{
-								key: 'Escape',
-								run: closeCompletion,
-							},
-						]),
-					]}
-					placeholder="Type Having query like count() > 10 ..."
-					basicSetup={{
-						lineNumbers: false,
-						autocompletion: true,
-						completionKeymap: true,
-					}}
-					onCreateEditor={(view: EditorView): void => {
-						editorRef.current = view;
-					}}
-					onFocus={(): void => {
-						setIsFocused(true);
-						if (editorRef.current) {
-							startCompletion(editorRef.current);
-						}
-					}}
-					onBlur={(): void => {
-						setIsFocused(false);
-						if (editorRef.current) {
-							closeCompletion(editorRef.current);
-						}
-					}}
-				/>
-				<Button
-					className="close-btn periscope-btn ghost"
-					icon={<X size={16} />}
-					onClick={onClose}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default HavingFilter;

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

@@ -1,377 +0,0 @@
-.add-ons-list {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	.add-ons-tabs {
-		display: flex;
-		flex-wrap: wrap;
-
-		.add-on-tab-title {
-			display: flex;
-			gap: var(--margin-2);
-			align-items: center;
-			justify-content: center;
-			font-size: var(--font-size-xs);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-
-			color: var(--Vanilla-400, #c0c1c3);
-		}
-
-		.tab {
-			border: 1px solid var(--bg-slate-400);
-			border-left: none;
-			min-width: 120px;
-			height: 36px;
-			line-height: 36px;
-
-			&:first-child {
-				border-left: 1px solid var(--bg-slate-400);
-			}
-		}
-
-		.tab::before {
-			background: var(--bg-slate-400);
-		}
-
-		.selected-view {
-			color: var(--text-robin-500);
-			border: 1px solid var(--bg-slate-400);
-
-			display: none;
-		}
-
-		.selected-view::before {
-			background: var(--bg-slate-400);
-		}
-	}
-
-	.compass-button {
-		width: 30px;
-		height: 30px;
-
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-	}
-}
-
-.having-filter-container {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	.having-filter-select-container {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-
-		.having-filter-select-editor {
-			border-radius: 2px;
-			flex: 1;
-			width: calc(100% - 40px);
-
-			.cm-content {
-				padding: 0;
-			}
-
-			.cm-editor {
-				border-radius: 2px;
-				background-color: transparent !important;
-				position: relative !important;
-
-				&:focus-within {
-					border-color: var(--bg-robin-500);
-				}
-
-				&.cm-focused {
-					outline: none !important;
-				}
-
-				.cm-content {
-					border-radius: 2px;
-					border: 1px solid var(--Slate-400, #1d212d);
-					border-top-right-radius: 0px;
-					border-bottom-right-radius: 0px;
-					padding: 0px !important;
-					background-color: #121317 !important;
-
-					&:focus-within {
-						border-color: var(--bg-ink-200);
-					}
-				}
-
-				.cm-tooltip-autocomplete {
-					background: var(--bg-ink-300) !important;
-					color: var(--bg-ink-500) !important;
-					border-radius: 2px !important;
-					font-size: 12px !important;
-					font-weight: 500 !important;
-					margin-top: -2px !important;
-					width: 100% !important;
-					position: absolute !important;
-					top: 38px !important;
-					left: 0px !important;
-
-					border-radius: 4px;
-					border: 1px solid var(--bg-slate-200, #1d212d);
-					border-top: none !important;
-					border-top-left-radius: 0px !important;
-					border-top-right-radius: 0px !important;
-					background: linear-gradient(
-						139deg,
-						rgba(18, 19, 23, 0.8) 0%,
-						rgba(18, 19, 23, 0.9) 98.68%
-					) !important;
-					backdrop-filter: blur(20px);
-					box-sizing: border-box;
-					font-family: 'Space Mono', monospace !important;
-
-					ul {
-						width: 100% !important;
-						max-width: 100% !important;
-						font-family: 'Space Mono', monospace !important;
-						min-height: 200px !important;
-
-						&::-webkit-scrollbar {
-							width: 0.3rem;
-						}
-						&::-webkit-scrollbar-corner {
-							background: transparent;
-						}
-						&::-webkit-scrollbar-thumb {
-							background: rgb(136, 136, 136);
-							border-radius: 0.625rem;
-						}
-						&::-webkit-scrollbar-track {
-							background: transparent;
-						}
-
-						li {
-							width: 100% !important;
-							max-width: 100% !important;
-							line-height: 36px !important;
-							height: 36px !important;
-							padding: 4px 8px !important;
-
-							display: flex !important;
-							align-items: center !important;
-							gap: 8px !important;
-							box-sizing: border-box;
-							overflow: hidden;
-
-							font-family: 'Space Mono', monospace !important;
-							color: var(--bg-vanilla-100) !important;
-
-							.cm-completionIcon {
-								display: none !important;
-							}
-
-							&[aria-selected='true'] {
-								// background-color: rgba(78, 116, 248, 0.7) !important;
-								background: rgba(171, 189, 255, 0.04) !important;
-							}
-						}
-					}
-				}
-
-				.cm-gutters {
-					display: none !important;
-				}
-
-				.cm-scroller {
-					scrollbar-width: none;
-
-					&::-webkit-scrollbar {
-						display: none;
-					}
-
-					&::-webkit-scrollbar-thumb {
-						display: none;
-					}
-
-					&::-webkit-scrollbar-track {
-						display: none;
-					}
-
-					&::-webkit-scrollbar-corner {
-						display: none;
-					}
-				}
-
-				.cm-line {
-					line-height: 36px !important;
-					font-family: 'Space Mono', monospace !important;
-					background-color: #121317 !important;
-
-					::-moz-selection {
-						background: var(--bg-ink-100) !important;
-						opacity: 0.5 !important;
-					}
-
-					::selection {
-						background: var(--bg-ink-100) !important;
-						opacity: 0.5 !important;
-					}
-
-					.cm-function {
-						color: var(--bg-robin-500) !important;
-					}
-
-					.chip-decorator {
-						background: rgba(36, 40, 52, 1) !important;
-						color: var(--bg-vanilla-100) !important;
-						border-radius: 4px;
-						padding: 2px 4px;
-						margin-right: 4px;
-					}
-				}
-
-				.cm-selectionBackground {
-					background: var(--bg-ink-100) !important;
-					opacity: 0.5 !important;
-				}
-			}
-		}
-
-		.close-btn {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			height: 38px;
-			width: 38px;
-
-			border-left: transparent;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-	}
-}
-
-.selected-add-ons-content {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
-	gap: 8px;
-	padding-bottom: 8px;
-	position: relative;
-
-	.add-on-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		max-width: 100%;
-		min-width: 100%;
-		min-width: 420px;
-
-		box-sizing: border-box;
-		position: relative;
-	}
-}
-
-.lightMode {
-	.add-ons-list {
-		.add-ons-tabs {
-			.add-on-tab-title {
-				color: var(--bg-ink-500) !important;
-			}
-
-			.tab {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-
-				&:first-child {
-					border-left: 1px solid var(--bg-vanilla-300) !important;
-				}
-			}
-
-			.tab::before {
-				background: var(--bg-vanilla-300) !important;
-			}
-
-			.selected-view {
-				color: var(--bg-robin-500) !important;
-				border: 1px solid var(--bg-vanilla-300) !important;
-			}
-
-			.selected-view::before {
-				background: var(--bg-vanilla-300) !important;
-			}
-		}
-
-		.compass-button {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-	}
-
-	.having-filter-container {
-		.having-filter-select-container {
-			.having-filter-select-editor {
-				.cm-editor {
-					&:focus-within {
-						border-color: var(--bg-vanilla-300) !important;
-					}
-
-					.cm-content {
-						border: 1px solid var(--bg-vanilla-300) !important;
-						background: var(--bg-vanilla-100) !important;
-
-						&:focus-within {
-							border-color: var(--bg-vanilla-300) !important;
-						}
-					}
-
-					.cm-tooltip-autocomplete {
-						background: var(--bg-vanilla-100) !important;
-						border: 1px solid var(--bg-vanilla-300) !important;
-						color: var(--bg-ink-500) !important;
-
-						ul {
-							li {
-								&:hover {
-									background: var(--bg-vanilla-300) !important;
-								}
-
-								&[aria-selected='true'] {
-									color: var(--bg-ink-500) !important;
-									background: var(--bg-vanilla-300) !important;
-								}
-							}
-						}
-					}
-
-					.cm-line {
-						background-color: var(--bg-vanilla-100) !important;
-
-						::-moz-selection {
-							background: var(--bg-vanilla-100) !important;
-						}
-
-						::selection {
-							background: var(--bg-ink-100) !important;
-						}
-
-						.chip-decorator {
-							background: var(--bg-robin-100) !important;
-							color: var(--bg-ink-400) !important;
-						}
-					}
-
-					.cm-selectionBackground {
-						background: var(--bg-vanilla-100) !important;
-					}
-				}
-			}
-
-			.close-btn {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-}

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

@@ -1,340 +0,0 @@
-import './QueryAddOns.styles.scss';
-
-import { Button, Radio, RadioChangeEvent } from 'antd';
-import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
-import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
-import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { isEmpty } from 'lodash-es';
-import { BarChart2, ScrollText, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import HavingFilter from './HavingFilter/HavingFilter';
-
-interface AddOn {
-	icon: React.ReactNode;
-	label: string;
-	key: string;
-}
-
-const ADD_ONS_KEYS = {
-	GROUP_BY: 'group_by',
-	HAVING: 'having',
-	ORDER_BY: 'order_by',
-	LIMIT: 'limit',
-	LEGEND_FORMAT: 'legend_format',
-};
-
-const ADD_ONS = [
-	{
-		icon: <BarChart2 size={14} />,
-		label: 'Group By',
-		key: 'group_by',
-	},
-	{
-		icon: <ScrollText size={14} />,
-		label: 'Having',
-		key: 'having',
-	},
-	{
-		icon: <ScrollText size={14} />,
-		label: 'Order By',
-		key: 'order_by',
-	},
-	{
-		icon: <ScrollText size={14} />,
-		label: 'Limit',
-		key: 'limit',
-	},
-	{
-		icon: <ScrollText size={14} />,
-		label: 'Legend format',
-		key: 'legend_format',
-	},
-];
-
-const REDUCE_TO = {
-	icon: <ScrollText size={14} />,
-	label: 'Reduce to',
-	key: 'reduce_to',
-};
-
-function QueryAddOns({
-	query,
-	version,
-	isListViewPanel,
-	showReduceTo,
-	panelType,
-	index,
-}: {
-	query: IBuilderQuery;
-	version: string;
-	isListViewPanel: boolean;
-	showReduceTo: boolean;
-	panelType: PANEL_TYPES | null;
-	index: number;
-}): JSX.Element {
-	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
-
-	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
-
-	const { handleChangeQueryData } = useQueryOperations({
-		index,
-		query,
-		entityVersion: '',
-	});
-
-	useEffect(() => {
-		if (isListViewPanel) {
-			setAddOns([]);
-
-			setSelectedViews([
-				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
-			]);
-
-			return;
-		}
-
-		let filteredAddOns: AddOn[];
-		if (panelType === PANEL_TYPES.VALUE) {
-			// Filter out all add-ons except legend format
-			filteredAddOns = ADD_ONS.filter(
-				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
-			);
-		} else {
-			filteredAddOns = Object.values(ADD_ONS);
-
-			// Filter out group_by for metrics data source
-			if (query.dataSource === DataSource.METRICS) {
-				filteredAddOns = filteredAddOns.filter(
-					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
-				);
-			}
-		}
-
-		// add reduce to if showReduceTo is true
-		if (showReduceTo) {
-			filteredAddOns = [...filteredAddOns, REDUCE_TO];
-		}
-
-		setAddOns(filteredAddOns);
-
-		// Filter selectedViews to only include add-ons present in filteredAddOns
-		setSelectedViews((prevSelectedViews) =>
-			prevSelectedViews.filter((view) =>
-				filteredAddOns.some((addOn) => addOn.key === view.key),
-			),
-		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query.dataSource]);
-
-	const handleOptionClick = (e: RadioChangeEvent): void => {
-		if (selectedViews.find((view) => view.key === e.target.value.key)) {
-			setSelectedViews(
-				selectedViews.filter((view) => view.key !== e.target.value.key),
-			);
-		} else {
-			setSelectedViews([...selectedViews, e.target.value]);
-		}
-	};
-
-	const handleChangeGroupByKeys = useCallback(
-		(value: IBuilderQuery['groupBy']) => {
-			handleChangeQueryData('groupBy', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeOrderByKeys = useCallback(
-		(value: IBuilderQuery['orderBy']) => {
-			handleChangeQueryData('orderBy', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeReduceTo = useCallback(
-		(value: IBuilderQuery['reduceTo']) => {
-			handleChangeQueryData('reduceTo', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleRemoveView = useCallback(
-		(key: string): void => {
-			setSelectedViews(selectedViews.filter((view) => view.key !== key));
-		},
-		[selectedViews],
-	);
-
-	const handleChangeQueryLegend = useCallback(
-		(value: string) => {
-			handleChangeQueryData('legend', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeLimit = useCallback(
-		(value: string) => {
-			handleChangeQueryData('limit', Number(value) || null);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeHaving = useCallback(
-		(value: string) => {
-			handleChangeQueryData('havingExpression', {
-				expression: value,
-			});
-		},
-		[handleChangeQueryData],
-	);
-
-	return (
-		<div className="query-add-ons">
-			{selectedViews.length > 0 && (
-				<div className="selected-add-ons-content">
-					{selectedViews.find((view) => view.key === 'group_by') && (
-						<div className="add-on-content">
-							<div className="periscope-input-with-label">
-								<div className="label">Group By</div>
-								<div className="input">
-									<GroupByFilter
-										disabled={
-											query.dataSource === DataSource.METRICS &&
-											!query.aggregateAttribute.key
-										}
-										query={query}
-										onChange={handleChangeGroupByKeys}
-									/>
-								</div>
-								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<X size={16} />}
-									onClick={(): void => handleRemoveView('group_by')}
-								/>
-							</div>
-						</div>
-					)}
-					{selectedViews.find((view) => view.key === 'having') && (
-						<div className="add-on-content">
-							<div className="periscope-input-with-label">
-								<div className="label">Having</div>
-								<div className="input">
-									<HavingFilter
-										onClose={(): void => {
-											setSelectedViews(
-												selectedViews.filter((view) => view.key !== 'having'),
-											);
-										}}
-										onChange={handleChangeHaving}
-										queryData={query}
-									/>
-								</div>
-							</div>
-						</div>
-					)}
-					{selectedViews.find((view) => view.key === 'limit') && (
-						<div className="add-on-content">
-							<InputWithLabel
-								label="Limit"
-								onChange={handleChangeLimit}
-								initialValue={query?.limit ?? undefined}
-								placeholder="Enter limit"
-								onClose={(): void => {
-									setSelectedViews(selectedViews.filter((view) => view.key !== 'limit'));
-								}}
-							/>
-						</div>
-					)}
-					{selectedViews.find((view) => view.key === 'order_by') && (
-						<div className="add-on-content">
-							<div className="periscope-input-with-label">
-								<div className="label">Order By</div>
-								<div className="input">
-									<OrderByFilter
-										entityVersion={version}
-										query={query}
-										onChange={handleChangeOrderByKeys}
-										isListViewPanel={isListViewPanel}
-										isNewQueryV2
-									/>
-								</div>
-								{!isListViewPanel && (
-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<X size={16} />}
-										onClick={(): void => handleRemoveView('order_by')}
-									/>
-								)}
-							</div>
-						</div>
-					)}
-
-					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
-						<div className="add-on-content">
-							<div className="periscope-input-with-label">
-								<div className="label">Reduce to</div>
-								<div className="input">
-									<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
-								</div>
-
-								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<X size={16} />}
-									onClick={(): void => handleRemoveView('reduce_to')}
-								/>
-							</div>
-						</div>
-					)}
-
-					{selectedViews.find((view) => view.key === 'legend_format') && (
-						<div className="add-on-content">
-							<InputWithLabel
-								label="Legend format"
-								placeholder="Write legend format"
-								onChange={handleChangeQueryLegend}
-								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-								onClose={(): void => {
-									setSelectedViews(
-										selectedViews.filter((view) => view.key !== 'legend_format'),
-									);
-								}}
-							/>
-						</div>
-					)}
-				</div>
-			)}
-
-			<div className="add-ons-list">
-				<Radio.Group
-					className="add-ons-tabs"
-					onChange={handleOptionClick}
-					value={selectedViews}
-				>
-					{addOns.map((addOn) => (
-						<Radio.Button
-							key={addOn.label}
-							className={
-								selectedViews.find((view) => view.key === addOn.key)
-									? 'selected-view tab'
-									: 'tab'
-							}
-							value={addOn}
-						>
-							<div className="add-on-tab-title">
-								{addOn.icon}
-								{addOn.label}
-							</div>
-						</Radio.Button>
-					))}
-				</Radio.Group>
-			</div>
-		</div>
-	);
-}
-
-export default QueryAddOns;

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

@@ -1,300 +0,0 @@
-.query-aggregation-container {
-	display: block;
-	position: relative;
-
-	.aggregation-container {
-		display: flex;
-		flex-direction: row;
-		gap: 8px;
-		align-items: flex-start;
-		flex-wrap: wrap;
-
-		.query-aggregation-select-container {
-			flex: 1;
-			min-width: 400px;
-		}
-
-		.query-aggregation-options-input {
-			width: 100%;
-			height: 36px;
-			line-height: 36px;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-			font-family: 'Space Mono', monospace !important;
-
-			&::placeholder {
-				color: var(--bg-vanilla-100);
-				opacity: 0.5;
-			}
-		}
-
-		.query-aggregation-interval {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 8px;
-			max-width: 360px;
-
-			.query-aggregation-interval-input-container {
-				.query-aggregation-interval-input {
-					input {
-						max-width: 120px;
-					}
-				}
-			}
-		}
-
-		.query-aggregation-select-container {
-			width: 100%;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			flex: 1;
-			min-width: 400px;
-
-			.query-aggregation-select-editor {
-				border-radius: 2px;
-				flex: 1;
-				min-width: 0;
-
-				.cm-content {
-					padding: 0;
-				}
-
-				.cm-editor {
-					border-radius: 2px;
-					background-color: transparent !important;
-					position: relative !important;
-
-					&.cm-focused {
-						outline: none !important;
-					}
-
-					&:focus-within {
-						border-color: var(--bg-robin-500);
-					}
-
-					.cm-content {
-						border-radius: 2px;
-						border: 1px solid var(--Slate-400, #1d212d);
-						border-top-right-radius: 0px;
-						border-bottom-right-radius: 0px;
-						padding: 0px !important;
-						background-color: #121317 !important;
-
-						&:focus-within {
-							border-color: var(--bg-ink-200);
-						}
-					}
-
-					.cm-tooltip-autocomplete {
-						background: var(--bg-ink-300) !important;
-						border-radius: 2px !important;
-						font-size: 12px !important;
-						font-weight: 500 !important;
-						margin-top: 8px !important;
-						min-width: 400px !important;
-						position: absolute !important;
-						left: 0px !important;
-						width: 100% !important;
-
-						border-radius: 4px;
-						border: 1px solid var(--bg-slate-200, #1d212d);
-						border-top: none !important;
-						border-top-left-radius: 0px !important;
-						border-top-right-radius: 0px !important;
-						background: linear-gradient(
-							139deg,
-							rgba(18, 19, 23, 0.8) 0%,
-							rgba(18, 19, 23, 0.9) 98.68%
-						) !important;
-						backdrop-filter: blur(20px);
-						box-sizing: border-box;
-						font-family: 'Space Mono', monospace !important;
-
-						ul {
-							width: 100% !important;
-							max-width: 100% !important;
-							font-family: 'Space Mono', monospace !important;
-							min-height: 200px !important;
-
-							&::-webkit-scrollbar {
-								width: 0.3rem;
-							}
-							&::-webkit-scrollbar-corner {
-								background: transparent;
-							}
-							&::-webkit-scrollbar-thumb {
-								background: rgb(136, 136, 136);
-								border-radius: 0.625rem;
-							}
-							&::-webkit-scrollbar-track {
-								background: transparent;
-							}
-
-							li {
-								width: 100% !important;
-								max-width: 100% !important;
-								line-height: 36px !important;
-								height: 36px !important;
-								padding: 4px 8px !important;
-
-								display: flex !important;
-								align-items: center !important;
-								gap: 8px !important;
-								box-sizing: border-box;
-								overflow: hidden;
-
-								font-family: 'Space Mono', monospace !important;
-
-								.cm-completionIcon {
-									display: none !important;
-								}
-
-								&[aria-selected='true'] {
-									// background-color: rgba(78, 116, 248, 0.7) !important;
-									background: rgba(171, 189, 255, 0.04) !important;
-								}
-							}
-						}
-					}
-
-					.cm-gutters {
-						display: none !important;
-					}
-
-					.cm-line {
-						line-height: 36px !important;
-						font-family: 'Space Mono', monospace !important;
-						background-color: #121317 !important;
-
-						::-moz-selection {
-							background: var(--bg-ink-100) !important;
-							opacity: 0.5 !important;
-						}
-
-						::selection {
-							background: var(--bg-ink-100) !important;
-							opacity: 0.5 !important;
-						}
-
-						.cm-function {
-							color: var(--bg-robin-500) !important;
-						}
-
-						.chip-decorator {
-							background: rgba(36, 40, 52, 1) !important;
-							color: var(--bg-vanilla-100) !important;
-							border-radius: 4px;
-							padding: 2px 4px;
-							margin-right: 4px;
-						}
-					}
-
-					.cm-selectionBackground {
-						background: var(--bg-ink-100) !important;
-						opacity: 0.5 !important;
-					}
-				}
-			}
-
-			.close-btn {
-				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--bg-slate-400);
-				background: var(--bg-ink-300);
-				height: 38px;
-				width: 38px;
-
-				border-left: transparent;
-				border-top-left-radius: 0px;
-				border-bottom-left-radius: 0px;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.query-aggregation-container {
-		.aggregation-container {
-			.query-aggregation-options-input {
-				border-color: var(--bg-vanilla-300) !important;
-
-				&::placeholder {
-					color: var(--bg-ink-400) !important;
-					opacity: 0.5 !important;
-				}
-			}
-
-			.query-aggregation-select-container {
-				.query-aggregation-select-editor {
-					.cm-editor {
-						.cm-content {
-							border: 1px solid var(--bg-vanilla-300) !important;
-							background: var(--bg-vanilla-100) !important;
-							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-							&:focus-within {
-								border-color: var(--bg-vanilla-300) !important;
-							}
-						}
-
-						.cm-tooltip-autocomplete {
-							background: var(--bg-vanilla-100) !important;
-							border: 1px solid var(--bg-vanilla-300) !important;
-							color: var(--bg-ink-500) !important;
-
-							ul {
-								li {
-									&:hover {
-										background-color: var(--bg-vanilla-300) !important;
-										color: var(--bg-ink-500) !important;
-									}
-
-									&[aria-selected='true'] {
-										background: var(--bg-vanilla-300) !important;
-										color: var(--bg-ink-500) !important;
-									}
-								}
-							}
-						}
-
-						.cm-line {
-							background-color: var(--bg-vanilla-100) !important;
-
-							::-moz-selection {
-								background: var(--bg-vanilla-100) !important;
-								opacity: 0.5 !important;
-							}
-
-							::selection {
-								background: var(--bg-vanilla-100) !important;
-								opacity: 0.5 !important;
-							}
-
-							.cm-function {
-								color: var(--bg-robin-500) !important;
-							}
-
-							.chip-decorator {
-								background: var(--bg-robin-500) !important;
-								color: var(--bg-ink-400) !important;
-							}
-						}
-
-						// .cm-selectionBackground {
-						// 	background: var(--bg-vanilla-100) !important;
-						// 	opacity: 0.5 !important;
-						// }
-					}
-				}
-
-				.close-btn {
-					border-color: var(--bg-vanilla-300) !important;
-					background: var(--bg-vanilla-100) !important;
-				}
-			}
-		}
-	}
-}

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

@@ -1,73 +0,0 @@
-import './QueryAggregation.styles.scss';
-
-import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useMemo } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import QueryAggregationSelect from './QueryAggregationSelect';
-
-function QueryAggregationOptions({
-	dataSource,
-	panelType,
-	onAggregationIntervalChange,
-	onChange,
-	queryData,
-}: {
-	dataSource: DataSource;
-	panelType?: string;
-	onAggregationIntervalChange: (value: number) => void;
-	onChange?: (value: string) => void;
-	queryData: IBuilderQuery;
-}): JSX.Element {
-	const showAggregationInterval = useMemo(() => {
-		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
-		if (panelType === PANEL_TYPES.VALUE) {
-			return false;
-		}
-
-		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
-			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
-		}
-
-		return true;
-	}, [dataSource, panelType]);
-
-	const handleAggregationIntervalChange = (value: string): void => {
-		onAggregationIntervalChange(Number(value));
-	};
-
-	return (
-		<div className="query-aggregation-container">
-			<div className="aggregation-container">
-				<QueryAggregationSelect onChange={onChange} queryData={queryData} />
-
-				{showAggregationInterval && (
-					<div className="query-aggregation-interval">
-						<div className="query-aggregation-interval-label">every</div>
-						<div className="query-aggregation-interval-input-container">
-							<InputWithLabel
-								initialValue={queryData.stepInterval ? queryData.stepInterval : '60'}
-								className="query-aggregation-interval-input"
-								label="Seconds"
-								placeholder="60"
-								type="number"
-								onChange={handleAggregationIntervalChange}
-								labelAfter
-								onClose={(): void => {}}
-							/>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-QueryAggregationOptions.defaultProps = {
-	panelType: null,
-	onChange: undefined,
-};
-
-export default QueryAggregationOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -1,498 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable no-cond-assign */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable class-methods-use-this */
-/* eslint-disable react/no-this-in-sfc */
-/* eslint-disable sonarjs/cognitive-complexity */
-import './QueryAggregation.styles.scss';
-
-import {
-	autocompletion,
-	closeCompletion,
-	Completion,
-	CompletionContext,
-	completionKeymap,
-	CompletionResult,
-	startCompletion,
-} from '@codemirror/autocomplete';
-import { javascript } from '@codemirror/lang-javascript';
-import { RangeSetBuilder } from '@codemirror/state';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import CodeMirror, {
-	Decoration,
-	EditorView,
-	keymap,
-	ViewPlugin,
-	ViewUpdate,
-} from '@uiw/react-codemirror';
-import { getAggregateAttribute } from 'api/queryBuilder/getAggregateAttribute';
-import { QueryBuilderKeys } from 'constants/queryBuilder';
-import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQuery } from 'react-query';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { TracesAggregatorOperator } from 'types/common/queryBuilder';
-
-import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
-
-const chipDecoration = Decoration.mark({
-	class: 'chip-decorator',
-});
-
-const operatorArgMeta: Record<
-	string,
-	{ acceptsArgs: boolean; multiple: boolean }
-> = {
-	[TracesAggregatorOperator.NOOP]: { acceptsArgs: false, multiple: false },
-	[TracesAggregatorOperator.COUNT]: { acceptsArgs: false, multiple: false },
-	[TracesAggregatorOperator.COUNT_DISTINCT]: {
-		acceptsArgs: true,
-		multiple: true,
-	},
-	[TracesAggregatorOperator.SUM]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.AVG]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.MAX]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.MIN]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P05]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P10]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P20]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P25]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P50]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P75]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P90]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P95]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.P99]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.RATE]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.RATE_SUM]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.RATE_AVG]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.RATE_MIN]: { acceptsArgs: true, multiple: false },
-	[TracesAggregatorOperator.RATE_MAX]: { acceptsArgs: true, multiple: false },
-};
-
-function getFunctionContextAtCursor(
-	text: string,
-	cursorPos: number,
-): string | null {
-	// Find the nearest function name to the left of the nearest unmatched '('
-	let openParenIndex = -1;
-	let funcName: string | null = null;
-	let parenStack = 0;
-	for (let i = cursorPos - 1; i >= 0; i--) {
-		if (text[i] === ')') parenStack++;
-		else if (text[i] === '(') {
-			if (parenStack === 0) {
-				openParenIndex = i;
-				const before = text.slice(0, i);
-				const match = before.match(/(\w+)\s*$/);
-				if (match) funcName = match[1].toLowerCase();
-				break;
-			}
-			parenStack--;
-		}
-	}
-	if (openParenIndex === -1 || !funcName) return null;
-	// Scan forwards to find the matching closing parenthesis
-	let closeParenIndex = -1;
-	let depth = 1;
-	for (let j = openParenIndex + 1; j < text.length; j++) {
-		if (text[j] === '(') depth++;
-		else if (text[j] === ')') depth--;
-		if (depth === 0) {
-			closeParenIndex = j;
-			break;
-		}
-	}
-	if (
-		cursorPos > openParenIndex &&
-		(closeParenIndex === -1 || cursorPos <= closeParenIndex)
-	) {
-		return funcName;
-	}
-	return null;
-}
-
-// eslint-disable-next-line react/no-this-in-sfc
-function QueryAggregationSelect({
-	onChange,
-	queryData,
-}: {
-	onChange?: (value: string) => void;
-	queryData: IBuilderQuery;
-}): JSX.Element {
-	const { setAggregationOptions } = useQueryBuilderV2Context();
-
-	const [input, setInput] = useState(
-		queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
-	);
-	const [cursorPos, setCursorPos] = useState(0);
-	const [functionArgPairs, setFunctionArgPairs] = useState<
-		{ func: string; arg: string }[]
-	>([]);
-	const editorRef = useRef<EditorView | null>(null);
-	const [isFocused, setIsFocused] = useState(false);
-
-	// Helper function to safely start completion
-	const safeStartCompletion = useCallback((): void => {
-		requestAnimationFrame(() => {
-			if (editorRef.current) {
-				startCompletion(editorRef.current);
-			}
-		});
-	}, []);
-
-	// Update cursor position on every editor update
-	const handleUpdate = (update: { view: EditorView }): void => {
-		const pos = update.view.state.selection.main.from;
-		setCursorPos(pos);
-	};
-
-	// Effect to handle focus state and trigger suggestions
-	useEffect(() => {
-		if (isFocused) {
-			safeStartCompletion();
-		}
-	}, [isFocused, safeStartCompletion]);
-
-	// Extract all valid function-argument pairs from the input
-	useEffect(() => {
-		const pairs: { func: string; arg: string }[] = [];
-		const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
-		let match;
-		while ((match = regex.exec(input)) !== null) {
-			const func = match[1].toLowerCase();
-			const args = match[2]
-				.split(',')
-				.map((arg) => arg.trim())
-				.filter((arg) => arg.length > 0);
-
-			if (args.length === 0) {
-				// For functions with no arguments, add a pair with empty string as arg
-				pairs.push({ func, arg: '' });
-			} else {
-				args.forEach((arg) => {
-					pairs.push({ func, arg });
-				});
-			}
-		}
-		setFunctionArgPairs(pairs);
-		setAggregationOptions(pairs);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [input]);
-
-	// Find function context for fetching suggestions
-	const functionContextForFetch = getFunctionContextAtCursor(input, cursorPos);
-
-	const { data: aggregateAttributeData, isLoading: isLoadingFields } = useQuery(
-		[
-			QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
-			functionContextForFetch,
-			queryData.dataSource,
-		],
-		() =>
-			getAggregateAttribute({
-				searchText: '',
-				aggregateOperator: functionContextForFetch as string,
-				dataSource: queryData.dataSource,
-			}),
-		{
-			enabled:
-				!!functionContextForFetch &&
-				!!operatorArgMeta[functionContextForFetch]?.acceptsArgs,
-		},
-	);
-
-	// Get valid function names (lowercase)
-	const validFunctions = useMemo(
-		() => tracesAggregateOperatorOptions.map((op) => op.value.toLowerCase()),
-		[],
-	);
-
-	// Memoized chipPlugin that highlights valid function calls like count(), max(arg), min(arg)
-	const chipPlugin = useMemo(
-		() =>
-			ViewPlugin.fromClass(
-				class {
-					decorations: import('@codemirror/view').DecorationSet;
-
-					constructor(view: EditorView) {
-						this.decorations = this.buildDecorations(view);
-					}
-
-					update(update: ViewUpdate): void {
-						if (update.docChanged || update.viewportChanged) {
-							this.decorations = this.buildDecorations(update.view);
-						}
-					}
-
-					buildDecorations(
-						view: EditorView,
-					): import('@codemirror/view').DecorationSet {
-						const builder = new RangeSetBuilder<Decoration>();
-						for (const { from, to } of view.visibleRanges) {
-							const text = view.state.doc.sliceString(from, to);
-
-							const regex = /\b([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
-							let match;
-
-							while ((match = regex.exec(text)) !== null) {
-								const func = match[1].toLowerCase();
-
-								if (validFunctions.includes(func)) {
-									const start = from + match.index;
-									const end = start + match[0].length;
-									builder.add(start, end, chipDecoration);
-								}
-							}
-						}
-						return builder.finish();
-					}
-				},
-				{
-					decorations: (v: any): import('@codemirror/view').DecorationSet =>
-						v.decorations,
-				},
-			),
-		[validFunctions],
-	) as any;
-
-	const operatorCompletions: Completion[] = tracesAggregateOperatorOptions.map(
-		(op) => ({
-			label: op.value,
-			type: 'function',
-			info: op.label,
-			apply: (
-				view: EditorView,
-				completion: Completion,
-				from: number,
-				to: number,
-			): void => {
-				const acceptsArgs = operatorArgMeta[op.value]?.acceptsArgs;
-
-				let insertText: string;
-				let cursorPos: number;
-
-				if (!acceptsArgs) {
-					insertText = `${op.value}() `;
-					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
-				} else {
-					insertText = `${op.value}(`;
-					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
-				}
-
-				view.dispatch({
-					changes: { from, to, insert: insertText },
-					selection: { anchor: cursorPos },
-				});
-
-				// Trigger suggestions after a small delay
-				setTimeout(() => {
-					safeStartCompletion();
-				}, 50);
-			},
-		}),
-	);
-
-	// Memoize field suggestions from API (no filtering here)
-	const fieldSuggestions = useMemo(
-		() =>
-			aggregateAttributeData?.payload?.attributeKeys?.map(
-				(attributeKey: BaseAutocompleteData) => ({
-					label: attributeKey.key,
-					type: 'variable',
-					info: attributeKey.dataType,
-					apply: (
-						view: EditorView,
-						completion: Completion,
-						from: number,
-						to: number,
-					): void => {
-						const text = view.state.sliceDoc(0, from);
-						const funcName = getFunctionContextAtCursor(text, from);
-						const multiple = funcName ? operatorArgMeta[funcName]?.multiple : false;
-
-						// Insert the selected key followed by either a comma or closing parenthesis
-						const insertText = multiple
-							? `${completion.label},`
-							: `${completion.label}) `;
-						const cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
-
-						view.dispatch({
-							changes: { from, to, insert: insertText },
-							selection: { anchor: cursorPos },
-						});
-
-						// Trigger next suggestions after a small delay
-						setTimeout(() => {
-							safeStartCompletion();
-						}, 50);
-					},
-				}),
-			) || [],
-		[aggregateAttributeData, safeStartCompletion],
-	);
-
-	const aggregatorAutocomplete = useMemo(
-		() =>
-			autocompletion({
-				override: [
-					(context: CompletionContext): CompletionResult | null => {
-						const text = context.state.sliceDoc(0, context.state.doc.length);
-						const cursorPos = context.pos;
-						const funcName = getFunctionContextAtCursor(text, cursorPos);
-
-						// Do not show suggestions if inside count()
-						if (
-							funcName === TracesAggregatorOperator.COUNT &&
-							cursorPos > 0 &&
-							text[cursorPos - 1] !== ')'
-						) {
-							return null;
-						}
-
-						// If inside a function that accepts args, show field suggestions
-						if (funcName && operatorArgMeta[funcName]?.acceptsArgs) {
-							if (isLoadingFields) {
-								return {
-									from: cursorPos,
-									options: [
-										{
-											label: 'Loading suggestions...',
-											type: 'text',
-											apply: (): void => {},
-										},
-									],
-								};
-							}
-
-							const doc = context.state.sliceDoc(0, cursorPos);
-							const lastOpenParen = doc.lastIndexOf('(');
-							const lastComma = doc.lastIndexOf(',', cursorPos - 1);
-							const startOfArg =
-								lastComma > lastOpenParen ? lastComma + 1 : lastOpenParen + 1;
-							const inputText = doc.slice(startOfArg, cursorPos).trim();
-
-							// Parse arguments already present in the function call (before the cursor)
-							const usedArgs = new Set<string>();
-							if (lastOpenParen !== -1) {
-								const argsString = doc.slice(lastOpenParen + 1, cursorPos);
-								argsString.split(',').forEach((arg) => {
-									const trimmed = arg.trim();
-									if (trimmed) usedArgs.add(trimmed);
-								});
-							}
-
-							// Exclude arguments already paired with this function elsewhere in the input
-							const globalUsedArgs = new Set(
-								functionArgPairs
-									.filter((pair) => pair.func === funcName)
-									.map((pair) => pair.arg),
-							);
-
-							const availableSuggestions = fieldSuggestions.filter(
-								(suggestion) =>
-									!usedArgs.has(suggestion.label) &&
-									!globalUsedArgs.has(suggestion.label),
-							);
-
-							const filteredSuggestions =
-								inputText === ''
-									? availableSuggestions
-									: availableSuggestions.filter((suggestion) =>
-											suggestion.label.toLowerCase().includes(inputText.toLowerCase()),
-									  );
-
-							return {
-								from: startOfArg,
-								options: filteredSuggestions,
-							};
-						}
-
-						// Show operator suggestions if no function context or not accepting args
-						if (!funcName || !operatorArgMeta[funcName]?.acceptsArgs) {
-							// Check if 'count(' is present in the current input (case-insensitive)
-							const hasCount = text.toLowerCase().includes('count(');
-							const availableOperators = hasCount
-								? operatorCompletions.filter((op) => op.label.toLowerCase() !== 'count')
-								: operatorCompletions;
-
-							// Get the word before cursor if any
-							const word = context.matchBefore(/[\w\d_]+/);
-
-							// Show suggestions if:
-							// 1. There's a word match
-							// 2. The input is empty (cursor at start)
-							// 3. The user explicitly triggered completion
-							if (word || cursorPos === 0 || context.explicit) {
-								return {
-									from: word ? word.from : cursorPos,
-									options: availableOperators,
-								};
-							}
-						}
-
-						return null;
-					},
-				],
-				defaultKeymap: true,
-				closeOnBlur: true,
-				maxRenderedOptions: 50,
-				activateOnTyping: true,
-			}),
-		[operatorCompletions, isLoadingFields, fieldSuggestions, functionArgPairs],
-	);
-
-	return (
-		<div className="query-aggregation-select-container">
-			<CodeMirror
-				value={input}
-				onChange={(value): void => {
-					setInput(value);
-					onChange?.(value);
-				}}
-				className="query-aggregation-select-editor"
-				theme={copilot}
-				extensions={[
-					chipPlugin,
-					aggregatorAutocomplete,
-					javascript({ jsx: false, typescript: false }),
-					EditorView.lineWrapping,
-					keymap.of([
-						...completionKeymap,
-						{
-							key: 'Escape',
-							run: closeCompletion,
-						},
-					]),
-				]}
-				placeholder="Type aggregator functions like sum(), count_distinct(...), etc."
-				basicSetup={{
-					lineNumbers: false,
-					autocompletion: true,
-					completionKeymap: true,
-				}}
-				onUpdate={handleUpdate}
-				onCreateEditor={(view: EditorView): void => {
-					editorRef.current = view;
-				}}
-				onFocus={(): void => {
-					setIsFocused(true);
-					safeStartCompletion();
-				}}
-				onBlur={(): void => {
-					setIsFocused(false);
-
-					if (editorRef.current) {
-						closeCompletion(editorRef.current);
-					}
-				}}
-			/>
-		</div>
-	);
-}
-
-QueryAggregationSelect.defaultProps = {
-	onChange: undefined,
-};
-
-export default QueryAggregationSelect;

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

@@ -1,35 +0,0 @@
-import { Button } from 'antd';
-import { Plus, Sigma } from 'lucide-react';
-
-export default function QueryFooter({
-	addNewBuilderQuery,
-	addNewFormula,
-}: {
-	addNewBuilderQuery: () => void;
-	addNewFormula: () => void;
-}): JSX.Element {
-	return (
-		<div className="qb-footer">
-			<div className="qb-footer-container">
-				<div className="qb-add-new-query">
-					<Button
-						className="add-new-query-button periscope-btn secondary"
-						type="text"
-						icon={<Plus size={16} />}
-						onClick={addNewBuilderQuery}
-					/>
-				</div>
-
-				<div className="qb-add-formula">
-					<Button
-						className="add-formula-button periscope-btn secondary"
-						icon={<Sigma size={16} />}
-						onClick={addNewFormula}
-					>
-						Add Formula
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}

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

@@ -1,713 +0,0 @@
-.code-mirror-where-clause {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', sans-serif;
-
-	.query-where-clause-editor-container {
-		display: flex;
-		flex-direction: row;
-
-		.query-where-clause-editor {
-			flex: 1;
-			min-width: 400px;
-		}
-
-		.query-status-container {
-			width: 32px;
-
-			background-color: #121317 !important;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			border: 1px solid var(--bg-slate-200);
-			border-radius: 2px;
-			border-top-left-radius: 0px !important;
-			border-bottom-left-radius: 0px !important;
-			border-left: none !important;
-
-			&.hasErrors {
-				border-color: var(--bg-cherry-500);
-			}
-		}
-	}
-
-	.query-where-clause-editor {
-		&.hasErrors {
-			.cm-editor {
-				.cm-content {
-					border-color: var(--bg-cherry-500);
-					border-top-right-radius: 0px !important;
-					border-bottom-right-radius: 0px !important;
-				}
-			}
-		}
-	}
-
-	.cm-editor {
-		border-radius: 2px;
-		overflow: hidden;
-		background-color: transparent !important;
-
-		&:focus-within {
-			border-color: var(--bg-robin-500);
-		}
-
-		.cm-content {
-			border-radius: 2px;
-			border: 1px solid var(--Slate-400, #1d212d);
-			padding: 0px !important;
-			background-color: #121317 !important;
-
-			&:focus-within {
-				border-color: var(--bg-ink-200);
-			}
-		}
-
-		&.cm-focused {
-			outline: 1px solid var(--bg-slate-200);
-		}
-
-		.cm-tooltip-autocomplete {
-			background: var(--bg-ink-300) !important;
-			border-radius: 2px !important;
-			font-size: 12px !important;
-			font-weight: 500 !important;
-			margin-top: -2px !important;
-			min-width: 400px !important;
-			position: relative !important;
-			top: 0px !important;
-			left: 0px !important;
-
-			border-radius: 4px;
-			border: 0px;
-			background: linear-gradient(
-				139deg,
-				rgba(18, 19, 23, 0.8) 0%,
-				rgba(18, 19, 23, 0.9) 98.68%
-			) !important;
-			backdrop-filter: blur(20px);
-			box-sizing: border-box;
-			font-family: 'Space Mono', monospace !important;
-
-			ul {
-				width: 100% !important;
-				max-width: 100% !important;
-				font-family: 'Space Mono', monospace !important;
-				min-height: 200px !important;
-
-				&::-webkit-scrollbar {
-					width: 0.3rem;
-				}
-				&::-webkit-scrollbar-corner {
-					background: transparent;
-				}
-				&::-webkit-scrollbar-thumb {
-					background: rgb(136, 136, 136);
-					border-radius: 0.625rem;
-				}
-				&::-webkit-scrollbar-track {
-					background: transparent;
-				}
-
-				li {
-					width: 100% !important;
-					max-width: 100% !important;
-					line-height: 36px !important;
-					height: 36px !important;
-					padding: 4px 8px !important;
-
-					display: flex !important;
-					align-items: center !important;
-					gap: 8px !important;
-					box-sizing: border-box;
-					overflow: hidden;
-
-					font-family: 'Space Mono', monospace !important;
-
-					&:hover {
-						background: var(--bg-ink-100) !important;
-					}
-
-					.cm-completionIcon {
-						display: none !important;
-					}
-
-					&[aria-selected='true'] {
-						// background-color: rgba(78, 116, 248, 0.7) !important;
-						background: rgba(171, 189, 255, 0.04) !important;
-					}
-				}
-			}
-		}
-
-		.cm-gutters {
-			display: none !important;
-		}
-
-		.cm-line {
-			line-height: 34px !important;
-			font-family: 'Space Mono', monospace !important;
-			background-color: #121317 !important;
-
-			::-moz-selection {
-				background: var(--bg-ink-100) !important;
-				opacity: 0.5 !important;
-			}
-
-			::selection {
-				background: var(--bg-ink-100) !important;
-				opacity: 0.5 !important;
-			}
-		}
-
-		.cm-selectionBackground {
-			background: var(--bg-ink-100) !important;
-			opacity: 0.5 !important;
-		}
-	}
-
-	.cursor-position {
-		font-size: 12px;
-		color: var(--bg-ink-200);
-		padding: 6px;
-		background-color: var(--bg-vanilla-200);
-		border-radius: 4px;
-		display: inline-flex;
-		align-items: center;
-		margin-bottom: 8px;
-		margin-top: 8px;
-	}
-
-	.query-validation {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		margin-bottom: 8px;
-		margin-top: 16px;
-
-		.valid,
-		.invalid {
-			display: inline-flex;
-			align-items: center;
-			padding: 4px 8px;
-			border-radius: 4px;
-			font-weight: 500;
-			font-size: 12px;
-		}
-
-		.valid {
-			background-color: rgba(39, 174, 96, 0.1);
-			color: #27ae60;
-		}
-
-		.invalid {
-			background-color: rgba(235, 87, 87, 0.1);
-			color: #eb5757;
-		}
-
-		.query-validation-status {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-
-		.query-validation-errors {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
-			.query-validation-error {
-				display: flex;
-				flex-direction: row;
-				gap: 16px;
-
-				font-size: 12px;
-				font-family: 'Space Mono', monospace !important;
-				color: var(--bg-cherry-500);
-			}
-		}
-	}
-
-	.query-context {
-		padding: 12px;
-		background-color: var(--bg-ink-400);
-		border-radius: 4px;
-		border-left: 3px solid var(--bg-robin-500);
-		color: var(--bg-ink-300) !important;
-
-		.ant-card-head {
-			color: var(--bg-vanilla-300) !important;
-		}
-
-		.context-details {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 12px;
-
-			p {
-				margin: 0;
-				font-size: 13px;
-
-				strong {
-					color: var(--bg-vanilla-300);
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-
-	.code-mirror-card {
-		.ant-card-body {
-			padding: 8px;
-		}
-	}
-
-	.query-text-preview-title {
-		font-size: 13px;
-		color: var(--bg-vanilla-100);
-		background-color: var(--bg-robin-500);
-		padding: 2px 6px;
-		border-radius: 2px;
-		margin-right: 4px;
-	}
-
-	.query-text-preview {
-		font-family: 'Space Mono', monospace;
-		font-size: 13px;
-		color: var(--bg-vanilla-200);
-		padding: 2px 6px;
-		font-style: italic;
-	}
-
-	.query-examples-card {
-		background-color: var(--bg-ink-400);
-		border: 1px solid var(--bg-slate-200);
-
-		.ant-card-body {
-			padding: 0;
-		}
-
-		.query-examples {
-			.ant-collapse-header {
-				padding: 8px 16px !important;
-				color: var(--bg-vanilla-300) !important;
-				font-weight: 500;
-			}
-
-			.ant-collapse-content {
-				background-color: transparent !important;
-			}
-
-			.query-examples-list {
-				display: flex;
-				flex-direction: row;
-				gap: 8px;
-				flex-wrap: wrap;
-			}
-
-			.query-example-tag {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
-				padding: 8px 12px;
-				background-color: var(--bg-ink-400);
-				border: 1px solid var(--bg-slate-200);
-				border-radius: 4px;
-				cursor: pointer;
-				transition: all 0.2s ease;
-				outline: none;
-
-				&:hover {
-					background-color: var(--bg-ink-300);
-					border-color: var(--bg-robin-500);
-				}
-
-				&:focus-visible {
-					outline: 2px solid var(--bg-robin-500);
-					outline-offset: 2px;
-				}
-
-				.query-example-content {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-				}
-
-				.query-example-label {
-					font-weight: 500;
-					color: var(--bg-vanilla-300);
-					font-size: 13px;
-				}
-
-				.query-example-query {
-					font-family: 'Space Mono', monospace;
-					font-size: 12px;
-					color: var(--bg-vanilla-200);
-					background-color: var(--bg-ink-300);
-					padding: 2px 6px;
-					border-radius: 2px;
-				}
-
-				.query-example-description {
-					font-size: 12px;
-					color: var(--bg-vanilla-200);
-					opacity: 0.8;
-				}
-			}
-
-			.query-example-content {
-				display: inline-flex;
-
-				cursor: pointer;
-			}
-		}
-	}
-
-	// Context indicator styles
-	.context-indicator {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		padding: 8px 12px;
-		margin-bottom: 8px;
-		border-radius: 4px;
-		font-size: 13px;
-		background-color: #f5f5f5;
-		border-left: 4px solid #1890ff;
-
-		display: none;
-
-		.triplet-info {
-			margin-left: 16px;
-			display: inline-flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.query-pair-info {
-			display: inline-flex;
-			align-items: center;
-			gap: 4px;
-			border-left: 1px solid rgba(0, 0, 0, 0.1);
-			padding-left: 8px;
-			background-color: rgba(0, 0, 0, 0.03);
-			padding: 4px 8px;
-			border-radius: 4px;
-		}
-
-		// Color variations based on context
-		&.context-indicator-key {
-			border-left-color: #1890ff; // blue
-			background-color: rgba(24, 144, 255, 0.1);
-		}
-
-		&.context-indicator-operator {
-			border-left-color: #722ed1; // purple
-			background-color: rgba(114, 46, 209, 0.1);
-		}
-
-		&.context-indicator-value {
-			border-left-color: #52c41a; // green
-			background-color: rgba(82, 196, 26, 0.1);
-		}
-
-		&.context-indicator-conjunction {
-			border-left-color: #fa8c16; // orange
-			background-color: rgba(250, 140, 22, 0.1);
-		}
-
-		&.context-indicator-function {
-			border-left-color: #13c2c2; // cyan
-			background-color: rgba(19, 194, 194, 0.1);
-		}
-
-		&.context-indicator-parenthesis {
-			border-left-color: #eb2f96; // magenta
-			background-color: rgba(235, 47, 150, 0.1);
-		}
-	}
-}
-
-.query-status-popover {
-	.ant-popover-arrow {
-		display: none !important;
-	}
-
-	.ant-popover-content {
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-
-		margin-top: -6px !important;
-	}
-}
-
-// /* Dark mode support */
-// :global(.darkMode) {
-// 	.code-mirror-where-clause {
-// 		.cm-editor {
-// 			border-color: var(--bg-slate-500);
-// 			background-color: var(--bg-ink-400);
-// 		}
-
-// 		.cursor-position {
-// 			background-color: var(--bg-ink-400);
-// 			color: var(--bg-vanilla-100);
-// 		}
-
-// 		.query-context {
-// 			background-color: var(--bg-ink-400);
-// 			color: var(--bg-vanilla-100);
-
-// 			h3 {
-// 				color: var(--bg-vanilla-100);
-// 			}
-
-// 			.context-details {
-// 				p {
-// 					strong {
-// 						color: var(--bg-vanilla-200);
-// 					}
-// 				}
-// 			}
-// 		}
-
-// 		.query-examples-card {
-// 			background-color: var(--bg-ink-400);
-// 			border-color: var(--bg-slate-500);
-
-// 			.ant-collapse-header {
-// 				color: var(--bg-vanilla-100) !important;
-// 			}
-
-// 			.query-example-tag {
-// 				background-color: var(--bg-ink-400);
-// 				border-color: var(--bg-slate-500);
-
-// 				&:hover {
-// 					background-color: var(--bg-ink-300);
-// 					border-color: var(--bg-robin-500);
-// 				}
-
-// 				.query-example-label {
-// 					color: var(--bg-vanilla-100);
-// 				}
-
-// 				.query-example-query {
-// 					color: var(--bg-vanilla-100);
-// 					background-color: var(--bg-ink-300);
-// 				}
-
-// 				.query-example-description {
-// 					color: var(--bg-vanilla-100);
-// 				}
-// 			}
-// 		}
-
-// 		.context-indicator {
-// 			background-color: var(--bg-ink-300);
-// 			color: var(--bg-vanilla-100);
-
-// 			.query-pair-info {
-// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
-// 				background-color: rgba(255, 255, 255, 0.05);
-// 			}
-// 		}
-// 	}
-// }
-
-.lightMode {
-	.code-mirror-where-clause {
-		.query-where-clause-editor-container {
-			.query-status-container {
-				background-color: var(--bg-vanilla-100) !important;
-				border: 1px solid var(--bg-vanilla-300);
-
-				&.hasErrors {
-					border-color: var(--bg-cherry-500);
-				}
-			}
-		}
-
-		.query-where-clause-editor {
-			&.hasErrors {
-				.cm-editor {
-					.cm-content {
-						border-color: var(--bg-cherry-500);
-						border-top-right-radius: 0px !important;
-						border-bottom-right-radius: 0px !important;
-					}
-				}
-			}
-		}
-
-		.cm-editor {
-			&:focus-within {
-				border-color: var(--bg-robin-500);
-			}
-
-			&.cm-focused {
-				outline: 1px solid var(--bg-vanilla-300);
-			}
-
-			.cm-content {
-				border-radius: 2px;
-				border: 1px solid var(--bg-vanilla-300);
-				padding: 0px !important;
-				background-color: var(--bg-vanilla-100) !important;
-
-				&:focus-within {
-					border-color: var(--bg-vanilla-200);
-				}
-			}
-
-			.cm-tooltip-autocomplete {
-				background: var(--bg-vanilla-100) !important;
-
-				border: 0px;
-				backdrop-filter: blur(20px);
-
-				ul {
-					li {
-						background-color: var(--bg-vanilla-100) !important;
-						color: var(--bg-ink-300) !important;
-
-						&:hover {
-							background-color: var(--bg-vanilla-200) !important;
-						}
-					}
-				}
-			}
-
-			.cm-line {
-				background-color: var(--bg-vanilla-100) !important;
-
-				::-moz-selection {
-					background: var(--bg-vanilla-100) !important;
-				}
-
-				::selection {
-					background: var(--bg-vanilla-100) !important;
-				}
-			}
-
-			.cm-selectionBackground {
-				background: var(--bg-vanilla-100) !important;
-			}
-		}
-
-		.cursor-position {
-			color: var(--bg-vanilla-200);
-			background-color: var(--bg-vanilla-100);
-		}
-
-		.query-context {
-			background-color: var(--bg-vanilla-100);
-			border-left: 3px solid var(--bg-vanilla-300);
-			color: var(--bg-vanilla-300) !important;
-
-			.ant-card-head {
-				color: var(--bg-ink-300) !important;
-			}
-
-			.context-details {
-				p {
-					strong {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.query-examples-card {
-			background-color: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300);
-
-			.query-examples {
-				.ant-collapse-header {
-					color: var(--bg-ink-300) !important;
-				}
-
-				.query-example-tag {
-					background-color: var(--bg-vanilla-100);
-					border: 1px solid var(--bg-vanilla-300);
-
-					&:hover {
-						background-color: var(--bg-vanilla-200);
-						border-color: var(--bg-vanilla-300);
-					}
-
-					.query-example-label {
-						color: var(--bg-ink-300);
-					}
-
-					.query-example-query {
-						color: var(--bg-ink-300);
-						background-color: var(--bg-vanilla-100);
-					}
-
-					.query-example-description {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.context-indicator {
-			background-color: var(--bg-vanilla-100);
-			border-left: 4px solid var(--bg-vanilla-300);
-
-			display: none;
-
-			.query-pair-info {
-				border-left: 1px solid rgba(255, 255, 255, 0.1);
-				background-color: rgba(255, 255, 255, 0.03);
-			}
-
-			// Color variations based on context
-			&.context-indicator-key {
-				border-left-color: #1890ff; // blue
-				background-color: rgba(24, 144, 255, 0.1);
-			}
-
-			&.context-indicator-operator {
-				border-left-color: #722ed1; // purple
-				background-color: rgba(114, 46, 209, 0.1);
-			}
-
-			&.context-indicator-value {
-				border-left-color: #52c41a; // green
-				background-color: rgba(82, 196, 26, 0.1);
-			}
-
-			&.context-indicator-conjunction {
-				border-left-color: #fa8c16; // orange
-				background-color: rgba(250, 140, 22, 0.1);
-			}
-
-			&.context-indicator-function {
-				border-left-color: #13c2c2; // cyan
-				background-color: rgba(19, 194, 194, 0.1);
-			}
-
-			&.context-indicator-parenthesis {
-				border-left-color: #eb2f96; // magenta
-				background-color: rgba(235, 47, 150, 0.1);
-			}
-		}
-	}
-
-	.query-status-popover {
-		.ant-popover-content {
-			background: var(--bg-vanilla-100);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-	}
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts

@@ -1,79 +0,0 @@
-export const queryExamples = [
-	{
-		label: 'Basic Query',
-		query: "status = 'error'",
-		description: 'Find all errors',
-	},
-	{
-		label: 'Multiple Conditions',
-		query: "status = 'error' AND service = 'frontend'",
-		description: 'Find errors from frontend service',
-	},
-	{
-		label: 'IN Operator',
-		query: "status IN ['error', 'warning']",
-		description: 'Find items with specific statuses',
-	},
-	{
-		label: 'Function Usage',
-		query: "HAS(service, 'frontend')",
-		description: 'Use HAS function',
-	},
-	{
-		label: 'Numeric Comparison',
-		query: 'duration > 1000',
-		description: 'Find items with duration greater than 1000ms',
-	},
-	{
-		label: 'Range Query',
-		query: 'duration BETWEEN 100 AND 1000',
-		description: 'Find items with duration between 100ms and 1000ms',
-	},
-	{
-		label: 'Pattern Matching',
-		query: "service LIKE 'front%'",
-		description: 'Find services starting with "front"',
-	},
-	{
-		label: 'Complex Conditions',
-		query: "(status = 'error' OR status = 'warning') AND service = 'frontend'",
-		description: 'Find errors or warnings from frontend service',
-	},
-	{
-		label: 'Multiple Functions',
-		query: "HAS(service, 'frontend') AND HAS(status, 'error')",
-		description: 'Use multiple HAS functions',
-	},
-	{
-		label: 'NOT Operator',
-		query: "NOT status = 'success'",
-		description: 'Find items that are not successful',
-	},
-	{
-		label: 'Array Contains',
-		query: "tags CONTAINS 'production'",
-		description: 'Find items with production tag',
-	},
-	{
-		label: 'Regex Pattern',
-		query: "service REGEXP '^prod-.*'",
-		description: 'Find services matching regex pattern',
-	},
-	{
-		label: 'Null Check',
-		query: 'error IS NULL',
-		description: 'Find items without errors',
-	},
-	{
-		label: 'Multiple Attributes',
-		query:
-			"service = 'frontend' AND environment = 'production' AND status = 'error'",
-		description: 'Find production frontend errors',
-	},
-	{
-		label: 'Nested Conditions',
-		query:
-			"(service = 'frontend' OR service = 'backend') AND (status = 'error' OR status = 'warning')",
-		description: 'Find errors or warnings from frontend or backend',
-	},
-];

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

@@ -1,275 +0,0 @@
-import { Dropdown } from 'antd';
-import cx from 'classnames';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
-import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { Copy, Ellipsis, Trash } from 'lucide-react';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	convertAggregationToExpression,
-	convertFiltersToExpression,
-	convertHavingToExpression,
-} from '../utils';
-import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
-import { MetricsSelect } from './MetricsSelect/MetricsSelect';
-import QueryAddOns from './QueryAddOns/QueryAddOns';
-import QueryAggregation from './QueryAggregation/QueryAggregation';
-import QuerySearch from './QuerySearch/QuerySearch';
-
-export const QueryV2 = memo(function QueryV2({
-	ref,
-	index,
-	queryVariant,
-	query,
-	filterConfigs,
-	isListViewPanel = false,
-	version,
-	showOnlyWhereClause = false,
-}: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
-	const { cloneQuery, panelType } = useQueryBuilder();
-
-	const showFunctions = query?.functions?.length > 0;
-	const { dataSource } = query;
-
-	const [isCollapsed, setIsCollapsed] = useState(false);
-
-	const {
-		handleChangeQueryData,
-		handleDeleteQuery,
-		handleQueryFunctionsUpdates,
-		handleChangeDataSource,
-	} = useQueryOperations({
-		index,
-		query,
-		filterConfigs,
-		isListViewPanel,
-		entityVersion: version,
-	});
-
-	// Convert old format to new format and update query when component mounts or query changes
-	const performQueryConversions = useCallback(() => {
-		// Convert filters if needed
-		if (query.filters?.items?.length > 0 && !query.filter?.expression) {
-			const convertedFilter = convertFiltersToExpression(query.filters);
-			handleChangeQueryData('filter', convertedFilter);
-		}
-
-		// Convert having if needed
-		if (query.having?.length > 0 && !query.havingExpression?.expression) {
-			const convertedHaving = convertHavingToExpression(query.having);
-			handleChangeQueryData('havingExpression', convertedHaving);
-		}
-
-		// Convert aggregation if needed
-		if (!query.aggregations && query.aggregateOperator) {
-			const convertedAggregation = convertAggregationToExpression(
-				query.aggregateOperator,
-				query.aggregateAttribute,
-				query.dataSource,
-				query.timeAggregation,
-				query.spaceAggregation,
-			) as any; // Type assertion to handle union type
-			handleChangeQueryData('aggregations', convertedAggregation);
-		}
-	}, [query, handleChangeQueryData]);
-
-	useEffect(() => {
-		const needsConversion =
-			(query.filters?.items?.length > 0 && !query.filter?.expression) ||
-			(query.having?.length > 0 && !query.havingExpression?.expression) ||
-			(!query.aggregations && query.aggregateOperator);
-
-		if (needsConversion) {
-			performQueryConversions();
-		}
-	}, [performQueryConversions, query]);
-
-	const handleToggleDisableQuery = useCallback(() => {
-		handleChangeQueryData('disabled', !query.disabled);
-	}, [handleChangeQueryData, query]);
-
-	const handleToggleCollapsQuery = (): void => {
-		setIsCollapsed(!isCollapsed);
-	};
-
-	const handleCloneEntity = (): void => {
-		cloneQuery('query', query);
-	};
-
-	const showReduceTo = useMemo(
-		() =>
-			dataSource === DataSource.METRICS &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
-		[dataSource, panelType],
-	);
-
-	const showSpanScopeSelector = useMemo(() => dataSource === DataSource.TRACES, [
-		dataSource,
-	]);
-
-	const handleChangeAggregateEvery = useCallback(
-		(value: IBuilderQuery['stepInterval']) => {
-			handleChangeQueryData('stepInterval', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleSearchChange = useCallback(
-		(value: string) => {
-			(handleChangeQueryData as HandleChangeQueryDataV5)('filter', {
-				expression: value,
-			});
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeAggregation = useCallback(
-		(value: string) => {
-			(handleChangeQueryData as HandleChangeQueryDataV5)('aggregations', [
-				{
-					expression: value,
-				},
-			]);
-		},
-		[handleChangeQueryData],
-	);
-
-	return (
-		<div
-			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
-			ref={ref}
-		>
-			<div className="qb-content-section">
-				{!showOnlyWhereClause && (
-					<div className="qb-header-container">
-						<div className="query-actions-container">
-							<div className="query-actions-left-container">
-								<QBEntityOptions
-									isMetricsDataSource={dataSource === DataSource.METRICS}
-									showFunctions={
-										(version && version === ENTITY_VERSION_V4) ||
-										query.dataSource === DataSource.LOGS ||
-										showFunctions ||
-										false
-									}
-									isCollapsed={isCollapsed}
-									entityType="query"
-									entityData={query}
-									onToggleVisibility={handleToggleDisableQuery}
-									onDelete={handleDeleteQuery}
-									onCloneQuery={cloneQuery}
-									onCollapseEntity={handleToggleCollapsQuery}
-									query={query}
-									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
-									showDeleteButton={false}
-									showCloneOption={false}
-									isListViewPanel={isListViewPanel}
-									index={index}
-									queryVariant={queryVariant}
-									onChangeDataSource={handleChangeDataSource}
-								/>
-							</div>
-
-							{!isListViewPanel && (
-								<Dropdown
-									className="query-actions-dropdown"
-									menu={{
-										items: [
-											{
-												label: 'Clone',
-												key: 'clone-query',
-												icon: <Copy size={14} />,
-												onClick: handleCloneEntity,
-											},
-											{
-												label: 'Delete',
-												key: 'delete-query',
-												icon: <Trash size={14} />,
-												onClick: handleDeleteQuery,
-											},
-										],
-									}}
-									placement="bottomRight"
-								>
-									<Ellipsis size={16} />
-								</Dropdown>
-							)}
-						</div>
-					</div>
-				)}
-
-				<div className="qb-elements-container">
-					<div className="qb-search-container">
-						{dataSource === DataSource.METRICS && (
-							<div className="metrics-select-container">
-								<MetricsSelect query={query} index={0} version="v4" />
-							</div>
-						)}
-
-						<div className="qb-search-filter-container">
-							<div className="query-search-container">
-								<QuerySearch
-									key={`query-search-${query.queryName}-${query.dataSource}`}
-									onChange={handleSearchChange}
-									queryData={query}
-									dataSource={dataSource}
-								/>
-							</div>
-
-							{showSpanScopeSelector && (
-								<div className="traces-search-filter-container">
-									<div className="traces-search-filter-in">in</div>
-									<SpanScopeSelector queryName={query.queryName} />
-								</div>
-							)}
-						</div>
-					</div>
-
-					{!showOnlyWhereClause &&
-						!isListViewPanel &&
-						dataSource !== DataSource.METRICS && (
-							<QueryAggregation
-								dataSource={dataSource}
-								key={`query-search-${query.queryName}-${query.dataSource}`}
-								panelType={panelType || undefined}
-								onAggregationIntervalChange={handleChangeAggregateEvery}
-								onChange={handleChangeAggregation}
-								queryData={query}
-							/>
-						)}
-
-					{!showOnlyWhereClause && dataSource === DataSource.METRICS && (
-						<MetricsAggregateSection
-							panelType={panelType}
-							query={query}
-							index={0}
-							key={`metrics-aggregate-section-${query.queryName}-${query.dataSource}`}
-							version="v4"
-						/>
-					)}
-
-					{!showOnlyWhereClause && (
-						<QueryAddOns
-							index={index}
-							query={query}
-							version="v3"
-							isListViewPanel={isListViewPanel}
-							showReduceTo={showReduceTo}
-							panelType={panelType}
-						/>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-});

frontend/src/components/QueryBuilderV2/utils.ts

@@ -1,185 +0,0 @@
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Having, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import {
-	LogAggregation,
-	MetricAggregation,
-	TraceAggregation,
-} from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-/**
- * Check if an operator requires array values (like IN, NOT IN)
- * @param operator - The operator to check
- * @returns True if the operator requires array values
- */
-const isArrayOperator = (operator: string): boolean => {
-	const arrayOperators = ['in', 'nin', 'IN', 'NOT IN'];
-	return arrayOperators.includes(operator);
-};
-
-/**
- * Format a value for the expression string
- * @param value - The value to format
- * @param operator - The operator being used (to determine if array is needed)
- * @returns Formatted value string
- */
-const formatValueForExpression = (
-	value: string[] | string | number | boolean,
-	operator?: string,
-): string => {
-	// For IN operators, ensure value is always an array
-	if (isArrayOperator(operator || '')) {
-		const arrayValue = Array.isArray(value) ? value : [value];
-		return `[${arrayValue
-			.map((v) =>
-				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
-			)
-			.join(', ')}]`;
-	}
-
-	if (Array.isArray(value)) {
-		// Handle array values (e.g., for IN operations)
-		return `[${value
-			.map((v) =>
-				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
-			)
-			.join(', ')}]`;
-	}
-
-	if (typeof value === 'string') {
-		// Add single quotes around all string values and escape internal single quotes
-		return `'${value.replace(/'/g, "\\'")}'`;
-	}
-
-	return String(value);
-};
-
-export const convertFiltersToExpression = (
-	filters: TagFilter,
-): { expression: string } => {
-	if (!filters?.items || filters.items.length === 0) {
-		return { expression: '' };
-	}
-
-	const expressions = filters.items
-		.map((filter) => {
-			const { key, op, value } = filter;
-
-			// Skip if key is not defined
-			if (!key?.key) {
-				return '';
-			}
-
-			const formattedValue = formatValueForExpression(value, op);
-			return `${key.key} ${op} ${formattedValue}`;
-		})
-		.filter((expression) => expression !== ''); // Remove empty expressions
-
-	return {
-		expression: expressions.join(' AND '),
-	};
-};
-
-/**
- * Convert old having format to new having format
- * @param having - Array of old having objects with columnName, op, and value
- * @returns New having format with expression string
- */
-export const convertHavingToExpression = (
-	having: Having[],
-): { expression: string } => {
-	if (!having || having.length === 0) {
-		return { expression: '' };
-	}
-
-	const expressions = having
-		.map((havingItem) => {
-			const { columnName, op, value } = havingItem;
-
-			// Skip if columnName is not defined
-			if (!columnName) {
-				return '';
-			}
-
-			// Format value based on its type
-			let formattedValue: string;
-			if (Array.isArray(value)) {
-				// For array values, format as [val1, val2, ...]
-				formattedValue = `[${value.join(', ')}]`;
-			} else {
-				// For single values, just convert to string
-				formattedValue = String(value);
-			}
-
-			return `${columnName} ${op} ${formattedValue}`;
-		})
-		.filter((expression) => expression !== ''); // Remove empty expressions
-
-	return {
-		expression: expressions.join(' AND '),
-	};
-};
-
-/**
- * Convert old aggregation format to new aggregation format
- * @param aggregateOperator - The aggregate operator (e.g., 'sum', 'count', 'avg')
- * @param aggregateAttribute - The attribute to aggregate
- * @param dataSource - The data source type
- * @param timeAggregation - Time aggregation for metrics (optional)
- * @param spaceAggregation - Space aggregation for metrics (optional)
- * @param alias - Optional alias for the aggregation
- * @returns New aggregation format based on data source
- *
- */
-export const convertAggregationToExpression = (
-	aggregateOperator: string,
-	aggregateAttribute: BaseAutocompleteData,
-	dataSource: DataSource,
-	timeAggregation?: string,
-	spaceAggregation?: string,
-	alias?: string,
-): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
-	// Skip if no operator or attribute key
-	if (!aggregateOperator) {
-		return undefined;
-	}
-
-	// Replace noop with count as default
-	const normalizedOperator =
-		aggregateOperator === 'noop' ? 'count' : aggregateOperator;
-	const normalizedTimeAggregation =
-		timeAggregation === 'noop' ? 'count' : timeAggregation;
-	const normalizedSpaceAggregation =
-		spaceAggregation === 'noop' ? 'count' : spaceAggregation;
-
-	// For metrics, use the MetricAggregation format
-	if (dataSource === DataSource.METRICS) {
-		return [
-			{
-				metricName: aggregateAttribute.key,
-				timeAggregation: (normalizedTimeAggregation || normalizedOperator) as any,
-				spaceAggregation: (normalizedSpaceAggregation || normalizedOperator) as any,
-			} as MetricAggregation,
-		];
-	}
-
-	// For traces and logs, use expression format
-	const expression = `${normalizedOperator}(${aggregateAttribute.key})`;
-
-	if (dataSource === DataSource.TRACES) {
-		return [
-			{
-				expression,
-				...(alias && { alias }),
-			} as TraceAggregation,
-		];
-	}
-
-	// For logs
-	return [
-		{
-			expression,
-			...(alias && { alias }),
-		} as LogAggregation,
-	];
-};

frontend/src/components/RouteTab/index.tsx

@@ -1,7 +1,12 @@
 import { Tabs, TabsProps } from 'antd';
+import { useLocation, useParams } from 'react-router-dom';
 
 import { RouteTabProps } from './types';
 
+interface Params {
+	[key: string]: string;
+}
+
 function RouteTab({
 	routes,
 	activeKey,
@@ -9,19 +14,38 @@ function RouteTab({
 	history,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
+	const params = useParams<Params>();
+	const location = useLocation();
+
+	// Replace dynamic parameters in routes
+	const routesWithParams = routes.map((route) => ({
+		...route,
+		route: route.route.replace(
+			/:(\w+)/g,
+			(match, param) => params[param] || match,
+		),
+	}));
+
+	// Find the matching route for the current pathname
+	const currentRoute = routesWithParams.find((route) => {
+		const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
+		const regex = new RegExp(`^${routePattern}$`);
+		return regex.test(location.pathname);
+	});
+
 	const onChange = (activeRoute: string): void => {
 		if (onChangeHandler) {
 			onChangeHandler(activeRoute);
 		}
 
-		const selectedRoute = routes.find((e) => e.key === activeRoute);
+		const selectedRoute = routesWithParams.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
 			history.push(selectedRoute.route);
 		}
 	};
 
-	const items = routes.map(({ Component, name, route, key }) => ({
+	const items = routesWithParams.map(({ Component, name, route, key }) => ({
 		label: name,
 		key,
 		tabKey: route,
@@ -32,8 +56,8 @@ function RouteTab({
 		<Tabs
 			onChange={onChange}
 			destroyInactiveTabPane
-			activeKey={activeKey}
-			defaultActiveKey={activeKey}
+			activeKey={currentRoute?.key || activeKey}
+			defaultActiveKey={currentRoute?.key || activeKey}
 			animated
 			items={items}
 			// eslint-disable-next-line react/jsx-props-no-spreading

frontend/src/constants/app.ts

@@ -15,4 +15,3 @@ export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';
 export const ENTITY_VERSION_V4 = 'v4';
-export const ENTITY_VERSION_V5 = 'v5';

frontend/src/constants/localStorage.ts

@@ -30,5 +30,5 @@ export enum LOCALSTORAGE {
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
 	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
-	UNEXECUTED_FUNNELS = 'UNEXECUTED_FUNNELS',
+	FUNNEL_STEPS = 'FUNNEL_STEPS',
 }

frontend/src/constants/orgPreferences.ts

@@ -0,0 +1,18 @@
+export const ORG_PREFERENCES = {
+	ORG_ONBOARDING: 'org_onboarding',
+	WELCOME_CHECKLIST_DO_LATER: 'welcome_checklist_do_later',
+	WELCOME_CHECKLIST_SEND_LOGS_SKIPPED: 'welcome_checklist_send_logs_skipped',
+	WELCOME_CHECKLIST_SEND_TRACES_SKIPPED: 'welcome_checklist_send_traces_skipped',
+	WELCOME_CHECKLIST_SETUP_ALERTS_SKIPPED:
+		'welcome_checklist_setup_alerts_skipped',
+	WELCOME_CHECKLIST_SETUP_SAVED_VIEW_SKIPPED:
+		'welcome_checklist_setup_saved_view_skipped',
+	WELCOME_CHECKLIST_SEND_INFRA_METRICS_SKIPPED:
+		'welcome_checklist_send_infra_metrics_skipped',
+	WELCOME_CHECKLIST_SETUP_DASHBOARDS_SKIPPED:
+		'welcome_checklist_setup_dashboards_skipped',
+	WELCOME_CHECKLIST_SETUP_WORKSPACE_SKIPPED:
+		'welcome_checklist_setup_workspace_skipped',
+	WELCOME_CHECKLIST_ADD_DATA_SOURCE_SKIPPED:
+		'welcome_checklist_add_data_source_skipped',
+};

frontend/src/constants/query.ts

@@ -46,5 +46,4 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
-	selectedExplorerView = 'selectedExplorerView',
 }

frontend/src/constants/routes.ts

@@ -29,12 +29,12 @@ const ROUTES = {
 	ALERT_OVERVIEW: '/alerts/overview',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
-	CHANNELS_EDIT: '/settings/channels/:id',
+	CHANNELS_EDIT: '/settings/channels/edit/:id',
 	ALL_ERROR: '/exceptions',
 	ERROR_DETAIL: '/error-detail',
 	VERSION: '/status',
-	MY_SETTINGS: '/my-settings',
 	SETTINGS: '/settings',
+	MY_SETTINGS: '/settings/my-settings',
 	ORG_SETTINGS: '/settings/org-settings',
 	CUSTOM_DOMAIN_SETTINGS: '/settings/custom-domain-settings',
 	API_KEYS: '/settings/api-keys',
@@ -52,7 +52,7 @@ const ROUTES = {
 	LIST_LICENSES: '/licenses',
 	LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
 	TRACE_EXPLORER: '/trace-explorer',
-	BILLING: '/billing',
+	BILLING: '/settings/billing',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',
@@ -60,7 +60,7 @@ const ROUTES = {
 	TRACES_FUNNELS_DETAIL: '/traces/funnels/:funnelId',
 	WORKSPACE_LOCKED: '/workspace-locked',
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
-	SHORTCUTS: '/shortcuts',
+	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/constants/userPreferences.ts

@@ -0,0 +1,4 @@
+export const USER_PREFERENCES = {
+	SIDENAV_PINNED: 'sidenav_pinned',
+	NAV_SHORTCUTS: 'nav_shortcuts',
+};

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -7,7 +7,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { Channels } from 'types/api/channels/getAll';
@@ -17,12 +17,11 @@ import Delete from './Delete';
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { notifications } = useNotifications();
-	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { user } = useAppContext();
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
 	const onClickEditHandler = useCallback((id: string) => {
-		history.replace(
+		history.push(
 			generatePath(ROUTES.CHANNELS_EDIT, {
 				id,
 			}),
@@ -56,14 +55,19 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 					<Button onClick={(): void => onClickEditHandler(id)} type="link">
 						{t('column_channel_edit')}
 					</Button>
-					<Delete id={id} setChannels={setChannels} notifications={notifications} />
+					<Delete id={id} notifications={notifications} />
 				</>
 			),
 		});
 	}
 
 	return (
-		<ResizeTable columns={columns} dataSource={channels} rowKey="id" bordered />
+		<ResizeTable
+			columns={columns}
+			dataSource={allChannels}
+			rowKey="id"
+			bordered
+		/>
 	);
 }
 

frontend/src/container/AllAlertChannels/AllAlertChannels.styles.scss

@@ -0,0 +1,4 @@
+.alert-channels-container {
+	width: 90%;
+	margin: 12px auto;
+}

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,14 +1,15 @@
 import { Button } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Channels } from 'types/api/channels/getAll';
+import { useQueryClient } from 'react-query';
 import APIError from 'types/api/error';
 
-function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
+function Delete({ notifications, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const [loading, setLoading] = useState(false);
+	const queryClient = useQueryClient();
 
 	const onClickHandler = async (): Promise<void> => {
 		try {
@@ -21,7 +22,8 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 				message: 'Success',
 				description: t('channel_delete_success'),
 			});
-			setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
+			// Invalidate and refetch
+			queryClient.invalidateQueries(['getChannels']);
 			setLoading(false);
 		} catch (error) {
 			notifications.error({
@@ -46,7 +48,6 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 
 interface DeleteProps {
 	notifications: NotificationInstance;
-	setChannels: Dispatch<SetStateAction<Channels[]>>;
 	id: string;
 }
 

frontend/src/container/AllAlertChannels/index.tsx

@@ -1,3 +1,5 @@
+import './AllAlertChannels.styles.scss';
+
 import { PlusOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import getAll from 'api/channels/getAll';
@@ -56,7 +58,7 @@ function AlertChannels(): JSX.Element {
 	}
 
 	return (
-		<>
+		<div className="alert-channels-container">
 			<ButtonContainer>
 				<Paragraph ellipsis type="secondary">
 					{t('sending_channels_note')}
@@ -87,7 +89,7 @@ function AlertChannels(): JSX.Element {
 			</ButtonContainer>
 
 			<AlertChannelsComponent allChannels={data?.data || []} />
-		</>
+		</div>
 	);
 }
 

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -22,6 +22,12 @@
 			width: 100%;
 		}
 	}
+
+	&.side-nav-pinned {
+		.app-content {
+			width: calc(100% - 240px);
+		}
+	}
 }
 
 .chat-support-gateway {

frontend/src/container/AppLayout/index.tsx

@@ -18,6 +18,7 @@ import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
+import { USER_PREFERENCES } from 'constants/userPreferences';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -27,7 +28,6 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { INTEGRATION_TYPES } from 'pages/Integrations/utils';
 import { useAppContext } from 'providers/App/App';
 import {
 	ReactNode,
@@ -41,7 +41,7 @@ import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import {
@@ -80,6 +80,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		featureFlags,
 		isFetchingFeatureFlags,
 		featureFlagsFetchError,
+		userPreferences,
 	} = useAppContext();
 
 	const { notifications } = useNotifications();
@@ -330,53 +331,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		});
 	}, [manageCreditCard]);
 
-	const isHome = (): boolean => routeKey === 'HOME';
-
-	const isLogsView = (): boolean =>
-		routeKey === 'LOGS' ||
-		routeKey === 'LOGS_EXPLORER' ||
-		routeKey === 'LOGS_PIPELINES' ||
-		routeKey === 'LOGS_SAVE_VIEWS';
-
-	const isApiMonitoringView = (): boolean => routeKey === 'API_MONITORING';
-
-	const isExceptionsView = (): boolean => routeKey === 'ALL_ERROR';
-
-	const isTracesView = (): boolean =>
-		routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
-
-	const isMessagingQueues = (): boolean =>
-		routeKey === 'MESSAGING_QUEUES_KAFKA' ||
-		routeKey === 'MESSAGING_QUEUES_KAFKA_DETAIL' ||
-		routeKey === 'MESSAGING_QUEUES_CELERY_TASK' ||
-		routeKey === 'MESSAGING_QUEUES_OVERVIEW';
-
-	const isCloudIntegrationPage = (): boolean =>
-		routeKey === 'INTEGRATIONS' &&
-		new URLSearchParams(window.location.search).get('integration') ===
-			INTEGRATION_TYPES.AWS_INTEGRATION;
-
-	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
-	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
-	const isAlertOverview = (): boolean => routeKey === 'ALERT_OVERVIEW';
-	const isInfraMonitoring = (): boolean =>
-		routeKey === 'INFRASTRUCTURE_MONITORING_HOSTS' ||
-		routeKey === 'INFRASTRUCTURE_MONITORING_KUBERNETES';
-	const isTracesFunnels = (): boolean => routeKey === 'TRACES_FUNNELS';
-	const isTracesFunnelDetails = (): boolean =>
-		!!matchPath(pathname, ROUTES.TRACES_FUNNELS_DETAIL);
-
-	const isPathMatch = (regex: RegExp): boolean => regex.test(pathname);
-
-	const isDashboardView = (): boolean =>
-		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+$/);
-
-	const isDashboardWidgetView = (): boolean =>
-		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+\/new$/);
-
-	const isTraceDetailsView = (): boolean =>
-		isPathMatch(/^\/trace\/[a-zA-Z0-9]+(\?.*)?$/);
-
 	useEffect(() => {
 		if (isDarkMode) {
 			document.body.classList.remove('lightMode');
@@ -593,6 +547,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		</div>
 	);
 
+	const sideNavPinned = userPreferences?.find(
+		(preference) => preference.name === USER_PREFERENCES.SIDENAV_PINNED,
+	)?.value as boolean;
+
 	return (
 		<Layout className={cx(isDarkMode ? 'darkMode dark' : 'lightMode')}>
 			<Helmet>
@@ -645,9 +603,15 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			)}
 
 			<Flex
-				className={cx('app-layout', isDarkMode ? 'darkMode dark' : 'lightMode')}
+				className={cx(
+					'app-layout',
+					isDarkMode ? 'darkMode dark' : 'lightMode',
+					sideNavPinned ? 'side-nav-pinned' : '',
+				)}
 			>
-				{isToDisplayLayout && !renderFullScreen && <SideNav />}
+				{isToDisplayLayout && !renderFullScreen && (
+					<SideNav isPinned={sideNavPinned} />
+				)}
 				<div
 					className={cx('app-content', {
 						'full-screen-content': renderFullScreen,
@@ -657,32 +621,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 						<LayoutContent data-overlayscrollbars-initialize>
 							<OverlayScrollbar>
-								<ChildrenContainer
-									style={{
-										margin:
-											isHome() ||
-											isLogsView() ||
-											isTracesView() ||
-											isDashboardView() ||
-											isDashboardWidgetView() ||
-											isDashboardListView() ||
-											isAlertHistory() ||
-											isAlertOverview() ||
-											isMessagingQueues() ||
-											isCloudIntegrationPage() ||
-											isInfraMonitoring() ||
-											isApiMonitoringView() ||
-											isExceptionsView()
-												? 0
-												: '0 1rem',
-
-										...(isTraceDetailsView() ||
-										isTracesFunnels() ||
-										isTracesFunnelDetails()
-											? { margin: 0 }
-											: {}),
-									}}
-								>
+								<ChildrenContainer>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}
 									{children}
 								</ChildrenContainer>

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -1,7 +1,8 @@
 .billing-container {
 	margin-bottom: 40px;
 	padding-top: 36px;
-	width: 65%;
+	width: 90%;
+	margin: 0 auto;
 
 	.billing-summary {
 		margin: 24px 8px;

frontend/src/container/CreateAlertChannels/CreateAlertChannels.styles.scss

@@ -0,0 +1,15 @@
+.create-alert-channels-container {
+	width: 90%;
+	margin: 12px auto;
+
+	border: 1px solid var(--Slate-500, #161922);
+	background: var(--Ink-400, #121317);
+	border-radius: 3px;
+
+	padding: 16px;
+
+	.form-alert-channels-title {
+		margin-top: 0px;
+		margin-bottom: 16px;
+	}
+}

frontend/src/container/CreateAlertChannels/index.tsx

@@ -1,3 +1,5 @@
+import './CreateAlertChannels.styles.scss';
+
 import { Form } from 'antd';
 import createEmail from 'api/channels/createEmail';
 import createMsTeamsApi from 'api/channels/createMsTeams';
@@ -477,26 +479,28 @@ function CreateAlertChannels({
 	);
 
 	return (
-		<FormAlertChannels
-			{...{
-				formInstance,
-				onTypeChangeHandler,
-				setSelectedConfig,
-				type,
-				onTestHandler,
-				onSaveHandler,
-				savingState,
-				testingState,
-				title: t('page_title_create'),
-				initialValue: {
+		<div className="create-alert-channels-container">
+			<FormAlertChannels
+				{...{
+					formInstance,
+					onTypeChangeHandler,
+					setSelectedConfig,
 					type,
-					...selectedConfig,
-					...PagerInitialConfig,
-					...OpsgenieInitialConfig,
-					...EmailInitialConfig,
-				},
-			}}
-		/>
+					onTestHandler,
+					onSaveHandler,
+					savingState,
+					testingState,
+					title: t('page_title_create'),
+					initialValue: {
+						type,
+						...selectedConfig,
+						...PagerInitialConfig,
+						...OpsgenieInitialConfig,
+						...EmailInitialConfig,
+					},
+				}}
+			/>
+		</div>
 	);
 }