feat: added new multiselect component

* feat(sqlmigration): added migration for schema cleanup

* feat(sqlmigration): drop sites,licenses table and added uuid v7 for saved views

* feat(sqlmigration): commit the transaction

* feat(sqlmigration): address review comments

* feat(sqlmigration): address review comments

* feat(sqlmigration): frontend changes for saved views

* feat(sqlmigration): frontend changes for saved views

* feat(sqlmigration): frontend changes for saved views

* feat(sqlmigration): frontend changes for saved views

* feat(sqlmigration): frontend changes for saved views

* feat(sqlmigration): migrate invites table from bigint to uuid

* feat(sqlmigration): add support for idempotant dialect based migration

* feat(sqlmigration): add support for idempotant dialect based migration

* feat(sqlmigration): add foreign key constraints for all new tables

.github/workflows/build.yaml

@@ -1,48 +1,122 @@
-name: build-pipeline
+name: build
 
 on:
-  pull_request:
+  push:
     branches:
       - main
-      - release/v*
+    tags:
+      - v*
 
 jobs:
-  build-frontend:
+  enterprise:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
+      - name: checkout
         uses: actions/checkout@v4
-      - name: Install dependencies
-        run: cd frontend && yarn install
-      - name: Build frontend static files
-        shell: bash
-        run: |
-          make build-frontend-static
-
-  build-signoz:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Setup golang
-        uses: actions/setup-go@v4
+      - name: setup
+        uses: actions/setup-go@v5
         with:
           go-version: "1.22"
-      - name: Build signoz image
+      - name: setup-qemu
+        uses: docker/setup-qemu-action@v3
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          version: latest
+      - name: docker-login
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: create-env-file
+        run: |
+          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
+          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
+          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
+          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
+          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
+          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
+          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
+          echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> frontend/.env
+          echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> frontend/.env
+      - name: github-ref-info
         shell: bash
         run: |
-          make build-signoz-amd64
+          GH_REF=${{ github.ref }}
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            PREFIX="refs/tags/"
+            echo "GH_IS_TAG=true" >> $GITHUB_ENV
+            echo "GH_TAG=${GH_REF#$PREFIX}" >> $GITHUB_ENV
+          else
+            PREFIX="refs/heads/"
+            echo "GH_IS_TAG=false" >> $GITHUB_ENV
+            echo "GH_BRANCH_NAME=${GH_REF#$PREFIX}" >> $GITHUB_ENV
+          fi
+      - name: set-version
+        run: |
+          if [ '${{ env.GH_IS_TAG }}' == 'true' ]; then
+            echo "VERSION=${{ env.GH_TAG }}" >> $GITHUB_ENV
+          elif [ '${{ env.GH_BRANCH_NAME }}' == 'main' ]; then
+            echo "VERSION=latest" >> $GITHUB_ENV
+          else
+            echo "VERSION=${{ env.GH_BRANCH_NAME }}" >> $GITHUB_ENV
+          fi
+      - name: cross-compilation-tools
+        run: |
+          set -ex
+          sudo apt-get update
+          sudo apt-get install -y gcc-aarch64-linux-gnu musl-tools
+      - name: publish
+        run: make docker-buildx-enterprise
 
-  build-signoz-community:
+  community:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
+      - name: checkout
         uses: actions/checkout@v4
-      - name: Setup golang
-        uses: actions/setup-go@v4
+      - name: setup-go
+        uses: actions/setup-go@v5
         with:
           go-version: "1.22"
-      - name: Build signoz community image
+      - name: setup-qemu
+        uses: docker/setup-qemu-action@v3
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          version: latest
+      - name: docker-login
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: github-ref-info
         shell: bash
         run: |
-          make build-signoz-community-amd64
+          GH_REF=${{ github.ref }}
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            PREFIX="refs/tags/"
+            echo "GH_IS_TAG=true" >> $GITHUB_ENV
+            echo "GH_TAG=${GH_REF#$PREFIX}" >> $GITHUB_ENV
+          else
+            PREFIX="refs/heads/"
+            echo "GH_IS_TAG=false" >> $GITHUB_ENV
+            echo "GH_BRANCH_NAME=${GH_REF#$PREFIX}" >> $GITHUB_ENV
+          fi
+      - name: set-version
+        run: |
+          if [ '${{ env.GH_IS_TAG }}' == 'true' ]; then
+            echo "VERSION=${{ env.GH_TAG }}" >> $GITHUB_ENV
+          elif [ '${{ env.GH_BRANCH_NAME }}' == 'main' ]; then
+            echo "VERSION=latest" >> $GITHUB_ENV
+          else
+            echo "VERSION=${{ env.GH_BRANCH_NAME }}" >> $GITHUB_ENV
+          fi
+      - name: cross-compilation-tools
+        run: |
+          set -ex
+          sudo apt-get update
+          sudo apt-get install -y gcc-aarch64-linux-gnu musl-tools
+      - name: publish
+        run: make docker-buildx-community

.github/workflows/commitci.yaml

@@ -25,15 +25,3 @@ jobs:
           else
             echo "No references to 'ee' packages found in 'pkg' directory"
           fi
-  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')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: lint
-        uses: wagoid/commitlint-github-action@v5

.github/workflows/goci.yaml

@@ -34,3 +34,30 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+  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')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.22"
+      - name: qemu-install
+        uses: docker/setup-qemu-action@v3
+      - name: aarch64-install
+        run: |
+          set -ex
+          sudo apt-get update
+          sudo apt-get install -y gcc-aarch64-linux-gnu musl-tools
+      - name: docker-community
+        shell: bash
+        run: |
+          make docker-build-community
+      - name: docker-enterprise
+        shell: bash
+        run: |
+          make docker-build-enterprise

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

@@ -22,7 +22,7 @@ jobs:
         run: |
           echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
       - name: build-frontend
-        run: make build-frontend-static
+        run: make js-build
       - name: upload-frontend-artifact
         uses: actions/upload-artifact@v4
         with:

.github/workflows/gor-signoz.yaml

@@ -36,7 +36,7 @@ jobs:
           echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> .env
           echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> .env
       - name: build-frontend
-        run: make build-frontend-static
+        run:  make js-build
       - name: upload-frontend-artifact
         uses: actions/upload-artifact@v4
         with:

.github/workflows/push.yaml

@@ -1,134 +0,0 @@
-name: push
-
-on:
-  push:
-    branches:
-      - main
-    tags:
-      - v*
-
-jobs:
-  image-build-and-push-signoz:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: setup
-        uses: actions/setup-go@v4
-        with:
-          go-version: "1.22"
-      - name: setup-qemu
-        uses: docker/setup-qemu-action@v3
-      - name: setup-buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          version: latest
-      - name: docker-login
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: create-env-file
-        run: |
-          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
-          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
-          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
-          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> frontend/.env
-          echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> frontend/.env
-      - uses: benjlevesque/short-sha@v2.2
-        id: short-sha
-      - name: branch-name
-        id: branch-name
-        uses: tj-actions/branch-names@v7.0.7
-      - name: docker-tag
-        run: |
-          if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.tag }}" >> $GITHUB_ENV
-          elif [ '${{ steps.branch-name.outputs.current_branch }}' == 'main' ]; then
-            echo "DOCKER_TAG=latest" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.current_branch }}" >> $GITHUB_ENV
-          fi
-      - name: cross-compilation-tools
-        run: |
-          set -ex
-          sudo apt-get update
-          sudo apt-get install -y gcc-aarch64-linux-gnu musl-tools
-      - name: publish-signoz
-        run: make build-push-signoz
-      - name: qs-docker-tag
-        run: |
-          if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
-            tag="${{ steps.branch-name.outputs.tag }}"
-            tag="${tag:1}"
-            echo "DOCKER_TAG=${tag}" >> $GITHUB_ENV
-          elif [ '${{ steps.branch-name.outputs.current_branch }}' == 'main' ]; then
-            echo "DOCKER_TAG=latest" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.current_branch }}" >> $GITHUB_ENV
-          fi
-      - name: publish-query-service
-        run: |
-          SIGNOZ_DOCKER_IMAGE=query-service make build-push-signoz
-
-  image-build-and-push-signoz-community:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: setup-go
-        uses: actions/setup-go@v4
-        with:
-          go-version: "1.22"
-      - name: setup-qemu
-        uses: docker/setup-qemu-action@v3
-      - name: setup-buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          version: latest
-      - name: docker-login
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - uses: benjlevesque/short-sha@v2.2
-        id: short-sha
-      - name: branch-name
-        id: branch-name
-        uses: tj-actions/branch-names@v7.0.7
-      - name: docker-tag
-        run: |
-          if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.tag }}" >> $GITHUB_ENV
-          elif [ '${{ steps.branch-name.outputs.current_branch }}' == 'main' ]; then
-            echo "DOCKER_TAG=latest" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.current_branch }}" >> $GITHUB_ENV
-          fi
-      - name: cross-compilation-tools
-        run: |
-          set -ex
-          sudo apt-get update
-          sudo apt-get install -y gcc-aarch64-linux-gnu musl-tools
-      - name: publish-signoz-community
-        run: make build-push-signoz-community
-      - name: qs-docker-tag
-        run: |
-          if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
-            tag="${{ steps.branch-name.outputs.tag }}"
-            tag="${tag:1}"
-            echo "DOCKER_TAG=${tag}-oss" >> $GITHUB_ENV
-          elif [ '${{ steps.branch-name.outputs.current_branch }}' == 'main' ]; then
-            echo "DOCKER_TAG=latest-oss" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${{ steps.branch-name.outputs.current_branch }}-oss" >> $GITHUB_ENV
-          fi
-      - name: publish-query-service-oss
-        run: |
-          SIGNOZ_COMMUNITY_DOCKER_IMAGE=query-service make build-push-signoz-community

.github/workflows/staging-deployment.yaml

@@ -35,7 +35,7 @@ jobs:
           read -r -d '' COMMAND <<EOF || true
           echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
           echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
+          export VERSION="${GITHUB_SHA:0:7}" # needed for child process to access it
           export OTELCOL_TAG="main"
           export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
           export KAFKA_SPAN_EVAL="true"
@@ -49,7 +49,8 @@ jobs:
           git fetch origin
           git checkout ${GITHUB_BRANCH}
           git pull
-          make build-signoz-amd64
-          make run-testing
+          make docker-build-enterprise-amd64
+          export VERSION="${GITHUB_SHA:0:7}-amd64"
+          docker-compose -f deploy/docker/docker-compose.testing.yaml up --build -d
           EOF
           gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

.github/workflows/testing-deployment.yaml

@@ -35,7 +35,7 @@ jobs:
           read -r -d '' COMMAND <<EOF || true
           echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
           echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
+          export VERSION="${GITHUB_SHA:0:7}" # needed for child process to access it
           export DEV_BUILD="1"
           export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
           docker system prune --force
@@ -49,7 +49,8 @@ jobs:
           # This is added to include the scenerio when new commit in PR is force-pushed
           git branch -D ${GITHUB_BRANCH}
           git checkout --track origin/${GITHUB_BRANCH}
-          make build-signoz-amd64
-          make run-testing
+          make docker-build-enterprise-amd64
+          export VERSION="${GITHUB_SHA:0:7}-amd64"
+          docker-compose -f deploy/docker/docker-compose.testing.yaml up --build -d
           EOF
           gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

CONTRIBUTING.md

@@ -77,3 +77,4 @@ Need assistance? Join our Slack community:
 ## Where do I go from here?
 
 - Set up your [development environment](docs/contributing/development.md)
+- Deploy and observe [SigNoz in action with OpenTelemetry Demo Application](docs/otel-demo/otel-demo-docs.md)

Makefile

@@ -1,49 +1,44 @@
-#
-# Reference Guide - https://www.gnu.org/software/make/manual/make.html
-#
+##############################################################
+# variables
+##############################################################
+SHELL                   := /bin/bash
+SRC						?= $(shell pwd)
+NAME					?= signoz
+OS                      ?= $(shell uname -s | tr '[A-Z]' '[a-z]')
+ARCH                    ?= $(shell uname -m | sed 's/x86_64/amd64/g' | sed 's/aarch64/arm64/g')
+COMMIT_SHORT_SHA        ?= $(shell git rev-parse --short HEAD)
+BRANCH_NAME             ?= $(subst /,-,$(shell git rev-parse --abbrev-ref HEAD))
+VERSION                 ?= $(BRANCH_NAME)-$(COMMIT_SHORT_SHA)
+TIMESTAMP               ?= $(shell date -u +"%Y-%m-%dT%H:%M:%SZ")
+ARCHS					= amd64 arm64
+TARGET_DIR              ?= $(shell pwd)/target
 
-# Build variables
-BUILD_VERSION   ?= $(shell git describe --always --tags)
-BUILD_HASH      ?= $(shell git rev-parse --short HEAD)
-BUILD_TIME      ?= $(shell date -u +"%Y-%m-%dT%H:%M:%SZ")
-BUILD_BRANCH    ?= $(shell git rev-parse --abbrev-ref HEAD)
-LICENSE_SIGNOZ_IO ?= https://license.signoz.io/api/v1
-DEV_LICENSE_SIGNOZ_IO ?= https://staging-license.signoz.io/api/v1
-ZEUS_URL ?= https://api.signoz.cloud
-DEV_ZEUS_URL ?= https://api.staging.signoz.cloud
-DEV_BUILD ?= "" # set to any non-empty value to enable dev build
+ZEUS_URL					   		?= https://api.signoz.cloud
+GO_BUILD_LDFLAG_ZEUS_URL 			= -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=$(ZEUS_URL)
+LICENSE_URL 						?= https://license.signoz.io/api/v1
+GO_BUILD_LDFLAG_LICENSE_SIGNOZ_IO 	= -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=$(LICENSE_URL)
 
-# Internal variables or constants.
-FRONTEND_DIRECTORY ?= frontend
-QUERY_SERVICE_DIRECTORY ?= pkg/query-service
-EE_QUERY_SERVICE_DIRECTORY ?= ee/query-service
-STANDALONE_DIRECTORY ?= deploy/docker
-SWARM_DIRECTORY ?= deploy/docker-swarm
-CH_HISTOGRAM_QUANTILE_DIRECTORY ?= scripts/clickhouse/histogramquantile
-GORELEASER_BIN ?= goreleaser
+GO_BUILD_VERSION_LDFLAGS 		= -X github.com/SigNoz/signoz/pkg/version.version=$(VERSION) -X github.com/SigNoz/signoz/pkg/version.hash=$(COMMIT_SHORT_SHA) -X github.com/SigNoz/signoz/pkg/version.time=$(TIMESTAMP) -X github.com/SigNoz/signoz/pkg/version.branch=$(BRANCH_NAME)
+GO_BUILD_ARCHS_COMMUNITY 		= $(addprefix go-build-community-,$(ARCHS))
+GO_BUILD_CONTEXT_COMMUNITY 		= $(SRC)/pkg/query-service
+GO_BUILD_LDFLAGS_COMMUNITY 		= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=community
+GO_BUILD_ARCHS_ENTERPRISE 		= $(addprefix go-build-enterprise-,$(ARCHS))
+GO_BUILD_CONTEXT_ENTERPRISE 	= $(SRC)/ee/query-service
+GO_BUILD_LDFLAGS_ENTERPRISE 	= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=enterprise $(GO_BUILD_LDFLAG_ZEUS_URL) $(GO_BUILD_LDFLAG_LICENSE_SIGNOZ_IO)
 
-GOOS ?= $(shell go env GOOS)
-GOARCH ?= $(shell go env GOARCH)
-GOPATH ?= $(shell go env GOPATH)
-
-REPONAME ?= signoz
-DOCKER_TAG ?= $(BUILD_VERSION)
-SIGNOZ_DOCKER_IMAGE ?= signoz
-SIGNOZ_COMMUNITY_DOCKER_IMAGE ?= signoz-community
-
-# Build-time Go variables
-PACKAGE?=github.com/SigNoz/signoz
-buildVersion=${PACKAGE}/pkg/query-service/version.buildVersion
-buildHash=${PACKAGE}/pkg/query-service/version.buildHash
-buildTime=${PACKAGE}/pkg/query-service/version.buildTime
-gitBranch=${PACKAGE}/pkg/query-service/version.gitBranch
-licenseSignozIo=${PACKAGE}/ee/query-service/constants.LicenseSignozIo
-zeusURL=${PACKAGE}/ee/query-service/constants.ZeusURL
-
-LD_FLAGS=-X ${buildHash}=${BUILD_HASH} -X ${buildTime}=${BUILD_TIME} -X ${buildVersion}=${BUILD_VERSION} -X ${gitBranch}=${BUILD_BRANCH}
-PROD_LD_FLAGS=-X ${zeusURL}=${ZEUS_URL} -X ${licenseSignozIo}=${LICENSE_SIGNOZ_IO}
-DEV_LD_FLAGS=-X ${zeusURL}=${DEV_ZEUS_URL} -X ${licenseSignozIo}=${DEV_LICENSE_SIGNOZ_IO}
+DOCKER_BUILD_ARCHS_COMMUNITY 	= $(addprefix docker-build-community-,$(ARCHS))
+DOCKERFILE_COMMUNITY 			= $(SRC)/pkg/query-service/Dockerfile
+DOCKER_REGISTRY_COMMUNITY 		?= docker.io/signoz/signoz-community
+DOCKER_BUILD_ARCHS_ENTERPRISE 	= $(addprefix docker-build-enterprise-,$(ARCHS))
+DOCKERFILE_ENTERPRISE 			= $(SRC)/ee/query-service/Dockerfile
+DOCKER_REGISTRY_ENTERPRISE 		?= docker.io/signoz/signoz
+JS_BUILD_CONTEXT 				= $(SRC)/frontend
 
+##############################################################
+# directories
+##############################################################
+$(TARGET_DIR):
+	mkdir -p $(TARGET_DIR)
 
 ##############################################################
 # common commands
@@ -61,10 +56,10 @@ devenv-clickhouse: ## Run clickhouse in devenv
 	docker compose -f compose.yaml up -d
 
 ##############################################################
-# run commands
+# go commands
 ##############################################################
-.PHONY: run-go
-run-go: ## Runs the go backend server
+.PHONY: go-run-enterprise
+go-run-enterprise: ## Runs the enterprise go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
 	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
@@ -73,147 +68,98 @@ run-go: ## Runs the go backend server
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
 	go run -race \
-		./ee/query-service/main.go \
-		--config ./pkg/query-service/config/prometheus.yml \
+		$(GO_BUILD_CONTEXT_ENTERPRISE)/main.go \
+		--config ./conf/prometheus.yml \
 		--cluster cluster \
 		--use-logs-new-schema true \
 		--use-trace-new-schema true
 
-all: build-push-frontend build-push-signoz
+.PHONY: go-run-community
+go-run-community: ## Runs the community go backend server
+	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
+	SIGNOZ_WEB_ENABLED=false \
+	SIGNOZ_JWT_SECRET=secret \
+	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
+	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
+	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
+	go run -race \
+		$(GO_BUILD_CONTEXT_COMMUNITY)/main.go \
+		--config ./conf/prometheus.yml \
+		--cluster cluster \
+		--use-logs-new-schema true \
+		--use-trace-new-schema true
 
-# Steps to build static files of frontend
-build-frontend-static:
-	@echo "------------------"
-	@echo "--> Building frontend static files"
-	@echo "------------------"
-	@cd $(FRONTEND_DIRECTORY) && \
-	rm -rf build && \
-	CI=1 yarn install && \
-	yarn build && \
-	ls -l build
-
-# Steps to build static binary of signoz
-.PHONY: build-signoz-static
-build-signoz-static:
-	@echo "------------------"
-	@echo "--> Building signoz static binary"
-	@echo "------------------"
-	@if [ $(DEV_BUILD) != "" ]; then \
-		cd $(EE_QUERY_SERVICE_DIRECTORY) && \
-		CGO_ENABLED=1 go build -tags timetzdata -a -o ./bin/signoz-${GOOS}-${GOARCH} \
-		-ldflags "-linkmode external -extldflags '-static' -s -w ${LD_FLAGS} ${DEV_LD_FLAGS}"; \
+.PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
+go-build-community: ## Builds the go backend server for community
+go-build-community: $(GO_BUILD_ARCHS_COMMUNITY)
+$(GO_BUILD_ARCHS_COMMUNITY): go-build-community-%: $(TARGET_DIR)
+	@mkdir -p $(TARGET_DIR)/$(OS)-$*
+	@echo ">> building binary $(TARGET_DIR)/$(OS)-$*/$(NAME)-community"
+	@if [ $* = "arm64" ]; then \
+		CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_COMMUNITY) -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME)-community -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_COMMUNITY)"; \
 	else \
-		cd $(EE_QUERY_SERVICE_DIRECTORY) && \
-		CGO_ENABLED=1 go build -tags timetzdata -a -o ./bin/signoz-${GOOS}-${GOARCH} \
-		-ldflags "-linkmode external -extldflags '-static' -s -w ${LD_FLAGS} ${PROD_LD_FLAGS}"; \
+		CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_COMMUNITY) -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME)-community -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_COMMUNITY)"; \
 	fi
 
-.PHONY: build-signoz-static-amd64
-build-signoz-static-amd64:
-	make GOARCH=amd64 build-signoz-static
 
-.PHONY: build-signoz-static-arm64
-build-signoz-static-arm64:
-	make CC=aarch64-linux-gnu-gcc GOARCH=arm64 build-signoz-static
-
-# Steps to build static binary of signoz for all platforms
-.PHONY: build-signoz-static-all
-build-signoz-static-all: build-signoz-static-amd64 build-signoz-static-arm64 build-frontend-static
-
-# Steps to build and push docker image of signoz
-.PHONY: build-signoz-amd64 build-push-signoz
-# Step to build docker image of signoz in amd64 (used in build pipeline)
-build-signoz-amd64: build-signoz-static-amd64 build-frontend-static
-	@echo "------------------"
-	@echo "--> Building signoz docker image for amd64"
-	@echo "------------------"
-	@docker build --file $(EE_QUERY_SERVICE_DIRECTORY)/Dockerfile \
-	--tag $(REPONAME)/$(SIGNOZ_DOCKER_IMAGE):$(DOCKER_TAG) \
-	--build-arg TARGETPLATFORM="linux/amd64" .
-
-# Step to build and push docker image of query in amd64 and arm64 (used in push pipeline)
-build-push-signoz: build-signoz-static-all
-	@echo "------------------"
-	@echo "--> Building and pushing signoz docker image"
-	@echo "------------------"
-	@docker buildx build --file $(EE_QUERY_SERVICE_DIRECTORY)/Dockerfile --progress plain \
-	--push --platform linux/arm64,linux/amd64 \
-	--tag $(REPONAME)/$(SIGNOZ_DOCKER_IMAGE):$(DOCKER_TAG) .
-
-# Step to build docker image of signoz community in amd64 (used in build pipeline)
-build-signoz-community-amd64:
-	@echo "------------------"
-	@echo "--> Building signoz docker image for amd64"
-	@echo "------------------"
-	make EE_QUERY_SERVICE_DIRECTORY=${QUERY_SERVICE_DIRECTORY} SIGNOZ_DOCKER_IMAGE=${SIGNOZ_COMMUNITY_DOCKER_IMAGE} build-signoz-amd64
-
-# Step to build and push docker image of signoz community in amd64 and arm64 (used in push pipeline)
-build-push-signoz-community:
-	@echo "------------------"
-	@echo "--> Building and pushing signoz community docker image"
-	@echo "------------------"
-	make EE_QUERY_SERVICE_DIRECTORY=${QUERY_SERVICE_DIRECTORY} SIGNOZ_DOCKER_IMAGE=${SIGNOZ_COMMUNITY_DOCKER_IMAGE} build-push-signoz
-
-pull-signoz:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml pull
-
-run-signoz:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml up --build -d
-
-run-testing:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.testing.yaml up --build -d
-
-down-signoz:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml down -v
-
-check-no-ee-references:
-	@echo "Checking for 'ee' package references in 'pkg' directory..."
-	@if grep -R --include="*.go" '.*/ee/.*' pkg/; then \
-		echo "Error: Found references to 'ee' packages in 'pkg' directory"; \
-		exit 1; \
+.PHONY: go-build-enterprise $(GO_BUILD_ARCHS_ENTERPRISE)
+go-build-enterprise: ## Builds the go backend server for enterprise
+go-build-enterprise: $(GO_BUILD_ARCHS_ENTERPRISE)
+$(GO_BUILD_ARCHS_ENTERPRISE): go-build-enterprise-%: $(TARGET_DIR)
+	@mkdir -p $(TARGET_DIR)/$(OS)-$*
+	@echo ">> building binary $(TARGET_DIR)/$(OS)-$*/$(NAME)"
+	@if [ $* = "arm64" ]; then \
+		CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_ENTERPRISE) -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME) -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_ENTERPRISE)"; \
 	else \
-		echo "No references to 'ee' packages found in 'pkg' directory"; \
+		CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_ENTERPRISE) -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME) -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_ENTERPRISE)"; \
 	fi
 
-test:
-	go test ./pkg/...
+##############################################################
+# js commands
+##############################################################
+.PHONY: js-build
+js-build: ## Builds the js frontend
+	@echo ">> building js frontend"
+	@cd $(JS_BUILD_CONTEXT) && CI=1 yarn install && yarn build
 
-########################################################
-# Goreleaser
-########################################################
-.PHONY: gor-snapshot gor-snapshot-histogram-quantile gor-snapshot-signoz gor-snapshot-signoz-community gor-split gor-split-histogram-quantile gor-split-signoz gor-split-signoz-community gor-merge
+##############################################################
+# docker commands
+##############################################################
+.PHONY: docker-build-community $(DOCKER_BUILD_ARCHS_COMMUNITY)
+docker-build-community: ## Builds the docker image for community
+docker-build-community: $(DOCKER_BUILD_ARCHS_COMMUNITY)
+$(DOCKER_BUILD_ARCHS_COMMUNITY): docker-build-community-%: go-build-community-% js-build
+	@echo ">> building docker image for $(NAME)-community"
+	@docker build -t "$(DOCKER_REGISTRY_COMMUNITY):$(VERSION)-$*" \
+		--build-arg TARGETARCH="$*" \
+		-f $(DOCKERFILE_COMMUNITY) $(SRC)
 
-gor-snapshot:
-	@if [[ ${GORELEASER_WORKDIR} ]]; then \
-		${GORELEASER_BIN} release --config ${GORELEASER_WORKDIR}/.goreleaser.yaml --clean --snapshot; \
-	else \
-		${GORELEASER_BIN} release --clean --snapshot; \
-	fi
+.PHONY: docker-buildx-community
+docker-buildx-community: ## Builds the docker image for community using buildx
+docker-buildx-community: go-build-community js-build
+	@echo ">> building docker image for $(NAME)-community"
+	@docker buildx build --file $(DOCKERFILE_COMMUNITY) \
+		--progress plain \
+		--platform linux/arm64,linux/amd64 \
+		--push \
+		--tag $(DOCKER_REGISTRY_COMMUNITY):$(VERSION) $(SRC)
 
-gor-snapshot-histogram-quantile:
-	make GORELEASER_WORKDIR=$(CH_HISTOGRAM_QUANTILE_DIRECTORY) goreleaser-snapshot
+.PHONY: docker-build-enterprise $(DOCKER_BUILD_ARCHS_ENTERPRISE)
+docker-build-enterprise: ## Builds the docker image for enterprise
+docker-build-enterprise: $(DOCKER_BUILD_ARCHS_ENTERPRISE)
+$(DOCKER_BUILD_ARCHS_ENTERPRISE): docker-build-enterprise-%: go-build-enterprise-% js-build
+	@echo ">> building docker image for $(NAME)"
+	@docker build -t "$(DOCKER_REGISTRY_ENTERPRISE):$(VERSION)-$*" \
+		--build-arg TARGETARCH="$*" \
+		-f $(DOCKERFILE_ENTERPRISE) $(SRC)
 
-gor-snapshot-signoz: build-frontend-static
-	make GORELEASER_WORKDIR=$(EE_QUERY_SERVICE_DIRECTORY) goreleaser-snapshot
-
-gor-snapshot-signoz-community: build-frontend-static
-	make GORELEASER_WORKDIR=$(QUERY_SERVICE_DIRECTORY) goreleaser-snapshot
-
-gor-split:
-	@if [[ ${GORELEASER_WORKDIR} ]]; then \
-		${GORELEASER_BIN} release --config ${GORELEASER_WORKDIR}/.goreleaser.yaml --clean --split; \
-	else \
-		${GORELEASER_BIN} release --clean --split; \
-	fi
-
-gor-split-histogram-quantile:
-	make GORELEASER_WORKDIR=$(CH_HISTOGRAM_QUANTILE_DIRECTORY) goreleaser-split
-
-gor-split-signoz: build-frontend-static
-	make GORELEASER_WORKDIR=$(EE_QUERY_SERVICE_DIRECTORY) goreleaser-split
-
-gor-split-signoz-community: build-frontend-static
-	make GORELEASER_WORKDIR=$(QUERY_SERVICE_DIRECTORY) goreleaser-split
-
-gor-merge:
-	${GORELEASER_BIN} continue --merge
+.PHONY: docker-buildx-enterprise
+docker-buildx-enterprise: ## Builds the docker image for enterprise using buildx
+docker-buildx-enterprise: go-build-enterprise js-build
+	@echo ">> building docker image for $(NAME)"
+	@docker buildx build --file $(DOCKERFILE_ENTERPRISE) \
+		--progress plain \
+		--platform linux/arm64,linux/amd64 \
+		--push \
+		--tag $(DOCKER_REGISTRY_ENTERPRISE):$(VERSION) $(SRC)

conf/example.yaml

@@ -3,6 +3,12 @@
 # Do not modify this file
 #
 
+##################### Version #####################
+version:
+  banner:
+    # Whether to enable the version banner on startup.
+    enabled: true
+
 ##################### Instrumentation #####################
 instrumentation:
   logs:

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.testing.yaml

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

deploy/docker/docker-compose.yaml

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

docs/contributing/development.md

@@ -61,7 +61,7 @@ This command:
 
 1. Run the backend server:
    ```bash
-   make run-go
+   make go-run-community
    ```
 
 2. Verify it's working:

docs/otel-demo-docs.md

@@ -0,0 +1,246 @@
+# Configuring OpenTelemetry Demo App with SigNoz
+
+[The OpenTelemetry Astronomy Shop](https://github.com/open-telemetry/opentelemetry-demo) is an e-commerce web application, with **15 core microservices** in a **distributed system** which communicate over gRPC. Designed as a **polyglot** environment, it leverages a diverse set of programming languages, including Go, Python, .NET, Java, and others, showcasing cross-language instrumentation with OpenTelemetry. The intention is to get a quickstart application to send data and experience SigNoz firsthand.
+
+This guide provides a step-by-step walkthrough for setting up the **OpenTelemetry Demo App** with **SigNoz** as backend for observability. It outlines steps to export telemetry data to **SigNoz self-hosted with Docker**, **SigNoz self-hosted with Kubernetes** and **SigNoz cloud**. 
+<br/>
+
+__Table of Contents__
+- [Send data to SigNoz Self-hosted with Docker](#send-data-to-signoz-self-hosted-with-docker)
+  - [Prerequisites](#prerequisites)
+  - [Clone the OpenTelemetry Demo App Repository](#clone-the-opentelemetry-demo-app-repository)
+  - [Modify OpenTelemetry Collector Config](#modify-opentelemetry-collector-config)
+  - [Start the OpenTelemetry Demo App](#start-the-opentelemetry-demo-app)
+  - [Monitor with SigNoz (Docker)](#monitor-with-signoz-docker)
+- [Send data to SigNoz Self-hosted with Kubernetes](#send-data-to-signoz-self-hosted-with-kubernetes)
+  - [Prerequisites](#prerequisites-1)
+  - [Install Helm Repo and Charts](#install-helm-repo-and-charts)
+  - [Start the OpenTelemetry Demo App](#start-the-opentelemetry-demo-app-1)
+  - [Moniitor with SigNoz (Kubernetes)](#monitor-with-signoz-kubernetes)
+- [What's next](#whats-next)
+
+
+# Send data to SigNoz Self-hosted with Docker
+
+In this guide you will install the OTel demo application using Docker and send telemetry data to SigNoz hosted with Docker, referred as SigNoz [Docker] from now.
+
+
+## Prerequisites
+- Docker and Docker Compose installed
+- 6 GB of RAM for the application [as per OpenTelemetry documentation]
+- Nice to have Docker Desktop, for easy monitoring
+
+
+## Clone the OpenTelemetry Demo App Repository
+Clone the OTel demo app to any folder of your choice.
+```sh
+# Clone the OpenTelemetry Demo repository
+git clone https://github.com/open-telemetry/opentelemetry-demo.git
+cd opentelemetry-demo
+```
+
+## Modify OpenTelemetry Collector Config
+
+By default, the collector in the demo application will merge the configuration from two files:
+
+1. otelcol-config.yml &nbsp;&nbsp;[we don't touch this]
+2. otelcol-config-extras.yml &nbsp;&nbsp; [we modify this]
+
+To add SigNoz [Docker] as the backend, open the file `src/otel-collector/otelcol-config-extras.yml` and add the following,
+```yaml
+exporters:
+  otlp:
+    endpoint: "http://host.docker.internal:4317"
+    tls:
+      insecure: true
+  debug:
+    verbosity: detailed
+
+service:
+  pipelines:
+    metrics:
+      exporters: [otlp]
+    traces:
+      exporters: [spanmetrics, otlp]
+    logs: 
+      exporters: [otlp]
+```
+
+The SigNoz OTel collector [sigNoz's otel-collector service] listens at 4317 port on localhost. When the OTel demo app is running within a Docker container and needs to transmit telemetry data to SigNoz, it cannot directly reference 'localhost' as this would refer to the container's own internal network. Instead, Docker provides a special DNS name, `host.docker.internal`, which resolves to the host machine's IP address from within containers. By configuring the OpenTelemetry Demo application to send data to `host.docker.internal:4317`, we establish a network path that allows the containerized application to transmit telemetry data across the container boundary to the SigNoz OTel collector running on the host machine's port 4317.
+
+>
+> Note: When merging extra configuration values with the existing collector config (`src/otel-collector/otelcol-config.yml`), objects are merged and arrays are replaced resulting in previous pipeline configurations getting overridden.
+ The spanmetrics exporter must be included in the array of exporters for the traces pipeline if overridden. Not including this exporter will result in an error.
+>
+<br>
+<u>To send data to SigNoz Cloud</u>
+
+If you want to send data to cloud instead, open the file `src/otel-collector/otelcol-config-extras.yml` and add the following,
+```yaml
+exporters:
+  otlp:
+    endpoint: "https://ingest.{your-region}.signoz.cloud:443"
+    tls:
+      insecure: false
+    headers:
+      signoz-access-token: <SIGNOZ-KEY>
+  debug:
+    verbosity: detailed
+
+service:
+  pipelines:
+    metrics:
+      exporters: [otlp]
+    traces:
+      exporters: [spanmetrics, otlp]
+    logs: 
+      exporters: [otlp]
+```
+Remember to replace the region and ingestion key with proper values as obtained from your account.
+
+
+## Start the OpenTelemetry Demo App
+
+Both SigNoz and OTel demo app [frontend-proxy service, to be accurate] share common port allocation at 8080. To prevent port allocation conflicts, modify the OTel demo application config to use port 8081 as the `ENVOY_PORT` value as shown below, and run docker compose command.
+
+```sh
+ENVOY_PORT=8081 docker compose up -d
+```
+This spins up multiple microservices, with OpenTelemetry instrumentation enabled. you can verify this by,
+```sh
+docker compose ps -a
+```
+The result should look similar to this,
+![](/docs/img/otel-demo-docker-containers.png)
+
+
+
+Navigate to `http://localhost:8081/` where you can access OTel demo app UI. Generate some traffic to send to SigNoz [Docker].
+
+## Monitor with SigNoz [Docker]
+Signoz exposes its UI at `http://localhost:8080/`. You should be able to see multiple services listed down as shown in the snapshot below.
+
+
+![](/docs/img/otel-demo-services.png)
+
+This verifies that your OTel demo app is successfully sending telemetry data to SigNoz [Docker] as expected. 
+
+
+# Send data to SigNoz Self-hosted with Kubernetes
+
+In this guide you will install the OTel demo application using Helm and send telemetry data to SigNoz hosted with Kubernetes, referred as SigNoz [Kubernetes] from now.
+
+## Prerequisites
+
+- Helm charts installed
+- 6 GB of free RAM for the application [as per OpenTelemetry documentation]
+- A kubernetes cluster (EKS, GKE, Minikube)
+- kubectl [CLI for Kubernetes]
+
+>Note: We will be installing OTel demo app using Helm charts, since it is recommended by OpenTelemetry. If you wish to install using kubectl, follow [this](https://opentelemetry.io/docs/demo/kubernetes-deployment/#install-using-kubectl).
+
+
+## Install Helm Repo and Charts
+You’ll need to **install the Helm repository** to start sending data to SigNoz cloud.
+
+```sh
+helm repo add open-telemetry https://open-telemetry.github.io/opentelemetry-helm-charts
+```
+The OpenTelemetry Collector’s configuration is exposed in the Helm chart. All additions made will be merged into the default configuration. We use this capability to add SigNoz as an exporter, and make pipelines as desired.
+
+For this we have to create a `values.yaml` which will override the existing configurations that comes with the Helm chart.
+
+```yaml
+default:
+  env:
+    - name: OTEL_SERVICE_NAME
+      valueFrom:
+        fieldRef:
+          apiVersion: v1
+          fieldPath: "metadata.labels['app.kubernetes.io/component']"
+    - name: OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE
+      value: cumulative
+    - name: OTEL_RESOURCE_ATTRIBUTES
+      value: 'service.name=$(OTEL_SERVICE_NAME),service.namespace=opentelemetry-demo'
+    - name: OTEL_COLLECTOR_NAME
+      value: signoz-otel-collector.<namespace>.svc.cluster.local
+```
+Replace namespace with your appropriate namespace. This file will replace the chart’s existing settings with our new ones, ensuring telemetry data is sent to SigNoz [Kubernetes].
+
+> Note: When merging YAML values with Helm, objects are merged and arrays are replaced. The spanmetrics exporter must be included in the array of exporters for the traces pipeline if overridden. Not including this exporter will result in an error.
+
+<br>
+<u>To send data to SigNoz cloud</u>
+
+If you wish to send data to cloud instance of SigNoz, we have to create a `values.yaml` which will override the existing configurations that comes with the Helm chart.
+
+```sh
+opentelemetry-collector:
+  config:
+    exporters:
+      otlp:
+        endpoint: "https://ingest.{your-region}.signoz.cloud:443"
+        tls:
+          insecure: false
+        headers:
+          signoz-access-token: <SIGNOZ-KEY>
+      debug:
+        verbosity: detailed
+    service:
+      pipelines:
+        traces:
+          exporters: [spanmetrics, otlp] 
+        metrics:
+          exporters: [otlp]
+        logs:
+          exporters: [otlp]
+```
+Make sure to replace the region and key with values obtained from the account
+
+Now **install the helm chart** with a release name and namespace of your choice. Let's take *my-otel-demo* as the release name and *otel-demo* as the namespace for the context of the code snippet below,
+
+```sh
+# Create a new Kubernetes namespace called "otel-demo"
+kubectl create namespace otel-demo
+# Install the OpenTelemetry Demo Helm chart with the release name "my-otel-demo"
+helm install my-otel-demo open-telemetry/opentelemetry-demo --namespace otel-demo -f values.yaml
+```
+You should see a similar output on your terminal,
+![](/docs/img/otel-demo-helm.png)
+
+To verify if all the pods are running,
+```sh
+kubectl get pods -n otel-demo 
+```
+The output should look similar to this,
+
+![](/docs/img/otel-demo-pods.png)
+
+## Start the OpenTelemetry Demo App
+
+To expose the OTel demo app UI [frontend-proxy service] use the following command (replace my-otel-demo with your Helm chart release name):
+
+```sh
+kubectl port-forward svc/my-otel-demo-frontend-proxy 8080:8081
+```
+Navigate to `http://localhost:8081/` where you can access OTel demo app UI. Generate some traffic to send to SigNoz [Kubernetes].
+
+
+
+## Monitor with SigNoz [Kubernetes]
+Signoz exposes it's UI at `http://localhost:8080/`. You should be able to see multiple services listed down as shown in the snapshot below.
+
+
+![](/docs/img/otel-demo-services.png)
+
+This verifies that your OTel demo app is successfully sending telemetry data to SigNoz [Kubernetes] as expected. 
+
+
+
+# What's next?
+
+
+
+Don't forget to check our OpenTelemetry [track](https://signoz.io/resource-center/opentelemetry/), guaranteed to take you from a newbie to sensei in no time!
+
+Also from a fellow OTel fan to another, we at [SigNoz](https://signoz.io/) are building an open-source, OTel native, observability platform (one of its kind). So, show us love - star us on [GitHub](https://github.com/SigNoz/signoz), nitpick our [docs](https://signoz.io/docs/introduction/), or just tell your app we’re the ones who’ll catch its crashes mid-flight and finally shush all the 3am panic calls!

ee/http/middleware/pat.go

@@ -4,20 +4,20 @@ import (
 	"net/http"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/uptrace/bun"
 	"go.uber.org/zap"
 )
 
 type Pat struct {
-	db      *bun.DB
+	store   sqlstore.SQLStore
 	uuid    *authtypes.UUID
 	headers []string
 }
 
-func NewPat(db *bun.DB, headers []string) *Pat {
-	return &Pat{db: db, uuid: authtypes.NewUUID(), headers: headers}
+func NewPat(store sqlstore.SQLStore, headers []string) *Pat {
+	return &Pat{store: store, uuid: authtypes.NewUUID(), headers: headers}
 }
 
 func (p *Pat) Wrap(next http.Handler) http.Handler {
@@ -25,63 +25,58 @@ func (p *Pat) Wrap(next http.Handler) http.Handler {
 		var values []string
 		var patToken string
 		var pat types.StorablePersonalAccessToken
-		var updateLastUsed bool
 
 		for _, header := range p.headers {
 			values = append(values, r.Header.Get(header))
-
-			if header == "SIGNOZ-API-KEY" {
-				patToken = values[0]
-				err := p.db.NewSelect().Model(&pat).Where("token = ?", patToken).Scan(r.Context())
-				if err != nil {
-					next.ServeHTTP(w, r)
-					return
-				}
-
-				if pat.ExpiresAt < time.Now().Unix() && pat.ExpiresAt != 0 {
-					next.ServeHTTP(w, r)
-					return
-				}
-
-				// get user from db
-				user := types.User{}
-				err = p.db.NewSelect().Model(&user).Where("id = ?", pat.UserID).Scan(r.Context())
-				if err != nil {
-					next.ServeHTTP(w, r)
-					return
-				}
-
-				jwt := authtypes.Claims{
-					UserID:  user.ID,
-					GroupID: user.GroupID,
-					Email:   user.Email,
-					OrgID:   user.OrgID,
-				}
-
-				ctx := authtypes.NewContextWithClaims(r.Context(), jwt)
-				r = r.WithContext(ctx)
-
-				// Mark to update last used since SIGNOZ-API-KEY is present and successful
-				updateLastUsed = true
-			}
 		}
+
 		ctx, err := p.uuid.ContextFromRequest(r.Context(), values...)
 		if err != nil {
 			next.ServeHTTP(w, r)
 			return
 		}
+		patToken, ok := authtypes.UUIDFromContext(ctx)
+		if !ok {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		err = p.store.BunDB().NewSelect().Model(&pat).Where("token = ?", patToken).Scan(r.Context())
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		if pat.ExpiresAt < time.Now().Unix() && pat.ExpiresAt != 0 {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		// get user from db
+		user := types.User{}
+		err = p.store.BunDB().NewSelect().Model(&user).Where("id = ?", pat.UserID).Scan(r.Context())
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		jwt := authtypes.Claims{
+			UserID:  user.ID,
+			GroupID: user.GroupID,
+			Email:   user.Email,
+			OrgID:   user.OrgID,
+		}
+
+		ctx = authtypes.NewContextWithClaims(ctx, jwt)
 
 		r = r.WithContext(ctx)
 
 		next.ServeHTTP(w, r)
 
-		// update last used only if SIGNOZ-API-KEY was present and successful
-		if updateLastUsed {
-			pat.LastUsed = time.Now().Unix()
-			_, err = p.db.NewUpdate().Model(&pat).Column("last_used").Where("token = ?", patToken).Where("revoked = false").Exec(r.Context())
-			if err != nil {
-				zap.L().Error("Failed to update PAT last used in db, err: %v", zap.Error(err))
-			}
+		pat.LastUsed = time.Now().Unix()
+		_, err = p.store.BunDB().NewUpdate().Model(&pat).Column("last_used").Where("token = ?", patToken).Where("revoked = false").Exec(r.Context())
+		if err != nil {
+			zap.L().Error("Failed to update PAT last used in db, err: %v", zap.Error(err))
 		}
 
 	})

ee/query-service/.goreleaser.yaml

@@ -30,13 +30,11 @@ builds:
       - v8.0
     ldflags:
       - -s -w
-      - -X github.com/SigNoz/signoz/pkg/query-service/version.version={{ .Version }}
-      - -X main.commit={{ .Commit }} -X main.date={{ .CommitDate }}
-      - -X main.builtBy=goreleaser
-      - -X github.com/SigNoz/signoz/pkg/query-service/version.buildVersion={{ .Version }}
-      - -X github.com/SigNoz/signoz/pkg/query-service/version.buildHash={{ .ShortCommit }}
-      - -X github.com/SigNoz/signoz/pkg/query-service/version.buildTime={{ .Date }}
-      - -X github.com/SigNoz/signoz/pkg/query-service/version.gitBranch={{ .Branch }}
+      - -X github.com/SigNoz/signoz/pkg/version.version=v{{ .Version }}
+      - -X github.com/SigNoz/signoz/pkg/version.variant=enterprise
+      - -X github.com/SigNoz/signoz/pkg/version.hash={{ .ShortCommit }}
+      - -X github.com/SigNoz/signoz/pkg/version.time={{ .CommitTimestamp }}
+      - -X github.com/SigNoz/signoz/pkg/version.branch={{ .Branch }}
       - -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
       - >-

ee/query-service/Dockerfile

@@ -1,34 +1,21 @@
-# use a minimal alpine image
 FROM alpine:3.20.3
-
-# Add Maintainer Info
 LABEL maintainer="signoz"
-
-# define arguments that can be passed during build time
-ARG TARGETOS TARGETARCH
-
-# add ca-certificates in case you need them
-RUN apk update && apk add ca-certificates && rm -rf /var/cache/apk/*
-
-# set working directory
 WORKDIR /root
 
-# copy the signoz binary
-COPY ee/query-service/bin/signoz-${TARGETOS}-${TARGETARCH} /root/signoz
+ARG OS="linux"
+ARG TARGETARCH
 
-# copy prometheus YAML config
-COPY pkg/query-service/config/prometheus.yml /root/config/prometheus.yml
-COPY pkg/query-service/templates /root/templates
+RUN apk update && \
+	apk add ca-certificates && \
+	rm -rf /var/cache/apk/*
 
-# Make signoz executable for non-root users
-RUN chmod 755 /root /root/signoz
 
-# Copy frontend
+COPY ./target/${OS}-${TARGETARCH}/signoz /root/signoz
+COPY ./conf/prometheus.yml /root/config/prometheus.yml
+COPY ./templates/email /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
-# run the binary
+RUN chmod 755 /root /root/signoz
+
 ENTRYPOINT ["./signoz"]
-
 CMD ["-config", "/root/config/prometheus.yml"]
-
-EXPOSE 8080

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

@@ -19,9 +19,9 @@ import (
 	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
-	"github.com/SigNoz/signoz/pkg/query-service/version"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/gorilla/mux"
 )
 
@@ -200,9 +200,8 @@ func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *ba
 }
 
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
-	version := version.GetVersion()
 	versionResponse := basemodel.GetVersionResponse{
-		Version:        version,
+		Version:        version.Info.Version(),
 		EE:             "Y",
 		SetupCompleted: ah.SetupCompleted,
 	}

ee/query-service/app/server.go

@@ -112,7 +112,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	if err := baseexplorer.InitWithDSN(serverOptions.SigNoz.SQLStore.BunDB()); err != nil {
+	if err := baseexplorer.InitWithDSN(serverOptions.SigNoz.SQLStore); err != nil {
 		return nil, err
 	}
 
@@ -120,7 +120,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	if err := dashboards.InitDB(serverOptions.SigNoz.SQLStore.BunDB()); err != nil {
+	if err := dashboards.InitDB(serverOptions.SigNoz.SQLStore); err != nil {
 		return nil, err
 	}
 
@@ -130,7 +130,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// initiate license manager
-	lm, err := licensepkg.StartManager(serverOptions.SigNoz.SQLStore.SQLxDB(), serverOptions.SigNoz.SQLStore.BunDB())
+	lm, err := licensepkg.StartManager(serverOptions.SigNoz.SQLStore.SQLxDB(), serverOptions.SigNoz.SQLStore)
 	if err != nil {
 		return nil, err
 	}
@@ -217,7 +217,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
-		serverOptions.SigNoz.SQLStore.SQLxDB(), integrationsController.GetPipelinesForInstalledIntegrations,
+		serverOptions.SigNoz.SQLStore, integrationsController.GetPipelinesForInstalledIntegrations,
 	)
 	if err != nil {
 		return nil, err
@@ -317,7 +317,7 @@ func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server,
 	r := baseapp.NewRouter()
 
 	r.Use(middleware.NewAuth(zap.L(), s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}).Wrap)
-	r.Use(eemiddleware.NewPat(s.serverOptions.SigNoz.SQLStore.BunDB(), []string{"SIGNOZ-API-KEY"}).Wrap)
+	r.Use(eemiddleware.NewPat(s.serverOptions.SigNoz.SQLStore, []string{"SIGNOZ-API-KEY"}).Wrap)
 	r.Use(middleware.NewTimeout(zap.L(),
 		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
 		s.serverOptions.Config.APIServer.Timeout.Default,
@@ -365,7 +365,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	am := baseapp.NewAuthMiddleware(getUserFromRequest)
 
 	r.Use(middleware.NewAuth(zap.L(), s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}).Wrap)
-	r.Use(eemiddleware.NewPat(s.serverOptions.SigNoz.SQLStore.BunDB(), []string{"SIGNOZ-API-KEY"}).Wrap)
+	r.Use(eemiddleware.NewPat(s.serverOptions.SigNoz.SQLStore, []string{"SIGNOZ-API-KEY"}).Wrap)
 	r.Use(middleware.NewTimeout(zap.L(),
 		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
 		s.serverOptions.Config.APIServer.Timeout.Default,

ee/query-service/license/db.go

@@ -9,10 +9,10 @@ import (
 
 	"github.com/jmoiron/sqlx"
 	"github.com/mattn/go-sqlite3"
-	"github.com/uptrace/bun"
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"go.uber.org/zap"
 )
@@ -20,14 +20,14 @@ import (
 // Repo is license repo. stores license keys in a secured DB
 type Repo struct {
 	db    *sqlx.DB
-	bundb *bun.DB
+	store sqlstore.SQLStore
 }
 
 // NewLicenseRepo initiates a new license repo
-func NewLicenseRepo(db *sqlx.DB, bundb *bun.DB) Repo {
+func NewLicenseRepo(db *sqlx.DB, store sqlstore.SQLStore) Repo {
 	return Repo{
 		db:    db,
-		bundb: bundb,
+		store: store,
 	}
 }
 
@@ -171,7 +171,7 @@ func (r *Repo) UpdateLicenseV3(ctx context.Context, l *model.LicenseV3) error {
 
 func (r *Repo) CreateFeature(req *types.FeatureStatus) *basemodel.ApiError {
 
-	_, err := r.bundb.NewInsert().
+	_, err := r.store.BunDB().NewInsert().
 		Model(req).
 		Exec(context.Background())
 	if err != nil {
@@ -183,7 +183,7 @@ func (r *Repo) CreateFeature(req *types.FeatureStatus) *basemodel.ApiError {
 func (r *Repo) GetFeature(featureName string) (types.FeatureStatus, error) {
 	var feature types.FeatureStatus
 
-	err := r.bundb.NewSelect().
+	err := r.store.BunDB().NewSelect().
 		Model(&feature).
 		Where("name = ?", featureName).
 		Scan(context.Background())
@@ -212,7 +212,7 @@ func (r *Repo) GetAllFeatures() ([]basemodel.Feature, error) {
 
 func (r *Repo) UpdateFeature(req types.FeatureStatus) error {
 
-	_, err := r.bundb.NewUpdate().
+	_, err := r.store.BunDB().NewUpdate().
 		Model(&req).
 		Where("name = ?", req.Name).
 		Exec(context.Background())

ee/query-service/license/manager.go

@@ -7,11 +7,11 @@ import (
 
 	"github.com/jmoiron/sqlx"
 	"github.com/pkg/errors"
-	"github.com/uptrace/bun"
 
 	"sync"
 
 	baseconstants "github.com/SigNoz/signoz/pkg/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 
@@ -45,12 +45,12 @@ type Manager struct {
 	activeFeatures  basemodel.FeatureSet
 }
 
-func StartManager(db *sqlx.DB, bundb *bun.DB, features ...basemodel.Feature) (*Manager, error) {
+func StartManager(db *sqlx.DB, store sqlstore.SQLStore, features ...basemodel.Feature) (*Manager, error) {
 	if LM != nil {
 		return LM, nil
 	}
 
-	repo := NewLicenseRepo(db, bundb)
+	repo := NewLicenseRepo(db, store)
 	m := &Manager{
 		repo: &repo,
 	}

ee/query-service/main.go

@@ -3,10 +3,7 @@ package main
 import (
 	"context"
 	"flag"
-	"log"
 	"os"
-	"os/signal"
-	"strconv"
 	"time"
 
 	"github.com/SigNoz/signoz/ee/query-service/app"
@@ -15,70 +12,21 @@ import (
 	"github.com/SigNoz/signoz/pkg/config/fileprovider"
 	"github.com/SigNoz/signoz/pkg/query-service/auth"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
-	"github.com/SigNoz/signoz/pkg/query-service/version"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"go.opentelemetry.io/otel/sdk/resource"
-	semconv "go.opentelemetry.io/otel/semconv/v1.4.0"
-	"google.golang.org/grpc"
-	"google.golang.org/grpc/credentials/insecure"
+	"github.com/SigNoz/signoz/pkg/version"
 
 	prommodel "github.com/prometheus/common/model"
 
-	zapotlpencoder "github.com/SigNoz/zap_otlp/zap_otlp_encoder"
-	zapotlpsync "github.com/SigNoz/zap_otlp/zap_otlp_sync"
-
 	"go.uber.org/zap"
 	"go.uber.org/zap/zapcore"
 )
 
-func initZapLog(enableQueryServiceLogOTLPExport bool) *zap.Logger {
+func initZapLog() *zap.Logger {
 	config := zap.NewProductionConfig()
-	ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
-	defer stop()
-
-	config.EncoderConfig.EncodeDuration = zapcore.MillisDurationEncoder
-	config.EncoderConfig.EncodeLevel = zapcore.CapitalLevelEncoder
 	config.EncoderConfig.TimeKey = "timestamp"
 	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
-
-	otlpEncoder := zapotlpencoder.NewOTLPEncoder(config.EncoderConfig)
-	consoleEncoder := zapcore.NewJSONEncoder(config.EncoderConfig)
-	defaultLogLevel := zapcore.InfoLevel
-
-	res := resource.NewWithAttributes(
-		semconv.SchemaURL,
-		semconv.ServiceNameKey.String("query-service"),
-	)
-
-	core := zapcore.NewTee(
-		zapcore.NewCore(consoleEncoder, os.Stdout, defaultLogLevel),
-	)
-
-	if enableQueryServiceLogOTLPExport {
-		ctx, cancel := context.WithTimeout(ctx, time.Second*30)
-		defer cancel()
-		conn, err := grpc.DialContext(ctx, baseconst.OTLPTarget, grpc.WithBlock(), grpc.WithTransportCredentials(insecure.NewCredentials()))
-		if err != nil {
-			log.Fatalf("failed to establish connection: %v", err)
-		} else {
-			logExportBatchSizeInt, err := strconv.Atoi(baseconst.LogExportBatchSize)
-			if err != nil {
-				logExportBatchSizeInt = 512
-			}
-			ws := zapcore.AddSync(zapotlpsync.NewOtlpSyncer(conn, zapotlpsync.Options{
-				BatchSize:      logExportBatchSizeInt,
-				ResourceSchema: semconv.SchemaURL,
-				Resource:       res,
-			}))
-			core = zapcore.NewTee(
-				zapcore.NewCore(consoleEncoder, os.Stdout, defaultLogLevel),
-				zapcore.NewCore(otlpEncoder, zapcore.NewMultiWriteSyncer(ws), defaultLogLevel),
-			)
-		}
-	}
-	logger := zap.New(core, zap.AddCaller(), zap.AddStacktrace(zapcore.ErrorLevel))
-
+	logger, _ := config.Build()
 	return logger
 }
 
@@ -99,7 +47,6 @@ func main() {
 	var useLogsNewSchema bool
 	var useTraceNewSchema bool
 	var cacheConfigPath, fluxInterval, fluxIntervalForTraceDetail string
-	var enableQueryServiceLogOTLPExport bool
 	var preferSpanMetrics bool
 
 	var maxIdleConns int
@@ -121,19 +68,15 @@ func main() {
 	flag.StringVar(&cacheConfigPath, "experimental.cache-config", "", "(cache config to use)")
 	flag.StringVar(&fluxInterval, "flux-interval", "5m", "(the interval to exclude data from being cached to avoid incorrect cache for data in motion)")
 	flag.StringVar(&fluxIntervalForTraceDetail, "flux-interval-trace-detail", "2m", "(the interval to exclude data from being cached to avoid incorrect cache for trace data in motion)")
-	flag.BoolVar(&enableQueryServiceLogOTLPExport, "enable.query.service.log.otlp.export", false, "(enable query service log otlp export)")
 	flag.StringVar(&cluster, "cluster", "cluster", "(cluster name - defaults to 'cluster')")
 	flag.StringVar(&gatewayUrl, "gateway-url", "", "(url to the gateway)")
 	flag.BoolVar(&useLicensesV3, "use-licenses-v3", false, "use licenses_v3 schema for licenses")
 	flag.Parse()
 
-	loggerMgr := initZapLog(enableQueryServiceLogOTLPExport)
-
+	loggerMgr := initZapLog()
 	zap.ReplaceGlobals(loggerMgr)
 	defer loggerMgr.Sync() // flushes buffer, if any
 
-	version.PrintVersion()
-
 	config, err := signoz.NewConfig(context.Background(), config.ResolverConfig{
 		Uris: []string{"env:"},
 		ProviderFactories: []config.ProviderFactory{
@@ -149,6 +92,8 @@ func main() {
 		zap.L().Fatal("Failed to create config", zap.Error(err))
 	}
 
+	version.Info.PrettyPrint(config.Version)
+
 	signoz, err := signoz.New(
 		context.Background(),
 		config,

frontend/package.json

@@ -90,7 +90,7 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
-		"lucide-react": "0.379.0",
+		"lucide-react": "0.427.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
 		"overlayscrollbars": "^2.8.1",

frontend/public/locales/en/titles.json

@@ -54,6 +54,7 @@
 	"SUPPORT": "SigNoz | Support",
 	"LOGS_SAVE_VIEWS": "SigNoz | Logs Saved Views",
 	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
+	"TRACES_FUNNELS": "SigNoz | Traces Funnels",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
 	"INTEGRATIONS": "SigNoz | Integrations",

frontend/src/AppRoutes/pageComponents.ts

@@ -42,6 +42,17 @@ export const TracesSaveViews = Loadable(
 		import(/* webpackChunkName: "Traces Save Views" */ 'pages/TracesModulePage'),
 );
 
+export const TracesFunnels = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
+);
+export const TracesFunnelDetails = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesFunnelDetails'
+		),
+);
+
 export const TraceFilter = Loadable(
 	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
 );
@@ -196,7 +207,7 @@ export const PasswordReset = Loadable(
 export const SomethingWentWrong = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "ErrorBoundaryFallback" */ 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'
+			/* webpackChunkName: "SomethingWentWrong" */ 'pages/SomethingWentWrong'
 		),
 );
 
@@ -284,3 +295,14 @@ export const MetricsExplorer = Loadable(
 	() =>
 		import(/* webpackChunkName: "MetricsExplorer" */ 'pages/MetricsExplorer'),
 );
+
+export const ApiMonitoring = Loadable(
+	() => import(/* webpackChunkName: "ApiMonitoring" */ 'pages/ApiMonitoring'),
+);
+
+export const DynamicVariableTest = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "DynamicVariableTest" */ 'pages/DynamicVariableTest'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -8,12 +8,14 @@ import {
 	AllAlertChannels,
 	AllErrors,
 	APIKeys,
+	ApiMonitoring,
 	BillingPage,
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
 	CustomDomainSettings,
 	DashboardPage,
 	DashboardWidget,
+	DynamicVariableTest,
 	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,
@@ -52,6 +54,8 @@ import {
 	TraceDetail,
 	TraceFilter,
 	TracesExplorer,
+	TracesFunnelDetails,
+	TracesFunnels,
 	TracesSaveViews,
 	UnAuthorized,
 	UsageExplorerPage,
@@ -236,6 +240,20 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
+	{
+		path: ROUTES.TRACES_FUNNELS,
+		exact: true,
+		component: TracesFunnels,
+		isPrivate: true,
+		key: 'TRACES_FUNNELS',
+	},
+	{
+		path: ROUTES.TRACES_FUNNELS_DETAIL,
+		exact: true,
+		component: TracesFunnelDetails,
+		isPrivate: true,
+		key: 'TRACES_FUNNELS_DETAIL',
+	},
 	{
 		path: ROUTES.CHANNELS_NEW,
 		exact: true,
@@ -481,6 +499,20 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.API_MONITORING,
+		exact: true,
+		component: ApiMonitoring,
+		key: 'API_MONITORING',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.DYNAMIC_VARIABLE_TEST,
+		exact: true,
+		component: DynamicVariableTest,
+		key: 'DYNAMIC_VARIABLE_TEST',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/traceFunnels/index.ts

@@ -0,0 +1,109 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	CreateFunnelPayload,
+	CreateFunnelResponse,
+	FunnelData,
+} from 'types/api/traceFunnels';
+
+const FUNNELS_BASE_PATH = '/trace-funnels';
+
+export const createFunnel = async (
+	payload: CreateFunnelPayload,
+): Promise<SuccessResponse<CreateFunnelResponse> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/new-funnel`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel created successfully',
+		payload: response.data,
+	};
+};
+
+interface GetFunnelsListParams {
+	search?: string;
+}
+
+export const getFunnelsList = async ({
+	search = '',
+}: GetFunnelsListParams = {}): Promise<
+	SuccessResponse<FunnelData[]> | ErrorResponse
+> => {
+	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,
+	};
+};
+
+export const getFunnelById = async (
+	funnelId: string,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.get(
+		`${FUNNELS_BASE_PATH}/get/${funnelId}`,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+interface RenameFunnelPayload {
+	id: string;
+	funnel_name: string;
+}
+
+export const renameFunnel = async (
+	payload: RenameFunnelPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.put(
+		`${FUNNELS_BASE_PATH}/${payload.id}/update`,
+		{ funnel_name: payload.funnel_name },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel renamed successfully',
+		payload: response.data,
+	};
+};
+
+interface DeleteFunnelPayload {
+	id: string;
+}
+
+export const deleteFunnel = async (
+	payload: DeleteFunnelPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.delete(
+		`${FUNNELS_BASE_PATH}/delete/${payload.id}`,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel deleted successfully',
+		payload: response.data,
+	};
+};

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -199,12 +199,12 @@ function ExplorerCard({
 											value={viewName || undefined}
 										>
 											{viewsData?.data.data.map((view) => (
-												<Select.Option key={view.uuid} value={view.name}>
+												<Select.Option key={view.id} value={view.name}>
 													<MenuItemGenerator
 														viewName={view.name}
 														viewKey={viewKey}
 														createdBy={view.createdBy}
-														uuid={view.uuid}
+														uuid={view.id}
 														refetchAllView={refetchAllView}
 														viewData={viewsData.data.data}
 														sourcePage={sourcepage}

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -53,17 +53,12 @@ function MenuItemGenerator({
 		({ key }: { key: string }): void => {
 			const currentViewDetails = getViewDetailsUsingViewKey(key, viewData);
 			if (!currentViewDetails) return;
-			const {
-				query,
-				name,
-				uuid,
-				panelType: currentPanelType,
-			} = currentViewDetails;
+			const { query, name, id, panelType: currentPanelType } = currentViewDetails;
 
 			handleExplorerTabChange(currentPanelType, {
 				query,
 				name,
-				uuid,
+				id,
 			});
 		},
 		[viewData, handleExplorerTabChange],

frontend/src/components/ExplorerCard/__mock__/viewData.ts

@@ -4,7 +4,7 @@ import { DataSource } from 'types/common/queryBuilder';
 
 export const viewMockData: ViewProps[] = [
 	{
-		uuid: 'view1',
+		id: 'view1',
 		name: 'View 1',
 		createdBy: 'User 1',
 		category: 'category 1',
@@ -17,7 +17,7 @@ export const viewMockData: ViewProps[] = [
 		updatedBy: 'User 1',
 	},
 	{
-		uuid: 'view2',
+		id: 'view2',
 		name: 'View 2',
 		createdBy: 'User 2',
 		category: 'category 2',

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

@@ -25,9 +25,9 @@ describe('MenuItemGenerator', () => {
 			<MockQueryClientProvider>
 				<MenuItemGenerator
 					viewName={viewMockData[0].name}
-					viewKey={viewMockData[0].uuid}
+					viewKey={viewMockData[0].id}
 					createdBy={viewMockData[0].createdBy}
-					uuid={viewMockData[0].uuid}
+					uuid={viewMockData[0].id}
 					refetchAllView={jest.fn()}
 					viewData={viewMockData}
 					sourcePage={DataSource.TRACES}
@@ -43,9 +43,9 @@ describe('MenuItemGenerator', () => {
 			<MockQueryClientProvider>
 				<MenuItemGenerator
 					viewName={viewMockData[0].name}
-					viewKey={viewMockData[0].uuid}
+					viewKey={viewMockData[0].id}
 					createdBy={viewMockData[0].createdBy}
-					uuid={viewMockData[0].uuid}
+					uuid={viewMockData[0].id}
 					refetchAllView={jest.fn()}
 					viewData={viewMockData}
 					sourcePage={DataSource.TRACES}

frontend/src/components/ExplorerCard/types.ts

@@ -26,7 +26,7 @@ export type GetViewDetailsUsingViewKey = (
 	| {
 			query: Query;
 			name: string;
-			uuid: string;
+			id: string;
 			panelType: PANEL_TYPES;
 			extraData?: string;
 	  }

frontend/src/components/ExplorerCard/utils.ts

@@ -27,11 +27,11 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
 	viewKey,
 	data,
 ) => {
-	const selectedView = data?.find((view) => view.uuid === viewKey);
+	const selectedView = data?.find((view) => view.id === viewKey);
 	if (selectedView) {
-		const { compositeQuery, name, uuid, extraData } = selectedView;
+		const { compositeQuery, name, id, extraData } = selectedView;
 		const query = mapQueryDataFromApi(compositeQuery);
-		return { query, name, uuid, panelType: compositeQuery.panelType, extraData };
+		return { query, name, id, panelType: compositeQuery.panelType, extraData };
 	}
 	return undefined;
 };

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -1,7 +1,9 @@
 import './HostMetricTraces.styles.scss';
 
+import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
@@ -19,7 +21,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -137,6 +139,13 @@ function HostMetricTraces({
 	const totalCount =
 		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
 
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, []);
+
 	return (
 		<div className="host-metric-traces">
 			<div className="host-metric-traces-header">
@@ -189,6 +198,9 @@ function HostMetricTraces({
 						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
 					/>
 				</div>
 			)}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -149,6 +149,10 @@ function HostMetricsDetails({
 
 	const handleTabChange = (e: RadioChangeEvent): void => {
 		setSelectedView(e.target.value);
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: e.target.value,
+		});
 	};
 
 	const handleTimeChange = useCallback(

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

@@ -0,0 +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;    
+    }
+}

frontend/src/components/LearnMore/LearnMore.tsx

@@ -0,0 +1,34 @@
+import './LearnMore.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
+import { ArrowUpRight } from 'lucide-react';
+
+type LearnMoreProps = {
+	text?: string;
+	url?: string;
+	onClick?: () => void;
+};
+
+function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
+	const handleClick = (): void => {
+		onClick?.();
+		if (url) {
+			window.open(url, '_blank');
+		}
+	};
+	return (
+		<Button type="link" className="learn-more" onClick={handleClick}>
+			<div className="learn-more__text">{text}</div>
+			<ArrowUpRight size={16} color={Color.BG_ROBIN_400} />
+		</Button>
+	);
+}
+
+LearnMore.defaultProps = {
+	text: 'Learn more',
+	url: '',
+	onClick: (): void => {},
+};
+
+export default LearnMore;

frontend/src/components/MultiSelect/MultiSelect.styles.scss

@@ -0,0 +1,231 @@
+.multi-select-container {
+	position: relative;
+	width: 100%;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+}
+
+.multi-select-label {
+	margin-bottom: 4px;
+	font-size: 14px;
+	color: rgba(0, 0, 0, 0.85);
+}
+
+.multi-select-input {
+	width: 100%;
+	min-height: 40px;
+	border: 1px solid #d9d9d9;
+	border-radius: 6px;
+	padding: 4px 8px;
+	display: flex;
+	align-items: center;
+	cursor: text;
+	background-color: #fff;
+	transition: all 0.3s;
+
+	&:hover {
+		border-color: #40a9ff;
+	}
+
+	&:focus,
+	&.multi-select-input-focused {
+		border-color: #40a9ff;
+		box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+		outline: 0;
+	}
+}
+
+.multi-select-chips {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+	gap: 4px;
+	align-items: center;
+}
+
+.multi-select-chip {
+	background-color: #f0f0f0;
+	border-radius: 4px;
+	padding: 2px 8px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 200px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 14px;
+	line-height: 22px;
+
+	.multi-select-chip-remove {
+		cursor: pointer;
+		font-size: 12px;
+		background: none;
+		border: none;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(0, 0, 0, 0.45);
+
+		&:hover {
+			color: #ff4d4f;
+		}
+	}
+}
+
+.multi-select-search {
+	flex: 1;
+	min-width: 50px;
+	border: none;
+	outline: none;
+	background: transparent;
+
+	&:focus {
+		border: none;
+		box-shadow: none;
+	}
+
+	// Override Ant Design's styles
+	.ant-input {
+		background: transparent;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}
+
+.multi-select-clear-all {
+	background: none;
+	border: none;
+	padding: 4px;
+	cursor: pointer;
+	color: rgba(0, 0, 0, 0.45);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:hover {
+		color: #ff4d4f;
+	}
+}
+
+.multi-select-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	max-height: 400px;
+	border: 1px solid #d9d9d9;
+	border-radius: 6px;
+	margin-top: 4px;
+	background-color: #fff;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	z-index: 1050;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.multi-select-option {
+	padding: 8px 12px;
+	cursor: pointer;
+
+	&:hover {
+		background-color: #f5f5f5;
+	}
+}
+
+.multi-select-divider {
+	height: 1px;
+	background-color: #f0f0f0;
+	margin: 0;
+}
+
+.multi-select-section-label {
+	padding: 8px 12px;
+	font-weight: 500;
+	color: rgba(0, 0, 0, 0.45);
+	font-size: 12px;
+	background-color: #fafafa;
+}
+
+.multi-select-loading {
+	padding: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	justify-content: center;
+}
+
+.multi-select-no-results {
+	padding: 12px;
+	text-align: center;
+	color: rgba(0, 0, 0, 0.45);
+}
+
+.multi-select-options-container,
+.multi-select-section-content {
+	overflow-y: auto;
+
+	/* For WebKit browsers */
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #f0f0f0;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #ccc;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: #aaa;
+	}
+
+	/* For Firefox */
+	scrollbar-width: thin;
+	scrollbar-color: #ccc #f0f0f0;
+}
+
+.multi-select-error {
+	border-color: #ff4d4f;
+
+	&:hover,
+	&:focus,
+	&.multi-select-input-focused {
+		border-color: #ff7875;
+		box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+	}
+}
+
+.multi-select-error-text {
+	color: #ff4d4f;
+	font-size: 14px;
+	line-height: 1.5;
+	margin-top: 4px;
+}
+
+.multi-select-disabled {
+	.multi-select-input {
+		background-color: #f5f5f5;
+		cursor: not-allowed;
+		color: rgba(0, 0, 0, 0.25);
+		border-color: #d9d9d9;
+
+		&:hover {
+			border-color: #d9d9d9;
+		}
+	}
+
+	.multi-select-chip {
+		color: rgba(0, 0, 0, 0.25);
+		background-color: #eee;
+	}
+}

frontend/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,595 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import './MultiSelect.styles.scss';
+
+import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { Checkbox, Input, Spin } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { InputRef } from 'antd/lib/input';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface MultiSelectOption {
+	label: string;
+	value: string;
+	selected?: boolean;
+	disabled?: boolean;
+}
+
+export interface MultiSelectSection {
+	title: string;
+	options: MultiSelectOption[];
+}
+
+export interface MultiSelectProps {
+	/** Array of options to display in the dropdown */
+	options: MultiSelectOption[];
+	/** Callback when selected values change */
+	onChange: (selectedValues: string[]) => void;
+	/** Currently selected values */
+	value?: string[];
+	/** Placeholder text for the search input */
+	placeholder?: string;
+	/** Whether the component is in loading state */
+	loading?: boolean;
+	/** Allow users to add custom values */
+	allowCustomValues?: boolean;
+	/** Callback when search text changes - can be used for server filtering */
+	onSearch?: (searchText: string) => void;
+	/** Custom class name */
+	className?: string;
+	/** Additional sections to display (e.g., "Related Values") */
+	additionalSections?: MultiSelectSection[];
+	/** Show "Select All" option */
+	showSelectAll?: boolean;
+	/** Maximum height of dropdown in pixels */
+	dropdownMaxHeight?: number;
+	/** Maximum width of dropdown in pixels (defaults to matching input width) */
+	dropdownMaxWidth?: number;
+	/** Disable the component */
+	disabled?: boolean;
+	/** Error message to display */
+	error?: string;
+	/** Label text */
+	label?: string;
+	/** Allow users to clear all selections */
+	allowClear?: boolean;
+	/** Maximum height of a section */
+	sectionMaxHeight?: number;
+}
+
+function MultiSelect({
+	options,
+	onChange,
+	value = [],
+	placeholder = 'Search...',
+	loading = false,
+	allowCustomValues = true,
+	onSearch,
+	className = '',
+	additionalSections = [],
+	showSelectAll = true,
+	dropdownMaxHeight = 400,
+	dropdownMaxWidth,
+	disabled = false,
+	error,
+	label,
+	allowClear = true,
+	sectionMaxHeight = 150,
+}: MultiSelectProps): JSX.Element {
+	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+	const [searchText, setSearchText] = useState<string>('');
+	const [selectedValues, setSelectedValues] = useState<string[]>(value);
+	const [displayOptions, setDisplayOptions] = useState<MultiSelectOption[]>(
+		options,
+	);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<InputRef>(null);
+	const dropdownRef = useRef<HTMLDivElement>(null);
+	const [focusedChipIndex, setFocusedChipIndex] = useState<number>(-1);
+	const chipRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+	// Handle save action - memoize with useCallback
+	const handleSave = useCallback((): void => {
+		setIsDropdownOpen(false);
+		setSearchText('');
+		onChange(selectedValues);
+	}, [onChange, selectedValues]);
+
+	// Synchronize value prop with internal state
+	useEffect(() => {
+		setSelectedValues(value);
+	}, [value]);
+
+	// Filter and sort options based on search text
+	useEffect(() => {
+		// Filter options based on search text
+		const filteredOptions = options.filter((option) =>
+			option.label.toLowerCase().includes(searchText.toLowerCase()),
+		);
+
+		// Add custom value option if no matches found and allowCustomValues is true
+		if (
+			allowCustomValues &&
+			searchText &&
+			!filteredOptions.some(
+				(option) => option.label.toLowerCase() === searchText.toLowerCase(),
+			) &&
+			!filteredOptions.some(
+				(option) => option.value.toLowerCase() === searchText.toLowerCase(),
+			)
+		) {
+			filteredOptions.unshift({
+				label: `Add "${searchText}"`,
+				value: searchText,
+			});
+		}
+
+		// Sort options: selected first, then matching search term
+		const sortedOptions = [...filteredOptions].sort((a, b) => {
+			// First by selection status
+			if (selectedValues.includes(a.value) && !selectedValues.includes(b.value))
+				return -1;
+			if (!selectedValues.includes(a.value) && selectedValues.includes(b.value))
+				return 1;
+
+			// Then by match position (exact matches or starts with come first)
+			const aLower = a.label.toLowerCase();
+			const bLower = b.label.toLowerCase();
+			const searchLower = searchText.toLowerCase();
+
+			if (aLower === searchLower && bLower !== searchLower) return -1;
+			if (aLower !== searchLower && bLower === searchLower) return 1;
+			if (aLower.startsWith(searchLower) && !bLower.startsWith(searchLower))
+				return -1;
+			if (!aLower.startsWith(searchLower) && bLower.startsWith(searchLower))
+				return 1;
+
+			return 0;
+		});
+
+		setDisplayOptions(sortedOptions);
+	}, [options, searchText, selectedValues, allowCustomValues]);
+
+	// Close dropdown when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent): void => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(event.target as Node)
+			) {
+				handleSave();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [selectedValues, handleSave]);
+
+	// Adjust dropdown position if needed
+	useEffect(() => {
+		if (isDropdownOpen && dropdownRef.current && containerRef.current) {
+			const containerRect = containerRef.current.getBoundingClientRect();
+			const dropdownHeight = dropdownRef.current.offsetHeight;
+			const viewportHeight = window.innerHeight;
+
+			// Check if dropdown extends beyond viewport bottom
+			if (
+				containerRect.bottom + dropdownHeight > viewportHeight &&
+				containerRect.top > dropdownHeight
+			) {
+				dropdownRef.current.style.top = 'auto';
+				dropdownRef.current.style.bottom = '100%';
+				dropdownRef.current.style.marginTop = '0';
+				dropdownRef.current.style.marginBottom = '4px';
+			}
+		}
+	}, [isDropdownOpen, displayOptions]);
+
+	// Handle search input change
+	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		const text = e.target.value;
+		setSearchText(text);
+		if (onSearch) {
+			onSearch(text);
+		}
+	};
+
+	// Handle selection change
+	const handleSelectionChange = (
+		option: MultiSelectOption,
+		e: CheckboxChangeEvent,
+	): void => {
+		const { checked } = e.target;
+		let newSelectedValues: string[];
+
+		if (checked) {
+			newSelectedValues = [...selectedValues, option.value];
+		} else {
+			newSelectedValues = selectedValues.filter((val) => val !== option.value);
+		}
+
+		setSelectedValues(newSelectedValues);
+	};
+
+	// Handle "All" checkbox change
+	const handleSelectAll = (e: CheckboxChangeEvent): void => {
+		if (e.target.checked) {
+			const allValues = options
+				.filter((option) => !option.disabled)
+				.map((option) => option.value);
+			setSelectedValues(allValues);
+		} else {
+			setSelectedValues([]);
+		}
+	};
+
+	// Remove a selected item
+	const handleRemoveItem = useCallback(
+		(value: string): void => {
+			const newSelectedValues = selectedValues.filter((val) => val !== value);
+			setSelectedValues(newSelectedValues);
+		},
+		[selectedValues],
+	);
+
+	// Handle clicking the input area
+	const handleInputClick = (): void => {
+		if (!disabled) {
+			setIsDropdownOpen(true);
+			inputRef.current?.focus();
+		}
+	};
+
+	// Handle clear all selections
+	const handleClearAll = (): void => {
+		setSelectedValues([]);
+		setSearchText('');
+		inputRef.current?.focus();
+	};
+
+	// Get display value of a selection (chips)
+	const getSelectedOptions = (): MultiSelectOption[] =>
+		selectedValues.map((value) => {
+			const option = options.find((opt) => opt.value === value);
+			return {
+				label: option?.label || value,
+				value,
+			};
+		});
+
+	const selectedOptions = getSelectedOptions();
+	const allSelectableOptions = options.filter((option) => !option.disabled);
+	const allSelected =
+		allSelectableOptions.length > 0 &&
+		selectedValues.length === allSelectableOptions.length;
+
+	const containerClasses = [
+		'multi-select-container',
+		className,
+		disabled ? 'multi-select-disabled' : '',
+		error ? 'multi-select-error' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	const inputClasses = [
+		'multi-select-input',
+		isDropdownOpen ? 'multi-select-input-focused' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	// Reset chip refs array when selected options change
+	useEffect(() => {
+		chipRefs.current = Array(selectedOptions.length).fill(null);
+	}, [selectedOptions.length]);
+
+	// Handle chip keyboard navigation
+	const handleChipKeyDown = useCallback(
+		(e: React.KeyboardEvent, index: number) => {
+			e.stopPropagation(); // Prevent bubbling to container
+
+			switch (e.key) {
+				case 'ArrowLeft':
+					e.preventDefault();
+					// Move focus to previous chip
+					if (index > 0) {
+						setFocusedChipIndex(index - 1);
+					}
+					break;
+
+				case 'ArrowRight':
+					e.preventDefault();
+					// Move focus to next chip or input
+					if (index < selectedOptions.length - 1) {
+						setFocusedChipIndex(index + 1);
+					} else {
+						// Focus the input when at the last chip
+						setFocusedChipIndex(-1);
+						inputRef.current?.focus();
+					}
+					break;
+
+				case 'Delete':
+				case 'Backspace':
+					e.preventDefault();
+					// Remove current chip
+					handleRemoveItem(selectedOptions[index].value);
+
+					// Adjust focus after deletion
+					if (selectedOptions.length > 1) {
+						// Focus previous chip if not at beginning
+						const newIndex = Math.min(index, selectedOptions.length - 2);
+						setFocusedChipIndex(newIndex);
+					} else {
+						// If this was the last chip, focus input
+						setFocusedChipIndex(-1);
+						inputRef.current?.focus();
+					}
+					break;
+
+				case 'Escape':
+					e.preventDefault();
+					// Return focus to input
+					setFocusedChipIndex(-1);
+					inputRef.current?.focus();
+					break;
+				default:
+					// No-op for unhandled keys
+					break;
+			}
+		},
+		[selectedOptions, handleRemoveItem],
+	);
+
+	// Handle key events in the input
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+		if (e.key === 'Enter') {
+			// Add custom value on Enter if it doesn't exist
+			if (
+				allowCustomValues &&
+				searchText &&
+				!options.some(
+					(option) => option.value.toLowerCase() === searchText.toLowerCase(),
+				) &&
+				!options.some(
+					(option) => option.label.toLowerCase() === searchText.toLowerCase(),
+				)
+			) {
+				const newSelectedValues = [...selectedValues, searchText];
+				setSelectedValues(newSelectedValues);
+				setSearchText('');
+			} else if (isDropdownOpen) {
+				handleSave();
+			}
+		} else if (e.key === 'Escape') {
+			handleSave();
+		} else if (
+			e.key === 'Backspace' &&
+			!searchText &&
+			selectedValues.length > 0
+		) {
+			// Remove the last selected item when pressing backspace in an empty input
+			const newSelectedValues = [...selectedValues];
+			newSelectedValues.pop();
+			setSelectedValues(newSelectedValues);
+		} else if (e.key === 'Tab' && isDropdownOpen) {
+			// Close dropdown but keep focus within component
+			e.preventDefault();
+			handleSave();
+		}
+
+		// Add navigation TO chips when in input field
+		if (e.key === 'ArrowLeft' && !searchText && selectedOptions.length > 0) {
+			e.preventDefault();
+			setFocusedChipIndex(selectedOptions.length - 1);
+		}
+	};
+
+	// Focus the appropriate chip when focusedChipIndex changes
+	useEffect(() => {
+		if (focusedChipIndex >= 0 && chipRefs.current[focusedChipIndex]) {
+			chipRefs.current[focusedChipIndex]?.focus();
+		}
+	}, [focusedChipIndex]);
+
+	return (
+		<div className={containerClasses} ref={containerRef}>
+			{label && <div className="multi-select-label">{label}</div>}
+			<div
+				className={inputClasses}
+				onClick={handleInputClick}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						handleInputClick();
+					}
+				}}
+				role="combobox"
+				aria-expanded={isDropdownOpen}
+				aria-haspopup="listbox"
+				aria-controls="multi-select-dropdown"
+				aria-owns="multi-select-dropdown"
+				tabIndex={disabled ? -1 : 0}
+			>
+				<div className="multi-select-chips">
+					{selectedOptions.map((option, index) => (
+						<div
+							key={option.value}
+							className={`multi-select-chip ${
+								focusedChipIndex === index ? 'multi-select-chip-focused' : ''
+							}`}
+							ref={(el): void => {
+								chipRefs.current[index] = el;
+							}}
+							role="button"
+							tabIndex={0}
+							onKeyDown={(e): void => handleChipKeyDown(e, index)}
+							onFocus={(): void => setFocusedChipIndex(index)}
+							onClick={(e): void => e.stopPropagation()}
+							aria-label={`Selected option: ${option.label}`}
+						>
+							{option.label}
+							{!disabled && (
+								<button
+									type="button"
+									className="multi-select-chip-remove"
+									onClick={(e): void => {
+										e.stopPropagation();
+										handleRemoveItem(option.value);
+									}}
+									aria-label={`Remove ${option.label}`}
+									tabIndex={-1} // Don't make the inner button tabbable
+								>
+									<CloseOutlined />
+								</button>
+							)}
+						</div>
+					))}
+					<Input
+						ref={inputRef}
+						className="multi-select-search"
+						placeholder={selectedOptions.length === 0 ? placeholder : ''}
+						value={searchText}
+						onChange={handleSearchChange}
+						onKeyDown={handleKeyDown}
+						onFocus={(): void => setIsDropdownOpen(true)}
+						suffix={<SearchOutlined />}
+						bordered={false}
+						disabled={disabled}
+					/>
+					{allowClear && selectedValues.length > 0 && !disabled && (
+						<button
+							type="button"
+							className="multi-select-clear-all"
+							onClick={(e): void => {
+								e.stopPropagation();
+								handleClearAll();
+							}}
+							aria-label="Clear all selections"
+						>
+							<CloseOutlined />
+						</button>
+					)}
+				</div>
+			</div>
+
+			{error && <div className="multi-select-error-text">{error}</div>}
+
+			{isDropdownOpen && !disabled && (
+				<div
+					className="multi-select-dropdown"
+					ref={dropdownRef}
+					style={{
+						maxHeight: `${dropdownMaxHeight}px`,
+						maxWidth: dropdownMaxWidth ? `${dropdownMaxWidth}px` : undefined,
+					}}
+					id="multi-select-dropdown"
+					role="listbox"
+					aria-multiselectable="true"
+				>
+					{loading ? (
+						<div className="multi-select-loading">
+							<Spin size="small" />
+							<span>We are updating the values ...</span>
+						</div>
+					) : (
+						<>
+							{showSelectAll && (
+								<>
+									<div className="multi-select-option">
+										<Checkbox checked={allSelected} onChange={handleSelectAll}>
+											ALL
+										</Checkbox>
+									</div>
+									<div className="multi-select-divider" />
+								</>
+							)}
+							<div
+								className="multi-select-options-container"
+								style={{ maxHeight: `${sectionMaxHeight}px` }}
+							>
+								{displayOptions.length > 0 ? (
+									displayOptions.map((option) => (
+										<div
+											key={option.value}
+											className="multi-select-option"
+											role="option"
+											aria-selected={selectedValues.includes(option.value)}
+										>
+											<Checkbox
+												checked={selectedValues.includes(option.value)}
+												onChange={(e): void => handleSelectionChange(option, e)}
+												disabled={option.disabled}
+											>
+												{option.label}
+											</Checkbox>
+										</div>
+									))
+								) : (
+									<div className="multi-select-no-results">
+										{allowCustomValues && searchText
+											? `Add "${searchText}"`
+											: 'No results found'}
+									</div>
+								)}
+							</div>
+
+							{additionalSections.map(
+								(section) =>
+									section.options.length > 0 && (
+										<div key={`section-${section.title}`}>
+											<div className="multi-select-divider" />
+											<div className="multi-select-section-label">{section.title}</div>
+											<div
+												className="multi-select-section-content"
+												style={{ maxHeight: `${sectionMaxHeight}px` }}
+											>
+												{section.options.map((option) => (
+													<div
+														key={option.value}
+														className="multi-select-option"
+														role="option"
+														aria-selected={selectedValues.includes(option.value)}
+													>
+														<Checkbox
+															checked={selectedValues.includes(option.value)}
+															onChange={(e): void => handleSelectionChange(option, e)}
+															disabled={option.disabled}
+														>
+															{option.label}
+														</Checkbox>
+													</div>
+												))}
+											</div>
+										</div>
+									),
+							)}
+						</>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+// Define defaultProps to fix linter warnings
+MultiSelect.defaultProps = {
+	value: [],
+	placeholder: 'Search...',
+	loading: false,
+	allowCustomValues: true,
+	onSearch: undefined,
+	className: '',
+	additionalSections: [],
+	showSelectAll: true,
+	dropdownMaxHeight: 400,
+	dropdownMaxWidth: undefined,
+	disabled: false,
+	error: undefined,
+	label: undefined,
+	allowClear: true,
+	sectionMaxHeight: 150,
+};
+
+export default MultiSelect;

frontend/src/components/MultiSelect/index.ts

@@ -0,0 +1,8 @@
+import MultiSelect from './MultiSelect';
+
+export type {
+	MultiSelectOption,
+	MultiSelectProps,
+	MultiSelectSection,
+} from './MultiSelect';
+export default MultiSelect;

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -63,30 +63,31 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	return (
 		<div className="quick-filters">
-			{source !== QuickFiltersSource.INFRA_MONITORING && (
-				<section className="header">
-					<section className="left-actions">
-						<FilterOutlined />
-						<Typography.Text className="text">Filters for</Typography.Text>
-						<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
-							<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
-						</Tooltip>
-					</section>
+			{source !== QuickFiltersSource.INFRA_MONITORING &&
+				source !== QuickFiltersSource.API_MONITORING && (
+					<section className="header">
+						<section className="left-actions">
+							<FilterOutlined />
+							<Typography.Text className="text">Filters for</Typography.Text>
+							<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">
-							<SyncOutlined className="sync-icon" onClick={handleReset} />
-						</Tooltip>
-						<div className="divider-filter" />
-						<Tooltip title="Collapse Filters">
-							<VerticalAlignTopOutlined
-								rotate={270}
-								onClick={handleFilterVisibilityChange}
-							/>
-						</Tooltip>
+						<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>
+						</section>
 					</section>
-				</section>
-			)}
+				)}
 
 			<section className="filters">
 				{config.map((filter) => {

frontend/src/components/QuickFilters/types.ts

@@ -39,4 +39,5 @@ export enum QuickFiltersSource {
 	LOGS_EXPLORER = 'logs-explorer',
 	INFRA_MONITORING = 'infra-monitoring',
 	TRACES_EXPLORER = 'traces-explorer',
+	API_MONITORING = 'api-monitoring',
 }

frontend/src/components/SignozModal/SignozModal.style.scss

@@ -67,6 +67,17 @@
 			background: var(--bg-ink-300);
 		}
 	}
+
+	.ant-modal-footer {
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			&-icon {
+				margin: 0 !important;
+			}
+		}
+	}
 }
 
 .lightMode {

frontend/src/components/SignozModal/SignozModal.tsx

@@ -4,14 +4,14 @@ import { Modal, ModalProps } from 'antd';
 
 function SignozModal({
 	children,
-
+	width = 672,
 	rootClassName = '',
 	...rest
 }: ModalProps): JSX.Element {
 	return (
 		<Modal
 			centered
-			width={672}
+			width={width}
 			cancelText="Close"
 			rootClassName={`signoz-modal ${rootClassName}`}
 			// eslint-disable-next-line react/jsx-props-no-spreading

frontend/src/constants/dateTimeFormats.ts

@@ -56,6 +56,7 @@ export const DATE_TIME_FORMATS = {
 
 	// Formats with dash separator
 	DASH_DATETIME: 'MMM D, YYYY ⎯ HH:mm:ss',
+	FUNNELS_LIST_DATE: 'MMM D ⎯ HH:mm:ss',
 	DASH_DATETIME_UTC: 'MMM D, YYYY ⎯ HH:mm:ss (UTC Z)',
 	DASH_TIME_DATE: 'HH:mm:ss ⎯ MMM D, YYYY (UTC Z)',
 } as const;

frontend/src/constants/reactQueryKeys.ts

@@ -51,4 +51,21 @@ export const REACT_QUERY_KEY = {
 	GET_METRICS_LIST_FILTER_VALUES: 'GET_METRICS_LIST_FILTER_VALUES',
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
-};
+
+	// API Monitoring Query Keys
+	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',
+	GET_ENDPOINTS_LIST_BY_DOMAIN: 'GET_ENDPOINTS_LIST_BY_DOMAIN',
+	GET_NESTED_ENDPOINTS_LIST: 'GET_NESTED_ENDPOINTS_LIST',
+	GET_ENDPOINT_METRICS_DATA: 'GET_ENDPOINT_METRICS_DATA',
+	GET_ENDPOINT_STATUS_CODE_DATA: 'GET_ENDPOINT_STATUS_CODE_DATA',
+	GET_ENDPOINT_RATE_OVER_TIME_DATA: 'GET_ENDPOINT_RATE_OVER_TIME_DATA',
+	GET_ENDPOINT_LATENCY_OVER_TIME_DATA: 'GET_ENDPOINT_LATENCY_OVER_TIME_DATA',
+	GET_ENDPOINT_DROPDOWN_DATA: 'GET_ENDPOINT_DROPDOWN_DATA',
+	GET_ENDPOINT_DEPENDENT_SERVICES_DATA: 'GET_ENDPOINT_DEPENDENT_SERVICES_DATA',
+	GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA:
+		'GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA',
+	GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA:
+		'GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA',
+	GET_FUNNELS_LIST: 'GET_FUNNELS_LIST',
+	GET_FUNNEL_DETAILS: 'GET_FUNNEL_DETAILS',
+} as const;

frontend/src/constants/routes.ts

@@ -56,6 +56,8 @@ const ROUTES = {
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',
+	TRACES_FUNNELS: '/traces/funnels',
+	TRACES_FUNNELS_DETAIL: '/traces/funnels/:funnelId',
 	WORKSPACE_LOCKED: '/workspace-locked',
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/shortcuts',
@@ -69,9 +71,11 @@ const ROUTES = {
 	METRICS_EXPLORER: '/metrics-explorer/summary',
 	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
 	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
+	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
 	HOME_PAGE: '/',
+	DYNAMIC_VARIABLE_TEST: '/dynamic-variable-test',
 } as const;
 
 export default ROUTES;

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

@@ -0,0 +1,239 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Select, Spin, Table, Typography } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	EndPointsTableRowData,
+	formatEndPointsDataForTable,
+	getEndPointsColumnsConfig,
+	getEndPointsQueryPayload,
+} from 'container/ApiMonitoring/utils';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import ErrorState from './components/ErrorState';
+import ExpandedRow from './components/ExpandedRow';
+import { VIEW_TYPES, VIEWS } from './constants';
+
+function AllEndPoints({
+	domainName,
+	setSelectedEndPointName,
+	setSelectedView,
+	groupBy,
+	setGroupBy,
+}: {
+	domainName: string;
+	setSelectedEndPointName: (name: string) => void;
+	setSelectedView: (tab: VIEWS) => void;
+	groupBy: IBuilderQuery['groupBy'];
+	setGroupBy: (groupBy: IBuilderQuery['groupBy']) => void;
+}): JSX.Element {
+	const {
+		data: groupByFiltersData,
+		isLoading: isLoadingGroupByFilters,
+	} = useGetAggregateKeys({
+		dataSource: DataSource.TRACES,
+		aggregateAttribute: '',
+		aggregateOperator: 'noop',
+		searchText: '',
+		tagType: '',
+	});
+
+	const [groupByOptions, setGroupByOptions] = useState<
+		{ value: string; label: string }[]
+	>([]);
+
+	const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
+
+	const handleGroupByChange = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			const groupBy = [];
+
+			for (let index = 0; index < value.length; index++) {
+				const element = (value[index] as unknown) as string;
+
+				const key = groupByFiltersData?.payload?.attributeKeys?.find(
+					(key) => key.key === element,
+				);
+
+				if (key) {
+					groupBy.push(key);
+				}
+			}
+			setGroupBy(groupBy);
+		},
+		[groupByFiltersData, setGroupBy],
+	);
+
+	useEffect(() => {
+		if (groupByFiltersData?.payload) {
+			setGroupByOptions(
+				groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
+					value: filter.key,
+					label: filter.key,
+				})) || [],
+			);
+		}
+	}, [groupByFiltersData]);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const queryPayloads = useMemo(
+		() =>
+			getEndPointsQueryPayload(
+				groupBy,
+				domainName,
+				Math.floor(minTime / 1e9),
+				Math.floor(maxTime / 1e9),
+			),
+		[groupBy, domainName, minTime, maxTime],
+	);
+
+	// Since only one query here
+	const endPointsDataQueries = useQueries(
+		queryPayloads.map((payload) => ({
+			queryKey: [
+				REACT_QUERY_KEY.GET_ENDPOINTS_LIST_BY_DOMAIN,
+				payload,
+				ENTITY_VERSION_V4,
+				groupBy,
+			],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
+			staleTime: 60 * 1000, // 1 minute stale time : optimize this part
+		})),
+	);
+
+	const endPointsDataQuery = endPointsDataQueries[0];
+	const {
+		data: allEndPointsData,
+		isLoading,
+		isRefetching,
+		isError,
+		refetch,
+	} = endPointsDataQuery;
+
+	const endPointsColumnsConfig = useMemo(
+		() => getEndPointsColumnsConfig(groupBy.length > 0, expandedRowKeys),
+		[groupBy.length, expandedRowKeys],
+	);
+
+	const expandedRowRender = (record: EndPointsTableRowData): JSX.Element => (
+		<ExpandedRow
+			domainName={domainName}
+			selectedRowData={record}
+			setSelectedEndPointName={setSelectedEndPointName}
+			setSelectedView={setSelectedView}
+		/>
+	);
+
+	const handleGroupByRowClick = (record: EndPointsTableRowData): void => {
+		if (expandedRowKeys.includes(record.key)) {
+			setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key));
+		} else {
+			setExpandedRowKeys((expandedRowKeys) => [...expandedRowKeys, record.key]);
+		}
+	};
+
+	const handleRowClick = (record: EndPointsTableRowData): void => {
+		if (groupBy.length === 0) {
+			setSelectedEndPointName(record.endpointName); // this will open up the endpoint details tab
+			setSelectedView(VIEW_TYPES.ENDPOINT_DETAILS);
+		} else {
+			handleGroupByRowClick(record); // this will prepare the nested query payload
+		}
+	};
+
+	const formattedEndPointsData = useMemo(
+		() =>
+			formatEndPointsDataForTable(
+				allEndPointsData?.payload?.data?.result[0]?.table?.rows,
+				groupBy,
+			),
+		[groupBy, allEndPointsData],
+	);
+
+	if (isError) {
+		return (
+			<div className="all-endpoints-error-state-wrapper">
+				<ErrorState refetch={refetch} />
+			</div>
+		);
+	}
+
+	return (
+		<div className="all-endpoints-container">
+			<div className="group-by-container">
+				<div className="group-by-label"> Group by </div>
+				<Select
+					className="group-by-select"
+					loading={isLoadingGroupByFilters}
+					mode="multiple"
+					value={groupBy}
+					allowClear
+					maxTagCount="responsive"
+					placeholder="Search for attribute"
+					options={groupByOptions}
+					onChange={handleGroupByChange}
+				/>{' '}
+			</div>
+			<div className="endpoints-table-container">
+				<div className="endpoints-table-header">Endpoint overview</div>
+				<Table
+					columns={endPointsColumnsConfig}
+					loading={{
+						spinning: isLoading || isRefetching,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					dataSource={isLoading || isRefetching ? [] : formattedEndPointsData}
+					locale={{
+						emptyText:
+							isLoading || isRefetching ? null : (
+								<div className="no-filtered-endpoints-message-container">
+									<div className="no-filtered-endpoints-message-content">
+										<img
+											src="/Icons/emptyState.svg"
+											alt="thinking-emoji"
+											className="empty-state-svg"
+										/>
+
+										<Typography.Text className="no-filtered-endpoints-message">
+											This query had no results. Edit your query and try again!
+										</Typography.Text>
+									</div>
+								</div>
+							),
+					}}
+					scroll={{ x: true }}
+					tableLayout="fixed"
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: groupBy.length > 0 ? expandedRowRender : undefined,
+						expandedRowKeys,
+						expandIconColumnIndex: -1,
+					}}
+					rowClassName={(_, index): string =>
+						index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+					}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default AllEndPoints;

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

@@ -0,0 +1,143 @@
+import './DomainDetails.styles.scss';
+
+import { Color, Spacing } from '@signozhq/design-tokens';
+import { Button, Divider, Drawer, Radio, Typography } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ArrowDown, ArrowUp, X } from 'lucide-react';
+import { useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import AllEndPoints from './AllEndPoints';
+import DomainMetrics from './components/DomainMetrics';
+import { VIEW_TYPES, VIEWS } from './constants';
+import EndPointDetailsWrapper from './EndPointDetailsWrapper';
+
+function DomainDetails({
+	domainData,
+	handleClose,
+	selectedDomainIndex,
+	setSelectedDomainIndex,
+	domainListLength,
+}: {
+	domainData: any;
+	handleClose: () => void;
+	selectedDomainIndex: number;
+	setSelectedDomainIndex: (index: number) => void;
+	domainListLength: number;
+}): JSX.Element {
+	const [selectedView, setSelectedView] = useState<VIEWS>(VIEWS.ALL_ENDPOINTS);
+	const [selectedEndPointName, setSelectedEndPointName] = useState<string>('');
+	const [endPointsGroupBy, setEndPointsGroupBy] = useState<
+		IBuilderQuery['groupBy']
+	>([]);
+	const isDarkMode = useIsDarkMode();
+
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+	};
+
+	return (
+		<Drawer
+			width="60%"
+			title={
+				<div className="domain-details-drawer-header">
+					<div className="domain-details-drawer-header-title">
+						<Divider type="vertical" />
+						<Typography.Text className="title">
+							{domainData.domainName}
+						</Typography.Text>
+					</div>
+					<Button.Group className="domain-details-drawer-header-ctas">
+						<Button
+							className="domain-navigate-cta"
+							onClick={(): void => {
+								setSelectedDomainIndex(selectedDomainIndex - 1);
+								setSelectedEndPointName('');
+								setEndPointsGroupBy([]);
+								setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
+							}}
+							icon={<ArrowUp size={16} />}
+							disabled={selectedDomainIndex === 0}
+							title="Previous domain"
+						/>
+						<Button
+							className="domain-navigate-cta"
+							onClick={(): void => {
+								setSelectedDomainIndex(selectedDomainIndex + 1);
+								setSelectedEndPointName('');
+								setEndPointsGroupBy([]);
+								setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
+							}}
+							icon={<ArrowDown size={16} />}
+							disabled={selectedDomainIndex === domainListLength - 1}
+							title="Next domain"
+						/>
+					</Button.Group>
+				</div>
+			}
+			placement="right"
+			onClose={handleClose}
+			open={!!domainData}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="domain-detail-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+		>
+			{domainData && (
+				<>
+					<DomainMetrics domainData={domainData} />
+					<div className="views-tabs-container">
+						<Radio.Group
+							className="views-tabs"
+							onChange={handleTabChange}
+							value={selectedView}
+						>
+							<Radio.Button
+								className={
+									// eslint-disable-next-line sonarjs/no-duplicate-string
+									selectedView === VIEW_TYPES.ALL_ENDPOINTS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.ALL_ENDPOINTS}
+							>
+								<div className="view-title">All Endpoints</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.ENDPOINT_DETAILS
+										? 'tab selected_view'
+										: 'tab'
+								}
+								value={VIEW_TYPES.ENDPOINT_DETAILS}
+							>
+								<div className="view-title">Endpoint Details</div>
+							</Radio.Button>
+						</Radio.Group>
+					</div>
+					{selectedView === VIEW_TYPES.ALL_ENDPOINTS && (
+						<AllEndPoints
+							domainName={domainData.domainName}
+							setSelectedEndPointName={setSelectedEndPointName}
+							setSelectedView={setSelectedView}
+							groupBy={endPointsGroupBy}
+							setGroupBy={setEndPointsGroupBy}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.ENDPOINT_DETAILS && (
+						<EndPointDetailsWrapper
+							domainName={domainData.domainName}
+							endPointName={selectedEndPointName}
+							setSelectedEndPointName={setSelectedEndPointName}
+						/>
+					)}
+				</>
+			)}
+		</Drawer>
+	);
+}
+
+export default DomainDetails;

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

@@ -0,0 +1,171 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import {
+	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
+	getEndPointDetailsQueryPayload,
+} from 'container/ApiMonitoring/utils';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useMemo, useState } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import DependentServices from './components/DependentServices';
+import EndPointMetrics from './components/EndPointMetrics';
+import EndPointsDropDown from './components/EndPointsDropDown';
+import MetricOverTimeGraph from './components/MetricOverTimeGraph';
+import StatusCodeBarCharts from './components/StatusCodeBarCharts';
+import StatusCodeTable from './components/StatusCodeTable';
+
+function EndPointDetails({
+	domainName,
+	endPointName,
+	setSelectedEndPointName,
+}: {
+	domainName: string;
+	endPointName: string;
+	setSelectedEndPointName: (value: string) => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const currentQuery = initialQueriesMap[DataSource.TRACES];
+
+	const [filters, setFilters] = useState<IBuilderQuery['filters']>({
+		op: 'AND',
+		items: [],
+	});
+
+	// Manually update the query to include the filters
+	// Because using the hook is causing the global domain
+	// query to be updated and causing main domain list to
+	// refetch with the filters of endpoints
+
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						filters,
+					},
+				],
+			},
+		}),
+		[filters, currentQuery],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	const isServicesFilterApplied = useMemo(
+		() => filters.items.some((item) => item.key?.key === 'service.name'),
+		[filters],
+	);
+
+	const endPointDetailsQueryPayload = useMemo(
+		() =>
+			getEndPointDetailsQueryPayload(
+				domainName,
+				endPointName,
+				Math.floor(minTime / 1e9),
+				Math.floor(maxTime / 1e9),
+				filters,
+			),
+		[domainName, endPointName, filters, minTime, maxTime],
+	);
+
+	const endPointDetailsDataQueries = useQueries(
+		endPointDetailsQueryPayload.map((payload, index) => ({
+			queryKey: [
+				END_POINT_DETAILS_QUERY_KEYS_ARRAY[index],
+				payload,
+				filters.items,
+				ENTITY_VERSION_V4,
+			],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
+		})),
+	);
+
+	const [
+		endPointMetricsDataQuery,
+		endPointStatusCodeDataQuery,
+		endPointRateOverTimeDataQuery,
+		endPointLatencyOverTimeDataQuery,
+		endPointDropDownDataQuery,
+		endPointDependentServicesDataQuery,
+		endPointStatusCodeBarChartsDataQuery,
+		endPointStatusCodeLatencyBarChartsDataQuery,
+	] = useMemo(
+		() => [
+			endPointDetailsDataQueries[0],
+			endPointDetailsDataQueries[1],
+			endPointDetailsDataQueries[2],
+			endPointDetailsDataQueries[3],
+			endPointDetailsDataQueries[4],
+			endPointDetailsDataQueries[5],
+			endPointDetailsDataQueries[6],
+			endPointDetailsDataQueries[7],
+		],
+		[endPointDetailsDataQueries],
+	);
+
+	return (
+		<div className="endpoint-details-container">
+			<div className="endpoint-details-filters-container">
+				<div className="endpoint-details-filters-container-dropdown">
+					<EndPointsDropDown
+						selectedEndPointName={endPointName}
+						setSelectedEndPointName={setSelectedEndPointName}
+						endPointDropDownDataQuery={endPointDropDownDataQuery}
+					/>
+				</div>
+				<div className="endpoint-details-filters-container-search">
+					<QueryBuilderSearchV2
+						query={query}
+						onChange={(searchFilters): void => {
+							setFilters(searchFilters);
+						}}
+						placeholder="Search for filters..."
+					/>
+				</div>
+			</div>
+			<EndPointMetrics endPointMetricsDataQuery={endPointMetricsDataQuery} />
+			{!isServicesFilterApplied && (
+				<DependentServices
+					dependentServicesQuery={endPointDependentServicesDataQuery}
+				/>
+			)}
+			<StatusCodeBarCharts
+				endPointStatusCodeBarChartsDataQuery={endPointStatusCodeBarChartsDataQuery}
+				endPointStatusCodeLatencyBarChartsDataQuery={
+					endPointStatusCodeLatencyBarChartsDataQuery
+				}
+			/>
+			<StatusCodeTable endPointStatusCodeDataQuery={endPointStatusCodeDataQuery} />
+			<MetricOverTimeGraph
+				metricOverTimeDataQuery={endPointRateOverTimeDataQuery}
+				widgetInfoIndex={0}
+				endPointName={endPointName}
+			/>
+			<MetricOverTimeGraph
+				metricOverTimeDataQuery={endPointLatencyOverTimeDataQuery}
+				widgetInfoIndex={1}
+				endPointName={endPointName}
+			/>
+		</div>
+	);
+}
+
+export default EndPointDetails;

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

@@ -0,0 +1,76 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { getEndPointZeroStateQueryPayload } from 'container/ApiMonitoring/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import EndPointDetailsZeroState from './components/EndPointDetailsZeroState';
+import EndPointDetails from './EndPointDetails';
+
+function EndPointDetailsWrapper({
+	domainName,
+	endPointName,
+	setSelectedEndPointName,
+}: {
+	domainName: string;
+	endPointName: string;
+	setSelectedEndPointName: (value: string) => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const endPointZeroStateQueryPayload = useMemo(
+		() =>
+			getEndPointZeroStateQueryPayload(
+				domainName,
+				Math.floor(minTime / 1e9),
+				Math.floor(maxTime / 1e9),
+			),
+		[domainName, minTime, maxTime],
+	);
+
+	const endPointZeroStateDataQueries = useQueries(
+		endPointZeroStateQueryPayload.map((payload) => ({
+			queryKey: [
+				// Since only one query here
+				REACT_QUERY_KEY.GET_ENDPOINT_DROPDOWN_DATA,
+				payload,
+				ENTITY_VERSION_V4,
+			],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
+		})),
+	);
+
+	const [endPointZeroStateDataQuery] = useMemo(
+		() => [endPointZeroStateDataQueries[0]],
+		[endPointZeroStateDataQueries],
+	);
+
+	if (endPointName === '') {
+		return (
+			<EndPointDetailsZeroState
+				setSelectedEndPointName={setSelectedEndPointName}
+				endPointDropDownDataQuery={endPointZeroStateDataQuery}
+			/>
+		);
+	}
+
+	return (
+		<EndPointDetails
+			domainName={domainName}
+			endPointName={endPointName}
+			setSelectedEndPointName={setSelectedEndPointName}
+		/>
+	);
+}
+
+export default EndPointDetailsWrapper;

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

@@ -0,0 +1,108 @@
+import { Typography } from 'antd';
+import Skeleton from 'antd/lib/skeleton';
+import { getFormattedDependentServicesData } from 'container/ApiMonitoring/utils';
+import { UnfoldVertical } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import ErrorState from './ErrorState';
+
+interface DependentServicesProps {
+	dependentServicesQuery: UseQueryResult<SuccessResponse<any>, unknown>;
+}
+
+function DependentServices({
+	dependentServicesQuery,
+}: DependentServicesProps): JSX.Element {
+	const {
+		data,
+		refetch,
+		isError,
+		isLoading,
+		isRefetching,
+	} = dependentServicesQuery;
+
+	const [currentRenderCount, setCurrentRenderCount] = useState(0);
+
+	const dependentServicesData = useMemo(() => {
+		const formattedDependentServicesData = getFormattedDependentServicesData(
+			data?.payload?.data?.result[0].table.rows,
+		);
+		setCurrentRenderCount(Math.min(formattedDependentServicesData.length, 5));
+		return formattedDependentServicesData;
+	}, [data]);
+
+	const renderItems = useMemo(
+		() => dependentServicesData.slice(0, currentRenderCount),
+		[currentRenderCount, dependentServicesData],
+	);
+
+	if (isLoading || isRefetching) {
+		return <Skeleton />;
+	}
+
+	if (isError) {
+		return <ErrorState refetch={refetch} />;
+	}
+
+	return (
+		<div className="top-services-content">
+			<div className="top-services-title">
+				<span className="title-wrapper">Dependent Services</span>
+			</div>
+			<div className="dependent-services-container">
+				{renderItems.length === 0 ? (
+					<div className="no-dependent-services-message-container">
+						<div className="no-dependent-services-message-content">
+							<img
+								src="/Icons/emptyState.svg"
+								alt="thinking-emoji"
+								className="empty-state-svg"
+							/>
+
+							<Typography.Text className="no-dependent-services-message">
+								This query had no results. Edit your query and try again!
+							</Typography.Text>
+						</div>
+					</div>
+				) : (
+					renderItems.map((item) => (
+						<div className="top-services-item" key={item.key}>
+							<div className="top-services-item-progress">
+								<div className="top-services-item-key">{item.serviceName}</div>
+								<div className="top-services-item-count">{item.count}</div>
+								<div
+									className="top-services-item-progress-bar"
+									style={{ width: `${item.percentage}%` }}
+								/>
+							</div>
+							<div className="top-services-item-percentage">
+								{item.percentage.toFixed(2)}%
+							</div>
+						</div>
+					))
+				)}
+
+				{currentRenderCount < dependentServicesData.length && (
+					<div
+						className="top-services-load-more"
+						onClick={(): void => setCurrentRenderCount(dependentServicesData.length)}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								setCurrentRenderCount(dependentServicesData.length);
+							}
+						}}
+						role="button"
+						tabIndex={0}
+					>
+						<UnfoldVertical size={14} />
+						Show more...
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DependentServices;

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

@@ -0,0 +1,82 @@
+import { Color } from '@signozhq/design-tokens';
+import { Progress, Tooltip, Typography } from 'antd';
+import { getLastUsedRelativeTime } from 'container/ApiMonitoring/utils';
+
+function DomainMetrics({ domainData }: { domainData: any }): JSX.Element {
+	return (
+		<div className="domain-detail-drawer__endpoint">
+			<div className="domain-details-grid">
+				<div className="labels-row">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						EXTERNAL API
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						AVERAGE LATENCY
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						ERROR RATE
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						LAST USED
+					</Typography.Text>
+				</div>
+
+				<div className="values-row">
+					<Typography.Text className="domain-details-metadata-value">
+						<Tooltip title={domainData.endpointCount}>
+							<span className="round-metric-tag">{domainData.endpointCount}</span>
+						</Tooltip>
+					</Typography.Text>
+					{/* // update the tooltip as well */}
+					<Typography.Text className="domain-details-metadata-value">
+						<Tooltip title={domainData.latency}>
+							<span className="round-metric-tag">
+								{(domainData.latency / 1000).toFixed(3)}s
+							</span>
+						</Tooltip>
+					</Typography.Text>
+					{/* // update the tooltip as well */}
+					<Typography.Text className="domain-details-metadata-value error-rate">
+						<Tooltip title={domainData.errorRate}>
+							<Progress
+								status="active"
+								percent={Number((domainData.errorRate * 100).toFixed(1))}
+								strokeLinecap="butt"
+								size="small"
+								strokeColor={((): string => {
+									const errorRatePercent = Number(
+										(domainData.errorRate * 100).toFixed(1),
+									);
+									if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
+									if (errorRatePercent >= 60) return Color.BG_AMBER_500;
+									return Color.BG_FOREST_500;
+								})()}
+								className="progress-bar"
+							/>
+						</Tooltip>
+					</Typography.Text>
+					{/* // update the tooltip as well */}
+					<Typography.Text className="domain-details-metadata-value">
+						<Tooltip title={domainData.lastUsed}>
+							{getLastUsedRelativeTime(domainData.lastUsed)}
+						</Tooltip>
+					</Typography.Text>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DomainMetrics;

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

@@ -0,0 +1,38 @@
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import EndPointsDropDown from './EndPointsDropDown';
+
+function EndPointDetailsZeroState({
+	setSelectedEndPointName,
+	endPointDropDownDataQuery,
+}: {
+	setSelectedEndPointName: (endPointName: string) => void;
+	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>>;
+}): JSX.Element {
+	return (
+		<div className="end-point-details-zero-state-wrapper">
+			<div className="end-point-details-zero-state-content">
+				<img
+					src="/Icons/no-data.svg"
+					alt="no-data"
+					width={32}
+					height={32}
+					className="end-point-details-zero-state-icon"
+				/>
+				<div className="end-point-details-zero-state-content-wrapper">
+					<div className="end-point-details-zero-state-text-content">
+						<div className="title">No endpoint selected yet</div>
+						<div className="description">Select an endpoint to see the details</div>
+					</div>
+					<EndPointsDropDown
+						setSelectedEndPointName={setSelectedEndPointName}
+						endPointDropDownDataQuery={endPointDropDownDataQuery}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default EndPointDetailsZeroState;

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

@@ -0,0 +1,121 @@
+import { Color } from '@signozhq/design-tokens';
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { getFormattedEndPointMetricsData } from 'container/ApiMonitoring/utils';
+import { useMemo } from 'react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import ErrorState from './ErrorState';
+
+function EndPointMetrics({
+	endPointMetricsDataQuery,
+}: {
+	endPointMetricsDataQuery: UseQueryResult<SuccessResponse<any>, unknown>;
+}): JSX.Element {
+	const {
+		isLoading,
+		isRefetching,
+		isError,
+		data,
+		refetch,
+	} = endPointMetricsDataQuery;
+
+	const metricsData = useMemo(() => {
+		if (isLoading || isRefetching || isError) {
+			return null;
+		}
+
+		return getFormattedEndPointMetricsData(
+			data?.payload?.data?.result[0].table.rows,
+		);
+	}, [data?.payload?.data?.result, isLoading, isRefetching, isError]);
+
+	if (isError) {
+		return <ErrorState refetch={refetch} />;
+	}
+
+	return (
+		<div className="domain-detail-drawer__endpoint">
+			<div className="domain-details-grid">
+				<div className="labels-row">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						Rate
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						AVERAGE LATENCY
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						ERROR RATE
+					</Typography.Text>
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
+						LAST USED
+					</Typography.Text>
+				</div>
+
+				<div className="values-row">
+					<Typography.Text className="domain-details-metadata-value">
+						{isLoading || isRefetching ? (
+							<Skeleton.Button active size="small" />
+						) : (
+							<Tooltip title={metricsData?.rate}>
+								<span className="round-metric-tag">{metricsData?.rate}/sec</span>
+							</Tooltip>
+						)}
+					</Typography.Text>
+					<Typography.Text className="domain-details-metadata-value">
+						{isLoading || isRefetching ? (
+							<Skeleton.Button active size="small" />
+						) : (
+							<Tooltip title={metricsData?.latency}>
+								<span className="round-metric-tag">{metricsData?.latency}ms</span>
+							</Tooltip>
+						)}
+					</Typography.Text>
+					<Typography.Text className="domain-details-metadata-value error-rate">
+						{isLoading || isRefetching ? (
+							<Skeleton.Button active size="small" />
+						) : (
+							<Tooltip title={metricsData?.errorRate}>
+								<Progress
+									percent={Number((metricsData?.errorRate ?? 0 * 100).toFixed(1))}
+									strokeLinecap="butt"
+									size="small"
+									strokeColor={((): string => {
+										const errorRatePercent = Number(
+											(metricsData?.errorRate ?? 0 * 100).toFixed(1),
+										);
+										if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
+										if (errorRatePercent >= 60) return Color.BG_AMBER_500;
+										return Color.BG_FOREST_500;
+									})()}
+									className="progress-bar"
+								/>
+							</Tooltip>
+						)}
+					</Typography.Text>
+					<Typography.Text className="domain-details-metadata-value">
+						{isLoading || isRefetching ? (
+							<Skeleton.Button active size="small" />
+						) : (
+							<Tooltip title={metricsData?.lastUsed}>{metricsData?.lastUsed}</Tooltip>
+						)}
+					</Typography.Text>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default EndPointMetrics;

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

@@ -0,0 +1,48 @@
+import { Select } from 'antd';
+import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
+import { useMemo } from 'react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+interface EndPointsDropDownProps {
+	selectedEndPointName?: string;
+	setSelectedEndPointName: (value: string) => void;
+	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>, unknown>;
+}
+
+const defaultProps = {
+	selectedEndPointName: '',
+};
+
+function EndPointsDropDown({
+	selectedEndPointName,
+	setSelectedEndPointName,
+	endPointDropDownDataQuery,
+}: EndPointsDropDownProps): JSX.Element {
+	const { data, isLoading, isFetching } = endPointDropDownDataQuery;
+
+	const handleChange = (value: string): void => {
+		setSelectedEndPointName(value);
+	};
+
+	const formattedData = useMemo(
+		() =>
+			getFormattedEndPointDropDownData(data?.payload.data.result[0].table.rows),
+		[data?.payload.data.result],
+	);
+
+	return (
+		<Select
+			value={selectedEndPointName || undefined}
+			placeholder="Select endpoint"
+			loading={isLoading || isFetching}
+			style={{ width: '100%' }}
+			onChange={handleChange}
+			options={formattedData}
+		/>
+	);
+}
+
+EndPointsDropDown.defaultProps = defaultProps;
+
+export default EndPointsDropDown;

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

@@ -0,0 +1,31 @@
+import { Button, Typography } from 'antd';
+import { RotateCw } from 'lucide-react';
+
+function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
+	return (
+		<div className="error-state-container">
+			<div className="error-state-content-wrapper">
+				<div className="error-state-content">
+					<div className="icon">
+						<img src="/Icons/awwSnap.svg" alt="awwSnap" width={32} height={32} />
+					</div>
+					<div className="error-state-text">
+						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>
+						<Typography.Text type="secondary">
+							Please refresh this panel.
+						</Typography.Text>
+					</div>
+				</div>
+				<Button
+					className="refresh-cta"
+					onClick={(): void => refetch()}
+					icon={<RotateCw size={16} />}
+				>
+					Refresh this panel
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default ErrorState;

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

@@ -0,0 +1,127 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin, Table } from 'antd';
+import { ColumnType } from 'antd/lib/table';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	createFiltersForSelectedRowData,
+	EndPointsTableRowData,
+	formatEndPointsDataForTable,
+	getEndPointsColumnsConfig,
+	getEndPointsQueryPayload,
+} from 'container/ApiMonitoring/utils';
+import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { VIEW_TYPES, VIEWS } from '../constants';
+
+function ExpandedRow({
+	domainName,
+	selectedRowData,
+	setSelectedEndPointName,
+	setSelectedView,
+}: {
+	domainName: string;
+	selectedRowData: EndPointsTableRowData;
+	setSelectedEndPointName: (name: string) => void;
+	setSelectedView: (view: VIEWS) => void;
+}): JSX.Element {
+	const nestedColumns = useMemo(() => getEndPointsColumnsConfig(false, []), []);
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const groupedByRowDataQueryPayload = useMemo(() => {
+		if (!selectedRowData) return null;
+
+		const filters = createFiltersForSelectedRowData(selectedRowData);
+
+		const baseQueryPayload = getEndPointsQueryPayload(
+			[],
+			domainName,
+			Math.floor(minTime / 1e9),
+			Math.floor(maxTime / 1e9),
+		);
+
+		return baseQueryPayload.map((currentQueryPayload) => ({
+			...currentQueryPayload,
+			query: {
+				...currentQueryPayload.query,
+				builder: {
+					...currentQueryPayload.query.builder,
+					queryData: currentQueryPayload.query.builder.queryData.map(
+						(queryData) => ({
+							...queryData,
+							filters: {
+								items: [...(queryData.filters?.items || []), ...filters.items],
+								op: 'AND',
+							},
+						}),
+					),
+				},
+			},
+		}));
+	}, [domainName, minTime, maxTime, selectedRowData]);
+
+	const groupedByRowQueries = useQueries(
+		groupedByRowDataQueryPayload
+			? groupedByRowDataQueryPayload.map((payload) => ({
+					queryKey: [
+						`${REACT_QUERY_KEY.GET_NESTED_ENDPOINTS_LIST}-${domainName}-${selectedRowData?.key}`,
+						payload,
+						ENTITY_VERSION_V4,
+						selectedRowData?.key,
+					],
+					queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+						GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+					enabled: !!payload && !!selectedRowData,
+			  }))
+			: [],
+	);
+
+	const groupedByRowQuery = groupedByRowQueries[0];
+	return (
+		<div className="expanded-table-container">
+			{groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading ? (
+				<LoadingContainer />
+			) : (
+				<div className="expanded-table">
+					<Table
+						columns={nestedColumns as ColumnType<EndPointsTableRowData>[]}
+						dataSource={
+							groupedByRowQuery?.data
+								? formatEndPointsDataForTable(
+										groupedByRowQuery.data?.payload.data.result[0].table?.rows,
+										[],
+								  )
+								: []
+						}
+						pagination={false}
+						scroll={{ x: true }}
+						tableLayout="fixed"
+						showHeader={false}
+						loading={{
+							spinning: groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading,
+							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+						}}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
+								setSelectedEndPointName(record.endpointName);
+								setSelectedView(VIEW_TYPES.ENDPOINT_DETAILS);
+							},
+							className: 'expanded-clickable-row',
+						})}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExpandedRow;

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

@@ -0,0 +1,114 @@
+import { Card, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	apiWidgetInfo,
+	extractPortAndEndpoint,
+	getFormattedChartData,
+} from 'container/ApiMonitoring/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { useCallback, useMemo, useRef } from 'react';
+import { UseQueryResult } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { Options } from 'uplot';
+
+import ErrorState from './ErrorState';
+
+function MetricOverTimeGraph({
+	metricOverTimeDataQuery,
+	widgetInfoIndex,
+	endPointName,
+}: {
+	metricOverTimeDataQuery: UseQueryResult<SuccessResponse<any>, unknown>;
+	widgetInfoIndex: number;
+	endPointName: string;
+}): JSX.Element {
+	const { data } = metricOverTimeDataQuery;
+
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+
+	const { endpoint } = extractPortAndEndpoint(endPointName);
+
+	const formattedChartData = useMemo(
+		() => getFormattedChartData(data?.payload, [endpoint]),
+		[data?.payload, endpoint],
+	);
+
+	const chartData = useMemo(() => getUPlotChartData(formattedChartData), [
+		formattedChartData,
+	]);
+
+	const isDarkMode = useIsDarkMode();
+
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				apiResponse: formattedChartData,
+				isDarkMode,
+				dimensions,
+				yAxisUnit: apiWidgetInfo[widgetInfoIndex].yAxisUnit,
+				softMax: null,
+				softMin: null,
+				minTimeScale: Math.floor(minTime / 1e9),
+				maxTimeScale: Math.floor(maxTime / 1e9),
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		[
+			formattedChartData,
+			minTime,
+			maxTime,
+			widgetInfoIndex,
+			dimensions,
+			isDarkMode,
+		],
+	);
+
+	const renderCardContent = useCallback(
+		(query: UseQueryResult<SuccessResponse<any>, unknown>): JSX.Element => {
+			if (query.isLoading) {
+				return <Skeleton />;
+			}
+
+			if (query.error) {
+				return <ErrorState refetch={query.refetch} />;
+			}
+
+			return (
+				<div
+					className={cx('chart-container', {
+						'no-data-container':
+							!query.isLoading && !query?.data?.payload?.data?.result?.length,
+					})}
+				>
+					<Uplot options={options as Options} data={chartData} />
+				</div>
+			);
+		},
+		[options, chartData],
+	);
+
+	return (
+		<div>
+			<Card bordered className="endpoint-details-card">
+				<Typography.Text>{apiWidgetInfo[widgetInfoIndex].title}</Typography.Text>
+				<div className="graph-container" ref={graphRef}>
+					{renderCardContent(metricOverTimeDataQuery)}
+				</div>
+			</Card>
+		</div>
+	);
+}
+
+export default MetricOverTimeGraph;

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

@@ -0,0 +1,168 @@
+import { Button, Card, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	getFormattedEndPointStatusCodeChartData,
+	statusCodeWidgetInfo,
+} from 'container/ApiMonitoring/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { UseQueryResult } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { Options } from 'uplot';
+
+import ErrorState from './ErrorState';
+
+function StatusCodeBarCharts({
+	endPointStatusCodeBarChartsDataQuery,
+	endPointStatusCodeLatencyBarChartsDataQuery,
+}: {
+	endPointStatusCodeBarChartsDataQuery: UseQueryResult<
+		SuccessResponse<any>,
+		unknown
+	>;
+	endPointStatusCodeLatencyBarChartsDataQuery: UseQueryResult<
+		SuccessResponse<any>,
+		unknown
+	>;
+}): JSX.Element {
+	// 0 : Status Code Count
+	// 1 : Status Code Latency
+	const [currentWidgetInfoIndex, setCurrentWidgetInfoIndex] = useState(0);
+
+	const {
+		data: endPointStatusCodeBarChartsData,
+	} = endPointStatusCodeBarChartsDataQuery;
+
+	const {
+		data: endPointStatusCodeLatencyBarChartsData,
+	} = endPointStatusCodeLatencyBarChartsDataQuery;
+
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+	const formattedEndPointStatusCodeBarChartsDataPayload = useMemo(
+		() =>
+			getFormattedEndPointStatusCodeChartData(
+				endPointStatusCodeBarChartsData?.payload,
+				'sum',
+			),
+		[endPointStatusCodeBarChartsData?.payload],
+	);
+
+	const formattedEndPointStatusCodeLatencyBarChartsDataPayload = useMemo(
+		() =>
+			getFormattedEndPointStatusCodeChartData(
+				endPointStatusCodeLatencyBarChartsData?.payload,
+				'average',
+			),
+		[endPointStatusCodeLatencyBarChartsData?.payload],
+	);
+
+	const chartData = useMemo(
+		() =>
+			getUPlotChartData(
+				currentWidgetInfoIndex === 0
+					? formattedEndPointStatusCodeBarChartsDataPayload
+					: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+			),
+		[
+			currentWidgetInfoIndex,
+			formattedEndPointStatusCodeBarChartsDataPayload,
+			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+		],
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				apiResponse:
+					currentWidgetInfoIndex === 0
+						? formattedEndPointStatusCodeBarChartsDataPayload
+						: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+				isDarkMode,
+				dimensions,
+				yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
+				softMax: null,
+				softMin: null,
+				minTimeScale: Math.floor(minTime / 1e9),
+				maxTimeScale: Math.floor(maxTime / 1e9),
+				panelType: PANEL_TYPES.BAR,
+			}),
+		[
+			minTime,
+			maxTime,
+			currentWidgetInfoIndex,
+			dimensions,
+			formattedEndPointStatusCodeBarChartsDataPayload,
+			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+			isDarkMode,
+		],
+	);
+
+	const renderCardContent = useCallback(
+		(query: UseQueryResult<SuccessResponse<any>, unknown>): JSX.Element => {
+			if (query.isLoading) {
+				return <Skeleton />;
+			}
+
+			if (query.error) {
+				return <ErrorState refetch={query.refetch} />;
+			}
+			return (
+				<div
+					className={cx('chart-container', {
+						'no-data-container':
+							!query.isLoading && !query?.data?.payload?.data?.result?.length,
+					})}
+				>
+					<Uplot options={options as Options} data={chartData} />
+				</div>
+			);
+		},
+		[options, chartData],
+	);
+
+	return (
+		<div>
+			<Card bordered className="endpoint-details-card">
+				<div className="header">
+					<Typography.Text>Call response status</Typography.Text>
+					<Button.Group className="views-tabs">
+						<Button
+							value={0}
+							className={currentWidgetInfoIndex === 0 ? 'selected_view tab' : 'tab'}
+							disabled={false}
+							onClick={(): void => setCurrentWidgetInfoIndex(0)}
+						>
+							Number of calls
+						</Button>
+						<Button
+							value={1}
+							className={currentWidgetInfoIndex === 1 ? 'selected_view tab' : 'tab'}
+							onClick={(): void => setCurrentWidgetInfoIndex(1)}
+						>
+							Latency
+						</Button>
+					</Button.Group>
+				</div>
+				<div className="graph-container" ref={graphRef}>
+					{renderCardContent(endPointStatusCodeBarChartsDataQuery)}
+				</div>
+			</Card>
+		</div>
+	);
+}
+export default StatusCodeBarCharts;

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

@@ -0,0 +1,72 @@
+import { Table, Typography } from 'antd';
+import {
+	endPointStatusCodeColumns,
+	getFormattedEndPointStatusCodeData,
+} from 'container/ApiMonitoring/utils';
+import { useMemo } from 'react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import ErrorState from './ErrorState';
+
+function StatusCodeTable({
+	endPointStatusCodeDataQuery,
+}: {
+	endPointStatusCodeDataQuery: UseQueryResult<SuccessResponse<any>, unknown>;
+}): JSX.Element {
+	const {
+		isLoading,
+		isRefetching,
+		isError,
+		data,
+		refetch,
+	} = endPointStatusCodeDataQuery;
+
+	const statusCodeData = useMemo(() => {
+		if (isLoading || isRefetching || isError) {
+			return [];
+		}
+
+		return getFormattedEndPointStatusCodeData(
+			data?.payload?.data?.result[0].table.rows,
+		);
+	}, [data?.payload?.data?.result, isLoading, isRefetching, isError]);
+
+	if (isError) {
+		return <ErrorState refetch={refetch} />;
+	}
+
+	return (
+		<div className="status-code-table-container">
+			<Table
+				loading={isLoading || isRefetching}
+				dataSource={statusCodeData || []}
+				columns={endPointStatusCodeColumns}
+				pagination={false}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+				}
+				locale={{
+					emptyText:
+						isLoading || isRefetching ? null : (
+							<div className="no-status-code-data-message-container">
+								<div className="no-status-code-data-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
+
+									<Typography.Text className="no-status-code-data-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
+							</div>
+						),
+				}}
+			/>
+		</div>
+	);
+}
+
+export default StatusCodeTable;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -0,0 +1,9 @@
+export enum VIEWS {
+	ALL_ENDPOINTS = 'all_endpoints',
+	ENDPOINT_DETAILS = 'endpoint_details',
+}
+
+export const VIEW_TYPES = {
+	ALL_ENDPOINTS: VIEWS.ALL_ENDPOINTS,
+	ENDPOINT_DETAILS: VIEWS.ENDPOINT_DETAILS,
+};

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

@@ -0,0 +1,156 @@
+import '../Explorer.styles.scss';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin, Table, Typography } from 'antd';
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import cx from 'classnames';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { HandleChangeQueryData } from 'types/common/operations.types';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import {
+	columnsConfig,
+	formatDataForTable,
+	hardcodedAttributeKeys,
+} from '../../utils';
+import DomainDetails from './DomainDetails/DomainDetails';
+
+function DomainList({
+	query,
+	showIP,
+	handleChangeQueryData,
+}: {
+	query: IBuilderQuery;
+	showIP: boolean;
+	handleChangeQueryData: HandleChangeQueryData;
+}): JSX.Element {
+	const [selectedDomainIndex, setSelectedDomainIndex] = useState<number>(-1);
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const fetchApiOverview = async (): Promise<
+		SuccessResponse<any> | ErrorResponse
+	> => {
+		const requestBody = {
+			start: minTime,
+			end: maxTime,
+			show_ip: showIP,
+			filters: {
+				op: 'AND',
+				items: query?.filters.items,
+			},
+		};
+
+		try {
+			const response = await axios.post(
+				'/third-party-apis/overview/list',
+				requestBody,
+			);
+			return {
+				statusCode: 200,
+				error: null,
+				message: response.data.status,
+				payload: response.data,
+			};
+		} catch (error) {
+			return ErrorResponseHandler(error as AxiosError);
+		}
+	};
+
+	const { data, isLoading, isFetching } = useQuery(
+		[REACT_QUERY_KEY.GET_DOMAINS_LIST, minTime, maxTime, query, showIP],
+		fetchApiOverview,
+	);
+
+	const formattedDataForTable = useMemo(
+		() => formatDataForTable(data?.payload?.data?.result[0]?.table?.rows),
+		[data],
+	);
+
+	return (
+		<section className={cx('api-module-right-section')}>
+			<div className={cx('api-monitoring-list-header')}>
+				<QueryBuilderSearchV2
+					query={query}
+					onChange={(searchFilters): void =>
+						handleChangeQueryData('filters', searchFilters)
+					}
+					placeholder="Search filters..."
+					hardcodedAttributeKeys={hardcodedAttributeKeys}
+				/>
+				<DateTimeSelectionV2
+					showAutoRefresh={false}
+					showRefreshText={false}
+					hideShareModal
+				/>
+			</div>
+			<Table
+				className={cx('api-monitoring-domain-list-table')}
+				dataSource={isFetching || isLoading ? [] : formattedDataForTable}
+				columns={columnsConfig}
+				loading={{
+					spinning: isFetching || isLoading,
+					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+				}}
+				locale={{
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-domains-message-container">
+								<div className="no-filtered-domains-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
+
+									<Typography.Text className="no-filtered-domains-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
+							</div>
+						),
+				}}
+				scroll={{ x: true }}
+				tableLayout="fixed"
+				onRow={(record, index): { onClick: () => void; className: string } => ({
+					onClick: (): void => {
+						if (index !== undefined) {
+							const dataIndex = formattedDataForTable.findIndex(
+								(item) => item.key === record.key,
+							);
+							setSelectedDomainIndex(dataIndex);
+						}
+					},
+					className: 'expanded-clickable-row',
+				})}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+				}
+			/>
+			{selectedDomainIndex !== -1 && (
+				<DomainDetails
+					domainData={formattedDataForTable[selectedDomainIndex]}
+					selectedDomainIndex={selectedDomainIndex}
+					setSelectedDomainIndex={setSelectedDomainIndex}
+					domainListLength={formattedDataForTable.length}
+					handleClose={(): void => {
+						setSelectedDomainIndex(-1);
+					}}
+				/>
+			)}
+		</section>
+	);
+}
+
+export default DomainList;

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

@@ -0,0 +1,219 @@
+.api-monitoring-page {
+	display: flex;
+	height: 100%;
+
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;
+
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--bg-slate-400);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
+	}
+
+	.api-module-right-section {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		.api-monitoring-list-header {
+			width: 100%;
+			padding: 8px;
+			display: flex;
+
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.query-builder-search-v2 {
+			min-width: 80%;
+			flex: 1;
+		}
+	}
+
+	.api-monitoring-domain-list-table {
+		.ant-table {
+			.ant-table-thead > tr > th {
+				padding: 12px;
+				font-weight: 500;
+				font-size: 12px;
+				line-height: 18px;
+				border-bottom: none;
+
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px;
+				/* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+				background: none;
+
+				&::before {
+					background-color: transparent;
+				}
+			}
+
+			.ant-table-thead > tr > th:has(.domain-list-name-col-header) {
+				background: var(--bg-ink-300);
+				opacity: 0.6;
+			}
+
+			.ant-table-cell {
+				padding: 12px;
+				font-size: 13px;
+				line-height: 20px;
+				color: var(--bg-vanilla-100);
+				border-bottom: none;
+			}
+
+			.ant-table-cell:has(.domain-list-name-col-value) {
+				background: var(--bg-ink-300);
+				opacity: 0.6;
+			}
+
+			.round-metric-tag {
+				display: inline-flex;
+				padding: 2px 8px;
+				align-items: center;
+				gap: 6px;
+				width: fit-content;
+
+				border-radius: 50px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-slate-500);
+				text-transform: lowercase;
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(255, 255, 255, 0.04);
+			}
+
+			.ant-table-cell:first-child {
+				text-align: justify;
+			}
+
+			.ant-table-cell:nth-child(2) {
+				padding-left: 16px;
+				padding-right: 16px;
+			}
+
+			.ant-table-cell:nth-child(n + 3) {
+				padding-right: 24px;
+			}
+
+			.column-header-right {
+				text-align: right;
+			}
+
+			.ant-table-tbody > tr > td {
+				border-bottom: none;
+			}
+
+			.ant-table-thead
+				> tr
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+				background-color: transparent;
+			}
+
+			.ant-empty-normal {
+				visibility: hidden;
+			}
+
+			.table-row-light {
+				background: none;
+			}
+
+			.table-row-dark {
+				background: var(--bg-ink-300);
+			}
+
+			.error-rate {
+				width: 120px;
+			}
+		}
+	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
+}
+
+.no-filtered-domains-message-container {
+	height: 30vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.no-filtered-domains-message-content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+
+		width: fit-content;
+		padding: 24px;
+	}
+
+	.no-filtered-domains-message {
+		margin-top: 8px;
+	}
+}
+
+.lightMode {
+	.api-monitoring-domain-list-table {
+		.ant-table {
+			.ant-table-thead > tr > th {
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.ant-table-thead > tr > th:has(.domain-list-name-col-header) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.ant-table-cell {
+				background: var(--bg-vanilla-100);
+				color: var(--bg-ink-500);
+			}
+
+			.ant-table-cell:has(.domain-list-name-col-value) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+
+			.table-row-light {
+				background: none;
+			}
+
+			.table-row-dark {
+				background: none;
+			}
+
+			.round-metric-tag {
+				color: var(--bg-vanilla-100);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,91 @@
+import './Explorer.styles.scss';
+
+import { FilterOutlined } from '@ant-design/icons';
+import * as Sentry from '@sentry/react';
+import { Switch, Typography } from 'antd';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useMemo, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { ApiMonitoringQuickFiltersConfig } from '../utils';
+import DomainList from './Domains/DomainList';
+
+function Explorer(): JSX.Element {
+	const [showIP, setShowIP] = useState<boolean>(true);
+
+	const { currentQuery } = useQueryBuilder();
+
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: currentQuery.builder.queryData[0],
+		entityVersion: '',
+	});
+
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery],
+	);
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<div className="api-quick-filters-header">
+						<FilterOutlined />
+						<Typography.Text>Filters</Typography.Text>
+					</div>
+
+					<div className="api-quick-filters-header">
+						<Typography.Text>Show IP addresses</Typography.Text>
+						<Switch
+							size="small"
+							style={{ marginLeft: 'auto' }}
+							checked={showIP}
+							onClick={(): void => {
+								setShowIP((showIP) => !showIP);
+							}}
+						/>
+					</div>
+
+					<QuickFilters
+						source={QuickFiltersSource.API_MONITORING}
+						config={ApiMonitoringQuickFiltersConfig}
+						handleFilterVisibilityChange={(): void => {}}
+						onFilterChange={(query: Query): void =>
+							handleChangeQueryData('filters', query.builder.queryData[0].filters)
+						}
+					/>
+				</section>
+				<DomainList
+					query={query}
+					showIP={showIP}
+					handleChangeQueryData={handleChangeQueryData}
+				/>
+			</div>
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default Explorer;

frontend/src/container/AppLayout/index.tsx

@@ -337,6 +337,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		routeKey === 'LOGS_PIPELINES' ||
 		routeKey === 'LOGS_SAVE_VIEWS';
 
+	const isApiMonitoringView = (): boolean => routeKey === 'API_MONITORING';
+
 	const isTracesView = (): boolean =>
 		routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
 
@@ -357,6 +359,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const isInfraMonitoring = (): boolean =>
 		routeKey === 'INFRASTRUCTURE_MONITORING_HOSTS' ||
 		routeKey === 'INFRASTRUCTURE_MONITORING_KUBERNETES';
+	const isTracesFunnels = (): boolean => routeKey === 'TRACES_FUNNELS';
 	const isPathMatch = (regex: RegExp): boolean => regex.test(pathname);
 
 	const isDashboardView = (): boolean =>
@@ -657,11 +660,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isAlertOverview() ||
 											isMessagingQueues() ||
 											isCloudIntegrationPage() ||
-											isInfraMonitoring()
+											isInfraMonitoring() ||
+											isApiMonitoringView()
 												? 0
 												: '0 1rem',
 
-										...(isTraceDetailsView() ? { margin: 0 } : {}),
+										...(isTraceDetailsView() || isTracesFunnels() ? { margin: 0 } : {}),
 									}}
 								>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -223,7 +223,7 @@ function ExplorerOptions({
 	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
-	const extraData = viewsData?.data?.data?.find((view) => view.uuid === viewKey)
+	const extraData = viewsData?.data?.data?.find((view) => view.id === viewKey)
 		?.extraData;
 
 	const extraDataColor = extraData ? JSON.parse(extraData).color : '';
@@ -357,17 +357,12 @@ function ExplorerOptions({
 				viewsData?.data?.data,
 			);
 			if (!currentViewDetails) return;
-			const {
-				query,
-				name,
-				uuid,
-				panelType: currentPanelType,
-			} = currentViewDetails;
+			const { query, name, id, panelType: currentPanelType } = currentViewDetails;
 
 			handleExplorerTabChange(currentPanelType, {
 				query,
 				name,
-				uuid,
+				id,
 			});
 		},
 		[viewsData, handleExplorerTabChange],
@@ -694,7 +689,7 @@ function ExplorerOptions({
 									bgColor = extraData.color;
 								}
 								return (
-									<Select.Option key={view.uuid} value={view.name}>
+									<Select.Option key={view.id} value={view.name}>
 										<div className="render-options">
 											<span
 												className="dot"

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -63,17 +63,17 @@ export default function SavedViews({
 
 	const handleRedirectQuery = (view: ViewProps): void => {
 		logEvent('Homepage: Saved view clicked', {
-			viewId: view.uuid,
+			viewId: view.id,
 			viewName: view.name,
 			entity: selectedEntity,
 		});
 
 		const currentViewDetails = getViewDetailsUsingViewKey(
-			view.uuid,
+			view.id,
 			selectedEntity === 'logs' ? logsViews : tracesViews,
 		);
 		if (!currentViewDetails) return;
-		const { query, name, uuid, panelType: currentPanelType } = currentViewDetails;
+		const { query, name, id, panelType: currentPanelType } = currentViewDetails;
 
 		if (selectedEntity) {
 			handleExplorerTabChange(
@@ -81,7 +81,7 @@ export default function SavedViews({
 				{
 					query,
 					name,
-					uuid,
+					id,
 				},
 				SOURCEPAGE_VS_ROUTES[selectedEntity],
 			);

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -561,6 +561,7 @@ function ClusterDetails({
 							tracesFilters={logsAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="clusterTraces"
+							category={InfraMonitoringEvents.Cluster}
 							queryKeyFilters={[QUERY_KEYS.K8S_CLUSTER_NAME]}
 						/>
 					)}

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -590,6 +590,7 @@ function DaemonSetDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="daemonsetTraces"
+							category={InfraMonitoringEvents.DaemonSet}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_DAEMON_SET_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -598,6 +598,7 @@ function DeploymentDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="deploymentTraces"
+							category={InfraMonitoringEvents.Deployment}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_DEPLOYMENT_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -1,8 +1,10 @@
 import './entityTraces.styles.scss';
 
+import logEvent from 'api/common/logEvent';
 import { getListColumns } from 'components/HostMetricsDetail/HostMetricTraces/utils';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
@@ -20,7 +22,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -45,6 +47,7 @@ interface Props {
 	tracesFilters: IBuilderQuery['filters'];
 	selectedInterval: Time;
 	queryKey: string;
+	category: string;
 	queryKeyFilters: string[];
 }
 
@@ -56,6 +59,7 @@ function EntityTraces({
 	tracesFilters,
 	selectedInterval,
 	queryKey,
+	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
 	const [traces, setTraces] = useState<any[]>([]);
@@ -145,6 +149,14 @@ function EntityTraces({
 	const totalCount =
 		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
 
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			category,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, [category]);
+
 	return (
 		<div className="entity-metric-traces">
 			<div className="entity-metric-traces-header">
@@ -197,6 +209,9 @@ function EntityTraces({
 						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
 					/>
 				</div>
 			)}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -702,29 +702,36 @@
 	}
 }
 
-.ant-table-cell {
-	min-width: 140px !important;
-	max-width: 140px !important;
-}
-
-.ant-table-cell {
-	&:has(.pod-name-header) {
-		min-width: 250px !important;
-		max-width: 250px !important;
-	}
-}
-
-.ant-table-cell {
-	&:has(.med-col) {
-		min-width: 180px !important;
-		max-width: 180px !important;
-	}
-}
-
-.expanded-k8s-list-table {
+.infra-monitoring-container {
 	.ant-table-cell {
-		min-width: 180px !important;
-		max-width: 180px !important;
+		min-width: 140px !important;
+		max-width: 140px !important;
+	}
+
+	.ant-table-cell {
+		&:has(.pod-name-header) {
+			min-width: 250px !important;
+			max-width: 250px !important;
+		}
+	}
+
+	.ant-table-cell {
+		&:has(.med-col) {
+			min-width: 180px !important;
+			max-width: 180px !important;
+		}
+	}
+
+	.expanded-k8s-list-table {
+		.ant-table-cell {
+			min-width: 180px !important;
+			max-width: 180px !important;
+		}
+
+		.ant-table-row-expand-icon-cell {
+			min-width: 30px !important;
+			max-width: 30px !important;
+		}
 	}
 
 	.ant-table-row-expand-icon-cell {
@@ -733,11 +740,6 @@
 	}
 }
 
-.ant-table-row-expand-icon-cell {
-	min-width: 30px !important;
-	max-width: 30px !important;
-}
-
 .event-content-container {
 	.ant-table {
 		background: var(--bg-ink-400);

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -575,6 +575,7 @@ function JobDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="jobTraces"
+							category={InfraMonitoringEvents.Job}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_JOB_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -563,6 +563,7 @@ function NamespaceDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="namespaceTraces"
+							category={InfraMonitoringEvents.Namespace}
 							queryKeyFilters={[QUERY_KEYS.K8S_NAMESPACE_NAME]}
 						/>
 					)}

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -564,6 +564,7 @@ function NodeDetails({
 							selectedInterval={selectedInterval}
 							queryKeyFilters={[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME]}
 							queryKey="nodeTraces"
+							category={InfraMonitoringEvents.Node}
 						/>
 					)}
 					{selectedView === VIEW_TYPES.EVENTS && (

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -605,6 +605,7 @@ function PodDetails({
 							tracesFilters={logsAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="podTraces"
+							category={InfraMonitoringEvents.Pod}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_POD_NAME,
 								QUERY_KEYS.K8S_CLUSTER_NAME,

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -582,6 +582,7 @@ function StatefulSetDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="statefulsetTraces"
+							category={InfraMonitoringEvents.StatefulSet}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_STATEFUL_SET_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -159,6 +159,14 @@
 			}
 		}
 
+		.log-scale {
+			margin-top: 16px;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
 		.panel-time-text {
 			margin-top: 16px;
 			color: var(--bg-vanilla-400);

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -61,6 +61,18 @@ export const panelTypeVsFillSpan: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
 
+export const panelTypeVsLogScale: { [key in PANEL_TYPES]: boolean } = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: true,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
 export const panelTypeVsYAxisUnit: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.TIME_SERIES]: true,
 	[PANEL_TYPES.VALUE]: true,

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -10,7 +10,7 @@ import GraphTypes, {
 } from 'container/NewDashboard/ComponentsSlider/menuItems';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ConciergeBell, Plus } from 'lucide-react';
+import { ConciergeBell, LineChart, Plus, Spline } from 'lucide-react';
 import {
 	Dispatch,
 	SetStateAction,
@@ -27,6 +27,7 @@ import {
 	panelTypeVsColumnUnitPreferences,
 	panelTypeVsCreateAlert,
 	panelTypeVsFillSpan,
+	panelTypeVsLogScale,
 	panelTypeVsPanelTimePreferences,
 	panelTypeVsSoftMinMax,
 	panelTypeVsStackingChartPreferences,
@@ -41,6 +42,12 @@ import YAxisUnitSelector from './YAxisUnitSelector';
 const { TextArea } = Input;
 const { Option } = Select;
 
+enum LogScale {
+	LINEAR = 'linear',
+	LOGARITHMIC = 'logarithmic',
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function RightContainer({
 	description,
 	setDescription,
@@ -71,6 +78,8 @@ function RightContainer({
 	setSoftMin,
 	columnUnits,
 	setColumnUnits,
+	isLogScale,
+	setIsLogScale,
 }: RightContainerProps): JSX.Element {
 	const onChangeHandler = useCallback(
 		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
@@ -87,6 +96,7 @@ function RightContainer({
 	const allowThreshold = panelTypeVsThreshold[selectedGraph];
 	const allowSoftMinMax = panelTypeVsSoftMinMax[selectedGraph];
 	const allowFillSpans = panelTypeVsFillSpan[selectedGraph];
+	const allowLogScale = panelTypeVsLogScale[selectedGraph];
 	const allowYAxisUnit = panelTypeVsYAxisUnit[selectedGraph];
 	const allowCreateAlerts = panelTypeVsCreateAlert[selectedGraph];
 	const allowBucketConfig = panelTypeVsBucketConfig[selectedGraph];
@@ -293,6 +303,36 @@ function RightContainer({
 						</section>
 					</section>
 				)}
+
+				{allowLogScale && (
+					<section className="log-scale">
+						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
+						<Select
+							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
+							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LogScale.LINEAR}
+						>
+							<Option value={LogScale.LINEAR}>
+								<div className="select-option">
+									<div className="icon">
+										<LineChart size={16} />
+									</div>
+									<Typography.Text className="display">Linear</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LogScale.LOGARITHMIC}>
+								<div className="select-option">
+									<div className="icon">
+										<Spline size={16} />
+									</div>
+									<Typography.Text className="display">Logarithmic</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
 			</section>
 
 			{allowCreateAlerts && (
@@ -356,6 +396,8 @@ interface RightContainerProps {
 	setColumnUnits: Dispatch<SetStateAction<ColumnUnit>>;
 	setSoftMin: Dispatch<SetStateAction<number | null>>;
 	setSoftMax: Dispatch<SetStateAction<number | null>>;
+	isLogScale: boolean;
+	setIsLogScale: Dispatch<SetStateAction<boolean>>;
 }
 
 RightContainer.defaultProps = {

frontend/src/container/NewWidget/index.tsx

@@ -170,6 +170,9 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 	const [isFillSpans, setIsFillSpans] = useState<boolean>(
 		selectedWidget?.fillSpans || false,
 	);
+	const [isLogScale, setIsLogScale] = useState<boolean>(
+		selectedWidget?.isLogScale || false,
+	);
 	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);
 
@@ -234,6 +237,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 				mergeAllActiveQueries: combineHistogram,
 				selectedLogFields,
 				selectedTracesFields,
+				isLogScale,
 			};
 		});
 	}, [
@@ -255,6 +259,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		bucketCount,
 		combineHistogram,
 		stackedBarChart,
+		isLogScale,
 	]);
 
 	const closeModal = (): void => {
@@ -369,6 +374,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 				graphType: getGraphType(selectedGraph || selectedWidget.panelTypes),
 				query: stagedQuery,
 				fillGaps: selectedWidget.fillSpans || false,
+				isLogScale: selectedWidget.isLogScale || false,
 				formatForWeb:
 					getGraphTypeForFormat(selectedGraph || selectedWidget.panelTypes) ===
 					PANEL_TYPES.TABLE,
@@ -379,6 +385,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		stagedQuery,
 		selectedTime,
 		selectedWidget.fillSpans,
+		selectedWidget.isLogScale,
 		globalSelectedInterval,
 	]);
 
@@ -442,6 +449,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
 								mergeAllActiveQueries: selectedWidget?.mergeAllActiveQueries || false,
@@ -468,6 +476,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
 								mergeAllActiveQueries: selectedWidget?.mergeAllActiveQueries || false,
@@ -730,6 +739,8 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 							selectedWidget={selectedWidget}
 							isFillSpans={isFillSpans}
 							setIsFillSpans={setIsFillSpans}
+							isLogScale={isLogScale}
+							setIsLogScale={setIsLogScale}
 							softMin={softMin}
 							setSoftMin={setSoftMin}
 							softMax={softMax}

frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx

@@ -137,6 +137,7 @@ function UplotPanelWrapper({
 					uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
 				timezone: timezone.value,
 				customSeries,
+				isLogScale: widget?.isLogScale,
 			}),
 		[
 			widget?.id,
@@ -161,6 +162,7 @@ function UplotPanelWrapper({
 			customTooltipElement,
 			timezone.value,
 			customSeries,
+			widget?.isLogScale,
 		],
 	);
 

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -87,6 +87,7 @@ interface QueryBuilderSearchV2Props {
 	placeholder?: string;
 	className?: string;
 	suffixIcon?: React.ReactNode;
+	hardcodedAttributeKeys?: BaseAutocompleteData[];
 }
 
 export interface Option {
@@ -119,6 +120,7 @@ function QueryBuilderSearchV2(
 		className,
 		suffixIcon,
 		whereClauseConfig,
+		hardcodedAttributeKeys,
 	} = props;
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -233,7 +235,7 @@ function QueryBuilderSearchV2(
 		},
 		{
 			queryKey: [searchParams],
-			enabled: isQueryEnabled && !isLogsDataSource,
+			enabled: isQueryEnabled && !isLogsDataSource && !hardcodedAttributeKeys,
 		},
 	);
 
@@ -674,6 +676,18 @@ function QueryBuilderSearchV2(
 						value: key,
 					})) || []),
 				]);
+			} else if (hardcodedAttributeKeys) {
+				const filteredKeys = hardcodedAttributeKeys.filter((key) =>
+					key.key
+						.toLowerCase()
+						.includes((searchValue?.split(' ')[0] || '').toLowerCase()),
+				);
+				setDropdownOptions(
+					filteredKeys.map((key) => ({
+						label: key.key,
+						value: key,
+					})),
+				);
 			} else {
 				setDropdownOptions(
 					data?.payload?.attributeKeys?.map((key) => ({
@@ -752,6 +766,7 @@ function QueryBuilderSearchV2(
 			);
 		}
 	}, [
+		hardcodedAttributeKeys,
 		attributeValues?.payload,
 		currentFilterItem?.key?.dataType,
 		currentState,
@@ -984,6 +999,7 @@ QueryBuilderSearchV2.defaultProps = {
 	className: '',
 	suffixIcon: null,
 	whereClauseConfig: {},
+	hardcodedAttributeKeys: undefined,
 };
 
 export default QueryBuilderSearchV2;

frontend/src/container/SideNav/menuItems.tsx

@@ -3,6 +3,7 @@ import ROUTES from 'constants/routes';
 import {
 	BarChart2,
 	BellDot,
+	Binoculars,
 	Boxes,
 	BugIcon,
 	Cloudy,
@@ -123,6 +124,11 @@ const menuItems: SidebarItem[] = [
 		label: 'Messaging Queues',
 		icon: <ListMinus size={16} />,
 	},
+	{
+		key: ROUTES.API_MONITORING,
+		label: 'API Monitoring',
+		icon: <Binoculars size={16} />,
+	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
 		label: 'Alerts',

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -207,6 +207,8 @@ export const routesToSkip = [
 	ROUTES.LOGS_PIPELINES,
 	ROUTES.TRACES_EXPLORER,
 	ROUTES.TRACES_SAVE_VIEWS,
+	ROUTES.TRACES_FUNNELS,
+	ROUTES.TRACES_FUNNELS_DETAIL,
 	ROUTES.SHORTCUTS,
 	ROUTES.INTEGRATIONS,
 	ROUTES.DASHBOARD,
@@ -224,6 +226,7 @@ export const routesToSkip = [
 	ROUTES.METRICS_EXPLORER,
 	ROUTES.METRICS_EXPLORER_EXPLORER,
 	ROUTES.METRICS_EXPLORER_VIEWS,
+	ROUTES.API_MONITORING,
 	ROUTES.CHANNELS_NEW,
 	ROUTES.CHANNELS_EDIT,
 	ROUTES.WORKSPACE_ACCESS_RESTRICTED,

frontend/src/hooks/TracesFunnels/useFunnels.tsx

@@ -0,0 +1,77 @@
+import {
+	createFunnel,
+	deleteFunnel,
+	getFunnelById,
+	getFunnelsList,
+	renameFunnel,
+} from 'api/traceFunnels';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	useMutation,
+	UseMutationResult,
+	useQuery,
+	UseQueryResult,
+} from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	CreateFunnelPayload,
+	CreateFunnelResponse,
+	FunnelData,
+} from 'types/api/traceFunnels';
+
+export const useFunnelsList = ({
+	searchQuery,
+}: {
+	searchQuery: string;
+}): UseQueryResult<SuccessResponse<FunnelData[]> | ErrorResponse, unknown> =>
+	useQuery({
+		queryKey: [REACT_QUERY_KEY.GET_FUNNELS_LIST, searchQuery],
+		queryFn: () => getFunnelsList({ search: searchQuery }),
+	});
+
+export const useFunnelDetails = ({
+	funnelId,
+}: {
+	funnelId: string;
+}): UseQueryResult<SuccessResponse<FunnelData> | ErrorResponse, unknown> =>
+	useQuery({
+		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_DETAILS, funnelId],
+		queryFn: () => getFunnelById(funnelId),
+		enabled: !!funnelId,
+	});
+
+export const useCreateFunnel = (): UseMutationResult<
+	SuccessResponse<CreateFunnelResponse> | ErrorResponse,
+	Error,
+	CreateFunnelPayload
+> =>
+	useMutation({
+		mutationFn: createFunnel,
+	});
+
+interface RenameFunnelPayload {
+	id: string;
+	funnel_name: string;
+}
+
+export const useRenameFunnel = (): UseMutationResult<
+	SuccessResponse<FunnelData> | ErrorResponse,
+	Error,
+	RenameFunnelPayload
+> =>
+	useMutation({
+		mutationFn: renameFunnel,
+	});
+
+interface DeleteFunnelPayload {
+	id: string;
+}
+
+export const useDeleteFunnel = (): UseMutationResult<
+	SuccessResponse<FunnelData> | ErrorResponse,
+	Error,
+	DeleteFunnelPayload
+> =>
+	useMutation({
+		mutationFn: deleteFunnel,
+	});

frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSearch.tsx

@@ -0,0 +1,37 @@
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { ChangeEvent, useState } from 'react';
+
+const useHandleTraceFunnelsSearch = (): {
+	searchQuery: string;
+	handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+} => {
+	const { safeNavigate } = useSafeNavigate();
+
+	const urlQuery = useUrlQuery();
+	const [searchQuery, setSearchQuery] = useState<string>(
+		urlQuery.get('search') || '',
+	);
+
+	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
+		const { value } = e.target;
+		setSearchQuery(value);
+
+		const trimmedValue = value.trim();
+
+		if (trimmedValue) {
+			urlQuery.set('search', trimmedValue);
+		} else {
+			urlQuery.delete('search');
+		}
+
+		safeNavigate({ search: urlQuery.toString() });
+	};
+
+	return {
+		searchQuery,
+		handleSearch,
+	};
+};
+
+export default useHandleTraceFunnelsSearch;

frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSort.tsx

@@ -0,0 +1,70 @@
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useMemo, useState } from 'react';
+import { FunnelData } from 'types/api/traceFunnels';
+
+interface SortOrder {
+	columnKey: string;
+	order: 'ascend' | 'descend';
+}
+
+const useHandleTraceFunnelsSort = ({
+	data,
+}: {
+	data: FunnelData[];
+}): {
+	sortOrder: SortOrder;
+	handleSort: (key: string) => void;
+	sortedData: FunnelData[];
+} => {
+	const { safeNavigate } = useSafeNavigate();
+	const urlQuery = useUrlQuery();
+
+	const [sortOrder, setSortOrder] = useState<SortOrder>({
+		columnKey: urlQuery.get('columnKey') || 'creation_timestamp',
+		order: (urlQuery.get('order') as 'ascend' | 'descend') || 'descend',
+	});
+
+	const handleSort = (key: string): void => {
+		setSortOrder((prev) => {
+			const newOrder: SortOrder =
+				prev.columnKey === key
+					? { columnKey: key, order: prev.order === 'ascend' ? 'descend' : 'ascend' }
+					: { columnKey: key, order: 'descend' };
+
+			urlQuery.set('columnKey', newOrder.columnKey);
+			urlQuery.set('order', newOrder.order);
+
+			return newOrder;
+		});
+		safeNavigate({ search: urlQuery.toString() });
+	};
+
+	const sortedData = useMemo(
+		() =>
+			data.length > 0
+				? [...data].sort((a, b) => {
+						const { columnKey, order } = sortOrder;
+						let aValue = a[columnKey as keyof FunnelData];
+						let bValue = b[columnKey as keyof FunnelData];
+
+						// Fallback to creation timestamp if invalid key
+						if (typeof aValue !== 'number' || typeof bValue !== 'number') {
+							aValue = a.creation_timestamp;
+							bValue = b.creation_timestamp;
+						}
+
+						return order === 'ascend' ? aValue - bValue : bValue - aValue;
+				  })
+				: [],
+		[sortOrder, data],
+	);
+
+	return {
+		sortOrder,
+		handleSort,
+		sortedData,
+	};
+};
+
+export default useHandleTraceFunnelsSort;

frontend/src/hooks/useHandleExplorerTabChange.ts

@@ -70,7 +70,7 @@ export const useHandleExplorerTabChange = (): {
 					{
 						[QueryParams.panelTypes]: newPanelType,
 						[QueryParams.viewName]: currentQueryData?.name || viewName,
-						[QueryParams.viewKey]: currentQueryData?.uuid || viewKey,
+						[QueryParams.viewKey]: currentQueryData?.id || viewKey,
 					},
 					redirectToUrl,
 				);
@@ -78,7 +78,7 @@ export const useHandleExplorerTabChange = (): {
 				redirectWithQueryBuilderData(query, {
 					[QueryParams.panelTypes]: newPanelType,
 					[QueryParams.viewName]: currentQueryData?.name || viewName,
-					[QueryParams.viewKey]: currentQueryData?.uuid || viewKey,
+					[QueryParams.viewKey]: currentQueryData?.id || viewKey,
 				});
 			}
 		},
@@ -90,6 +90,6 @@ export const useHandleExplorerTabChange = (): {
 
 interface ICurrentQueryData {
 	name: string;
-	uuid: string;
+	id: string;
 	query: Query;
 }

frontend/src/lib/dashboard/getQueryResults.ts

@@ -102,4 +102,5 @@ export interface GetQueryResultsProps {
 	};
 	start?: number;
 	end?: number;
+	step?: number;
 }

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -58,6 +58,7 @@ export interface GetUPlotChartOptions {
 	tzDate?: (timestamp: number) => Date;
 	timezone?: string;
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
+	isLogScale?: boolean;
 }
 
 /** the function converts series A , series B , series C to
@@ -164,6 +165,7 @@ export const getUPlotChartOptions = ({
 	tzDate,
 	timezone,
 	customSeries,
+	isLogScale,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -220,6 +222,7 @@ export const getUPlotChartOptions = ({
 					softMax,
 					softMin,
 				}),
+				distr: isLogScale ? 3 : 1,
 			},
 		},
 		plugins: [
@@ -387,6 +390,6 @@ export const getUPlotChartOptions = ({
 					hiddenGraph,
 					isDarkMode,
 			  }),
-		axes: getAxes({ isDarkMode, yAxisUnit, panelType }),
+		axes: getAxes({ isDarkMode, yAxisUnit, panelType, isLogScale }),
 	};
 };