feat(query-search-v2): add initial expression support & store to manage

.github/workflows/e2eci.yaml

@@ -1,70 +0,0 @@
-name: e2eci
-
-on:
-  pull_request:
-    types:
-      - labeled
-  pull_request_target:
-    types:
-      - labeled
-
-jobs:
-  test:
-    strategy:
-      fail-fast: false
-      matrix:
-        project:
-          - chromium
-    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'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: python
-        uses: actions/setup-python@v5
-        with:
-          python-version: 3.13
-      - name: uv
-        uses: astral-sh/setup-uv@v4
-      - name: node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-      - name: python-install
-        run: |
-          cd tests && uv sync
-      - name: yarn-install
-        run: |
-          cd tests/e2e && yarn install --frozen-lockfile
-      - name: playwright-browsers
-        run: |
-          cd tests/e2e && yarn playwright install --with-deps ${{ matrix.project }}
-      - name: bring-up-stack
-        run: |
-          cd tests && \
-            uv run pytest \
-            --basetemp=./tmp/ \
-            -vv --reuse --with-web \
-            e2e/bootstrap/setup.py::test_setup
-      - name: playwright-test
-        run: |
-          cd tests/e2e && \
-            yarn playwright test --project=${{ matrix.project }}
-      - name: teardown-stack
-        if: always()
-        run: |
-          cd tests && \
-            uv run pytest \
-            --basetemp=./tmp/ \
-            -vv --teardown \
-            e2e/bootstrap/setup.py::test_teardown
-      - name: upload-artifacts
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-artifacts-${{ matrix.project }}
-          path: tests/e2e/artifacts/
-          retention-days: 5

.github/workflows/integrationci.yaml

@@ -25,11 +25,11 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests && uv sync
+          cd tests/integration && uv sync
       - name: fmt
         run: |
           make py-fmt
-          git diff --exit-code -- tests/
+          git diff --exit-code -- tests/integration/
       - name: lint
         run: |
           make py-lint
@@ -37,21 +37,21 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        suite:
-          - alerts
+        src:
+          - bootstrap
+          - passwordauthn
           - callbackauthn
           - cloudintegrations
           - dashboard
-          - ingestionkeys
           - logspipelines
-          - passwordauthn
           - preference
           - querier
-          - rawexportdata
           - role
+          - ttl
+          - alerts
+          - ingestionkeys
           - rootuser
           - serviceaccount
-          - ttl
         sqlstore-provider:
           - postgres
           - sqlite
@@ -79,9 +79,8 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests && uv sync
+          cd tests/integration && uv sync
       - name: webdriver
-        if: matrix.suite == 'callbackauthn'
         run: |
           wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
           echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/google-chrome.list
@@ -100,10 +99,10 @@ jobs:
           google-chrome-stable --version
       - name: run
         run: |
-          cd tests && \
+          cd tests/integration && \
             uv run pytest \
             --basetemp=./tmp/ \
-            integration/tests/${{matrix.suite}} \
+            src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
             --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \

.github/workflows/run-e2e.yaml

@@ -0,0 +1,62 @@
+name: e2eci
+
+on:
+  workflow_dispatch:
+    inputs:
+      userRole:
+        description: "Role of the user (ADMIN, EDITOR, VIEWER)"
+        required: true
+        type: choice
+        options:
+          - ADMIN
+          - EDITOR
+          - VIEWER
+
+jobs:
+  test:
+    name: Run Playwright Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Mask secrets and input
+        run: |
+          echo "::add-mask::${{ secrets.BASE_URL }}"
+          echo "::add-mask::${{ secrets.LOGIN_USERNAME }}"
+          echo "::add-mask::${{ secrets.LOGIN_PASSWORD }}"
+          echo "::add-mask::${{ github.event.inputs.userRole }}"
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: |
+          npm install -g yarn
+          yarn
+
+      - name: Install Playwright Browsers
+        working-directory: frontend
+        run: yarn playwright install --with-deps
+
+      - name: Run Playwright Tests
+        working-directory: frontend
+        run: |
+          BASE_URL="${{ secrets.BASE_URL }}" \
+          LOGIN_USERNAME="${{ secrets.LOGIN_USERNAME }}" \
+          LOGIN_PASSWORD="${{ secrets.LOGIN_PASSWORD }}" \
+          USER_ROLE="${{ github.event.inputs.userRole }}" \
+          yarn playwright test
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30

Makefile

@@ -201,26 +201,26 @@ docker-buildx-enterprise: go-build-enterprise js-build
 # python commands
 ##############################################################
 .PHONY: py-fmt
-py-fmt: ## Run black across the shared tests project
-	@cd tests && uv run black .
+py-fmt: ## Run black for integration tests
+	@cd tests/integration && uv run black .
 
 .PHONY: py-lint
-py-lint: ## Run lint across the shared tests project
-	@cd tests && uv run isort .
-	@cd tests && uv run autoflake .
-	@cd tests && uv run pylint .
+py-lint: ## Run lint for integration tests
+	@cd tests/integration && uv run isort .
+	@cd tests/integration && uv run autoflake .
+	@cd tests/integration && uv run pylint .
 
 .PHONY: py-test-setup
-py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+py-test-setup: ## Runs integration tests
+	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no src/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
-py-test-teardown: ## Tear down the shared SigNoz backend
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  integration/bootstrap/setup.py::test_teardown
+py-test-teardown: ## Runs integration tests with teardown
+	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  src/bootstrap/setup.py::test_teardown
 
 .PHONY: py-test
 py-test: ## Runs integration tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --capture=no integration/tests/
+	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --capture=no src/
 
 .PHONY: py-clean
 py-clean: ## Clear all pycache and pytest cache from tests directory recursively

docs/api/openapi.yml

@@ -2287,287 +2287,6 @@ components:
         enabled:
           type: boolean
       type: object
-    InframonitoringtypesHostFilter:
-      properties:
-        expression:
-          type: string
-        filterByStatus:
-          $ref: '#/components/schemas/InframonitoringtypesHostStatus'
-      type: object
-    InframonitoringtypesHostRecord:
-      properties:
-        activeHostCount:
-          type: integer
-        cpu:
-          format: double
-          type: number
-        diskUsage:
-          format: double
-          type: number
-        hostName:
-          type: string
-        inactiveHostCount:
-          type: integer
-        load15:
-          format: double
-          type: number
-        memory:
-          format: double
-          type: number
-        meta:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        status:
-          $ref: '#/components/schemas/InframonitoringtypesHostStatus'
-        wait:
-          format: double
-          type: number
-      required:
-      - hostName
-      - status
-      - activeHostCount
-      - inactiveHostCount
-      - cpu
-      - memory
-      - wait
-      - load15
-      - diskUsage
-      - meta
-      type: object
-    InframonitoringtypesHostStatus:
-      enum:
-      - active
-      - inactive
-      - ""
-      type: string
-    InframonitoringtypesHosts:
-      properties:
-        endTimeBeforeRetention:
-          type: boolean
-        records:
-          items:
-            $ref: '#/components/schemas/InframonitoringtypesHostRecord'
-          nullable: true
-          type: array
-        requiredMetricsCheck:
-          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
-        total:
-          type: integer
-        type:
-          $ref: '#/components/schemas/InframonitoringtypesResponseType'
-        warning:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
-      required:
-      - type
-      - records
-      - total
-      - requiredMetricsCheck
-      - endTimeBeforeRetention
-      type: object
-    InframonitoringtypesPostableHosts:
-      properties:
-        end:
-          format: int64
-          type: integer
-        filter:
-          $ref: '#/components/schemas/InframonitoringtypesHostFilter'
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        orderBy:
-          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-        start:
-          format: int64
-          type: integer
-      required:
-      - start
-      - end
-      - limit
-      type: object
-    InframonitoringtypesRequiredMetricsCheck:
-      properties:
-        missingMetrics:
-          items:
-            type: string
-          nullable: true
-          type: array
-      required:
-      - missingMetrics
-      type: object
-    InframonitoringtypesResponseType:
-      enum:
-      - list
-      - grouped_list
-      type: string
-    LlmpricingruletypesCacheMode:
-      enum:
-      - subtract
-      - additive
-      - unknown
-      type: string
-    LlmpricingruletypesGettablePricingRules:
-      properties:
-        items:
-          items:
-            $ref: '#/components/schemas/LlmpricingruletypesPricingRule'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        total:
-          type: integer
-      required:
-      - items
-      - total
-      - offset
-      - limit
-      type: object
-    LlmpricingruletypesPricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/LlmpricingruletypesCacheMode'
-        costCacheRead:
-          format: double
-          type: number
-        costCacheWrite:
-          format: double
-          type: number
-        costInput:
-          format: double
-          type: number
-        costOutput:
-          format: double
-          type: number
-        createdAt:
-          format: date-time
-          type: string
-        createdBy:
-          type: string
-        enabled:
-          type: boolean
-        id:
-          type: string
-        isOverride:
-          type: boolean
-        modelName:
-          type: string
-        modelPattern:
-          items:
-            type: string
-          nullable: true
-          type: array
-        orgId:
-          type: string
-        sourceId:
-          type: string
-        syncedAt:
-          format: date-time
-          nullable: true
-          type: string
-        unit:
-          $ref: '#/components/schemas/LlmpricingruletypesUnit'
-        updatedAt:
-          format: date-time
-          type: string
-        updatedBy:
-          type: string
-      required:
-      - id
-      - orgId
-      - modelName
-      - modelPattern
-      - unit
-      - cacheMode
-      - costInput
-      - costOutput
-      - costCacheRead
-      - costCacheWrite
-      - isOverride
-      - enabled
-      type: object
-    LlmpricingruletypesUnit:
-      enum:
-      - per_million_tokens
-      type: string
-    LlmpricingruletypesUpdatablePricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/LlmpricingruletypesCacheMode'
-        costCacheRead:
-          format: double
-          type: number
-        costCacheWrite:
-          format: double
-          type: number
-        costInput:
-          format: double
-          type: number
-        costOutput:
-          format: double
-          type: number
-        enabled:
-          type: boolean
-        id:
-          nullable: true
-          type: string
-        isOverride:
-          nullable: true
-          type: boolean
-        modelName:
-          type: string
-        modelPattern:
-          items:
-            type: string
-          nullable: true
-          type: array
-        sourceId:
-          nullable: true
-          type: string
-        unit:
-          $ref: '#/components/schemas/LlmpricingruletypesUnit'
-      required:
-      - modelName
-      - modelPattern
-      - unit
-      - cacheMode
-      - costInput
-      - costOutput
-      - costCacheRead
-      - costCacheWrite
-      - enabled
-      type: object
-    LlmpricingruletypesUpdatablePricingRulesRequest:
-      properties:
-        rules:
-          items:
-            $ref: '#/components/schemas/LlmpricingruletypesUpdatablePricingRule'
-          nullable: true
-          type: array
-      required:
-      - rules
-      type: object
-    LlmpricingruletypesUpdatablePricingRulesResponse:
-      properties:
-        inserted:
-          type: integer
-        preserved:
-          type: integer
-        updated:
-          type: integer
-      required:
-      - inserted
-      - updated
-      - preserved
-      type: object
     MetricsexplorertypesInspectMetricsRequest:
       properties:
         end:
@@ -7258,230 +6977,6 @@ paths:
       summary: Create bulk invite
       tags:
       - users
-  /api/v1/llm_pricing_rules:
-    get:
-      deprecated: false
-      description: Returns all LLM pricing rules for the authenticated org, with pagination.
-      operationId: ListLLMPricingRules
-      parameters:
-      - in: query
-        name: offset
-        schema:
-          type: integer
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/LlmpricingruletypesGettablePricingRules'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List pricing rules
-      tags:
-      - llm-pricing-rules
-    put:
-      deprecated: false
-      description: Single write endpoint used by both the user and the Zeus sync job.
-        Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true)
-        are fully preserved when the request does not provide isOverride; only synced_at
-        is stamped.
-      operationId: UpdateLLMPricingRules
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/LlmpricingruletypesUpdatablePricingRulesRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/LlmpricingruletypesUpdatablePricingRulesResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Bulk update pricing rules
-      tags:
-      - llm-pricing-rules
-  /api/v1/llm_pricing_rules/{id}:
-    delete:
-      deprecated: false
-      description: Hard-deletes a pricing rule. If auto-synced, it will be recreated
-        on the next sync cycle.
-      operationId: DeleteLLMPricingRule
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete a pricing rule
-      tags:
-      - llm-pricing-rules
-    get:
-      deprecated: false
-      description: Returns a single LLM pricing rule by ID.
-      operationId: GetLLMPricingRule
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/LlmpricingruletypesPricingRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get a pricing rule
-      tags:
-      - llm-pricing-rules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -10358,72 +9853,6 @@ paths:
       summary: Health check
       tags:
       - health
-  /api/v2/infra_monitoring/hosts:
-    post:
-      deprecated: false
-      description: 'Returns a paginated list of hosts with key infrastructure metrics:
-        CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute
-        load average. Each host includes its current status (active/inactive based
-        on metrics reported in the last 10 minutes) and metadata attributes (e.g.,
-        os.type). Supports filtering via a filter expression, filtering by host status,
-        custom groupBy to aggregate hosts by any attribute, ordering by any of the
-        five metrics, and pagination via offset/limit. The response type is ''list''
-        for the default host.name grouping or ''grouped_list'' for custom groupBy
-        keys. Also reports missing required metrics and whether the requested time
-        range falls before the data retention boundary.'
-      operationId: ListHosts
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/InframonitoringtypesPostableHosts'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/InframonitoringtypesHosts'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List Hosts for Infra Monitoring
-      tags:
-      - inframonitoring
   /api/v2/livez:
     get:
       deprecated: false

docs/contributing/go/integration.md

@@ -0,0 +1,216 @@
+# Integration Tests
+
+SigNoz uses integration tests to verify that different components work together correctly in a real environment. These tests run against actual services (ClickHouse, PostgreSQL, etc.) to ensure end-to-end functionality.
+
+## How to set up the integration test environment?
+
+### Prerequisites
+
+Before running integration tests, ensure you have the following installed:
+
+- Python 3.13+
+- [uv](https://docs.astral.sh/uv/getting-started/installation/)
+- Docker (for containerized services)
+
+### Initial Setup
+
+1. Navigate to the integration tests directory:
+```bash
+cd tests/integration
+```
+
+2. Install dependencies using uv:
+```bash
+uv sync
+```
+
+> **_NOTE:_**  the build backend could throw an error while installing `psycopg2`, pleae see https://www.psycopg.org/docs/install.html#build-prerequisites
+
+### Starting the Test Environment
+
+To spin up all the containers necessary for writing integration tests and keep them running:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/setup.py::test_setup
+```
+
+This command will:
+- Start all required services (ClickHouse, PostgreSQL, Zookeeper, etc.)
+- Keep containers running due to the `--reuse` flag
+- Verify that the setup is working correctly
+
+### Stopping the Test Environment
+
+When you're done writing integration tests, clean up the environment:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --teardown -s src/bootstrap/setup.py::test_teardown
+```
+
+This will destroy the running integration test setup and clean up resources.
+
+## Understanding the Integration Test Framework
+
+Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. Wiremock is used to spin up **test doubles** of other services.
+
+- **Why Python/pytest?** It's expressive, low-boilerplate, and has powerful fixture capabilities that make integration testing straightforward. Extensive libraries for HTTP requests, JSON handling, and data analysis (numpy) make it easier to test APIs and verify data
+- **Why testcontainers?** They let us spin up isolated dependencies that match our production environment without complex setup.
+- **Why wiremock?** Well maintained, documented and extensible.
+
+```
+.
+├── conftest.py
+├── fixtures
+│   ├── __init__.py
+│   ├── auth.py
+│   ├── clickhouse.py
+│   ├── fs.py
+│   ├── http.py
+│   ├── migrator.py
+│   ├── network.py
+│   ├── postgres.py
+│   ├── signoz.py
+│   ├── sql.py
+│   ├── sqlite.py
+│   ├── types.py
+│   └── zookeeper.py
+├── uv.lock
+├── pyproject.toml
+└── src
+    └── bootstrap
+        ├── __init__.py
+        ├── 01_database.py
+        ├── 02_register.py
+        └── 03_license.py
+```
+
+Each test suite follows some important principles:
+
+1. **Organization**: Test suites live under `src/` in self-contained packages. Fixtures (a pytest concept) live inside `fixtures/`.
+2. **Execution Order**: Files are prefixed with two-digit numbers (`01_`, `02_`, `03_`) to ensure sequential execution.
+3. **Time Constraints**: Each suite should complete in under 10 minutes (setup takes ~4 mins).
+
+### Test Suite Design
+
+Test suites should target functional domains or subsystems within SigNoz. When designing a test suite, consider these principles:
+
+- **Functional Cohesion**: Group tests around a specific capability or service boundary
+- **Data Flow**: Follow the path of data through related components
+- **Change Patterns**: Components frequently modified together should be tested together
+
+The exact boundaries for modules are intentionally flexible, allowing teams to define logical groupings based on their specific context and knowledge of the system.
+
+Eg: The **bootstrap** integration test suite validates core system functionality:
+
+- Database initialization
+- Version check
+
+Other test suites can be **pipelines, auth, querier.**
+
+## How to write an integration test?
+
+Now start writing an integration test. Create a new file `src/bootstrap/05_version.py` and paste the following:
+
+```python
+import requests
+
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_version(signoz: types.SigNoz) -> None:
+    response = requests.get(signoz.self.host_config.get("/api/v1/version"), timeout=2)
+    logger.info(response)
+```
+
+We have written a simple test which calls the `version` endpoint of the container in step 1. In **order to just run this function, run the following command:**
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/05_version.py::test_version
+```
+
+> Note: The `--reuse` flag is used to reuse the environment if it is already running. Always use this flag when writing and running integration tests. If you don't use this flag, the environment will be destroyed and recreated every time you run the test.
+
+Here's another example of how to write a more comprehensive integration test:
+
+```python
+from http import HTTPStatus
+import requests
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_user_registration(signoz: types.SigNoz) -> None:
+    """Test user registration functionality."""
+    response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/register"),
+        json={
+            "name": "testuser",
+            "orgId": "",
+            "orgName": "test.org",
+            "email": "test@example.com",
+            "password": "password123Z$",
+        },
+        timeout=2,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["setupCompleted"] is True
+```
+
+## How to run integration tests?
+
+### Running All Tests
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse src/
+```
+
+### Running Specific Test Categories
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse src/<suite>
+
+# Run querier tests
+uv run pytest --basetemp=./tmp/ -vv --reuse src/querier/
+# Run auth tests
+uv run pytest --basetemp=./tmp/ -vv --reuse src/auth/
+```
+
+### Running Individual Tests
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse src/<suite>/<file>.py::test_name
+
+# Run test_register in file 01_register.py in passwordauthn suite
+uv run pytest --basetemp=./tmp/ -vv --reuse src/passwordauthn/01_register.py::test_register
+```
+
+## How to configure different options for integration tests?
+
+Tests can be configured using pytest options:
+
+- `--sqlstore-provider` - Choose database provider (default: postgres)
+- `--sqlite-mode` - SQLite journal mode: `delete` or `wal` (default: delete). Only relevant when `--sqlstore-provider=sqlite`.
+- `--postgres-version` - PostgreSQL version (default: 15)
+- `--clickhouse-version` - ClickHouse version (default: 25.5.6)
+- `--zookeeper-version` - Zookeeper version (default: 3.7.1)
+
+Example:
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postgres-version=14 src/auth/
+```
+
+## What should I remember?
+
+- **Always use the `--reuse` flag** when setting up the environment to keep containers running
+- **Use the `--teardown` flag** when cleaning up to avoid resource leaks
+- **Follow the naming convention** with two-digit numeric prefixes (`01_`, `02_`) for test execution order
+- **Use proper timeouts** in HTTP requests to avoid hanging tests
+- **Clean up test data** between tests to avoid interference
+- **Use descriptive test names** that clearly indicate what is being tested
+- **Leverage fixtures** for common setup and authentication
+- **Test both success and failure scenarios** to ensure robust functionality
+- **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

docs/contributing/go/readme.md

@@ -15,6 +15,7 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Endpoint](endpoint.md) - HTTP endpoint patterns
 - [Flagger](flagger.md) - Feature flag patterns
 - [Handler](handler.md) - HTTP handler patterns
+- [Integration](integration.md) - Integration testing
 - [Provider](provider.md) - Dependency injection and provider patterns
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`

docs/contributing/tests/e2e.md

@@ -1,261 +0,0 @@
-# E2E Tests
-
-SigNoz uses end-to-end tests to verify the frontend works correctly against a real backend. These tests use Playwright to drive a real browser against a containerized SigNoz stack that pytest brings up — the same fixture graph integration tests use, with an extra HTTP seeder container for per-spec telemetry seeding.
-
-## How to set up the E2E test environment?
-
-### Prerequisites
-
-Before running E2E tests, ensure you have the following installed:
-
-- Python 3.13+
-- [uv](https://docs.astral.sh/uv/getting-started/installation/)
-- Docker (for containerized services)
-- Node 18+ and Yarn
-
-### Initial Setup
-
-1. Install Python deps for the shared tests project:
-```bash
-cd tests
-uv sync
-```
-
-2. Install Node deps and Playwright browsers:
-```bash
-cd e2e
-yarn install
-yarn install:browsers   # one-time Playwright browser install
-```
-
-### Starting the Test Environment
-
-To spin up the backend stack (SigNoz, ClickHouse, Postgres, Zookeeper, Zeus mock, gateway mock, seeder, migrator-with-web) and keep it running:
-
-```bash
-cd tests
-uv run pytest --basetemp=./tmp/ -vv --reuse --with-web \
-  e2e/bootstrap/setup.py::test_setup
-```
-
-This command will:
-- Bring up all containers via pytest fixtures
-- Register the admin user (`admin@integration.test` / `password123Z$`)
-- Apply the enterprise license (via a WireMock stub of Zeus) and dismiss the org-onboarding prompt so specs can navigate directly to feature pages
-- Start the HTTP seeder container (`tests/seeder/` — exposing `/telemetry/{traces,logs,metrics}` POST + DELETE)
-- Write backend coordinates to `tests/e2e/.env.local` (loaded by `playwright.config.ts` via dotenv)
-- Keep containers running via the `--reuse` flag
-
-The `--with-web` flag builds the frontend into the SigNoz container — required for E2E. The build takes ~4 mins on a cold start.
-
-### Stopping the Test Environment
-
-When you're done writing E2E tests, clean up the environment:
-
-```bash
-cd tests
-uv run pytest --basetemp=./tmp/ -vv --teardown \
-  e2e/bootstrap/setup.py::test_teardown
-```
-
-## Understanding the E2E Test Framework
-
-Playwright drives a real browser (Chromium / Firefox / WebKit) against the running SigNoz frontend. The backend is brought up by the same pytest fixture graph integration tests use, so both suites share one source of truth for container lifecycle, license seeding, and test-user accounts.
-
-- **Why Playwright?** First-class TypeScript support, network interception, automatic wait-for-visibility, built-in trace viewer that captures every request/response the UI triggers — so specs rarely need separate API probes alongside UI clicks.
-- **Why pytest for lifecycle?** The integration suite already owns container bring-up. Reusing it keeps the E2E stack exactly in sync with the integration stack and avoids a parallel lifecycle framework.
-- **Why a separate seeder container?** Per-spec telemetry seeding (traces / logs / metrics) needs a thin HTTP wrapper around the ClickHouse insert helpers so a browser spec can POST from inside the test. The seeder lives at `tests/seeder/`, is built from `tests/Dockerfile.seeder`, and reuses the same `fixtures/{traces,logs,metrics}.py` as integration tests.
-
-```
-tests/
-├── fixtures/                  # shared with integration (see integration.md)
-├── integration/               # pytest integration suite
-├── seeder/                    # standalone HTTP seeder container
-│   ├── __init__.py
-│   ├── Dockerfile
-│   └── server.py              # FastAPI app wrapping fixtures.{traces,logs,metrics}
-└── e2e/
-    ├── package.json
-    ├── playwright.config.ts   # loads .env + .env.local via dotenv
-    ├── .env.example           # staging-mode template
-    ├── .env.local             # generated by bootstrap/setup.py (gitignored)
-    ├── bootstrap/
-    │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── fixtures/
-    │   └── auth.ts            # authedPage Playwright fixture + per-worker storageState cache
-    ├── tests/                 # Playwright .spec.ts files, one dir per feature area
-    │   └── alerts/
-    │       └── alerts.spec.ts
-    └── artifacts/             # per-run output (gitignored)
-        ├── html/              # HTML reporter output
-        ├── json/              # JSON reporter output
-        └── results/           # per-test traces / screenshots / videos on failure
-```
-
-Each spec follows these principles:
-
-1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
-2. **Test titles use `TC-NN`**: `test('TC-01 alerts page — tabs render', ...)`. Preserves ordering at a glance and maps to external coverage tracking.
-3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. Reach for direct `page.request.*` only when the test's *purpose* is asserting a response contract (use `page.waitForResponse` on a UI click) or when a specific UI step is structurally flaky (e.g. Ant DatePicker calendar-cell indices) — and even then try UI first.
-4. **Self-contained state**: each spec creates what it needs and cleans up in `try/finally`. No global pre-seeding fixtures.
-
-## How to write an E2E test?
-
-Create a new file `tests/e2e/tests/alerts/smoke.spec.ts`:
-
-```typescript
-import { test, expect } from '../../fixtures/auth';
-
-test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
-  await page.goto('/alerts');
-  await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
-  await expect(page.getByRole('tab', { name: /configuration/i })).toBeVisible();
-});
-```
-
-The `authedPage` fixture (from `tests/e2e/fixtures/auth.ts`) gives you a `Page` whose browser context is already authenticated as the admin user. First use per worker triggers one login; the resulting `storageState` is held in memory and reused for later requests.
-
-To run just this test (assuming the stack is up via `test_setup`):
-
-```bash
-cd tests/e2e
-npx playwright test tests/alerts/smoke.spec.ts --project=chromium
-```
-
-Here's a more comprehensive example that exercises a CRUD flow via the UI:
-
-```typescript
-import { test, expect } from '../../fixtures/auth';
-
-test.describe.configure({ mode: 'serial' });
-
-test('TC-02 alerts list — create, toggle, delete', async ({ authedPage: page }) => {
-  await page.goto('/alerts?tab=AlertRules');
-  const name = 'smoke-rule';
-
-  // Seed via UI — click "New Alert", fill form, save.
-  await page.getByRole('button', { name: /new alert/i }).click();
-  await page.getByTestId('alert-name-input').fill(name);
-  // ... fill metric / threshold / save ...
-
-  // Find the row and exercise the action menu.
-  const row = page.locator('tr', { hasText: name });
-  await expect(row).toBeVisible();
-  await row.locator('[data-testid="alert-actions"] button').first().click();
-
-  // waitForResponse captures the network call the UI triggers — no parallel fetch needed.
-  const patchWait = page.waitForResponse(
-    (r) => r.url().includes('/rules/') && r.request().method() === 'PATCH',
-  );
-  await page.getByRole('menuitem').filter({ hasText: /^disable$/i }).click();
-  await patchWait;
-  await expect(row).toContainText(/disabled/i);
-});
-```
-
-### Locator priority
-
-1. `getByRole('button', { name: 'Submit' })`
-2. `getByLabel('Email')`
-3. `getByPlaceholder('...')`
-4. `getByText('...')`
-5. `getByTestId('...')`
-6. `locator('.ant-select')` — last resort (Ant Design dropdowns often have no semantic alternative)
-
-## How to run E2E tests?
-
-### Running All Tests
-
-With the stack already up, from `tests/e2e/`:
-
-```bash
-yarn test                 # headless, all projects
-```
-
-### Running Specific Projects
-
-```bash
-yarn test:chromium        # chromium only
-yarn test:firefox
-yarn test:webkit
-```
-
-### Running Specific Tests
-
-```bash
-cd tests/e2e
-
-# Single feature dir
-npx playwright test tests/alerts/ --project=chromium
-
-# Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
-
-# Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
-```
-
-### Iterative modes
-
-```bash
-yarn test:ui              # Playwright UI mode — watch + step through
-yarn test:headed          # headed browser
-yarn test:debug           # Playwright inspector, pause-on-breakpoint
-yarn codegen              # record-and-replay locator generation
-yarn report               # open the last HTML report (artifacts/html)
-```
-
-### Staging fallback
-
-Point `SIGNOZ_E2E_BASE_URL` at a remote env via `.env` — no local backend bring-up, no `.env.local` generated, Playwright hits the URL directly:
-
-```bash
-cd tests/e2e
-cp .env.example .env      # fill SIGNOZ_E2E_USERNAME / PASSWORD
-yarn test:staging
-```
-
-## How to configure different options for E2E tests?
-
-### Environment variables
-
-| Variable | Description |
-|---|---|
-| `SIGNOZ_E2E_BASE_URL` | Base URL the browser targets. Written by `bootstrap/setup.py` for local mode; set manually for staging. |
-| `SIGNOZ_E2E_USERNAME` | Admin email. Bootstrap writes `admin@integration.test`. |
-| `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
-| `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
-
-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
-
-### Playwright options
-
-The full `playwright.config.ts` is the source of truth. Common things to tweak:
-
-- `projects` — Chromium / Firefox / WebKit are enabled by default. Disable to speed up iteration.
-- `retries` — `2` on CI (`process.env.CI`), `0` locally.
-- `fullyParallel: true` — files run in parallel by worker; within a file, use `test.describe.configure({ mode: 'serial' })` if tests share list pages / mutate shared state.
-- `trace: 'on-first-retry'`, `screenshot: 'only-on-failure'`, `video: 'retain-on-failure'` — default diagnostic artifacts land in `artifacts/results/<test>/`.
-
-### Pytest options (bootstrap side)
-
-The same pytest flags integration tests expose work here, since E2E reuses the shared fixture graph:
-
-- `--reuse` — keep containers warm between runs (required for all iteration).
-- `--teardown` — tear everything down.
-- `--with-web` — build the frontend into the SigNoz container. **Required for E2E**; integration tests don't need it.
-- `--sqlstore-provider`, `--postgres-version`, `--clickhouse-version`, etc. — see `docs/contributing/integration.md`.
-
-## What should I remember?
-
-- **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build; you only want to pay that once.
-- **Don't teardown before setup.** `--reuse` correctly handles partially-set-up state, so chaining teardown → setup wastes time.
-- **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Drop to `page.request.*` only when the UI can't reach what you need.
-- **Use `page.waitForResponse` on UI clicks** to assert BE contracts — it still exercises the UI trigger path.
-- **Title every test `TC-NN <short description>`** — keeps the suite navigable and reportable.
-- **Split by resource, not by regression suite.** One spec per feature resource; cross-resource junction concerns (cascade-delete, linked-edit) get their own file.
-- **Use short descriptive resource names** (`alerts-list-rule`, `labels-rule`, `downtime-once`) — no timestamp disambiguation. Each test owns its resources and cleans up in `try/finally`.
-- **Never commit `test.only`** — a pre-commit check or CI runs with `forbidOnly: true`.
-- **Prefer explicit waits over `page.waitForTimeout(ms)`.** `await expect(locator).toBeVisible()` is always better than `waitForTimeout(5000)`.
-- **Unique test names won't save you from shared-tenant state.** When two tests hit the same list page, either serialize (`describe.configure({ mode: 'serial' })`) or isolate cleanup religiously.
-- **Artifacts go to `tests/e2e/artifacts/`** — HTML report at `artifacts/html`, traces at `artifacts/results/<test>/`. All gitignored; archive the dir in CI.

docs/contributing/tests/integration.md

@@ -1,251 +0,0 @@
-# Integration Tests
-
-SigNoz uses integration tests to verify that different components work together correctly in a real environment. These tests run against actual services (ClickHouse, PostgreSQL, SigNoz, Zeus mock, Keycloak, etc.) spun up as containers, so suites exercise the same code paths production does.
-
-## How to set up the integration test environment?
-
-### Prerequisites
-
-Before running integration tests, ensure you have the following installed:
-
-- Python 3.13+
-- [uv](https://docs.astral.sh/uv/getting-started/installation/)
-- Docker (for containerized services)
-
-### Initial Setup
-
-1. Navigate to the shared tests project:
-```bash
-cd tests
-```
-
-2. Install dependencies using uv:
-```bash
-uv sync
-```
-
-> **_NOTE:_** the build backend could throw an error while installing `psycopg2`, please see https://www.psycopg.org/docs/install.html#build-prerequisites
-
-### Starting the Test Environment
-
-To spin up all the containers necessary for writing integration tests and keep them running:
-
-```bash
-make py-test-setup
-```
-
-Under the hood this runs, from `tests/`:
-
-```bash
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/bootstrap/setup.py::test_setup
-```
-
-This command will:
-- Start all required services (ClickHouse, PostgreSQL, Zookeeper, SigNoz, Zeus mock, gateway mock)
-- Register an admin user
-- Keep containers running via the `--reuse` flag
-
-### Stopping the Test Environment
-
-When you're done writing integration tests, clean up the environment:
-
-```bash
-make py-test-teardown
-```
-
-Which runs:
-
-```bash
-uv run pytest --basetemp=./tmp/ -vv --teardown integration/bootstrap/setup.py::test_teardown
-```
-
-This destroys the running integration test setup and cleans up resources.
-
-## Understanding the Integration Test Framework
-
-Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. WireMock is used to spin up **test doubles** of external services (Zeus cloud API, gateway, etc.).
-
-- **Why Python/pytest?** It's expressive, low-boilerplate, and has powerful fixture capabilities that make integration testing straightforward. Extensive libraries for HTTP requests, JSON handling, and data analysis (numpy) make it easier to test APIs and verify data.
-- **Why testcontainers?** They let us spin up isolated dependencies that match our production environment without complex setup.
-- **Why WireMock?** Well maintained, documented, and extensible.
-
-```
-tests/
-├── conftest.py              # pytest_plugins registration
-├── pyproject.toml
-├── uv.lock
-├── fixtures/                # shared fixture library (flat package)
-│   ├── __init__.py
-│   ├── auth.py              # admin/editor/viewer users, tokens, license
-│   ├── clickhouse.py
-│   ├── http.py              # WireMock helpers
-│   ├── keycloak.py          # IdP container
-│   ├── postgres.py
-│   ├── signoz.py            # SigNoz-backend container
-│   ├── sql.py
-│   ├── types.py
-│   └── ...                  # logs, metrics, traces, alerts, dashboards, ...
-├── integration/
-│   ├── bootstrap/
-│   │   └── setup.py         # test_setup / test_teardown
-│   ├── testdata/            # JSON / JSONL / YAML inputs per suite
-│   └── tests/               # one directory per feature area
-│       ├── alerts/
-│       │   ├── 01_*.py      # numbered suite files
-│       │   └── conftest.py  # optional suite-local fixtures
-│       ├── auditquerier/
-│       ├── cloudintegrations/
-│       ├── dashboard/
-│       ├── passwordauthn/
-│       ├── querier/
-│       └── ...
-└── e2e/                     # Playwright suite (see docs/contributing/e2e.md)
-```
-
-Each test suite follows these principles:
-
-1. **Organization**: Suites live under `tests/integration/tests/` in self-contained packages. Shared fixtures live in the top-level `tests/fixtures/` package so the e2e tree can reuse them.
-2. **Execution Order**: Files are prefixed with two-digit numbers (`01_`, `02_`, `03_`) to ensure sequential execution when tests depend on ordering.
-3. **Time Constraints**: Each suite should complete in under 10 minutes (setup takes ~4 mins).
-
-### Test Suite Design
-
-Test suites should target functional domains or subsystems within SigNoz. When designing a test suite, consider these principles:
-
-- **Functional Cohesion**: Group tests around a specific capability or service boundary
-- **Data Flow**: Follow the path of data through related components
-- **Change Patterns**: Components frequently modified together should be tested together
-
-The exact boundaries for suites are intentionally flexible, allowing contributors to define logical groupings based on their domain knowledge. Current suites cover alerts, audit querier, callback authn, cloud integrations, dashboards, ingestion keys, logs pipelines, password authn, preferences, querier, raw export data, roles, root user, service accounts, and TTL.
-
-## How to write an integration test?
-
-Now start writing an integration test. Create a new file `tests/integration/tests/bootstrap/01_version.py` and paste the following:
-
-```python
-import requests
-
-from fixtures import types
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-
-def test_version(signoz: types.SigNoz) -> None:
-    response = requests.get(
-        signoz.self.host_configs["8080"].get("/api/v1/version"),
-        timeout=2,
-    )
-    logger.info(response)
-```
-
-We have written a simple test which calls the `version` endpoint of the SigNoz backend. **To run just this function, run the following command:**
-
-```bash
-cd tests
-uv run pytest --basetemp=./tmp/ -vv --reuse \
-  integration/tests/bootstrap/01_version.py::test_version
-```
-
-> **Note:** The `--reuse` flag is used to reuse the environment if it is already running. Always use this flag when writing and running integration tests. Without it the environment is destroyed and recreated every run.
-
-Here's another example of how to write a more comprehensive integration test:
-
-```python
-from http import HTTPStatus
-import requests
-from fixtures import types
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-
-def test_user_registration(signoz: types.SigNoz) -> None:
-    """Test user registration functionality."""
-    response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/register"),
-        json={
-            "name": "testuser",
-            "orgId": "",
-            "orgName": "test.org",
-            "email": "test@example.com",
-            "password": "password123Z$",
-        },
-        timeout=2,
-    )
-
-    assert response.status_code == HTTPStatus.OK
-    assert response.json()["setupCompleted"] is True
-```
-
-Test inputs (JSON fixtures, expected payloads) go under `tests/integration/testdata/<suite>/` and are loaded via `fixtures.fs.get_testdata_file_path`.
-
-## How to run integration tests?
-
-### Running All Tests
-
-```bash
-make py-test
-```
-
-Which runs:
-
-```bash
-uv run pytest --basetemp=./tmp/ -vv integration/tests/
-```
-
-### Running Specific Test Categories
-
-```bash
-cd tests
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/<suite>/
-
-# Run querier tests
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/querier/
-# Run passwordauthn tests
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/passwordauthn/
-```
-
-### Running Individual Tests
-
-```bash
-uv run pytest --basetemp=./tmp/ -vv --reuse \
-  integration/tests/<suite>/<file>.py::test_name
-
-# Run test_register in 01_register.py in the passwordauthn suite
-uv run pytest --basetemp=./tmp/ -vv --reuse \
-  integration/tests/passwordauthn/01_register.py::test_register
-```
-
-## How to configure different options for integration tests?
-
-Tests can be configured using pytest options:
-
-- `--sqlstore-provider` — Choose the SQL store provider (default: `postgres`)
-- `--sqlite-mode` — SQLite journal mode: `delete` or `wal` (default: `delete`). Only relevant when `--sqlstore-provider=sqlite`.
-- `--postgres-version` — PostgreSQL version (default: `15`)
-- `--clickhouse-version` — ClickHouse version (default: `25.5.6`)
-- `--zookeeper-version` — Zookeeper version (default: `3.7.1`)
-- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.2`)
-
-Example:
-
-```bash
-uv run pytest --basetemp=./tmp/ -vv --reuse \
-  --sqlstore-provider=postgres --postgres-version=14 \
-  integration/tests/passwordauthn/
-```
-
-## What should I remember?
-
-- **Always use the `--reuse` flag** when setting up the environment or running tests to keep containers warm. Without it every run rebuilds the stack (~4 mins).
-- **Use the `--teardown` flag** only when cleaning up — mixing `--teardown` with `--reuse` is a contradiction.
-- **Do not pre-emptively teardown before setup.** If the stack is partially up, `--reuse` picks up from wherever it is. `make py-test-teardown` then `make py-test-setup` wastes minutes.
-- **Follow the naming convention** with two-digit numeric prefixes (`01_`, `02_`) for ordered test execution within a suite.
-- **Use proper timeouts** in HTTP requests to avoid hanging tests (`timeout=5` is typical).
-- **Clean up test data** between tests in the same suite to avoid interference — or rely on a fresh SigNoz container if you need full isolation.
-- **Use descriptive test names** that clearly indicate what is being tested.
-- **Leverage fixtures** for common setup. The shared fixture package is at `tests/fixtures/` — reuse before adding new ones.
-- **Test both success and failure scenarios** (4xx / 5xx paths) to ensure robust functionality.
-- **Run `make py-fmt` and `make py-lint` before committing** Python changes — black + isort + autoflake + pylint.
-- **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

ee/zeus/httpzeus/provider.go

@@ -7,7 +7,6 @@ import (
 	"io"
 	"net/http"
 	"net/url"
-	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
@@ -38,7 +37,6 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		providerSettings.MeterProvider,
 		client.WithRequestResponseLog(true),
 		client.WithRetryCount(3),
-		client.WithTimeout(30*time.Second),
 	)
 	if err != nil {
 		return nil, err

frontend/package.json

@@ -52,7 +52,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.10",
+    "@signozhq/ui": "0.0.9",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -266,4 +266,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

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

@@ -1,106 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import { useMutation } from 'react-query';
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-
-import type {
-	InframonitoringtypesPostableHostsDTO,
-	ListHosts200,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
-
-/**
- * Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports missing required metrics and whether the requested time range falls before the data retention boundary.
- * @summary List Hosts for Infra Monitoring
- */
-export const listHosts = (
-	inframonitoringtypesPostableHostsDTO: BodyType<InframonitoringtypesPostableHostsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListHosts200>({
-		url: `/api/v2/infra_monitoring/hosts`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: inframonitoringtypesPostableHostsDTO,
-		signal,
-	});
-};
-
-export const getListHostsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listHosts>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableHostsDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof listHosts>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableHostsDTO> },
-	TContext
-> => {
-	const mutationKey = ['listHosts'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof listHosts>>,
-		{ data: BodyType<InframonitoringtypesPostableHostsDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return listHosts(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ListHostsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof listHosts>>
->;
-export type ListHostsMutationBody =
-	BodyType<InframonitoringtypesPostableHostsDTO>;
-export type ListHostsMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List Hosts for Infra Monitoring
- */
-export const useListHosts = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listHosts>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableHostsDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof listHosts>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableHostsDTO> },
-	TContext
-> => {
-	const mutationOptions = getListHostsMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/generated/services/llm-pricing-rules/index.ts

@@ -1,399 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	DeleteLLMPricingRulePathParameters,
-	GetLLMPricingRule200,
-	GetLLMPricingRulePathParameters,
-	ListLLMPricingRules200,
-	ListLLMPricingRulesParams,
-	LlmpricingruletypesUpdatablePricingRulesRequestDTO,
-	RenderErrorResponseDTO,
-	UpdateLLMPricingRules200,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
-
-/**
- * Returns all LLM pricing rules for the authenticated org, with pagination.
- * @summary List pricing rules
- */
-export const listLLMPricingRules = (
-	params?: ListLLMPricingRulesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListLLMPricingRules200>({
-		url: `/api/v1/llm_pricing_rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListLLMPricingRulesQueryKey = (
-	params?: ListLLMPricingRulesParams,
-) => {
-	return [`/api/v1/llm_pricing_rules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListLLMPricingRulesQueryOptions = <
-	TData = Awaited<ReturnType<typeof listLLMPricingRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListLLMPricingRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listLLMPricingRules>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListLLMPricingRulesQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listLLMPricingRules>>
-	> = ({ signal }) => listLLMPricingRules(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listLLMPricingRules>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListLLMPricingRulesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listLLMPricingRules>>
->;
-export type ListLLMPricingRulesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List pricing rules
- */
-
-export function useListLLMPricingRules<
-	TData = Awaited<ReturnType<typeof listLLMPricingRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListLLMPricingRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listLLMPricingRules>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListLLMPricingRulesQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List pricing rules
- */
-export const invalidateListLLMPricingRules = async (
-	queryClient: QueryClient,
-	params?: ListLLMPricingRulesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListLLMPricingRulesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Single write endpoint used by both the user and the Zeus sync job. Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true) are fully preserved when the request does not provide isOverride; only synced_at is stamped.
- * @summary Bulk update pricing rules
- */
-export const updateLLMPricingRules = (
-	llmpricingruletypesUpdatablePricingRulesRequestDTO: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO>,
-) => {
-	return GeneratedAPIInstance<UpdateLLMPricingRules200>({
-		url: `/api/v1/llm_pricing_rules`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: llmpricingruletypesUpdatablePricingRulesRequestDTO,
-	});
-};
-
-export const getUpdateLLMPricingRulesMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateLLMPricingRules>>,
-		TError,
-		{ data: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateLLMPricingRules>>,
-	TError,
-	{ data: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateLLMPricingRules'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateLLMPricingRules>>,
-		{ data: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateLLMPricingRules(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateLLMPricingRulesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateLLMPricingRules>>
->;
-export type UpdateLLMPricingRulesMutationBody =
-	BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO>;
-export type UpdateLLMPricingRulesMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Bulk update pricing rules
- */
-export const useUpdateLLMPricingRules = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateLLMPricingRules>>,
-		TError,
-		{ data: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateLLMPricingRules>>,
-	TError,
-	{ data: BodyType<LlmpricingruletypesUpdatablePricingRulesRequestDTO> },
-	TContext
-> => {
-	const mutationOptions = getUpdateLLMPricingRulesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Hard-deletes a pricing rule. If auto-synced, it will be recreated on the next sync cycle.
- * @summary Delete a pricing rule
- */
-export const deleteLLMPricingRule = ({
-	id,
-}: DeleteLLMPricingRulePathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/llm_pricing_rules/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteLLMPricingRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteLLMPricingRule>>,
-		TError,
-		{ pathParams: DeleteLLMPricingRulePathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteLLMPricingRule>>,
-	TError,
-	{ pathParams: DeleteLLMPricingRulePathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteLLMPricingRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteLLMPricingRule>>,
-		{ pathParams: DeleteLLMPricingRulePathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteLLMPricingRule(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteLLMPricingRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteLLMPricingRule>>
->;
-
-export type DeleteLLMPricingRuleMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete a pricing rule
- */
-export const useDeleteLLMPricingRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteLLMPricingRule>>,
-		TError,
-		{ pathParams: DeleteLLMPricingRulePathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteLLMPricingRule>>,
-	TError,
-	{ pathParams: DeleteLLMPricingRulePathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteLLMPricingRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Returns a single LLM pricing rule by ID.
- * @summary Get a pricing rule
- */
-export const getLLMPricingRule = (
-	{ id }: GetLLMPricingRulePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetLLMPricingRule200>({
-		url: `/api/v1/llm_pricing_rules/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetLLMPricingRuleQueryKey = ({
-	id,
-}: GetLLMPricingRulePathParameters) => {
-	return [`/api/v1/llm_pricing_rules/${id}`] as const;
-};
-
-export const getGetLLMPricingRuleQueryOptions = <
-	TData = Awaited<ReturnType<typeof getLLMPricingRule>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetLLMPricingRulePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getLLMPricingRule>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetLLMPricingRuleQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getLLMPricingRule>>
-	> = ({ signal }) => getLLMPricingRule({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getLLMPricingRule>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetLLMPricingRuleQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getLLMPricingRule>>
->;
-export type GetLLMPricingRuleQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get a pricing rule
- */
-
-export function useGetLLMPricingRule<
-	TData = Awaited<ReturnType<typeof getLLMPricingRule>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetLLMPricingRulePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getLLMPricingRule>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetLLMPricingRuleQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get a pricing rule
- */
-export const invalidateGetLLMPricingRule = async (
-	queryClient: QueryClient,
-	{ id }: GetLLMPricingRulePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetLLMPricingRuleQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -3053,313 +3053,6 @@ export interface GlobaltypesTokenizerConfigDTO {
 	enabled?: boolean;
 }
 
-export interface InframonitoringtypesHostFilterDTO {
-	/**
-	 * @type string
-	 */
-	expression?: string;
-	filterByStatus?: InframonitoringtypesHostStatusDTO;
-}
-
-/**
- * @nullable
- */
-export type InframonitoringtypesHostRecordDTOMeta = {
-	[key: string]: unknown;
-} | null;
-
-export interface InframonitoringtypesHostRecordDTO {
-	/**
-	 * @type integer
-	 */
-	activeHostCount: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	cpu: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	diskUsage: number;
-	/**
-	 * @type string
-	 */
-	hostName: string;
-	/**
-	 * @type integer
-	 */
-	inactiveHostCount: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	load15: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	memory: number;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	meta: InframonitoringtypesHostRecordDTOMeta;
-	status: InframonitoringtypesHostStatusDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	wait: number;
-}
-
-export enum InframonitoringtypesHostStatusDTO {
-	active = 'active',
-	inactive = 'inactive',
-	'' = '',
-}
-export interface InframonitoringtypesHostsDTO {
-	/**
-	 * @type boolean
-	 */
-	endTimeBeforeRetention: boolean;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	records: InframonitoringtypesHostRecordDTO[] | null;
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
-	/**
-	 * @type integer
-	 */
-	total: number;
-	type: InframonitoringtypesResponseTypeDTO;
-	warning?: Querybuildertypesv5QueryWarnDataDTO;
-}
-
-export interface InframonitoringtypesPostableHostsDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	end: number;
-	filter?: InframonitoringtypesHostFilterDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	orderBy?: Querybuildertypesv5OrderByDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	start: number;
-}
-
-export interface InframonitoringtypesRequiredMetricsCheckDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	missingMetrics: string[] | null;
-}
-
-export enum InframonitoringtypesResponseTypeDTO {
-	list = 'list',
-	grouped_list = 'grouped_list',
-}
-export enum LlmpricingruletypesCacheModeDTO {
-	subtract = 'subtract',
-	additive = 'additive',
-	unknown = 'unknown',
-}
-export interface LlmpricingruletypesGettablePricingRulesDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	items: LlmpricingruletypesPricingRuleDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset: number;
-	/**
-	 * @type integer
-	 */
-	total: number;
-}
-
-export interface LlmpricingruletypesPricingRuleDTO {
-	cacheMode: LlmpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheRead: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheWrite: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costInput: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costOutput: number;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type boolean
-	 */
-	isOverride: boolean;
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	modelPattern: string[] | null;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	sourceId?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	syncedAt?: Date | null;
-	unit: LlmpricingruletypesUnitDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export enum LlmpricingruletypesUnitDTO {
-	per_million_tokens = 'per_million_tokens',
-}
-export interface LlmpricingruletypesUpdatablePricingRuleDTO {
-	cacheMode: LlmpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheRead: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheWrite: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costInput: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costOutput: number;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 * @nullable true
-	 */
-	id?: string | null;
-	/**
-	 * @type boolean
-	 * @nullable true
-	 */
-	isOverride?: boolean | null;
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	modelPattern: string[] | null;
-	/**
-	 * @type string
-	 * @nullable true
-	 */
-	sourceId?: string | null;
-	unit: LlmpricingruletypesUnitDTO;
-}
-
-export interface LlmpricingruletypesUpdatablePricingRulesRequestDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	rules: LlmpricingruletypesUpdatablePricingRuleDTO[] | null;
-}
-
-export interface LlmpricingruletypesUpdatablePricingRulesResponseDTO {
-	/**
-	 * @type integer
-	 */
-	inserted: number;
-	/**
-	 * @type integer
-	 */
-	preserved: number;
-	/**
-	 * @type integer
-	 */
-	updated: number;
-}
-
 export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -6505,49 +6198,6 @@ export type CreateInvite201 = {
 	status: string;
 };
 
-export type ListLLMPricingRulesParams = {
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-};
-
-export type ListLLMPricingRules200 = {
-	data: LlmpricingruletypesGettablePricingRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateLLMPricingRules200 = {
-	data: LlmpricingruletypesUpdatablePricingRulesResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteLLMPricingRulePathParameters = {
-	id: string;
-};
-export type GetLLMPricingRulePathParameters = {
-	id: string;
-};
-export type GetLLMPricingRule200 = {
-	data: LlmpricingruletypesPricingRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array
@@ -6988,14 +6638,6 @@ export type Healthz503 = {
 	status: string;
 };
 
-export type ListHosts200 = {
-	data: InframonitoringtypesHostsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Livez200 = {
 	data: FactoryResponseDTO;
 	/**

frontend/src/api/thirdPartyApis/listOverview.ts

@@ -6,20 +6,15 @@ import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';
 
 const listOverview = async (
 	props: Props,
-	signal?: AbortSignal,
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await axios.post(
-			`/third-party-apis/overview/list`,
-			{
-				start,
-				end,
-				show_ip: showIp,
-				filter,
-			},
-			{ signal },
-		);
+		const response = await axios.post(`/third-party-apis/overview/list`, {
+			start,
+			end,
+			show_ip: showIp,
+			filter,
+		});
 
 		return {
 			httpStatusCode: response.status,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -0,0 +1,126 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useStore } from 'zustand';
+
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+import { QuerySearchV2Context } from './context';
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+import { createExpressionStore } from './QuerySearchV2.store';
+
+export interface QuerySearchV2ProviderProps {
+	queryParamKey: string;
+	initialExpression?: string;
+	/**
+	 * @default false
+	 */
+	persistOnUnmount?: boolean;
+	children: ReactNode;
+}
+
+/**
+ * Provider component that creates a scoped zustand store and exposes
+ * expression state to children via context.
+ */
+export function QuerySearchV2Provider({
+	initialExpression = '',
+	persistOnUnmount = false,
+	queryParamKey,
+	children,
+}: QuerySearchV2ProviderProps): JSX.Element {
+	const storeRef = useRef(createExpressionStore());
+	const store = storeRef.current;
+
+	const [urlExpression, setUrlExpression] = useQueryState(
+		queryParamKey,
+		parseAsString,
+	);
+
+	const committedExpression = useStore(store, (s) => s.committedExpression);
+	const setInputExpression = useStore(store, (s) => s.setInputExpression);
+	const commitExpression = useStore(store, (s) => s.commitExpression);
+	const initializeFromUrl = useStore(store, (s) => s.initializeFromUrl);
+	const resetExpression = useStore(store, (s) => s.resetExpression);
+
+	const isInitialized = useRef(false);
+	useEffect(() => {
+		if (!isInitialized.current && urlExpression) {
+			const cleanedExpression = getUserExpressionFromCombined(
+				initialExpression,
+				urlExpression,
+			);
+			initializeFromUrl(cleanedExpression);
+			isInitialized.current = true;
+		}
+	}, [urlExpression, initialExpression, initializeFromUrl]);
+
+	useEffect(() => {
+		if (isInitialized.current || !urlExpression) {
+			setUrlExpression(committedExpression || null);
+		}
+	}, [committedExpression, setUrlExpression, urlExpression]);
+
+	useEffect(() => {
+		return (): void => {
+			if (!persistOnUnmount) {
+				setUrlExpression(null);
+				resetExpression();
+			}
+		};
+	}, [persistOnUnmount, setUrlExpression, resetExpression]);
+
+	const handleChange = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			setInputExpression(userOnly);
+		},
+		[initialExpression, setInputExpression],
+	);
+
+	const handleRun = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			commitExpression(userOnly);
+		},
+		[initialExpression, commitExpression],
+	);
+
+	const combinedExpression = useMemo(
+		() => combineInitialAndUserExpression(initialExpression, committedExpression),
+		[initialExpression, committedExpression],
+	);
+
+	const contextValue = useMemo<QuerySearchV2ContextValue>(
+		() => ({
+			expression: combinedExpression,
+			userExpression: committedExpression,
+			initialExpression,
+			querySearchProps: {
+				initialExpression: initialExpression.trim() ? initialExpression : undefined,
+				onChange: handleChange,
+				onRun: handleRun,
+			},
+		}),
+		[
+			combinedExpression,
+			committedExpression,
+			initialExpression,
+			handleChange,
+			handleRun,
+		],
+	);
+
+	return (
+		<QuerySearchV2Context.Provider value={contextValue}>
+			{children}
+		</QuerySearchV2Context.Provider>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.store.ts

@@ -0,0 +1,60 @@
+import { createStore, StoreApi } from 'zustand';
+
+export type QuerySearchV2Store = {
+	/**
+	 * User-typed expression (local state, updates on typing)
+	 */
+	inputExpression: string;
+	/**
+	 * Committed expression (synced to URL, updates on submit)
+	 */
+	committedExpression: string;
+	setInputExpression: (expression: string) => void;
+	commitExpression: (expression: string) => void;
+	resetExpression: () => void;
+	initializeFromUrl: (urlExpression: string) => void;
+};
+
+export interface QuerySearchProps {
+	initialExpression: string | undefined;
+	onChange: (expression: string) => void;
+	onRun: (expression: string) => void;
+}
+
+export interface QuerySearchV2ContextValue {
+	/**
+	 * Combined expression: "initialExpression AND (userExpression)"
+	 */
+	expression: string;
+	userExpression: string;
+	initialExpression: string;
+	querySearchProps: QuerySearchProps;
+}
+
+export function createExpressionStore(): StoreApi<QuerySearchV2Store> {
+	return createStore<QuerySearchV2Store>((set) => ({
+		inputExpression: '',
+		committedExpression: '',
+		setInputExpression: (expression: string): void => {
+			set({ inputExpression: expression });
+		},
+		commitExpression: (expression: string): void => {
+			set({
+				inputExpression: expression,
+				committedExpression: expression,
+			});
+		},
+		resetExpression: (): void => {
+			set({
+				inputExpression: '',
+				committedExpression: '',
+			});
+		},
+		initializeFromUrl: (urlExpression: string): void => {
+			set({
+				inputExpression: urlExpression,
+				committedExpression: urlExpression,
+			});
+		},
+	}));
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/QuerySearchExpressionProvider.test.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useQuerySearchV2Context } from '../context';
+import {
+	QuerySearchV2Provider,
+	QuerySearchV2ProviderProps,
+} from '../QuerySearchV2.provider';
+
+const mockSetQueryState = jest.fn();
+let mockUrlValue: string | null = null;
+
+jest.mock('nuqs', () => ({
+	parseAsString: {},
+	useQueryState: jest.fn(() => [mockUrlValue, mockSetQueryState]),
+}));
+
+function createWrapper(
+	props: Partial<QuerySearchV2ProviderProps> = {},
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QuerySearchV2Provider queryParamKey="testExpression" {...props}>
+				{children}
+			</QuerySearchV2Provider>
+		);
+	};
+}
+
+describe('QuerySearchExpressionProvider', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlValue = null;
+	});
+
+	it('should provide initial context values', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.expression).toBe('');
+		expect(result.current.userExpression).toBe('');
+		expect(result.current.initialExpression).toBe('');
+	});
+
+	it('should combine initialExpression with userExpression', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'k8s.pod.name = "my-pod"' }),
+		});
+
+		expect(result.current.expression).toBe('k8s.pod.name = "my-pod"');
+		expect(result.current.initialExpression).toBe('k8s.pod.name = "my-pod"');
+
+		act(() => {
+			result.current.querySearchProps.onChange('service = "api"');
+		});
+		act(() => {
+			result.current.querySearchProps.onRun('service = "api"');
+		});
+
+		expect(result.current.expression).toBe(
+			'k8s.pod.name = "my-pod" AND (service = "api")',
+		);
+		expect(result.current.userExpression).toBe('service = "api"');
+	});
+
+	it('should provide querySearchProps with correct callbacks', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'initial' }),
+		});
+
+		expect(result.current.querySearchProps.initialExpression).toBe('initial');
+		expect(typeof result.current.querySearchProps.onChange).toBe('function');
+		expect(typeof result.current.querySearchProps.onRun).toBe('function');
+	});
+
+	it('should initialize from URL value on mount', () => {
+		mockUrlValue = 'status = 500';
+
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.userExpression).toBe('status = 500');
+		expect(result.current.expression).toBe('status = 500');
+	});
+
+	it('should throw error when used outside provider', () => {
+		expect(() => {
+			renderHook(() => useQuerySearchV2Context());
+		}).toThrow(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/store.test.ts

@@ -0,0 +1,61 @@
+import { createExpressionStore } from '../QuerySearchV2.store';
+
+describe('createExpressionStore', () => {
+	it('should create a store with initial state', () => {
+		const store = createExpressionStore();
+		const state = store.getState();
+
+		expect(state.inputExpression).toBe('');
+		expect(state.committedExpression).toBe('');
+	});
+
+	it('should update inputExpression via setInputExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should update both expressions via commitExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('service.name = "api"');
+	});
+
+	it('should reset all state via resetExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+		store.getState().resetExpression();
+
+		expect(store.getState().inputExpression).toBe('');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should initialize from URL value', () => {
+		const store = createExpressionStore();
+
+		store.getState().initializeFromUrl('status = 500');
+
+		expect(store.getState().inputExpression).toBe('status = 500');
+		expect(store.getState().committedExpression).toBe('status = 500');
+	});
+
+	it('should create isolated store instances', () => {
+		const store1 = createExpressionStore();
+		const store2 = createExpressionStore();
+
+		store1.getState().setInputExpression('expr1');
+		store2.getState().setInputExpression('expr2');
+
+		expect(store1.getState().inputExpression).toBe('expr1');
+		expect(store2.getState().inputExpression).toBe('expr2');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/context.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line no-restricted-imports -- React Context required for scoped store pattern
+import { createContext, useContext } from 'react';
+
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+
+export const QuerySearchV2Context = createContext<QuerySearchV2ContextValue | null>(
+	null,
+);
+
+export function useQuerySearchV2Context(): QuerySearchV2ContextValue {
+	const context = useContext(QuerySearchV2Context);
+	if (!context) {
+		throw new Error(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	}
+	return context;
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/index.ts

@@ -0,0 +1,8 @@
+export { useQuerySearchV2Context } from './context';
+export type { QuerySearchV2ProviderProps } from './QuerySearchV2.provider';
+export { QuerySearchV2Provider } from './QuerySearchV2.provider';
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2Store,
+} from './QuerySearchV2.store';

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

@@ -13,6 +13,13 @@
 		display: flex;
 		flex-direction: row;
 
+		.query-search-initial-scope-label {
+			position: absolute;
+			left: 8px;
+			top: 10px;
+			z-index: 10;
+		}
+
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -47,6 +54,10 @@
 				}
 			}
 		}
+
+		&.hasInitialExpression .cm-editor .cm-content {
+			padding-left: 22px !important;
+		}
 	}
 
 	.cm-editor {
@@ -62,7 +73,6 @@
 			border-radius: 2px;
 			border: 1px solid var(--l1-border);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
 
 			&:focus-within {
 				border-color: var(--l1-border);

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,6 +47,7 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
+import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -85,6 +86,8 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
+	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
+	initialExpression?: string;
 }
 
 function QuerySearch({
@@ -96,6 +99,7 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
+	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -112,18 +116,26 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
-		try {
-			const validationResponse = validateQuery(newExpression);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process query',
-				errors: [error as IDetailedError],
-			});
-		}
-	}, []);
+	const isScopedFilter = initialExpression !== undefined;
+
+	const validateExpressionForEditor = useCallback(
+		(editorDoc: string): void => {
+			const toValidate = isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
+				: editorDoc;
+			try {
+				const validationResponse = validateQuery(toValidate);
+				setValidation(validationResponse);
+			} catch (error) {
+				setValidation({
+					isValid: false,
+					message: 'Failed to process query',
+					errors: [error as IDetailedError],
+				});
+			}
+		},
+		[initialExpression, isScopedFilter],
+	);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -165,6 +177,8 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
+	const prevQueryDataExpressionRef = useRef<string | undefined>();
+
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -173,13 +187,22 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
+			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// Do not update codemirror editor if the expression is the same
-			if (newExpression !== currentExpression && !isFocused) {
+			// Only sync editor when queryData.filter?.expression actually changed from external source
+			// Not when focus changed (which would reset uncommitted user input)
+			const queryDataExpressionChanged = prevExpression !== newExpression;
+			prevQueryDataExpressionRef.current = newExpression;
+
+			if (
+				queryDataExpressionChanged &&
+				newExpression !== currentExpression &&
+				!isFocused
+			) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
-				}
+			}
+			if (!isFocused) {
+				validateExpressionForEditor(currentExpression);
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -286,7 +309,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions(Array.from(merged.values()));
+				setKeySuggestions([...merged.values()]);
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -339,7 +362,7 @@ function QuerySearch({
 		// If value contains single quotes, escape them and wrap in single quotes
 		if (value.includes("'")) {
 			// Replace single quotes with escaped single quotes
-			const escapedValue = value.replace(/'/g, "\\'");
+			const escapedValue = value.replaceAll(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -616,7 +639,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		validateExpressionForEditor(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -634,7 +657,6 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
-		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -899,12 +921,12 @@ function QuerySearch({
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
 			if (queryContext.queryPairs && queryContext.queryPairs.length > 0) {
-				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
+				const usedKeys = new Set(queryContext.queryPairs.map((pair) => pair.key));
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.includes(option.label) ? -10 : 10,
+					boost: usedKeys.has(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1319,6 +1341,19 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
+				{isScopedFilter ? (
+					<Tooltip title={initialExpression || ''} placement="left">
+						<div className="query-search-initial-scope-label">
+							<Filter
+								size={14}
+								style={{
+									opacity: 0.9,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+								}}
+							/>
+						</div>
+					</Tooltip>
+				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1358,6 +1393,7 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
+						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1392,7 +1428,12 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											const user = getCurrentExpression();
+											onRun(
+												isScopedFilter
+													? combineInitialAndUserExpression(initialExpression ?? '', user)
+													: user,
+											);
 										}
 										return true;
 									},
@@ -1557,6 +1598,7 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
+	initialExpression: undefined,
 };
 
 export default QuerySearch;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.ts

@@ -0,0 +1,58 @@
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+
+describe('entityLogsExpression', () => {
+	describe('combineInitialAndUserExpression', () => {
+		it('returns user when initial is empty', () => {
+			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
+				'body contains error',
+			);
+		});
+
+		it('returns initial when user is empty', () => {
+			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
+				'k8s.pod.name = "x"',
+			);
+		});
+
+		it('wraps user in parentheses with AND', () => {
+			expect(
+				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
+			).toBe('k8s.pod.name = "x" AND (body = "a")');
+		});
+	});
+
+	describe('getUserExpressionFromCombined', () => {
+		it('returns empty when combined equals initial', () => {
+			expect(
+				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
+			).toBe('');
+		});
+
+		it('extracts user from wrapped form', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND (body = "a")',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('extracts user from legacy AND without parens', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND body = "a"',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('returns full combined when initial is empty', () => {
+			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
+				'service.name = "a"',
+			);
+		});
+	});
+});

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

@@ -0,0 +1,40 @@
+export function combineInitialAndUserExpression(
+	initial: string,
+	user: string,
+): string {
+	const i = initial.trim();
+	const u = user.trim();
+	if (!i) {
+		return u;
+	}
+	if (!u) {
+		return i;
+	}
+	return `${i} AND (${u})`;
+}
+
+export function getUserExpressionFromCombined(
+	initial: string,
+	combined: string | null | undefined,
+): string {
+	const i = initial.trim();
+	const c = (combined ?? '').trim();
+	if (!c) {
+		return '';
+	}
+	if (!i) {
+		return c;
+	}
+	if (c === i) {
+		return '';
+	}
+	const wrappedPrefix = `${i} AND (`;
+	if (c.startsWith(wrappedPrefix) && c.endsWith(')')) {
+		return c.slice(wrappedPrefix.length, -1);
+	}
+	const plainPrefix = `${i} AND `;
+	if (c.startsWith(plainPrefix)) {
+		return c.slice(plainPrefix.length);
+	}
+	return c;
+}

frontend/src/components/QueryBuilderV2/index.ts

@@ -0,0 +1,14 @@
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2ProviderProps,
+} from './QueryV2/QuerySearch/Provider';
+export {
+	QuerySearchV2Provider,
+	useQuerySearchV2Context,
+} from './QueryV2/QuerySearch/Provider';
+export { QueryBuilderV2 } from './QueryBuilderV2';
+export {
+	QueryBuilderV2Provider,
+	useQueryBuilderV2Context,
+} from './QueryBuilderV2Context';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss

@@ -1,26 +0,0 @@
-.placeholder {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	min-height: 240px;
-	width: 100%;
-	padding: 24px;
-	gap: 12px;
-}
-
-.emoji {
-	width: 48px;
-	height: 48px;
-}
-
-.text {
-	text-align: center;
-	font-size: 14px;
-	color: var(--muted-foreground);
-}
-
-.subText {
-	color: var(--foreground);
-}

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,31 +0,0 @@
-import { Typography } from 'antd';
-import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
-
-import styles from './QueryCancelledPlaceholder.module.scss';
-
-interface QueryCancelledPlaceholderProps {
-	subText?: string;
-}
-
-function QueryCancelledPlaceholder({
-	subText,
-}: QueryCancelledPlaceholderProps): JSX.Element {
-	return (
-		<div className={styles.placeholder}>
-			<img className={styles.emoji} src={eyesEmojiUrl} alt="eyes emoji" />
-			<Typography className={styles.text}>
-				Query cancelled.
-				<span className={styles.subText}>
-					{' '}
-					{subText || 'Click "Run Query" to load data.'}
-				</span>
-			</Typography>
-		</div>
-	);
-}
-
-QueryCancelledPlaceholder.defaultProps = {
-	subText: undefined,
-};
-
-export default QueryCancelledPlaceholder;

frontend/src/components/QueryCancelledPlaceholder/index.ts

@@ -1 +0,0 @@
-export { default } from './QueryCancelledPlaceholder';

frontend/src/constants/reactQuery.ts

@@ -1,8 +0,0 @@
-/**
- * Maximum number of retries for a failed react-query request before giving up.
- * Used as the upper bound in the default `retry` predicate:
- *   `return failureCount < MAX_QUERY_RETRIES;`
- *
- * This retries up to 3 times (4 attempts total including the initial request).
- */
-export const MAX_QUERY_RETRIES = 3;

frontend/src/constants/reactQueryKeys.ts

@@ -25,8 +25,7 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
-	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
+	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',

frontend/src/container/AllError/index.tsx

@@ -21,7 +21,6 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
@@ -37,7 +36,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
-import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -123,13 +121,7 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();
 
-	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
-	const isCancelled = useAllErrorsQueryState((s) => s.isCancelled);
-
-	const [
-		{ isLoading, isFetching: isErrorsFetching, data },
-		errorCountResponse,
-	] = useQueries([
+	const [{ isLoading, data }, errorCountResponse] = useQueries([
 		{
 			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
 			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
@@ -170,12 +162,6 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
-
-	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
-	useEffect(() => {
-		setIsFetching(isFetching);
-	}, [isFetching, setIsFetching]);
-
 	const { notifications } = useNotifications();
 
 	useEffect(() => {
@@ -487,12 +473,6 @@ function AllErrors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [errorCountResponse.data?.payload]);
 
-	if (isCancelled && !data?.payload?.length) {
-		return (
-			<QueryCancelledPlaceholder subText='Click "Run Query" to load exceptions.' />
-		);
-	}
-
 	return (
 		<ResizeTable
 			columns={columns}

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

@@ -1,16 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
-import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -27,6 +23,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -42,7 +40,6 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
-	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -56,19 +53,6 @@ function DomainList(): JSX.Element {
 
 	const compositeData = useGetCompositeQueryParam();
 
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
-	const handleStageAndRunQuery = useCallback(() => {
-		setIsCancelled(false);
-		queryClient.invalidateQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
-		handleRunQuery();
-	}, [queryClient, handleRunQuery]);
-
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -121,13 +105,6 @@ function DomainList(): JSX.Element {
 		[data],
 	);
 
-	// Auto-reset cancelled state when a new fetch starts
-	useEffect(() => {
-		if (isFetching) {
-			setIsCancelled(false);
-		}
-	}, [isFetching]);
-
 	// Open drawer if selectedDomain is set in URL
 	useEffect(() => {
 		if (selectedDomain && formattedDataForTable?.length > 0) {
@@ -142,13 +119,7 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={
-					<RightToolbarActions
-						onStageRunQuery={handleStageAndRunQuery}
-						isLoadingQueries={isFetching}
-						handleCancelQuery={handleCancelQuery}
-					/>
-				}
+				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch
@@ -159,44 +130,38 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{isCancelled && formattedDataForTable.length === 0 && (
-				<QueryCancelledPlaceholder subText='Click "Run Query" to load API monitoring data.' />
-			)}
-			{!isCancelled &&
-				!isFetching &&
-				!isLoading &&
-				formattedDataForTable.length === 0 && (
-					<div className="no-filtered-domains-message-container">
-						<div className="no-filtered-domains-message-content">
-							<img
-								src={emptyStateUrl}
-								alt="thinking-emoji"
-								className="empty-state-svg"
-							/>
+			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
+				<div className="no-filtered-domains-message-container">
+					<div className="no-filtered-domains-message-content">
+						<img
+							src={emptyStateUrl}
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>
 
-							<div className="no-filtered-domains-message">
-								<div className="no-domain-title">
-									No External API calls detected with applied filters.
-								</div>
-								<div className="no-domain-subtitle">
-									Ensure all HTTP client spans are being sent with kind as{' '}
-									<span className="attribute">Client</span> and url set in{' '}
-									<span className="attribute">url.full</span> or{' '}
-									<span className="attribute">http.url</span> attribute.
-								</div>
-								<a
-									href={DOCLINKS.EXTERNAL_API_MONITORING}
-									target="_blank"
-									rel="noreferrer"
-									className="external-api-doc-link"
-								>
-									Learn how External API monitoring works in SigNoz{' '}
-									<MoveUpRight size={14} />
-								</a>
+						<div className="no-filtered-domains-message">
+							<div className="no-domain-title">
+								No External API calls detected with applied filters.
 							</div>
+							<div className="no-domain-subtitle">
+								Ensure all HTTP client spans are being sent with kind as{' '}
+								<span className="attribute">Client</span> and url set in{' '}
+								<span className="attribute">url.full</span> or{' '}
+								<span className="attribute">http.url</span> attribute.
+							</div>
+							<a
+								href={DOCLINKS.EXTERNAL_API_MONITORING}
+								target="_blank"
+								rel="noreferrer"
+								className="external-api-doc-link"
+							>
+								Learn how External API monitoring works in SigNoz{' '}
+								<MoveUpRight size={14} />
+							</a>
 						</div>
 					</div>
-				)}
+				</div>
+			)}
 			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
 				<Table
 					className="api-monitoring-domain-list-table"

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

@@ -18,16 +18,9 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
-	isCancelled?: boolean;
-	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
-function ChartPreview({
-	alertDef,
-	source,
-	isCancelled = false,
-	onFetchingStateChange,
-}: ChartPreviewProps): JSX.Element {
+function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -95,8 +88,6 @@ function ChartPreview({
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
-			isCancelled={isCancelled}
-			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 
@@ -111,8 +102,6 @@ function ChartPreview({
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
-			isCancelled={isCancelled}
-			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 

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

@@ -1,11 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { useCallback, useMemo } from 'react';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -64,24 +62,7 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);
 
-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const runQueryHandler = useCallback(() => {
-		setIsCancelled(false);
-		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -95,7 +76,6 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
-		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -126,12 +106,7 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview
-				alertDef={alertDef}
-				source={source}
-				isCancelled={isCancelled}
-				onFetchingStateChange={setIsLoadingQueries}
-			/>
+			<ChartPreview alertDef={alertDef} source={source} />
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -155,8 +130,6 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
-				isLoadingQueries={isLoadingQueries}
-				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}

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

@@ -37,7 +37,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
@@ -47,7 +46,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.yAxisUnit,
 			rest.decimalPrecision,
 			isStackedBarChart,
-			rest.canPinTooltip,
 		],
 	);
 

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

@@ -25,8 +25,6 @@ export default function ChartWrapper({
 	showTooltip = true,
 	showLegend = true,
 	canPinTooltip = false,
-	pinKey,
-	onClick,
 	syncMode,
 	syncKey,
 	onDestroy = noop,
@@ -103,8 +101,6 @@ export default function ChartWrapper({
 							<TooltipPlugin
 								config={config}
 								canPinTooltip={canPinTooltip}
-								pinKey={pinKey}
-								onClick={onClick}
 								syncMode={syncMode}
 								maxWidth={Math.max(
 									TOOLTIP_MIN_WIDTH,

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

@@ -26,11 +26,10 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				...props,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision, rest.canPinTooltip],
+		[customTooltip, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -21,17 +21,10 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[
-			customTooltip,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-			rest.canPinTooltip,
-		],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -13,12 +13,6 @@ interface BaseChartProps {
 	showTooltip?: boolean;
 	showLegend?: boolean;
 	canPinTooltip?: boolean;
-	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
-	pinKey?: string;
-	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;

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

@@ -121,7 +121,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
 					data={chartData as uPlot.AlignedData}

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

@@ -89,7 +89,6 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={(): void => {
 						uPlotRef.current = null;
 					}}
-					canPinTooltip
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					isQueriesMerged={widget.mergeAllActiveQueries}

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

@@ -112,7 +112,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
 					timezone={timezone}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -4,14 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -71,8 +69,6 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
-	isCancelled?: boolean;
-	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -90,8 +86,6 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
-	isCancelled = false,
-	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -191,7 +185,7 @@ function ChartPreview({
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
-				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
+				'chartPreview',
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
 				minTime,
@@ -199,14 +193,9 @@ function ChartPreview({
 				alertDef?.ruleType,
 			],
 			enabled: canQuery,
-			keepPreviousData: true,
 		},
 	);
 
-	useEffect(() => {
-		onFetchingStateChange?.(queryResponse.isFetching);
-	}, [queryResponse.isFetching, onFetchingStateChange]);
-
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	useEffect((): void => {
@@ -345,16 +334,11 @@ function ChartPreview({
 
 	const chartData = getUPlotChartData(queryResponse?.data?.payload);
 
-	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
-
 	const isAnomalyDetectionAlert =
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
 
 	const chartDataAvailable =
-		chartData &&
-		hasResultData &&
-		!queryResponse.isLoading &&
-		(!queryResponse.isError || isCancelled);
+		chartData && !queryResponse.isError && !queryResponse.isLoading;
 
 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -375,14 +359,10 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
+					{(queryResponse?.isError || queryResponse?.error) && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}
 
-					{isCancelled && !queryResponse.isLoading && !hasResultData && (
-						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
-					)}
-
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -423,8 +403,6 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
-	isCancelled: false,
-	onFetchingStateChange: undefined,
 };
 
 export default ChartPreview;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -35,8 +35,6 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
-	isLoadingQueries,
-	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -228,8 +226,6 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
-										handleCancelQuery={handleCancelQuery}
-										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -249,11 +245,7 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn
-										onStageRunQuery={runQuery}
-										handleCancelQuery={handleCancelQuery}
-										isLoadingQueries={isLoadingQueries}
-									/>
+									<RunQueryBtn onStageRunQuery={runQuery} />
 								</span>
 							}
 							items={items}
@@ -295,8 +287,6 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;

frontend/src/container/FormAlertRules/index.tsx

@@ -136,19 +136,6 @@ function FormAlertRules({
 
 	// use query client
 	const ruleCache = useQueryClient();
-	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
-	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingAlertQuery) {
-			setIsChartQueryCancelled(false);
-		}
-	}, [isLoadingAlertQuery]);
-
-	const handleCancelAlertQuery = useCallback(() => {
-		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
-		setIsChartQueryCancelled(true);
-	}, [ruleCache]);
 
 	const isNewRule = !ruleId || isEmpty(ruleId);
 
@@ -715,8 +702,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -735,8 +720,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -919,15 +902,7 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => {
-								setIsChartQueryCancelled(false);
-								ruleCache.invalidateQueries([
-									REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
-								]);
-								handleRunQuery();
-							}}
-							isLoadingQueries={isLoadingAlertQuery}
-							handleCancelQuery={handleCancelAlertQuery}
+							runQuery={(): void => handleRunQuery()}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

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

@@ -6,7 +6,6 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -19,7 +18,6 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -88,7 +86,6 @@ function FullView({
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -206,8 +203,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);
 
-	const queryRangeKey = useMemo(
-		() => [
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -215,28 +212,10 @@ function FullView({
 			minTime,
 			maxTime,
 		],
-		[widget?.query, selectedPanelType, requestData, version, minTime, maxTime],
-	);
-
-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});
 
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (response.isFetching) {
-			setIsCancelled(false);
-		}
-	}, [response.isFetching]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-		setIsCancelled(true);
-	}, [queryClient, queryRangeKey]);
-
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -375,8 +354,6 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
-									isLoadingQueries={response.isFetching}
-									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}
@@ -409,27 +386,23 @@ function FullView({
 									}}
 								/>
 							)}
-							{isCancelled ? (
-								<QueryCancelledPlaceholder subText='Click "Run Query" to reload the widget.' />
-							) : (
-								<PanelWrapper
-									panelMode={PanelMode.STANDALONE_VIEW}
-									queryResponse={response}
-									widget={widget}
-									setRequestData={setRequestData}
-									isFullViewMode
-									onToggleModelHandler={onToggleModelHandler}
-									setGraphVisibility={setGraphsVisibilityStates}
-									graphVisibility={graphsVisibilityStates}
-									onDragSelect={customOnDragSelect ?? onDragSelect}
-									tableProcessedDataRef={tableProcessedDataRef}
-									searchTerm={searchTerm}
-									onClickHandler={onClickHandler}
-									enableDrillDown={enableDrillDown}
-									selectedGraph={selectedPanelType}
-									onColumnWidthsChange={onColumnWidthsChange}
-								/>
-							)}
+							<PanelWrapper
+								panelMode={PanelMode.STANDALONE_VIEW}
+								queryResponse={response}
+								widget={widget}
+								setRequestData={setRequestData}
+								isFullViewMode
+								onToggleModelHandler={onToggleModelHandler}
+								setGraphVisibility={setGraphsVisibilityStates}
+								graphVisibility={graphsVisibilityStates}
+								onDragSelect={customOnDragSelect ?? onDragSelect}
+								tableProcessedDataRef={tableProcessedDataRef}
+								searchTerm={searchTerm}
+								onClickHandler={onClickHandler}
+								enableDrillDown={enableDrillDown}
+								selectedGraph={selectedPanelType}
+								onColumnWidthsChange={onColumnWidthsChange}
+							/>
 						</GraphContainer>
 					</div>
 				</>

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -8,7 +7,6 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -39,20 +37,6 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-		setIsCancelled(true);
-	}, [queryClient]);
 
 	const [showQuickFilters, setShowQuickFilters] = useState(true);
 
@@ -171,11 +155,7 @@ function Explorer(): JSX.Element {
 
 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
-									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
-								/>
+								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -191,10 +171,7 @@ function Explorer(): JSX.Element {
 						/>
 
 						<div className="explore-content">
-							<TimeSeries
-								onFetchingStateChange={setIsLoadingQueries}
-								isCancelled={isCancelled}
-							/>
+							<TimeSeries />
 						</div>
 					</div>
 					<ExplorerOptionWrapper

frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx

@@ -0,0 +1,43 @@
+import { Button } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilder } from 'container/QueryBuilder';
+import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
+
+function QuerySection(): JSX.Element {
+	const { handleRunQuery } = useQueryBuilder();
+
+	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
+
+	return (
+		<div className="query-section">
+			<QueryBuilder
+				panelType={panelTypes}
+				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+				version="v4"
+				actions={
+					<ButtonWrapper>
+						<Button
+							onClick={(): void => {
+								handleRunQuery();
+								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
+									[MeterExplorerEventKeys.Tab]: 'explorer',
+								});
+							}}
+							type="primary"
+						>
+							Run Query
+						</Button>
+					</ButtonWrapper>
+				}
+			/>
+		</div>
+	);
+}
+
+export default QuerySection;

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
@@ -23,15 +21,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-interface TimeSeriesProps {
-	onFetchingStateChange?: (isFetching: boolean) => void;
-	isCancelled?: boolean;
-}
-
-function TimeSeries({
-	onFetchingStateChange,
-	isCancelled = false,
-}: TimeSeriesProps): JSX.Element {
+function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
@@ -77,11 +67,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -93,15 +79,9 @@ function TimeSeries({
 						},
 					},
 					ENTITY_VERSION_V5,
-					undefined,
-					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
+			retry: (failureCount: number, error: Error): boolean => {
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -114,7 +94,7 @@ function TimeSeries({
 					return false;
 				}
 
-				return failureCount < MAX_QUERY_RETRIES;
+				return failureCount < 3;
 			},
 			onError: (error: APIError): void => {
 				showErrorModal(error);
@@ -122,11 +102,6 @@ function TimeSeries({
 		})),
 	);
 
-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(
@@ -147,11 +122,7 @@ function TimeSeries({
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
-				{isCancelled && hasMetricSelected && (
-					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
-				)}
-				{!isCancelled &&
-					hasMetricSelected &&
+				{hasMetricSelected &&
 					responseData.map((datapoint, index) => (
 						<div
 							className="time-series-view-panel"

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -7,7 +6,6 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -56,21 +54,6 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
 
-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -324,11 +307,7 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
-						/>
+						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -340,7 +319,6 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}
@@ -353,7 +331,6 @@ function Explorer(): JSX.Element {
 						yAxisUnit={yAxisUnit}
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
 					/>
 				</div>
 			</div>

frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx

@@ -1,10 +1,7 @@
-import { useCallback } from 'react';
-import { useIsFetching, useQueryClient } from 'react-query';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -14,16 +11,9 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 
 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();
 
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
 
-	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-	}, [queryClient]);
-
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -32,16 +22,17 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<RunQueryBtn
-							onStageRunQuery={(): void => {
+						<Button
+							onClick={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
-						/>
+							type="primary"
+						>
+							Run Query
+						</Button>
 					</ButtonWrapper>
 				}
 			/>

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,12 +11,10 @@ import {
 } from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -38,7 +36,6 @@ import {
 } from './utils';
 
 function TimeSeries({
-	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -49,7 +46,6 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
-	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -102,11 +98,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -119,15 +111,9 @@ function TimeSeries({
 					},
 					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
-					undefined,
-					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
+			retry: (failureCount: number, error: Error): boolean => {
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -140,16 +126,11 @@ function TimeSeries({
 					return false;
 				}
 
-				return failureCount < MAX_QUERY_RETRIES;
+				return failureCount < 3;
 			},
 		})),
 	);
 
-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(
@@ -250,11 +231,7 @@ function TimeSeries({
 				})}
 			>
 				{metricNames.length === 0 && <EmptyMetricsSearch />}
-				{isCancelled && metricNames.length > 0 && (
-					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
-				)}
-				{!isCancelled &&
-					metricNames.length > 0 &&
+				{metricNames.length > 0 &&
 					responseData.map((datapoint, index) => {
 						const isQueryDataItem = index < metricNames.length;
 						const metricName = isQueryDataItem ? metricNames[index] : undefined;

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -3,7 +3,6 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';
 
 export interface TimeSeriesProps {
-	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;
@@ -16,5 +15,4 @@ export interface TimeSeriesProps {
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
-	isCancelled?: boolean;
 }

frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss

@@ -4,25 +4,9 @@
 
 	.inspect-metrics-fallback {
 		display: flex;
-		flex-direction: column;
-		gap: 32px;
+		align-items: center;
+		justify-content: center;
 		height: 100%;
-
-		.inspect-metrics-fallback-header-placeholder {
-			// Reserve the same vertical space the GraphView header occupies
-			// (antd middle button height) so swapping chart ↔ fallback causes
-			// no layout shift.
-			height: 32px;
-			flex-shrink: 0;
-		}
-
-		.inspect-metrics-fallback-body {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			min-height: 520px;
-		}
 	}
 
 	.inspect-metrics-title {

frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -112,28 +109,6 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);
 
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	// Auto-reset isCancelled only on the rising edge of a new fetch
-	// (transition from not-loading → loading). Watching `isLoading` directly
-	// races with the cancel flow — when the user cancels mid-fetch, loading
-	// is still true in the render right after setIsCancelled(true), which
-	// would immediately reset it.
-	const wasLoadingRef = useRef(false);
-	useEffect(() => {
-		const nowLoading = isInspectMetricsLoading || isInspectMetricsRefetching;
-		if (!wasLoadingRef.current && nowLoading) {
-			setIsCancelled(false);
-		}
-		wasLoadingRef.current = nowLoading;
-	}, [isInspectMetricsLoading, isInspectMetricsRefetching]);
-
-	const queryClient = useQueryClient();
-	const handleCancelInspectQuery = useCallback(() => {
-		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -192,66 +167,96 @@ function Inspect({
 		setExpandedViewOptions(null);
 	}, [inspectionStep]);
 
-	const chartArea = useMemo(() => {
-		const renderFallback = (testId: string, body: JSX.Element): JSX.Element => (
-			<div data-testid={testId} className="inspect-metrics-fallback">
-				<div className="inspect-metrics-fallback-header-placeholder" />
-				<div className="inspect-metrics-fallback-body">{body}</div>
-			</div>
-		);
-
-		// Cancelled state takes precedence over any react-query state — ensures
-		// the placeholder shows immediately on cancel, regardless of whether
-		// isLoading/isRefetching has settled yet.
-		if (isCancelled) {
-			return renderFallback(
-				'inspect-metrics-cancelled',
-				<QueryCancelledPlaceholder subText='Click "Run Query" to see inspect results.' />,
+	const content = useMemo(() => {
+		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
+			return (
+				<div
+					data-testid="inspect-metrics-loading"
+					className="inspect-metrics-fallback"
+				>
+					<Skeleton active />
+				</div>
 			);
 		}
 
-		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
-			return renderFallback('inspect-metrics-loading', <Skeleton active />);
-		}
-
 		if (isInspectMetricsError) {
-			return renderFallback(
-				'inspect-metrics-error',
-				<Empty description="Error loading inspect metrics." />,
+			const errorMessage = 'Error loading inspect metrics.';
+
+			return (
+				<div
+					data-testid="inspect-metrics-error"
+					className="inspect-metrics-fallback"
+				>
+					<Empty description={errorMessage} />
+				</div>
 			);
 		}
 
 		if (!inspectMetricsTimeSeries.length) {
-			return renderFallback(
-				'inspect-metrics-empty',
-				<Empty description="No time series found for this metric to inspect." />,
+			return (
+				<div
+					data-testid="inspect-metrics-empty"
+					className="inspect-metrics-fallback"
+				>
+					<Empty description="No time series found for this metric to inspect." />
+				</div>
 			);
 		}
 
 		return (
-			<GraphView
-				inspectMetricsTimeSeries={aggregatedTimeSeries}
-				formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
-				resetInspection={resetInspection}
-				metricName={appliedMetricName}
-				metricUnit={selectedMetricUnit}
-				metricType={selectedMetricType}
-				spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-				inspectionStep={inspectionStep}
-				setPopoverOptions={setPopoverOptions}
-				setShowExpandedView={setShowExpandedView}
-				showExpandedView={showExpandedView}
-				setExpandedViewOptions={setExpandedViewOptions}
-				popoverOptions={popoverOptions}
-				metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-				isInspectMetricsRefetching={isInspectMetricsRefetching}
-			/>
+			<div className="inspect-metrics-content">
+				<div className="inspect-metrics-content-first-col">
+					<GraphView
+						inspectMetricsTimeSeries={aggregatedTimeSeries}
+						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
+						resetInspection={resetInspection}
+						metricName={appliedMetricName}
+						metricUnit={selectedMetricUnit}
+						metricType={selectedMetricType}
+						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+						inspectionStep={inspectionStep}
+						setPopoverOptions={setPopoverOptions}
+						setShowExpandedView={setShowExpandedView}
+						showExpandedView={showExpandedView}
+						setExpandedViewOptions={setExpandedViewOptions}
+						popoverOptions={popoverOptions}
+						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+						isInspectMetricsRefetching={isInspectMetricsRefetching}
+					/>
+					<QueryBuilder
+						currentMetricName={currentMetricName}
+						setCurrentMetricName={setCurrentMetricName}
+						setAppliedMetricName={setAppliedMetricName}
+						spaceAggregationLabels={spaceAggregationLabels}
+						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
+						inspectionStep={inspectionStep}
+						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
+						currentQuery={currentQueryData}
+						setCurrentQuery={setCurrentQueryData}
+					/>
+				</div>
+				<div className="inspect-metrics-content-second-col">
+					<Stepper
+						inspectionStep={inspectionStep}
+						resetInspection={resetInspection}
+					/>
+					{showExpandedView && (
+						<ExpandedView
+							options={expandedViewOptions}
+							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+							step={inspectionStep}
+							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
+						/>
+					)}
+				</div>
+			</div>
 		);
 	}, [
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
-		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
@@ -307,46 +312,7 @@ function Inspect({
 				className="inspect-metrics-modal"
 				destroyOnClose
 			>
-				<div className="inspect-metrics-content">
-					<div className="inspect-metrics-content-first-col">
-						{chartArea}
-						<QueryBuilder
-							currentMetricName={currentMetricName}
-							setCurrentMetricName={setCurrentMetricName}
-							setAppliedMetricName={setAppliedMetricName}
-							spaceAggregationLabels={spaceAggregationLabels}
-							currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
-							dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
-							inspectionStep={inspectionStep}
-							inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-							currentQuery={currentQueryData}
-							setCurrentQuery={setCurrentQueryData}
-							isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
-							handleCancelQuery={handleCancelInspectQuery}
-							onRunQuery={(): void => {
-								setIsCancelled(false);
-								queryClient.invalidateQueries([
-									REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
-								]);
-							}}
-						/>
-					</div>
-					<div className="inspect-metrics-content-second-col">
-						<Stepper
-							inspectionStep={inspectionStep}
-							resetInspection={resetInspection}
-						/>
-						{showExpandedView && (
-							<ExpandedView
-								options={expandedViewOptions}
-								spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-								step={inspectionStep}
-								metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-								timeAggregatedSeriesMap={timeAggregatedSeriesMap}
-							/>
-						)}
-					</div>
-				</div>
+				{content}
 			</Drawer>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx

@@ -20,22 +20,13 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
-	isLoadingQueries,
-	handleCancelQuery,
-	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
-		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [
-		currentMetricName,
-		setAppliedMetricName,
-		dispatchMetricInspectionOptions,
-		onRunQuery,
-	]);
+	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
 
 	return (
 		<div className="inspect-metrics-query-builder">
@@ -48,11 +39,7 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn
-					onStageRunQuery={applyInspectionOptions}
-					handleCancelQuery={handleCancelQuery}
-					isLoadingQueries={isLoadingQueries}
-				/>
+				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -103,8 +103,6 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
-		isLoadingQueries: false,
-		handleCancelQuery: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/MetricsExplorer/Inspect/types.ts

@@ -65,9 +65,6 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
-	onRunQuery?: () => void;
 }
 
 export interface MetricNameSearchProps {

frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts

@@ -1,9 +1,6 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
-import { isAxiosError } from 'axios';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -110,7 +107,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+			'inspectMetrics',
 			metricName,
 			start,
 			end,
@@ -130,12 +127,6 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
-		retry: (failureCount: number, error: Error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-			return failureCount < MAX_QUERY_RETRIES;
-		},
 	});
 
 	const inspectMetricsData = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -12,8 +12,6 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
-	handleCancelQuery,
-	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -24,8 +22,7 @@ function MetricsSearch({
 
 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-		onRunQuery?.();
-	}, [currentQueryFilterExpression, onChange, onRunQuery]);
+	}, [currentQueryFilterExpression, onChange]);
 
 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -56,7 +53,6 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
-				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -18,7 +17,6 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -106,8 +104,6 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);
 
-	const [isCancelled, setIsCancelled] = useState<boolean>(false);
-
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -168,7 +164,6 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
-		reset: resetMetricsStats,
 	} = useGetMetricsStats();
 
 	const {
@@ -177,7 +172,6 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
-		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();
 
 	const metricsStatsApiError = useMemo(
@@ -202,40 +196,6 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);
 
-	const handleCancelQuery = useCallback(() => {
-		resetMetricsStats();
-		resetMetricsTreemap();
-		setCurrentQueryFilterExpression(appliedFilterExpression);
-		setIsCancelled(true);
-	}, [
-		resetMetricsStats,
-		resetMetricsTreemap,
-		setCurrentQueryFilterExpression,
-		appliedFilterExpression,
-	]);
-
-	const handleRunQuery = useCallback(() => {
-		setIsCancelled(false);
-		getMetricsStats({
-			data: {
-				...metricsListQuery,
-				filter: { expression: currentQueryFilterExpression },
-			},
-		});
-		getMetricsTreemap({
-			data: {
-				...metricsTreemapQuery,
-				filter: { expression: currentQueryFilterExpression },
-			},
-		});
-	}, [
-		getMetricsStats,
-		getMetricsTreemap,
-		metricsListQuery,
-		metricsTreemapQuery,
-		currentQueryFilterExpression,
-	]);
-
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -370,19 +330,11 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;
 
-	const isLoadingQueries =
-		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
-
 	const showFullScreenLoading =
-		isLoadingQueries &&
+		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;
 
-	const showNoMetrics =
-		isMetricsListDataEmpty &&
-		isMetricsTreeMapDataEmpty &&
-		!appliedFilterExpression;
-
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -391,26 +343,13 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isLoadingQueries}
-					handleCancelQuery={handleCancelQuery}
-					onRunQuery={handleRunQuery}
+					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isCancelled ? (
-					<div className="no-logs-container">
-						<div className="no-logs-container-content">
-							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
-							<Typography className="no-logs-text">
-								Query cancelled.
-								<span className="sub-text">
-									{' '}
-									Click &quot;Run Query&quot; to load metrics.
-								</span>
-							</Typography>
-						</div>
-					</div>
-				) : showNoMetrics ? (
+				) : isMetricsListDataEmpty &&
+				  isMetricsTreeMapDataEmpty &&
+				  !appliedFilterExpression ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -33,8 +33,6 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
-	handleCancelQuery: () => void;
-	onRunQuery: () => void;
 }
 
 export interface MetricsTreemapProps {

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -24,8 +25,8 @@ import PromQLQueryContainer from './QueryBuilder/promQL';
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
+	queryRangeKey,
 	isLoadingQueries,
-	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -178,7 +179,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+							queryRangeKey={queryRangeKey}
 						/>
 					</span>
 				}
@@ -190,8 +191,8 @@ function QuerySection({
 
 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
+	queryRangeKey?: QueryKey;
+	isLoadingQueries?: boolean;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { Card } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -23,7 +22,6 @@ function WidgetGraph({
 	selectedWidget,
 	isLoadingPanelData,
 	enableDrillDown = false,
-	isCancelled = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 
@@ -48,24 +46,20 @@ function WidgetGraph({
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{!isCancelled && queryResponse.error && (
+			{queryResponse.error && (
 				<AlertIconContainer color="red" title={queryResponse.error.message}>
 					<InfoCircleOutlined />
 				</AlertIconContainer>
 			)}
 
-			{isCancelled ? (
-				<QueryCancelledPlaceholder subText='Click "Run Query" to reload the chart.' />
-			) : (
-				<WidgetGraphComponent
-					isLoadingPanelData={isLoadingPanelData}
-					selectedGraph={selectedGraph}
-					queryResponse={queryResponse}
-					setRequestData={setRequestData}
-					selectedWidget={selectedWidget}
-					enableDrillDown={enableDrillDown}
-				/>
-			)}
+			<WidgetGraphComponent
+				isLoadingPanelData={isLoadingPanelData}
+				selectedGraph={selectedGraph}
+				queryResponse={queryResponse}
+				setRequestData={setRequestData}
+				selectedWidget={selectedWidget}
+				enableDrillDown={enableDrillDown}
+			/>
 		</Container>
 	);
 }

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

@@ -1,5 +1,5 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { memo, useEffect } from 'react';
+import { useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -34,7 +34,6 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();
 
 	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
 		AppState,
@@ -50,25 +49,12 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-		setIsCancelled(true);
-	}, [queryClient, queryRangeKey]);
-
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
 		keepPreviousData: true,
 	});
 
-	useEffect(() => {
-		if (queryResponse.isFetching) {
-			setIsCancelled(false);
-		}
-	}, [queryResponse.isFetching]);
-
 	// Update parent component with query response for legend colors
 	useEffect(() => {
 		if (setQueryResponse) {
@@ -85,13 +71,12 @@ function LeftContainer({
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
 				enableDrillDown={enableDrillDown}
-				isCancelled={isCancelled}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
+					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
-					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={dashboardData?.id}

frontend/src/container/NewWidget/types.ts

@@ -50,5 +50,4 @@ export type WidgetGraphContainerProps = {
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
 	enableDrillDown?: boolean;
-	isCancelled?: boolean;
 };

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from '@signozhq/ui';
 import cx from 'classnames';
 import {
@@ -10,23 +12,14 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 import './RunQueryBtn.scss';
-
-type RunQueryBtnProps = {
+interface RunQueryBtnProps {
 	className?: string;
 	label?: string;
-	disabled?: boolean;
-} & (
-	| {
-			onStageRunQuery: () => void;
-			handleCancelQuery: () => void;
-			isLoadingQueries: boolean;
-	  }
-	| {
-			onStageRunQuery?: never;
-			handleCancelQuery?: never;
-			isLoadingQueries?: never;
-	  }
-);
+	isLoadingQueries?: boolean;
+	handleCancelQuery?: () => void;
+	onStageRunQuery?: () => void;
+	queryRangeKey?: QueryKey;
+}
 
 function RunQueryBtn({
 	className,
@@ -34,10 +27,26 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	disabled,
+	queryRangeKey,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const isLoading = isLoadingQueries ?? false;
+	const queryClient = useQueryClient();
+	const isKeyFetchingCount = useIsFetching(
+		queryRangeKey as QueryKey | undefined,
+	);
+	const isLoading =
+		typeof isLoadingQueries === 'boolean'
+			? isLoadingQueries
+			: isKeyFetchingCount > 0;
+
+	const onCancel = useCallback(() => {
+		if (handleCancelQuery) {
+			return handleCancelQuery();
+		}
+		if (queryRangeKey) {
+			queryClient.cancelQueries(queryRangeKey);
+		}
+	}, [handleCancelQuery, queryClient, queryRangeKey]);
 
 	return isLoading ? (
 		<Button
@@ -45,7 +54,7 @@ function RunQueryBtn({
 			type="button"
 			prefix={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn', className)}
-			onClick={handleCancelQuery}
+			onClick={onCancel}
 		>
 			Cancel
 		</Button>
@@ -54,7 +63,7 @@ function RunQueryBtn({
 			color="primary"
 			type="button"
 			className={cx('run-query-btn', className)}
-			disabled={disabled}
+			disabled={isLoading || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			prefix={<Play size={14} />}
 		>

frontend/src/container/QueryBuilder/components/RunQueryBtn/__test__/RunQueryBtn.test.tsx

@@ -1,8 +1,18 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import RunQueryBtn from '../RunQueryBtn';
 
+jest.mock('react-query', () => {
+	const actual = jest.requireActual('react-query');
+	return {
+		...actual,
+		useIsFetching: jest.fn(),
+		useQueryClient: jest.fn(),
+	};
+});
+import { useIsFetching, useQueryClient } from 'react-query';
+
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -16,60 +26,79 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		(useQueryClient as jest.Mock).mockReturnValue({
+			cancelQueries: jest.fn(),
+		});
 	});
 
-	test('renders run state and triggers on click', async () => {
-		const user = userEvent.setup();
+	test('uses isLoadingQueries prop over useIsFetching', () => {
+		// Simulate fetching but prop forces not loading
+		(useIsFetching as jest.Mock).mockReturnValue(1);
 		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
+		// Should show "Run Query" (not cancel)
+		const runBtn = screen.getByRole('button', { name: /run query/i });
+		expect(runBtn).toBeInTheDocument();
+		expect(runBtn).toBeEnabled();
+	});
+
+	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
 		const onCancel = jest.fn();
-		render(
-			<RunQueryBtn
-				onStageRunQuery={onRun}
-				handleCancelQuery={onCancel}
-				isLoadingQueries={false}
-			/>,
-		);
+		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		fireEvent.click(cancelBtn);
+		expect(onCancel).toHaveBeenCalledTimes(1);
+		expect(cancelQueries).not.toHaveBeenCalled();
+	});
+
+	test('renders run state and triggers on click', () => {
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} />);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		await user.click(btn);
+		fireEvent.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});
 
-	test('shows cancel state and calls handleCancelQuery', async () => {
-		const user = userEvent.setup();
-		const onRun = jest.fn();
-		const onCancel = jest.fn();
-		render(
-			<RunQueryBtn
-				onStageRunQuery={onRun}
-				handleCancelQuery={onCancel}
-				isLoadingQueries
-			/>,
-		);
-		const cancel = screen.getByRole('button', { name: /cancel/i });
-		await user.click(cancel);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-	});
-
-	test('disabled when disabled prop is true', () => {
-		render(<RunQueryBtn disabled />);
+	test('disabled when onStageRunQuery is undefined', () => {
+		render(<RunQueryBtn />);
 		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
 	});
 
-	test('disabled when no props provided', () => {
-		render(<RunQueryBtn />);
-		expect(
-			screen.getByRole('button', { name: /run query/i }),
-		).toBeInTheDocument();
+	test('shows cancel state and calls handleCancelQuery', () => {
+		const onCancel = jest.fn();
+		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		const cancel = screen.getByRole('button', { name: /cancel/i });
+		fireEvent.click(cancel);
+		expect(onCancel).toHaveBeenCalledTimes(1);
+	});
+
+	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(1);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
+		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
+		render(<RunQueryBtn queryRangeKey={queryKey} />);
+
+		// Button switches to cancel state
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		expect(cancelBtn).toBeInTheDocument();
+
+		// Clicking cancel calls cancelQueries with the key
+		fireEvent.click(cancelBtn);
+		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
 	});
 
 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-			/>,
+			<RunQueryBtn onStageRunQuery={(): void => {}} />,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -82,11 +111,7 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-			/>,
+			<RunQueryBtn onStageRunQuery={(): void => {}} />,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -96,14 +121,8 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-				label="Stage & Run Query"
-			/>,
-		);
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();

frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import { MutableRefObject, useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 
@@ -8,19 +9,23 @@ import './ToolbarActions.styles.scss';
 
 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
+	isLoadingQueries?: boolean;
+	listQueryKeyRef?: MutableRefObject<any>;
+	chartQueryKeyRef?: MutableRefObject<any>;
 	showLiveLogs?: boolean;
 }
 
 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	handleCancelQuery,
+	listQueryKeyRef,
+	chartQueryKeyRef,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
+	const queryClient = useQueryClient();
+
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -37,11 +42,20 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn disabled />
+				<RunQueryBtn />
 			</div>
 		);
 	}
 
+	const handleCancelQuery = (): void => {
+		if (listQueryKeyRef?.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef?.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+	};
+
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -54,5 +68,8 @@ export default function RightToolbarActions({
 }
 
 RightToolbarActions.defaultProps = {
+	isLoadingQueries: false,
+	listQueryKeyRef: null,
+	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -92,12 +92,7 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions
-					onStageRunQuery={onStageRunQuery}
-					isLoadingQueries={false}
-					handleCancelQuery={jest.fn()}
-				/>
-				,
+				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
 			</MockQueryClientProvider>,
 		);
 

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { isAxiosError } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/GridCardLayout/utils';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
@@ -133,10 +132,6 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-
 			let status: number | undefined;
 
 			if (error instanceof APIError) {
@@ -149,7 +144,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 				return false;
 			}
 
-			return failureCount < MAX_QUERY_RETRIES;
+			return failureCount < 3;
 		};
 	}, [options?.retry]);
 

frontend/src/hooks/thirdPartyApis/useListOverview.ts

@@ -1,7 +1,5 @@
 import { useQuery, UseQueryResult } from 'react-query';
 import listOverview from 'api/thirdPartyApis/listOverview';
-import { isAxiosError } from 'axios';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
@@ -22,21 +20,12 @@ export const useListOverview = (
 			showIp,
 			filter.expression,
 		],
-		queryFn: ({ signal }) =>
-			listOverview(
-				{
-					start,
-					end,
-					show_ip: showIp,
-					filter,
-				},
-				signal,
-			),
-		retry: (failureCount, error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-			return failureCount < MAX_QUERY_RETRIES;
-		},
+		queryFn: () =>
+			listOverview({
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			}),
 	});
 };

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss

@@ -1,22 +1,73 @@
-.container {
+.uplot-tooltip-container {
 	font-family: 'Inter';
 	font-size: 12px;
-	background: var(--l2-background);
+	background: var(--bg-ink-300);
 	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	border: 1px solid var(--l2-border);
+	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 
-	&.pinned {
-		border-color: var(--ring);
+	&.lightMode {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-ink-500);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
+
+		.uplot-tooltip-divider {
+			background-color: var(--bg-vanilla-300);
+		}
 	}
 
-	.divider {
+	.uplot-tooltip-header-container {
+		padding: 1rem 1rem 0 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&:last-child {
+			padding-bottom: 1rem;
+		}
+
+		.uplot-tooltip-header {
+			font-size: 13px;
+			font-weight: 500;
+		}
+	}
+
+	.uplot-tooltip-divider {
 		width: 100%;
 		height: 1px;
-		background-color: var(--l2-border);
+		background-color: var(--bg-ink-100);
+	}
+
+	.uplot-tooltip-list {
+		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
+		// horizontal offset when the scroller has padding or transform applied.
+		div[data-viewport-type='element'] {
+			left: 0;
+			box-sizing: border-box;
+			padding: 4px 12px 4px 16px;
+		}
+
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
+		}
 	}
 }

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -1,28 +1,71 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
-import TooltipFooter from './components/TooltipFooter/TooltipFooter';
-import TooltipHeader from './components/TooltipHeader/TooltipHeader';
-import TooltipList from './components/TooltipList/TooltipList';
+import TooltipItem from './components/TooltipItem/TooltipItem';
 
 import Styles from './Tooltip.module.scss';
 
+// Fallback per-item height used for the initial size estimate before
+// Virtuoso reports the real total height via totalListHeightChanged.
+const TOOLTIP_ITEM_HEIGHT = 38;
+const LIST_MAX_HEIGHT = 300;
+
 export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
 	showTooltipHeader = true,
-	isPinned,
-	canPinTooltip,
-	dismiss,
 }: TooltipProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const { timezone: userTimezone } = useTimezone();
+	const [totalListHeight, setTotalListHeight] = useState(0);
+
 	const tooltipContent = useMemo(() => content ?? [], [content]);
+
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+
+	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
+		const cursorIdx = uPlotInstance.cursor.idx;
+		if (cursorIdx == null) {
+			return null;
+		}
+		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
+		if (timestamp == null) {
+			return null;
+		}
+		return dayjs(timestamp * 1000)
+			.tz(resolvedTimezone)
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+	}, [
+		resolvedTimezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
+
 	const activeItem = useMemo(
 		() => tooltipContent.find((item) => item.isActive) ?? null,
 		[tooltipContent],
 	);
 
+	// Use the measured height from Virtuoso when available; fall back to a
+	// per-item estimate on the first render.  Math.ceil prevents a 1 px
+	// subpixel rounding gap from triggering a spurious scrollbar.
+	const virtuosoHeight = useMemo(() => {
+		return totalListHeight > 0
+			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
+			: Math.min(tooltipContent.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT);
+	}, [totalListHeight, tooltipContent.length]);
+
 	const showHeader = showTooltipHeader || activeItem != null;
 	// With a single series the active item is fully represented in the header —
 	// hide the divider and list to avoid showing a duplicate row.
@@ -31,24 +74,46 @@ export default function Tooltip({
 
 	return (
 		<div
-			className={cx(Styles.container, isPinned && Styles.pinned)}
+			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
 			data-testid="uplot-tooltip-container"
 		>
 			{showHeader && (
-				<TooltipHeader
-					uPlotInstance={uPlotInstance}
-					timezone={timezone}
-					showTooltipHeader={showTooltipHeader}
-					isPinned={isPinned}
-					activeItem={activeItem}
-				/>
+				<div className={Styles.uplotTooltipHeaderContainer}>
+					{showTooltipHeader && headerTitle && (
+						<div
+							className={Styles.uplotTooltipHeader}
+							data-testid="uplot-tooltip-header"
+						>
+							<span>{headerTitle}</span>
+						</div>
+					)}
+
+					{activeItem && (
+						<TooltipItem
+							item={activeItem}
+							isItemActive={true}
+							containerTestId="uplot-tooltip-pinned"
+							markerTestId="uplot-tooltip-pinned-marker"
+							contentTestId="uplot-tooltip-pinned-content"
+						/>
+					)}
+				</div>
 			)}
 
-			{showDivider && <span className={Styles.divider} />}
+			{showDivider && <span className={Styles.uplotTooltipDivider} />}
 
-			{showList && <TooltipList content={tooltipContent} />}
-
-			{canPinTooltip && <TooltipFooter isPinned={isPinned} dismiss={dismiss} />}
+			{showList && (
+				<Virtuoso
+					className={Styles.uplotTooltipList}
+					data-testid="uplot-tooltip-list"
+					data={tooltipContent}
+					style={{ height: virtuosoHeight, width: '100%' }}
+					totalListHeightChanged={setTotalListHeight}
+					itemContent={(_, item): JSX.Element => (
+						<TooltipItem item={item} isItemActive={false} />
+					)}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import userEvent from '@testing-library/user-event';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -93,6 +92,7 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
+		clickData: null,
 	} as TooltipTestProps;
 
 	return render(
@@ -191,85 +191,3 @@ describe('Tooltip', () => {
 		expect(list).toHaveStyle({ height: '76px' });
 	});
 });
-
-describe('Tooltip footer hint', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseIsDarkMode.mockReturnValue(false);
-	});
-
-	it('renders footer with "Press P to pin the tooltip" hint when not pinned', () => {
-		renderTooltip({ isPinned: false, canPinTooltip: true });
-
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toBeInTheDocument();
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('P');
-		expect(footer).toHaveTextContent('to pin the tooltip');
-	});
-
-	it('renders footer with "Press P or Esc to unpin" hint when pinned', () => {
-		renderTooltip({ isPinned: true, canPinTooltip: true });
-
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('P');
-		expect(footer).toHaveTextContent('Esc');
-		expect(footer).toHaveTextContent('to unpin');
-	});
-
-	it('does not render Unpin button when not pinned', () => {
-		renderTooltip({ isPinned: false, canPinTooltip: true });
-
-		expect(screen.queryByTestId('uplot-tooltip-unpin')).not.toBeInTheDocument();
-	});
-
-	it('renders Unpin button when pinned', () => {
-		renderTooltip({ isPinned: true, canPinTooltip: true });
-
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		expect(unpinBtn).toBeInTheDocument();
-		expect(unpinBtn).toHaveAttribute('aria-label', 'Unpin tooltip');
-	});
-
-	it('calls dismiss when Unpin button is clicked', async () => {
-		const dismiss = jest.fn();
-		renderTooltip({ isPinned: true, canPinTooltip: true, dismiss });
-
-		const user = userEvent.setup();
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		await user.click(unpinBtn);
-
-		expect(dismiss).toHaveBeenCalledTimes(1);
-	});
-
-	it('footer has role="status" for screen reader announcements', () => {
-		renderTooltip({ canPinTooltip: true });
-
-		const footer = screen.getByRole('status');
-		expect(footer).toBeInTheDocument();
-	});
-});
-
-describe('Tooltip header status pill', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseIsDarkMode.mockReturnValue(false);
-	});
-
-	it('shows Pinned status when pinned and header is visible', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance, isPinned: true });
-
-		expect(screen.getByText('Pinned')).toBeInTheDocument();
-	});
-
-	it('does not render status pill when showTooltipHeader is false', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance, showTooltipHeader: false, isPinned: false });
-
-		expect(screen.queryByTestId('uplot-tooltip-status')).not.toBeInTheDocument();
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.module.scss

@@ -1,18 +0,0 @@
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
-	padding: 7px 12px;
-	border-top: 1px solid var(--l2-border);
-	background: var(--l2-background);
-	border-radius: 0 0 6px 6px;
-}
-
-.hint {
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	font-size: 11px;
-	color: var(--l2-foreground);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.tsx

@@ -1,58 +0,0 @@
-import { Button } from '@signozhq/ui';
-import { Kbd } from '@signozhq/ui';
-import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { X } from 'lucide-react';
-
-import Styles from './TooltipFooter.module.scss';
-
-interface TooltipFooterProps {
-	pinKey?: string;
-	isPinned: boolean;
-	dismiss: () => void;
-}
-
-export default function TooltipFooter({
-	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
-	isPinned,
-	dismiss,
-}: TooltipFooterProps): JSX.Element {
-	return (
-		<div
-			className={Styles.footer}
-			role="status"
-			data-testid="uplot-tooltip-footer"
-		>
-			<div className={Styles.hint}>
-				{isPinned ? (
-					<>
-						<span>Press</span>
-						<Kbd active>{pinKey.toUpperCase()}</Kbd>
-						<span>or</span>
-						<Kbd active>Esc</Kbd>
-						<span>to unpin</span>
-					</>
-				) : (
-					<>
-						<span>Press</span>
-						<Kbd>{pinKey.toUpperCase()}</Kbd>
-						<span>to pin the tooltip</span>
-					</>
-				)}
-			</div>
-
-			{isPinned && (
-				<Button
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					onClick={dismiss}
-					aria-label="Unpin tooltip"
-					data-testid="uplot-tooltip-unpin"
-				>
-					<X size={10} />
-					<span>Unpin</span>
-				</Button>
-			)}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.module.scss

@@ -1,32 +0,0 @@
-.headerContainer {
-	padding: 1rem 1rem 0 1rem;
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-
-	&:last-child {
-		padding-bottom: var(--spacing-4);
-	}
-}
-
-.headerRow {
-	font-size: var(--font-size-sm);
-	font-weight: 500;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-2);
-}
-
-.status {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--callout-primary-title);
-	flex-shrink: 0;
-}
-

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx

@@ -1,85 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { Pin } from 'lucide-react';
-import { useTimezone } from 'providers/Timezone';
-import type uPlot from 'uplot';
-
-import { TooltipContentItem } from '../../../types';
-import TooltipItem from '../TooltipItem/TooltipItem';
-
-import Styles from './TooltipHeader.module.scss';
-
-interface TooltipHeaderProps {
-	uPlotInstance: uPlot;
-	timezone?: Timezone;
-	showTooltipHeader: boolean;
-	isPinned: boolean;
-	activeItem: TooltipContentItem | null;
-}
-
-export default function TooltipHeader({
-	uPlotInstance,
-	timezone,
-	showTooltipHeader,
-	isPinned,
-	activeItem,
-}: TooltipHeaderProps): JSX.Element {
-	const { timezone: userTimezone } = useTimezone();
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
-
-	const headerTitle = useMemo(() => {
-		if (!showTooltipHeader) {
-			return null;
-		}
-		const cursorIdx = uPlotInstance.cursor.idx;
-		if (cursorIdx == null) {
-			return null;
-		}
-		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
-		if (timestamp == null) {
-			return null;
-		}
-		return dayjs(timestamp * 1000)
-			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [
-		resolvedTimezone,
-		uPlotInstance.data,
-		uPlotInstance.cursor.idx,
-		showTooltipHeader,
-	]);
-
-	return (
-		<div
-			className={Styles.headerContainer}
-			data-testid="uplot-tooltip-header-container"
-		>
-			{showTooltipHeader && headerTitle && (
-				<div className={Styles.headerRow}>
-					<span>{headerTitle}</span>
-					{isPinned && (
-						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">
-							<>
-								<Pin size={12} />
-								<span>Pinned</span>
-							</>
-						</div>
-					)}
-				</div>
-			)}
-
-			{activeItem && (
-				<TooltipItem
-					item={activeItem}
-					isItemActive={true}
-					containerTestId="uplot-tooltip-pinned"
-					markerTestId="uplot-tooltip-pinned-marker"
-					contentTestId="uplot-tooltip-pinned-content"
-				/>
-			)}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.module.scss

@@ -1,27 +0,0 @@
-.list {
-	width: 100%;
-	:global(div[data-viewport-type='element']) {
-		left: 0;
-		box-sizing: border-box;
-		padding: 4px 12px 4px 16px;
-	}
-
-	&::-webkit-scrollbar {
-		width: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-100);
-		border-radius: 0.5rem;
-	}
-}
-
-.listLightMode {
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-400);
-	}
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.tsx

@@ -1,48 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { TooltipContentItem } from '../../../types';
-import TooltipItem from '../TooltipItem/TooltipItem';
-
-import Styles from './TooltipList.module.scss';
-
-// Fallback per-item height before Virtuoso reports the real total.
-const TOOLTIP_ITEM_HEIGHT = 38;
-const LIST_MAX_HEIGHT = 300;
-
-interface TooltipListProps {
-	content: TooltipContentItem[];
-}
-
-export default function TooltipList({
-	content,
-}: TooltipListProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [totalListHeight, setTotalListHeight] = useState(0);
-
-	// Use the measured height from Virtuoso when available; fall back to a
-	// per-item estimate on first render. Math.ceil prevents a 1 px
-	// subpixel rounding gap from triggering a spurious scrollbar.
-	const height = useMemo(
-		() =>
-			totalListHeight > 0
-				? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-				: Math.min(content.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT),
-		[totalListHeight, content.length],
-	);
-
-	return (
-		<Virtuoso
-			className={cx(Styles.list, !isDarkMode && Styles.listLightMode)}
-			data-testid="uplot-tooltip-list"
-			data={content}
-			style={{ height }}
-			totalListHeightChanged={setTotalListHeight}
-			itemContent={(_, item): JSX.Element => (
-				<TooltipItem item={item} isItemActive={false} />
-			)}
-		/>
-	);
-}

frontend/src/lib/uPlotV2/components/types.ts

@@ -62,7 +62,6 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -1,4 +1,4 @@
-.tooltipPluginContainer {
+.tooltip-plugin-container {
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -10,9 +10,13 @@
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
 	opacity: 0;
 	pointer-events: none;
-}
 
-.visible {
-	opacity: 1;
-	pointer-events: all;
+	&.pinned {
+		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+	}
+
+	&.visible {
+		opacity: 1;
+		pointer-events: all;
+	}
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
 import { syncCursorRegistry } from './syncCursorRegistry';
@@ -16,21 +17,18 @@ import {
 } from './tooltipController';
 import {
 	DashboardCursorSync,
-	DEFAULT_PIN_TOOLTIP_KEY,
+	TooltipClickData,
 	TooltipControllerContext,
 	TooltipControllerState,
 	TooltipLayoutInfo,
 	TooltipPluginProps,
 	TooltipViewState,
 } from './types';
-import {
-	buildClickData,
-	createInitialViewState,
-	createLayoutObserver,
-} from './utils';
+import { createInitialViewState, createLayoutObserver } from './utils';
 
-import Styles from './TooltipPlugin.module.scss';
+import './TooltipPlugin.styles.scss';
 
+const INTERACTIVE_CONTAINER_CLASSNAME = '.tooltip-plugin-container';
 // Delay before hiding an unpinned tooltip when the cursor briefly leaves
 // the plot – this avoids flicker when moving between nearby points.
 const HOVER_DISMISS_DELAY_MS = 100;
@@ -46,8 +44,6 @@ export default function TooltipPlugin({
 	syncMetadata,
 	pinnedTooltipElement,
 	canPinTooltip = false,
-	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
-	onClick,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const rafId = useRef<number | null>(null);
@@ -135,8 +131,8 @@ export default function TooltipPlugin({
 		// Dismiss the tooltip when the user clicks / presses a key
 		// outside the tooltip container while it is pinned.
 		const onOutsideInteraction = (event: Event): void => {
-			const target = event.target as Node;
-			if (!containerRef.current?.contains(target)) {
+			const target = event.target as HTMLElement;
+			if (!target.closest(INTERACTIVE_CONTAINER_CLASSNAME)) {
 				dismissTooltip();
 			}
 		};
@@ -163,14 +159,13 @@ export default function TooltipPlugin({
 
 		// Attach / detach global listeners when pin state changes so
 		// we can detect when the user interacts outside the tooltip.
-		// Keyboard unpinning is handled exclusively in handleKeyDown so
-		// that only P (toggle) and Escape (release) can dismiss — not
-		// arbitrary keystrokes like arrow keys or Tab.
 		function toggleOutsideListeners(enable: boolean): void {
 			if (enable) {
 				document.addEventListener('mousedown', onOutsideInteraction, true);
+				document.addEventListener('keydown', onOutsideInteraction, true);
 			} else {
 				document.removeEventListener('mousedown', onOutsideInteraction, true);
+				document.removeEventListener('keydown', onOutsideInteraction, true);
 			}
 		}
 
@@ -288,84 +283,66 @@ export default function TooltipPlugin({
 			}
 		};
 
-		// Handles all tooltip-pin keyboard interactions:
-		//   Escape  — always releases the tooltip when pinned (never steals Escape
-		//             from other handlers since we do not call stopPropagation).
-		//   pinKey  — toggles: pins when hovering+unpinned, unpins when pinned.
-		const handleKeyDown = (event: KeyboardEvent): void => {
-			// Escape: release-only (never toggles on).
-			if (event.key === 'Escape') {
-				if (controller.pinned) {
-					dismissTooltip();
-				}
-				return;
-			}
-
-			if (event.key.toLowerCase() !== pinKey.toLowerCase()) {
-				return;
-			}
-
-			// Toggle off: P pressed while already pinned.
-			if (controller.pinned) {
-				dismissTooltip();
-				return;
-			}
-
-			// Toggle on: P pressed while hovering.
+		// When pinning is enabled, a click on the plot overlay while
+		// hovering converts the transient tooltip into a pinned one.
+		// Uses getPlot(controller) to avoid closing over u (plot), which
+		// would retain the plot and detached canvases across unmounts.
+		const handleUPlotOverClick = (event: MouseEvent): void => {
 			const plot = getPlot(controller);
-			if (
-				!plot ||
-				!controller.hoverActive ||
-				controller.focusedSeriesIndex == null
-			) {
-				return;
-			}
-
-			const cursorLeft = plot.cursor.left ?? -1;
-			const cursorTop = plot.cursor.top ?? -1;
-			if (cursorLeft < 0 || cursorTop < 0) {
-				return;
-			}
-
-			const plotRect = plot.over.getBoundingClientRect();
-			const syntheticEvent = ({
-				clientX: plotRect.left + cursorLeft,
-				clientY: plotRect.top + cursorTop,
-				target: plot.over,
-				offsetX: cursorLeft,
-				offsetY: cursorTop,
-			} as unknown) as MouseEvent;
-
-			controller.clickData = buildClickData(syntheticEvent, plot);
-			controller.pinned = true;
-			scheduleRender(true);
-		};
-
-		// Forward overlay clicks to the consumer-provided onClick callback.
-		const handleOverClick = (event: MouseEvent): void => {
-			const plot = getPlot(controller);
-			/**
-			 * Only trigger onClick if the click happened on the plot overlay and there is a focused series.
-			 * It also ensures that clicks only trigger onClick when there is a relevant data point (i.e. a focused series) to provide context for the click.
-			 */
 			if (
 				plot &&
 				event.target === plot.over &&
+				controller.hoverActive &&
+				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
-				const clickData = buildClickData(event, plot);
-				onClick?.(clickData);
+				const xValue = plot.posToVal(event.offsetX, 'x');
+				const yValue = plot.posToVal(event.offsetY, 'y');
+				const focusedSeries = getFocusedSeriesAtPosition(event, plot);
+
+				let clickedDataTimestamp = xValue;
+				if (focusedSeries) {
+					const dataIndex = plot.posToIdx(event.offsetX);
+					const xSeriesData = plot.data[0];
+					if (
+						xSeriesData &&
+						dataIndex >= 0 &&
+						dataIndex < xSeriesData.length &&
+						xSeriesData[dataIndex] !== undefined
+					) {
+						clickedDataTimestamp = xSeriesData[dataIndex];
+					}
+				}
+
+				const clickData: TooltipClickData = {
+					xValue,
+					yValue,
+					focusedSeries,
+					clickedDataTimestamp,
+					mouseX: event.offsetX,
+					mouseY: event.offsetY,
+					absoluteMouseX: event.clientX,
+					absoluteMouseY: event.clientY,
+				};
+
+				controller.clickData = clickData;
+
+				setTimeout(() => {
+					controller.pinned = true;
+					scheduleRender(true);
+				}, 0);
 			}
 		};
 
 		let overClickHandler: ((event: MouseEvent) => void) | null = null;
 
-		// Called once per uPlot instance; used to store the instance on the controller.
+		// Called once per uPlot instance; used to store the instance
+		// on the controller and optionally attach the pinning handler.
 		const handleInit = (u: uPlot): void => {
 			controller.plot = u;
 			updateState({ hasPlot: true });
-			if (onClick) {
-				overClickHandler = handleOverClick;
+			if (canPinTooltip) {
+				overClickHandler = handleUPlotOverClick;
 				u.over.addEventListener('click', overClickHandler);
 			}
 		};
@@ -412,18 +389,13 @@ export default function TooltipPlugin({
 
 		window.addEventListener('resize', handleWindowResize);
 		window.addEventListener('scroll', handleScroll, true);
-		if (canPinTooltip) {
-			document.addEventListener('keydown', handleKeyDown, true);
-		}
 
 		return (): void => {
 			layoutRef.current?.observer.disconnect();
 			window.removeEventListener('resize', handleWindowResize);
 			window.removeEventListener('scroll', handleScroll, true);
 			document.removeEventListener('mousedown', onOutsideInteraction, true);
-			if (canPinTooltip) {
-				document.removeEventListener('keydown', handleKeyDown, true);
-			}
+			document.removeEventListener('keydown', onOutsideInteraction, true);
 			cancelPendingRender();
 			removeReadyHook();
 			removeInitHook();
@@ -433,7 +405,9 @@ export default function TooltipPlugin({
 			removeSetCursorHook();
 			if (overClickHandler) {
 				const plot = getPlot(controller);
-				plot?.over.removeEventListener('click', overClickHandler);
+				if (plot) {
+					plot.over.removeEventListener('click', overClickHandler);
+				}
 				overClickHandler = null;
 			}
 			clearPlotReferences();
@@ -473,12 +447,8 @@ export default function TooltipPlugin({
 	}, [isHovering, hasPlot]);
 
 	const tooltipBody = useMemo(() => {
-		if (isPinned) {
-			if (pinnedTooltipElement != null && viewState.clickData != null) {
-				return pinnedTooltipElement(viewState.clickData);
-			}
-			// No custom pinned element — keep showing the last hover contents.
-			return contents ?? null;
+		if (isPinned && pinnedTooltipElement != null && viewState.clickData != null) {
+			return pinnedTooltipElement(viewState.clickData);
 		}
 
 		if (isHovering) {
@@ -501,8 +471,9 @@ export default function TooltipPlugin({
 
 	return createPortal(
 		<div
-			className={cx(Styles.tooltipPluginContainer, {
-				[Styles.visible]: isTooltipVisible,
+			className={cx('tooltip-plugin-container', {
+				pinned: isPinned,
+				visible: isTooltipVisible,
 			})}
 			style={{
 				...style,
@@ -513,7 +484,6 @@ export default function TooltipPlugin({
 			aria-atomic="true"
 			aria-hidden={!isTooltipVisible}
 			ref={containerRef}
-			data-pinned={isPinned}
 			data-testid="tooltip-plugin-container"
 		>
 			{tooltipBody}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -102,12 +102,6 @@ export function updateHoverState(
 	controller: TooltipControllerState,
 	syncTooltipWithDashboard: boolean,
 ): void {
-	// When pinned, keep hoverActive stable so the tooltip stays visible
-	// until explicitly dismissed — the cursor lock fires asynchronously
-	// and setSeries/setLegend can otherwise race and clear hoverActive.
-	if (controller.pinned) {
-		return;
-	}
 	// When the cursor is driven by dashboard‑level sync, we only show
 	// the tooltip if the plot is in viewport and at least one series
 	// is active. Otherwise we fall back to local interaction logic.

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -11,9 +11,6 @@ import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 
 export const TOOLTIP_OFFSET = 10;
 
-// Default key that pins the tooltip while hovering over the chart.
-export const DEFAULT_PIN_TOOLTIP_KEY = 'p';
-
 export enum DashboardCursorSync {
 	Crosshair,
 	None,
@@ -44,10 +41,6 @@ export interface TooltipSyncMetadata {
 export interface TooltipPluginProps {
 	config: UPlotConfigBuilder;
 	canPinTooltip?: boolean;
-	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
-	pinKey?: string;
-	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	syncMetadata?: TooltipSyncMetadata;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -1,11 +1,4 @@
-import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
-
-import {
-	TOOLTIP_OFFSET,
-	TooltipClickData,
-	TooltipLayoutInfo,
-	TooltipViewState,
-} from './types';
+import { TOOLTIP_OFFSET, TooltipLayoutInfo, TooltipViewState } from './types';
 
 export function isPlotInViewport(
 	rect: uPlot.BBox,
@@ -165,40 +158,3 @@ export function createLayoutObserver(
 	};
 	return layout;
 }
-
-/**
- * Resolves a TooltipClickData snapshot from a MouseEvent (real or synthetic)
- * and the current uPlot instance. Shared by the overlay click handler and the
- * keyboard-pin handler (which synthesises an event from the cursor position).
- */
-export function buildClickData(
-	event: MouseEvent,
-	plot: uPlot,
-): TooltipClickData {
-	const xValue = plot.posToVal(event.offsetX, 'x');
-	const yValue = plot.posToVal(event.offsetY, 'y');
-	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
-
-	const dataIndex = plot.posToIdx(event.offsetX);
-	let clickedDataTimestamp = xValue;
-	const xSeriesData = plot.data[0];
-	if (
-		xSeriesData &&
-		dataIndex >= 0 &&
-		dataIndex < xSeriesData.length &&
-		xSeriesData[dataIndex] !== undefined
-	) {
-		clickedDataTimestamp = xSeriesData[dataIndex];
-	}
-
-	return {
-		xValue,
-		yValue,
-		focusedSeries,
-		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
-	};
-}

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -7,10 +7,7 @@ import type uPlot from 'uplot';
 import { TooltipRenderArgs } from '../../components/types';
 import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
-import {
-	DashboardCursorSync,
-	DEFAULT_PIN_TOOLTIP_KEY,
-} from '../TooltipPlugin/types';
+import { DashboardCursorSync } from '../TooltipPlugin/types';
 
 // Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
 // We only care that pinning logic runs without throwing, not which series is focused.
@@ -63,7 +60,7 @@ function getHandler(config: ConfigMock, hookName: string): HookHandler {
 function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
-	cursor: { event: Record<string, unknown>; left: number; top: number };
+	cursor: { event: Record<string, unknown> };
 	posToVal: jest.Mock<number, [value: number]>;
 	posToIdx: jest.Mock<number, []>;
 	data: [number[], number[]];
@@ -74,9 +71,7 @@ function createFakePlot(): {
 	return {
 		over,
 		setCursor: jest.fn(),
-		// left / top are set to valid values so keyboard-pin tests do not
-		// hit the "cursor off-screen" guard inside handleKeyDown.
-		cursor: { event: {}, left: 50, top: 50 },
+		cursor: { event: {} },
 		// In real uPlot these map overlay coordinates to data-space values.
 		posToVal: jest.fn((value: number) => value),
 		posToIdx: jest.fn(() => 0),
@@ -149,7 +144,7 @@ describe('TooltipPlugin', () => {
 				}),
 			);
 
-			expect(screen.queryByTestId('tooltip-plugin-container')).toBeNull();
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 		});
 
 		it('registers all required uPlot hooks on mount', () => {
@@ -187,7 +182,9 @@ describe('TooltipPlugin', () => {
 			expect(renderTooltip).toHaveBeenCalled();
 			expect(screen.getByText('tooltip-body')).toBeInTheDocument();
 
-			const container = screen.getByTestId('tooltip-plugin-container');
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
 			expect(container).not.toBeNull();
 			expect(container.parentElement).toBe(document.body);
 		});
@@ -206,7 +203,9 @@ describe('TooltipPlugin', () => {
 
 			renderAndActivateHover(config);
 
-			const container = screen.getByTestId('tooltip-plugin-container');
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
 			expect(container.parentElement).toBe(document.body);
 
 			const fullscreenRoot = document.createElement('div');
@@ -246,27 +245,24 @@ describe('TooltipPlugin', () => {
 	// ---- Pin behaviour ----------------------------------------------------------
 
 	describe('pin behaviour', () => {
-		it('pins the tooltip when canPinTooltip is true and the pinKey is pressed while hovering', () => {
+		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
 			const config = createConfigMock();
 
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
+			const fakePlot = renderAndActivateHover(config, undefined, {
+				canPinTooltip: true,
+			});
 
 			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.classList.contains('pinned')).toBe(false);
 
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
 			return waitFor(() => {
 				const updated = screen.getByTestId('tooltip-plugin-container');
 				expect(updated).toBeInTheDocument();
-				expect(updated.getAttribute('data-pinned') === 'true').toBe(true);
+				expect(updated.classList.contains('pinned')).toBe(true);
 			});
 		});
 
@@ -276,7 +272,7 @@ describe('TooltipPlugin', () => {
 				React.createElement('div', null, 'pinned-tooltip'),
 			);
 
-			renderAndActivateHover(
+			const fakePlot = renderAndActivateHover(
 				config,
 				() => React.createElement('div', null, 'hover-tooltip'),
 				{
@@ -288,12 +284,7 @@ describe('TooltipPlugin', () => {
 			expect(screen.getByText('hover-tooltip')).toBeInTheDocument();
 
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
 			await waitFor(() => {
@@ -327,20 +318,18 @@ describe('TooltipPlugin', () => {
 				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
 			});
 
-			// Pin the tooltip via the keyboard shortcut.
+			// Pin the tooltip.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			});
 
-			// Wait until the tooltip is actually pinned.
+			// Wait until the tooltip is actually pinned (pointer events enabled)
 			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(true);
+				const container = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(container).not.toBeNull();
+				expect(container?.classList.contains('pinned')).toBe(true);
 			});
 
 			const button = await screen.findByRole('button', { name: 'Dismiss' });
@@ -353,7 +342,8 @@ describe('TooltipPlugin', () => {
 
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.classList.contains('visible')).toBe(false);
+				expect(container.classList.contains('pinned')).toBe(false);
 				expect(container.textContent).toBe('');
 			});
 		});
@@ -379,21 +369,16 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
+			// Pin.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
 			expect(
-				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+				(document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement)?.classList.contains('pinned'),
 			).toBe(true);
 
 			// Simulate data update – should dismiss the pinned tooltip.
@@ -405,7 +390,8 @@ describe('TooltipPlugin', () => {
 			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container).toBeInTheDocument();
 			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.classList.contains('visible')).toBe(false);
+			expect(container.classList.contains('pinned')).toBe(false);
 
 			jest.useRealTimers();
 		});
@@ -431,21 +417,15 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
 			expect(
-				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+				document
+					.querySelector('.tooltip-plugin-container')
+					?.classList.contains('pinned'),
 			).toBe(true);
 
 			// Click outside the tooltip container.
@@ -459,13 +439,14 @@ describe('TooltipPlugin', () => {
 
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.classList.contains('visible')).toBe(false);
+				expect(container.classList.contains('pinned')).toBe(false);
 			});
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip when Escape is pressed while pinned', async () => {
+		it('unpins the tooltip on outside keydown', async () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -486,24 +467,18 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			// Pin via keyboard.
 			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				jest.runAllTimers();
 			});
 
 			expect(
-				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+				document
+					.querySelector('.tooltip-plugin-container')
+					?.classList.contains('pinned'),
 			).toBe(true);
 
-			// Press Escape to release.
+			// Press a key outside the tooltip.
 			act(() => {
 				document.body.dispatchEvent(
 					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
@@ -515,282 +490,12 @@ describe('TooltipPlugin', () => {
 				const container = screen.getByTestId('tooltip-plugin-container');
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.classList.contains('visible')).toBe(false);
+				expect(container.classList.contains('pinned')).toBe(false);
 			});
 
 			jest.useRealTimers();
 		});
-
-		it('unpins the tooltip when the pin key is pressed a second time (toggle off)', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-			jest.runAllTimers();
-
-			// First press — pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
-				).toBe(true);
-			});
-
-			// Second press — unpin (toggle off).
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
-			});
-
-			jest.useRealTimers();
-		});
-
-		it('does not unpin on Escape when tooltip is not pinned', () => {
-			const config = createConfigMock();
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-
-			// Escape without pinning first — should be a no-op.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-				);
-			});
-
-			const container = screen.getByTestId('tooltip-plugin-container');
-			// Tooltip should still be hovering (visible), not dismissed.
-			expect(container.getAttribute('aria-hidden')).toBe('false');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
-		});
-
-		it('does not unpin on arbitrary keys that are not Escape or the pin key', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, { canPinTooltip: true });
-			jest.runAllTimers();
-
-			// Pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
-				).toBe(true);
-			});
-
-			// Arrow key — should NOT unpin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
-				);
-				jest.runAllTimers();
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
-				).toBe(true);
-			});
-
-			jest.useRealTimers();
-		});
-	});
-
-	// ---- Keyboard pin edge cases ------------------------------------------------
-
-	describe('keyboard pin edge cases', () => {
-		it('does not pin when cursor coordinates are negative (cursor off-screen)', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			// Negative cursor coords — handleKeyDown bails out before pinning.
-			const fakePlot = {
-				...createFakePlot(),
-				cursor: { event: {}, left: -1, top: -1 },
-			};
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-			});
-
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-			});
-
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
-		});
-
-		it('does not pin when hover is not active', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				// Initialise the plot but do NOT call setSeries – hoverActive stays false.
-				getHandler(config, 'init')(fakePlot);
-			});
-
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: DEFAULT_PIN_TOOLTIP_KEY,
-						bubbles: true,
-					}),
-				);
-			});
-
-			// The container exists once the plot is initialised, but it should
-			// be hidden and not pinned since hover was never activated.
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
-			expect(container.getAttribute('aria-hidden')).toBe('true');
-		});
-
-		it('ignores other keys and only pins on the configured pinKey', async () => {
-			const config = createConfigMock();
-
-			renderAndActivateHover(config, undefined, {
-				canPinTooltip: true,
-				pinKey: 'p',
-			});
-
-			// 'l' should NOT pin when pinKey is 'p'.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', {
-						key: 'l',
-						bubbles: true,
-					}),
-				);
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
-				).toBe(false);
-			});
-
-			// Custom pin key 'p' SHOULD pin.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'p', bubbles: true }),
-				);
-			});
-
-			await waitFor(() => {
-				expect(
-					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
-				).toBe(true);
-			});
-		});
-
-		it('does not register a keydown listener when canPinTooltip is false', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(document, 'addEventListener');
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: false,
-				}),
-			);
-
-			const keydownCalls = addSpy.mock.calls.filter(
-				([type]) => type === 'keydown',
-			);
-			expect(keydownCalls).toHaveLength(0);
-		});
-
-		it('removes the keydown pin listener on unmount', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(document, 'addEventListener');
-			const removeSpy = jest.spyOn(document, 'removeEventListener');
-
-			const { unmount } = render(
-				React.createElement(TooltipPlugin, {
-					config,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const pinListenerCall = addSpy.mock.calls.find(
-				([type]) => type === 'keydown',
-			);
-			expect(pinListenerCall).toBeDefined();
-			if (!pinListenerCall) {
-				return;
-			}
-			const [, pinListener, pinOptions] = pinListenerCall;
-
-			unmount();
-
-			expect(removeSpy).toHaveBeenCalledWith('keydown', pinListener, pinOptions);
-		});
 	});
 
 	// ---- Cursor sync ------------------------------------------------------------

frontend/src/pages/AllErrors/QueryStateContext.ts

@@ -1,23 +0,0 @@
-import { create } from 'zustand';
-
-interface AllErrorsQueryState {
-	isFetching: boolean;
-	isCancelled: boolean;
-	setIsFetching: (isFetching: boolean) => void;
-	setIsCancelled: (isCancelled: boolean) => void;
-}
-
-export const useAllErrorsQueryState = create<AllErrorsQueryState>((set) => ({
-	isFetching: false,
-	isCancelled: false,
-	setIsFetching: (isFetching): void => {
-		set((state) => ({
-			isFetching,
-			// Auto-reset cancelled when a new fetch starts
-			isCancelled: isFetching ? false : state.isCancelled,
-		}));
-	},
-	setIsCancelled: (isCancelled): void => {
-		set({ isCancelled });
-	},
-}));

frontend/src/pages/AllErrors/index.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { FilterOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -20,22 +19,12 @@ import history from 'lib/history';
 import { isNull } from 'lodash-es';
 
 import { routes } from './config';
-import { useAllErrorsQueryState } from './QueryStateContext';
 
 import './AllErrors.styles.scss';
 
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();
-
-	const isLoadingQueries = useAllErrorsQueryState((s) => s.isFetching);
-	const setIsCancelled = useAllErrorsQueryState((s) => s.setIsCancelled);
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(['getAllErrors']);
-		queryClient.cancelQueries(['getErrorCounts']);
-		setIsCancelled(true);
-	}, [queryClient, setIsCancelled]);
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -88,11 +77,7 @@ function AllErrors(): JSX.Element {
 							}
 							rightActions={
 								<div className="right-toolbar-actions-container">
-									<RightToolbarActions
-										onStageRunQuery={handleRunQuery}
-										isLoadingQueries={isLoadingQueries}
-										handleCancelQuery={handleCancelQuery}
-									/>
+									<RightToolbarActions onStageRunQuery={handleRunQuery} />
 									<HeaderRightSection
 										enableAnnouncements={false}
 										enableShare

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,12 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -76,27 +74,6 @@ function LogsExplorer(): JSX.Element {
 	const chartQueryKeyRef = useRef<any>();
 
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const queryClient = useQueryClient();
-	const handleCancelQuery = useCallback(() => {
-		if (listQueryKeyRef.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		if (chartQueryKeyRef.current) {
-			queryClient.cancelQueries(chartQueryKeyRef.current);
-		}
-		setIsCancelled(true);
-		// Reset loading state — the views container unmounts when cancelled, so
-		// no child will call setIsLoadingQueries(false) otherwise.
-		setIsLoadingQueries(false);
-	}, [queryClient]);
 
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
@@ -319,12 +296,10 @@ function LogsExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => {
-										setIsCancelled(false);
-										handleRunQuery();
-									}}
+									onStageRunQuery={(): void => handleRunQuery()}
+									listQueryKeyRef={listQueryKeyRef}
+									chartQueryKeyRef={chartQueryKeyRef}
 									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
 									showLiveLogs={showLiveLogs}
 								/>
 							}
@@ -340,18 +315,14 @@ function LogsExplorer(): JSX.Element {
 								</ExplorerCard>
 							</div>
 							<div className="logs-explorer-views">
-								{isCancelled ? (
-									<QueryCancelledPlaceholder subText='Click "Run Query" to load logs.' />
-								) : (
-									<LogsExplorerViewsContainer
-										listQueryKeyRef={listQueryKeyRef}
-										chartQueryKeyRef={chartQueryKeyRef}
-										setIsLoadingQueries={setIsLoadingQueries}
-										setWarning={setWarning}
-										showLiveLogs={showLiveLogs}
-										handleChangeSelectedView={handleChangeSelectedView}
-									/>
-								)}
+								<LogsExplorerViewsContainer
+									listQueryKeyRef={listQueryKeyRef}
+									chartQueryKeyRef={chartQueryKeyRef}
+									setIsLoadingQueries={setIsLoadingQueries}
+									setWarning={setWarning}
+									showLiveLogs={showLiveLogs}
+									handleChangeSelectedView={handleChangeSelectedView}
+								/>
 							</div>
 						</div>
 					</section>

frontend/src/pages/TracesExplorer/index.tsx

@@ -1,12 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -73,29 +71,11 @@ function TracesExplorer(): JSX.Element {
 	});
 
 	const [searchParams] = useSearchParams();
-	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();
 
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		if (listQueryKeyRef.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		setIsCancelled(true);
-		// Reset loading state — the active view unmounts when cancelled, so no
-		// child will call setIsLoadingQueries(false) otherwise.
-		setIsLoadingQueries(false);
-	}, [queryClient]);
 
 	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
 		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
@@ -230,12 +210,9 @@ function TracesExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => {
-										setIsCancelled(false);
-										handleRunQuery();
-									}}
+									onStageRunQuery={(): void => handleRunQuery()}
 									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
+									listQueryKeyRef={listQueryKeyRef}
 								/>
 							}
 						/>
@@ -247,11 +224,7 @@ function TracesExplorer(): JSX.Element {
 					</ExplorerCard>
 
 					<div className="traces-explorer-views">
-						{isCancelled && (
-							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.LIST && (
+						{selectedView === ExplorerViews.LIST && (
 							<div className="trace-explorer-list-view">
 								<ListView
 									isFilterApplied={isFilterApplied}
@@ -262,7 +235,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{!isCancelled && selectedView === ExplorerViews.TRACE && (
+						{selectedView === ExplorerViews.TRACE && (
 							<div className="trace-explorer-traces-view">
 								<TracesView
 									isFilterApplied={isFilterApplied}
@@ -273,7 +246,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
+						{selectedView === ExplorerViews.TIMESERIES && (
 							<div className="trace-explorer-time-series-view">
 								<TimeSeriesView
 									dataSource={DataSource.TRACES}
@@ -285,7 +258,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{!isCancelled && selectedView === ExplorerViews.TABLE && (
+						{selectedView === ExplorerViews.TABLE && (
 							<div className="trace-explorer-table-view">
 								<TableView
 									setWarning={setWarning}

frontend/yarn.lock

@@ -5593,10 +5593,10 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/ui@0.0.10":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.10.tgz#cdbab838f8cb543cf5b483a86e9d9b65265b81ff"
-  integrity sha512-XLeET+PgSP7heqKMsb9YZOSRT3TpfMPHNQRnY1I4SK8mXSct7BYWwK0Q3Je0uf4Z3aWOcpRYoRUPHWZQBpweFQ==
+"@signozhq/ui@0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.9.tgz#e00f2ec86c5528eea91d1669510a702c4253de0d"
+  integrity sha512-L9DV0OF69Z2sMnxwPEGpSTiDxI/liT6+QfzngGVnxMl/9t3WKcPr1/p8dbPOcAS6bU9lQEBOiYlsoIejM8DsXw==
   dependencies:
     "@chenglou/pretext" "^0.0.5"
     "@radix-ui/react-checkbox" "^1.2.3"

go.mod

@@ -66,7 +66,6 @@ require (
 	github.com/uptrace/bun/dialect/pgdialect v1.2.9
 	github.com/uptrace/bun/dialect/sqlitedialect v1.2.9
 	github.com/uptrace/bun/extra/bunotel v1.2.9
-	github.com/yuin/goldmark v1.7.16
 	go.opentelemetry.io/collector/confmap v1.51.0
 	go.opentelemetry.io/collector/otelcol v0.144.0
 	go.opentelemetry.io/collector/pdata v1.51.0

go.sum

@@ -1153,8 +1153,6 @@ github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9de
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
-github.com/yuin/goldmark v1.7.16 h1:n+CJdUxaFMiDUNnWC3dMWCIQJSkxH4uz3ZwQBkAlVNE=
-github.com/yuin/goldmark v1.7.16/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 github.com/zeebo/assert v1.3.1 h1:vukIABvugfNMZMQO1ABsyQDJDTVQbn+LWSMy1ol1h6A=

pkg/apiserver/signozapiserver/inframonitoring.go

@@ -1,33 +0,0 @@
-package signozapiserver
-
-import (
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/http/handler"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
-	"github.com/gorilla/mux"
-)
-
-func (provider *provider) addInfraMonitoringRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v2/infra_monitoring/hosts", handler.New(
-		provider.authZ.ViewAccess(provider.infraMonitoringHandler.ListHosts),
-		handler.OpenAPIDef{
-			ID:                  "ListHosts",
-			Tags:                []string{"inframonitoring"},
-			Summary:             "List Hosts for Infra Monitoring",
-			Description:         "Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports missing required metrics and whether the requested time range falls before the data retention boundary.",
-			Request:             new(inframonitoringtypes.PostableHosts),
-			RequestContentType:  "application/json",
-			Response:            new(inframonitoringtypes.Hosts),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-		})).Methods(http.MethodPost).GetError(); err != nil {
-		return err
-	}
-
-	return nil
-}

pkg/apiserver/signozapiserver/llmpricingrule.go

@@ -1,95 +0,0 @@
-package signozapiserver
-
-import (
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/http/handler"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
-	"github.com/gorilla/mux"
-)
-
-func (provider *provider) addLLMPricingRuleRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v1/llm_pricing_rules", handler.New(
-		provider.authZ.ViewAccess(provider.llmPricingRuleHandler.List),
-		handler.OpenAPIDef{
-			ID:                  "ListLLMPricingRules",
-			Tags:                []string{"llm-pricing-rules"},
-			Summary:             "List pricing rules",
-			Description:         "Returns all LLM pricing rules for the authenticated org, with pagination.",
-			Request:             nil,
-			RequestContentType:  "",
-			RequestQuery:        new(llmpricingruletypes.ListPricingRulesQuery),
-			Response:            new(llmpricingruletypes.GettablePricingRules),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-		},
-	)).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v1/llm_pricing_rules", handler.New(
-		provider.authZ.AdminAccess(provider.llmPricingRuleHandler.Update),
-		handler.OpenAPIDef{
-			ID:                  "UpdateLLMPricingRules",
-			Tags:                []string{"llm-pricing-rules"},
-			Summary:             "Bulk update pricing rules",
-			Description:         "Single write endpoint used by both the user and the Zeus sync job. Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true) are fully preserved when the request does not provide isOverride; only synced_at is stamped.",
-			Request:             new(llmpricingruletypes.UpdatablePricingRulesRequest),
-			RequestContentType:  "application/json",
-			Response:            new(llmpricingruletypes.UpdatablePricingRulesResponse),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-		},
-	)).Methods(http.MethodPut).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v1/llm_pricing_rules/{id}", handler.New(
-		provider.authZ.ViewAccess(provider.llmPricingRuleHandler.Get),
-		handler.OpenAPIDef{
-			ID:                  "GetLLMPricingRule",
-			Tags:                []string{"llm-pricing-rules"},
-			Summary:             "Get a pricing rule",
-			Description:         "Returns a single LLM pricing rule by ID.",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(llmpricingruletypes.GettablePricingRule),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-		},
-	)).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
-	if err := router.Handle("/api/v1/llm_pricing_rules/{id}", handler.New(
-		provider.authZ.AdminAccess(provider.llmPricingRuleHandler.Delete),
-		handler.OpenAPIDef{
-			ID:                  "DeleteLLMPricingRule",
-			Tags:                []string{"llm-pricing-rules"},
-			Summary:             "Delete a pricing rule",
-			Description:         "Hard-deletes a pricing rule. If auto-synced, it will be recreated on the next sync cycle.",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            nil,
-			ResponseContentType: "",
-			SuccessStatusCode:   http.StatusNoContent,
-			ErrorStatusCodes:    []int{http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-		},
-	)).Methods(http.MethodDelete).GetError(); err != nil {
-		return err
-	}
-
-	return nil
-}

pkg/apiserver/signozapiserver/provider.go

@@ -16,8 +16,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/fields"
-	"github.com/SigNoz/signoz/pkg/modules/inframonitoring"
-	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
@@ -51,7 +49,6 @@ type provider struct {
 	dashboardModule         dashboard.Module
 	dashboardHandler        dashboard.Handler
 	metricsExplorerHandler  metricsexplorer.Handler
-	infraMonitoringHandler  inframonitoring.Handler
 	gatewayHandler          gateway.Handler
 	fieldsHandler           fields.Handler
 	authzHandler            authz.Handler
@@ -64,7 +61,6 @@ type provider struct {
 	ruleStateHistoryHandler rulestatehistory.Handler
 	alertmanagerHandler     alertmanager.Handler
 	rulerHandler            ruler.Handler
-	llmPricingRuleHandler   llmpricingrule.Handler
 }
 
 func NewFactory(
@@ -81,7 +77,6 @@ func NewFactory(
 	dashboardModule dashboard.Module,
 	dashboardHandler dashboard.Handler,
 	metricsExplorerHandler metricsexplorer.Handler,
-	infraMonitoringHandler inframonitoring.Handler,
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
@@ -93,7 +88,6 @@ func NewFactory(
 	cloudIntegrationHandler cloudintegration.Handler,
 	ruleStateHistoryHandler rulestatehistory.Handler,
 	alertmanagerHandler alertmanager.Handler,
-	llmPricingRuleHandler llmpricingrule.Handler,
 	rulerHandler ruler.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config apiserver.Config) (apiserver.APIServer, error) {
@@ -114,7 +108,6 @@ func NewFactory(
 			dashboardModule,
 			dashboardHandler,
 			metricsExplorerHandler,
-			infraMonitoringHandler,
 			gatewayHandler,
 			fieldsHandler,
 			authzHandler,
@@ -126,7 +119,6 @@ func NewFactory(
 			cloudIntegrationHandler,
 			ruleStateHistoryHandler,
 			alertmanagerHandler,
-			llmPricingRuleHandler,
 			rulerHandler,
 		)
 	})
@@ -149,7 +141,6 @@ func newProvider(
 	dashboardModule dashboard.Module,
 	dashboardHandler dashboard.Handler,
 	metricsExplorerHandler metricsexplorer.Handler,
-	infraMonitoringHandler inframonitoring.Handler,
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
@@ -161,8 +152,6 @@ func newProvider(
 	cloudIntegrationHandler cloudintegration.Handler,
 	ruleStateHistoryHandler rulestatehistory.Handler,
 	alertmanagerHandler alertmanager.Handler,
-	llmPricingRuleHandler llmpricingrule.Handler,
-
 	rulerHandler ruler.Handler,
 ) (apiserver.APIServer, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/apiserver/signozapiserver")
@@ -183,7 +172,6 @@ func newProvider(
 		dashboardModule:         dashboardModule,
 		dashboardHandler:        dashboardHandler,
 		metricsExplorerHandler:  metricsExplorerHandler,
-		infraMonitoringHandler:  infraMonitoringHandler,
 		gatewayHandler:          gatewayHandler,
 		fieldsHandler:           fieldsHandler,
 		authzHandler:            authzHandler,
@@ -196,7 +184,6 @@ func newProvider(
 		ruleStateHistoryHandler: ruleStateHistoryHandler,
 		alertmanagerHandler:     alertmanagerHandler,
 		rulerHandler:            rulerHandler,
-		llmPricingRuleHandler:   llmPricingRuleHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -253,10 +240,6 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
-	if err := provider.addInfraMonitoringRoutes(router); err != nil {
-		return err
-	}
-
 	if err := provider.addGatewayRoutes(router); err != nil {
 		return err
 	}
@@ -305,10 +288,6 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
-	if err := provider.addLLMPricingRuleRoutes(router); err != nil {
-		return err
-	}
-
 	if err := provider.addRulerRoutes(router); err != nil {
 		return err
 	}

pkg/modules/inframonitoring/config.go

@@ -1,33 +0,0 @@
-package inframonitoring
-
-import (
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-)
-
-type Config struct {
-	TelemetryStore TelemetryStoreConfig `mapstructure:"telemetrystore"`
-}
-
-type TelemetryStoreConfig struct {
-	Threads int `mapstructure:"threads"`
-}
-
-func NewConfigFactory() factory.ConfigFactory {
-	return factory.NewConfigFactory(factory.MustNewName("inframonitoring"), newConfig)
-}
-
-func newConfig() factory.Config {
-	return Config{
-		TelemetryStore: TelemetryStoreConfig{
-			Threads: 8,
-		},
-	}
-}
-
-func (c Config) Validate() error {
-	if c.TelemetryStore.Threads <= 0 {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "inframonitoring.telemetrystore.threads must be positive, got %d", c.TelemetryStore.Threads)
-	}
-	return nil
-}