feat: integrate custom quick filters in logs

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.40
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.40
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @SigNoz/frontend @YounixM
+/frontend/ @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @SigNoz/devops

.github/pull_request_template.md

@@ -1,74 +1,17 @@
-## 📄 Summary
+### Summary
 
-<!-- Describe the purpose of the PR in a few sentences. What does it fix/add/update? -->
+<!-- ✍️ A clear and concise description...-->
 
----
+#### Related Issues / PR's
 
-## ✅ Changes
+<!-- ✍️ Add the issues being resolved here and related PR's where applicable  -->
 
-- [ ] Feature: Brief description
-- [ ] Bug fix: Brief description
+#### Screenshots
 
----
+NA
 
-## 🏷️ Required: Add Relevant Labels
+<!-- ✍️ Add screenshots of before and after changes where applicable-->
 
-> ⚠️ **Manually add appropriate labels in the PR sidebar**  
-Please select one or more labels (as applicable):
+#### Affected Areas and Manually Tested Areas
 
-ex:
-
-- `frontend`
-- `backend`
-- `devops`
-- `bug`
-- `enhancement`
-- `ui`
-- `test`
-
----
-
-## 👥 Reviewers
-
-> Tag the relevant teams for review:
-
-- [ ] @SigNoz/frontend
-- [ ] @SigNoz/backend
-- [ ] @SigNoz/devops
-
----
-
-## 🧪 How to Test
-
-<!-- Describe how reviewers can test this PR -->
-1. ...
-2. ...
-3. ...
-
----
-
-## 🔍 Related Issues
-
-<!-- Reference any related issues (e.g. Fixes #123, Closes #456) -->
-Closes #
-
----
-
-## 📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)
-
-<!-- Add screenshots or GIFs to help visualize changes -->
-
----
-
-## 📋 Checklist
-
-- [ ] Dev Review
-- [ ] Test cases added (Unit/ Integration / E2E)
-- [ ] Manually tested the changes
-
-
----
-
-## 👀 Notes for Reviewers
-
-<!-- Anything reviewers should keep in mind while reviewing -->
+<!-- ✍️ Add details of blast radius and dev testing areas where applicable-->

.github/workflows/build-community.yaml

@@ -62,7 +62,6 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build

.github/workflows/build-enterprise.yaml

@@ -94,7 +94,6 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service

.github/workflows/build-staging.yaml

@@ -91,7 +91,6 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service

.github/workflows/goci.yaml

@@ -18,7 +18,6 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_TEST_CONTEXT: ./...
-      GO_VERSION: 1.23
   fmt:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -27,7 +26,6 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
   lint:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -36,7 +34,6 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
   build:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -48,7 +45,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.22"
       - name: qemu-install
         uses: docker/setup-qemu-action@v3
       - name: aarch64-install

.github/workflows/gor-signoz-community.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.22"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -122,7 +122,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.22"
 
       # copy the caches from build
       - name: get-sha

.github/workflows/gor-signoz.yaml

@@ -73,7 +73,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.22"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -136,7 +136,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.22"
 
       # copy the caches from build
       - name: get-sha

.gitignore

@@ -60,7 +60,9 @@ ee/query-service/db
 
 e2e/node_modules/
 e2e/test-results/
+e2e/playwright-report/
 e2e/blob-report/
+e2e/playwright/.cache/
 e2e/.auth
 
 # go

Makefile

@@ -76,7 +76,9 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_ENTERPRISE)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster
+		--cluster cluster \
+		--use-logs-new-schema true \
+		--use-trace-new-schema true
 
 .PHONY: go-test
 go-test: ## Runs go unit tests
@@ -94,7 +96,9 @@ go-run-community: ## Runs the community go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_COMMUNITY)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster
+		--cluster cluster \
+		--use-logs-new-schema true \
+		--use-trace-new-schema true
 
 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community

conf/example.yaml

@@ -164,9 +164,3 @@ alertmanager:
       maintenance_interval: 15m
       # Retention of the notification logs.
       retention: 120h
-
-
-##################### Analytics #####################
-analytics:
-  # Whether to enable analytics.
-  enabled: false

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

@@ -174,9 +174,11 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.82.0
+    image: signoz/signoz:v0.81.0
     command:
       - --config=/root/config/prometheus.yml
+      - --use-logs-new-schema=true
+      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -206,7 +208,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.41
+    image: signoz/signoz-otel-collector:v0.111.40
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -230,7 +232,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.40
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -110,9 +110,11 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.82.0
+    image: signoz/signoz:v0.81.0
     command:
       - --config=/root/config/prometheus.yml
+      - --use-logs-new-schema=true
+      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -141,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.41
+    image: signoz/signoz-otel-collector:v0.111.40
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -165,7 +167,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.40
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/otel-collector-config.yaml

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
+    metrics_exporter: clickhousemetricswrite
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -64,10 +64,8 @@ exporters:
     endpoint: tcp://clickhouse:9000/signoz_metrics
     resource_to_telemetry_conversion:
       enabled: true
-    disable_v2: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:

deploy/docker/docker-compose.ha.yaml

@@ -177,10 +177,12 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.82.0}
+    image: signoz/signoz:${VERSION:-v0.81.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
+      - --use-logs-new-schema=true
+      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -210,7 +212,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.40}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -236,7 +238,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.40}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -247,7 +249,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.40}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,10 +110,12 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.82.0}
+    image: signoz/signoz:${VERSION:-v0.81.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
+      - --use-logs-new-schema=true
+      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -142,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.40}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -164,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.40}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -176,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.40}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/otel-collector-config.yaml

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
+    metrics_exporter: clickhousemetricswrite
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -62,12 +62,10 @@ exporters:
     use_new_schema: true
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
     resource_to_telemetry_conversion:
       enabled: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:

ee/query-service/Dockerfile.integration

@@ -1,4 +1,4 @@
-FROM golang:1.23-bullseye
+FROM golang:1.22-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

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

@@ -41,8 +41,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	dashboard, apiErr := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
-	if apiErr != nil {
+	dashboard, err := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
+	if err != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get dashboard"))
 		return
 	}
@@ -53,8 +53,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 	}
 
 	// Lock/Unlock the dashboard
-	apiErr = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
-	if apiErr != nil {
+	err = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
+	if err != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to lock/unlock dashboard"))
 		return
 	}

ee/query-service/app/server.go

@@ -322,7 +322,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.MetricExplorerRoutes(r, am)
-	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},

ee/query-service/model/plans.go

@@ -62,6 +62,13 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       basemodel.TraceFunnels,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -114,4 +121,11 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       basemodel.TraceFunnels,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }

ee/sqlstore/postgressqlstore/provider.go

@@ -106,7 +106,3 @@ func (provider *provider) WrapAlreadyExistsErrf(err error, code errors.Code, for
 
 	return err
 }
-
-func (dialect *dialect) ToggleForeignKeyConstraint(ctx context.Context, bun *bun.DB, enable bool) error {
-	return nil
-}

frontend/.prettierignore

@@ -1,10 +1,6 @@
 # Ignore artifacts:
 build
 coverage
-public/
 
 # Ignore all MD files:
-**/*.md
-
-# Ignore all JSON files:
-**/*.json
+**/*.md

frontend/example.env

@@ -3,4 +3,5 @@ BUNDLE_ANALYSER="true"
 FRONTEND_API_ENDPOINT="http://localhost:8080/"
 INTERCOM_APP_ID="intercom-app-id"
 
+PLAYWRIGHT_TEST_BASE_URL="http://localhost:8080"
 CI="1"

frontend/jest.config.ts

@@ -30,6 +30,11 @@ const config: Config.InitialOptions = {
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',
+	testEnvironmentOptions: {
+		'jest-playwright': {
+			browsers: ['chromium', 'firefox', 'webkit'],
+		},
+	},
 	coverageThreshold: {
 		global: {
 			statements: 80,

frontend/package.json

@@ -15,6 +15,10 @@
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
 		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)",
+		"playwright": "NODE_ENV=testing playwright test --config=./playwright.config.ts",
+		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
+		"playwright:codegen:local": "playwright codegen http://localhost:3301",
+		"playwright:codegen:local:auth": "yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
@@ -28,9 +32,10 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
-		"@dnd-kit/core": "6.1.0",
+		"@dnd-kit/core": "6.3.1",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
+		"@dnd-kit/utilities": "3.2.2",
 		"@grafana/data": "^11.2.3",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
@@ -78,7 +83,6 @@
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.3",
-		"http-status-codes": "2.3.0",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
@@ -87,7 +91,7 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
-		"lucide-react": "0.498.0",
+		"lucide-react": "0.427.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
 		"overlayscrollbars": "^2.8.1",
@@ -160,6 +164,7 @@
 		"@commitlint/config-conventional": "^16.2.4",
 		"@faker-js/faker": "9.3.0",
 		"@jest/globals": "^27.5.1",
+		"@playwright/test": "^1.22.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",
@@ -253,7 +258,6 @@
 		"http-proxy-middleware": "3.0.3",
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
-		"serialize-javascript": "6.0.2",
-		"prismjs": "1.30.0"
+		"serialize-javascript": "6.0.2"
 	}
 }

frontend/playwright.config.ts

@@ -0,0 +1,23 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const config: PlaywrightTestConfig = {
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	preserveOutput: 'always',
+	name: 'Signoz',
+	testDir: './tests',
+	use: {
+		trace: 'retain-on-failure',
+		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3301',
+	},
+	updateSnapshots: 'all',
+	fullyParallel: !!process.env.CI,
+	quiet: false,
+	testMatch: ['**/*.spec.ts'],
+	reporter: process.env.CI ? 'github' : 'list',
+};
+
+export default config;

frontend/public/Icons/funnel-add.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="m12.192 3.18-1.167 2.33-.583 1.165M7.31 12.74a.583.583 0 0 1-.835-.24L1.808 3.179"/><path d="M7 1.167c2.9 0 5.25.783 5.25 1.75 0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75c0-.967 2.35-1.75 5.25-1.75ZM8.75 10.5h3.5M10.5 12.25v-3.5"/></g></svg>

frontend/public/Icons/solid-info-circle.svg

@@ -1 +0,0 @@
-<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14.666A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.333Z" fill="#C0C1C3" stroke="#C0C1C3" stroke-width="2"/><path d="M8 11.333v-4H6.333M8 4.667h.007" stroke="#121317" stroke-width="1.333"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/scripts/typecheck-staged.sh

@@ -9,7 +9,7 @@ done
 # create temporary tsconfig which includes only passed files
 str="{
   \"extends\": \"./tsconfig.json\",
-  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
+  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./conf/default.conf\",\"./public\",\"./tests\",\"./playwright.config.ts\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
 }"
 echo $str > tsconfig.tmp
 

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getOrgUser from 'api/v1/user/getOrgUser';
+import getOrgUser from 'api/user/getOrgUser';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';

frontend/src/AppRoutes/pageComponents.ts

@@ -47,10 +47,9 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
-	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
-			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
+			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesFunnelDetails'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -531,7 +531,6 @@ export const oldRoutes = [
 	'/traces-save-views',
 	'/settings/access-tokens',
 	'/messaging-queues',
-	'/alerts/edit',
 ];
 
 export const oldNewRoutesMapping: Record<string, string> = {
@@ -542,7 +541,6 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/api-keys',
 	'/messaging-queues': '/messaging-queues/overview',
-	'/alerts/edit': '/alerts/overview',
 };
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -1,46 +0,0 @@
-import { AxiosError } from 'axios';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-// reference - https://axios-http.com/docs/handling_errors
-export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
-	const { response, request } = error;
-	// The request was made and the server responded with a status code
-	// that falls out of the range of 2xx
-	if (response) {
-		throw new APIError({
-			httpStatusCode: response.status || 500,
-			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
-			},
-		});
-	}
-	// The request was made but no response was received
-	// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-	// http.ClientRequest in node.js
-	if (request) {
-		throw new APIError({
-			httpStatusCode: error.status || 500,
-			error: {
-				code: error.code || error.name,
-				message: error.message,
-				url: '',
-				errors: [],
-			},
-		});
-	}
-
-	// Something happened in setting up the request that triggered an Error
-	throw new APIError({
-		httpStatusCode: error.status || 500,
-		error: {
-			code: error.name,
-			message: error.message,
-			url: '',
-			errors: [],
-		},
-	});
-}

frontend/src/api/channels/createEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,12 +21,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/createMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,12 +21,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/createOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,12 +24,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/createPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,12 +29,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/createSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,12 +22,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/createWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const create = async (
 			};
 		}
 
-		const response = await axios.post<PayloadProps>('/channels', {
+		const response = await axios.post('/channels', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,12 +40,13 @@ const create = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/delete.ts

@@ -1,22 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/delete';
 
 const deleteChannel = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);
+		const response = await axios.delete(`/channels/${props.id}`);
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editEmail';
 
 const editEmail = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,12 +21,13 @@ const editEmail = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
 
 const editMsTeams = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,12 +21,13 @@ const editMsTeams = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
 
 const editOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -25,12 +25,13 @@ const editOpsgenie = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editPager';
 
 const editPager = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,12 +29,13 @@ const editPager = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editSlack';
 
 const editSlack = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,12 +22,13 @@ const editSlack = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/editWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editWebhook';
 
 const editWebhook = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const editWebhook = async (
 			};
 		}
 
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+		const response = await axios.put(`/channels/${props.id}`, {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,12 +40,13 @@ const editWebhook = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/get.ts

@@ -1,21 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/get';
-import { Channels } from 'types/api/channels/getAll';
 
-const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
+const get = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);
+		const response = await axios.get(`/channels/${props.id}`);
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/getAll.ts

@@ -1,20 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Channels, PayloadProps } from 'types/api/channels/getAll';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps } from 'types/api/channels/getAll';
 
-const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
+const getAll = async (): Promise<
+	SuccessResponse<PayloadProps> | ErrorResponse
+> => {
 	try {
-		const response = await axios.get<PayloadProps>('/channels');
+		const response = await axios.get('/channels');
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
 const testEmail = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,12 +21,13 @@ const testEmail = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
 const testMsTeams = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,12 +21,13 @@ const testMsTeams = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
 const testOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,12 +24,13 @@ const testOpsgenie = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
 const testPager = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,12 +29,13 @@ const testPager = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
 const testSlack = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,12 +22,13 @@ const testSlack = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/channels/testWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
 const testWebhook = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const testWebhook = async (
 			};
 		}
 
-		const response = await axios.post<PayloadProps>('/testChannel', {
+		const response = await axios.post('/testChannel', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,12 +40,13 @@ const testWebhook = async (
 		});
 
 		return {
-			httpStatusCode: response.status,
-			data: response.data,
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

frontend/src/api/index.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import getLocalStorageApi from 'api/browser/localstorage/get';
-import loginApi from 'api/v1/user/login';
+import loginApi from 'api/user/login';
 import afterLogin from 'AppRoutes/utils';
 import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';

frontend/src/api/metricsExplorer/getInspectMetricsDetails.ts

@@ -1,54 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-export interface InspectMetricsRequest {
-	metricName: string;
-	start: number;
-	end: number;
-	filters: TagFilter;
-}
-
-export interface InspectMetricsResponse {
-	status: string;
-	data: {
-		series: InspectMetricsSeries[];
-	};
-}
-
-export interface InspectMetricsSeries {
-	title?: string;
-	strokeColor?: string;
-	labels: Record<string, string>;
-	labelsArray: Array<Record<string, string>>;
-	values: InspectMetricsTimestampValue[];
-}
-
-interface InspectMetricsTimestampValue {
-	timestamp: number;
-	value: string;
-}
-
-export const getInspectMetricsDetails = async (
-	request: InspectMetricsRequest,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponse<InspectMetricsResponse> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/metrics/inspect`, request, {
-			signal,
-			headers,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
+
+const getCustomFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	const { signal } = props;
+	try {
+		const response = await ApiBaseInstance.get(`orgs/me/filters/${signal}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,13 @@
+import { ApiBaseInstance } from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
+
+const updateCustomFiltersAPI = async (
+	props: UpdateCustomFiltersProps,
+): Promise<SuccessResponse<void> | AxiosError> =>
+	ApiBaseInstance.put(`orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

frontend/src/api/traceFunnels/index.ts

@@ -5,7 +5,6 @@ import {
 	CreateFunnelPayload,
 	CreateFunnelResponse,
 	FunnelData,
-	FunnelStepData,
 } from 'types/api/traceFunnels';
 
 const FUNNELS_BASE_PATH = '/trace-funnels';
@@ -14,7 +13,7 @@ export const createFunnel = async (
 	payload: CreateFunnelPayload,
 ): Promise<SuccessResponse<CreateFunnelResponse> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/new`,
+		`${FUNNELS_BASE_PATH}/new-funnel`,
 		payload,
 	);
 
@@ -26,45 +25,60 @@ export const createFunnel = async (
 	};
 };
 
-export const getFunnelsList = async (): Promise<
+interface GetFunnelsListParams {
+	search?: string;
+}
+
+export const getFunnelsList = async ({
+	search = '',
+}: GetFunnelsListParams = {}): Promise<
 	SuccessResponse<FunnelData[]> | ErrorResponse
 > => {
-	const response: AxiosResponse = await axios.get(`${FUNNELS_BASE_PATH}/list`);
+	const params = new URLSearchParams();
+	if (search.length) {
+		params.set('search', search);
+	}
+
+	const response: AxiosResponse = await axios.get(
+		`${FUNNELS_BASE_PATH}/list${
+			params.toString() ? `?${params.toString()}` : ''
+		}`,
+	);
 
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data.data,
+		payload: response.data,
 	};
 };
 
 export const getFunnelById = async (
-	funnelId?: string,
+	funnelId: string,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/${funnelId}`,
+		`${FUNNELS_BASE_PATH}/get/${funnelId}`,
 	);
+
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data.data,
+		payload: response.data,
 	};
 };
 
-export interface RenameFunnelPayload {
-	funnel_id: string;
+interface RenameFunnelPayload {
+	id: string;
 	funnel_name: string;
-	timestamp: number;
 }
 
 export const renameFunnel = async (
 	payload: RenameFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.put(
-		`${FUNNELS_BASE_PATH}/${payload.funnel_id}`,
-		payload,
+		`${FUNNELS_BASE_PATH}/${payload.id}/update`,
+		{ funnel_name: payload.funnel_name },
 	);
 
 	return {
@@ -83,7 +97,7 @@ export const deleteFunnel = async (
 	payload: DeleteFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.delete(
-		`${FUNNELS_BASE_PATH}/${payload.id}`,
+		`${FUNNELS_BASE_PATH}/delete/${payload.id}`,
 	);
 
 	return {
@@ -93,247 +107,3 @@ export const deleteFunnel = async (
 		payload: response.data,
 	};
 };
-
-export interface UpdateFunnelStepsPayload {
-	funnel_id: string;
-	steps: FunnelStepData[];
-	timestamp: number;
-}
-
-export const updateFunnelSteps = async (
-	payload: UpdateFunnelStepsPayload,
-): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
-	const response: AxiosResponse = await axios.put(
-		`${FUNNELS_BASE_PATH}/steps/update`,
-		payload,
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Funnel steps updated successfully',
-		payload: response.data.data,
-	};
-};
-
-export interface ValidateFunnelPayload {
-	start_time: number;
-	end_time: number;
-}
-
-export interface ValidateFunnelResponse {
-	status: string;
-	data: Array<{
-		timestamp: string;
-		data: {
-			trace_id: string;
-		};
-	}> | null;
-}
-
-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`,
-		payload,
-		{ signal },
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: response.data,
-	};
-};
-
-export interface UpdateFunnelStepDetailsPayload {
-	funnel_id: string;
-	steps: Array<{
-		step_name: string;
-		description: string;
-	}>;
-	updated_at: number;
-}
-
-interface UpdateFunnelDescriptionPayload {
-	funnel_id: string;
-	description: string;
-}
-
-export const saveFunnelDescription = async (
-	payload: UpdateFunnelDescriptionPayload,
-): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
-	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/save`,
-		payload,
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Funnel description updated successfully',
-		payload: response.data,
-	};
-};
-
-export interface FunnelOverviewPayload {
-	start_time: number;
-	end_time: number;
-	step_start?: number;
-	step_end?: number;
-}
-
-export interface FunnelOverviewResponse {
-	status: string;
-	data: Array<{
-		timestamp: string;
-		data: {
-			avg_duration: number;
-			avg_rate: number;
-			conversion_rate: number | null;
-			errors: number;
-			p99_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`,
-		payload,
-		{
-			signal,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: response.data,
-	};
-};
-
-export interface SlowTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
-
-export interface SlowTraceData {
-	status: string;
-	data: Array<{
-		timestamp: string;
-		data: {
-			duration_ms: string;
-			span_count: number;
-			trace_id: string;
-		};
-	}>;
-}
-
-export const getFunnelSlowTraces = async (
-	funnelId: string,
-	payload: SlowTracesPayload,
-	signal?: AbortSignal,
-): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
-	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
-		payload,
-		{
-			signal,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: response.data,
-	};
-};
-export interface ErrorTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
-
-export interface ErrorTraceData {
-	status: string;
-	data: Array<{
-		timestamp: string;
-		data: {
-			duration_ms: string;
-			span_count: number;
-			trace_id: string;
-		};
-	}>;
-}
-
-export const getFunnelErrorTraces = async (
-	funnelId: string,
-	payload: ErrorTracesPayload,
-	signal?: AbortSignal,
-): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
-	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
-		payload,
-		{
-			signal,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: response.data,
-	};
-};
-
-export interface FunnelStepsPayload {
-	start_time: number;
-	end_time: number;
-}
-
-export interface FunnelStepGraphMetrics {
-	[key: `total_s${number}_spans`]: number;
-	[key: `total_s${number}_errored_spans`]: number;
-}
-
-export interface FunnelStepsResponse {
-	status: string;
-	data: Array<{
-		timestamp: string;
-		data: FunnelStepGraphMetrics;
-	}>;
-}
-
-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`,
-		payload,
-		{ signal },
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: response.data,
-	};
-};

frontend/src/api/user/getPreference.ts

@@ -8,7 +8,7 @@ const getPreference = async (): Promise<
 	SuccessResponse<PayloadProps> | ErrorResponse
 > => {
 	try {
-		const response = await axios.get(`/user/preferences`);
+		const response = await axios.get(`/userPreferences`);
 
 		return {
 			statusCode: 200,

frontend/src/api/utils.ts

@@ -12,7 +12,7 @@ export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
-
+	deleteLocalStorageKey(LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment

frontend/src/api/v1/login/login.ts

@@ -1,26 +0,0 @@
-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/user/login';
-
-const login = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>(`/login`, {
-			...props,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		// this line is never reached but ts isn't detecting the never type properly for the ErrorResponseHandlerV2
-		throw error;
-	}
-};
-
-export default login;

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

@@ -9,27 +9,18 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
-export interface SelectOptionConfig {
+interface SelectOptionConfig {
 	placeholder: string;
 	queryParam: QueryParams;
 	filterType: string | string[];
-	shouldSetQueryParams?: boolean;
-	onChange?: (value: string | string[]) => void;
-	values?: string | string[];
-	isMultiple?: boolean;
 }
 
-export function FilterSelect({
+function FilterSelect({
 	placeholder,
 	queryParam,
 	filterType,
-	values,
-	shouldSetQueryParams,
-	onChange,
-	isMultiple,
 }: SelectOptionConfig): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		filterType,
@@ -39,73 +30,20 @@ export function FilterSelect({
 	const history = useHistory();
 	const location = useLocation();
 
-	// Add state to track the current search input
-	const [searchValue, setSearchValue] = useState<string>('');
-
-	// Use externally provided `values` if `shouldSetQueryParams` is false, otherwise get from URL params.
-	const selectValue =
-		!shouldSetQueryParams && !!values?.length
-			? values
-			: getValuesFromQueryParams(queryParam, urlQuery) || [];
-
-	// Memoize options to include the typed value if not present
-	const mergedOptions = useMemo(() => {
-		if (
-			!!searchValue.trim().length &&
-			!options.some((opt) => opt.value === searchValue)
-		) {
-			return [{ value: searchValue, label: searchValue }, ...options];
-		}
-		return options;
-	}, [options, searchValue]);
-
-	const handleSelectChange = useCallback(
-		(value: string | string[]): void => {
-			handleSearch('');
-			setSearchValue(''); // Clear search value after selection
-			if (shouldSetQueryParams) {
-				setQueryParamsFromOptions(
-					value as string[],
-					urlQuery,
-					history,
-					location,
-					queryParam,
-				);
-			}
-			onChange?.(value);
-		},
-		[
-			handleSearch,
-			shouldSetQueryParams,
-			urlQuery,
-			history,
-			location,
-			queryParam,
-			onChange,
-		],
-	);
-
-	// Update searchValue on user input
-	const handleSearchInput = (input: string): void => {
-		setSearchValue(input);
-		handleSearch(input);
-	};
-
 	return (
 		<Select
 			key={filterType.toString()}
 			placeholder={placeholder}
 			showSearch
-			// eslint-disable-next-line react/jsx-props-no-spreading
-			{...(isMultiple ? { mode: 'multiple' } : {})}
-			options={mergedOptions}
+			mode="multiple"
+			options={options}
 			loading={isFetching}
 			className="config-select-option"
-			onSearch={handleSearchInput}
+			onSearch={handleSearch}
 			maxTagCount={4}
 			allowClear
 			maxTagPlaceholder={SelectMaxTagPlaceholder}
-			value={selectValue}
+			value={getValuesFromQueryParams(queryParam, urlQuery) || []}
 			notFoundContent={
 				isFetching ? (
 					<span>
@@ -115,18 +53,14 @@ export function FilterSelect({
 					<span>No {placeholder} found</span>
 				)
 			}
-			onChange={handleSelectChange}
+			onChange={(value): void => {
+				handleSearch('');
+				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
+			}}
 		/>
 	);
 }
 
-FilterSelect.defaultProps = {
-	shouldSetQueryParams: true,
-	onChange: (): void => {},
-	values: [],
-	isMultiple: true,
-};
-
 function CeleryOverviewConfigOptions(): JSX.Element {
 	const selectConfigs: SelectOptionConfig[] = [
 		{

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -1,40 +0,0 @@
-.change-percentage-pill {
-	display: flex;
-	align-items: center;
-	gap: 2px;
-	padding: 1px 4px;
-	border-radius: 50px;
-
-	&__icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	&__label {
-		font-family: 'Geist Mono';
-		font-size: 12px;
-		line-height: normal;
-	}
-	&--positive {
-		.change-percentage-pill {
-			&__icon {
-				color: var(--bg-forest-500);
-			}
-			&__label {
-				color: var(--bg-forest-500);
-			}
-		}
-	}
-	&--negative {
-		background: rgba(229, 72, 77, 0.1);
-
-		.change-percentage-pill {
-			&__icon {
-				color: var(--bg-cherry-500);
-			}
-			&__label {
-				color: var(--bg-cherry-500);
-			}
-		}
-	}
-}

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -1,38 +0,0 @@
-import './ChangePercentagePill.styles.scss';
-
-import { Color } from '@signozhq/design-tokens';
-import cx from 'classnames';
-import { ArrowDown, ArrowUp } from 'lucide-react';
-
-interface ChangePercentagePillProps {
-	percentage: number;
-	direction: number;
-}
-function ChangePercentagePill({
-	percentage,
-	direction,
-}: ChangePercentagePillProps): JSX.Element | null {
-	if (direction === 0 || percentage === 0) {
-		return null;
-	}
-	const isPositive = direction > 0;
-	return (
-		<div
-			className={cx('change-percentage-pill', {
-				'change-percentage-pill--positive': isPositive,
-				'change-percentage-pill--negative': !isPositive,
-			})}
-		>
-			<div className="change-percentage-pill__icon">
-				{isPositive ? (
-					<ArrowUp size={12} color={Color.BG_FOREST_500} />
-				) : (
-					<ArrowDown size={12} color={Color.BG_CHERRY_500} />
-				)}
-			</div>
-			<div className="change-percentage-pill__label">{percentage}%</div>
-		</div>
-	);
-}
-
-export default ChangePercentagePill;

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,11 +1,11 @@
 .dropdown-button {
-	color: #fff;
+    color: #fff;
 }
 
 .dropdown-button--dark {
-	color: #000;
+    color: #000;
 }
 
 .dropdown-icon {
-	font-size: 1.2rem;
-}
+    font-size: 1.2rem;
+}

frontend/src/components/LearnMore/LearnMore.styles.scss

@@ -1,15 +1,14 @@
 .learn-more {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 0;
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
-	&,
-	&:hover {
-		color: var(--bg-robin-400) !important;
-	}
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 18px; /* 128.571% */
+    letter-spacing: -0.07px;
+    &,&:hover {
+        color: var(--bg-robin-400) !important;    
+    }
 }

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

@@ -19,7 +19,7 @@ import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSea
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEmpty, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -82,7 +82,9 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const attributeValues: string[] = useMemo(() => {
 		const dataType = filter.attributeKey.dataType || DataTypes.String;
 		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter((val) => !isEmpty(val));
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
 	}, [data?.payload, filter.attributeKey.dataType]);
 
 	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);

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

@@ -1,7 +1,17 @@
+.quick-filters-container {
+	display: flex;
+	height: 100%;
+	.quick-filters-settings-container {
+		position: relative;
+	}
+}
+
+
 .quick-filters {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	width: 100%;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
@@ -52,7 +62,7 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: 12px;
+			gap: 10px;
 			width: 100%;
 			justify-content: flex-end;
 
@@ -63,10 +73,26 @@
 			}
 
 			.sync-icon {
-				background-color: var(--bg-ink-500);
 				border: 0;
 				box-shadow: none;
 			}
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--bg-ink-500);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+				
+				&.active, &:hover {
+					background: var(--bg-slate-500);
+				}
+			}
+			
 		}
 	}
 }
@@ -90,8 +116,11 @@
 				}
 			}
 			.right-actions {
-				.sync-icon {
+				.right-action-icon-container {
 					background-color: var(--bg-vanilla-100);
+					&.active, &:hover {
+						background-color: var(--bg-vanilla-200);
+					}
 				}
 			}
 		}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -5,18 +5,43 @@ import {
 	SyncOutlined,
 	VerticalAlignTopOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
+import { Skeleton, Tooltip, Typography } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import classNames from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { cloneDeep, isFunction } from 'lodash-es';
+import { cloneDeep, isFunction, isNull } from 'lodash-es';
+import { Settings2 as SettingsIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
 import Slider from './FilterRenderers/Slider/Slider';
+import useFilterConfig from './hooks/useFilterConfig';
+import AnnouncementTooltip from './QuickFiltersSettings/AnnouncementTooltip';
+import QuickFiltersSettings from './QuickFiltersSettings/QuickFiltersSettings';
 import { FiltersType, IQuickFiltersProps, QuickFiltersSource } from './types';
 
 export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
-	const { config, handleFilterVisibilityChange, source, onFilterChange } = props;
+	const {
+		className,
+		config,
+		handleFilterVisibilityChange,
+		source,
+		onFilterChange,
+		signal,
+	} = props;
+	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+	const {
+		filterConfig,
+		isDynamicFilters,
+		customFilters,
+		setIsStale,
+		isCustomFiltersLoading,
+	} = useFilterConfig({ signal, config });
 
 	const {
 		currentQuery,
@@ -24,6 +49,16 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 
+	const showAnnouncementTooltip = useMemo(() => {
+		const localStorageValue = getLocalStorageKey(
+			LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
+		);
+		if (!isNull(localStorageValue)) {
+			return !(localStorageValue === 'false');
+		}
+		return true;
+	}, []);
+
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
 		const updatedQuery = cloneDeep(
@@ -63,68 +98,142 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
 
 	return (
-		<div className="quick-filters">
-			{source !== QuickFiltersSource.INFRA_MONITORING &&
-				source !== QuickFiltersSource.API_MONITORING && (
-					<section className="header">
-						<section className="left-actions">
-							<FilterOutlined />
-							<Typography.Text className="text">
-								{lastQueryName ? 'Filters for' : 'Filters'}
-							</Typography.Text>
-							{lastQueryName && (
-								<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
-									<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
+		<div className="quick-filters-container">
+			<div className="quick-filters">
+				{source !== QuickFiltersSource.INFRA_MONITORING &&
+					source !== QuickFiltersSource.API_MONITORING && (
+						<section className="header">
+							<section className="left-actions">
+								<FilterOutlined />
+								<Typography.Text className="text">
+									{lastQueryName ? 'Filters for' : 'Filters'}
+								</Typography.Text>
+								{lastQueryName && (
+									<Tooltip
+										title={`Filter currently in sync with query ${lastQueryName}`}
+									>
+										<Typography.Text className="sync-tag">
+											{lastQueryName}
+										</Typography.Text>
+									</Tooltip>
+								)}
+							</section>
+
+							<section className="right-actions">
+								<Tooltip title="Reset All">
+									<div className="right-action-icon-container">
+										<SyncOutlined className="sync-icon" onClick={handleReset} />
+									</div>
 								</Tooltip>
-							)}
+								<Tooltip title="Collapse Filters">
+									<div className="right-action-icon-container">
+										<VerticalAlignTopOutlined
+											rotate={270}
+											onClick={handleFilterVisibilityChange}
+										/>
+									</div>
+								</Tooltip>
+								{isDynamicFilters && (
+									<Tooltip title="Settings">
+										<div
+											className={classNames('right-action-icon-container', {
+												active: isSettingsOpen,
+											})}
+										>
+											<SettingsIcon
+												className="settings-icon"
+												data-testid="settings-icon"
+												width={14}
+												height={14}
+												onClick={(): void => setIsSettingsOpen(true)}
+											/>
+											<AnnouncementTooltip
+												show={showAnnouncementTooltip}
+												position={{ top: -5, left: 15 }}
+												title="Edit your quick filters"
+												message="You can now customize and re-arrange your quick filters panel. Select the quick filters you’d need and hide away the rest for faster exploration."
+												onClose={(): void => {
+													setLocalStorageKey(
+														LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
+														'false',
+													);
+												}}
+											/>
+										</div>
+									</Tooltip>
+								)}
+							</section>
 						</section>
+					)}
 
-						<section className="right-actions">
-							<Tooltip title="Reset All">
-								<SyncOutlined className="sync-icon" onClick={handleReset} />
-							</Tooltip>
-							<div className="divider-filter" />
-							<Tooltip title="Collapse Filters">
-								<VerticalAlignTopOutlined
-									rotate={270}
-									onClick={handleFilterVisibilityChange}
-								/>
-							</Tooltip>
+				{isCustomFiltersLoading ? (
+					<div className="quick-filters-skeleton">
+						{Array.from({ length: 5 }).map((_, index) => (
+							<Skeleton.Input
+								active
+								size="small"
+								style={{ width: '236px', margin: '8px 12px' }}
+								// eslint-disable-next-line react/no-array-index-key
+								key={index}
+							/>
+						))}
+					</div>
+				) : (
+					<OverlayScrollbar>
+						<section className="filters">
+							{filterConfig.map((filter) => {
+								switch (filter.type) {
+									case FiltersType.CHECKBOX:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+									case FiltersType.SLIDER:
+										return <Slider filter={filter} />;
+									// eslint-disable-next-line sonarjs/no-duplicated-branches
+									default:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+								}
+							})}
 						</section>
-					</section>
+					</OverlayScrollbar>
 				)}
-
-			<TypicalOverlayScrollbar>
-				<section className="filters">
-					{config.map((filter) => {
-						switch (filter.type) {
-							case FiltersType.CHECKBOX:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-							case FiltersType.SLIDER:
-								return <Slider filter={filter} />;
-							// eslint-disable-next-line sonarjs/no-duplicated-branches
-							default:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-						}
-					})}
-				</section>
-			</TypicalOverlayScrollbar>
+			</div>
+			<div className="quick-filters-settings-container">
+				<div
+					className={classNames(
+						'quick-filters-settings',
+						{
+							hidden: !isSettingsOpen,
+						},
+						className,
+					)}
+				>
+					{isSettingsOpen && (
+						<QuickFiltersSettings
+							signal={signal}
+							setIsSettingsOpen={setIsSettingsOpen}
+							customFilters={customFilters}
+							setIsStale={setIsStale}
+						/>
+					)}
+				</div>
+			</div>
 		</div>
 	);
 }
 
 QuickFilters.defaultProps = {
 	onFilterChange: null,
+	signal: '',
+	config: [],
 };

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { GripVertical } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function SortableFilter({
+	filter,
+	onRemove,
+	allowDrag,
+	allowRemove,
+}: {
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
+	allowDrag: boolean;
+	allowRemove: boolean;
+}): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+	} = useSortable({ id: filter.key });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={`qf-filter-item ${allowDrag ? 'drag-enabled' : 'drag-disabled'}`}
+		>
+			<div {...attributes} {...listeners} className="drag-handle">
+				{allowDrag && <GripVertical size={16} />}
+				{filter.key}
+			</div>
+			{allowRemove && (
+				<Button
+					className="remove-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => {
+						onRemove(filter as FilterType);
+					}}
+				>
+					Remove
+				</Button>
+			)}
+		</div>
+	);
+}
+
+function AddedFilters({
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	const sensors = useSensors(useSensor(PointerSensor));
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+
+		if (over && active.id !== over.id) {
+			setAddedFilters((items) => {
+				const oldIndex = items.findIndex((item) => item.key === active.id);
+				const newIndex = items.findIndex((item) => item.key === over.id);
+
+				return arrayMove(items, oldIndex, newIndex);
+			});
+		}
+	};
+
+	const filteredAddedFilters = useMemo(
+		() =>
+			addedFilters.filter((filter) =>
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
+			),
+		[addedFilters, inputValue],
+	);
+
+	const handleRemoveFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
+	};
+
+	const allowDrag = inputValue.length === 0;
+	const allowRemove = addedFilters.length > 1;
+
+	return (
+		<div className="qf-filters added-filters">
+			<div className="qf-filters-header">ADDED FILTERS</div>
+			<div className="qf-added-filters-list">
+				<OverlayScrollbar>
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						onDragEnd={handleDragEnd}
+					>
+						{filteredAddedFilters.length === 0 ? (
+							<div className="no-values-found">No values found</div>
+						) : (
+							<SortableContext
+								items={addedFilters.map((f) => f.key)}
+								strategy={verticalListSortingStrategy}
+								disabled={!allowDrag}
+							>
+								{filteredAddedFilters.map((filter) => (
+									<SortableFilter
+										key={filter.key}
+										filter={filter}
+										onRemove={handleRemoveFilter}
+										allowDrag={allowDrag}
+										allowRemove={allowRemove}
+									/>
+								))}
+							</SortableContext>
+						)}
+					</DndContext>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default AddedFilters;

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss

@@ -0,0 +1,56 @@
+.announcement-tooltip {
+    &__dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: var(--bg-robin-500);
+        z-index: 1000;
+    }
+
+    &__title {
+        font-weight: 500;
+        font-size: 15px;
+    }
+
+    &__container {
+        position: absolute;
+        width: 320px;
+        background-color: var(--bg-robin-500);
+        color: var(--text-white);
+        border-radius: 8px;
+        padding: 16px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        z-index: 1000;
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__close-icon {
+        cursor: pointer;
+        color: var(--text-white);
+    }
+
+    &__message {
+        margin: 12px 0;
+        line-height: 20px;
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__button {
+        background: var(--bg-vanilla-100);
+        color: var(--bg-robin-500);
+        border: none;
+        padding: 6px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+}

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx

@@ -0,0 +1,79 @@
+import './AnnouncementTooltip.styles.scss';
+
+import { Button, Typography } from 'antd';
+import classNames from 'classnames';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+type AnnouncementTooltipProps = {
+	position: { top: number; left: number };
+	title: string;
+	message: string;
+	show?: boolean;
+	className?: string;
+	onClose?: () => void;
+};
+
+// TEMPORARY HACK FOR ANNOUNCEMENTS: To be removed once proper system in place.
+function AnnouncementTooltip({
+	position,
+	show,
+	title,
+	message,
+	className,
+	onClose,
+}: AnnouncementTooltipProps): JSX.Element | null {
+	const [visible, setVisible] = useState(show);
+
+	const closeTooltip = (): void => {
+		setVisible(false);
+		onClose?.();
+	};
+
+	return visible ? (
+		<>
+			{/* Dot */}
+			<div
+				className={classNames('announcement-tooltip__dot', className)}
+				style={{
+					top: position.top,
+					left: position.left,
+				}}
+			/>
+
+			{/* Tooltip box */}
+			<div
+				className={classNames('announcement-tooltip__container', className)}
+				style={{
+					top: position.top,
+					left: position.left + 30,
+				}}
+			>
+				<div className="announcement-tooltip__header">
+					<Typography.Text className="announcement-tooltip__title">
+						{title}
+					</Typography.Text>
+					<X
+						size={18}
+						onClick={closeTooltip}
+						className="announcement-tooltip__close-icon"
+					/>
+				</div>
+				<p className="announcement-tooltip__message">{message}</p>
+				<div className="announcement-tooltip__footer">
+					<Button onClick={closeTooltip} className="announcement-tooltip__button">
+						Okay
+					</Button>
+				</div>
+			</div>
+		</>
+	) : null;
+}
+
+AnnouncementTooltip.defaultProps = {
+	show: false,
+	className: '',
+	onClose: (): void => {},
+};
+
+export default AnnouncementTooltip;

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -0,0 +1,104 @@
+import { Button, Skeleton } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
+import { SignalType } from 'components/QuickFilters/types';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useMemo } from 'react';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function OtherFiltersSkeleton(): JSX.Element {
+	return (
+		<>
+			{Array.from({ length: 5 }).map((_, index) => (
+				<Skeleton.Input
+					active
+					size="small"
+					style={{ width: '300px', margin: '8px 12px' }}
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+				/>
+			))}
+		</>
+	);
+}
+
+function OtherFilters({
+	signal,
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	signal: SignalType | undefined;
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	const {
+		data: suggestionsData,
+		isFetching: isFetchingSuggestions,
+	} = useGetAttributeSuggestions(
+		{
+			searchText: inputValue,
+			dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+			filters: {} as TagFilter,
+		},
+		{
+			queryKey: ['other-filters', inputValue],
+			enabled: !!signal,
+		},
+	);
+
+	const otherFilters = useMemo(
+		() =>
+			suggestionsData?.payload?.attributes?.filter(
+				(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+			),
+		[suggestionsData, addedFilters],
+	);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				isColumn: filter.isColumn,
+				isJSON: filter.isJSON,
+				type: filter.type,
+			},
+		]);
+	};
+
+	const renderFilters = (): React.ReactNode => {
+		if (isFetchingSuggestions) return <OtherFiltersSkeleton />;
+		if (!otherFilters?.length)
+			return <div className="no-values-found">No values found</div>;
+
+		return otherFilters.map((filter) => (
+			<div key={filter.key} className="qf-filter-item other-filters-item">
+				<div className="qf-filter-key">{filter.key}</div>
+				<Button
+					className="add-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => handleAddFilter(filter as FilterType)}
+				>
+					Add
+				</Button>
+			</div>
+		));
+	};
+
+	return (
+		<div className="qf-filters other-filters">
+			<div className="qf-filters-header">OTHER FILTERS</div>
+			<div className="qf-other-filters-list">
+				<OverlayScrollbar>
+					<>{renderFilters()}</>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default OtherFilters;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -0,0 +1,187 @@
+.quick-filters-settings {
+    display: flex;
+	flex-direction: column;
+    position: absolute;
+	z-index: 999;
+	width: 342px;
+	background: var(--bg-slate-500);
+	transition: width 0.05s ease-in-out;
+	overflow: hidden;
+
+    &.qf-logs-explorer {
+	    height: calc(100vh - 45px);
+    }
+
+    &.qf-exceptions {
+        height: 100vh;
+    }
+
+	&.hidden {
+		width: 0;
+	}
+    .qf-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10.5px;
+
+        .qf-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .qf-header-icon {
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+        }
+    }
+
+    .qf-filters {
+        &.added-filters {
+            max-height: 40%;
+        }
+        &.other-filters {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; 
+        }
+    }
+
+    .search {
+        .ant-input {
+            background-color: var(--bg-slate-500);
+            height: 46px;
+            border-radius: 0;
+        }
+    }
+
+    .qf-footer {
+        display: flex;
+        gap: 12px;
+        padding: 12px;
+        border-top: 1px solid var(--bg-slate-400);
+        button {
+            display: flex;
+            align-items: center;   
+            justify-content: center;
+            width: 50%;
+            
+            .ant-btn-icon {
+                margin: 3px !important;
+            }
+        }
+    }
+}
+
+//ADDED FILTERS AND OTHER FILTERS COMMON STYLES
+.qf-filters {
+    display: flex;
+    flex-direction: column;
+    .qf-filters-header {
+        color: var(--bg-slate-50);
+        font-family: Inter;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        letter-spacing: 0.88px;
+        text-transform: uppercase;
+        padding: 8px 12px;
+    }
+}
+
+.no-values-found {
+    padding: 8px;
+    text-align: center;
+}
+
+.qf-added-filters-list {
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+
+.qf-other-filters-list {
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+
+
+.qf-filter-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-radius: 4px;
+    user-select: none;
+    transition: background-color 0.2s ease-in-out;
+
+    .drag-handle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-grow: 1;
+    }
+
+    .qf-filter-content{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &.other-filters-item {
+        padding: 8px 12px;
+        height: 32px;
+    }
+
+    &.drag-enabled {
+        cursor: grab;
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    &.drag-disabled {
+        padding: 8px 12px;
+    }
+
+    .remove-filter-btn, .add-filter-btn {
+        padding: 6px 12px;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover {
+        background-color: var(--bg-slate-400);
+        .remove-filter-btn, .add-filter-btn {
+            opacity: 1;
+        }
+    }
+}
+
+
+
+.lightMode {
+    .quick-filters-settings {
+        background: var(--bg-vanilla-100);
+        .search {
+            .ant-input {
+                background-color: var(--bg-vanilla-100);
+            }
+        }
+        .qf-footer {
+           border-top: 1px solid var(--bg-vanilla-300);
+        }
+    }
+
+    .qf-filter-item {
+       &:hover {
+        background-color: var(--bg-vanilla-200);
+    }
+    }
+    
+}
+
+

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -0,0 +1,108 @@
+import './QuickFiltersSettings.styles.scss';
+
+import { Button, Input } from 'antd';
+import { CheckIcon, TableColumnsSplit, XIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+import { SignalType } from '../types';
+import AddedFilters from './AddedFilters';
+import useQuickFilterSettings from './hooks/useQuickFilterSettings';
+import OtherFilters from './OtherFilters';
+
+function QuickFiltersSettings({
+	signal,
+	setIsSettingsOpen,
+	customFilters,
+	setIsStale,
+}: {
+	signal: SignalType | undefined;
+	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+	customFilters: FilterType[];
+	setIsStale: (isStale: boolean) => void;
+}): JSX.Element {
+	const {
+		handleSettingsClose,
+		handleDiscardChanges,
+		addedFilters,
+		setAddedFilters,
+		handleSaveChanges,
+		isUpdatingCustomFilters,
+		inputValue,
+		setInputValue,
+	} = useQuickFilterSettings({
+		setIsSettingsOpen,
+		customFilters,
+		setIsStale,
+		signal,
+	});
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			// check if both arrays have the same length and same order of elements
+			!(
+				addedFilters.length === customFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === customFilters[index].key,
+				)
+			),
+		[addedFilters, customFilters],
+	);
+
+	return (
+		<>
+			<div className="qf-header">
+				<div className="qf-title">
+					<TableColumnsSplit width={16} height={16} />
+					Edit quick filters
+				</div>
+				<XIcon
+					className="qf-header-icon"
+					width={16}
+					height={16}
+					onClick={handleSettingsClose}
+				/>
+			</div>
+			<section className="search">
+				<Input
+					type="text"
+					value={inputValue}
+					placeholder="Search for a filter..."
+					onChange={(event): void => setInputValue(event.target.value)}
+				/>
+			</section>
+			<AddedFilters
+				inputValue={inputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			<OtherFilters
+				signal={signal}
+				inputValue={inputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			{hasUnsavedChanges && (
+				<div className="qf-footer">
+					<Button
+						type="default"
+						onClick={handleDiscardChanges}
+						icon={<XIcon width={16} height={16} />}
+					>
+						Discard
+					</Button>
+					<Button
+						type="primary"
+						onClick={handleSaveChanges}
+						icon={<CheckIcon width={16} height={16} />}
+						loading={isUpdatingCustomFilters}
+					>
+						Save changes
+					</Button>
+				</div>
+			)}
+		</>
+	);
+}
+
+export default QuickFiltersSettings;